4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T1d52,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { sculptureNumber } from "@/lib/cojeev/sculpture-raster"; import { Button } from "@/components/ui/button"; import { Icon } from "@/components/ui/icon"; import { Slider, SliderOutput } from "@/components/ui/slider"; import { Label } from "@/components/ui/label"; import { Meta } from "@/components/ui/typography"; export type SculptureView = { turn: number; pitch: number; zoom: number }; export type SculptureOrbitProps = Omit, "children" | "defaultValue" | "onChange"> & { children: (view: SculptureView & { interacting: boolean }) => React.ReactNode; value?: SculptureView; defaultValue?: Partial; onValueChange?: (view: SculptureView) => void; disabled?: boolean; label?: string; }; export function normalizeSculptureView(view: Partial = {}): SculptureView { const turn = Number.isFinite(view.turn) ? ((view.turn! + 180) % 360 + 360) % 360 - 180 : 0; return { turn, pitch: sculptureNumber(view.pitch, 0, -80, 80), zoom: sculptureNumber(view.zoom, 1, .6, 1.15) }; } /** Explicit orbit stays usable in every stillness mode; touch keeps vertical page scrolling. */ export function SculptureOrbit({ children, value, defaultValue, onValueChange, disabled = false, label = "Sculpture view", className, ...props }: SculptureOrbitProps) { const [local, setLocal] = React.useState(() => normalizeSculptureView(defaultValue)), [interacting, setInteracting] = React.useState(false); const [disabledSnapshot, setDisabledSnapshot] = React.useState(disabled); // Cancel rendered gesture state as the prop changes; it must not revive on re-enable. if (disabledSnapshot !== disabled) { setDisabledSnapshot(disabled); if (disabled) setInteracting(false); } const view = React.useMemo(() => normalizeSculptureView(value ?? local), [value, local]), latest = React.useRef(view), viewport = React.useRef(null), id = React.useId(); const gesture = React.useRef<{ id: number; x: number; y: number; initial: SculptureView; touch: boolean; captured: boolean } | null>(null); React.useEffect(() => { latest.current = view; }, [view]); const stop = React.useCallback(() => { const current = gesture.current; gesture.current = null; setInteracting(false); if (current && viewport.current?.hasPointerCapture(current.id)) viewport.current.releasePointerCapture(current.id); }, []); React.useEffect(() => { if (!disabled) return; const current = gesture.current; gesture.current = null; if (current && viewport.current?.hasPointerCapture(current.id)) viewport.current.releasePointerCapture(current.id); }, [disabled]); React.useEffect(() => { const hidden = () => { if (document.hidden) stop(); }; window.addEventListener("blur", stop); document.addEventListener("visibilitychange", hidden); return () => { window.removeEventListener("blur", stop); document.removeEventListener("visibilitychange", hidden); }; }, [stop]); function change(next: Partial) { if (disabled) return; const normalized = normalizeSculptureView({ ...latest.current, ...next }); latest.current = normalized; if (value === undefined) setLocal(normalized); onValueChange?.(normalized); } const reset = () => change({ turn: 0, pitch: 0, zoom: 1 }); return

{ if (disabled || event.button !== 0 || !event.isPrimary) return; const touch = event.pointerType === "touch"; gesture.current = { id: event.pointerId, x: event.clientX, y: event.clientY, initial: latest.current, touch, captured: !touch }; if (!touch) { event.currentTarget.setPointerCapture(event.pointerId); event.currentTarget.focus({ preventScroll: true }); setInteracting(true); } }} onPointerMove={event => { const current = gesture.current; if (disabled || !current || current.id !== event.pointerId) return; const dx = event.clientX - current.x, dy = event.clientY - current.y; if (current.touch && !current.captured) { if (Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 7) { stop(); return; } if (Math.abs(dx) < 7) return; event.currentTarget.setPointerCapture(event.pointerId); current.captured = true; setInteracting(true); } const width = Math.max(200, event.currentTarget.clientWidth); change({ turn: current.initial.turn + dx / width * 240, pitch: current.touch ? current.initial.pitch : current.initial.pitch + dy / width * 160 }); }} onPointerUp={stop} onPointerCancel={stop} onLostPointerCapture={stop} onKeyDown={event => { if (disabled || event.altKey || event.ctrlKey || event.metaKey) return; const step = event.shiftKey ? 20 : 5; if (event.key === "ArrowLeft") change({ turn: latest.current.turn - step }); else if (event.key === "ArrowRight") change({ turn: latest.current.turn + step }); else if (event.key === "ArrowUp") change({ pitch: latest.current.pitch - step }); else if (event.key === "ArrowDown") change({ pitch: latest.current.pitch + step }); else if (event.key === "+" || event.key === "=") change({ zoom: latest.current.zoom + .05 }); else if (event.key === "-") change({ zoom: latest.current.zoom - .05 }); else if (event.key === "Home") reset(); else return; event.preventDefault(); }}> {children({ ...view, interacting: interacting && !disabled })}

Zoom change({ zoom: next[0] ?? 1 })} aria-labelledby={`${id}-zoom`} disabled={disabled} />{Math.round(view.zoom * 100)}%

Drag to turn. Arrow keys rotate, + / − zoom, Home resets. Touch: swipe sideways to turn.

; } 52:T4b4,@layer cojeev-states { .v-sculpture-orbit{display:grid;gap:16px;min-width:0;width:100%;color:var(--v-text)} .v-sculpture-orbit-view{position:relative;min-width:0;overflow:hidden;touch-action:pan-y;cursor:grab;border-radius:var(--r-card,20px);outline-offset:4px} .v-sculpture-orbit-view:focus-visible{outline:2px solid var(--ring)} .v-sculpture-orbit-view[data-dragging]{cursor:grabbing} .v-sculpture-orbit[data-disabled] .v-sculpture-orbit-view{cursor:default} .v-sculpture-orbit-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;min-width:0} .v-sculpture-orbit-step{display:flex;gap:4px;align-items:center} .v-sculpture-orbit-step>[data-slot="button"]{width:40px;min-width:40px;height:40px;padding:0} .v-sculpture-orbit-zoom{display:flex;align-items:center;gap:12px;min-width:0} .v-sculpture-orbit-zoom>[data-slot="slider"]{width:100px;min-width:70px} .v-sculpture-orbit-zoom>[data-slot="slider-output"]{min-width:4ch} .v-sculpture-orbit-help{max-width:58ch;margin:0 auto;text-align:center;line-height:1.5;color:var(--v-text-2)} @media(max-width:440px){.v-sculpture-orbit-tools{gap:12px}.v-sculpture-orbit-help{max-width:32ch}.v-sculpture-orbit-zoom{gap:8px}} } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/icon.json","https://000h.cojeev.com/r/slider.json","https://000h.cojeev.com/r/label.json","https://000h.cojeev.com/r/typography.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/sculpture-orbit.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/sculpture-orbit.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/sculpture-orbit.css","content":"$52","type":"registry:file","target":"styles/cojeev/sculpture-orbit.css"}],"className":"h-[70svh] min-h-80"}]]}]