` (internal helper, exported\n// for parity with the sibling sub-components and demos).\n// ---------------------------------------------------------------------------\n\nexport function LiveString({ value }: { value: string }) {\n return (\n \n {value || \" \"}\n \n )\n}\n",
"type": "registry:ui",
"target": "components/ui/shape-path-editor/shape-path-editor.tsx"
},
{
"path": "src/components/ui/shape-path-editor/shape-path-editor.types.ts",
"content": "// =====================================================================\n// shape-path-editor.types.ts — ridiculously typed CSS shape() function\n// (CSS Shapes L2; for clip-path / offset-path).\n//\n// ShapeLiteral peels the shape() wrapper, validates the optional\n// fill-rule + the `from ` seed, then dispatches each\n// comma-separated command on its name (move/line/hline/vline/curve/\n// smooth/arc/close) — per-command arity, the by/to direction keyword, the\n// with/of slot keywords, and every coordinate's dimension. In the\n// transform-builder / clip-path-editor function-dispatch lineage.\n//\n// NOTE: coordinates are — the kit's IsLength requires a\n// unit, so `0px` / `0%` are required (bare `0` is rejected, consistent with\n// every other ridiculous component). hline/vline keyword positions + arc\n// flags are deferred to the runtime parser (see spec §3.1).\n//\n// Spec: docs/superpowers/specs/2026-06-19-shape-path-editor-design.md\n// =====================================================================\n\nimport type {\n And,\n IsLength,\n IsPercentage,\n KeepIf,\n Or,\n ParseFunction,\n SplitByComma,\n SplitBySpace,\n} from \"@/lib/ridiculous-type-kit\"\n\n/** A `` token. */\ntype LP = Or, IsPercentage>\n\ntype IsByTo = S extends \"by\" | \"to\" ? true : false\n\n/** The eight `` names. */\nexport type ShapeCommandName =\n | \"move\"\n | \"line\"\n | \"hline\"\n | \"vline\"\n | \"curve\"\n | \"smooth\"\n | \"arc\"\n | \"close\"\n\ntype FillRule = \"nonzero\" | \"evenodd\"\n\n// ---------------------------------------------------------------------------\n// the `from` seed segment (optional fill-rule + from )\n// ---------------------------------------------------------------------------\n\ntype ValidFrom = Toks extends [\n \"from\",\n infer X extends string,\n infer Y extends string,\n]\n ? And, LP>\n : false\n\ntype ValidFromSeg =\n SplitBySpace extends [\n infer A extends string,\n ...infer Rest extends string[],\n ]\n ? A extends FillRule\n ? ValidFrom\n : ValidFrom<[A, ...Rest]>\n : false\n\n// ---------------------------------------------------------------------------\n// per-command validators\n// ---------------------------------------------------------------------------\n\n// move|line : \ntype ValidLineLike = Rest extends [\n infer D extends string,\n infer X extends string,\n infer Y extends string,\n]\n ? And, And, LP>>\n : false\n\n// hline|vline : \ntype ValidHV = Rest extends [\n infer D extends string,\n infer V extends string,\n]\n ? And, LP>\n : false\n\n// the control-point tail of curve: [ / ]\ntype ValidControlTail = Ctrl extends [\n infer X1 extends string,\n infer Y1 extends string,\n]\n ? And, LP>\n : Ctrl extends [\n infer X1 extends string,\n infer Y1 extends string,\n \"/\",\n infer X2 extends string,\n infer Y2 extends string,\n ]\n ? And, LP>, And, LP>>\n : false\n\n// curve : with \ntype ValidCurve = Rest extends [\n infer D extends string,\n infer X extends string,\n infer Y extends string,\n \"with\",\n ...infer Ctrl extends string[],\n]\n ? And, And, LP>, ValidControlTail>>\n : false\n\n// smooth : [ with ]\ntype ValidSmooth = Rest extends [\n infer D extends string,\n infer X extends string,\n infer Y extends string,\n]\n ? And, And, LP>>\n : Rest extends [\n infer D extends string,\n infer X extends string,\n infer Y extends string,\n \"with\",\n infer CX extends string,\n infer CY extends string,\n ]\n ? And, And, LP>, And, LP>>>\n : false\n\n// arc : of [ ] (tail lenient — A5)\ntype ValidArc = Rest extends [\n infer D extends string,\n infer X extends string,\n infer Y extends string,\n \"of\",\n infer R extends string,\n ...string[],\n]\n ? And, And, LP>, LP>>\n : false\n\ntype ValidCommand =\n SplitBySpace extends [\n infer Name extends string,\n ...infer Rest extends string[],\n ]\n ? Name extends \"close\"\n ? Rest extends []\n ? true\n : false\n : Name extends \"move\" | \"line\"\n ? ValidLineLike\n : Name extends \"hline\" | \"vline\"\n ? ValidHV\n : Name extends \"curve\"\n ? ValidCurve\n : Name extends \"smooth\"\n ? ValidSmooth\n : Name extends \"arc\"\n ? ValidArc\n : false\n : false\n\ntype AllCommands = Cmds extends [\n infer H extends string,\n ...infer R extends string[],\n]\n ? ValidCommand extends true\n ? AllCommands\n : false\n : true\n\ntype ValidateShapeBody =\n SplitByComma extends [\n infer First extends string,\n ...infer Cmds extends string[],\n ]\n ? ValidFromSeg extends true\n ? AllCommands\n : false\n : false\n\n/** Strict validator for a CSS `shape()` value. `S` or `never`. */\nexport type ShapeLiteral =\n ParseFunction extends {\n name: \"shape\"\n args: infer Args extends string\n }\n ? KeepIf, S>\n : never\n\n// ---------------------------------------------------------------------------\n// call-site helper + suggestion + utility\n// ---------------------------------------------------------------------------\n\nexport const cssShape = (value: S & ShapeLiteral): S =>\n value\n\nexport type ShapeString = `shape(${string})` | (string & {})\n\n/** The command segments of a shape() value (everything after the `from` seed). */\nexport type CommandsOf =\n ParseFunction extends {\n args: infer Args extends string\n }\n ? SplitByComma extends [string, ...infer Cmds extends string[]]\n ? Cmds\n : []\n : []\n\nexport type CommandCountOf = CommandsOf[\"length\"]\n\n// ---------------------------------------------------------------------------\n// internal state (exported for advanced use)\n// ---------------------------------------------------------------------------\n\nexport interface Point {\n x: string\n y: string\n}\n\nexport type ShapeCommand =\n | { kind: \"move\" | \"line\"; by: boolean; to: Point }\n | { kind: \"hline\" | \"vline\"; by: boolean; value: string }\n | { kind: \"curve\"; by: boolean; to: Point; control: Point; control2?: Point }\n | { kind: \"smooth\"; by: boolean; to: Point; control?: Point }\n | { kind: \"arc\"; by: boolean; to: Point; radius: Point; flags?: string }\n | { kind: \"close\" }\n\nexport interface ShapeValue {\n fillRule: \"nonzero\" | \"evenodd\" | null\n from: Point\n commands: ShapeCommand[]\n}\n",
"type": "registry:ui",
"target": "components/ui/shape-path-editor/shape-path-editor.types.ts"
},
{
"path": "src/components/ui/shape-path-editor/shape-path-editor.helpers.ts",
"content": "// =====================================================================\n// shape-path-editor.helpers.ts\n//\n// Pure runtime parse / format / geometry for CSS `shape()` values\n// (CSS Shapes L2; for clip-path / offset-path). This is the SUPERSET of the\n// strict type tier in shape-path-editor.types.ts: it dispatches each comma-\n// separated command on its name (move/line/hline/vline/curve/smooth/arc/\n// close) into the discriminated `ShapeCommand` union, tolerates a lenient arc\n// flags tail (spec A5), and drives the draggable canvas via shapeToPoints /\n// updatePoint. The single source the UI parses from and serializes to.\n// =====================================================================\n\nimport type {\n Point,\n ShapeCommand,\n ShapeCommandName,\n ShapeValue,\n} from \"./shape-path-editor.types\"\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst COMMAND_NAMES: readonly ShapeCommandName[] = [\n \"move\",\n \"line\",\n \"hline\",\n \"vline\",\n \"curve\",\n \"smooth\",\n \"arc\",\n \"close\",\n]\n\nconst COMMAND_NAME_SET = new Set(COMMAND_NAMES)\nconst FILL_RULES = new Set([\"nonzero\", \"evenodd\"])\n\nconst CALL_RE = /^([a-z-]+)\\((.*)\\)$/is\n\n// ---------------------------------------------------------------------------\n// Splitters (paren-aware; runtime mirror of the kit combinators)\n// ---------------------------------------------------------------------------\n\n/** Split on `sep` only at bracket depth 0. */\nfunction splitTopLevel(src: string, sep: string): string[] {\n const out: string[] = []\n let depth = 0\n let cur = \"\"\n for (const ch of src) {\n if (ch === \"(\" || ch === \"[\") depth++\n else if (ch === \")\" || ch === \"]\") depth--\n if (ch === sep && depth === 0) {\n out.push(cur)\n cur = \"\"\n } else {\n cur += ch\n }\n }\n out.push(cur)\n return out\n}\n\n/** Split into space-separated tokens, dropping empty runs. */\nfunction splitSpace(src: string): string[] {\n return splitTopLevel(src, \" \")\n .map((s) => s.trim())\n .filter((s) => s.length > 0)\n}\n\n/** Split into comma-separated parts, dropping empty parts. */\nfunction splitComma(src: string): string[] {\n return splitTopLevel(src, \",\")\n .map((s) => s.trim())\n .filter((s) => s.length > 0)\n}\n\n// ---------------------------------------------------------------------------\n// Coordinate dimension check (runtime mirror of LP — needs a unit)\n// ---------------------------------------------------------------------------\n\nconst LP_RE =\n /^[+-]?(\\d+\\.?\\d*|\\.\\d+)(%|px|rem|em|vw|vh|vmin|vmax|ch|ex|cm|mm|in|pt|pc|q)$/i\n\n/** A `` token — a number with a unit (bare `0` rejected). */\nfunction isLP(token: string): boolean {\n return LP_RE.test(token.trim())\n}\n\nfunction isByTo(token: string): token is \"by\" | \"to\" {\n return token === \"by\" || token === \"to\"\n}\n\n// ---------------------------------------------------------------------------\n// from seed\n// ---------------------------------------------------------------------------\n\ninterface FromSeed {\n fillRule: \"nonzero\" | \"evenodd\" | null\n from: Point\n}\n\nfunction parseFromSeg(seg: string): FromSeed | null {\n let tokens = splitSpace(seg)\n let fillRule: \"nonzero\" | \"evenodd\" | null = null\n if (tokens.length > 0 && FILL_RULES.has(tokens[0])) {\n fillRule = tokens[0] as \"nonzero\" | \"evenodd\"\n tokens = tokens.slice(1)\n }\n if (tokens.length !== 3 || tokens[0] !== \"from\") return null\n const [, x, y] = tokens\n if (!isLP(x) || !isLP(y)) return null\n return { fillRule, from: { x, y } }\n}\n\n// ---------------------------------------------------------------------------\n// per-command builders — tokens → ShapeCommand | null\n// ---------------------------------------------------------------------------\n\nfunction buildLineLike(\n kind: \"move\" | \"line\",\n rest: string[],\n): ShapeCommand | null {\n if (rest.length !== 3) return null\n const [dir, x, y] = rest\n if (!isByTo(dir) || !isLP(x) || !isLP(y)) return null\n return { kind, by: dir === \"by\", to: { x, y } }\n}\n\nfunction buildHV(kind: \"hline\" | \"vline\", rest: string[]): ShapeCommand | null {\n if (rest.length !== 2) return null\n const [dir, value] = rest\n if (!isByTo(dir) || !isLP(value)) return null\n return { kind, by: dir === \"by\", value }\n}\n\nfunction buildCurve(rest: string[]): ShapeCommand | null {\n // with [ / ]\n if (rest.length < 6) return null\n const [dir, x, y, withKw, ...ctrl] = rest\n if (!isByTo(dir) || !isLP(x) || !isLP(y) || withKw !== \"with\") return null\n const to: Point = { x, y }\n if (ctrl.length === 2) {\n if (!isLP(ctrl[0]) || !isLP(ctrl[1])) return null\n return {\n kind: \"curve\",\n by: dir === \"by\",\n to,\n control: { x: ctrl[0], y: ctrl[1] },\n }\n }\n if (ctrl.length === 5 && ctrl[2] === \"/\") {\n const [cx1, cy1, , cx2, cy2] = ctrl\n if (!isLP(cx1) || !isLP(cy1) || !isLP(cx2) || !isLP(cy2)) return null\n return {\n kind: \"curve\",\n by: dir === \"by\",\n to,\n control: { x: cx1, y: cy1 },\n control2: { x: cx2, y: cy2 },\n }\n }\n return null\n}\n\nfunction buildSmooth(rest: string[]): ShapeCommand | null {\n // [ with ]\n const [dir, x, y, withKw, cx, cy] = rest\n if (rest.length === 3) {\n if (!isByTo(dir) || !isLP(x) || !isLP(y)) return null\n return { kind: \"smooth\", by: dir === \"by\", to: { x, y } }\n }\n if (rest.length === 6) {\n if (\n !isByTo(dir) ||\n !isLP(x) ||\n !isLP(y) ||\n withKw !== \"with\" ||\n !isLP(cx) ||\n !isLP(cy)\n ) {\n return null\n }\n return {\n kind: \"smooth\",\n by: dir === \"by\",\n to: { x, y },\n control: { x: cx, y: cy },\n }\n }\n return null\n}\n\nfunction buildArc(rest: string[]): ShapeCommand | null {\n // of [ ] [ flags… ] (flags lenient — A5)\n if (rest.length < 5) return null\n const [dir, x, y, ofKw, rx, ...tail] = rest\n if (!isByTo(dir) || !isLP(x) || !isLP(y) || ofKw !== \"of\" || !isLP(rx)) {\n return null\n }\n // A second radius is present iff the next token is also a .\n let ry = rx\n let flagsTokens = tail\n if (tail.length > 0 && isLP(tail[0])) {\n ry = tail[0]\n flagsTokens = tail.slice(1)\n }\n const cmd: Extract = {\n kind: \"arc\",\n by: dir === \"by\",\n to: { x, y },\n radius: { x: rx, y: ry },\n }\n if (flagsTokens.length > 0) cmd.flags = flagsTokens.join(\" \")\n return cmd\n}\n\nfunction buildCommand(seg: string): ShapeCommand | null {\n const tokens = splitSpace(seg)\n if (tokens.length === 0) return null\n const name = tokens[0]\n const rest = tokens.slice(1)\n switch (name) {\n case \"close\":\n return rest.length === 0 ? { kind: \"close\" } : null\n case \"move\":\n case \"line\":\n return buildLineLike(name, rest)\n case \"hline\":\n case \"vline\":\n return buildHV(name, rest)\n case \"curve\":\n return buildCurve(rest)\n case \"smooth\":\n return buildSmooth(rest)\n case \"arc\":\n return buildArc(rest)\n default:\n return null\n }\n}\n\n// ---------------------------------------------------------------------------\n// parseShape — string → { fillRule, from, commands, error }\n// ---------------------------------------------------------------------------\n\nconst EMPTY_FROM: Point = { x: \"0px\", y: \"0px\" }\n\n/**\n * Parse a CSS `shape()` value into typed state. `error` is `null` on success\n * and a message otherwise; on error `from`/`commands` hold whatever was parsed\n * so far (empty when the wrapper itself is malformed). Rejects a non-`shape()`\n * function, a missing `from` seed, an unknown command, wrong arity, a missing\n * `by`/`to` direction, and any coordinate without a unit.\n */\nexport function parseShape(src: string): ShapeValue & { error: string | null } {\n const trimmed = src.trim()\n const m = trimmed.match(CALL_RE)\n if (m === null || m[1].toLowerCase() !== \"shape\") {\n return {\n fillRule: null,\n from: EMPTY_FROM,\n commands: [],\n error: \"not a shape() function\",\n }\n }\n const segs = splitComma(m[2])\n if (segs.length === 0) {\n return {\n fillRule: null,\n from: EMPTY_FROM,\n commands: [],\n error: \"empty shape()\",\n }\n }\n const seed = parseFromSeg(segs[0])\n if (seed === null) {\n return {\n fillRule: null,\n from: EMPTY_FROM,\n commands: [],\n error: \"a shape() must begin with a `from ` seed\",\n }\n }\n const commands: ShapeCommand[] = []\n for (const seg of segs.slice(1)) {\n const cmd = buildCommand(seg)\n if (cmd === null) {\n return {\n fillRule: seed.fillRule,\n from: seed.from,\n commands,\n error: `invalid command: ${seg}`,\n }\n }\n commands.push(cmd)\n }\n return { fillRule: seed.fillRule, from: seed.from, commands, error: null }\n}\n\n// ---------------------------------------------------------------------------\n// formatShape — ShapeValue → canonical string\n// ---------------------------------------------------------------------------\n\nfunction dir(by: boolean): string {\n return by ? \"by\" : \"to\"\n}\n\nfunction commandToCss(cmd: ShapeCommand): string {\n switch (cmd.kind) {\n case \"close\":\n return \"close\"\n case \"move\":\n case \"line\":\n return `${cmd.kind} ${dir(cmd.by)} ${cmd.to.x} ${cmd.to.y}`\n case \"hline\":\n case \"vline\":\n return `${cmd.kind} ${dir(cmd.by)} ${cmd.value}`\n case \"curve\": {\n const tail =\n cmd.control2 !== undefined\n ? `${cmd.control.x} ${cmd.control.y} / ${cmd.control2.x} ${cmd.control2.y}`\n : `${cmd.control.x} ${cmd.control.y}`\n return `curve ${dir(cmd.by)} ${cmd.to.x} ${cmd.to.y} with ${tail}`\n }\n case \"smooth\": {\n const tail =\n cmd.control !== undefined\n ? ` with ${cmd.control.x} ${cmd.control.y}`\n : \"\"\n return `smooth ${dir(cmd.by)} ${cmd.to.x} ${cmd.to.y}${tail}`\n }\n case \"arc\": {\n const radius =\n cmd.radius.x === cmd.radius.y\n ? cmd.radius.x\n : `${cmd.radius.x} ${cmd.radius.y}`\n const flags = cmd.flags !== undefined ? ` ${cmd.flags}` : \"\"\n return `arc ${dir(cmd.by)} ${cmd.to.x} ${cmd.to.y} of ${radius}${flags}`\n }\n }\n}\n\n/** Canonical re-serialization of a `shape()` value (units preserved). */\nexport function formatShape(shape: ShapeValue): string {\n const lead = shape.fillRule !== null ? `${shape.fillRule} ` : \"\"\n const head = `${lead}from ${shape.from.x} ${shape.from.y}`\n const body = shape.commands.map(commandToCss)\n return `shape(${[head, ...body].join(\", \")})`\n}\n\n// ---------------------------------------------------------------------------\n// commandNames / commandArity / defaultShape\n// ---------------------------------------------------------------------------\n\n/** The eight `` names, in canonical order. */\nexport function commandNames(): readonly ShapeCommandName[] {\n return COMMAND_NAMES\n}\n\n/** Whether `name` is one of the eight command kinds. */\nexport function isCommandName(name: string): name is ShapeCommandName {\n return COMMAND_NAME_SET.has(name)\n}\n\n/**\n * The number of draggable coordinate pairs a command kind carries on the\n * canvas: its endpoint plus any control point(s). `hline`/`vline` (a single\n * scalar, no canvas point) and `close` carry none.\n */\nexport function commandArity(kind: ShapeCommandName): number {\n switch (kind) {\n case \"move\":\n case \"line\":\n case \"smooth\":\n case \"arc\":\n return 1\n case \"curve\":\n return 2\n case \"hline\":\n case \"vline\":\n case \"close\":\n return 0\n }\n}\n\n/** A valid, parseable seed value for a freshly-created editor. */\nexport function defaultShape(): string {\n return \"shape(from 0px 0px, line to 100px 0px, close)\"\n}\n\n// ---------------------------------------------------------------------------\n// shapeToPoints / updatePoint — the canvas geometry (normalized 0..200 px)\n// ---------------------------------------------------------------------------\n\nexport type PointRole = \"endpoint\" | \"control\" | \"control2\"\n\nexport interface CanvasPoint {\n /** Stable id derived from cmdIndex + role (survives a re-derive). */\n id: string\n role: PointRole\n /** The owning command index; `-1` is the `from` seed. */\n cmdIndex: number\n x: number\n y: number\n}\n\n/** Strip the unit off a ``, returning its numeric part. */\nfunction toNumber(value: string): number {\n const n = Number.parseFloat(value)\n return Number.isFinite(n) ? n : 0\n}\n\nfunction pointId(cmdIndex: number, role: PointRole): string {\n return `${cmdIndex}:${role}`\n}\n\n/**\n * Project a shape's endpoints and Bézier control handles into a flat list of\n * draggable canvas points in a normalized 0..200 px space (units stripped).\n * The `from` seed is `cmdIndex: -1`. `hline`/`vline`/`close` contribute no\n * points (a single scalar / no geometry). `curve` contributes its endpoint, a\n * `control`, and — when cubic — a `control2`; `smooth` contributes its\n * endpoint (its optional control is left to the row editor, not the canvas).\n */\nexport function shapeToPoints(shape: ShapeValue): CanvasPoint[] {\n const out: CanvasPoint[] = [\n {\n id: pointId(-1, \"endpoint\"),\n role: \"endpoint\",\n cmdIndex: -1,\n x: toNumber(shape.from.x),\n y: toNumber(shape.from.y),\n },\n ]\n shape.commands.forEach((cmd, i) => {\n switch (cmd.kind) {\n case \"move\":\n case \"line\":\n case \"smooth\":\n case \"arc\":\n out.push({\n id: pointId(i, \"endpoint\"),\n role: \"endpoint\",\n cmdIndex: i,\n x: toNumber(cmd.to.x),\n y: toNumber(cmd.to.y),\n })\n break\n case \"curve\":\n out.push({\n id: pointId(i, \"endpoint\"),\n role: \"endpoint\",\n cmdIndex: i,\n x: toNumber(cmd.to.x),\n y: toNumber(cmd.to.y),\n })\n out.push({\n id: pointId(i, \"control\"),\n role: \"control\",\n cmdIndex: i,\n x: toNumber(cmd.control.x),\n y: toNumber(cmd.control.y),\n })\n if (cmd.control2 !== undefined) {\n out.push({\n id: pointId(i, \"control2\"),\n role: \"control2\",\n cmdIndex: i,\n x: toNumber(cmd.control2.x),\n y: toNumber(cmd.control2.y),\n })\n }\n break\n // hline / vline / close contribute no draggable canvas point.\n }\n })\n return out\n}\n\nfunction px(n: number): string {\n return `${n}px`\n}\n\n/**\n * Write a dragged canvas point's `(x, y)` (in px space) back into the matching\n * slot, returning a new `ShapeValue`. An unrecognized id is a no-op. Coordinates\n * are written with `px` units.\n */\nexport function updatePoint(\n shape: ShapeValue,\n id: string,\n x: number,\n y: number,\n): ShapeValue {\n if (id === pointId(-1, \"endpoint\")) {\n return { ...shape, from: { x: px(x), y: px(y) } }\n }\n const sep = id.indexOf(\":\")\n if (sep === -1) return shape\n const cmdIndex = Number.parseInt(id.slice(0, sep), 10)\n const role = id.slice(sep + 1) as PointRole\n if (!Number.isInteger(cmdIndex) || cmdIndex < 0) return shape\n if (cmdIndex >= shape.commands.length) return shape\n\n const next = px(x)\n const nextY = px(y)\n const commands = shape.commands.map((cmd, i) => {\n if (i !== cmdIndex) return cmd\n switch (cmd.kind) {\n case \"move\":\n case \"line\":\n case \"smooth\":\n case \"arc\":\n return role === \"endpoint\" ? { ...cmd, to: { x: next, y: nextY } } : cmd\n case \"curve\":\n if (role === \"endpoint\") return { ...cmd, to: { x: next, y: nextY } }\n if (role === \"control\") {\n return { ...cmd, control: { x: next, y: nextY } }\n }\n if (role === \"control2\" && cmd.control2 !== undefined) {\n return { ...cmd, control2: { x: next, y: nextY } }\n }\n return cmd\n default:\n return cmd\n }\n })\n return { ...shape, commands }\n}\n",
"type": "registry:ui",
"target": "components/ui/shape-path-editor/shape-path-editor.helpers.ts"
},
{
"path": "src/components/ui/shape-path-editor/shape-canvas.tsx",
"content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport type { CanvasPoint } from \"./shape-path-editor.helpers\"\nimport {\n formatShape,\n parseShape,\n shapeToPoints,\n updatePoint,\n} from \"./shape-path-editor.helpers\"\nimport type { ShapeValue } from \"./shape-path-editor.types\"\n\n// ---------------------------------------------------------------------------\n// ShapeCanvas (public) — the draggable SVG path canvas. Mirrors\n// clip-path-editor's draggable-vertex preview, leveled up with Bézier control\n// handles (each with a connector line to its owning endpoint) and an arc\n// radius gizmo. Endpoints + control handles come from `shapeToPoints`; dragging\n// or arrow-nudging one calls `updatePoint` → re-serializes → `onChange`.\n//\n// Coordinates live in a normalized 0..CANVAS px space (the `from` seed plus\n// every command coordinate). The stage maps client px → canvas px via its\n// bounding rect, so a 200px-wide stage and a 200px canvas are 1:1.\n// ---------------------------------------------------------------------------\n\nconst CANVAS = 200\n\nexport interface ShapeCanvasProps {\n /** The current `shape()` value. */\n value: string\n /** Omit for a read-only canvas (no drag handles). */\n onChange?: (value: string) => void\n className?: string\n}\n\ninterface DragTarget {\n id: string\n}\n\n/** Clamp a number into the canvas range. */\nfunction clampCanvas(n: number): number {\n return Math.max(0, Math.min(CANVAS, n))\n}\n\n/** Round to 1 decimal place, dropping a trailing \".0\". */\nfunction round1(n: number): number {\n return Math.round(n * 10) / 10\n}\n\n/** Human-readable role label for a handle's aria-label. */\nfunction roleLabel(p: CanvasPoint, kind: string): string {\n if (p.cmdIndex === -1) return \"from point\"\n if (p.role === \"control\")\n return `command ${p.cmdIndex + 1} ${kind} control handle`\n if (p.role === \"control2\")\n return `command ${p.cmdIndex + 1} ${kind} second control handle`\n return `command ${p.cmdIndex + 1} ${kind} endpoint`\n}\n\nexport function ShapeCanvas({ value, onChange, className }: ShapeCanvasProps) {\n const stageRef = useRef(null)\n const dragRef = useRef(null)\n const [dragging, setDragging] = useState(false)\n\n const parsed = parseShape(value)\n const shape: ShapeValue = {\n fillRule: parsed.fillRule,\n from: parsed.from,\n commands: parsed.commands,\n }\n const points = shapeToPoints(shape)\n\n // Index endpoints by command so control handles can draw a connector line.\n const endpointByCmd = new Map()\n for (const p of points) {\n if (p.role === \"endpoint\") endpointByCmd.set(p.cmdIndex, p)\n }\n\n // --- drag math: client coords → canvas px point ------------------------\n const movePoint = (clientX: number, clientY: number) => {\n const drag = dragRef.current\n const stage = stageRef.current\n if (drag === null || stage === null || !onChange) return\n const rect = stage.getBoundingClientRect()\n if (rect.width === 0 || rect.height === 0) return\n const x = round1(clampCanvas(((clientX - rect.left) / rect.width) * CANVAS))\n const y = round1(clampCanvas(((clientY - rect.top) / rect.height) * CANVAS))\n onChange(formatShape(updatePoint(shape, drag.id, x, y)))\n }\n\n // Stash the latest closure so the window listeners (attached once per drag)\n // always call the freshest `movePoint` without re-subscribing each render.\n const movePointRef = useRef(movePoint)\n movePointRef.current = movePoint\n\n useEffect(() => {\n if (!dragging) return\n const onPointerMove = (e: PointerEvent) =>\n movePointRef.current(e.clientX, e.clientY)\n const onPointerUp = () => {\n dragRef.current = null\n setDragging(false)\n }\n window.addEventListener(\"pointermove\", onPointerMove)\n window.addEventListener(\"pointerup\", onPointerUp)\n return () => {\n window.removeEventListener(\"pointermove\", onPointerMove)\n window.removeEventListener(\"pointerup\", onPointerUp)\n }\n }, [dragging])\n\n const nudge = (p: CanvasPoint, dx: number, dy: number) => {\n if (!onChange) return\n const nx = round1(clampCanvas(p.x + dx))\n const ny = round1(clampCanvas(p.y + dy))\n onChange(formatShape(updatePoint(shape, p.id, nx, ny)))\n }\n\n // The outline path: connect endpoints in order (rough preview of the form).\n const outline = points\n .filter((p) => p.role === \"endpoint\")\n .map((p, i) => `${i === 0 ? \"M\" : \"L\"} ${p.x} ${p.y}`)\n .join(\" \")\n\n return (\n \n \n shape path outline \n {/* endpoint outline */}\n {outline ? (\n {\n dragRef.current = { id: p.id }\n setDragging(true)\n if (e.currentTarget.setPointerCapture) {\n e.currentTarget.setPointerCapture(e.pointerId)\n }\n }}\n onKeyDown={(e) => {\n const big = e.shiftKey ? 10 : 1\n if (e.key === \"ArrowLeft\") {\n e.preventDefault()\n nudge(p, -big, 0)\n } else if (e.key === \"ArrowRight\") {\n e.preventDefault()\n nudge(p, big, 0)\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault()\n nudge(p, 0, -big)\n } else if (e.key === \"ArrowDown\") {\n e.preventDefault()\n nudge(p, 0, big)\n }\n }}\n className={cn(\n \"absolute -translate-x-1/2 -translate-y-1/2 cursor-grab border-2 shadow focus:outline-none focus:ring-2 focus:ring-ring active:cursor-grabbing\",\n isControl\n ? \"h-3 w-3 rotate-45 border-amber-400 bg-amber-200\"\n : \"h-3.5 w-3.5 rounded-full border-white bg-primary\",\n )}\n style={{\n left: `${(p.x / CANVAS) * 100}%`,\n top: `${(p.y / CANVAS) * 100}%`,\n }}\n />\n )\n })\n : null}\n \n )\n}\n",
"type": "registry:ui",
"target": "components/ui/shape-path-editor/shape-canvas.tsx"
},
{
"path": "src/components/ui/shape-path-editor/command-row.tsx",
"content": "\"use client\"\n\nimport { UnitInput } from \"@/components/ui/unit-input\"\nimport { cn } from \"@/lib/utils\"\nimport { MiniSelect } from \"./mini-select\"\nimport { commandNames } from \"./shape-path-editor.helpers\"\nimport type { Point, ShapeCommand } from \"./shape-path-editor.types\"\n\n// ---------------------------------------------------------------------------\n// CommandRow (public) — one ``'s editor: a command-kind\n// `