50: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1c72,"use client"; import { useCallback, useMemo, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const INSTANT = { duration: 0 } as const; const NUMBER = /-?\d*\.?\d+/g; const CENTER = "12"; export type MorphShape = { d: readonly string[]; rotate?: number; }; export type IconMorphMode = "stroke" | "fill"; export type IconMorphPreset = | "menu-close" | "play-pause" | "plus-minus" | "check-close"; export type IconMorphSlot = { key: number; d: string; visible: boolean; }; export type IconMorphSemantics = "label" | "pressed" | "expanded"; export const iconMorphPresets: Record< IconMorphPreset, { mode: IconMorphMode; labels: readonly string[]; shapes: readonly MorphShape[] } > = { "menu-close": { mode: "stroke", labels: ["Menu", "Close"], shapes: [ { rotate: 0, d: ["M 4 7 L 20 7", "M 4 12 L 20 12", "M 4 17 L 20 17"], }, { rotate: 90, d: ["M 6.5 6.5 L 17.5 17.5", "M 12 12 L 12 12", "M 6.5 17.5 L 17.5 6.5"], }, ], }, "play-pause": { mode: "fill", labels: ["Play", "Pause"], shapes: [ { d: [ "M 8 5 L 14 8.5 L 14 15.5 L 8 19 Z", "M 14 8.5 L 20 12 L 20 12 L 14 15.5 Z", ], }, { d: [ "M 8 5 L 11.5 5 L 11.5 19 L 8 19 Z", "M 15 5 L 18.5 5 L 18.5 19 L 15 19 Z", ], }, ], }, "plus-minus": { mode: "stroke", labels: ["Add", "Remove"], shapes: [ { rotate: 0, d: ["M 5 12 L 19 12", "M 12 5 L 12 19"] }, { rotate: 180, d: ["M 5 12 L 19 12", "M 5 12 L 19 12"] }, ], }, "check-close": { mode: "stroke", labels: ["Confirm", "Cancel"], shapes: [ { d: ["M 5 12.5 L 10 17.5 L 19.5 7", "M 12 12 L 12 12 L 12 12"] }, { d: ["M 6.5 6.5 L 12 12 L 17.5 17.5", "M 17.5 6.5 L 12 12 L 6.5 17.5"] }, ], }, }; function isCollapsed(d: string): boolean { const nums = d.match(NUMBER); if (!nums || nums.length < 4) return false; return nums.every((n, i) => n === nums[i % 2]); } function normalize(shapes: readonly MorphShape[]): IconMorphSlot[][] { const slots = shapes.reduce((most, s) => Math.max(most, s.d.length), 0); return shapes.map((shape) => Array.from({ length: slots }, (_, i) => { const own = shape.d[i]; const sibling = shapes.find((s) => s.d[i] !== undefined)?.d[i] ?? ""; const d = own ?? sibling.replace(NUMBER, CENTER); return { key: i, d, visible: !isCollapsed(d) }; }), ); } function toIndex(value: number | boolean): number { return typeof value === "boolean" ? (value ? 1 : 0) : Math.trunc(value); } export type UseIconMorphOptions = { preset?: IconMorphPreset; shapes?: readonly MorphShape[]; mode?: IconMorphMode; labels?: readonly string[]; active?: number | boolean; defaultActive?: number | boolean; onActiveChange?: (index: number) => void; }; export function useIconMorph({ preset = "menu-close", shapes, mode, labels, active, defaultActive = 0, onActiveChange, }: UseIconMorphOptions = {}) { const base = iconMorphPresets[preset]; const source = shapes ?? base.shapes; const names = labels ?? base.labels; const count = source.length; const [internal, setInternal] = useState(() => toIndex(defaultActive)); const reduced = useReducedMotion(); const raw = active === undefined ? internal : toIndex(active); const index = count === 0 ? 0 : Math.min(Math.max(raw, 0), count - 1); const frames = useMemo(() => normalize(source), [source]); const setIndex = useCallback( (next: number) => { if (count === 0) return; const wrapped = ((next % count) + count) % count; if (active === undefined) setInternal(wrapped); onActiveChange?.(wrapped); }, [active, count, onActiveChange], ); const toggle = useCallback(() => setIndex(index + 1), [setIndex, index]); return { index, count, slots: frames[index] ?? [], rotate: source[index]?.rotate ?? 0, mode: mode ?? base.mode, label: names[index] ?? "", labels: names, transition: reduced ? INSTANT : CELL, labelTransition: reduced ? INSTANT : CROSSFADE, setIndex, toggle, }; } export type IconMorphProps = UseIconMorphOptions & { size?: number; strokeWidth?: number; showLabel?: boolean; semantics?: IconMorphSemantics; disabled?: boolean; className?: string; }; export function IconMorph({ size = 20, strokeWidth = 1.75, showLabel = false, semantics = "label", disabled = false, className = "", ...options }: IconMorphProps) { const { index, slots, rotate, mode, label, labels, transition, labelTransition, toggle, } = useIconMorph(options); const stroked = mode === "stroke"; return ( {showLabel && ( )} ); } 4f:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/interior/icon-morph.tsx","content":"$52","type":"registry:ui","target":"components/interior/icon-morph.tsx"}],"className":"h-[70svh] min-h-80"}]]}]