{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "stroke-morph-icon", "title": "Stroke-morph icon", "description": "Stroke-morph icon is a production-ready utilities component from BJORK UI, packaged for shadcn registries.", "dependencies": [ "clsx", "framer-motion", "tailwind-merge" ], "files": [ { "path": "components/bjork-ui/utilities/stroke-morph-icon.tsx", "content": "\"use client\";\n\nimport { useLayoutEffect, useRef, useState, type RefObject } from \"react\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\nimport { useVisibleLoop } from \"@/components/bjork-ui/_core/loop\";\nimport { stepSpring, type SpringState } from \"@/components/bjork-ui/_core/spring\";\nimport { easeCss } from \"@/components/bjork-ui/_core/motion\";\n\nexport type StrokeIconName =\n | \"menu\"\n | \"equal\"\n | \"minus\"\n | \"plus\"\n | \"close\"\n | \"chevron-down\"\n | \"chevron-up\"\n | \"chevron-right\"\n | \"chevron-left\"\n | \"arrow-right\"\n | \"arrow-down\"\n | \"arrow-left\"\n | \"arrow-up\"\n | \"check\"\n | \"play\"\n | \"pause\"\n | \"dot\"\n | \"ellipsis\"\n | \"busy\"\n | (string & {});\n\n// Three line segments in a 24 x 24 box. `hidden` lines render at opacity 0 and collapse\n// onto the centroid of the visible endpoints. `group` icons share geometry and only rotate.\nexport interface StrokeIconDef {\n lines: [number, number, number, number][];\n hidden?: [boolean, boolean, boolean];\n group?: string;\n rotation?: number;\n spin?: boolean;\n strokeScale?: number;\n}\n\nexport interface StrokeMorphIconProps {\n name: StrokeIconName;\n size?: number;\n strokeWidth?: number;\n color?: string;\n spring?: { stiffness: number; damping: number; mass: number };\n spin?: boolean;\n label?: string;\n className?: string;\n}\n\ntype Seg = [number, number, number, number];\n\nconst DEFAULT_SPRING = { stiffness: 380, damping: 30, mass: 0.7 };\nconst CROSS_LINES: StrokeIconDef[\"lines\"] = [\n [12, 5, 12, 19],\n [5, 12, 19, 12],\n [12, 12, 12, 12],\n];\nconst CHEVRON_LINES: StrokeIconDef[\"lines\"] = [\n [6, 9, 12, 15],\n [12, 15, 18, 9],\n [12, 15, 12, 15],\n];\nconst ARROW_LINES: StrokeIconDef[\"lines\"] = [\n [5, 12, 19, 12],\n [13, 6, 19, 12],\n [13, 18, 19, 12],\n];\n\nexport const strokeIcons: Record = {\n menu: {\n lines: [\n [4, 7, 20, 7],\n [4, 12, 20, 12],\n [4, 17, 20, 17],\n ],\n },\n equal: {\n lines: [\n [5, 9, 19, 9],\n [5, 15, 19, 15],\n [12, 12, 12, 12],\n ],\n hidden: [false, false, true],\n },\n minus: {\n lines: [\n [5, 12, 19, 12],\n [12, 12, 12, 12],\n [12, 12, 12, 12],\n ],\n hidden: [false, true, true],\n },\n plus: { lines: CROSS_LINES, hidden: [false, false, true], group: \"cross\", rotation: 0 },\n close: { lines: CROSS_LINES, hidden: [false, false, true], group: \"cross\", rotation: 45 },\n \"chevron-down\": { lines: CHEVRON_LINES, hidden: [false, false, true], group: \"chevron\", rotation: 0 },\n \"chevron-up\": { lines: CHEVRON_LINES, hidden: [false, false, true], group: \"chevron\", rotation: 180 },\n \"chevron-right\": { lines: CHEVRON_LINES, hidden: [false, false, true], group: \"chevron\", rotation: -90 },\n \"chevron-left\": { lines: CHEVRON_LINES, hidden: [false, false, true], group: \"chevron\", rotation: 90 },\n \"arrow-right\": { lines: ARROW_LINES, group: \"arrow\", rotation: 0 },\n \"arrow-down\": { lines: ARROW_LINES, group: \"arrow\", rotation: 90 },\n \"arrow-left\": { lines: ARROW_LINES, group: \"arrow\", rotation: 180 },\n \"arrow-up\": { lines: ARROW_LINES, group: \"arrow\", rotation: -90 },\n check: {\n lines: [\n [5, 12.5, 10, 17.5],\n [10, 17.5, 19, 7],\n [10, 17.5, 10, 17.5],\n ],\n hidden: [false, false, true],\n },\n // The +0.75px optical x nudge is already in these coordinates (OPTICAL-ALIGNMENT R2).\n play: {\n lines: [\n [8.75, 5, 8.75, 19],\n [8.75, 5, 19.75, 12],\n [8.75, 19, 19.75, 12],\n ],\n },\n pause: {\n lines: [\n [9, 6, 9, 18],\n [15, 6, 15, 18],\n [12, 12, 12, 12],\n ],\n hidden: [false, false, true],\n },\n dot: {\n lines: [\n [12, 12, 12, 12],\n [12, 12, 12, 12],\n [12, 12, 12, 12],\n ],\n hidden: [false, true, true],\n strokeScale: 1.6,\n },\n ellipsis: {\n lines: [\n [6, 12, 6, 12],\n [12, 12, 12, 12],\n [18, 12, 18, 12],\n ],\n },\n busy: {\n lines: [\n [12, 12, 12, 5],\n [12, 12, 18.06, 15.5],\n [12, 12, 5.94, 15.5],\n ],\n group: \"busy\",\n rotation: 0,\n spin: true,\n },\n};\n\n// Optical nudges, in the icon's own frame (the group rotation carries them with the icon).\n// Measured with the blur test (OPTICAL-ALIGNMENT R1 / checklist 1 and 4): arrows carry their\n// visual weight toward the head, so they move back toward the tail; the check's weight sits low.\nconst OPTICAL_NUDGE = new Map([\n [strokeIcons[\"arrow-right\"], [-1.6, 0]], // arrow-right: weight +1.63 units right of centre\n [strokeIcons[\"arrow-down\"], [-1.6, 0]],\n [strokeIcons[\"arrow-left\"], [-1.6, 0]],\n [strokeIcons[\"arrow-up\"], [-1.6, 0]],\n [strokeIcons.check, [0, -0.9]], // check: weight +0.94 units below centre\n]);\n\nfunction nudgeOf(def: StrokeIconDef): [number, number] {\n return OPTICAL_NUDGE.get(def) ?? [0, 0];\n}\n\nfunction isSeg(v: unknown): v is Seg {\n return Array.isArray(v) && v.length === 4 && v.every((n) => typeof n === \"number\" && Number.isFinite(n));\n}\n\n// Registers a custom icon. Throws a TypeError unless it has exactly three finite line segments.\nexport function defineStrokeIcon(name: string, def: StrokeIconDef): void {\n if (!name) throw new TypeError(\"defineStrokeIcon: name must be a non-empty string\");\n if (!Array.isArray(def.lines) || def.lines.length !== 3 || !def.lines.every(isSeg)) {\n throw new TypeError(`defineStrokeIcon(\"${name}\"): lines must be exactly 3 [x1, y1, x2, y2] segments`);\n }\n if (def.hidden !== undefined && (!Array.isArray(def.hidden) || def.hidden.length !== 3)) {\n throw new TypeError(`defineStrokeIcon(\"${name}\"): hidden must have exactly 3 booleans`);\n }\n strokeIcons[name] = def;\n}\n\nconst warnedNames = new Set();\n\nfunction resolveStrokeIcon(name: string): StrokeIconDef {\n if (Object.prototype.hasOwnProperty.call(strokeIcons, name)) return strokeIcons[name];\n if (process.env.NODE_ENV !== \"production\" && !warnedNames.has(name)) {\n warnedNames.add(name);\n console.warn(`StrokeMorphIcon: unknown name \"${name}\", rendering \"dot\" instead.`);\n }\n return strokeIcons.dot;\n}\n\n// Effective geometry: hidden lines collapse onto the centroid of the visible endpoints.\nconst effCache = new WeakMap();\n\nfunction effOf(def: StrokeIconDef): Seg[] {\n const cached = effCache.get(def);\n if (cached) return cached;\n const visible = [0, 1, 2].map((i) => !def.hidden?.[i]);\n let sx = 0;\n let sy = 0;\n let n = 0;\n def.lines.forEach(([x1, y1, x2, y2], i) => {\n if (!visible[i]) return;\n sx += x1 + x2;\n sy += y1 + y2;\n n += 2;\n });\n const cx = n ? sx / n : 12;\n const cy = n ? sy / n : 12;\n const eff = def.lines.map((seg, i): Seg => (visible[i] ? seg : [cx, cy, cx, cy]));\n effCache.set(def, eff);\n return eff;\n}\n\nfunction visibleOf(def: StrokeIconDef): boolean[] {\n return [0, 1, 2].map((i) => !def.hidden?.[i]);\n}\n\ninterface Assignment {\n perm: number[]; // source line i goes to target line perm[i]\n flip: boolean[]; // swap that line's endpoints\n}\n\nconst PERMS = [\n [0, 1, 2],\n [0, 2, 1],\n [1, 0, 2],\n [1, 2, 0],\n [2, 0, 1],\n [2, 1, 0],\n];\n\n// Best endpoint matching: 6 permutations, and per line the cheaper of the 2 endpoint flips\n// (the 8 flip combinations reduce to this because each line's flip is independent).\nfunction bestAssignment(src: Seg[], dst: Seg[]): Assignment {\n let best: Assignment = { perm: [0, 1, 2], flip: [false, false, false] };\n let bestCost = Infinity;\n for (const perm of PERMS) {\n let total = 0;\n const flip: boolean[] = [];\n for (let i = 0; i < 3; i++) {\n const [ax1, ay1, ax2, ay2] = src[i];\n const [bx1, by1, bx2, by2] = dst[perm[i]];\n const straight = (ax1 - bx1) ** 2 + (ay1 - by1) ** 2 + (ax2 - bx2) ** 2 + (ay2 - by2) ** 2;\n const crossed = (ax1 - bx2) ** 2 + (ay1 - by2) ** 2 + (ax2 - bx1) ** 2 + (ay2 - by1) ** 2;\n flip.push(crossed < straight);\n total += Math.min(straight, crossed);\n }\n if (total < bestCost) {\n bestCost = total;\n best = { perm: [...perm], flip };\n }\n }\n return best;\n}\n\n// Memoised per (from, to) pair of defs. Used when the icon has settled on `from`.\nconst matchCache = new WeakMap>();\n\nfunction canonicalMatch(from: StrokeIconDef, to: StrokeIconDef): Assignment {\n let inner = matchCache.get(from);\n if (!inner) {\n inner = new WeakMap();\n matchCache.set(from, inner);\n }\n const cached = inner.get(to);\n if (cached) return cached;\n const result = bestAssignment(effOf(from), effOf(to));\n inner.set(to, result);\n return result;\n}\n\n// Shortest signed rotation from `from` to `to` (degrees), in (-180, 180].\nfunction shortestDelta(from: number, to: number): number {\n return ((((to - from) % 360) + 540) % 360) - 180;\n}\n\n// Attributes are written to 2 decimals (0.005 of a 24-unit box). Finer precision only adds settle time.\nconst fmt = (v: number) => String(Math.round(v * 100) / 100);\nconst COORDS = [\"x1\", \"y1\", \"x2\", \"y2\"] as const;\n\ninterface MorphEls {\n group: SVGGElement;\n lines: (SVGLineElement | null)[];\n}\n\n// Owns the imperative morph. React renders once; every frame writes attributes through refs.\nclass Morph {\n private els: MorphEls | null = null;\n private cur = new Float64Array(12);\n private from = new Float64Array(12);\n private to = new Float64Array(12);\n private curAngle: number;\n private fromAngle: number;\n private toAngle: number;\n private curScale = 1;\n private fromScale = 1;\n private toScale = 1;\n private curNudge: [number, number];\n private fromNudge: [number, number];\n private toNudge: [number, number];\n private slotLine = [0, 1, 2]; // settled: element s shows canonical line slotLine[s]\n private targetLine = [0, 1, 2];\n private visibleTo = [true, true, true];\n private spring: SpringState = { x: 0, v: 0 };\n private written: (string | undefined)[] = [];\n private strokeWidth = 2;\n private active = false;\n private cfg = DEFAULT_SPRING;\n target: StrokeIconDef;\n\n constructor(def: StrokeIconDef) {\n this.target = def;\n effOf(def).forEach((seg, s) => this.to.set(seg, s * 4));\n this.cur.set(this.to);\n this.from.set(this.to);\n this.curAngle = this.fromAngle = this.toAngle = def.rotation ?? 0;\n this.curScale = this.fromScale = this.toScale = def.strokeScale ?? 1;\n this.curNudge = this.fromNudge = this.toNudge = nudgeOf(def);\n }\n\n bind(els: MorphEls) {\n this.els = els;\n this.paint(1);\n }\n\n setConfig(cfg: { stiffness: number; damping: number; mass: number }) {\n this.cfg = cfg;\n }\n\n setStrokeWidth(strokeWidth: number) {\n this.strokeWidth = strokeWidth;\n this.paint(this.active ? this.spring.x : 1);\n }\n\n retarget(next: StrokeIconDef, reduce: boolean) {\n const prev = this.target;\n const sameGroup = !!next.group && next.group === prev.group;\n this.target = next;\n\n if (!sameGroup) {\n let assignment: Assignment;\n if (this.active) {\n // Mid-flight: match from the current lerped geometry, not from a settled def.\n const current: Seg[] = [0, 1, 2].map((s) => [\n this.cur[s * 4],\n this.cur[s * 4 + 1],\n this.cur[s * 4 + 2],\n this.cur[s * 4 + 3],\n ]);\n assignment = bestAssignment(current, effOf(next));\n } else {\n assignment = canonicalMatch(prev, next);\n }\n const eff = effOf(next);\n const visible = visibleOf(next);\n for (let s = 0; s < 3; s++) {\n const c = this.active ? s : this.slotLine[s];\n const t = this.active ? assignment.perm[s] : assignment.perm[c];\n const flip = this.active ? assignment.flip[s] : assignment.flip[c];\n this.targetLine[s] = t;\n const [x1, y1, x2, y2] = eff[t];\n const seg: Seg = flip ? [x2, y2, x1, y1] : [x1, y1, x2, y2];\n this.to.set(seg, s * 4);\n this.visibleTo[s] = visible[t];\n }\n // A line that changes visibility fades over 120ms ease-out, or instantly when reduced.\n this.applyVisibility(reduce);\n }\n\n this.fromAngle = this.curAngle;\n this.fromScale = this.curScale;\n this.fromNudge = [this.curNudge[0], this.curNudge[1]];\n this.from.set(this.cur);\n this.toAngle = this.curAngle + shortestDelta(this.curAngle, next.rotation ?? 0);\n this.toScale = next.strokeScale ?? 1;\n this.toNudge = nudgeOf(next);\n\n if (reduce) {\n this.settle();\n return;\n }\n this.spring.x = 0; // keep the velocity so an interrupted move carries its momentum\n this.active = true;\n }\n\n private applyVisibility(reduce: boolean) {\n const els = this.els;\n if (!els) return;\n for (let s = 0; s < 3; s++) {\n const line = els.lines[s];\n if (!line) continue;\n line.style.transition = reduce ? \"none\" : `opacity 120ms ${easeCss.out}`;\n line.style.opacity = this.visibleTo[s] ? \"1\" : \"0\";\n }\n }\n\n // Frame step for useVisibleLoop. Returns false when idle.\n step(dt: number): boolean {\n if (!this.active) return false;\n stepSpring(this.spring, 1, this.cfg, dt);\n if (Math.abs(this.spring.x - 1) < 5e-4 && Math.abs(this.spring.v) < 5e-3) {\n this.settle();\n return false;\n }\n this.paint(this.spring.x);\n return true;\n }\n\n // Snap to the exact canonical geometry of the target and go idle.\n private settle() {\n const eff = effOf(this.target);\n for (let s = 0; s < 3; s++) {\n this.slotLine[s] = this.targetLine[s];\n const seg = eff[this.targetLine[s]];\n this.to.set(seg, s * 4);\n }\n this.from.set(this.to);\n this.fromAngle = this.toAngle;\n this.curAngle = this.toAngle;\n this.fromScale = this.toScale;\n this.curScale = this.toScale;\n this.fromNudge = [this.toNudge[0], this.toNudge[1]];\n this.curNudge = [this.toNudge[0], this.toNudge[1]];\n this.active = false;\n this.spring.x = 1;\n this.spring.v = 0;\n this.paint(1);\n }\n\n private paint(p: number) {\n const els = this.els;\n if (!els) return;\n for (let s = 0; s < 3; s++) {\n const line = els.lines[s];\n for (let k = 0; k < 4; k++) {\n const i = s * 4 + k;\n const v = this.from[i] + (this.to[i] - this.from[i]) * p;\n this.cur[i] = v;\n const str = fmt(v);\n if (line && this.written[i] !== str) {\n line.setAttribute(COORDS[k], str);\n this.written[i] = str;\n }\n }\n }\n this.curAngle = this.fromAngle + (this.toAngle - this.fromAngle) * p;\n this.curScale = this.fromScale + (this.toScale - this.fromScale) * p;\n const nx = this.fromNudge[0] + (this.toNudge[0] - this.fromNudge[0]) * p;\n const ny = this.fromNudge[1] + (this.toNudge[1] - this.fromNudge[1]) * p;\n this.curNudge = [nx, ny];\n const transform = `rotate(${fmt(this.curAngle)} 12 12) translate(${fmt(nx)} ${fmt(ny)})`;\n if (this.written[12] !== transform) {\n els.group.setAttribute(\"transform\", transform);\n this.written[12] = transform;\n }\n const sw = fmt(this.strokeWidth * this.curScale);\n if (this.written[13] !== sw) {\n els.group.setAttribute(\"stroke-width\", sw);\n this.written[13] = sw;\n }\n }\n}\n\nexport function StrokeMorphIcon({\n name,\n size = 24,\n strokeWidth = 2,\n color = \"currentColor\",\n spring,\n spin,\n label,\n className,\n}: StrokeMorphIconProps) {\n const reduceMotion = useReducedMotion() === true;\n const def = resolveStrokeIcon(name);\n\n // Initial markup only. After mount, attributes are owned by the Morph, so these\n // constants never change and React never overwrites an in-flight frame.\n const [initial] = useState(() => {\n const eff = effOf(def);\n const visible = visibleOf(def);\n return {\n segs: eff,\n visible,\n transform: `rotate(${def.rotation ?? 0} 12 12) translate(${nudgeOf(def).map(fmt).join(\" \")})`,\n strokeWidth: fmt(strokeWidth * (def.strokeScale ?? 1)),\n };\n });\n const [morph] = useState(() => new Morph(def));\n\n const svgRef = useRef(null);\n const groupRef = useRef(null);\n const lineRefs = useRef<(SVGLineElement | null)[]>([null, null, null]);\n\n // The stays the root (icon-with-label rules target `>svg`). The loop hook only reads\n // the element's box and dataset, which SVG elements also have.\n const loop = useVisibleLoop(svgRef as RefObject, (dt) => morph.step(dt));\n\n useLayoutEffect(() => {\n if (!groupRef.current) return;\n morph.bind({ group: groupRef.current, lines: lineRefs.current });\n }, [morph]);\n\n useLayoutEffect(() => {\n morph.setConfig(spring ?? DEFAULT_SPRING);\n });\n\n useLayoutEffect(() => {\n if (morph.target === def) return;\n morph.retarget(def, reduceMotion);\n if (!reduceMotion) loop.wake();\n }, [def, reduceMotion, morph, loop]);\n\n useLayoutEffect(() => {\n morph.setStrokeWidth(strokeWidth);\n }, [morph, strokeWidth]);\n\n const spinning = (spin ?? def.spin) === true;\n\n return (\n \n \n \n {initial.segs.map(([x1, y1, x2, y2], i) => (\n {\n lineRefs.current[i] = el;\n }}\n x1={x1}\n y1={y1}\n x2={x2}\n y2={y2}\n style={{ opacity: initial.visible[i] ? 1 : 0 }}\n />\n ))}\n \n \n \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/utilities/stroke-morph-icon.tsx" }, { "path": "lib/utils.ts", "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n", "type": "registry:lib", "target": "@lib/utils.ts" }, { "path": "components/bjork-ui/_core/loop.ts", "content": "\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, type RefObject } from \"react\";\n\nexport interface VisibleLoopOptions {\n enabled?: boolean;\n fpsCap?: number;\n rootMargin?: string;\n}\n\n/**\n * Runs `frame(dt, t)` on requestAnimationFrame while the element is near the viewport,\n * the tab is visible and `enabled` is not false. Return `false` from `frame` to go idle\n * until `wake()` is called. Writes `data-loop` on the element: running, idle or paused.\n */\nexport function useVisibleLoop(\n ref: RefObject,\n frame: (dt: number, t: number) => boolean | void,\n opts?: VisibleLoopOptions,\n): { wake: () => void } {\n const enabled = opts?.enabled !== false;\n const fpsCap = opts?.fpsCap ?? 0;\n const rootMargin = opts?.rootMargin ?? \"96px\";\n\n const frameRef = useRef(frame);\n useEffect(() => {\n frameRef.current = frame;\n }, [frame]);\n\n const wakeRef = useRef<() => void>(() => {});\n const wake = useCallback(() => wakeRef.current(), []);\n\n useEffect(() => {\n const el = ref.current;\n if (!el || typeof window === \"undefined\") return;\n\n let wants = true; // false once the frame callback returns false\n let inView = false;\n let raf = 0;\n let last = 0;\n let t = 0;\n const minFrame = fpsCap > 0 ? 1000 / fpsCap : 0;\n\n const canRun = () => enabled && inView && document.visibilityState === \"visible\";\n const stop = () => {\n if (raf) cancelAnimationFrame(raf);\n raf = 0;\n };\n\n const update = () => {\n if (!enabled) {\n stop();\n el.dataset.loop = \"paused\";\n return;\n }\n if (!wants) {\n stop();\n el.dataset.loop = \"idle\";\n return;\n }\n if (!canRun()) {\n stop();\n el.dataset.loop = \"paused\";\n return;\n }\n el.dataset.loop = \"running\";\n if (!raf) {\n last = performance.now();\n raf = requestAnimationFrame(tick);\n }\n };\n\n const tick = (now: number) => {\n raf = 0;\n if (!canRun() || !wants) {\n update();\n return;\n }\n const elapsed = now - last;\n if (minFrame && elapsed < minFrame - 0.5) {\n raf = requestAnimationFrame(tick);\n return;\n }\n last = now;\n const dt = Math.min(0.05, Math.max(0, elapsed / 1000));\n t += dt;\n const keep = frameRef.current(dt, t);\n if (keep === false) {\n wants = false;\n update();\n return;\n }\n raf = requestAnimationFrame(tick);\n };\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n inView = entry.isIntersecting;\n update();\n },\n { rootMargin },\n );\n observer.observe(el);\n\n const onVisibility = () => update();\n document.addEventListener(\"visibilitychange\", onVisibility);\n\n wakeRef.current = () => {\n wants = true;\n update();\n };\n\n update();\n\n return () => {\n stop();\n observer.disconnect();\n document.removeEventListener(\"visibilitychange\", onVisibility);\n wakeRef.current = () => {};\n };\n }, [ref, enabled, fpsCap, rootMargin]);\n\n return useMemo(() => ({ wake }), [wake]);\n}\n\n// matchMedia based check. False on the server.\nexport function isCoarsePointer(): boolean {\n if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return false;\n return window.matchMedia(\"(pointer: coarse)\").matches;\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/loop.ts" }, { "path": "components/bjork-ui/_core/spring.ts", "content": "// Pure spring math, no React. Units: stiffness k, damping d (coefficient), mass m, time in seconds.\n\nexport interface SpringConfig {\n stiffness: number;\n damping: number;\n mass: number;\n}\n\nexport interface SpringState {\n x: number;\n v: number;\n}\n\n// Damping ratio zeta = d / (2 * sqrt(k * m)).\nexport function dampingRatio(c: SpringConfig): number {\n return c.damping / (2 * Math.sqrt(c.stiffness * c.mass));\n}\n\n// Exact solution of y'' = -(k/m) y - (d/m) y' for displacement y0 and velocity v0 at time t.\n// Returns displacement and velocity together so stepping can be exact, not integrated.\nfunction solveLinear(t: number, c: SpringConfig, y0: number, v0: number): { y: number; v: number } {\n const w0 = Math.sqrt(c.stiffness / c.mass);\n const z = dampingRatio(c);\n\n if (Math.abs(z - 1) < 1e-9) {\n // Critically damped.\n const e = Math.exp(-w0 * t);\n const b = v0 + w0 * y0;\n return { y: e * (y0 + b * t), v: e * (b - w0 * (y0 + b * t)) };\n }\n if (z < 1) {\n // Underdamped.\n const wd = w0 * Math.sqrt(1 - z * z);\n const a = z * w0;\n const B = (v0 + a * y0) / wd;\n const e = Math.exp(-a * t);\n const cos = Math.cos(wd * t);\n const sin = Math.sin(wd * t);\n return {\n y: e * (y0 * cos + B * sin),\n v: e * (-a * (y0 * cos + B * sin) + wd * (-y0 * sin + B * cos)),\n };\n }\n // Overdamped.\n const s = w0 * Math.sqrt(z * z - 1);\n const r1 = -z * w0 + s;\n const r2 = -z * w0 - s;\n const B = (v0 - r1 * y0) / (r2 - r1);\n const A = y0 - B;\n const e1 = Math.exp(r1 * t);\n const e2 = Math.exp(r2 * t);\n return { y: A * e1 + B * e2, v: A * r1 * e1 + B * r2 * e2 };\n}\n\n// Analytic position at time t for a spring from `from` to `to` with initial velocity v0.\nexport function springAt(t: number, c: SpringConfig, from = 0, to = 1, v0 = 0): number {\n return to + solveLinear(t, c, from - to, v0).y;\n}\n\n// Overshoot as a fraction of the total travel. Zero when critically or overdamped.\nexport function overshoot(c: SpringConfig): number {\n const z = dampingRatio(c);\n if (z >= 1) return 0;\n return Math.exp((-Math.PI * z) / Math.sqrt(1 - z * z));\n}\n\n// Seconds until the spring stays within epsilon of its target (fraction of travel).\n// Found by scanning backwards from a bound derived from the slowest decay rate.\nexport function settleTime(c: SpringConfig, epsilon = 0.001): number {\n const w0 = Math.sqrt(c.stiffness / c.mass);\n const z = dampingRatio(c);\n const slowest = z < 1 ? z * w0 : (z - Math.sqrt(z * z - 1)) * w0;\n const tEnd = (Math.log(1 / epsilon) / slowest) * 1.5 + 0.05;\n const steps = 4000;\n const dt = tEnd / steps;\n const band = epsilon;\n let last = 0;\n for (let i = 0; i <= steps; i++) {\n const t = i * dt;\n if (Math.abs(springAt(t, c, 1, 0, 0)) >= band) last = t;\n }\n return last + dt;\n}\n\n// Advances the state by dt towards `target`. Uses the exact solution of the linear spring\n// (no integration), so it tracks springAt to rounding error at any step size and stays stable\n// for stiff configs where a fixed-step integrator drifts.\nexport function stepSpring(s: SpringState, target: number, c: SpringConfig, dt: number): void {\n if (dt <= 0) return;\n const r = solveLinear(dt, c, s.x - target, s.v);\n s.x = target + r.y;\n s.v = r.v;\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/spring.ts" }, { "path": "components/bjork-ui/_core/motion.ts", "content": "// Shared springs, easings and durations. Components import these instead of inventing values.\n\nexport const springs = {\n press: { type: \"spring\", stiffness: 500, damping: 30, mass: 0.6 },\n snappy: { type: \"spring\", stiffness: 400, damping: 25, mass: 1 },\n standard: { type: \"spring\", stiffness: 300, damping: 30, mass: 0.8 },\n soft: { type: \"spring\", stiffness: 200, damping: 25, mass: 1.2 },\n settle: { type: \"spring\", stiffness: 380, damping: 30, mass: 0.8 },\n blurIn: { type: \"spring\", stiffness: 400, damping: 28, mass: 0.6 },\n} as const;\n\nexport const ease = {\n out: [0.23, 1, 0.32, 1],\n inOut: [0.77, 0, 0.175, 1],\n drawer: [0.32, 0.72, 0, 1],\n} as const;\n\nexport const easeCss = {\n out: \"cubic-bezier(0.23,1,0.32,1)\",\n inOut: \"cubic-bezier(0.77,0,0.175,1)\",\n drawer: \"cubic-bezier(0.32,0.72,0,1)\",\n} as const;\n\nexport const durations = { press: 140, tooltip: 160, menu: 200, panel: 280 } as const; // ms\n\n// Cubic bezier easing for canvas and rAF code. Returns progress y for input x in [0, 1].\nexport function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number {\n const cx = 3 * x1;\n const bx = 3 * (x2 - x1) - cx;\n const ax = 1 - cx - bx;\n const cy = 3 * y1;\n const by = 3 * (y2 - y1) - cy;\n const ay = 1 - cy - by;\n const sampleX = (s: number) => ((ax * s + bx) * s + cx) * s;\n const sampleY = (s: number) => ((ay * s + by) * s + cy) * s;\n const sampleDX = (s: number) => (3 * ax * s + 2 * bx) * s + cx;\n\n const solveX = (x: number) => {\n let s = x;\n for (let i = 0; i < 8; i++) {\n const err = sampleX(s) - x;\n if (Math.abs(err) < 1e-6) return s;\n const d = sampleDX(s);\n if (Math.abs(d) < 1e-6) break;\n s -= err / d;\n }\n let lo = 0;\n let hi = 1;\n s = x;\n while (lo < hi) {\n const v = sampleX(s);\n if (Math.abs(v - x) < 1e-6) return s;\n if (x > v) lo = s;\n else hi = s;\n s = (lo + hi) / 2;\n if (hi - lo < 1e-7) break;\n }\n return s;\n };\n\n return (t: number) => {\n if (t <= 0) return 0;\n if (t >= 1) return 1;\n return sampleY(solveX(t));\n };\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/motion.ts" } ], "cssVars": { "light": { "bjork-bg": "#f7f3ea", "bjork-surface": "#fffcf6", "bjork-surface-muted": "rgba(250, 246, 237, 0.94)", "bjork-surface-hover": "#f5efe3", "bjork-surface-active": "#efe7d8", "bjork-panel": "#f8f2e7", "bjork-menu": "rgba(255, 252, 246, 0.98)", "bjork-field": "rgba(255, 252, 246, 0.96)", "bjork-field-muted": "rgba(248, 242, 231, 0.82)", "bjork-field-inset": "rgba(239, 231, 216, 0.72)", "bjork-error-bg": "#fff0e8", "bjork-text": "#171717", "bjork-text-strong": "rgba(23, 23, 23, 0.9)", "bjork-text-medium": "rgba(23, 23, 23, 0.78)", "bjork-text-muted": "rgba(23, 23, 23, 0.68)", "bjork-text-soft": "rgba(23, 23, 23, 0.62)", "bjork-text-faint": "rgba(23, 23, 23, 0.22)", "bjork-inverted-text": "#fff8f0", "bjork-border": "#eee6db", "bjork-border-muted": "#f5ede2", "bjork-border-strong": "#e1d7c8", "bjork-thumb": "#a49b8e", "bjork-track": "#ded6ca", "bjork-accent": "#ec7d43", "bjork-accent-hover": "#f0935f", "bjork-accent-soft": "rgba(236, 125, 67, 0.1)", "bjork-accent-muted": "rgba(236, 125, 67, 0.2)", "bjork-accent-badge": "rgba(236, 125, 67, 0.16)", "bjork-accent-badge-foreground": "#8d421d", "bjork-accent-foreground": "#3f2112", "bjork-accent-fill": "#ec7d43", "bjork-accent-fill-hover": "#f0935f", "bjork-shadow-surface": "inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)", "bjork-shadow-soft": "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)", "bjork-shadow-panel": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)", "bjork-shadow-menu": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)", "bjork-shadow-inset": "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)", "bjork-ring-offset": "#f7f3ea" }, "dark": { "bjork-bg": "#111111", "bjork-surface": "#121212", "bjork-surface-muted": "rgba(22, 22, 22, 0.92)", "bjork-surface-hover": "#161616", "bjork-surface-active": "#202020", "bjork-panel": "#0d0d0d", "bjork-menu": "rgba(18, 18, 18, 0.98)", "bjork-field": "rgba(18, 18, 18, 0.95)", "bjork-field-muted": "rgba(18, 18, 18, 0.55)", "bjork-field-inset": "rgba(9, 9, 9, 0.75)", "bjork-error-bg": "#130d0a", "bjork-text": "#ededed", "bjork-text-strong": "rgba(237, 237, 237, 0.9)", "bjork-text-medium": "rgba(237, 237, 237, 0.72)", "bjork-text-muted": "rgba(237, 237, 237, 0.6)", "bjork-text-soft": "rgba(237, 237, 237, 0.5)", "bjork-text-faint": "rgba(237, 237, 237, 0.22)", "bjork-inverted-text": "#080808", "bjork-border": "#232323", "bjork-border-muted": "#1c1c1c", "bjork-border-strong": "#343434", "bjork-thumb": "#626262", "bjork-track": "#090909", "bjork-accent": "#ec5c13", "bjork-accent-hover": "#f07832", "bjork-accent-soft": "rgba(236, 92, 19, 0.12)", "bjork-accent-muted": "rgba(236, 92, 19, 0.24)", "bjork-accent-badge": "#b84a12", "bjork-accent-badge-foreground": "#fff2ea", "bjork-accent-foreground": "#fff2ea", "bjork-accent-fill": "#b84a12", "bjork-accent-fill-hover": "#a84a14", "bjork-shadow-surface": "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)", "bjork-shadow-soft": "inset 0 1px 0 rgba(255, 255, 255, 0.045)", "bjork-shadow-panel": "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)", "bjork-shadow-menu": "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)", "bjork-shadow-inset": "inset 0 1px 10px rgba(0, 0, 0, 0.45)", "bjork-ring-offset": "#080808" } }, "css": { ".bjork-range": { "box-shadow": "inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(189, 69, 20, 0.06)" }, ".bjork-range::-webkit-slider-thumb": { "appearance": "none", "width": "16px", "height": "8px", "border": "0", "border-radius": "999px", "background": "var(--bjork-thumb)", "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)" }, ".bjork-range::-moz-range-thumb": { "width": "16px", "height": "8px", "border": "0", "border-radius": "999px", "background": "var(--bjork-thumb)", "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)" }, ".bjork-layered-button-accent, .bjork-layered-button-raised": { "position": "relative", "isolation": "isolate", "appearance": "none", "overflow": "hidden", "border": "0", "border-radius": "13px", "box-shadow": "inset 0 1px 0 #ffffff38, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a", "transition": "filter 150ms ease-out, box-shadow 150ms ease-out" }, ".bjork-layered-button-accent::after, .bjork-layered-button-raised::after": { "position": "absolute", "inset": "0", "pointer-events": "none", "content": "\"\"", "border": "1.5px solid transparent", "border-radius": "inherit", "background": "linear-gradient(#ffffffb8, #0000003d 41% 75%, #ffffff47) border-box", "mix-blend-mode": "overlay", "-webkit-mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)", "mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)", "-webkit-mask-clip": "padding-box, border-box", "mask-clip": "padding-box, border-box", "-webkit-mask-origin": "padding-box, border-box", "mask-origin": "padding-box, border-box", "-webkit-mask-composite": "xor", "mask-composite": "exclude" }, ".bjork-layered-button-accent": { "color": "oklch(100% 0 0)", "text-shadow": "0 -1px #00000040", "background": "radial-gradient(ellipse at -20px top, rgba(255, 255, 255, 0.14), transparent), linear-gradient(180deg, #ec5c13 0%, #ec5c13 62%, color-mix(in oklab, #ec5c13 84%, black 16%) 100%)" }, ".bjork-layered-button-raised": { "color": "oklch(100% 0 0)", "text-shadow": "0 -1px #00000026", "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, oklch(0.1881 0.006 265), oklch(0.5493 0.0081 265))" }, ".dark .bjork-layered-button-raised": { "color": "oklch(0.2574 0.0056 265)", "text-shadow": "0 -1px #00000026", "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, color-mix(in oklab, oklch(0.9674 0.0013 265) 80%, oklch(0.2574 0.0056 265) 20%), color-mix(in oklab, oklch(0.669 0.0107 265) 80%, oklch(0.2574 0.0056 265) 20%))" }, "@media (hover: hover)": { ".bjork-layered-button-accent:hover": { "filter": "brightness(1.08) saturate(1.04)" }, ".bjork-layered-button-raised:hover": { "filter": "brightness(1.08) contrast(0.9)" } } }, "meta": { "collection": "Utilities", "registryUrl": "https://ui.isaiahbjork.com/stroke-morph-icon.json", "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/stroke-morph-icon.json" }, "type": "registry:component" }