@weasel-js/ui 1.6.1 → 1.7.0

package/dist/chunks/PaintInput-v8Y7MDbH.js

@@ -0,0 +1,121 @@
+import { a as e, t } from "./Icon-CcVjdq2C.js";
+import { t as n } from "./ColorField-Yz_BkcCT.js";
+import { t as r } from "./ToggleBar-BTYkBXU9.js";
+import { r as i } from "./GradientEditor-b7v4Ph3i.js";
+import { t as a } from "./PatternPicker-R_EQtw2Q.js";
+import { getAlpha01 as o, getPaintKind as s, listPaintKinds as c, paintAlpha as l, solid as u, switchGradientKind as d, toHex8 as f, withAlpha01 as p } from "@weasel-js/core";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useCallback as g, useRef as _ } from "react";
+var v = {
+	root: "_root_1nsz3_2",
+	unset: "_unset_1nsz3_10",
+	noEditor: "_noEditor_1nsz3_15"
+}, y = "#000000ff", b = "none";
+function x(e) {
+	let t = f(e.color);
+	return p(t.slice(0, 7), o(t) * l(e));
+}
+function S(e) {
+	let t = u(e);
+	return t.opacity === void 0 ? t : {
+		...t,
+		opacity: Math.round(t.opacity * 100) / 100
+	};
+}
+function C(e) {
+	return e?.fill === "pattern";
+}
+function w(e) {
+	return e === null ? b : e === void 0 ? null : e.fill ?? "solid";
+}
+function T(o) {
+	let { value: l, mixed: u = !1, unset: f = !1, kinds: p, allowNone: T = !0, onInput: E, onChange: D, className: O } = o, k = o["aria-label"], A = _(/* @__PURE__ */ new Map()), j = u ? null : w(l);
+	l != null && j !== null && A.current.set(j, l);
+	let M = c().filter((e) => p === void 0 || p.includes(e.id)), N = (n, r, i) => i && i in e ? {
+		value: n,
+		label: /* @__PURE__ */ m(t, {
+			name: i,
+			size: 14
+		}),
+		ariaLabel: r
+	} : {
+		value: n,
+		label: r
+	}, P = [...T ? [N(b, "None", "paintNone")] : [], ...M.map((e) => N(e.id, e.label, e.icon))], F = g(() => l == null ? y : s(w(l) ?? "solid")?.colorOf(l) ?? y, [l]), I = (e) => {
+		if (e === j) return;
+		if (e === b) {
+			D(null);
+			return;
+		}
+		let t = A.current.get(e);
+		if (t !== void 0) {
+			D(t);
+			return;
+		}
+		let n = l == null ? void 0 : d(l, e);
+		if (n !== void 0) {
+			D(n);
+			return;
+		}
+		let r = s(e);
+		r && D(r.seed(F()));
+	};
+	return /* @__PURE__ */ h("div", {
+		className: [
+			v.root,
+			f && v.unset,
+			O
+		].filter(Boolean).join(" "),
+		title: f ? "Not set" : void 0,
+		children: [/* @__PURE__ */ m(r, {
+			items: P,
+			value: j,
+			size: "sm",
+			ariaLabel: "Paint kind",
+			onChange: (e) => e && I(e)
+		}), L()]
+	});
+	function L() {
+		if (u || l === void 0) return /* @__PURE__ */ m(n, {
+			mixed: !0,
+			"aria-label": k,
+			onChange: (e) => D(S(e))
+		});
+		if (l === null) return null;
+		let e = s(w(l) ?? "solid");
+		if (e?.Editor) {
+			let t = e.Editor;
+			return /* @__PURE__ */ m(t, {
+				value: l,
+				onInput: E,
+				onChange: D
+			});
+		}
+		if (e?.stopsOf) return /* @__PURE__ */ m(i, {
+			value: l,
+			kindSwitch: !1,
+			onInput: E,
+			onChange: D
+		});
+		if (C(l)) return /* @__PURE__ */ m(a, {
+			value: l,
+			color: F(),
+			onChange: D
+		});
+		let t = w(l);
+		return t === "solid" ? /* @__PURE__ */ m(n, {
+			value: x(l),
+			alpha: !0,
+			"aria-label": k,
+			onInput: (e) => E?.(S(e)),
+			onChange: (e) => D(S(e))
+		}) : /* @__PURE__ */ h("div", {
+			className: v.noEditor,
+			children: [e?.label ?? t, ": no editor"]
+		});
+	}
+}
+//#endregion
+export { T as t };
+
+//# sourceMappingURL=PaintInput-v8Y7MDbH.js.map

package/dist/chunks/PaintInput-v8Y7MDbH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintInput-v8Y7MDbH.js","names":["s","ICON_PATHS","ColorField","ToggleBar","GradientEditor","PatternPicker","PaintInput_module_default","FALLBACK_COLOR","NONE","solidHex8","hex8","toHex8","paint","withAlpha01","getAlpha01","paintAlpha","solidFromField","solid","color","isPattern","kindOf","PaintInput","props","ariaLabel","remembered","useRef","active","mixed","value","entries","listPaintKinds","kinds","entry","segment","icon","id","Icon","label","items","allowNone","currentColor","useCallback","getPaintKind","switchKind","kind","seen","converted","switchGradientKind","onChange","unset","className","renderBody","Editor","onInput"],"sources":["../../src/components/PaintInput/PaintInput.module.css","../../src/components/PaintInput/PaintInput.tsx"],"sourcesContent":["/* Kind switch stacked over whichever paint body it selects. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n/* A value is in effect but nobody chose it. Never louder than mixed. */\n.unset {\n  opacity: 0.55;\n}\n\n/* A kind with no editor: named, not editable. */\n.noEditor {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n","import { useCallback, useRef, type ReactElement } from 'react';\nimport {\n  getAlpha01,\n  getPaintKind,\n  listPaintKinds,\n  paintAlpha,\n  solid,\n  switchGradientKind,\n  toHex8,\n  withAlpha01,\n  type FillStyle,\n  type PaintKind,\n} from '@weasel-js/core';\nimport { Icon } from '../../icons/Icon';\nimport { ICON_PATHS, type IconName } from '../../icons/paths';\nimport { ColorField } from '../ColorField';\nimport { GradientEditor } from '../GradientEditor';\nimport { PatternPicker, type PatternFill } from '../PatternPicker';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport s from './PaintInput.module.css';\n\n/** What a kind with no color of its own seeds from. */\nconst FALLBACK_COLOR = '#000000ff';\n\n/** The bar's answer for \"no paint at all\". Not a registered kind — absence\n *  has no seed, no color and nothing to render — so it is this control's own\n *  segment rather than a registry entry. */\nconst NONE = 'none';\n\n/** A solid paint as the one `#rrggbbaa` a color field edits. Its alpha lives\n *  in `opacity`; a hex alpha left in `color` multiplies with it when painted,\n *  so both fold in. */\nfunction solidHex8(paint: FillStyle): string {\n  const hex8 = toHex8((paint as { color: string }).color);\n  return withAlpha01(hex8.slice(0, 7), getAlpha01(hex8) * paintAlpha(paint));\n}\n\n/** `solid(color)` at the slider's own 1% resolution: the alpha arrives\n *  through a hex channel, which would turn 70% into 0.70196. */\nfunction solidFromField(color: string): FillStyle {\n  const paint = solid(color);\n  return paint.opacity === undefined\n    ? paint\n    : { ...paint, opacity: Math.round(paint.opacity * 100) / 100 };\n}\n\nfunction isPattern(paint: FillStyle | undefined): paint is PatternFill {\n  return paint?.fill === 'pattern';\n}\n\n/** A paint's own discriminant. The solid member leaves `fill` off, and an\n *  explicit `null` is the absence of paint rather than an unknown one. */\nfunction kindOf(paint: FillStyle | null | undefined): PaintKind | null {\n  if (paint === null) return NONE;\n  if (paint === undefined) return null;\n  return paint.fill ?? 'solid';\n}\n\n/** Props for {@link PaintInput}. `onInput` fires throughout a gesture and\n *  `onChange` once at its end. */\nexport interface PaintInputProps {\n  /** The paint being edited. `null` is an explicit \"no paint\"; `undefined`\n   *  is no value to show. */\n  value: FillStyle | null | undefined;\n  /** Indeterminate presentation: no kind lit, and the body withheld because\n   *  there is no single paint to show. */\n  mixed?: boolean;\n  /** Dim the control — a value is in effect but was never chosen. */\n  unset?: boolean;\n  /** Restrict the kind bar. Default: every registered kind. */\n  kinds?: readonly PaintKind[];\n  /** Offer \"None\". Default `true` — the bar answers \"what kind of paint is\n   *  this?\" and no-paint is one of the answers. Turn it off where the slot\n   *  cannot express absence. */\n  allowNone?: boolean;\n  onInput?: (next: FillStyle | null) => void;\n  onChange: (next: FillStyle | null) => void;\n  /** Names the paint this control edits — `Fill`, `Color`. Carried by the\n   *  solid body's swatch, which is the part with a value to announce. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * Editor for a whole `FillStyle` — a kind bar over whichever body that kind\n * wants.\n *\n * The bar is driven by the paint-kind registry rather than a fixed list, so a\n * consumer's registered kind appears in it and renders that entry's `Editor`.\n * The five built-in kinds keep their branch here: their editors live in this\n * package and `@weasel-js/core`, which owns the registry, cannot import it.\n *\n * Geometry is deliberately absent — on a canvas it belongs on the artwork,\n * via `<SceneGradientHandles>`.\n */\nexport function PaintInput(props: PaintInputProps): ReactElement {\n  const {\n    value, mixed = false, unset = false, kinds, allowNone = true,\n    onInput, onChange, className,\n  } = props;\n  const ariaLabel = props['aria-label'];\n\n  // Per-kind memory, so linear → solid → linear comes back with its stops.\n  // A ref, not state: it must not survive the control being pointed at a\n  // different selection, and nothing renders off it directly.\n  const remembered = useRef(new Map<PaintKind, FillStyle>());\n\n  const active = mixed ? null : kindOf(value);\n  if (value != null && active !== null) remembered.current.set(active, value);\n\n  const entries = listPaintKinds().filter(\n    (entry) => kinds === undefined || kinds.includes(entry.id),\n  );\n  const segment = (id: string, label: string, icon: string | undefined): ToggleBarItem<PaintKind> =>\n    icon && icon in ICON_PATHS\n      // Icon-only: six labelled segments do not fit a property row, and the\n      // full label stays the accessible name.\n      // 14 to match the panel's other glyph segments. A `sm` bar is 17px tall\n      // over 1px of padding, so 15 fills the segment box edge to edge.\n      ? { value: id, label: <Icon name={icon as IconName} size={14} />, ariaLabel: label }\n      : { value: id, label };\n\n  const items: readonly ToggleBarItem<PaintKind>[] = [\n    ...(allowNone ? [segment(NONE, 'None', 'paintNone')] : []),\n    ...entries.map((entry) => segment(entry.id, entry.label, entry.icon)),\n  ];\n\n  /** The color a switch seeds from: whatever the current paint shows. */\n  const currentColor = useCallback((): string => {\n    if (value == null) return FALLBACK_COLOR;\n    return getPaintKind(kindOf(value) ?? 'solid')?.colorOf(value) ?? FALLBACK_COLOR;\n  }, [value]);\n\n  const switchKind = (kind: PaintKind): void => {\n    if (kind === active) return;\n    if (kind === NONE) {\n      onChange(null);\n      return;\n    }\n    const seen = remembered.current.get(kind);\n    if (seen !== undefined) {\n      onChange(seen);\n      return;\n    }\n    const converted = value != null ? switchGradientKind(value, kind) : undefined;\n    if (converted !== undefined) {\n      onChange(converted);\n      return;\n    }\n    const entry = getPaintKind(kind);\n    if (entry) onChange(entry.seed(currentColor()));\n  };\n\n  return (\n    <div\n      className={[s.root, unset && s.unset, className].filter(Boolean).join(' ')}\n      title={unset ? 'Not set' : undefined}\n    >\n      <ToggleBar<PaintKind>\n        items={items}\n        value={active}\n        size=\"sm\"\n        ariaLabel=\"Paint kind\"\n        onChange={(kind) => kind && switchKind(kind)}\n      />\n      {renderBody()}\n    </div>\n  );\n\n  function renderBody(): ReactElement | null {\n    if (mixed || value === undefined) {\n      return (\n        <ColorField\n          mixed\n          aria-label={ariaLabel}\n          onChange={(color) => onChange(solidFromField(color))}\n        />\n      );\n    }\n    // Absence has nothing to edit. The lit segment is the whole statement.\n    if (value === null) return null;\n    // A registered `Editor` wins even for a built-in id: re-registering one is\n    // how a consumer replaces a kit control, and the built-in branches below\n    // are the fallback for the ids that ship without an entry editor.\n    const entry = getPaintKind(kindOf(value) ?? 'solid');\n    if (entry?.Editor) {\n      const Editor = entry.Editor;\n      return <Editor value={value} onInput={onInput} onChange={onChange} />;\n    }\n    if (entry?.stopsOf) {\n      return (\n        <GradientEditor\n          value={value}\n          kindSwitch={false}\n          onInput={onInput}\n          onChange={onChange}\n        />\n      );\n    }\n    if (isPattern(value)) {\n      return <PatternPicker value={value} color={currentColor()} onChange={onChange} />;\n    }\n    const kind = kindOf(value);\n    if (kind !== 'solid') {\n      // Editing a paint this control cannot represent would overwrite it, so\n      // a kind with no editor is shown and left alone.\n      return <div className={s.noEditor}>{entry?.label ?? kind}: no editor</div>;\n    }\n    return (\n      <ColorField\n        value={solidHex8(value)}\n        alpha\n        aria-label={ariaLabel}\n        onInput={(color) => onInput?.(solidFromField(color))}\n        onChange={(color) => onChange(solidFromField(color))}\n      />\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/{PatternPicker-B-cUt-JT.js → PatternPicker-R_EQtw2Q.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./ToggleBar-DTjGeS0Q.js";
+import { t as e } from "./ToggleBar-BTYkBXU9.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { tilePreviewCssUrl as r } from "@weasel-js/svg";
 var i = {
@@ -90,4 +90,4 @@ function d(d) {
 //#endregion
 export { u as n, d as t };
 
-//# sourceMappingURL=PatternPicker-B-cUt-JT.js.map
+//# sourceMappingURL=PatternPicker-R_EQtw2Q.js.map

package/dist/chunks/{PatternPicker-B-cUt-JT.js.map → PatternPicker-R_EQtw2Q.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PatternPicker-B-cUt-JT.js","names":["s","ToggleBar","PatternPicker_module_default","TILES","TILE_SIZES","DEFAULT_TILE_SIZE","PREVIEW_SIZE","specOf","fill","seedPattern","spec","from","tile","PatternPicker","props","value","size","pick","color","resize","onChange","nextSize","className","preview","selected","tilePreviewCssUrl","v"],"sources":["../../src/components/PatternPicker/PatternPicker.module.css","../../src/components/PatternPicker/PatternPicker.tsx"],"sourcesContent":["/* Tile grid over the size switch. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--wzl-swatch-size, 28px), 1fr));\n  gap: 0;\n}\n\n/* The swatch's whole face is its own tile, so it must not carry a flat\n   background — and the tile repeats at its own scale, not the swatch's. */\n.swatch {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  min-width: 0;\n  padding: 0;\n  border: 0.5px solid var(--wzl-border);\n  border-radius: 0;\n  cursor: pointer;\n  background-color: var(--wzl-surface-sunken);\n  background-image: var(--tile-preview);\n  background-repeat: repeat;\n  background-size: 16px 16px;\n  background-clip: padding-box;\n}\n\n.swatch:hover {\n  border-color: var(--wzl-fg-muted);\n}\n\n.swatchActive {\n  border-color: var(--wzl-accent);\n  box-shadow: 0 0 0 1px var(--wzl-accent);\n}\n","import type { ReactElement } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { FillStyle, TilePatternSpec } from '@weasel-js/core';\nimport { tilePreviewCssUrl } from '@weasel-js/svg';\nimport { ToggleBar } from '../ToggleBar';\nimport s from './PatternPicker.module.css';\n\n/** The `pattern` member of the paint union. */\nexport type PatternFill = Extract<FillStyle, { fill: 'pattern' }>;\n\nconst TILES: readonly TilePatternSpec['tile'][] = ['hatch', 'crosshatch', 'dots', 'chunks'];\n\n/** Tile sizes the picker offers, coarse enough that each reads as a\n *  distinct texture rather than a nudge. */\nconst TILE_SIZES: readonly { value: number; label: string }[] = [\n  { value: 4, label: 'S' },\n  { value: 8, label: 'M' },\n  { value: 16, label: 'L' },\n  { value: 32, label: 'XL' },\n];\n\nconst DEFAULT_TILE_SIZE = 8;\n\n/** Every swatch previews at one size so the grid compares tiles, not scales. */\nconst PREVIEW_SIZE = 16;\n\n/** The spec a pattern paint carries, if it carries one. A consumer-built\n *  `TextureHandle` has no spec, so the picker shows no tile selected and\n *  replaces it wholesale on the next click. */\nfunction specOf(fill: PatternFill): TilePatternSpec | null {\n  return 'tile' in fill.pattern ? fill.pattern : null;\n}\n\n/**\n * A pattern seeded from a color. `units: 'bounds'` anchors the tile to the\n * node's box, so the texture travels with the shape.\n */\nexport function seedPattern(\n  tile: TilePatternSpec['tile'],\n  from: string,\n  size: number = DEFAULT_TILE_SIZE,\n): PatternFill {\n  const spec: TilePatternSpec = { tile, color: from, size };\n  // `chunks` is a scatter over a ground rather than a line texture; without a\n  // background it reads as loose specks on whatever sits beneath.\n  if (tile === 'chunks') spec.bg = '#00000000';\n  return { fill: 'pattern', pattern: spec, units: 'bounds' };\n}\n\n/** Props for {@link PatternPicker}. */\nexport interface PatternPickerProps {\n  /** The pattern paint being edited. */\n  value: PatternFill;\n  /** The color new tiles are seeded with — the paint's own, normally. */\n  color: string;\n  /** Committed value: one call per click. A tile pick and a size change are\n   *  each a complete gesture, so there is no `onInput`. */\n  onChange: (next: PatternFill) => void;\n  className?: string;\n}\n\n/**\n * Grid of tile swatches over a size switch, each swatch previewing the real\n * tile at the current color.\n *\n * The preview shares its shape mapper with what the renderer paints, so a\n * swatch cannot drift from the texture it selects.\n */\nexport function PatternPicker(props: PatternPickerProps): ReactElement {\n  const { value, color, onChange, className } = props;\n  const spec = specOf(value);\n  const size = spec?.size ?? DEFAULT_TILE_SIZE;\n\n  const pick = (tile: TilePatternSpec['tile']): void => {\n    onChange(seedPattern(tile, color, size));\n  };\n\n  const resize = (nextSize: number): void => {\n    if (!spec) return;\n    onChange({ ...value, pattern: { ...spec, size: nextSize } });\n  };\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      <div className={s.grid}>\n        {TILES.map((tile) => {\n          const preview: TilePatternSpec = { tile, color, size: PREVIEW_SIZE };\n          if (tile === 'chunks') preview.bg = '#00000000';\n          const selected = spec?.tile === tile;\n          return (\n            <button\n              key={tile}\n              type=\"button\"\n              className={[s.swatch, selected && s.swatchActive].filter(Boolean).join(' ')}\n              style={{ ['--tile-preview' as string]: tilePreviewCssUrl(preview) } as CSSProperties}\n              title={tile}\n              aria-label={tile}\n              aria-pressed={selected}\n              onClick={() => pick(tile)}\n            />\n          );\n        })}\n      </div>\n      <ToggleBar<number>\n        items={TILE_SIZES}\n        value={size}\n        size=\"sm\"\n        ariaLabel=\"Tile size\"\n        onChange={(v) => v != null && resize(v)}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;GCUMG,IAA4C;CAAC;CAAS;CAAc;CAAQ;AAAQ,GAIpFC,IAA0D;CAC9D;EAAE,OAAO;EAAG,OAAO;CAAI;CACvB;EAAE,OAAO;EAAG,OAAO;CAAI;CACvB;EAAE,OAAO;EAAI,OAAO;CAAI;CACxB;EAAE,OAAO;EAAI,OAAO;CAAK;AAC3B,GAEMC,IAAoB,GAGpBC,IAAe;AAKrB,SAASC,EAAO,GAA2C;CACzD,OAAO,UAAUC,EAAK,UAAUA,EAAK,UAAU;AACjD;AAMA,SAAgBC,EACd,GACA,GACA,IAAeJ,GACF;CACb,IAAMK,IAAwB;EAAE;EAAM,OAAOC;EAAM;CAAK;CAIxD,OADIC,MAAS,aAAU,EAAK,KAAK,cAC1B;EAAE,MAAM;EAAW,SAASF;EAAM,OAAO;CAAS;AAC3D;AAqBA,SAAgBG,EAAc,GAAyC;CACrE,IAAM,EAAE,UAAO,UAAO,aAAU,iBAAcC,GACxCJ,IAAOH,EAAOQ,CAAK,GACnBC,IAAON,GAAM,QAAQL,GAErBY,KAAQ,MAAwC;EACpD,EAASR,EAAYG,GAAMM,GAAOF,CAAI,CAAC;CACzC,GAEMG,KAAU,MAA2B;EACzC,AAAKT,KACLU,EAAS;GAAE,GAAGL;GAAO,SAAS;IAAE,GAAGL;IAAM,MAAMW;GAAS;EAAE,CAAC;CAC7D;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,CAACrB,EAAE,MAAMsB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAA5D,UAAA,CACE,kBAAC,OAAD;GAAK,WAAWtB,EAAE;GACf,UAAAG,EAAM,KAAK,MAAS;IACnB,IAAMoB,IAA2B;KAAE;KAAM;KAAO,MAAMjB;IAAa;IACnE,AAAIM,MAAS,aAAU,EAAQ,KAAK;IACpC,IAAMY,IAAWd,GAAM,SAASE;IAChC,OACE,kBAAC,UAAD;KAEE,MAAK;KACL,WAAW,CAACZ,EAAE,QAAQwB,KAAYxB,EAAE,YAAY,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;KAC1E,OAAO,EAAG,kBAA6ByB,EAAkBF,CAAO,EAAE;KAClE,OAAOX;KACP,cAAYA;KACZ,gBAAcY;KACd,eAAeP,EAAKL,CAAI;IACzB,GARMA,CAQN;GAEL,CAAC;EACE,CAAA,GACL,kBAACX,GAAD;GACE,OAAOG;GACP,OAAOY;GACP,MAAK;GACL,WAAU;GACV,WAAW,MAAMU,KAAK,QAAQP,EAAOO,CAAC;EACvC,CAAA,CACE;;AAET"}
+{"version":3,"file":"PatternPicker-R_EQtw2Q.js","names":["s","ToggleBar","PatternPicker_module_default","TILES","TILE_SIZES","DEFAULT_TILE_SIZE","PREVIEW_SIZE","specOf","fill","seedPattern","spec","from","tile","PatternPicker","props","value","size","pick","color","resize","onChange","nextSize","className","preview","selected","tilePreviewCssUrl","v"],"sources":["../../src/components/PatternPicker/PatternPicker.module.css","../../src/components/PatternPicker/PatternPicker.tsx"],"sourcesContent":["/* Tile grid over the size switch. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--wzl-swatch-size, 28px), 1fr));\n  gap: 0;\n}\n\n/* The swatch's whole face is its own tile, so it must not carry a flat\n   background — and the tile repeats at its own scale, not the swatch's. */\n.swatch {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  min-width: 0;\n  padding: 0;\n  border: 0.5px solid var(--wzl-border);\n  border-radius: 0;\n  cursor: pointer;\n  background-color: var(--wzl-surface-sunken);\n  background-image: var(--tile-preview);\n  background-repeat: repeat;\n  background-size: 16px 16px;\n  background-clip: padding-box;\n}\n\n.swatch:hover {\n  border-color: var(--wzl-fg-muted);\n}\n\n.swatchActive {\n  border-color: var(--wzl-accent);\n  box-shadow: 0 0 0 1px var(--wzl-accent);\n}\n","import type { ReactElement } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { FillStyle, TilePatternSpec } from '@weasel-js/core';\nimport { tilePreviewCssUrl } from '@weasel-js/svg';\nimport { ToggleBar } from '../ToggleBar';\nimport s from './PatternPicker.module.css';\n\n/** The `pattern` member of the paint union. */\nexport type PatternFill = Extract<FillStyle, { fill: 'pattern' }>;\n\nconst TILES: readonly TilePatternSpec['tile'][] = ['hatch', 'crosshatch', 'dots', 'chunks'];\n\n/** Tile sizes the picker offers, coarse enough that each reads as a\n *  distinct texture rather than a nudge. */\nconst TILE_SIZES: readonly { value: number; label: string }[] = [\n  { value: 4, label: 'S' },\n  { value: 8, label: 'M' },\n  { value: 16, label: 'L' },\n  { value: 32, label: 'XL' },\n];\n\nconst DEFAULT_TILE_SIZE = 8;\n\n/** Every swatch previews at one size so the grid compares tiles, not scales. */\nconst PREVIEW_SIZE = 16;\n\n/** The spec a pattern paint carries, if it carries one. A consumer-built\n *  `TextureHandle` has no spec, so the picker shows no tile selected and\n *  replaces it wholesale on the next click. */\nfunction specOf(fill: PatternFill): TilePatternSpec | null {\n  return 'tile' in fill.pattern ? fill.pattern : null;\n}\n\n/**\n * A pattern seeded from a color. `units: 'bounds'` anchors the tile to the\n * node's box, so the texture travels with the shape.\n */\nexport function seedPattern(\n  tile: TilePatternSpec['tile'],\n  from: string,\n  size: number = DEFAULT_TILE_SIZE,\n): PatternFill {\n  const spec: TilePatternSpec = { tile, color: from, size };\n  // `chunks` is a scatter over a ground rather than a line texture; without a\n  // background it reads as loose specks on whatever sits beneath.\n  if (tile === 'chunks') spec.bg = '#00000000';\n  return { fill: 'pattern', pattern: spec, units: 'bounds' };\n}\n\n/** Props for {@link PatternPicker}. */\nexport interface PatternPickerProps {\n  /** The pattern paint being edited. */\n  value: PatternFill;\n  /** The color new tiles are seeded with — the paint's own, normally. */\n  color: string;\n  /** Committed value: one call per click. A tile pick and a size change are\n   *  each a complete gesture, so there is no `onInput`. */\n  onChange: (next: PatternFill) => void;\n  className?: string;\n}\n\n/**\n * Grid of tile swatches over a size switch, each swatch previewing the real\n * tile at the current color.\n *\n * The preview shares its shape mapper with what the renderer paints, so a\n * swatch cannot drift from the texture it selects.\n */\nexport function PatternPicker(props: PatternPickerProps): ReactElement {\n  const { value, color, onChange, className } = props;\n  const spec = specOf(value);\n  const size = spec?.size ?? DEFAULT_TILE_SIZE;\n\n  const pick = (tile: TilePatternSpec['tile']): void => {\n    onChange(seedPattern(tile, color, size));\n  };\n\n  const resize = (nextSize: number): void => {\n    if (!spec) return;\n    onChange({ ...value, pattern: { ...spec, size: nextSize } });\n  };\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      <div className={s.grid}>\n        {TILES.map((tile) => {\n          const preview: TilePatternSpec = { tile, color, size: PREVIEW_SIZE };\n          if (tile === 'chunks') preview.bg = '#00000000';\n          const selected = spec?.tile === tile;\n          return (\n            <button\n              key={tile}\n              type=\"button\"\n              className={[s.swatch, selected && s.swatchActive].filter(Boolean).join(' ')}\n              style={{ ['--tile-preview' as string]: tilePreviewCssUrl(preview) } as CSSProperties}\n              title={tile}\n              aria-label={tile}\n              aria-pressed={selected}\n              onClick={() => pick(tile)}\n            />\n          );\n        })}\n      </div>\n      <ToggleBar<number>\n        items={TILE_SIZES}\n        value={size}\n        size=\"sm\"\n        ariaLabel=\"Tile size\"\n        onChange={(v) => v != null && resize(v)}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;GCUMG,IAA4C;CAAC;CAAS;CAAc;CAAQ;AAAQ,GAIpFC,IAA0D;CAC9D;EAAE,OAAO;EAAG,OAAO;CAAI;CACvB;EAAE,OAAO;EAAG,OAAO;CAAI;CACvB;EAAE,OAAO;EAAI,OAAO;CAAI;CACxB;EAAE,OAAO;EAAI,OAAO;CAAK;AAC3B,GAEMC,IAAoB,GAGpBC,IAAe;AAKrB,SAASC,EAAO,GAA2C;CACzD,OAAO,UAAUC,EAAK,UAAUA,EAAK,UAAU;AACjD;AAMA,SAAgBC,EACd,GACA,GACA,IAAeJ,GACF;CACb,IAAMK,IAAwB;EAAE;EAAM,OAAOC;EAAM;CAAK;CAIxD,OADIC,MAAS,aAAU,EAAK,KAAK,cAC1B;EAAE,MAAM;EAAW,SAASF;EAAM,OAAO;CAAS;AAC3D;AAqBA,SAAgBG,EAAc,GAAyC;CACrE,IAAM,EAAE,UAAO,UAAO,aAAU,iBAAcC,GACxCJ,IAAOH,EAAOQ,CAAK,GACnBC,IAAON,GAAM,QAAQL,GAErBY,KAAQ,MAAwC;EACpD,EAASR,EAAYG,GAAMM,GAAOF,CAAI,CAAC;CACzC,GAEMG,KAAU,MAA2B;EACzC,AAAKT,KACLU,EAAS;GAAE,GAAGL;GAAO,SAAS;IAAE,GAAGL;IAAM,MAAMW;GAAS;EAAE,CAAC;CAC7D;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,CAACrB,EAAE,MAAMsB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAA5D,UAAA,CACE,kBAAC,OAAD;GAAK,WAAWtB,EAAE;GACf,UAAAG,EAAM,KAAK,MAAS;IACnB,IAAMoB,IAA2B;KAAE;KAAM;KAAO,MAAMjB;IAAa;IACnE,AAAIM,MAAS,aAAU,EAAQ,KAAK;IACpC,IAAMY,IAAWd,GAAM,SAASE;IAChC,OACE,kBAAC,UAAD;KAEE,MAAK;KACL,WAAW,CAACZ,EAAE,QAAQwB,KAAYxB,EAAE,YAAY,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;KAC1E,OAAO,EAAG,kBAA6ByB,EAAkBF,CAAO,EAAE;KAClE,OAAOX;KACP,cAAYA;KACZ,gBAAcY;KACd,eAAeP,EAAKL,CAAI;IACzB,GARMA,CAQN;GAEL,CAAC;EACE,CAAA,GACL,kBAACX,GAAD;GACE,OAAOG;GACP,OAAOY;GACP,MAAK;GACL,WAAU;GACV,WAAW,MAAMU,KAAK,QAAQP,EAAOO,CAAC;EACvC,CAAA,CACE;;AAET"}

package/dist/chunks/{PointPlotter-Bxo6haKe.js → PointPlotter-ldI4RrU1.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./CurveEditor-BDJXjEvK.js";
+import { n as e } from "./CurveEditor-DUVjd25R.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/PointPlotter/PointPlotter.tsx
 function n(n) {
@@ -14,4 +14,4 @@ function n(n) {
 //#endregion
 export { n as t };
 
-//# sourceMappingURL=PointPlotter-Bxo6haKe.js.map
+//# sourceMappingURL=PointPlotter-ldI4RrU1.js.map

package/dist/chunks/{PointPlotter-Bxo6haKe.js.map → PointPlotter-ldI4RrU1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PointPlotter-Bxo6haKe.js","names":["CurveEditor","PointPlotter","curveProps","props"],"sources":["../../src/components/PointPlotter/PointPlotter.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport {\n  CurveEditor,\n  type AnchorRenderProps,\n  type ControlPoint,\n  type CurveEditorProps,\n} from '../CurveEditor';\nimport type { GridSettings, AxesSettings, TickSettings } from '../Plot2D';\n\n/** Props for {@link PointPlotter}. */\nexport interface PointPlotterProps {\n  /** Plotted points; caller-owned. */\n  value: readonly ControlPoint[];\n  /** Fires every frame during drag with the live in-flight value. */\n  onInput: (next: ControlPoint[]) => void;\n  /** Fires once per discrete user action (drag-end, add, delete) with\n   *  the new value and the value at gesture start. Wire history here. */\n  onChange?: (next: ControlPoint[], prev: readonly ControlPoint[]) => void;\n  /** Model-space x range. Default [0, 1]. */\n  xRange?: readonly [number, number];\n  /** Model-space y range. Default [0, 1]. */\n  yRange?: readonly [number, number];\n  width: number;\n  height: number;\n  grid?: GridSettings | false | null;\n  axes?: AxesSettings | false | null;\n  xTicks?: TickSettings | false | null;\n  yTicks?: TickSettings | false | null;\n  /** Minimum allowed point count. User-initiated deletion is refused\n   *  while `value.length <= minPoints`. */\n  minPoints?: number;\n  /** Maximum allowed point count. User-initiated insertion is refused\n   *  while `value.length >= maxPoints`. */\n  maxPoints?: number;\n  /** How new points are added. Default `'click-empty'`. Set to `'never'`\n   *  to disable insertion entirely. */\n  addPointMode?: 'click-empty' | 'never';\n  /** Built-in undo/redo via keyboard when the component has focus.\n   *  Default `true`. See `CurveEditor.history` for details. */\n  history?: boolean;\n  /** Custom per-anchor renderer. See `CurveEditor.renderAnchor`. */\n  renderAnchor?: (info: AnchorRenderProps) => ReactNode;\n  /** Extra SVG content beneath the anchors. See `CurveEditor.decorations`. */\n  decorations?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * 2D point plotter — a CurveEditor with the curve hidden. Anchors,\n * drag, shift+click delete, right-click delete, and click-empty insert\n * are inherited from CurveEditor verbatim, so the two components share\n * gesture semantics and stay in sync as CurveEditor evolves.\n *\n * Differences from CurveEditor: no curve `<path>` drawn, no fill, no\n * endpoint pinning, no interpolation, default `addPointMode` is\n * `'click-empty'` (CurveEditor defaults to `'click-curve'`, which\n * doesn't make sense without a curve to hit-test against).\n */\nexport function PointPlotter(props: PointPlotterProps) {\n  const curveProps: CurveEditorProps = {\n    ...props,\n    addPointMode: props.addPointMode ?? 'click-empty',\n    curve: false,\n    fill: false,\n    endpoints: 'free',\n  };\n  return <CurveEditor {...curveProps} />;\n}\n"],"mappings":";;;AA2DA,SAAgBC,EAAa,GAA0B;CACrD,IAAMC,IAA+B;EACnC,GAAGC;EACH,cAAcA,EAAM,gBAAgB;EACpC,OAAO;EACP,MAAM;EACN,WAAW;CACb;CACA,OAAO,kBAACH,GAAD,EAAa,GAAIE,EAAa,CAAA;AACvC"}
+{"version":3,"file":"PointPlotter-ldI4RrU1.js","names":["CurveEditor","PointPlotter","curveProps","props"],"sources":["../../src/components/PointPlotter/PointPlotter.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport {\n  CurveEditor,\n  type AnchorRenderProps,\n  type ControlPoint,\n  type CurveEditorProps,\n} from '../CurveEditor';\nimport type { GridSettings, AxesSettings, TickSettings } from '../Plot2D';\n\n/** Props for {@link PointPlotter}. */\nexport interface PointPlotterProps {\n  /** Plotted points; caller-owned. */\n  value: readonly ControlPoint[];\n  /** Fires every frame during drag with the live in-flight value. */\n  onInput: (next: ControlPoint[]) => void;\n  /** Fires once per discrete user action (drag-end, add, delete) with\n   *  the new value and the value at gesture start. Wire history here. */\n  onChange?: (next: ControlPoint[], prev: readonly ControlPoint[]) => void;\n  /** Model-space x range. Default [0, 1]. */\n  xRange?: readonly [number, number];\n  /** Model-space y range. Default [0, 1]. */\n  yRange?: readonly [number, number];\n  width: number;\n  height: number;\n  grid?: GridSettings | false | null;\n  axes?: AxesSettings | false | null;\n  xTicks?: TickSettings | false | null;\n  yTicks?: TickSettings | false | null;\n  /** Minimum allowed point count. User-initiated deletion is refused\n   *  while `value.length <= minPoints`. */\n  minPoints?: number;\n  /** Maximum allowed point count. User-initiated insertion is refused\n   *  while `value.length >= maxPoints`. */\n  maxPoints?: number;\n  /** How new points are added. Default `'click-empty'`. Set to `'never'`\n   *  to disable insertion entirely. */\n  addPointMode?: 'click-empty' | 'never';\n  /** Built-in undo/redo via keyboard when the component has focus.\n   *  Default `true`. See `CurveEditor.history` for details. */\n  history?: boolean;\n  /** Custom per-anchor renderer. See `CurveEditor.renderAnchor`. */\n  renderAnchor?: (info: AnchorRenderProps) => ReactNode;\n  /** Extra SVG content beneath the anchors. See `CurveEditor.decorations`. */\n  decorations?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * 2D point plotter — a CurveEditor with the curve hidden. Anchors,\n * drag, shift+click delete, right-click delete, and click-empty insert\n * are inherited from CurveEditor verbatim, so the two components share\n * gesture semantics and stay in sync as CurveEditor evolves.\n *\n * Differences from CurveEditor: no curve `<path>` drawn, no fill, no\n * endpoint pinning, no interpolation, default `addPointMode` is\n * `'click-empty'` (CurveEditor defaults to `'click-curve'`, which\n * doesn't make sense without a curve to hit-test against).\n */\nexport function PointPlotter(props: PointPlotterProps) {\n  const curveProps: CurveEditorProps = {\n    ...props,\n    addPointMode: props.addPointMode ?? 'click-empty',\n    curve: false,\n    fill: false,\n    endpoints: 'free',\n  };\n  return <CurveEditor {...curveProps} />;\n}\n"],"mappings":";;;AA2DA,SAAgBC,EAAa,GAA0B;CACrD,IAAMC,IAA+B;EACnC,GAAGC;EACH,cAAcA,EAAM,gBAAgB;EACpC,OAAO;EACP,MAAM;EACN,WAAW;CACb;CACA,OAAO,kBAACH,GAAD,EAAa,GAAIE,EAAa,CAAA;AACvC"}

package/dist/chunks/{Powerline-ExO5GwEr.js → Powerline-DNyH885r.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./Badge-CyAIZSDo.js";
+import { t as e } from "./Badge-D2aD7xVL.js";
 import { jsx as t } from "react/jsx-runtime";
 var n = {
 	row: "_row_1a09e_1",
@@ -39,4 +39,4 @@ function r({ segments: r, startCap: i = "flat", size: a, variant: o, depth: s, g
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=Powerline-ExO5GwEr.js.map
+//# sourceMappingURL=Powerline-DNyH885r.js.map

package/dist/chunks/{Powerline-ExO5GwEr.js.map → Powerline-DNyH885r.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Powerline-ExO5GwEr.js","names":["s","Badge","Powerline_module_default","Powerline","rest","cls","className","style","gap","segments","leftEdge","i","startCap","rightEdge","seg","depth","variant","size"],"sources":["../../src/components/Powerline/Powerline.module.css","../../src/components/Powerline/Powerline.tsx"],"sourcesContent":[".row {\n  display: inline-flex;\n  align-items: stretch;\n  gap: var(--powerline-gap, 0.2em);\n}\n\n.matrix {\n  display: grid;\n  gap: var(--wzl-space-6);\n}\n\n/* Reset Badge's opinionated text defaults — Powerline segments should pick up\n * the surrounding text style instead of forcing uppercase / 10px / extra\n * tracking. Consumers can still override via className on Powerline. */\n.segment {\n  font-size: inherit;\n  text-transform: none;\n  letter-spacing: normal;\n}\n","import type { CSSProperties, ReactNode } from 'react';\nimport { Badge } from '../Badge/Badge';\nimport type { BadgeSize, BadgeStatus, BadgeVariant } from '../Badge/types';\nimport type { StanceProps } from '../stance';\nimport type { EdgeCap } from '../Badge/bases/edgeProfiles';\nimport s from './Powerline.module.css';\n\n/**\n * One segment of a {@link Powerline}. Giving it `onClick` or `href` makes it\n * interactive, the same way it does on a `Badge`.\n */\nexport interface PowerlineSegment extends StanceProps {\n  text: ReactNode;\n  /** Cap on this segment's right edge. Next segment's left edge adopts the same profile. */\n  endCap?: EdgeCap;\n  status?: BadgeStatus;\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  onClick?: () => void;\n  href?: string;\n  'aria-label'?: string;\n}\n\n/** Props for {@link Powerline}. */\nexport interface PowerlineProps {\n  segments: PowerlineSegment[];\n  /** Left edge of the first segment. Defaults to 'flat'. */\n  startCap?: EdgeCap;\n  /** Default size for every segment (per-segment `size` wins). */\n  size?: BadgeSize;\n  /** Default variant for every segment (per-segment `variant` wins). */\n  variant?: BadgeVariant;\n  /** Protrusion depth in CSS px, passed through to every segment's base. */\n  depth?: number;\n  /** Visible gap between adjacent segments. Number → px; string → literal CSS length.\n   *  Default: `0.2em` (scales with the row's font size). Pass `0` for flush. */\n  gap?: number | string;\n  className?: string;\n  'aria-label'?: string;\n}\n\n/**\n * A row of chevron-linked badge segments, in the style of a shell powerline\n * prompt. Each segment's `endCap` shapes both its own right edge and the next\n * segment's left edge, so the run reads as one continuous chain.\n *\n * Built for showing a path through a sequence of steps — the inspector uses\n * it to display how input routes from tool to gesture to action to target.\n */\nexport function Powerline({\n  segments,\n  startCap = 'flat',\n  size,\n  variant,\n  depth,\n  gap,\n  className,\n  ...rest\n}: PowerlineProps) {\n  const cls = [s.row, className].filter(Boolean).join(' ');\n  const style: CSSProperties | undefined = gap !== undefined\n    ? { ['--powerline-gap' as never]: typeof gap === 'number' ? `${gap}px` : gap }\n    : undefined;\n  return (\n    <span className={cls} style={style} aria-label={rest['aria-label']}>\n      {segments.map((seg, i) => {\n        const leftEdge: EdgeCap = i === 0 ? startCap : (segments[i - 1].endCap ?? 'flat');\n        const rightEdge: EdgeCap = seg.endCap ?? 'flat';\n        return (\n          <Badge\n            key={i}\n            base=\"powerline\"\n            baseParams={{ leftEdge, rightEdge, ...(depth !== undefined && { depth }) }}\n            status={seg.status}\n            stance={seg.stance}\n            tone={seg.tone}\n            variant={seg.variant ?? variant}\n            size={seg.size ?? size}\n            onClick={seg.onClick}\n            href={seg.href}\n            aria-label={seg['aria-label']}\n            className={s.segment}\n          >\n            {seg.text}\n          </Badge>\n        );\n      })}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;ACiDA,SAAgBG,EAAU,EACxB,aACA,cAAW,QACX,SACA,YACA,UACA,QACA,cACA,GAAGC,KACc;CACjB,IAAMC,IAAM,CAACL,EAAE,KAAKM,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GACjDC,IAAmCC,MAAQ,KAAA,IAE7C,KAAA,IADA,EAAG,mBAA6B,OAAOA,KAAQ,WAAW,GAAGA,EAAI,MAAMA,EAAI;CAE/E,OACE,kBAAC,QAAD;EAAM,WAAWH;EAAY;EAAO,cAAYD,EAAK;EAClD,UAAAK,EAAS,KAAK,GAAK,MAAM;GACxB,IAAMC,IAAoBC,MAAM,IAAIC,IAAYH,EAASE,IAAI,EAAE,CAAC,UAAU,QACpEE,IAAqBC,EAAI,UAAU;GACzC,OACE,kBAACb,GAAD;IAEE,MAAK;IACL,YAAY;KAAE;KAAU;KAAW,GAAIc,MAAU,KAAA,KAAa,EAAE,SAAM;IAAG;IACzE,QAAQD,EAAI;IACZ,QAAQA,EAAI;IACZ,MAAMA,EAAI;IACV,SAASA,EAAI,WAAWE;IACxB,MAAMF,EAAI,QAAQG;IAClB,SAASH,EAAI;IACb,MAAMA,EAAI;IACV,cAAYA,EAAI;IAChB,WAAWd,EAAE;IAEZ,UAAAc,EAAI;GACA,GAdAH,CAcA;EAEX,CAAC;CACG,CAAA;AAEV"}
+{"version":3,"file":"Powerline-DNyH885r.js","names":["s","Badge","Powerline_module_default","Powerline","rest","cls","className","style","gap","segments","leftEdge","i","startCap","rightEdge","seg","depth","variant","size"],"sources":["../../src/components/Powerline/Powerline.module.css","../../src/components/Powerline/Powerline.tsx"],"sourcesContent":[".row {\n  display: inline-flex;\n  align-items: stretch;\n  gap: var(--powerline-gap, 0.2em);\n}\n\n.matrix {\n  display: grid;\n  gap: var(--wzl-space-6);\n}\n\n/* Reset Badge's opinionated text defaults — Powerline segments should pick up\n * the surrounding text style instead of forcing uppercase / 10px / extra\n * tracking. Consumers can still override via className on Powerline. */\n.segment {\n  font-size: inherit;\n  text-transform: none;\n  letter-spacing: normal;\n}\n","import type { CSSProperties, ReactNode } from 'react';\nimport { Badge } from '../Badge/Badge';\nimport type { BadgeSize, BadgeStatus, BadgeVariant } from '../Badge/types';\nimport type { StanceProps } from '../stance';\nimport type { EdgeCap } from '../Badge/bases/edgeProfiles';\nimport s from './Powerline.module.css';\n\n/**\n * One segment of a {@link Powerline}. Giving it `onClick` or `href` makes it\n * interactive, the same way it does on a `Badge`.\n */\nexport interface PowerlineSegment extends StanceProps {\n  text: ReactNode;\n  /** Cap on this segment's right edge. Next segment's left edge adopts the same profile. */\n  endCap?: EdgeCap;\n  status?: BadgeStatus;\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  onClick?: () => void;\n  href?: string;\n  'aria-label'?: string;\n}\n\n/** Props for {@link Powerline}. */\nexport interface PowerlineProps {\n  segments: PowerlineSegment[];\n  /** Left edge of the first segment. Defaults to 'flat'. */\n  startCap?: EdgeCap;\n  /** Default size for every segment (per-segment `size` wins). */\n  size?: BadgeSize;\n  /** Default variant for every segment (per-segment `variant` wins). */\n  variant?: BadgeVariant;\n  /** Protrusion depth in CSS px, passed through to every segment's base. */\n  depth?: number;\n  /** Visible gap between adjacent segments. Number → px; string → literal CSS length.\n   *  Default: `0.2em` (scales with the row's font size). Pass `0` for flush. */\n  gap?: number | string;\n  className?: string;\n  'aria-label'?: string;\n}\n\n/**\n * A row of chevron-linked badge segments, in the style of a shell powerline\n * prompt. Each segment's `endCap` shapes both its own right edge and the next\n * segment's left edge, so the run reads as one continuous chain.\n *\n * Built for showing a path through a sequence of steps — the inspector uses\n * it to display how input routes from tool to gesture to action to target.\n */\nexport function Powerline({\n  segments,\n  startCap = 'flat',\n  size,\n  variant,\n  depth,\n  gap,\n  className,\n  ...rest\n}: PowerlineProps) {\n  const cls = [s.row, className].filter(Boolean).join(' ');\n  const style: CSSProperties | undefined = gap !== undefined\n    ? { ['--powerline-gap' as never]: typeof gap === 'number' ? `${gap}px` : gap }\n    : undefined;\n  return (\n    <span className={cls} style={style} aria-label={rest['aria-label']}>\n      {segments.map((seg, i) => {\n        const leftEdge: EdgeCap = i === 0 ? startCap : (segments[i - 1].endCap ?? 'flat');\n        const rightEdge: EdgeCap = seg.endCap ?? 'flat';\n        return (\n          <Badge\n            key={i}\n            base=\"powerline\"\n            baseParams={{ leftEdge, rightEdge, ...(depth !== undefined && { depth }) }}\n            status={seg.status}\n            stance={seg.stance}\n            tone={seg.tone}\n            variant={seg.variant ?? variant}\n            size={seg.size ?? size}\n            onClick={seg.onClick}\n            href={seg.href}\n            aria-label={seg['aria-label']}\n            className={s.segment}\n          >\n            {seg.text}\n          </Badge>\n        );\n      })}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;ACiDA,SAAgBG,EAAU,EACxB,aACA,cAAW,QACX,SACA,YACA,UACA,QACA,cACA,GAAGC,KACc;CACjB,IAAMC,IAAM,CAACL,EAAE,KAAKM,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GACjDC,IAAmCC,MAAQ,KAAA,IAE7C,KAAA,IADA,EAAG,mBAA6B,OAAOA,KAAQ,WAAW,GAAGA,EAAI,MAAMA,EAAI;CAE/E,OACE,kBAAC,QAAD;EAAM,WAAWH;EAAY;EAAO,cAAYD,EAAK;EAClD,UAAAK,EAAS,KAAK,GAAK,MAAM;GACxB,IAAMC,IAAoBC,MAAM,IAAIC,IAAYH,EAASE,IAAI,EAAE,CAAC,UAAU,QACpEE,IAAqBC,EAAI,UAAU;GACzC,OACE,kBAACb,GAAD;IAEE,MAAK;IACL,YAAY;KAAE;KAAU;KAAW,GAAIc,MAAU,KAAA,KAAa,EAAE,SAAM;IAAG;IACzE,QAAQD,EAAI;IACZ,QAAQA,EAAI;IACZ,MAAMA,EAAI;IACV,SAASA,EAAI,WAAWE;IACxB,MAAMF,EAAI,QAAQG;IAClB,SAASH,EAAI;IACb,MAAMA,EAAI;IACV,cAAYA,EAAI;IAChB,WAAWd,EAAE;IAEZ,UAAAc,EAAI;GACA,GAdAH,CAcA;EAEX,CAAC;CACG,CAAA;AAEV"}

package/dist/chunks/{Prefs-DpqFKiwY.js → Prefs-ByA-x51i.js}

@@ -1,8 +1,8 @@
-import { t as e } from "./Dialog-BWyNMgpf.js";
-import { o as t, t as n } from "./PropertyField-DGCecAnV.js";
+import { t as e } from "./Dialog-DGFutQ--.js";
+import { o as t, t as n } from "./PropertyField-DfIJJ5GS.js";
 import { t as r } from "./Input-CHmkfYaD.js";
 import { t as i } from "./useRovingTabIndex-Bp_hYm_h.js";
-import { a, n as o, o as s, r as c, s as l, t as u } from "./prefField-Dnl7nmjQ.js";
+import { a, n as o, o as s, r as c, s as l, t as u } from "./prefField-BopW9bjx.js";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 import { useCallback as m, useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
 //#region src/useScrollSpy.ts
@@ -120,7 +120,6 @@ function w({ ctx: e, path: n, pref: r }) {
 		label: r.name,
 		description: r.description,
 		layout: "inline",
-		chrome: "framed",
 		className: C.row,
 		children: /* @__PURE__ */ f("span", {
 			className: C.rowControl,
@@ -130,26 +129,40 @@ function w({ ctx: e, path: n, pref: r }) {
 }
 function T(e, t) {
 	let { pref: r, value: i, setValue: a } = e;
-	if (r.kind === "object") return /* @__PURE__ */ f(E, { ctx: e });
+	if (r.kind === "object") return /* @__PURE__ */ f(D, { ctx: e });
 	let o = u(r, {
 		value: i,
 		siblings: t,
 		setValue: a
 	});
-	return o === null ? /* @__PURE__ */ p("span", {
+	if (o === null) return /* @__PURE__ */ p("span", {
 		className: C.unrenderable,
 		children: [
 			"(",
 			r.kind,
 			": no renderer)"
 		]
-	}) : /* @__PURE__ */ f(n, {
-		...o,
-		chrome: "framed",
-		name: r.name
 	});
+	switch (o.kind) {
+		case "number": return /* @__PURE__ */ f(n, {
+			...o,
+			name: r.name,
+			onInput: E,
+			steppers: o.accepts === void 0
+		});
+		case "color": return /* @__PURE__ */ f(n, {
+			...o,
+			name: r.name,
+			onInput: E
+		});
+		default: return /* @__PURE__ */ f(n, {
+			...o,
+			name: r.name
+		});
+	}
 }
-function E({ ctx: e }) {
+var E = () => {};
+function D({ ctx: e }) {
 	let n = e.pref, { value: r, setValue: i } = e, a = typeof r == "object" && r ? r : void 0, o = (s) => {
 		let l = [];
 		for (let [u, d] of Object.entries(s)) {
@@ -165,7 +178,6 @@ function E({ ctx: e }) {
 			l.push(/* @__PURE__ */ f(t, {
 				label: d.name,
 				layout: "inline",
-				chrome: "framed",
 				className: C.objectRow,
 				children: /* @__PURE__ */ f("span", {
 					className: C.rowControl,
@@ -195,7 +207,7 @@ function E({ ctx: e }) {
 }
 //#endregion
 //#region src/components/Prefs/PrefsPane.tsx
-function D(e) {
+function O(e) {
 	let { ctx: t, group: n, path: r, scrollRef: i, className: a } = e, o = Object.entries(n.children).filter((e) => c(e[1])), s = Object.entries(n.children).filter((e) => !c(e[1])), l = (e) => r === "" ? e : `${r}.${e}`;
 	return /* @__PURE__ */ p("div", {
 		className: [C.pane, a].filter(Boolean).join(" "),
@@ -219,7 +231,7 @@ function D(e) {
 					pref: n
 				}, e))
 			}),
-			s.map(([e, n]) => /* @__PURE__ */ f(O, {
+			s.map(([e, n]) => /* @__PURE__ */ f(k, {
 				ctx: t,
 				group: n,
 				path: l(e),
@@ -228,7 +240,7 @@ function D(e) {
 		]
 	});
 }
-function O({ ctx: e, group: t, path: n, depth: r }) {
+function k({ ctx: e, group: t, path: n, depth: r }) {
 	let i = r === 0 ? "h4" : "h5";
 	return /* @__PURE__ */ p("section", {
 		className: r === 0 ? C.paneSection : C.paneSubsection,
@@ -251,7 +263,7 @@ function O({ ctx: e, group: t, path: n, depth: r }) {
 						ctx: e,
 						path: a,
 						pref: i
-					}, t) : /* @__PURE__ */ f(O, {
+					}, t) : /* @__PURE__ */ f(k, {
 						ctx: e,
 						group: i,
 						path: a,
@@ -264,7 +276,7 @@ function O({ ctx: e, group: t, path: n, depth: r }) {
 }
 //#endregion
 //#region src/components/Prefs/PrefsRail.tsx
-function k(e) {
+function A(e) {
 	let { items: t, section: n, current: r, onOpen: a, onScrollTo: o, ariaLabel: s, header: c, showCounts: l } = e, u = (e) => {
 		let n = t[e];
 		n && (n.depth === 0 ? a(n.path) : o(n.path));
@@ -307,7 +319,7 @@ function k(e) {
 }
 //#endregion
 //#region src/components/Prefs/PrefsForm.tsx
-function A(e) {
+function j(e) {
 	let { schema: t, values: n, onChange: i, renderers: a, showHidden: s = !1, layout: u = "columns", filterable: d = !1, className: m } = e, [h, _] = v(""), y = g(() => {
 		let e = l(t, s);
 		return e === null ? null : o(e, h);
@@ -328,7 +340,7 @@ function A(e) {
 			placeholder: "Filter settings"
 		})
 	}) : null;
-	return u === "rail" ? /* @__PURE__ */ f(j, {
+	return u === "rail" ? /* @__PURE__ */ f(M, {
 		...e,
 		root: y,
 		ctx: b,
@@ -337,7 +349,7 @@ function A(e) {
 		onClearFilter: () => _("")
 	}) : /* @__PURE__ */ p("div", {
 		className: [C.columnsLayout, m].filter(Boolean).join(" "),
-		children: [x, y === null ? /* @__PURE__ */ f(N, {
+		children: [x, y === null ? /* @__PURE__ */ f(P, {
 			query: h,
 			onClear: () => _("")
 		}) : /* @__PURE__ */ f("div", {
@@ -348,7 +360,7 @@ function A(e) {
 					ctx: b,
 					path: e,
 					pref: t
-				}) : /* @__PURE__ */ f(P, {
+				}) : /* @__PURE__ */ f(F, {
 					ctx: b,
 					group: t,
 					path: e,
@@ -358,16 +370,16 @@ function A(e) {
 		})]
 	});
 }
-function j(e) {
+function M(e) {
 	let { schema: t, root: n, ctx: r, query: i, filterField: o, onClearFilter: s, className: c } = e, l = g(() => n === null ? [] : a(n), [n]), [u, d] = v(() => e.defaultSection ?? ""), m = e.section ?? u, h = l.some((e) => e.path === m && e.depth === 0) ? m : l.find((e) => e.depth === 0)?.path ?? "", y = _(null), b = x({
 		rootRef: y,
 		ids: g(() => l.filter((e) => e.depth === 1 && e.section === h).map((e) => e.path), [l, h])
 	}), S = (t) => {
 		e.section === void 0 && d(t), e.onSectionChange?.(t), y.current?.scrollTo?.({ top: 0 });
-	}, w = n === null ? null : M(n, h, t.name);
+	}, w = n === null ? null : N(n, h, t.name);
 	return /* @__PURE__ */ p("div", {
 		className: [C.railLayout, c].filter(Boolean).join(" "),
-		children: [/* @__PURE__ */ f(k, {
+		children: [/* @__PURE__ */ f(A, {
 			items: l,
 			section: h,
 			current: b.active,
@@ -378,11 +390,11 @@ function j(e) {
 			showCounts: i.trim() !== ""
 		}), w === null ? /* @__PURE__ */ f("div", {
 			className: C.pane,
-			children: /* @__PURE__ */ f(N, {
+			children: /* @__PURE__ */ f(P, {
 				query: i,
 				onClear: s
 			})
-		}) : /* @__PURE__ */ f(D, {
+		}) : /* @__PURE__ */ f(O, {
 			ctx: r,
 			group: w,
 			path: h,
@@ -390,7 +402,7 @@ function j(e) {
 		})]
 	});
 }
-function M(e, t, n) {
+function N(e, t, n) {
 	if (t === "") {
 		let t = Object.fromEntries(Object.entries(e.children).filter(([, e]) => c(e)));
 		return Object.keys(t).length === 0 ? null : {
@@ -407,7 +419,7 @@ function M(e, t, n) {
 	}
 	return r ?? null;
 }
-function N({ query: e, onClear: t }) {
+function P({ query: e, onClear: t }) {
 	return /* @__PURE__ */ p("div", {
 		className: C.noMatches,
 		children: [/* @__PURE__ */ p("p", { children: [
@@ -422,7 +434,7 @@ function N({ query: e, onClear: t }) {
 		})]
 	});
 }
-function P({ ctx: e, group: t, path: n, depth: r }) {
+function F({ ctx: e, group: t, path: n, depth: r }) {
 	return /* @__PURE__ */ p("div", {
 		className: r === 0 ? C.panel : C.subpanel,
 		children: [/* @__PURE__ */ p("div", {
@@ -442,7 +454,7 @@ function P({ ctx: e, group: t, path: n, depth: r }) {
 					ctx: e,
 					path: a,
 					pref: i
-				}, t) : /* @__PURE__ */ f(P, {
+				}, t) : /* @__PURE__ */ f(F, {
 					ctx: e,
 					group: i,
 					path: a,
@@ -454,7 +466,7 @@ function P({ ctx: e, group: t, path: n, depth: r }) {
 }
 //#endregion
 //#region src/components/Prefs/PrefsDialog.tsx
-function F(t) {
+function I(t) {
 	let { isOpen: n, onOpenChange: r, title: i, headerExtra: a, footer: o, dialogClassName: s, ...c } = t, l = c.layout === "rail";
 	return /* @__PURE__ */ f(e, {
 		isOpen: n,
@@ -467,10 +479,10 @@ function F(t) {
 			className: C.titleRow,
 			children: [/* @__PURE__ */ f("span", { children: i ?? c.schema.name }), a]
 		}),
-		children: /* @__PURE__ */ f(A, { ...c })
+		children: /* @__PURE__ */ f(j, { ...c })
 	});
 }
 //#endregion
-export { y as a, D as i, A as n, x as o, k as r, F as t };
+export { y as a, O as i, j as n, x as o, A as r, I as t };
 
-//# sourceMappingURL=Prefs-DpqFKiwY.js.map
+//# sourceMappingURL=Prefs-ByA-x51i.js.map