@weasel-js/ui 1.5.2 → 1.6.1

package/dist/chunks/FillStrokeSwatch-DNb0KXPk.js

@@ -0,0 +1,111 @@
+import { n as e } from "./paintValue-BpaGPjV3.js";
+import { t } from "./Button-BIdXHQOx.js";
+import { t as n } from "./paintPreview-CuSZiHpR.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useState as a } from "react";
+var o = {
+	root: "_root_fud7i_1",
+	pair: "_pair_fud7i_10",
+	chip: "_chip_fud7i_19",
+	input: "_input_fud7i_43",
+	well: "_well_fud7i_49",
+	paint: "_paint_fud7i_82",
+	buttons: "_buttons_fud7i_114"
+}, s = {
+	fill: "Fill",
+	stroke: "Stroke"
+}, c = {
+	fill: "#ffffff",
+	stroke: "#000000"
+};
+function l(t) {
+	let { slot: l, paint: u, focused: d } = t, [f, p] = a(null), m = u === null, h = n(u), g = (e(u) ?? c[l]).slice(0, 7);
+	return /* @__PURE__ */ i("span", {
+		className: o.chip,
+		"data-slot": l,
+		...d ? { "data-focused": "" } : {},
+		...m ? { "data-none": "" } : {},
+		children: [/* @__PURE__ */ r("span", {
+			className: o.well,
+			"aria-hidden": "true",
+			children: h && /* @__PURE__ */ r("span", {
+				className: o.paint,
+				style: { background: h }
+			})
+		}), /* @__PURE__ */ r("input", {
+			type: "color",
+			className: o.input,
+			value: f ?? g,
+			"aria-label": s[l],
+			"aria-current": d ? "true" : void 0,
+			onFocus: () => t.onFocusChange(l),
+			onClick: (e) => {
+				t.onFocusChange(l), e.shiftKey && t.onToggleNone && (e.preventDefault(), t.onToggleNone(l));
+			},
+			onInput: (e) => {
+				let n = e.target.value;
+				p(n), t.onInput?.(l, n);
+			},
+			onBlur: () => {
+				f !== null && (p(null), t.onChange(l, f));
+			}
+		})]
+	});
+}
+function u(e) {
+	let { fill: n, stroke: a, focused: s, onFocusChange: c, onInput: u, onChange: d, onToggleNone: f, onSwap: p, onReset: m, shortcuts: h, className: g } = e, _ = s === "fill" ? n : a, v = {
+		onFocusChange: c,
+		onInput: u,
+		onChange: d,
+		onToggleNone: f
+	}, y = f || p || m;
+	return /* @__PURE__ */ i("div", {
+		className: [o.root, g].filter(Boolean).join(" "),
+		role: "group",
+		"aria-label": e["aria-label"] ?? "Fill and stroke",
+		children: [/* @__PURE__ */ i("div", {
+			className: o.pair,
+			children: [/* @__PURE__ */ r(l, {
+				slot: "fill",
+				paint: n,
+				focused: s === "fill",
+				...v
+			}), /* @__PURE__ */ r(l, {
+				slot: "stroke",
+				paint: a,
+				focused: s === "stroke",
+				...v
+			})]
+		}), y && /* @__PURE__ */ i("div", {
+			className: o.buttons,
+			children: [
+				f && /* @__PURE__ */ r(t, {
+					variant: "ghost",
+					size: "sm",
+					pressed: _ === null,
+					onClick: () => f(s),
+					shortcut: h?.none,
+					children: "None"
+				}),
+				p && /* @__PURE__ */ r(t, {
+					variant: "ghost",
+					size: "sm",
+					onClick: p,
+					shortcut: h?.swap,
+					children: "Swap"
+				}),
+				m && /* @__PURE__ */ r(t, {
+					variant: "ghost",
+					size: "sm",
+					onClick: m,
+					shortcut: h?.reset,
+					children: "Default"
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { u as t };
+
+//# sourceMappingURL=FillStrokeSwatch-DNb0KXPk.js.map

package/dist/chunks/FillStrokeSwatch-DNb0KXPk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FillStrokeSwatch-DNb0KXPk.js","names":["s","solidColorOf","paintPreviewCss","FillStrokeSwatch_module_default","SLOT_LABEL","PICKER_FALLBACK","Chip","props","draft","setDraft","useState","none","paint","preview","pickerValue","slot","focused","color","FillStrokeSwatch","focusedPaint","fill","stroke","chip","anyButton","onToggleNone","onSwap","onReset","className","Button","shortcuts"],"sources":["../../src/components/FillStrokeSwatch/FillStrokeSwatch.module.css","../../src/components/FillStrokeSwatch/FillStrokeSwatch.tsx"],"sourcesContent":[".root {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--wzl-space-2);\n}\n\n/* The two chips overlap on a diagonal: fill up-left, behind; stroke\n   down-right, in front, so the fill shows through the stroke's hole. */\n.pair {\n  --chip: 32px;\n  --offset: 12px;\n  --ring: 8px;\n  position: relative;\n  inline-size: calc(var(--chip) + var(--offset));\n  block-size: calc(var(--chip) + var(--offset));\n}\n\n.chip {\n  position: absolute;\n  inline-size: var(--chip);\n  block-size: var(--chip);\n  box-sizing: border-box;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.chip[data-slot='fill'] {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n}\n\n.chip[data-slot='stroke'] {\n  inset-block-end: 0;\n  inset-inline-end: 0;\n}\n\n.chip[data-focused] {\n  border-color: var(--wzl-fg);\n  box-shadow: 0 0 0 1px var(--wzl-fg);\n}\n\n.chip:has(.input:focus-visible) {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n/* The paint sits over the checker, so a translucent one reads as such. */\n.well {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  border-radius: calc(var(--wzl-radius-sm) - var(--wzl-border-w));\n  background: repeating-conic-gradient(\n      var(--wzl-checker-a) 0% 25%,\n      var(--wzl-checker-b) 0% 50%\n    )\n    50% / var(--wzl-checker-size) var(--wzl-checker-size);\n}\n\n/* The stroke well is a ring: the mask subtracts the content box from the\n   padding box, so whatever is behind the chip shows through its hole. */\n.chip[data-slot='stroke'] .well {\n  box-sizing: border-box;\n  padding: var(--ring);\n  mask:\n    linear-gradient(#000, #000) padding-box,\n    linear-gradient(#000, #000) content-box;\n  mask-composite: exclude;\n}\n\n/* The hole's edge, so a focused stroke reads as focused on both sides. */\n.chip[data-slot='stroke'][data-focused]::before {\n  content: '';\n  position: absolute;\n  inset: calc(var(--ring) - var(--wzl-border-w));\n  border: 1px solid var(--wzl-fg);\n  border-radius: 0;\n  pointer-events: none;\n}\n\n.paint {\n  position: absolute;\n  inset: 0;\n}\n\n/* No paint: the surface crossed by the danger diagonal. */\n.chip[data-none] .well {\n  background:\n    linear-gradient(\n      45deg,\n      transparent calc(50% - 1px),\n      var(--wzl-danger) calc(50% - 1px),\n      var(--wzl-danger) calc(50% + 1px),\n      transparent calc(50% + 1px)\n    ),\n    var(--wzl-surface);\n}\n\n/* The native picker covers its chip, invisible: it takes the click and the\n   keyboard focus, and the well draws the paint. */\n.input {\n  position: absolute;\n  inset: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.buttons {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--wzl-space-1);\n}\n","import { useState, type ReactElement } from 'react';\nimport type { FillStyle } from '@weasel-js/core';\nimport { paintPreviewCss } from '../../paintPreview';\nimport { solidColorOf } from '../paintValue';\nimport { Button } from '../Button';\nimport type { PaintSlot } from '../GradientEditor';\nimport s from './FillStrokeSwatch.module.css';\n\n/** Props for {@link FillStrokeSwatch}. */\nexport interface FillStrokeSwatchProps {\n  /** `null` is an explicit \"no paint\". */\n  fill: FillStyle | null | undefined;\n  stroke: FillStyle | null | undefined;\n  /** The slot that edits aimed at \"the current paint\" land on — the None\n   *  button, a palette click, a keyboard shortcut the app binds. */\n  focused: PaintSlot;\n  onFocusChange: (slot: PaintSlot) => void;\n  /** Every tick of the color picker, as `#rrggbb`. */\n  onInput?: (slot: PaintSlot, color: string) => void;\n  /** Once when the picker closes, with its last color, if it moved. */\n  onChange: (slot: PaintSlot, color: string) => void;\n  /** Toggle a slot between no paint and a paint. Given, it adds the None\n   *  button (acting on `focused`) and shift-click on a chip. */\n  onToggleNone?: (slot: PaintSlot) => void;\n  /** Given, adds a Swap button that exchanges the two paints. */\n  onSwap?: () => void;\n  /** Given, adds a Default button that restores the app's default pair. */\n  onReset?: () => void;\n  /** Key hints for the buttons' tooltips. The app binds the keys itself. */\n  shortcuts?: { none?: string; swap?: string; reset?: string };\n  'aria-label'?: string;\n  className?: string;\n}\n\nconst SLOT_LABEL: Record<PaintSlot, string> = { fill: 'Fill', stroke: 'Stroke' };\nconst PICKER_FALLBACK: Record<PaintSlot, string> = { fill: '#ffffff', stroke: '#000000' };\n\nfunction Chip(props: {\n  slot: PaintSlot;\n  paint: FillStyle | null | undefined;\n  focused: boolean;\n  onFocusChange: (slot: PaintSlot) => void;\n  onInput?: (slot: PaintSlot, color: string) => void;\n  onChange: (slot: PaintSlot, color: string) => void;\n  onToggleNone?: (slot: PaintSlot) => void;\n}): ReactElement {\n  const { slot, paint, focused } = props;\n  // Tracks the picker through a pick; the prop only catches up on commit.\n  const [draft, setDraft] = useState<string | null>(null);\n  const none = paint === null;\n  const preview = paintPreviewCss(paint);\n  const pickerValue = (solidColorOf(paint) ?? PICKER_FALLBACK[slot]).slice(0, 7);\n\n  return (\n    <span\n      className={s.chip}\n      data-slot={slot}\n      {...(focused ? { 'data-focused': '' } : {})}\n      {...(none ? { 'data-none': '' } : {})}\n    >\n      <span className={s.well} aria-hidden=\"true\">\n        {preview && <span className={s.paint} style={{ background: preview }} />}\n      </span>\n      <input\n        type=\"color\"\n        className={s.input}\n        value={draft ?? pickerValue}\n        aria-label={SLOT_LABEL[slot]}\n        aria-current={focused ? 'true' : undefined}\n        onFocus={() => props.onFocusChange(slot)}\n        onClick={(e) => {\n          props.onFocusChange(slot);\n          // Shift-click is the none toggle; preventing it keeps the OS picker shut.\n          if (e.shiftKey && props.onToggleNone) {\n            e.preventDefault();\n            props.onToggleNone(slot);\n          }\n        }}\n        onInput={(e) => {\n          const color = (e.target as HTMLInputElement).value;\n          setDraft(color);\n          props.onInput?.(slot, color);\n        }}\n        onBlur={() => {\n          if (draft === null) return;\n          setDraft(null);\n          props.onChange(slot, draft);\n        }}\n      />\n    </span>\n  );\n}\n\n/**\n * The active fill and stroke as one overlapping pair, the way drawing apps\n * show the paint the next shape gets: fill a solid square behind, stroke a\n * frame in front of it. Each chip is a native color picker; the focused one\n * is what the None button — and whatever the app binds — acts on.\n *\n * Holds no state of its own: the paints and the focused slot are props, and\n * the chips report picks through `onInput`/`onChange` for the app to route —\n * into its own active-paint state, into the selection through\n * `useOngoingAction`, or both.\n */\nexport function FillStrokeSwatch(props: FillStrokeSwatchProps): ReactElement {\n  const {\n    fill, stroke, focused, onFocusChange, onInput, onChange,\n    onToggleNone, onSwap, onReset, shortcuts, className,\n  } = props;\n  const focusedPaint = focused === 'fill' ? fill : stroke;\n  const chip = { onFocusChange, onInput, onChange, onToggleNone };\n  const anyButton = onToggleNone || onSwap || onReset;\n\n  return (\n    <div\n      className={[s.root, className].filter(Boolean).join(' ')}\n      role=\"group\"\n      aria-label={props['aria-label'] ?? 'Fill and stroke'}\n    >\n      <div className={s.pair}>\n        <Chip slot=\"fill\" paint={fill} focused={focused === 'fill'} {...chip} />\n        <Chip slot=\"stroke\" paint={stroke} focused={focused === 'stroke'} {...chip} />\n      </div>\n      {anyButton && (\n        <div className={s.buttons}>\n          {onToggleNone && (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              pressed={focusedPaint === null}\n              onClick={() => onToggleNone(focused)}\n              shortcut={shortcuts?.none}\n            >\n              None\n            </Button>\n          )}\n          {onSwap && (\n            <Button variant=\"ghost\" size=\"sm\" onClick={onSwap} shortcut={shortcuts?.swap}>\n              Swap\n            </Button>\n          )}\n          {onReset && (\n            <Button variant=\"ghost\" size=\"sm\" onClick={onReset} shortcut={shortcuts?.reset}>\n              Default\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;GCkCMI,IAAwC;CAAE,MAAM;CAAQ,QAAQ;AAAS,GACzEC,IAA6C;CAAE,MAAM;CAAW,QAAQ;AAAU;AAExF,SAASC,EAAK,GAQG;CACf,IAAM,EAAE,SAAM,UAAO,eAAYC,GAE3B,CAACC,GAAOC,KAAYC,EAAwB,IAAI,GAChDC,IAAOC,MAAU,MACjBC,IAAUX,EAAgBU,CAAK,GAC/BE,KAAeb,EAAaW,CAAK,KAAKP,EAAgBU,GAAA,CAAO,MAAM,GAAG,CAAC;CAE7E,OACE,kBAAC,QAAD;EACE,WAAWf,EAAE;EACb,aAAWe;EACX,GAAKC,IAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;EACzC,GAAKL,IAAO,EAAE,aAAa,GAAG,IAAI,CAAC;EAJrC,UAAA,CAME,kBAAC,QAAD;GAAM,WAAWX,EAAE;GAAM,eAAY;GAClC,UAAAa,KAAW,kBAAC,QAAD;IAAM,WAAWb,EAAE;IAAO,OAAO,EAAE,YAAYa,EAAQ;GAAI,CAAA;EACnE,CAAA,GACN,kBAAC,SAAD;GACE,MAAK;GACL,WAAWb,EAAE;GACb,OAAOQ,KAASM;GAChB,cAAYV,EAAWW;GACvB,gBAAcC,IAAU,SAAS,KAAA;GACjC,eAAeT,EAAM,cAAcQ,CAAI;GACvC,UAAU,MAAM;IAGd,AAFAR,EAAM,cAAcQ,CAAI,GAEpB,EAAE,YAAYR,EAAM,iBACtB,EAAE,eAAe,GACjBA,EAAM,aAAaQ,CAAI;GAE3B;GACA,UAAU,MAAM;IACd,IAAME,IAAS,EAAE,OAA4B;IAE7C,AADAR,EAASQ,CAAK,GACdV,EAAM,UAAUQ,GAAME,CAAK;GAC7B;GACA,cAAc;IACZ,AAAIT,MAAU,SACdC,EAAS,IAAI,GACbF,EAAM,SAASQ,GAAMP,CAAK;GAC5B;EACD,CAAA,CACG;;AAEV;AAaA,SAAgBU,EAAiB,GAA4C;CAC3E,IAAM,EACJ,SAAM,WAAQ,YAAS,kBAAe,YAAS,aAC/C,iBAAc,WAAQ,YAAS,cAAW,iBACxCX,GACEY,IAAeH,MAAY,SAASI,IAAOC,GAC3CC,IAAO;EAAE;EAAe;EAAS;EAAU;CAAa,GACxDC,IAAYC,KAAgBC,KAAUC;CAE5C,OACE,kBAAC,OAAD;EACE,WAAW,CAAC1B,EAAE,MAAM2B,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EACvD,MAAK;EACL,cAAYpB,EAAM,iBAAiB;EAHrC,UAAA,CAKE,kBAAC,OAAD;GAAK,WAAWP,EAAE;GAAlB,UAAA,CACE,kBAACM,GAAD;IAAM,MAAK;IAAO,OAAOc;IAAM,SAASJ,MAAY;IAAQ,GAAIM;GAAO,CAAA,GACvE,kBAAChB,GAAD;IAAM,MAAK;IAAS,OAAOe;IAAQ,SAASL,MAAY;IAAU,GAAIM;GAAO,CAAA,CAC1E;EACJ,CAAA,GAAAC,KACC,kBAAC,OAAD;GAAK,WAAWvB,EAAE;GAAlB,UAAA;IACGwB,KACC,kBAACI,GAAD;KACE,SAAQ;KACR,MAAK;KACL,SAAST,MAAiB;KAC1B,eAAeK,EAAaR,CAAO;KACnC,UAAUa,GAAW;KACtB,UAAA;IAEO,CAAA;IAETJ,KACC,kBAACG,GAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAK,SAASH;KAAQ,UAAUI,GAAW;KAAM,UAAA;IAEtE,CAAA;IAETH,KACC,kBAACE,GAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAK,SAASF;KAAS,UAAUG,GAAW;KAAO,UAAA;IAExE,CAAA;GAEP;EAEJ,CAAA,CAAA;;AAET"}

package/dist/chunks/{FontFamilySelect-DxfgTC3G.js → FontFamilySelect-DXlMKWfK.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./Select-BEope086.js";
+import { t as e } from "./Select-CzyfaXzp.js";
 import { jsx as t } from "react/jsx-runtime";
 import { listCanvasFonts as n, listFonts as r, resolveFontVariant as i } from "@weasel-js/font";
 //#region src/components/FontFamilySelect/FontFamilySelect.tsx
@@ -26,4 +26,4 @@ function o(i) {
 //#endregion
 export { o as t };
 
-//# sourceMappingURL=FontFamilySelect-DxfgTC3G.js.map
+//# sourceMappingURL=FontFamilySelect-DXlMKWfK.js.map

package/dist/chunks/FontFamilySelect-DXlMKWfK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontFamilySelect-DXlMKWfK.js","names":["Select","unregisteredLabel","resolveFontVariant","family","weight","style","substituted","FontFamilySelect","props","baked","listFonts","canvas","listCanvasFonts","f","c","available","options","value","fontStyle","mixed","onChange"],"sources":["../../src/components/FontFamilySelect/FontFamilySelect.tsx"],"sourcesContent":["/**\n * Font-family picker driven by the live font registry.\n *\n * **What it offers.** Both tiers that can actually paint: `listFonts()` for\n * families with a baked atlas, and `listCanvasFonts()` for families the\n * dynamic canvas-SDF tier will serve. Offer what will render, invent\n * nothing — and `listCanvasFonts` reports service rather than membership,\n * so a family auto-enrolled under a policy that is no longer in force\n * doesn't appear.\n *\n * **What it does with a value it can't offer.** Nothing about the model\n * stops a node from naming a family that was never registered — a pasted\n * node, an imported SVG, a document from a session that loaded more fonts.\n * The control keeps that value visible as its own entry and names what is\n * actually painting instead, read structurally off\n * `resolveFontVariant().substituted`. Dropping the value would silently\n * rewrite the document on the next edit; showing it bare would claim a font\n * is in use that isn't.\n */\nimport { listCanvasFonts, listFonts, resolveFontVariant } from '@weasel-js/font';\nimport { Select } from '../Select';\n\nexport interface FontFamilySelectProps {\n  /** Current family, or `undefined` when the sources disagree (`mixed`). */\n  value?: string;\n  /** Indeterminate presentation — the aggregated sources name different families. */\n  mixed?: boolean;\n  onChange: (family: string) => void;\n  /** The weight / style the text actually renders at, so the substitution\n   *  probe reports the variant that paints rather than a nominal 400/normal. */\n  weight?: number;\n  fontStyle?: 'normal' | 'italic';\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** Label for a value that isn't in the registry: name the substitute when the\n *  fallback chain found one, otherwise say only what is known. */\nfunction unregisteredLabel(family: string, weight: number, style: 'normal' | 'italic'): string {\n  const { substituted } = resolveFontVariant(family, weight, style);\n  return substituted\n    ? `${family} — not loaded, showing ${substituted.resolved}`\n    : `${family} — not loaded`;\n}\n\nexport function FontFamilySelect(props: FontFamilySelectProps) {\n  const { value, mixed = false, onChange, weight = 400, fontStyle = 'normal', className } = props;\n  // Both tiers that actually render: families with a baked atlas, and\n  // families the dynamic canvas-SDF tier will serve. Neither list is a guess\n  // — `listCanvasFonts` reports what the registry will really route, so a\n  // family reaches this menu only if it can paint.\n  const baked = listFonts();\n  const canvas = listCanvasFonts().filter((c) => !baked.some((f) => f.family === c.family));\n  const available = [...baked.map((f) => f.family), ...canvas.map((c) => c.family)];\n  const options = available.map((family) => ({ value: family, label: family }));\n  if (value !== undefined && !available.includes(value)) {\n    options.push({ value, label: unregisteredLabel(value, weight, fontStyle) });\n  }\n  return (\n    <Select<string>\n      className={className}\n      options={options}\n      selectedKey={mixed ? null : (value ?? null)}\n      placeholder={mixed ? 'Mixed' : undefined}\n      onSelectionChange={onChange}\n      aria-label={props['aria-label'] ?? 'Font'}\n    />\n  );\n}\n"],"mappings":";;;;AAsCA,SAASC,EAAkB,GAAgB,GAAgB,GAAoC;CAC7F,IAAM,EAAE,mBAAgBC,EAAmBC,GAAQC,GAAQC,CAAK;CAChE,OAAOC,IACH,GAAGH,EAAO,yBAAyBG,EAAY,aAC/C,GAAGH,EAAO;AAChB;AAEA,SAAgBI,EAAiB,GAA8B;CAC7D,IAAM,EAAE,UAAO,WAAQ,IAAO,aAAU,YAAS,KAAK,eAAY,UAAU,iBAAcC,GAKpFC,IAAQC,EAAU,GAClBC,IAASC,EAAgB,CAAC,CAAC,QAAQ,MAAM,CAACH,EAAM,MAAM,MAAMI,EAAE,WAAWC,EAAE,MAAM,CAAC,GAClFC,IAAY,CAAC,GAAGN,EAAM,KAAK,MAAMI,EAAE,MAAM,GAAG,GAAGF,EAAO,KAAK,MAAMG,EAAE,MAAM,CAAC,GAC1EE,IAAUD,EAAU,KAAK,OAAY;EAAE,OAAOZ;EAAQ,OAAOA;CAAO,EAAE;CAI5E,OAHIc,MAAU,KAAA,KAAa,CAACF,EAAU,SAASE,CAAK,KAClDD,EAAQ,KAAK;EAAE;EAAO,OAAOf,EAAkBgB,GAAOb,GAAQc,CAAS;CAAE,CAAC,GAG1E,kBAAClB,GAAD;EACa;EACF;EACT,aAAamB,IAAQ,OAAQF,KAAS;EACtC,aAAaE,IAAQ,UAAU,KAAA;EAC/B,mBAAmBC;EACnB,cAAYZ,EAAM,iBAAiB;CACpC,CAAA;AAEL"}

package/dist/chunks/GradientEditor-B3a-MsVJ.js

@@ -0,0 +1,335 @@
+import { t as e } from "./ColorField-BcMcW8Sa.js";
+import { t } from "./Slider-CFwQYQ10.js";
+import { t as n } from "./ToggleBar-DTjGeS0Q.js";
+import { fillInPoseFrame as r, fillToBoundsFrame as i, gradientGeometry as a, isGradientFill as o, sampleGradientStops as s, useHandleDrag as c, useNodeOverlayFrame as l, useOngoingAction as u, withGradientKind as d } from "@weasel-js/core";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useCallback as h, useRef as g } from "react";
+//#region src/paintGradientTrack.tsx
+var _ = {
+	angleDeg: 135,
+	stripe: 2,
+	gap: 4,
+	dim: 75
+};
+function v(e) {
+	let { gradient: t, samples: n = 16, activeRange: r, hatch: i } = e;
+	return (e) => {
+		let a = [];
+		for (let e = 0; e <= n; e++) {
+			let r = e / n;
+			a.push(`${t(r)} ${(r * 100).toFixed(1)}%`);
+		}
+		let o = `linear-gradient(to right, ${a.join(", ")})`, s = [];
+		if (r) {
+			let t = e.valueToFraction(r[0]) * 100, n = e.valueToFraction(r[1]) * 100, a = {
+				..._,
+				...i
+			}, o = `repeating-linear-gradient(${a.angleDeg}deg, transparent 0 ${a.stripe}px, var(--wzl-surface) ${a.stripe}px ${a.stripe + a.gap}px)`, c = `color-mix(in srgb, var(--wzl-surface) ${a.dim}%, transparent)`, l = `linear-gradient(${c}, ${c})`;
+			if (t > 0 && (s.push(`${l} left 0 / ${t.toFixed(2)}% 100% no-repeat`), s.push(`${o} left 0 / ${t.toFixed(2)}% 100% no-repeat`)), n < 100) {
+				let e = (100 - n).toFixed(2);
+				s.push(`${l} right 0 / ${e}% 100% no-repeat`), s.push(`${o} right 0 / ${e}% 100% no-repeat`);
+			}
+		}
+		s.push(o);
+		let c = {
+			position: "absolute",
+			inset: 0,
+			background: s.join(", ")
+		};
+		return /* @__PURE__ */ p("div", { style: c });
+	};
+}
+var y = {
+	root: "_root_c0ev4_1",
+	swatches: "_swatches_c0ev4_8",
+	swatch: "_swatch_c0ev4_8"
+}, b = [
+	{
+		value: "linear-gradient",
+		label: "Linear"
+	},
+	{
+		value: "radial-gradient",
+		label: "Radial"
+	},
+	{
+		value: "conic-gradient",
+		label: "Conic"
+	}
+], x = [
+	{
+		value: "rgb",
+		label: "sRGB"
+	},
+	{
+		value: "oklab",
+		label: "OKLab"
+	},
+	{
+		value: "oklch",
+		label: "OKLCh"
+	}
+], S = 2;
+function C(r) {
+	let { value: i, onInput: a, onChange: o, kindSwitch: c = !0, spaceSwitch: l = !0, className: u } = r, f = i.stops, g = i.interpolate ?? "rgb", _ = h((e) => ({
+		...i,
+		stops: e
+	}), [i]), C = f.map((e) => ({
+		value: e.offset,
+		color: e.color
+	})), w = (e) => e.map((e) => ({
+		offset: e.value,
+		color: e.color
+	})), T = (e, t) => f.map((n, r) => r === e ? {
+		...n,
+		color: t
+	} : n), E = f.map((e, t) => ({
+		stop: e,
+		index: t
+	})).sort((e, t) => e.stop.offset - t.stop.offset);
+	return /* @__PURE__ */ m("div", {
+		className: [y.root, u].filter(Boolean).join(" "),
+		children: [
+			c && /* @__PURE__ */ p(n, {
+				items: b,
+				value: i.fill,
+				size: "sm",
+				ariaLabel: "Gradient kind",
+				onChange: (e) => e && o(d(i, e))
+			}),
+			/* @__PURE__ */ p(t, {
+				min: 0,
+				max: 1,
+				step: .005,
+				constraint: "free",
+				thumbs: C,
+				ariaLabel: "Gradient stops",
+				readoutPlacement: "none",
+				onInput: (e) => a?.(_(w(e))),
+				onChange: (e) => o(_(w(e))),
+				onAddThumb: (e) => ({
+					value: e,
+					color: s(f, e, g)
+				}),
+				onRemoveThumb: () => f.length > S,
+				renderTrack: v({
+					gradient: (e) => s(f, e, g),
+					samples: g === "rgb" ? 32 : 64
+				})
+			}),
+			l && /* @__PURE__ */ p(n, {
+				items: x,
+				value: g,
+				size: "sm",
+				ariaLabel: "Blend space",
+				onChange: (e) => e && o({
+					...i,
+					interpolate: e
+				})
+			}),
+			/* @__PURE__ */ p("div", {
+				className: y.swatches,
+				children: E.map(({ stop: t, index: n }) => /* @__PURE__ */ p(e, {
+					value: t.color,
+					alpha: !0,
+					"aria-label": `Stop ${n + 1} at ${Math.round(t.offset * 100)}%`,
+					className: y.swatch,
+					onInput: (e) => a?.(_(T(n, e))),
+					onChange: (e) => o(_(T(n, e)))
+				}, n))
+			})
+		]
+	});
+}
+var w = {
+	overlay: "_overlay_6yu3h_3",
+	guide: "_guide_6yu3h_13",
+	handle: "_handle_6yu3h_21"
+};
+//#endregion
+//#region src/components/GradientEditor/GradientHandles.tsx
+function T(e) {
+	let { value: t, toScreen: n, toLocal: r, onInput: i, onChange: a, width: o, height: s, className: c } = e;
+	return /* @__PURE__ */ p("svg", {
+		className: [w.overlay, c].filter(Boolean).join(" "),
+		width: o,
+		height: s,
+		children: E(t, n, r, i, a)
+	});
+}
+function E(e, t, n, r, i) {
+	let o = (e, t) => {
+		t === "input" ? r?.(e) : i(e);
+	};
+	if (e.fill === "linear-gradient") {
+		let r = t(e.from), i = t(e.to);
+		return /* @__PURE__ */ m(f, { children: [
+			/* @__PURE__ */ p(O, {
+				x1: r.x,
+				y1: r.y,
+				x2: i.x,
+				y2: i.y
+			}),
+			/* @__PURE__ */ p(k, {
+				at: r,
+				label: "Gradient start",
+				onDrag: (t, r) => o({
+					...e,
+					from: n(t)
+				}, r)
+			}),
+			/* @__PURE__ */ p(k, {
+				at: i,
+				label: "Gradient end",
+				onDrag: (t, r) => o({
+					...e,
+					to: n(t)
+				}, r)
+			})
+		] });
+	}
+	if (e.fill === "radial-gradient") {
+		let r = t(e.center), i = t({
+			x: e.center.x + e.radius,
+			y: e.center.y
+		}), a = Math.hypot(i.x - r.x, i.y - r.y);
+		return /* @__PURE__ */ m(f, { children: [
+			/* @__PURE__ */ p("circle", {
+				className: w.guide,
+				cx: r.x,
+				cy: r.y,
+				r: a
+			}),
+			/* @__PURE__ */ p(k, {
+				at: r,
+				label: "Gradient center",
+				onDrag: (t, r) => o({
+					...e,
+					center: n(t)
+				}, r)
+			}),
+			/* @__PURE__ */ p(k, {
+				at: i,
+				label: "Gradient radius",
+				onDrag: (t, r) => {
+					let i = n(t), a = Math.hypot(i.x - e.center.x, i.y - e.center.y);
+					o({
+						...e,
+						radius: Math.max(D, a)
+					}, r);
+				}
+			})
+		] });
+	}
+	let s = t(e.center), { radius: c } = a(e), l = t({
+		x: e.center.x + Math.cos(e.angle) * c,
+		y: e.center.y + Math.sin(e.angle) * c
+	});
+	return /* @__PURE__ */ m(f, { children: [
+		/* @__PURE__ */ p(O, {
+			x1: s.x,
+			y1: s.y,
+			x2: l.x,
+			y2: l.y
+		}),
+		/* @__PURE__ */ p(k, {
+			at: s,
+			label: "Gradient center",
+			onDrag: (t, r) => o({
+				...e,
+				center: n(t)
+			}, r)
+		}),
+		/* @__PURE__ */ p(k, {
+			at: l,
+			label: "Gradient angle",
+			onDrag: (t, r) => {
+				let i = n(t), a = Math.atan2(i.y - e.center.y, i.x - e.center.x);
+				o({
+					...e,
+					angle: a
+				}, r);
+			}
+		})
+	] });
+}
+var D = 1;
+function O(e) {
+	return /* @__PURE__ */ p("line", {
+		className: w.guide,
+		...e
+	});
+}
+function k({ at: e, label: t, onDrag: n }) {
+	let r = g(e), i = c({
+		onStart: () => {
+			r.current = e;
+		},
+		onMove: (e) => {
+			n(e, "input");
+		},
+		onEnd: ({ point: e, moved: t }) => {
+			t && n(e, "commit");
+		},
+		onCancel: () => {
+			n(r.current, "input");
+		}
+	});
+	return /* @__PURE__ */ p("circle", {
+		className: w.handle,
+		cx: e.x,
+		cy: e.y,
+		r: A,
+		role: "button",
+		"aria-label": t,
+		tabIndex: 0,
+		onKeyDown: (t) => {
+			let r = t.shiftKey ? j * 10 : j, i = 0, a = 0;
+			if (t.key === "ArrowLeft") i = -r;
+			else if (t.key === "ArrowRight") i = r;
+			else if (t.key === "ArrowUp") a = -r;
+			else if (t.key === "ArrowDown") a = r;
+			else return;
+			t.preventDefault();
+			let o = {
+				x: e.x + i,
+				y: e.y + a
+			};
+			n(o, "input"), n(o, "commit");
+		},
+		...i
+	});
+}
+var A = 7, j = 1;
+//#endregion
+//#region src/components/GradientEditor/SceneGradientHandles.tsx
+function M(e) {
+	let { scene: t, containerRef: n, nodeId: a, slot: o, view: s, className: c } = e, d = l(t, n, a, { view: s }), f = u(o === "fill" ? "setFill" : "setStroke"), m = d ? P(N(t, a, o)) : null;
+	if (!d || !m) return null;
+	let h = (e, t) => {
+		let n = i(e, d.box);
+		t === "commit" ? f.commit({ paint: n }) : f.input({ paint: n });
+	};
+	return /* @__PURE__ */ p(T, {
+		value: r(m, d.box),
+		toScreen: d.toScreen,
+		toLocal: d.toLocal,
+		width: d.width,
+		height: d.height,
+		className: c,
+		onInput: (e) => h(e, "input"),
+		onChange: (e) => h(e, "commit")
+	});
+}
+function N(e, t, n) {
+	if (t == null) return;
+	let r = e.nodes.get(t)?.data;
+	if (r) return n === "fill" ? r.fill : r.stroke?.paint;
+}
+function P(e) {
+	return o(e) ? e : null;
+}
+//#endregion
+export { v as i, T as n, C as r, M as t };
+
+//# sourceMappingURL=GradientEditor-B3a-MsVJ.js.map

package/dist/chunks/GradientEditor-B3a-MsVJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientEditor-B3a-MsVJ.js","names":["s","s","_Fragment","ColorField","ToggleBar","DEFAULT_HATCH","paintGradientTrack","opts","stops","i","samples","t","gradient","baseGradient","layers","activeRange","lowPct","ctx","highPct","h","hatch","stripe","dimColor","dimOverlay","wR","style","GradientEditor_module_default","KINDS","SPACES","MIN_STOPS","GradientEditor","props","value","space","withStops","useCallback","next","thumbs","stop","applyThumbs","setStopColor","index","ordered","a","b","className","kindSwitch","kind","onChange","withGradientKind","Slider","onInput","at","sampleGradientStops","spaceSwitch","hex","GradientHandles_module_default","GradientHandles","renderForKind","toScreen","toLocal","emit","phase","from","to","Fragment","Guide","DragPoint","p","center","edge","screenRadius","local","radius","MIN_RADIUS","gradientGeometry","tip","angle","start","useRef","drag","useHandleDrag","moved","onDrag","point","HANDLE_RADIUS","label","amount","e","KEY_STEP","dx","dy","SceneGradientHandles","frame","useNodeOverlayFrame","scene","containerRef","nodeId","edit","useOngoingAction","slot","gradientInSlot","paintOf","dispatch","paint","fillToBoundsFrame","fillInPoseFrame","data","isGradientFill"],"sources":["../../src/paintGradientTrack.tsx","../../src/components/GradientEditor/GradientEditor.module.css","../../src/components/GradientEditor/GradientEditor.tsx","../../src/components/GradientEditor/GradientHandles.module.css","../../src/components/GradientEditor/GradientHandles.tsx","../../src/components/GradientEditor/SceneGradientHandles.tsx"],"sourcesContent":["import type { ReactNode, CSSProperties } from 'react';\nimport type { TrackCtx } from './components/Slider';\n\n/**\n * Options for {@link paintGradientTrack}.\n *\n * `gradient` maps a normalized position along the track (0 to 1) to a CSS\n * color; `samples` is how many stops the resulting linear-gradient uses.\n * `activeRange`, given in the slider's own value units, keeps that span at\n * full strength and dims + hatches the rest.\n */\nexport type GradientTrackOpts = {\n  gradient: (t: number) => string;\n  samples?: number;\n  activeRange?: [number, number];\n  hatch?: {\n    angleDeg?: number;\n    stripe?: number;\n    gap?: number;\n    dim?: number;\n  };\n};\n\nconst DEFAULT_HATCH = { angleDeg: 135, stripe: 2, gap: 4, dim: 75 };\n\n/**\n * Builds a `Slider` `renderTrack` function that paints the track as a\n * sampled color gradient, optionally dimming and hatching the portions\n * outside an active range.\n */\nexport function paintGradientTrack(opts: GradientTrackOpts): (ctx: TrackCtx) => ReactNode {\n  const { gradient, samples = 16, activeRange, hatch } = opts;\n\n  return (ctx: TrackCtx) => {\n    const stops: string[] = [];\n    for (let i = 0; i <= samples; i++) {\n      const t = i / samples;\n      stops.push(`${gradient(t)} ${(t * 100).toFixed(1)}%`);\n    }\n    const baseGradient = `linear-gradient(to right, ${stops.join(', ')})`;\n\n    const layers: string[] = [];\n    if (activeRange) {\n      const lowPct = ctx.valueToFraction(activeRange[0]) * 100;\n      const highPct = ctx.valueToFraction(activeRange[1]) * 100;\n      const h = { ...DEFAULT_HATCH, ...hatch };\n      const stripe = `repeating-linear-gradient(${h.angleDeg}deg, transparent 0 ${h.stripe}px, var(--wzl-surface) ${h.stripe}px ${h.stripe + h.gap}px)`;\n      const dimColor = `color-mix(in srgb, var(--wzl-surface) ${h.dim}%, transparent)`;\n      const dimOverlay = `linear-gradient(${dimColor}, ${dimColor})`;\n\n      if (lowPct > 0) {\n        layers.push(`${dimOverlay} left 0 / ${lowPct.toFixed(2)}% 100% no-repeat`);\n        layers.push(`${stripe} left 0 / ${lowPct.toFixed(2)}% 100% no-repeat`);\n      }\n      if (highPct < 100) {\n        const wR = (100 - highPct).toFixed(2);\n        layers.push(`${dimOverlay} right 0 / ${wR}% 100% no-repeat`);\n        layers.push(`${stripe} right 0 / ${wR}% 100% no-repeat`);\n      }\n    }\n    layers.push(baseGradient);\n\n    const style: CSSProperties = {\n      position: 'absolute',\n      inset: 0,\n      background: layers.join(', '),\n    };\n    return <div style={style} />;\n  };\n}\n",".root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  min-inline-size: 0;\n}\n\n.swatches {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--wzl-space-3);\n}\n\n/* Each stop's opacity slider would otherwise stretch the row to a width no\n * properties panel has; the chip stays legible, the slider yields. */\n.swatch {\n  flex: 0 1 auto;\n  min-inline-size: 0;\n}\n","import { useCallback, type ReactElement } from 'react';\nimport {\n  sampleGradientStops,\n  withGradientKind,\n  type ColorSpace,\n  type GradStop,\n  type GradientFill,\n  type GradientKind,\n} from '@weasel-js/core';\nimport { Slider, type Thumb } from '../Slider';\nimport { ColorField } from '../ColorField';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport { paintGradientTrack } from '../../paintGradientTrack';\nimport s from './GradientEditor.module.css';\n\nconst KINDS: readonly ToggleBarItem<GradientKind>[] = [\n  { value: 'linear-gradient', label: 'Linear' },\n  { value: 'radial-gradient', label: 'Radial' },\n  { value: 'conic-gradient', label: 'Conic' },\n];\n\nconst SPACES: readonly ToggleBarItem<ColorSpace>[] = [\n  { value: 'rgb', label: 'sRGB' },\n  { value: 'oklab', label: 'OKLab' },\n  { value: 'oklch', label: 'OKLCh' },\n];\n\n/** Fewer than two stops is not a gradient any renderer can ramp between. */\nconst MIN_STOPS = 2;\n\n/**\n * Props for {@link GradientEditor}. `onInput` fires throughout a gesture and\n * `onChange` once at its end.\n */\nexport interface GradientEditorProps {\n  /** The gradient being edited. */\n  value: GradientFill;\n  /**\n   * Live value during a gesture — a stop drag, a color-picker scrub. Wire\n   * it for preview; it fires many times per gesture and must not be\n   * written to history.\n   */\n  onInput?: (next: GradientFill) => void;\n  /** Committed value: one call per completed gesture. Pair with an\n   *  undoable write. */\n  onChange: (next: GradientFill) => void;\n  /** Show the linear / radial / conic switch. Default true; turn it off\n   *  when the surrounding UI already owns the kind. */\n  kindSwitch?: boolean;\n  /** Show the sRGB / OKLab / OKLCh switch, which writes `interpolate`.\n   *  Default true. */\n  spaceSwitch?: boolean;\n  className?: string;\n}\n\ntype StopThumb = Thumb & { color: string };\n\n/**\n * Editor for a gradient's kind and stop list.\n *\n * Geometry (`from`/`to`, `center`, `radius`, `angle`) is deliberately not\n * edited here — on a canvas that belongs on the artwork, via\n * `<GradientHandles>`. This component owns the parts with no spatial\n * meaning, so it composes into a properties panel at any width.\n *\n * Stops are addressed by their position in `value.stops`, which is never\n * reordered — dragging one stop past another leaves both indices alone, so\n * a drag can cross a neighbour without the two swapping under the pointer.\n * Rendering sorts a copy.\n */\nexport function GradientEditor(props: GradientEditorProps): ReactElement {\n  const { value, onInput, onChange, kindSwitch = true, spaceSwitch = true, className } = props;\n  const stops = value.stops;\n  const space = value.interpolate ?? 'rgb';\n\n  const withStops = useCallback(\n    (next: GradStop[]): GradientFill => ({ ...value, stops: next }),\n    [value],\n  );\n\n  const thumbs: StopThumb[] = stops.map((stop) => ({ value: stop.offset, color: stop.color }));\n\n  const applyThumbs = (next: StopThumb[]): GradStop[] =>\n    next.map((t) => ({ offset: t.value, color: t.color }));\n\n  const setStopColor = (index: number, color: string): GradStop[] =>\n    stops.map((stop, i) => (i === index ? { ...stop, color } : stop));\n\n  // Sorted view for the swatch row, carrying each stop's real index so a\n  // recolor writes back to the right entry.\n  const ordered = stops\n    .map((stop, index) => ({ stop, index }))\n    .sort((a, b) => a.stop.offset - b.stop.offset);\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      {kindSwitch && (\n        <ToggleBar<GradientKind>\n          items={KINDS}\n          value={value.fill}\n          size=\"sm\"\n          ariaLabel=\"Gradient kind\"\n          onChange={(kind) => kind && onChange(withGradientKind(value, kind))}\n        />\n      )}\n\n      <Slider<StopThumb>\n        min={0}\n        max={1}\n        step={0.005}\n        constraint=\"free\"\n        thumbs={thumbs}\n        ariaLabel=\"Gradient stops\"\n        readoutPlacement=\"none\"\n        onInput={(next) => onInput?.(withStops(applyThumbs(next)))}\n        onChange={(next) => onChange(withStops(applyThumbs(next)))}\n        onAddThumb={(at) => ({ value: at, color: sampleGradientStops(stops, at, space) })}\n        onRemoveThumb={() => stops.length > MIN_STOPS}\n        renderTrack={paintGradientTrack({\n          gradient: (t) => sampleGradientStops(stops, t, space),\n          // The track lerps between samples in sRGB whatever the gradient does,\n          // so a hue arc needs more of them to not read as a straight line.\n          samples: space === 'rgb' ? 32 : 64,\n        })}\n      />\n\n      {spaceSwitch && (\n        <ToggleBar<ColorSpace>\n          items={SPACES}\n          value={space}\n          size=\"sm\"\n          ariaLabel=\"Blend space\"\n          onChange={(next) => next && onChange({ ...value, interpolate: next })}\n        />\n      )}\n\n      <div className={s.swatches}>\n        {ordered.map(({ stop, index }) => (\n          <ColorField\n            key={index}\n            value={stop.color}\n            alpha\n            aria-label={`Stop ${index + 1} at ${Math.round(stop.offset * 100)}%`}\n            className={s.swatch}\n            onInput={(hex) => onInput?.(withStops(setStopColor(index, hex)))}\n            onChange={(hex) => onChange(withStops(setStopColor(index, hex)))}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n","/* The overlay covers the canvas but must not intercept tool input; only the\n * handles opt back into hit-testing. */\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n/* These sit over artwork of unknown color, not over the app's own surface,\n * so they are deliberately not themed: a themed handle disappears against\n * whatever the user painted underneath. White-on-dark reads on anything,\n * which is why every editor draws handles this way. */\n.guide {\n  fill: none;\n  stroke: #ffffff;\n  stroke-opacity: 0.7;\n  stroke-dasharray: 4 4;\n  paint-order: stroke;\n}\n\n.handle {\n  fill: #ffffff;\n  stroke: #222222;\n  stroke-width: 2;\n  cursor: grab;\n  pointer-events: auto;\n}\n\n.handle:active {\n  cursor: grabbing;\n}\n\n.handle:focus-visible {\n  outline: 2px solid var(--wzl-accent, #4a9eff);\n  outline-offset: 2px;\n}\n","import { useRef, type KeyboardEvent as ReactKeyboardEvent, type ReactElement, type ReactNode } from 'react';\nimport { useHandleDrag, gradientGeometry, type GradientFill } from '@weasel-js/core';\nimport s from './GradientHandles.module.css';\n\n/** Structural, and deliberately not exported — `Plot2D` and `CurveEditor`\n *  each publish their own `Point`, and a third would only be ambiguous at\n *  the package barrel. Consumers pass any `{ x, y }`. */\ninterface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * Props for {@link GradientHandles}. `onInput` fires throughout a drag and\n * `onChange` once at its end.\n */\nexport interface GradientHandlesProps {\n  /**\n   * The gradient whose geometry these handles move, in a **resolved,\n   * isotropic** frame — one where `radius` is a length in the same units as\n   * `center.x` and a right angle is a right angle.\n   *\n   * A `units: 'bounds'` gradient is not such a frame: `x` and `y` are\n   * fractions of two different lengths, so a circle there is an ellipse on\n   * screen and polar math silently mixes scales. Resolve it first with\n   * `fillInPoseFrame(fill, box)` and convert edits back with\n   * `fillToBoundsFrame(next, box)`.\n   */\n  value: GradientFill;\n  /**\n   * Gradient space → overlay pixels. For a `units: 'local'` gradient this\n   * is the node's local-to-screen transform; for `'world'`, the view.\n   */\n  toScreen: (p: Point) => Point;\n  /** Overlay pixels → gradient space. Must invert `toScreen`. */\n  toLocal: (p: Point) => Point;\n  /** Live during a drag — wire for preview, do not write to history. */\n  onInput?: (next: GradientFill) => void;\n  /** Committed at drag end: one call per gesture. */\n  onChange: (next: GradientFill) => void;\n  /** Overlay size in CSS pixels. */\n  width: number;\n  height: number;\n  className?: string;\n}\n\n/**\n * Direct-manipulation handles for a gradient's geometry, drawn as an SVG\n * overlay above a canvas: endpoints for linear, center and radius for\n * radial, center and angle arm for conic.\n *\n * Positioning is entirely the consumer's `toScreen` / `toLocal` — this\n * component never sees a view or a scene node, so the same handles serve a\n * node-local gradient, a world-space one, and a plain unzoomed preview.\n *\n * The overlay ignores pointer events except on the handles themselves, so\n * it can sit over live canvas content without swallowing tool input.\n */\nexport function GradientHandles(props: GradientHandlesProps): ReactElement {\n  const { value, toScreen, toLocal, onInput, onChange, width, height, className } = props;\n\n  return (\n    <svg\n      className={[s.overlay, className].filter(Boolean).join(' ')}\n      width={width}\n      height={height}\n    >\n      {renderForKind(value, toScreen, toLocal, onInput, onChange)}\n    </svg>\n  );\n}\n\nfunction renderForKind(\n  value: GradientFill,\n  toScreen: (p: Point) => Point,\n  toLocal: (p: Point) => Point,\n  onInput: ((next: GradientFill) => void) | undefined,\n  onChange: (next: GradientFill) => void,\n): ReactNode {\n  const emit = (next: GradientFill, phase: 'input' | 'commit'): void => {\n    if (phase === 'input') onInput?.(next);\n    else onChange(next);\n  };\n\n  if (value.fill === 'linear-gradient') {\n    const from = toScreen(value.from);\n    const to = toScreen(value.to);\n    return (\n      <>\n        <Guide x1={from.x} y1={from.y} x2={to.x} y2={to.y} />\n        <DragPoint\n          at={from}\n          label=\"Gradient start\"\n          onDrag={(p, phase) => emit({ ...value, from: toLocal(p) }, phase)}\n        />\n        <DragPoint\n          at={to}\n          label=\"Gradient end\"\n          onDrag={(p, phase) => emit({ ...value, to: toLocal(p) }, phase)}\n        />\n      </>\n    );\n  }\n\n  if (value.fill === 'radial-gradient') {\n    const center = toScreen(value.center);\n    // The radius handle rides the +x axis of gradient space, so it stays on\n    // the drawn circle under a rotated or anisotropic transform.\n    const edge = toScreen({ x: value.center.x + value.radius, y: value.center.y });\n    const screenRadius = Math.hypot(edge.x - center.x, edge.y - center.y);\n    return (\n      <>\n        <circle className={s.guide} cx={center.x} cy={center.y} r={screenRadius} />\n        <DragPoint\n          at={center}\n          label=\"Gradient center\"\n          onDrag={(p, phase) => emit({ ...value, center: toLocal(p) }, phase)}\n        />\n        <DragPoint\n          at={edge}\n          label=\"Gradient radius\"\n          onDrag={(p, phase) => {\n            const local = toLocal(p);\n            const radius = Math.hypot(local.x - value.center.x, local.y - value.center.y);\n            emit({ ...value, radius: Math.max(MIN_RADIUS, radius) }, phase);\n          }}\n        />\n      </>\n    );\n  }\n\n  const center = toScreen(value.center);\n  const { radius } = gradientGeometry(value);\n  const tip = toScreen({\n    x: value.center.x + Math.cos(value.angle) * radius,\n    y: value.center.y + Math.sin(value.angle) * radius,\n  });\n  return (\n    <>\n      <Guide x1={center.x} y1={center.y} x2={tip.x} y2={tip.y} />\n      <DragPoint\n        at={center}\n        label=\"Gradient center\"\n        onDrag={(p, phase) => emit({ ...value, center: toLocal(p) }, phase)}\n      />\n      <DragPoint\n        at={tip}\n        label=\"Gradient angle\"\n        onDrag={(p, phase) => {\n          const local = toLocal(p);\n          const angle = Math.atan2(local.y - value.center.y, local.x - value.center.x);\n          emit({ ...value, angle }, phase);\n        }}\n      />\n    </>\n  );\n}\n\n/** A radius of zero divides by zero in the shader's `t`; keep it off the floor. */\nconst MIN_RADIUS = 1;\n\nfunction Guide(props: { x1: number; y1: number; x2: number; y2: number }): ReactElement {\n  return <line className={s.guide} {...props} />;\n}\n\nfunction DragPoint({\n  at,\n  label,\n  onDrag,\n}: {\n  at: Point;\n  label: string;\n  onDrag: (p: Point, phase: 'input' | 'commit') => void;\n}): ReactElement {\n  const start = useRef<Point>(at);\n  const drag = useHandleDrag<SVGCircleElement>({\n    onStart: () => { start.current = at; },\n    onMove: (p) => { onDrag(p, 'input'); },\n    onEnd: ({ point, moved }) => {\n      // A press that never moved is not an edit and must not write anything.\n      if (moved) onDrag(point, 'commit');\n    },\n    // An abandoned gesture is not an edit either — put the live preview back\n    // where it started rather than committing where it was left.\n    onCancel: () => { onDrag(start.current, 'input'); },\n  });\n  const onKeyDown = (e: ReactKeyboardEvent<SVGCircleElement>): void => {\n    const amount = e.shiftKey ? KEY_STEP * 10 : KEY_STEP;\n    let dx = 0;\n    let dy = 0;\n    if (e.key === 'ArrowLeft') dx = -amount;\n    else if (e.key === 'ArrowRight') dx = amount;\n    else if (e.key === 'ArrowUp') dy = -amount;\n    else if (e.key === 'ArrowDown') dy = amount;\n    else return;\n    e.preventDefault();\n    const next = { x: at.x + dx, y: at.y + dy };\n    onDrag(next, 'input');\n    onDrag(next, 'commit');\n  };\n  return (\n    <circle\n      className={s.handle}\n      cx={at.x}\n      cy={at.y}\n      r={HANDLE_RADIUS}\n      // Not `slider`: the handle carries a 2-D position, not one value, so\n      // it has no `aria-valuenow` to honor the role's contract with.\n      role=\"button\"\n      aria-label={label}\n      tabIndex={0}\n      onKeyDown={onKeyDown}\n      {...drag}\n    />\n  );\n}\n\nconst HANDLE_RADIUS = 7;\n\n/** One arrow-key step, in overlay pixels. */\nconst KEY_STEP = 1;\n","import { type ReactElement, type RefObject } from 'react';\nimport {\n  fillInPoseFrame,\n  fillToBoundsFrame,\n  isGradientFill,\n  useNodeOverlayFrame,\n  useOngoingAction,\n  type FillStyle,\n  type GradientFill,\n  type RectPose,\n  type Scene,\n  type Stroke,\n  type View,\n} from '@weasel-js/core';\nimport { GradientHandles } from './GradientHandles';\n\n/** The paint slots a node carries. Either may hold a gradient, and each has\n *  its own action, so the overlay is told which one it is editing. */\nexport type PaintSlot = 'fill' | 'stroke';\n\n/** What `SceneGradientHandles` reads off a node. Every field is optional, so\n *  any richer app data shape satisfies it. */\nexport interface PaintedNodeData {\n  fill?: FillStyle | null;\n  stroke?: Stroke | null;\n}\n\nexport interface SceneGradientHandlesProps<\n  TData extends PaintedNodeData,\n  TLayer extends string,\n  TPose extends RectPose,\n> {\n  scene: Scene<TData, TLayer, TPose>;\n  /** The element the overlay is positioned in. Must be the canvas's own box,\n   *  or the handles land somewhere other than the paint. */\n  containerRef: RefObject<HTMLElement | null>;\n  /** The node whose paint is being edited — usually the lone selected id. */\n  nodeId: string | null | undefined;\n  /** Which of the node's two paints these handles move. */\n  slot: PaintSlot;\n  /** Current viewport; a thunk is re-read per projection. See\n   *  `useNodeOverlayFrame`. */\n  view?: View | (() => View);\n  className?: string;\n}\n\n/**\n * Scene-aware `GradientHandles`: on-canvas geometry handles for the gradient\n * in one node's `fill` or `stroke`, committed through the `setFill` /\n * `setStroke` actions as a single undo entry per drag.\n *\n * Renders nothing unless the targeted slot holds a gradient. The node stores\n * its gradient in `units: 'bounds'` — fractions of its own box, so the paint\n * survives pan, zoom and resize — which is not a frame polar math can work\n * in; the handles get it resolved onto the box and every edit is normalized\n * back on the way out.\n *\n * `slot` is a prop rather than state the kit keeps: an app that edits fill\n * and stroke separately already knows which one has focus.\n */\nexport function SceneGradientHandles<\n  TData extends PaintedNodeData,\n  TLayer extends string,\n  TPose extends RectPose,\n>(props: SceneGradientHandlesProps<TData, TLayer, TPose>): ReactElement | null {\n  const { scene, containerRef, nodeId, slot, view, className } = props;\n  const frame = useNodeOverlayFrame(scene, containerRef, nodeId, { view });\n  const edit = useOngoingAction(slot === 'fill' ? 'setFill' : 'setStroke');\n\n  const gradient = frame ? gradientInSlot(paintOf(scene, nodeId, slot)) : null;\n  if (!frame || !gradient) return null;\n\n  const dispatch = (next: GradientFill, phase: 'input' | 'commit'): void => {\n    const paint = fillToBoundsFrame(next, frame.box);\n    if (phase === 'commit') edit.commit({ paint });\n    else edit.input({ paint });\n  };\n\n  return (\n    <GradientHandles\n      value={fillInPoseFrame(gradient, frame.box) as GradientFill}\n      toScreen={frame.toScreen}\n      toLocal={frame.toLocal}\n      width={frame.width}\n      height={frame.height}\n      className={className}\n      onInput={(next) => dispatch(next, 'input')}\n      onChange={(next) => dispatch(next, 'commit')}\n    />\n  );\n}\n\nfunction paintOf<TData extends PaintedNodeData, TLayer extends string, TPose extends RectPose>(\n  scene: Scene<TData, TLayer, TPose>,\n  nodeId: string | null | undefined,\n  slot: PaintSlot,\n): FillStyle | null | undefined {\n  if (nodeId == null) return undefined;\n  const data = (scene.nodes as ReadonlyMap<string, { data: TData }>).get(nodeId)?.data;\n  if (!data) return undefined;\n  return slot === 'fill' ? data.fill : data.stroke?.paint;\n}\n\nfunction gradientInSlot(paint: FillStyle | null | undefined): GradientFill | null {\n  return isGradientFill(paint) ? paint : null;\n}\n"],"mappings":"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"}