@weasel-js/ui 1.6.0 → 1.7.0

package/dist/chunks/FallthroughDiagram-BEHiM5IS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FallthroughDiagram-BEHiM5IS.js","names":["_Fragment","s","Badge","keySpecFromKey","KeyCap","keySpecsFromMods","GestureRoute","FallthroughDiagram_module_default","placedByLabel","p","walkLabel","w","Fragment","isWinner","MOD_ORDER","InputLine","mods","input","m","KeySequence","predicted","Routes","candidate","r","Stage","id","useId","filter","title","note","children","MatchedStage","matched","Code","c","i","dropReason","d","FilterBand","mine","dropped","RankedStage","ranked","winner","FallthroughDiagram","cls","className","record"],"sources":["../../src/components/FallthroughDiagram/FallthroughDiagram.module.css","../../src/components/FallthroughDiagram/FallthroughDiagram.tsx"],"sourcesContent":[".diagram {\n  display: grid;\n  gap: var(--wzl-space-3);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-sm);\n}\n\n.input {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--wzl-space-2) var(--wzl-space-4);\n  margin: 0;\n  color: var(--wzl-fg-muted);\n}\n.field { display: flex; align-items: baseline; gap: var(--wzl-space-1); }\n.field dt { margin: 0; }\n.field dd {\n  margin: 0;\n  color: var(--wzl-fg);\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.stage {\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  background: var(--wzl-surface);\n  padding: var(--wzl-space-2) var(--wzl-space-3);\n  /* Ids and rules do not wrap mid-word; a narrow host scrolls the stage instead. */\n  overflow-x: auto;\n}\n.stage[data-filter] { background: var(--wzl-surface-sunken); }\n\n.stageTitle {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--wzl-space-2);\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n}\n.stageTitle + .table { margin-top: var(--wzl-space-2); }\n.note { color: var(--wzl-fg-muted); font-weight: var(--wzl-font-weight-medium); }\n\n.table { width: 100%; border-collapse: collapse; }\n.table th {\n  text-align: start;\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-xs);\n  font-weight: var(--wzl-font-weight-bold);\n  padding: var(--wzl-space-1) var(--wzl-space-2);\n}\n.table td {\n  padding: var(--wzl-space-1) var(--wzl-space-2);\n  border-top: 1px solid var(--wzl-border);\n  vertical-align: top;\n  white-space: nowrap;\n}\n\n.table code { white-space: nowrap; overflow-wrap: normal; }\n\n.routes { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--wzl-space-1); }\n\n.num {\n  font-family: var(--wzl-font-mono);\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n  white-space: nowrap;\n}\n\n.muted { color: var(--wzl-fg-muted); }\n\n.walk { color: var(--wzl-fg-muted); }\n.walk[data-walk='fired'],\n.walk[data-walk='would-fire'] { color: var(--wzl-success); font-weight: var(--wzl-font-weight-bold); }\n.walk[data-walk='declined'],\n.walk[data-walk='empty-handle'],\n.walk[data-walk='misbound'],\n.walk[data-walk='no-such-action'] { color: var(--wzl-fg); }\n\n.winner td { background: color-mix(in srgb, var(--wzl-success) 12%, transparent); }\n.winner td:first-child { box-shadow: inset 3px 0 var(--wzl-success); }\n\n.nothing { margin: 0; color: var(--wzl-fg-muted); }\n","import { useId, type ReactNode } from 'react';\nimport type {\n  DispatchRecord,\n  DispatchRecordInput,\n  DroppedCandidate,\n  PlacedBy,\n  RankedCandidate,\n  RecordCandidate,\n  WalkStep,\n} from '@weasel-js/core/routing';\nimport { Badge } from '../Badge';\nimport { Code } from '../Code';\nimport { GestureRoute } from '../GestureRoute';\nimport { KeyCap, KeySequence, keySpecFromKey, keySpecsFromMods, type LogicalModSpec } from '../Keycaps';\nimport s from './FallthroughDiagram.module.css';\n\nfunction placedByLabel(p: PlacedBy): string {\n  return p.step === 'specificity' ? `specificity · ${p.part}` : p.step;\n}\n\nfunction walkLabel(w: WalkStep): ReactNode {\n  switch (w.kind) {\n    case 'fired': return 'fired';\n    case 'would-fire': return 'would fire';\n    case 'declined': return <>declined: {w.reason}</>;\n    case 'empty-handle': return 'empty handle';\n    case 'misbound': return 'misbound';\n    case 'duplicate': return 'duplicate';\n    case 'no-such-action': return 'no such action';\n    case 'not-asked': return 'not asked';\n    case 'outranked': return 'outranked';\n  }\n}\n\nconst isWinner = (w: WalkStep) => w.kind === 'fired' || w.kind === 'would-fire';\n\nconst MOD_ORDER = ['shift', 'alt', 'ctrl', 'meta'] as const;\n\nfunction InputLine({ input, predicted }: { input: DispatchRecordInput; predicted: boolean }) {\n  const mods: LogicalModSpec[] = MOD_ORDER.filter((m) => input.modifiers[m]).map((name) => ({ name }));\n  return (\n    <dl className={s.input} aria-label=\"Input\">\n      <div className={s.field}>\n        <dt>Event</dt>\n        <dd>{input.eventKind}</dd>\n      </div>\n      {input.key !== undefined && (\n        <div className={s.field}>\n          <dt>Key</dt>\n          <dd data-key={input.key}>\n            <KeyCap label={keySpecFromKey(input.key, { legend: 'text' }).label} variant=\"minimal\" />\n          </dd>\n        </div>\n      )}\n      <div className={s.field}>\n        <dt>Modifiers</dt>\n        <dd>{mods.length > 0 ? <KeySequence keys={keySpecsFromMods(mods)} variant=\"minimal\" /> : 'none'}</dd>\n      </div>\n      {input.viewId !== null && (\n        <div className={s.field}>\n          <dt>View</dt>\n          <dd>{input.viewId}</dd>\n        </div>\n      )}\n      {input.mode !== undefined && (\n        <div className={s.field}>\n          <dt>Mode</dt>\n          <dd>{input.mode}</dd>\n        </div>\n      )}\n      {predicted && (\n        <div className={s.field}>\n          <dd><Badge size=\"xs\" status=\"accent\" variant=\"subtle\">predicted</Badge></dd>\n        </div>\n      )}\n    </dl>\n  );\n}\n\nfunction Routes({ candidate }: { candidate: RecordCandidate }) {\n  return (\n    <span className={s.routes}>\n      {candidate.routes.map((r) => <GestureRoute key={r} route={r} size=\"sm\" />)}\n    </span>\n  );\n}\n\nfunction Stage({ title, note, filter, children }: {\n  title: string;\n  note?: ReactNode;\n  filter?: DroppedCandidate['filter'];\n  children?: ReactNode;\n}) {\n  const id = useId();\n  return (\n    <section className={s.stage} aria-labelledby={id} data-filter={filter}>\n      <h3 className={s.stageTitle}>\n        <span id={id}>{title}</span>\n        {note && <span className={s.note}>{note}</span>}\n      </h3>\n      {children}\n    </section>\n  );\n}\n\nfunction MatchedStage({ matched }: { matched: readonly RecordCandidate[] }) {\n  return (\n    <Stage title=\"Matched\" note=\"every binding that fits the input\">\n      <table className={s.table}>\n        <thead>\n          <tr><th>Action</th><th>Route</th><th>Owner</th><th>Tier</th></tr>\n        </thead>\n        <tbody>\n          {matched.map((c, i) => (\n            <tr key={i}>\n              <td><Code size=\"sm\">{c.actionId}</Code></td>\n              <td><Routes candidate={c} /></td>\n              <td className={c.ownerId === null ? s.muted : undefined}>{c.ownerId ?? 'action'}</td>\n              <td>{c.scope}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </Stage>\n  );\n}\n\nfunction dropReason(d: DroppedCandidate): ReactNode {\n  if (d.filter === 'ineligible') return <><Code size=\"sm\" variant=\"plain\">{d.rule}</Code> does not hold</>;\n  return d.owner !== undefined\n    ? <>barred by the exclusive claim of <Code size=\"sm\" variant=\"plain\">{d.owner}</Code></>\n    : 'barred by an exclusive claim';\n}\n\nfunction FilterBand({ title, filter, dropped }: {\n  title: string;\n  filter: DroppedCandidate['filter'];\n  dropped: readonly DroppedCandidate[];\n}) {\n  const mine = dropped.filter((d) => d.filter === filter);\n  if (mine.length === 0) return <Stage title={title} filter={filter} note=\"dropped nothing\" />;\n  return (\n    <Stage title={title} filter={filter} note=\"dropped\">\n      <table className={s.table}>\n        <thead>\n          <tr><th>Action</th><th>Route</th><th>Why</th></tr>\n        </thead>\n        <tbody>\n          {mine.map((d, i) => (\n            <tr key={i}>\n              <td><Code size=\"sm\">{d.candidate.actionId}</Code></td>\n              <td><Routes candidate={d.candidate} /></td>\n              <td>{dropReason(d)}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </Stage>\n  );\n}\n\nfunction RankedStage({ ranked }: { ranked: readonly RankedCandidate[] }) {\n  if (ranked.length === 0) return <Stage title=\"Ranked\" note=\"nothing survived the filters\" />;\n  return (\n    <Stage title=\"Ranked\" note=\"highest first, with what the walk did at each\">\n      <table className={s.table}>\n        <thead>\n          <tr>\n            <th className={s.num}>#</th><th>Action</th><th>Placed by</th><th>Walk</th>\n            <th>Tier</th><th>Specificity</th><th>Rule</th><th>Route</th>\n          </tr>\n        </thead>\n        <tbody>\n          {ranked.map((r, i) => {\n            const c = r.candidate;\n            const winner = isWinner(r.walk);\n            return (\n              <tr\n                key={i}\n                className={winner ? s.winner : undefined}\n                data-walk={r.walk.kind}\n                data-winner={winner || undefined}\n                aria-current={winner || undefined}\n              >\n                <td className={s.num}>{i + 1}</td>\n                <td><Code size=\"sm\">{c.actionId}</Code></td>\n                <td>\n                  <Badge size=\"xs\" variant=\"outline\" status={r.placedBy.step === 'first' ? 'muted' : 'warn'}>\n                    {placedByLabel(r.placedBy)}\n                  </Badge>\n                </td>\n                <td className={s.walk} data-walk={r.walk.kind}>{walkLabel(r.walk)}</td>\n                <td>{c.scope}</td>\n                <td className={s.num} aria-label=\"target, modifiers, phase, exact\">{c.specificity.join(' ')}</td>\n                <td>{c.eligible ? <Code size=\"sm\" variant=\"plain\">{c.eligible}</Code> : <span className={s.muted}>none</span>}</td>\n                <td><Routes candidate={c} /></td>\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </Stage>\n  );\n}\n\n/** Props for {@link FallthroughDiagram}. */\nexport interface FallthroughDiagramProps {\n  record: DispatchRecord;\n  className?: string;\n}\n\n/**\n * One dispatch drawn top to bottom: the input, every binding it matched, what\n * the claim and eligibility filters dropped, and the ranked survivors with the\n * step that placed each one and what the walk did with it. The winner's row\n * carries `data-winner`.\n */\nexport function FallthroughDiagram({ record, className }: FallthroughDiagramProps) {\n  const cls = className ? `${s.diagram} ${className}` : s.diagram;\n  return (\n    <div className={cls} data-outcome={record.outcome} data-predicted={record.predicted || undefined}>\n      <InputLine input={record.input} predicted={record.predicted} />\n      {record.matched.length === 0 ? (\n        <p className={s.nothing}>Nothing matched this input.</p>\n      ) : (\n        <>\n          <MatchedStage matched={record.matched} />\n          <FilterBand title=\"Claim\" filter=\"claim\" dropped={record.dropped} />\n          <FilterBand title=\"Eligibility\" filter=\"ineligible\" dropped={record.dropped} />\n          <RankedStage ranked={record.ranked} />\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{Field-xbqRmjsI.js → Field--onYxXTF.js}

@@ -9,12 +9,13 @@ var t = {
 //#endregion
 //#region src/components/Field/Field.tsx
 function n({ orientation: n = "stacked", className: r, children: i }) {
+	let a = [
+		t.field,
+		n === "row" && t.row,
+		r
+	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ e("div", {
-		className: [
-			t.field,
-			n === "row" && t.row,
-			r
-		].filter(Boolean).join(" "),
+		className: a,
 		children: i
 	});
 }
@@ -28,4 +29,4 @@ var r = {
 //#endregion
 export { r as n, n as t };
 
-//# sourceMappingURL=Field-xbqRmjsI.js.map
+//# sourceMappingURL=Field--onYxXTF.js.map

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

@@ -0,0 +1 @@
+{"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-BViKXIPx.js → FillStrokeSwatch-DNb0KXPk.js}

@@ -1,16 +1,16 @@
-import { n as e } from "./paintValue-Bz6AVuh3.js";
-import { t } from "./Button-Dyp31jMt.js";
-import { t as n } from "./paintPreview-DPtZS4yU.js";
+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_1br5r_1",
-	pair: "_pair_1br5r_10",
-	chip: "_chip_1br5r_19",
-	input: "_input_1br5r_43",
-	well: "_well_1br5r_49",
-	paint: "_paint_1br5r_82",
-	buttons: "_buttons_1br5r_114"
+	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"
@@ -108,4 +108,4 @@ function u(e) {
 //#endregion
 export { u as t };
 
-//# sourceMappingURL=FillStrokeSwatch-BViKXIPx.js.map
+//# sourceMappingURL=FillStrokeSwatch-DNb0KXPk.js.map

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

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

package/dist/chunks/{FontFamilySelect-r9TV_xIH.js → FontFamilySelect-DkRgNtag.js}

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

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

@@ -0,0 +1 @@
+{"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/GestureRoute-C_YGl7bJ.js

@@ -0,0 +1,82 @@
+import { o as e, r as t, s as n } from "./Keycaps-C-FJyG8k.js";
+import { t as r } from "./Powerline-DNyH885r.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { getGestureDescriptor as s, parseRoute as c } from "@weasel-js/core/routing";
+var l = {
+	muted: "_muted_tsk2f_1",
+	keyCap: "_keyCap_tsk2f_3"
+}, u = [
+	"mod",
+	"shift",
+	"alt",
+	"ctrl",
+	"meta"
+];
+function d(e) {
+	let t = [];
+	for (let n of u) {
+		let r = e[n];
+		r !== void 0 && t.push({
+			name: n,
+			optional: r === "optional"
+		});
+	}
+	if (t.length !== 0) return n(t);
+}
+function f(n) {
+	let r = c(n), u = s(r.gesture), f = !!u.arg && r.arg !== void 0, p = f && u.arg?.name === "key", m = f && u.arg?.default !== void 0 && r.arg === u.arg.default, h = u.hasTarget && r.target !== void 0, g = h && r.target === "*", _ = d(r.modifiers), v = [];
+	for (let e of r.phases) e.channel !== "&" && v.push({
+		text: e.channel,
+		status: "neutral",
+		variant: "subtle"
+	}), v.push({
+		text: e.phase,
+		status: "accent",
+		variant: "subtle"
+	});
+	if (v.push({
+		text: f ? p ? /* @__PURE__ */ o(i, { children: [
+			r.gesture,
+			" ",
+			/* @__PURE__ */ a(t, {
+				label: e(r.arg).label,
+				variant: "minimal",
+				className: l.keyCap
+			})
+		] }) : /* @__PURE__ */ o(i, { children: [r.gesture, /* @__PURE__ */ o("span", {
+			className: m ? l.muted : void 0,
+			children: [
+				"(",
+				r.arg,
+				")"
+			]
+		})] }) : r.gesture,
+		status: "info",
+		variant: "outline"
+	}), _) {
+		let e = _.map((e) => `${e.optional ? "?" : "+"}${e.label}`).join("");
+		v.push({
+			text: e,
+			status: "muted",
+			variant: "solid"
+		});
+	}
+	h && v.push({
+		text: r.target,
+		status: "muted",
+		variant: g ? "subtle" : "outline"
+	});
+	for (let e = 0; e < v.length - 1; e++) v[e].endCap = "chevron";
+	return v;
+}
+function p({ route: e, "aria-label": t, ...n }) {
+	return /* @__PURE__ */ a(r, {
+		...n,
+		segments: f(e),
+		"aria-label": t ?? e
+	});
+}
+//#endregion
+export { f as n, p as t };
+
+//# sourceMappingURL=GestureRoute-C_YGl7bJ.js.map

package/dist/chunks/GestureRoute-C_YGl7bJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GestureRoute-C_YGl7bJ.js","names":["_Fragment","s","keySpecFromKey","KeyCap","keySpecsFromMods","Powerline","GestureRoute_module_default","MOD_DISPLAY_ORDER","modifierKeys","specs","name","req","modifiers","gestureRouteSegments","parsed","parseRoute","route","desc","getGestureDescriptor","hasArg","argIsKey","argIsDefault","hasTarget","targetIsWildcard","modKeys","segments","p","Fragment","text","k","i","GestureRoute","ariaLabel","rest"],"sources":["../../src/components/GestureRoute/GestureRoute.module.css","../../src/components/GestureRoute/GestureRoute.tsx"],"sourcesContent":[".muted { opacity: 0.55; }\n/* A gesture segment baseline-aligns its text; a KeyCap inside it has its own box and sits off-center without this. */\n.keyCap { align-self: center; }\n","import {\n  getGestureDescriptor,\n  parseRoute,\n  type GestureName,\n  type ModifierKey,\n  type ParsedModifiers,\n} from '@weasel-js/core/routing';\nimport { Powerline, type PowerlineProps, type PowerlineSegment } from '../Powerline';\nimport { KeyCap, keySpecFromKey, keySpecsFromMods, type KeySpec, type LogicalModSpec } from '../Keycaps';\nimport s from './GestureRoute.module.css';\n\nconst MOD_DISPLAY_ORDER: readonly ModifierKey[] = ['mod', 'shift', 'alt', 'ctrl', 'meta'];\n\nfunction modifierKeys(modifiers: ParsedModifiers): readonly KeySpec[] | undefined {\n  const specs: LogicalModSpec[] = [];\n  for (const name of MOD_DISPLAY_ORDER) {\n    const req = modifiers[name];\n    if (req !== undefined) specs.push({ name, optional: req === 'optional' });\n  }\n  if (specs.length === 0) return undefined;\n  return keySpecsFromMods(specs);\n}\n\n/**\n * The segments {@link GestureRoute} draws for a route string: phase atoms, then\n * `gesture(arg)`, then the held modifiers as one chord, then the target.\n * A descriptor's default arg and a wildcard target stay visible, muted, so\n * the strip shows the whole binding.\n */\nexport function gestureRouteSegments(route: string): PowerlineSegment[] {\n  const parsed = parseRoute(route);\n  const desc = getGestureDescriptor(parsed.gesture as GestureName);\n  const hasArg = !!desc.arg && parsed.arg !== undefined;\n  const argIsKey = hasArg && desc.arg?.name === 'key';\n  const argIsDefault = hasArg && desc.arg?.default !== undefined && parsed.arg === desc.arg.default;\n  const hasTarget = desc.hasTarget && parsed.target !== undefined;\n  const targetIsWildcard = hasTarget && parsed.target === '*';\n  const modKeys = modifierKeys(parsed.modifiers);\n\n  const segments: PowerlineSegment[] = [];\n  for (const p of parsed.phases) {\n    if (p.channel !== '&') segments.push({ text: p.channel, status: 'neutral', variant: 'subtle' });\n    segments.push({ text: p.phase, status: 'accent', variant: 'subtle' });\n  }\n  segments.push({\n    text: hasArg ? (\n      argIsKey ? (\n        <>\n          {parsed.gesture}{' '}\n          <KeyCap label={keySpecFromKey(parsed.arg!).label} variant=\"minimal\" className={s.keyCap} />\n        </>\n      ) : (\n        <>\n          {parsed.gesture}\n          <span className={argIsDefault ? s.muted : undefined}>({parsed.arg})</span>\n        </>\n      )\n    ) : parsed.gesture,\n    status: 'info',\n    variant: 'outline',\n  });\n  if (modKeys) {\n    // `+` marks a required modifier and `?` an optional one, so `+mod ?shift` reads `+⌘?⇧`.\n    const text = modKeys.map((k) => `${k.optional ? '?' : '+'}${k.label}`).join('');\n    segments.push({ text, status: 'muted', variant: 'solid' });\n  }\n  if (hasTarget) {\n    segments.push({\n      text: parsed.target,\n      status: 'muted',\n      variant: targetIsWildcard ? 'subtle' : 'outline',\n    });\n  }\n  for (let i = 0; i < segments.length - 1; i++) segments[i].endCap = 'chevron';\n  return segments;\n}\n\n/** Props for {@link GestureRoute}. */\nexport interface GestureRouteProps extends Omit<PowerlineProps, 'segments'> {\n  /** A route in the dispatcher's grammar, e.g. `[initial] drag => node +shift`. */\n  route: string;\n}\n\n/**\n * A dispatcher route drawn as a {@link Powerline}: phase, gesture, modifiers\n * and target as one chevron-linked chain.\n */\nexport function GestureRoute({ route, 'aria-label': ariaLabel, ...rest }: GestureRouteProps) {\n  return <Powerline {...rest} segments={gestureRouteSegments(route)} aria-label={ariaLabel ?? route} />;\n}\n"],"mappings":";;;;;;;GCWMO,IAA4C;CAAC;CAAO;CAAS;CAAO;CAAQ;AAAM;AAExF,SAASC,EAAa,GAA4D;CAChF,IAAMC,IAA0B,CAAC;CACjC,KAAK,IAAMC,KAAQH,GAAmB;EACpC,IAAMI,IAAMC,EAAUF;EACtB,AAAIC,MAAQ,KAAA,KAAWF,EAAM,KAAK;GAAE;GAAM,UAAUE,MAAQ;EAAW,CAAC;CAC1E;CACA,IAAIF,EAAM,WAAW,GACrB,OAAOL,EAAiBK,CAAK;AAC/B;AAQA,SAAgBI,EAAqB,GAAmC;CACtE,IAAMC,IAASC,EAAWC,CAAK,GACzBC,IAAOC,EAAqBJ,EAAO,OAAsB,GACzDK,IAAS,CAAC,CAACF,EAAK,OAAOH,EAAO,QAAQ,KAAA,GACtCM,IAAWD,KAAUF,EAAK,KAAK,SAAS,OACxCI,IAAeF,KAAUF,EAAK,KAAK,YAAY,KAAA,KAAaH,EAAO,QAAQG,EAAK,IAAI,SACpFK,IAAYL,EAAK,aAAaH,EAAO,WAAW,KAAA,GAChDS,IAAmBD,KAAaR,EAAO,WAAW,KAClDU,IAAUhB,EAAaM,EAAO,SAAS,GAEvCW,IAA+B,CAAC;CACtC,KAAK,IAAMC,KAAKZ,EAAO,QAErB,AADIY,EAAE,YAAY,OAAKD,EAAS,KAAK;EAAE,MAAMC,EAAE;EAAS,QAAQ;EAAW,SAAS;CAAS,CAAC,GAC9FD,EAAS,KAAK;EAAE,MAAMC,EAAE;EAAO,QAAQ;EAAU,SAAS;CAAS,CAAC;CAmBtE,IAjBAD,EAAS,KAAK;EACZ,MAAMN,IACJC,IACE,kBAAApB,GAAA,EAAA,UAAA;GACGc,EAAO;GAAS;GACjB,kBAACX,GAAD;IAAQ,OAAOD,EAAeY,EAAO,GAAI,CAAC,CAAC;IAAO,SAAQ;IAAU,WAAWb,EAAE;GAAS,CAAA;EAC1F,EAAA,CAAA,IAEF,kBAAAD,GAAA,EAAA,UAAA,CACGc,EAAO,SACR,kBAAC,QAAD;GAAM,WAAWO,IAAepB,EAAE,QAAQ,KAAA;GAA1C,UAAA;IAAqD;IAAEa,EAAO;IAAI;GAAO;EACzE,CAAA,CAAA,EAAA,CAAA,IAEFA,EAAO;EACX,QAAQ;EACR,SAAS;CACX,CAAC,GACGU,GAAS;EAEX,IAAMI,IAAOJ,EAAQ,KAAK,MAAM,GAAGK,EAAE,WAAW,MAAM,MAAMA,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE;EAC9E,EAAS,KAAK;GAAE;GAAM,QAAQ;GAAS,SAAS;EAAQ,CAAC;CAC3D;CACA,AAAIP,KACFG,EAAS,KAAK;EACZ,MAAMX,EAAO;EACb,QAAQ;EACR,SAASS,IAAmB,WAAW;CACzC,CAAC;CAEH,KAAK,IAAIO,IAAI,GAAGA,IAAIL,EAAS,SAAS,GAAG,KAAK,EAASK,EAAE,CAAC,SAAS;CACnE,OAAOL;AACT;AAYA,SAAgBM,EAAa,EAAE,UAAO,cAAcC,GAAW,GAAGC,KAA2B;CAC3F,OAAO,kBAAC5B,GAAD;EAAW,GAAI4B;EAAM,UAAUpB,EAAqBG,CAAK;EAAG,cAAYgB,KAAahB;CAAQ,CAAA;AACtG"}

package/dist/chunks/GradientEditor-b7v4Ph3i.js

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