2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T2f46,"use client"; import { useEffect, useRef, useState, type PointerEvent as RPointerEvent } from "react"; import { IconArrowBackUp, IconCopy } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { CopyCheck } from "@/components/ui/copy-check"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { serializePath } from "./path-model"; import type { Anchor, Vec, VectorPath } from "./types"; import { add, sub } from "./types"; export type VectorMirror = "none" | "angle" | "angle-length"; export interface EditorStyle { accent: string; arm: string; anchorR: number; handleR: number; pointFill: string; fill: string; fillOpacity: number; stroke: string; strokeWidth: number; showRig: boolean; fillRule: "nonzero" | "evenodd"; } export const DEFAULT_EDITOR: EditorStyle = { accent: "var(--primary)", arm: "color-mix(in srgb, var(--foreground) 38%, transparent)", anchorR: 4, handleR: 3.2, pointFill: "var(--background)", fill: "var(--primary)", fillOpacity: 0.08, stroke: "var(--primary)", strokeWidth: 1.5, showRig: true, fillRule: "evenodd", }; type Drag = | { kind: "anchor"; i: number } | { kind: "handle"; i: number; side: "in" | "out"; mirror: VectorMirror }; /** * SVG point editor. Drag anchors to move them (handles travel along), drag the * diamond handles to bend the curve; the opposite handle mirrors unless hold-Alt * breaks it for that gesture. Pointer math runs through one rAF, so a fast drag * never queues more work than the next frame. */ export function VectorEditor({ path, onChange, style = DEFAULT_EDITOR, mirror = "angle-length", viewBox, width, height, className, }: { path: VectorPath; onChange: (next: VectorPath) => void; style?: EditorStyle; mirror?: VectorMirror; viewBox: [number, number, number, number]; width?: number; height?: number; className?: string; }) { const svgRef = useRef(null); const drag = useRef(null); const pathRef = useRef(path); useEffect(() => { pathRef.current = path; }, [path]); const pending = useRef(null); const rafMove = useRef(0); const [selected, setSelected] = useState(null); function toUser(e: { clientX: number; clientY: number }): Vec { const svg = svgRef.current; if (!svg) return { x: 0, y: 0 }; const ctm = svg.getScreenCTM(); if (!ctm) return { x: 0, y: 0 }; const pt = svg.createSVGPoint(); pt.x = e.clientX; pt.y = e.clientY; const u = pt.matrixTransform(ctm.inverse()); return { x: u.x, y: u.y }; } function startAnchor(e: RPointerEvent, i: number) { e.stopPropagation(); (e.target as Element).setPointerCapture(e.pointerId); setSelected(i); drag.current = { kind: "anchor", i }; } function startHandle(e: RPointerEvent, i: number, side: "in" | "out") { e.stopPropagation(); (e.target as Element).setPointerCapture(e.pointerId); setSelected(i); drag.current = { kind: "handle", i, side, mirror: e.altKey ? "none" : mirror }; } function applyDrag(d: Drag, u: Vec): VectorPath { const anchors = pathRef.current.anchors.map( (a) => ({ p: { ...a.p }, in: a.in ? { ...a.in } : null, out: a.out ? { ...a.out } : null }) as Anchor, ); if (d.kind === "anchor") { const a = anchors[d.i]!; const delta = sub(u, a.p); a.p = u; if (a.in) a.in = add(a.in, delta); if (a.out) a.out = add(a.out, delta); } else { const a = anchors[d.i]!; if (d.side === "out") a.out = u; else a.in = u; const other = d.side === "out" ? a.in : a.out; if (d.mirror !== "none" && other) { const rel = sub(u, a.p); const relLen = Math.hypot(rel.x, rel.y) || 1; const len = d.mirror === "angle-length" ? relLen : Math.hypot(other.x - a.p.x, other.y - a.p.y); const opp = { x: a.p.x - (rel.x / relLen) * len, y: a.p.y - (rel.y / relLen) * len }; if (d.side === "out") a.in = opp; else a.out = opp; } } return { anchors, starts: pathRef.current.starts, closed: pathRef.current.closed }; } function onMove(e: RPointerEvent) { if (!drag.current) return; pending.current = toUser(e); if (rafMove.current) return; rafMove.current = requestAnimationFrame(() => { rafMove.current = 0; const d = drag.current; const u = pending.current; if (!d || !u) return; onChange(applyDrag(d, u)); }); } function endDrag(e: RPointerEvent) { if (drag.current) { if (rafMove.current) { cancelAnimationFrame(rafMove.current); rafMove.current = 0; const u = pending.current; if (u) onChange(applyDrag(drag.current, u)); } try { (e.target as Element).releasePointerCapture(e.pointerId); } catch { // Pointer already released (blur, unmount): nothing to free. } drag.current = null; pending.current = null; } } /** Keyboard twin of dragging: arrows nudge the selected anchor. */ function onKeyDown(e: React.KeyboardEvent) { if (selected == null) return; const step = e.shiftKey ? 10 : 1; const moves: Record = { ArrowLeft: { x: -step, y: 0 }, ArrowRight: { x: step, y: 0 }, ArrowUp: { x: 0, y: -step }, ArrowDown: { x: 0, y: step }, }; const move = moves[e.key]; if (!move) return; e.preventDefault(); onChange(applyDrag({ kind: "anchor", i: selected }, add(pathRef.current.anchors[selected]!.p, move))); } const s = style; const d = serializePath(path); const arms: Array<{ ax: number; ay: number; hx: number; hy: number }> = []; if (s.showRig) { for (const a of path.anchors) { if (a.out) arms.push({ ax: a.p.x, ay: a.p.y, hx: a.out.x, hy: a.out.y }); if (a.in) arms.push({ ax: a.p.x, ay: a.p.y, hx: a.in.x, hy: a.in.y }); } } return ( ); } function Diamond({ cx, cy, r, fill, stroke, onPointerDown, }: { cx: number; cy: number; r: number; fill: string; stroke: string; onPointerDown: (e: RPointerEvent) => void; }) { return ( ); } const MIRROR_LABEL: Record = { none: "Free handles", angle: "Mirror angle", "angle-length": "Mirror angle and length", }; /** Kobra toolbar for the editor: mirror mode, rig toggle, reset, and copy-path. */ export function VectorEditorToolbar({ mirror, onMirrorChange, showRig, onShowRigChange, onReset, pathText, className, }: { mirror: VectorMirror; onMirrorChange: (mirror: VectorMirror) => void; showRig: boolean; onShowRigChange: (show: boolean) => void; onReset: () => void; pathText: string; className?: string; }) { const [copied, setCopied] = useState(false); const timer = useRef(0); useEffect(() => () => window.clearTimeout(timer.current), []); const copy = async () => { try { await navigator.clipboard.writeText(pathText); } catch { return; } setCopied(true); window.clearTimeout(timer.current); timer.current = window.setTimeout(() => setCopied(false), 1500); }; return (

{ if (next[0]) onMirrorChange(next[0] as VectorMirror); }} > {(Object.keys(MIRROR_LABEL) as VectorMirror[]).map((mode) => ( }> {mode === "none" ? "Free" : mode === "angle" ? "Angle" : "Mirror"} {MIRROR_LABEL[mode]} ))} onShowRigChange(next.includes("rig"))} > }> Rig Points and handles }> Restore the original mark }> Copy the SVG path data

); } 31:Te31,"use client"; import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface FrameStyle { accent: string; handleSize: number; handleFill: string; borderWidth: number; showHandles: boolean; showBadge: boolean; badgeBg: string; badgeText: string; } export const DEFAULT_FRAME: FrameStyle = { accent: "var(--primary)", handleSize: 8, handleFill: "var(--background)", borderWidth: 1, showHandles: true, showBadge: true, badgeBg: "var(--primary)", badgeText: "var(--primary-foreground)", }; /** * The Figma look: a thin accent box with corner squares and a `w × h` badge * under it. Wraps the editor (or any preview) and measures its own box when * no explicit width/height is given. Nothing animates on first paint; the * badge and corners fade in once, and stay still under reduced motion. */ export function FigmaFrame({ children, style = DEFAULT_FRAME, showFrame = true, width, height, className, }: { children: ReactNode; style?: FrameStyle; showFrame?: boolean; width?: number; height?: number; className?: string; }) { const ref = useRef(null); const [measured, setMeasured] = useState({ w: 0, h: 0 }); const [mounted, setMounted] = useState(false); useEffect(() => { const id = window.requestAnimationFrame(() => setMounted(true)); return () => window.cancelAnimationFrame(id); }, []); useEffect(() => { if (width != null && height != null) return; const el = ref.current; if (!el) return; const ro = new ResizeObserver(() => { const r = el.getBoundingClientRect(); setMeasured({ w: Math.round(r.width), h: Math.round(r.height) }); }); ro.observe(el); return () => ro.disconnect(); }, [width, height]); const w = width ?? measured.w; const h = height ?? measured.h; const s = style; const half = s.handleSize / 2; const corner = (pos: CSSProperties, key: string): ReactNode => ( ); return (

{showFrame ? (

) : null} {showFrame && s.showHandles ? ( <> {corner({ top: -half, left: -half }, "tl")} {corner({ top: -half, right: -half }, "tr")} {corner({ bottom: -half, right: -half }, "br")} {corner({ bottom: -half, left: -half }, "bl")} ) : null} {showFrame && s.showBadge ? ( {w} × {h} ) : null} {children}

); } 32:T1b4a,import type { Anchor, Vec, VectorPath } from "./types"; import { subRange, v } from "./types"; function tokenize(d: string): Array<{ cmd: string; args: number[] }> { const out: Array<{ cmd: string; args: number[] }> = []; const re = /([MmLlHhVvCcSsQqTtAaZz])|(-?\d*\.?\d+(?:e[-+]?\d+)?)/gi; let m: RegExpExecArray | null; let cur: { cmd: string; args: number[] } | null = null; while ((m = re.exec(d))) { if (m[1]) { cur = { cmd: m[1], args: [] }; out.push(cur); } else if (cur && m[2] !== undefined) { cur.args.push(parseFloat(m[2])); } } return out; } /** * Parse an SVG path into editable anchors. Supports M L H V C S Q T Z * (relative and absolute); quadratics are elevated to cubics. Arcs are * rejected — the editor has no arc handles, so failing loudly beats * silently straightening a curve. */ export function parsePath(d: string): VectorPath { const tokens = tokenize(d); const anchors: Anchor[] = []; const starts: number[] = []; const closed: boolean[] = []; let cur: Vec = v(0, 0); let start: Vec = v(0, 0); let prevCtrl: Vec | null = null; let prevCmd = ""; const push = (p: Vec) => anchors.push({ p, out: null, in: null }); const last = () => anchors[anchors.length - 1]!; const dedupClose = () => { if (!starts.length) return; const si = starts[starts.length - 1]!; if (anchors.length - si > 1) { const a = anchors[si]!.p; const z = anchors[anchors.length - 1]!.p; if (Math.abs(a.x - z.x) < 0.01 && Math.abs(a.y - z.y) < 0.01) { anchors[si]!.in = anchors[anchors.length - 1]!.in; anchors.pop(); } } }; for (const { cmd, args } of tokens) { const rel = cmd === cmd.toLowerCase(); const C = cmd.toUpperCase(); let i = 0; const num = () => args[i++] ?? 0; const pt = (): Vec => { const x = num(); const y = num(); return rel ? { x: cur.x + x, y: cur.y + y } : { x, y }; }; switch (C) { case "M": { if (starts.length && closed[closed.length - 1]) dedupClose(); cur = pt(); start = cur; starts.push(anchors.length); closed.push(false); push(cur); while (i < args.length) { cur = pt(); push(cur); } prevCtrl = null; break; } case "L": { while (i < args.length) { cur = pt(); push(cur); } prevCtrl = null; break; } case "H": { while (i < args.length) { const x = num(); cur = { x: rel ? cur.x + x : x, y: cur.y }; push(cur); } prevCtrl = null; break; } case "V": { while (i < args.length) { const y = num(); cur = { x: cur.x, y: rel ? cur.y + y : y }; push(cur); } prevCtrl = null; break; } case "C": { while (i + 6 <= args.length) { const c1 = pt(); const c2 = pt(); const end = pt(); last().out = c1; push(end); last().in = c2; cur = end; prevCtrl = c2; } break; } case "S": { while (i + 4 <= args.length) { const c1: Vec = prevCmd === "C" || prevCmd === "S" ? { x: 2 * cur.x - (prevCtrl?.x ?? cur.x), y: 2 * cur.y - (prevCtrl?.y ?? cur.y) } : { ...cur }; const c2 = pt(); const end = pt(); last().out = c1; push(end); last().in = c2; cur = end; prevCtrl = c2; } break; } case "Q": { while (i + 4 <= args.length) { const qc = pt(); const end = pt(); const c1 = { x: cur.x + (2 / 3) * (qc.x - cur.x), y: cur.y + (2 / 3) * (qc.y - cur.y) }; const c2 = { x: end.x + (2 / 3) * (qc.x - end.x), y: end.y + (2 / 3) * (qc.y - end.y) }; last().out = c1; push(end); last().in = c2; cur = end; prevCtrl = qc; } break; } case "T": { while (i + 2 <= args.length) { const qc: Vec = prevCmd === "Q" || prevCmd === "T" ? { x: 2 * cur.x - (prevCtrl?.x ?? cur.x), y: 2 * cur.y - (prevCtrl?.y ?? cur.y) } : { ...cur }; const end = pt(); const c1 = { x: cur.x + (2 / 3) * (qc.x - cur.x), y: cur.y + (2 / 3) * (qc.y - cur.y) }; const c2 = { x: end.x + (2 / 3) * (qc.x - end.x), y: end.y + (2 / 3) * (qc.y - end.y) }; last().out = c1; push(end); last().in = c2; cur = end; prevCtrl = qc; } break; } case "Z": { if (closed.length) closed[closed.length - 1] = true; cur = start; prevCtrl = null; break; } case "A": throw new Error("Arc commands (A) are not supported by the point editor."); default: throw new Error(`Unsupported path command: ${cmd}`); } prevCmd = C; } if (starts.length && closed[closed.length - 1]) dedupClose(); return { anchors, starts, closed }; } const n = (x: number) => String(Math.round(x * 100) / 100); /** Anchors back to a compact path string: M, then L or C per segment, Z to close. */ export function serializePath(path: VectorPath): string { const { anchors, starts, closed } = path; if (!anchors.length || !starts.length) return ""; const parts: string[] = []; for (let s = 0; s < starts.length; s += 1) { const [begin, end] = subRange(path, s); const count = end - begin; if (count === 0) continue; const isClosed = closed[s] ?? false; parts.push(`M ${n(anchors[begin]!.p.x)} ${n(anchors[begin]!.p.y)}`); const segCount = isClosed ? count : count - 1; for (let k = 0; k < segCount; k += 1) { const a = anchors[begin + k]!; const b = anchors[begin + ((k + 1) % count)]!; if (a.out ?? b.in) { const c1 = a.out ?? a.p; const c2 = b.in ?? b.p; parts.push(`C ${n(c1.x)} ${n(c1.y)} ${n(c2.x)} ${n(c2.y)} ${n(b.p.x)} ${n(b.p.y)}`); } else { parts.push(`L ${n(b.p.x)} ${n(b.p.y)}`); } } if (isClosed) parts.push("Z"); } return parts.join(" "); } /** Tight box over anchors and handles, for the Figma-style size badge. */ export function pathBounds(path: VectorPath): { x: number; y: number; w: number; h: number } { let minX = Infinity; let minY = Infinity; let maxX = -Infinity; let maxY = -Infinity; const eat = (p: Vec) => { if (p.x < minX) minX = p.x; if (p.y < minY) minY = p.y; if (p.x > maxX) maxX = p.x; if (p.y > maxY) maxY = p.y; }; for (const a of path.anchors) { eat(a.p); if (a.in) eat(a.in); if (a.out) eat(a.out); } if (!isFinite(minX)) return { x: 0, y: 0, w: 0, h: 0 }; return { x: minX, y: minY, w: maxX - minX, h: maxY - minY }; } 33:Tdcb,"use client"; import { useMemo, useState } from "react"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { DEFAULT_FRAME, FigmaFrame } from "./figma-frame"; import { parsePath, pathBounds, serializePath } from "./path-model"; import type { VectorPath } from "./types"; import { DEFAULT_EDITOR, VectorEditor, VectorEditorToolbar, type VectorMirror } from "./vector-editor"; /** Sticker badge: an arch with bezier shoulders — drag the diamonds to bend it. */ const BADGE = "M 40 130 C 40 76 68 42 100 42 C 132 42 160 76 160 130 L 138 130 C 138 88 122 64 100 64 C 78 64 62 88 62 130 Z"; /** Wordmark flourish: one open quadratic, elevated to cubics for the handles. */ const FLOURISH = "M 28 132 Q 100 172 172 108"; /** Blob sticker: a smooth closed loop for free-handle play. */ const BLOB = "M 100 28 C 140 28 172 60 172 100 C 172 140 140 172 100 172 C 60 172 28 140 28 100 C 28 60 60 28 100 28 Z"; const BOX: [number, number, number, number] = [0, 0, 200, 200]; function MarkStudio({ initial, presentation = false }: { initial: string; presentation?: boolean }) { const seed = useMemo(() => parsePath(initial), [initial]); const [path, setPath] = useState(seed); const [mirror, setMirror] = useState("angle-length"); const [showRig, setShowRig] = useState(true); const text = serializePath(path); const box = pathBounds(path); return (

{!presentation ? ( setPath(seed)} pathText={text} /> ) : null}

{!presentation ? (

          {text}

) : null}

); } export function VectorEditorDemo() { return ( ); } export default VectorEditorDemo; 34:T5a0,import type { BlockMeta } from "../../../lib/block-meta"; export const vectorEditorMeta: BlockMeta = { slug: "vector-editor", title: "Vector editor", description: "Figma-like SVG point editing: draggable anchors and bezier handles in a measured frame with a size badge. Mirror modes, rig toggle, reset, and copy-path through Kobra controls.", group: "showcase", kobraDeps: ["button", "toggle-group", "tooltip", "copy-check"], files: [ "blocks/showcase/vector-editor/vector-editor.tsx", "blocks/showcase/vector-editor/figma-frame.tsx", "blocks/showcase/vector-editor/path-model.ts", "blocks/showcase/vector-editor/types.ts", ], props: [ { name: "path / onChange", type: "VectorPath", description: "Editable anchors; parse with parsePath, read back with serializePath." }, { name: "mirror", type: "'none' | 'angle' | 'angle-length'", default: "'angle-length'", description: "How the opposite handle follows. Alt-drag breaks it once." }, { name: "viewBox", type: "[number, number, number, number]", description: "SVG user space the mark lives in." }, { name: "style", type: "EditorStyle", description: "Accent, rig, fill, stroke, handle sizes." }, ], tags: ["svg", "bezier", "editor", "logo", "motion"], status: "ready", origin: { name: "Arlan Rakhmetzhanov vector editor", url: "https://figma.com", license: "Published source, no license stated (re-authored)", }, }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#showcase","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Showcase"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Vector editor"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Vector editor"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Figma-like SVG point editing: draggable anchors and bezier handles in a measured frame with a size badge. Mirror modes, rig toggle, reset, and copy-path through Kobra controls."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"vector-editor","group":"showcase","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/showcase/vector-editor/vector-editor.tsx","code":"$30"},{"path":"blocks/showcase/vector-editor/figma-frame.tsx","code":"$31"},{"path":"blocks/showcase/vector-editor/path-model.ts","code":"$32"},{"path":"blocks/showcase/vector-editor/types.ts","code":"/** Point model for the vector editor: anchors with optional bezier handles. */\n\nexport interface Vec {\n x: number;\n y: number;\n}\n\nexport interface Anchor {\n /** On-curve point. */\n p: Vec;\n /** Absolute handle positions (not offsets); null means a sharp corner side. */\n out: Vec | null;\n in: Vec | null;\n}\n\nexport interface VectorPath {\n anchors: Anchor[];\n /** Anchor index where each subpath starts. */\n starts: number[];\n closed: boolean[];\n}\n\nexport const v = (x: number, y: number): Vec => ({ x, y });\nexport const add = (a: Vec, b: Vec): Vec => ({ x: a.x + b.x, y: a.y + b.y });\nexport const sub = (a: Vec, b: Vec): Vec => ({ x: a.x - b.x, y: a.y - b.y });\n\n/** Anchor range of subpath `s` as [begin, end). */\nexport function subRange(path: VectorPath, s: number): [number, number] {\n const begin = path.starts[s] ?? 0;\n const end = s + 1 < path.starts.length ? (path.starts[s + 1] ?? path.anchors.length) : path.anchors.length;\n return [begin, end];\n}\n"},{"path":"blocks/showcase/vector-editor/demo.tsx","code":"$33"},{"path":"blocks/showcase/vector-editor/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]