@weasel-js/ui 1.7.0 → 1.7.2

package/dist/chunks/Field--onYxXTF.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field--onYxXTF.js","names":["s","Field_module_default","Field","cls","orientation","className","fieldClasses"],"sources":["../../src/components/Field/Field.module.css","../../src/components/Field/Field.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-2);\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.label {\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg);\n  cursor: default;\n}\n\n.hint {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  line-height: 1.4;\n}\n\n.error {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-danger);\n  line-height: 1.4;\n}\n\n.row {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--wzl-space-4);\n}\n\n.row .label {\n  flex: 1;\n  min-width: 0;\n}\n","import type { ReactNode } from 'react';\nimport s from './Field.module.css';\n\n/**\n * Whether a {@link Field} stacks its label above the control or sits them\n * side by side.\n */\nexport type FieldOrientation = 'stacked' | 'row';\n\n/** Props for {@link Field}. */\nexport type FieldProps = {\n  orientation?: FieldOrientation;\n  className?: string;\n  children?: ReactNode;\n};\n\n/**\n * Layout primitive that arranges a label, control, hint, and error in the\n * canonical weasel-ui form-row shape. The control itself owns its semantics\n * (RAC `TextField`, `Checkbox`, etc.); this just paints the layout.\n *\n * Most users will instead reach for `Input` / `Checkbox` / `Switch`, which\n * compose Field internally. Use Field directly when you need a custom\n * control to sit in the same visual rhythm.\n */\nexport function Field({ orientation = 'stacked', className, children }: FieldProps) {\n  const cls = [s.field, orientation === 'row' && s.row, className].filter(Boolean).join(' ');\n  return <div className={cls}>{children}</div>;\n}\n\n/**\n * The class names {@link Field} paints its slots with, so a control composing\n * its own layout can match the same form-row rhythm.\n */\nexport const fieldClasses = {\n  root: s.field,\n  row: s.row,\n  label: s.label,\n  hint: s.hint,\n  error: s.error,\n};\n"],"mappings":";;;;;;;;;;ACyBA,SAAgBE,EAAM,EAAE,iBAAc,WAAW,cAAW,eAAwB;CAClF,IAAMC,IAAM;EAACH,EAAE;EAAOI,MAAgB,SAASJ,EAAE;EAAKK;CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CACzF,OAAO,kBAAC,OAAD;EAAK,WAAWF;EAAM;CAAc,CAAA;AAC7C;AAMA,IAAaG,IAAe;CAC1B,MAAMN,EAAE;CACR,KAAKA,EAAE;CACP,OAAOA,EAAE;CACT,MAAMA,EAAE;CACR,OAAOA,EAAE;AACX"}

package/dist/chunks/FillStrokeSwatch-DNb0KXPk.js

@@ -1,111 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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-DkRgNtag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FontFamilySelect-DkRgNtag.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-b7v4Ph3i.js

@@ -1,363 +0,0 @@
-import { t as e } from "./ColorField-Yz_BkcCT.js";
-import { t } from "./Slider-YofwGOI4.js";
-import { t as n } from "./ToggleBar-BTYkBXU9.js";
-import { n as r, t as i } from "./MeshEditor-D1HLZcAh.js";
-import { fillInPoseFrame as a, fillToBoundsFrame as o, getPaintKind as s, gradientGeometry as c, isGradientFill as l, listGradientKinds as u, sampleGradientStops as d, switchGradientKind as f, useHandleDrag as p, useNodeOverlayFrame as m, useOngoingAction as h } from "@weasel-js/core";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
-import { useRef as y } from "react";
-import { nativeSvgKind as b, nativeSvgSpace as x } from "@weasel-js/svg";
-//#region src/paintGradientTrack.tsx
-var S = {
-	angleDeg: 135,
-	stripe: 2,
-	gap: 4,
-	dim: 75
-};
-function C(e) {
-	let { gradient: t, samples: n = 16, activeRange: r, hatch: i } = e;
-	return (e) => {
-		let a = [];
-		for (let r = 0; r <= n; r++) {
-			let i = r / n;
-			a.push(`${t(i)} ${e.fractionToPosition(i)}`);
-		}
-		let o = `linear-gradient(to right, ${a.join(", ")})`, s = [];
-		if (r) {
-			let t = e.valueToFraction(r[0]), n = e.valueToFraction(r[1]), a = {
-				...S,
-				...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) {
-				let n = e.fractionToPosition(t);
-				s.push(`${l} left 0 / ${n} 100% no-repeat`), s.push(`${o} left 0 / ${n} 100% no-repeat`);
-			}
-			if (n < 1) {
-				let t = `calc(100% - ${e.fractionToPosition(n)})`;
-				s.push(`${l} right 0 / ${t} 100% no-repeat`), s.push(`${o} right 0 / ${t} 100% no-repeat`);
-			}
-		}
-		s.push(o);
-		let c = {
-			position: "absolute",
-			inset: 0,
-			background: s.join(", ")
-		};
-		return /* @__PURE__ */ _("div", { style: c });
-	};
-}
-var w = {
-	root: "_root_nxcxi_1",
-	swatches: "_swatches_nxcxi_8",
-	swatch: "_swatch_nxcxi_8",
-	noEditor: "_noEditor_nxcxi_21"
-}, T = [
-	{
-		value: "rgb",
-		label: "sRGB"
-	},
-	{
-		value: "oklab",
-		label: "OKLab"
-	},
-	{
-		value: "oklch",
-		label: "OKLCh"
-	}
-], E = 2;
-function D(e) {
-	let { value: t, onInput: a, onChange: o, kindSwitch: c = !0, spaceSwitch: d = !0, svg: p = !1, className: m } = e, h = t.fill ?? "solid", y = t.interpolate ?? "rgb", S = u().filter((e) => !p || b(e.id) || e.id === h).map((e) => ({
-		value: e.id,
-		label: e.label
-	})), C = T.filter((e) => !p || x(e.value) || e.value === y), E = (e) => {
-		let n = f(t, e);
-		n && n !== t && o(n);
-	};
-	return /* @__PURE__ */ v("div", {
-		className: [w.root, m].filter(Boolean).join(" "),
-		children: [c && /* @__PURE__ */ _(n, {
-			items: S,
-			value: h,
-			size: "sm",
-			ariaLabel: "Gradient kind",
-			onChange: (e) => e && E(e)
-		}), D()]
-	});
-	function D() {
-		let e = d && C.length > 1 && /* @__PURE__ */ _(n, {
-			items: C,
-			value: y,
-			size: "sm",
-			ariaLabel: "Blend space",
-			onChange: (e) => e && o({
-				...t,
-				interpolate: e
-			})
-		}), c = s(h);
-		if (c?.Editor) {
-			let n = c.Editor;
-			return /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(n, {
-				value: t,
-				onInput: a,
-				onChange: o
-			}), e] });
-		}
-		return l(t) ? /* @__PURE__ */ _(O, {
-			value: t,
-			spaceBar: e,
-			onInput: a,
-			onChange: o
-		}) : r(t) ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(i, {
-			value: t,
-			spaceSwitch: !1,
-			onInput: a,
-			onChange: o
-		}), e] }) : /* @__PURE__ */ v("div", {
-			className: w.noEditor,
-			children: [c?.label ?? h, ": no editor"]
-		});
-	}
-}
-function O(n) {
-	let { value: r, spaceBar: i, onInput: a, onChange: o } = n, s = r.stops, c = r.interpolate ?? "rgb", l = (e) => ({
-		...r,
-		stops: e
-	}), u = s.map((e) => ({
-		value: e.offset,
-		color: e.color
-	})), f = (e) => e.map((e) => ({
-		offset: e.value,
-		color: e.color
-	})), p = (e, t) => s.map((n, r) => r === e ? {
-		...n,
-		color: t
-	} : n), m = s.map((e, t) => ({
-		stop: e,
-		index: t
-	})).sort((e, t) => e.stop.offset - t.stop.offset);
-	return /* @__PURE__ */ v(g, { children: [
-		/* @__PURE__ */ _(t, {
-			min: 0,
-			max: 1,
-			step: .005,
-			constraint: "free",
-			thumbs: u,
-			ariaLabel: "Gradient stops",
-			readoutPlacement: "none",
-			onInput: (e) => a?.(l(f(e))),
-			onChange: (e) => o(l(f(e))),
-			onAddThumb: (e) => ({
-				value: e,
-				color: d(s, e, c)
-			}),
-			onRemoveThumb: () => s.length > E,
-			renderTrack: C({
-				gradient: (e) => d(s, e, c),
-				samples: c === "rgb" ? 32 : 64
-			})
-		}),
-		i,
-		/* @__PURE__ */ _("div", {
-			className: w.swatches,
-			children: m.map(({ stop: t, index: n }) => /* @__PURE__ */ _(e, {
-				value: t.color,
-				alpha: !0,
-				"aria-label": `Stop ${n + 1} at ${Math.round(t.offset * 100)}%`,
-				className: w.swatch,
-				onInput: (e) => a?.(l(p(n, e))),
-				onChange: (e) => o(l(p(n, e)))
-			}, n))
-		})
-	] });
-}
-var k = {
-	overlay: "_overlay_1ffuu_3",
-	guide: "_guide_1ffuu_13",
-	handle: "_handle_1ffuu_21"
-};
-//#endregion
-//#region src/components/GradientEditor/GradientHandles.tsx
-function A(e) {
-	let { value: t, toScreen: n, toLocal: r, onInput: i, onChange: a, width: o, height: s, className: c } = e;
-	return /* @__PURE__ */ _("svg", {
-		className: [k.overlay, c].filter(Boolean).join(" "),
-		width: o,
-		height: s,
-		children: j(t, n, r, i, a)
-	});
-}
-function j(e, t, n, r, i) {
-	let a = (e, t) => {
-		t === "input" ? r?.(e) : i(e);
-	};
-	if (e.fill === "linear-gradient") {
-		let r = t(e.from), i = t(e.to);
-		return /* @__PURE__ */ v(g, { children: [
-			/* @__PURE__ */ _(N, {
-				x1: r.x,
-				y1: r.y,
-				x2: i.x,
-				y2: i.y
-			}),
-			/* @__PURE__ */ _(P, {
-				at: r,
-				label: "Gradient start",
-				onDrag: (t, r) => a({
-					...e,
-					from: n(t)
-				}, r)
-			}),
-			/* @__PURE__ */ _(P, {
-				at: i,
-				label: "Gradient end",
-				onDrag: (t, r) => a({
-					...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
-		}), o = Math.hypot(i.x - r.x, i.y - r.y);
-		return /* @__PURE__ */ v(g, { children: [
-			/* @__PURE__ */ _("circle", {
-				className: k.guide,
-				cx: r.x,
-				cy: r.y,
-				r: o
-			}),
-			/* @__PURE__ */ _(P, {
-				at: r,
-				label: "Gradient center",
-				onDrag: (t, r) => a({
-					...e,
-					center: n(t)
-				}, r)
-			}),
-			/* @__PURE__ */ _(P, {
-				at: i,
-				label: "Gradient radius",
-				onDrag: (t, r) => {
-					let i = n(t), o = Math.hypot(i.x - e.center.x, i.y - e.center.y);
-					a({
-						...e,
-						radius: Math.max(M, o)
-					}, r);
-				}
-			})
-		] });
-	}
-	let o = t(e.center), { radius: s } = c(e), l = t({
-		x: e.center.x + Math.cos(e.angle) * s,
-		y: e.center.y + Math.sin(e.angle) * s
-	});
-	return /* @__PURE__ */ v(g, { children: [
-		/* @__PURE__ */ _(N, {
-			x1: o.x,
-			y1: o.y,
-			x2: l.x,
-			y2: l.y
-		}),
-		/* @__PURE__ */ _(P, {
-			at: o,
-			label: "Gradient center",
-			onDrag: (t, r) => a({
-				...e,
-				center: n(t)
-			}, r)
-		}),
-		/* @__PURE__ */ _(P, {
-			at: l,
-			label: "Gradient angle",
-			onDrag: (t, r) => {
-				let i = n(t), o = Math.atan2(i.y - e.center.y, i.x - e.center.x);
-				a({
-					...e,
-					angle: o
-				}, r);
-			}
-		})
-	] });
-}
-var M = 1;
-function N(e) {
-	return /* @__PURE__ */ _("line", {
-		className: k.guide,
-		...e
-	});
-}
-function P({ at: e, label: t, onDrag: n }) {
-	let r = y(e), i = p({
-		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__ */ _("circle", {
-		className: k.handle,
-		cx: e.x,
-		cy: e.y,
-		r: F,
-		role: "button",
-		"aria-label": t,
-		tabIndex: 0,
-		onKeyDown: (t) => {
-			let r = t.shiftKey ? I * 10 : I, 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 F = 7, I = 1;
-//#endregion
-//#region src/components/GradientEditor/SceneGradientHandles.tsx
-function L(e) {
-	let { scene: t, containerRef: n, nodeId: r, slot: i, view: s, className: c } = e, l = m(t, n, r, { view: s }), u = h(i === "fill" ? "setFill" : "setStroke"), d = l ? z(R(t, r, i)) : null;
-	if (!l || !d) return null;
-	let f = (e, t) => {
-		let n = o(e, l.box);
-		t === "commit" ? u.commit({ paint: n }) : u.input({ paint: n });
-	};
-	return /* @__PURE__ */ _(A, {
-		value: a(d, l.box),
-		toScreen: l.toScreen,
-		toLocal: l.toLocal,
-		width: l.width,
-		height: l.height,
-		className: c,
-		onInput: (e) => f(e, "input"),
-		onChange: (e) => f(e, "commit")
-	});
-}
-function R(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 z(e) {
-	return l(e) ? e : null;
-}
-//#endregion
-export { C as i, A as n, D as r, L as t };
-
-//# sourceMappingURL=GradientEditor-b7v4Ph3i.js.map

package/dist/chunks/GradientEditor-b7v4Ph3i.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GradientEditor-b7v4Ph3i.js","names":["s","_Fragment","s","_Fragment","ColorField","ToggleBar","isMeshPaint","MeshEditor","DEFAULT_HATCH","paintGradientTrack","opts","stops","i","samples","t","gradient","ctx","baseGradient","layers","activeRange","low","high","h","hatch","stripe","dimColor","dimOverlay","wL","wR","style","GradientEditor_module_default","SPACES","MIN_STOPS","GradientEditor","props","kind","value","space","kinds","listGradientKinds","svg","nativeSvgKind","entry","spaces","nativeSvgSpace","item","switchKind","converted","switchGradientKind","next","onChange","className","kindSwitch","renderBody","spaceBar","spaceSwitch","getPaintKind","Editor","Fragment","isGradientFill","StopsBody","withStops","thumbs","stop","applyThumbs","setStopColor","index","ordered","a","b","Slider","onInput","at","sampleGradientStops","hex","GradientHandles_module_default","GradientHandles","renderForKind","toScreen","toLocal","emit","phase","from","to","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"],"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 slider's value span (0 to\n * 1) to a CSS color; `samples` is how many stops the resulting\n * linear-gradient uses. The ramp is laid on the same span as the thumbs, so a\n * thumb at 0.3 sits over `gradient(0.3)`; any track beyond the span takes the\n * end colors.\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)} ${ctx.fractionToPosition(t)}`);\n    }\n    const baseGradient = `linear-gradient(to right, ${stops.join(', ')})`;\n\n    const layers: string[] = [];\n    if (activeRange) {\n      const low = ctx.valueToFraction(activeRange[0]);\n      const high = ctx.valueToFraction(activeRange[1]);\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 (low > 0) {\n        const wL = ctx.fractionToPosition(low);\n        layers.push(`${dimOverlay} left 0 / ${wL} 100% no-repeat`);\n        layers.push(`${stripe} left 0 / ${wL} 100% no-repeat`);\n      }\n      if (high < 1) {\n        const wR = `calc(100% - ${ctx.fractionToPosition(high)})`;\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\n.noEditor {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n","import { type ReactElement, type ReactNode } from 'react';\nimport {\n  getPaintKind,\n  isGradientFill,\n  listGradientKinds,\n  sampleGradientStops,\n  switchGradientKind,\n  type ColorSpace,\n  type FillStyle,\n  type GradStop,\n  type GradientFill,\n  type PaintKind,\n} from '@weasel-js/core';\nimport { nativeSvgKind, nativeSvgSpace } from '@weasel-js/svg';\nimport { Slider, type Thumb } from '../Slider';\nimport { ColorField } from '../ColorField';\nimport { MeshEditor, isMeshPaint } from '../MeshEditor';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport { paintGradientTrack } from '../../paintGradientTrack';\nimport s from './GradientEditor.module.css';\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: a paint of any gradient kind — one that\n   *  `listGradientKinds` returns. */\n  value: FillStyle;\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: FillStyle) => void;\n  /** Committed value: one call per completed gesture. Pair with an\n   *  undoable write. */\n  onChange: (next: FillStyle) => void;\n  /** Show the kind switch — every registered gradient kind. Default true;\n   *  turn it off 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  /**\n   * Offer only what an SVG file carries natively: the linear and radial\n   * gradients, which SVG has elements for, blended in sRGB, the only space\n   * every SVG renderer honors. A conic or mesh gradient exports as a weasel\n   * element that other renderers paint as one flat color, and an OKLab or\n   * OKLCh blend exports as an attribute they ignore. A value already outside\n   * that set keeps its own kind and space on offer, so it can be switched\n   * back. Default false.\n   */\n  svg?: boolean;\n  className?: string;\n}\n\ntype StopThumb = Thumb & { color: string };\n\n/**\n * Editor for a gradient's kind and colors: the stop list of a linear, radial\n * or conic gradient, a mesh's corner colors, or a registered kind's own\n * `Editor`. Switching kind goes through `switchGradientKind`, so the colors\n * carry across.\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, svg = false, className } = props;\n  const kind: PaintKind = value.fill ?? 'solid';\n  const space: ColorSpace = (value as { interpolate?: ColorSpace }).interpolate ?? 'rgb';\n\n  const kinds: readonly ToggleBarItem<PaintKind>[] = listGradientKinds()\n    .filter((entry) => !svg || nativeSvgKind(entry.id) || entry.id === kind)\n    .map((entry) => ({ value: entry.id, label: entry.label }));\n  const spaces = SPACES.filter((item) => !svg || nativeSvgSpace(item.value) || item.value === space);\n\n  const switchKind = (next: PaintKind): void => {\n    const converted = switchGradientKind(value, next);\n    if (converted && converted !== value) onChange(converted);\n  };\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      {kindSwitch && (\n        <ToggleBar<PaintKind>\n          items={kinds}\n          value={kind}\n          size=\"sm\"\n          ariaLabel=\"Gradient kind\"\n          onChange={(next) => next && switchKind(next)}\n        />\n      )}\n\n      {renderBody()}\n    </div>\n  );\n\n  function renderBody(): ReactElement {\n    const spaceBar = spaceSwitch && spaces.length > 1 && (\n      <ToggleBar<ColorSpace>\n        items={spaces}\n        value={space}\n        size=\"sm\"\n        ariaLabel=\"Blend space\"\n        onChange={(next) => next && onChange({ ...value, interpolate: next } as FillStyle)}\n      />\n    );\n    // A registered `Editor` wins even for a built-in id, as it does in `PaintInput`.\n    const entry = getPaintKind(kind);\n    if (entry?.Editor) {\n      const Editor = entry.Editor;\n      return <><Editor value={value} onInput={onInput} onChange={onChange} />{spaceBar}</>;\n    }\n    if (isGradientFill(value)) {\n      return <StopsBody value={value} spaceBar={spaceBar} onInput={onInput} onChange={onChange} />;\n    }\n    if (isMeshPaint(value)) {\n      return <><MeshEditor value={value} spaceSwitch={false} onInput={onInput} onChange={onChange} />{spaceBar}</>;\n    }\n    return <div className={s.noEditor}>{entry?.label ?? kind}: no editor</div>;\n  }\n}\n\n/** The stop slider and swatch row of a linear, radial or conic gradient. */\nfunction StopsBody(props: {\n  value: GradientFill;\n  spaceBar: ReactNode;\n  onInput?: (next: FillStyle) => void;\n  onChange: (next: FillStyle) => void;\n}): ReactElement {\n  const { value, spaceBar, onInput, onChange } = props;\n  const stops = value.stops;\n  const space = value.interpolate ?? 'rgb';\n\n  const withStops = (next: GradStop[]): GradientFill => ({ ...value, stops: next });\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    <>\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      {spaceBar}\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    </>\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);\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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"}