npm - @weasel-js/ui - Versions diffs - 1.4.1 → 1.4.2 - Mend

@weasel-js/ui 1.4.1 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (186) hide show

package/dist/chunks/Disclosure-aSX2CZlw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Disclosure-aSX2CZlw.js","names":[],"sources":["../../src/components/Disclosure/Disclosure.module.css","../../src/components/Disclosure/Disclosure.tsx"],"sourcesContent":["/* Every dimension is stated because a host app's bare-element defaults can be\n authored at zero specificity — labkit's `:where(.lk-root) :where(button)`\n sets `height: var(--wzl-control-h)` and horizontal padding, which would\n otherwise stretch a 12px mark into a full-height control. */\n.twisty {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* A floor, not a size: a control sized to a 12px glyph is a 12px target,\n which is under every pointer-size guideline there is. Stated as a minimum\n so a larger mark grows the target with it rather than being shrunk to fit\n — a flex item's default `flex-shrink: 1` would otherwise crush it. */\n min-width: var(--wzl-disclosure-target, 20px);\n min-height: var(--wzl-disclosure-target, 20px);\n padding: 0;\n border: 0;\n border-radius: var(--wzl-radius-sm);\n background: none;\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n color: var(--wzl-fg-muted);\n line-height: 1;\n cursor: pointer;\n}\n\n.twisty:hover:not(:disabled) {\n color: var(--wzl-fg);\n background: var(--wzl-surface-raised);\n}\n\n.twisty:focus-visible {\n outline: 2px solid var(--wzl-focus-ring);\n outline-offset: -2px;\n color: var(--wzl-fg);\n}\n\n.twisty:disabled {\n color: var(--wzl-fg-subtle);\n cursor: not-allowed;\n}\n\n/* `currentColor` so the mark follows the button's own hover and disabled\n colors, and so a consumer can recolor the pair with one declaration. */\n.mark {\n display: block;\n flex: none;\n fill: currentColor;\n transition: transform var(--wzl-motion-fast, 90ms) var(--wzl-ease-out, ease);\n}\n\n.twisty[aria-expanded='true'] .mark {\n transform: rotate(90deg);\n}\n\n/* `direction=\"down\"` starts pointing down and lifts to point up. */\n.down .mark {\n transform: rotate(90deg);\n}\n\n.down[aria-expanded='true'] .mark {\n transform: rotate(-90deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mark {\n transition: none;\n }\n}\n\n.row {\n display: flex;\n align-items: center;\n gap: var(--wzl-disclosure-gap, 4px);\n}\n\n/* The row's content takes the rest and is allowed to shrink; the twisty is\n not, so a long label truncates rather than crushing the control. */\n.rowBody {\n flex: 1 1 auto;\n min-width: 0;\n}\n","import type { ReactNode } from 'react';\nimport s from './Disclosure.module.css';\n\n/** Which way the mark points when the section is closed. */\nexport type DisclosureDirection = 'right' | 'down';\n\n/** Props for `<Disclosure>`. */\nexport interface DisclosureProps {\n /** Whether the section it controls is open. The consumer owns this. */\n open: boolean;\n onToggle: () => void;\n /**\n * Names the section, for a screen reader. The control has no text of its\n * own, so without this it announces as an unlabeled button.\n */\n label: string;\n /**\n * `id` of the element this expands. Sets `aria-controls`, which lets a\n * screen reader move to the revealed content.\n */\n controls?: string;\n /** Which way the closed mark points. `'right'` (default) rotates down when\n * open; `'down'` rotates up. */\n direction?: DisclosureDirection;\n /** Mark size in px. The hit target is at least 20px and grows with it.\n * Default 12. */\n size?: number;\n disabled?: boolean;\n className?: string;\n}\n\n/**\n * The twisty on a collapsible section: a triangle that turns as it opens.\n *\n * Presentational — it holds no open/closed state and renders no children.\n * The consumer owns the state and the panel; this is the control that toggles\n * it, and `aria-expanded` is what ties the two together.\n *\n * Three things it settles that a hand-rolled twisty keeps getting wrong. The\n * mark is drawn rather than typed, because `--wzl-font-ui` carries no ▸/▾ and\n * a text glyph falls back to whatever the system offers at whatever size that\n * font renders it — around 6px against 13px body text, which reads as dirt on\n * the screen. The hit target is larger than the mark. And it is a sibling of\n * the row's label rather than a child, so clicking to expand does not actuate\n * the label's own control.\n *\n * Deliberately not part of the icon register, on the same grounds as\n * `DragHandleGlyph`: that register is outline strokes at a fixed weight, and\n * `base.mjs` rejects a solid triangle in it by name. A disclosure mark is\n * filled.\n */\nexport function Disclosure({\n open,\n onToggle,\n label,\n controls,\n direction = 'right',\n size = 12,\n disabled,\n className,\n}: DisclosureProps) {\n const cls = [s.twisty, direction === 'down' && s.down, className].filter(Boolean).join(' ');\n return (\n <button\n type=\"button\"\n className={cls}\n aria-expanded={open}\n aria-controls={controls}\n aria-label={label}\n disabled={disabled}\n onClick={onToggle}\n >\n <svg\n className={s.mark}\n viewBox=\"0 0 12 12\"\n width={size}\n height={size}\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n {/* Vertex on the right edge at the vertical center, so the rotation\n about the box center keeps the point on the same circle. */}\n <path d=\"M4 2.5 L8.5 6 L4 9.5 Z\" />\n </svg>\n </button>\n );\n}\n\n/** Props for `<DisclosureRow>`. */\nexport interface DisclosureRowProps extends Omit<DisclosureProps, 'className'> {\n /** The row's own content — a label, a checkbox, a count. */\n children: ReactNode;\n className?: string;\n}\n\n/**\n * A `<Disclosure>` and a row of content beside it, laid out so the twisty\n * leads and the content takes the rest.\n *\n * The layout is the point: the twisty sits *outside* whatever the row puts in\n * it, so a row whose content is a `<label>` wrapping a checkbox stays\n * clickable as a label without the twisty actuating it.\n */\nexport function DisclosureRow({ children, className, ...twisty }: DisclosureRowProps) {\n return (\n <div className={className ? `${s.row} ${className}` : s.row}>\n <Disclosure {...twisty} />\n <div className={s.rowBody}>{children}</div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;ACmDA,SAAgB,EAAW,EACzB,SACA,aACA,UACA,aACA,eAAY,SACZ,UAAO,IACP,aACA,gBACkB;AAElB,QACE,kBAAC,UAAD;EACE,MAAK;EACL,WAJQ;GAAC,EAAE;GAAQ,MAAc,UAAU,EAAE;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAIxE;EACX,iBAAe;EACf,iBAAe;EACf,cAAY;EACF;EACV,SAAS;YAET,kBAAC,OAAD;GACE,WAAW,EAAE;GACb,SAAQ;GACR,OAAO;GACP,QAAQ;GACR,eAAY;GACZ,WAAU;aAIV,kBAAC,QAAD,EAAM,GAAE,0BAA2B,CAAA;GAC/B,CAAA;EACC,CAAA;;AAmBb,SAAgB,EAAc,EAAE,aAAU,cAAW,GAAG,KAA8B;AACpF,QACE,kBAAC,OAAD;EAAK,WAAW,IAAY,GAAG,EAAE,IAAI,GAAG,MAAc,EAAE;YAAxD,CACE,kBAAC,GAAD,EAAY,GAAI,GAAU,CAAA,EAC1B,kBAAC,OAAD;GAAK,WAAW,EAAE;GAAU;GAAe,CAAA,CACvC"}

package/dist/chunks/{DragHandleGlyph--2zsZzA2.js → DragHandleGlyph-C6GJyfnm.js} RENAMED Viewed

@@ -44,4 +44,4 @@ function n({ size: n = 16 }) {
 //#endregion
 export { n as t };
-//# sourceMappingURL=DragHandleGlyph--2zsZzA2.js.map
+//# sourceMappingURL=DragHandleGlyph-C6GJyfnm.js.map

package/dist/chunks/{DragHandleGlyph--2zsZzA2.js.map → DragHandleGlyph-C6GJyfnm.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DragHandleGlyph~~--2zsZzA2~~.js","names":[],"sources":["../../src/components/DragHandleGlyph/DragHandleGlyph.tsx"],"sourcesContent":["/** Props for `<DragHandleGlyph>`. /\nexport interface DragHandleGlyphProps {\n /* Height in px; width scales with it. Default 16. /\n size?: number;\n}\n\n/* The two-column dot grip used on anything draggable by a handle.\n \n Deliberately not part of the icon register: that register is outline strokes\n * at a fixed weight, and a grip is filled dots. Forcing it in would either\n * break the register's rule or produce a worse glyph. /\nexport function DragHandleGlyph({ size = 16 }: DragHandleGlyphProps) {\n return (\n <svg\n width={(size 8) / 16}\n height={size}\n viewBox=\"0 0 8 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <circle cx=\"2\" cy=\"3\" r=\"1.1\" />\n <circle cx=\"6\" cy=\"3\" r=\"1.1\" />\n <circle cx=\"2\" cy=\"8\" r=\"1.1\" />\n <circle cx=\"6\" cy=\"8\" r=\"1.1\" />\n <circle cx=\"2\" cy=\"13\" r=\"1.1\" />\n <circle cx=\"6\" cy=\"13\" r=\"1.1\" />\n </svg>\n );\n}\n"],"mappings":";;AAWA,SAAgB,EAAgB,EAAE,UAAO,MAA4B;AACnE,QACE,kBAAC,OAAD;EACE,OAAQ,IAAO,IAAK;EACpB,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,eAAY;YALd;GAOE,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAQ,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAQ,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAQ,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAQ,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAK,GAAE;IAAQ,CAAA;GACjC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAK,GAAE;IAAQ,CAAA;GAC7B"}
1	+ {"version":3,"file":"DragHandleGlyph-C6GJyfnm.js","names":[],"sources":["../../src/components/DragHandleGlyph/DragHandleGlyph.tsx"],"sourcesContent":["/** Props for `<DragHandleGlyph>`. /\nexport interface DragHandleGlyphProps {\n /* Height in px; width scales with it. Default 16. /\n size?: number;\n}\n\n/* The two-column dot grip used on anything draggable by a handle.\n \n Deliberately not part of the icon register: that register is outline strokes\n * at a fixed weight, and a grip is filled dots. Forcing it in would either\n * break the register's rule or produce a worse glyph. /\nexport function DragHandleGlyph({ size = 16 }: DragHandleGlyphProps) {\n return (\n <svg\n width={(size 8) / 16}\n height={size}\n viewBox=\"0 0 8 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <circle cx=\"2\" cy=\"3\" r=\"1.1\" />\n <circle cx=\"6\" cy=\"3\" r=\"1.1\" />\n <circle cx=\"2\" cy=\"8\" r=\"1.1\" />\n <circle cx=\"6\" cy=\"8\" r=\"1.1\" />\n <circle cx=\"2\" cy=\"13\" r=\"1.1\" />\n <circle cx=\"6\" cy=\"13\" r=\"1.1\" />\n </svg>\n );\n}\n"],"mappings":";;AAWA,SAAgB,EAAgB,EAAE,UAAO,MAA4B;AACnE,QACE,kBAAC,OAAD;EACE,OAAQ,IAAO,IAAK;EACpB,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,eAAY;YALd;GAOE,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAQ,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAQ,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAQ,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAQ,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAK,GAAE;IAAQ,CAAA;GACjC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAK,GAAE;IAAQ,CAAA;GAC7B"}

package/dist/chunks/{Field-Bc6Nuc3p.js → Field-BUroh92b.js} RENAMED Viewed

@@ -28,4 +28,4 @@ var r = {
 //#endregion
 export { r as n, n as t };
-//# sourceMappingURL=Field-Bc6Nuc3p.js.map
+//# sourceMappingURL=Field-BUroh92b.js.map

package/dist/chunks/{Field-Bc6Nuc3p.js.map → Field-BUroh92b.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Field-~~Bc6Nuc3p~~.js","names":[],"sources":["../../src/components/Field/Field.module.css","../../src/components/Field/Field.tsx"],"sourcesContent":[".field {\n display: flex;\n flex-direction: column;\n gap: 4px;\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: 8px;\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,SAAgB,EAAM,EAAE,iBAAc,WAAW,cAAW,eAAwB;AAElF,QAAO,kBAAC,OAAD;EAAK,WADA;GAAC,EAAE;GAAO,MAAgB,SAAS,EAAE;GAAK;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAC/D;EAAM;EAAe,CAAA;;AAO9C,IAAa,IAAe;CAC1B,MAAM,EAAE;CACR,KAAK,EAAE;CACP,OAAO,EAAE;CACT,MAAM,EAAE;CACR,OAAO,EAAE;CACV"}
1	+ {"version":3,"file":"Field-BUroh92b.js","names":[],"sources":["../../src/components/Field/Field.module.css","../../src/components/Field/Field.tsx"],"sourcesContent":[".field {\n display: flex;\n flex-direction: column;\n gap: 4px;\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: 8px;\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,SAAgB,EAAM,EAAE,iBAAc,WAAW,cAAW,eAAwB;AAElF,QAAO,kBAAC,OAAD;EAAK,WADA;GAAC,EAAE;GAAO,MAAgB,SAAS,EAAE;GAAK;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAC/D;EAAM;EAAe,CAAA;;AAO9C,IAAa,IAAe;CAC1B,MAAM,EAAE;CACR,KAAK,EAAE;CACP,OAAO,EAAE;CACT,MAAM,EAAE;CACR,OAAO,EAAE;CACV"}

package/dist/chunks/{FontFamilySelect-CvrXKVwv.js → FontFamilySelect-xjOHQMsK.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { t as e } from "./Select-D1uP21db.js";
+import { t as e } from "./Select-DGafwTF0.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-CvrXKVwv.js.map
+//# sourceMappingURL=FontFamilySelect-xjOHQMsK.js.map

package/dist/chunks/{FontFamilySelect-CvrXKVwv.js.map → FontFamilySelect-xjOHQMsK.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FontFamilySelect-~~CvrXKVwv~~.js","names":[],"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,SAAS,EAAkB,GAAgB,GAAgB,GAAoC;CAC7F,IAAM,EAAE,mBAAgB,EAAmB,GAAQ,GAAQ,EAAM;AACjE,QAAO,IACH,GAAG,EAAO,yBAAyB,EAAY,aAC/C,GAAG,EAAO;;AAGhB,SAAgB,EAAiB,GAA8B;CAC7D,IAAM,EAAE,UAAO,WAAQ,IAAO,aAAU,YAAS,KAAK,eAAY,UAAU,iBAAc,GAKpF,IAAQ,GAAW,EACnB,IAAS,GAAiB,CAAC,QAAQ,MAAM,CAAC,EAAM,MAAM,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,EACnF,IAAY,CAAC,GAAG,EAAM,KAAK,MAAM,EAAE,OAAO,EAAE,GAAG,EAAO,KAAK,MAAM,EAAE,OAAO,CAAC,EAC3E,IAAU,EAAU,KAAK,OAAY;EAAE,OAAO;EAAQ,OAAO;EAAQ,EAAE;AAI7E,QAHI,MAAU,KAAA,KAAa,CAAC,EAAU,SAAS,EAAM,IACnD,EAAQ,KAAK;EAAE;EAAO,OAAO,EAAkB,GAAO,GAAQ,EAAU;EAAE,CAAC,EAG3E,kBAAC,GAAD;EACa;EACF;EACT,aAAa,IAAQ,OAAQ,KAAS;EACtC,aAAa,IAAQ,UAAU,KAAA;EAC/B,mBAAmB;EACnB,cAAY,EAAM,iBAAiB;EACnC,CAAA"}
1	+ {"version":3,"file":"FontFamilySelect-xjOHQMsK.js","names":[],"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,SAAS,EAAkB,GAAgB,GAAgB,GAAoC;CAC7F,IAAM,EAAE,mBAAgB,EAAmB,GAAQ,GAAQ,EAAM;AACjE,QAAO,IACH,GAAG,EAAO,yBAAyB,EAAY,aAC/C,GAAG,EAAO;;AAGhB,SAAgB,EAAiB,GAA8B;CAC7D,IAAM,EAAE,UAAO,WAAQ,IAAO,aAAU,YAAS,KAAK,eAAY,UAAU,iBAAc,GAKpF,IAAQ,GAAW,EACnB,IAAS,GAAiB,CAAC,QAAQ,MAAM,CAAC,EAAM,MAAM,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,EACnF,IAAY,CAAC,GAAG,EAAM,KAAK,MAAM,EAAE,OAAO,EAAE,GAAG,EAAO,KAAK,MAAM,EAAE,OAAO,CAAC,EAC3E,IAAU,EAAU,KAAK,OAAY;EAAE,OAAO;EAAQ,OAAO;EAAQ,EAAE;AAI7E,QAHI,MAAU,KAAA,KAAa,CAAC,EAAU,SAAS,EAAM,IACnD,EAAQ,KAAK;EAAE;EAAO,OAAO,EAAkB,GAAO,GAAQ,EAAU;EAAE,CAAC,EAG3E,kBAAC,GAAD;EACa;EACF;EACT,aAAa,IAAQ,OAAQ,KAAS;EACtC,aAAa,IAAQ,UAAU,KAAA;EAC/B,mBAAmB;EACnB,cAAY,EAAM,iBAAiB;EACnC,CAAA"}

package/dist/chunks/{GradientEditor-CPeTbkFE.js → GradientEditor-D1IVEkHO.js} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { t as e } from "./Slider-BE6jaxyU.js";
-import { t } from "./ToggleBar-D0veW91s.js";
-import { t as n } from "./ColorField-pEkaSppg.js";
+import { t as e } from "./Slider-X6WcO-6s.js";
+import { t } from "./ToggleBar-fQGk_Wf_.js";
+import { t as n } from "./ColorField-CCBSv8dp.js";
 import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 import { fillInPoseFrame as o, fillToBoundsFrame as s, gradientGeometry as c, isGradientFill as l, sampleGradientStops as u, useActionsRegistry as d, useHandleDrag as f, useNodeOverlayFrame as p, withGradientKind as m } from "@weasel-js/core";
 import { useCallback as h, useRef as g } from "react";
@@ -307,4 +307,4 @@ function N(e) {
 //#endregion
 export { v as i, w as n, S as r, j as t };
-//# sourceMappingURL=GradientEditor-CPeTbkFE.js.map
+//# sourceMappingURL=GradientEditor-D1IVEkHO.js.map

package/dist/chunks/{GradientEditor-CPeTbkFE.js.map → GradientEditor-D1IVEkHO.js.map} RENAMED Viewed

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

package/dist/chunks/{InlineRange-CBt_SBsC.js → InlineRange-DG2dvtb4.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { t as e } from "./range.module-CttzfN6a.js";
+import { t as e } from "./range.module-CO59aXEH.js";
 import { jsx as t } from "react/jsx-runtime";
 import "react";
 var n = { range: "_range_1on6e_4" };
@@ -26,4 +26,4 @@ function r(r) {
 //#endregion
 export { r as t };
-//# sourceMappingURL=InlineRange-CBt_SBsC.js.map
+//# sourceMappingURL=InlineRange-DG2dvtb4.js.map

package/dist/chunks/{InlineRange-CBt_SBsC.js.map → InlineRange-DG2dvtb4.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InlineRange-~~CBt_SBsC~~.js","names":[],"sources":["../../src/components/InlineRange/InlineRange.module.css","../../src/components/InlineRange/InlineRange.tsx"],"sourcesContent":["/* Track and thumb come from the shared range skin. What is local to\n InlineRange is the filled-to-N% paint, which no other surface has:\n `--slider-fill` carries the value, since no static rule expresses it. /\n.range {\n flex: 1;\n --wzl-range-bg: linear-gradient(\n to right,\n var(--wzl-accent) 0 var(--slider-fill, 0%),\n var(--wzl-border-strong) var(--slider-fill, 0%) 100%\n );\n --wzl-range-box-h: var(--wzl-slider-track-h);\n / The gradient above IS the track, so the shared track paint must not land on top of it. /\n --wzl-range-track-bg: transparent;\n border-radius: var(--wzl-radius-pill);\n}\n","import { type CSSProperties, type InputHTMLAttributes, type ReactElement } from 'react';\nimport shared from '../range.module.css';\nimport s from './InlineRange.module.css';\n\n/* Props for {@link InlineRange} — a range input's, with `value` required. /\nexport type InlineRangeProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' \| 'value' \| 'min' \| 'max'\n> & {\n value: number;\n min?: number;\n max?: number;\n};\n\n/\n Compact range input for a property row: one track, no label, no output.\n \n Distinct from the kit's other two — `Slider` is shaped for canvas scrubbing,\n * and `RangeSlider` is a full-width labelled form control on React Aria. This\n * one exists to sit inline beside a swatch or a readout, and to own the track\n * painting both of those surfaces need.\n /\nexport function InlineRange(props: InlineRangeProps): ReactElement {\n const { value, min = 0, max = 100, className, style, ...rest } = props;\n const span = max - min;\n const filled = span > 0 ? ((Math.min(Math.max(value, min), max) - min) / span) 100 : 0;\n return (\n <input\n {...rest}\n type=\"range\"\n value={value}\n min={min}\n max={max}\n className={[shared.range, s.range, className].filter(Boolean).join(' ')}\n style={{ ['--slider-fill' as string]: `${filled}%`, ...style } as CSSProperties}\n />\n );\n}\n"],"mappings":";;;;;;ACsBA,SAAgB,EAAY,GAAuC;CACjE,IAAM,EAAE,UAAO,SAAM,GAAG,SAAM,KAAK,cAAW,UAAO,GAAG,MAAS,GAC3D,IAAO,IAAM,GACb,IAAS,IAAO,KAAM,KAAK,IAAI,KAAK,IAAI,GAAO,EAAI,EAAE,EAAI,GAAG,KAAO,IAAQ,MAAM;AACvF,QACE,kBAAC,SAAD;EACE,GAAI;EACJ,MAAK;EACE;EACF;EACA;EACL,WAAW;GAAC,EAAO;GAAO,EAAE;GAAO;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACvE,OAAO;GAAG,iBAA4B,GAAG,EAAO;GAAI,GAAG;GAAO;EAC9D,CAAA"}
1	+ {"version":3,"file":"InlineRange-DG2dvtb4.js","names":[],"sources":["../../src/components/InlineRange/InlineRange.module.css","../../src/components/InlineRange/InlineRange.tsx"],"sourcesContent":["/* Track and thumb come from the shared range skin. What is local to\n InlineRange is the filled-to-N% paint, which no other surface has:\n `--slider-fill` carries the value, since no static rule expresses it. /\n.range {\n flex: 1;\n --wzl-range-bg: linear-gradient(\n to right,\n var(--wzl-accent) 0 var(--slider-fill, 0%),\n var(--wzl-border-strong) var(--slider-fill, 0%) 100%\n );\n --wzl-range-box-h: var(--wzl-slider-track-h);\n / The gradient above IS the track, so the shared track paint must not land on top of it. /\n --wzl-range-track-bg: transparent;\n border-radius: var(--wzl-radius-pill);\n}\n","import { type CSSProperties, type InputHTMLAttributes, type ReactElement } from 'react';\nimport shared from '../range.module.css';\nimport s from './InlineRange.module.css';\n\n/* Props for {@link InlineRange} — a range input's, with `value` required. /\nexport type InlineRangeProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' \| 'value' \| 'min' \| 'max'\n> & {\n value: number;\n min?: number;\n max?: number;\n};\n\n/\n Compact range input for a property row: one track, no label, no output.\n \n Distinct from the kit's other two — `Slider` is shaped for canvas scrubbing,\n * and `RangeSlider` is a full-width labelled form control on React Aria. This\n * one exists to sit inline beside a swatch or a readout, and to own the track\n * painting both of those surfaces need.\n /\nexport function InlineRange(props: InlineRangeProps): ReactElement {\n const { value, min = 0, max = 100, className, style, ...rest } = props;\n const span = max - min;\n const filled = span > 0 ? ((Math.min(Math.max(value, min), max) - min) / span) 100 : 0;\n return (\n <input\n {...rest}\n type=\"range\"\n value={value}\n min={min}\n max={max}\n className={[shared.range, s.range, className].filter(Boolean).join(' ')}\n style={{ ['--slider-fill' as string]: `${filled}%`, ...style } as CSSProperties}\n />\n );\n}\n"],"mappings":";;;;;;ACsBA,SAAgB,EAAY,GAAuC;CACjE,IAAM,EAAE,UAAO,SAAM,GAAG,SAAM,KAAK,cAAW,UAAO,GAAG,MAAS,GAC3D,IAAO,IAAM,GACb,IAAS,IAAO,KAAM,KAAK,IAAI,KAAK,IAAI,GAAO,EAAI,EAAE,EAAI,GAAG,KAAO,IAAQ,MAAM;AACvF,QACE,kBAAC,SAAD;EACE,GAAI;EACJ,MAAK;EACE;EACF;EACA;EACL,WAAW;GAAC,EAAO;GAAO,EAAE;GAAO;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACvE,OAAO;GAAG,iBAA4B,GAAG,EAAO;GAAI,GAAG;GAAO;EAC9D,CAAA"}

package/dist/chunks/{Input-CSAECs_T.js → Input-CxMANia3.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { n as e } from "./Field-Bc6Nuc3p.js";
+import { n as e } from "./Field-BUroh92b.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
 import { FieldError as i, Input as a, Label as o, Text as s, TextField as c } from "react-aria-components";
@@ -52,4 +52,4 @@ var l = {
 //#endregion
 export { u as t };
-//# sourceMappingURL=Input-CSAECs_T.js.map
+//# sourceMappingURL=Input-CxMANia3.js.map

package/dist/chunks/{Input-CSAECs_T.js.map → Input-CxMANia3.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input-~~CSAECs_T~~.js","names":[],"sources":["../../src/components/Input/Input.module.css","../../src/components/Input/Input.tsx"],"sourcesContent":[".field {\n display: flex;\n flex-direction: column;\n width: 100%;\n min-width: 0;\n gap: 4px;\n}\n\n.frame {\n display: flex;\n align-items: center;\n gap: 6px;\n height: var(--wzl-field-h, var(--wzl-control-h));\n padding: 0 var(--wzl-field-pad-x);\n background: var(--wzl-surface-sunken);\n border: 1px solid var(--wzl-border);\n border-radius: var(--wzl-radius-sm);\n color: var(--wzl-fg);\n font-family: var(--wzl-font-ui);\n font-size: var(--wzl-font-size);\n line-height: 1;\n transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n border-color: var(--wzl-focus-ring);\n box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n border-color: var(--wzl-danger);\n}\n\n.field[data-disabled] .frame {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.frame input {\n flex: 1;\n min-width: 0;\n background: transparent;\n border: none;\n outline: none;\n color: inherit;\n font: inherit;\n padding: 0;\n}\n\n.frame input::placeholder {\n color: var(--wzl-fg-subtle);\n}\n\n.adornment {\n display: inline-flex;\n align-items: center;\n color: var(--wzl-fg-subtle);\n font-size: var(--wzl-font-size-sm);\n pointer-events: none;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n TextField,\n Label,\n Input as RACInput,\n Text,\n FieldError,\n type TextFieldProps as RACTextFieldProps,\n type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './Input.module.css';\n\n/** Props for {@link Input}, on top of React Aria's `TextField` props. /\nexport type InputProps = Omit<RACTextFieldProps, 'children' \| 'className'> & {\n label?: ReactNode;\n description?: ReactNode;\n errorMessage?: ReactNode \| ((v: ValidationResult) => ReactNode);\n placeholder?: string;\n leadingAdornment?: ReactNode;\n trailingAdornment?: ReactNode;\n className?: string;\n};\n\n/\n Single-line text input wrapping React Aria's TextField. Supplies a\n * default skin against the `--wzl-` token system, and exposes the\n familiar label / description / errorMessage / adornment slot shape.\n \n `ref` forwards to the underlying `<input>`.\n */\nexport const Input = forwardRef(function Input(\n props: InputProps,\n ref: Ref<HTMLInputElement>,\n) {\n const {\n label,\n description,\n errorMessage,\n placeholder,\n leadingAdornment,\n trailingAdornment,\n className,\n ...textFieldProps\n } = props;\n\n return (\n <TextField {...textFieldProps} className={[s.field, fieldClasses.root, className].filter(Boolean).join(' ')}>\n {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n <div className={s.frame}>\n {leadingAdornment !== undefined && <span className={s.adornment}>{leadingAdornment}</span>}\n <RACInput ref={ref} placeholder={placeholder} />\n {trailingAdornment !== undefined && <span className={s.adornment}>{trailingAdornment}</span>}\n </div>\n {description !== undefined && (\n <Text slot=\"description\" className={fieldClasses.hint}>\n {description}\n </Text>\n )}\n <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n </TextField>\n );\n});\n"],"mappings":";;;;;;;;GC+Ba,IAAQ,EAAW,SAC9B,GACA,GACA;CACA,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,qBACA,sBACA,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,GAAD;EAAW,GAAI;EAAgB,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA3G;GACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAlB;KACG,MAAqB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAwB,CAAA;KAC1F,kBAAC,GAAD;MAAe;MAAkB;MAAe,CAAA;KAC/C,MAAsB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAyB,CAAA;KACxF;;GACL,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GAC5D;;EAEd"}
1	+ {"version":3,"file":"Input-CxMANia3.js","names":[],"sources":["../../src/components/Input/Input.module.css","../../src/components/Input/Input.tsx"],"sourcesContent":[".field {\n display: flex;\n flex-direction: column;\n width: 100%;\n min-width: 0;\n gap: 4px;\n}\n\n.frame {\n display: flex;\n align-items: center;\n gap: 6px;\n height: var(--wzl-field-h, var(--wzl-control-h));\n padding: 0 var(--wzl-field-pad-x);\n background: var(--wzl-surface-sunken);\n border: 1px solid var(--wzl-border);\n border-radius: var(--wzl-radius-sm);\n color: var(--wzl-fg);\n font-family: var(--wzl-font-ui);\n font-size: var(--wzl-font-size);\n line-height: 1;\n transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n border-color: var(--wzl-focus-ring);\n box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n border-color: var(--wzl-danger);\n}\n\n.field[data-disabled] .frame {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.frame input {\n flex: 1;\n min-width: 0;\n background: transparent;\n border: none;\n outline: none;\n color: inherit;\n font: inherit;\n padding: 0;\n}\n\n.frame input::placeholder {\n color: var(--wzl-fg-subtle);\n}\n\n.adornment {\n display: inline-flex;\n align-items: center;\n color: var(--wzl-fg-subtle);\n font-size: var(--wzl-font-size-sm);\n pointer-events: none;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n TextField,\n Label,\n Input as RACInput,\n Text,\n FieldError,\n type TextFieldProps as RACTextFieldProps,\n type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './Input.module.css';\n\n/** Props for {@link Input}, on top of React Aria's `TextField` props. /\nexport type InputProps = Omit<RACTextFieldProps, 'children' \| 'className'> & {\n label?: ReactNode;\n description?: ReactNode;\n errorMessage?: ReactNode \| ((v: ValidationResult) => ReactNode);\n placeholder?: string;\n leadingAdornment?: ReactNode;\n trailingAdornment?: ReactNode;\n className?: string;\n};\n\n/\n Single-line text input wrapping React Aria's TextField. Supplies a\n * default skin against the `--wzl-` token system, and exposes the\n familiar label / description / errorMessage / adornment slot shape.\n \n `ref` forwards to the underlying `<input>`.\n */\nexport const Input = forwardRef(function Input(\n props: InputProps,\n ref: Ref<HTMLInputElement>,\n) {\n const {\n label,\n description,\n errorMessage,\n placeholder,\n leadingAdornment,\n trailingAdornment,\n className,\n ...textFieldProps\n } = props;\n\n return (\n <TextField {...textFieldProps} className={[s.field, fieldClasses.root, className].filter(Boolean).join(' ')}>\n {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n <div className={s.frame}>\n {leadingAdornment !== undefined && <span className={s.adornment}>{leadingAdornment}</span>}\n <RACInput ref={ref} placeholder={placeholder} />\n {trailingAdornment !== undefined && <span className={s.adornment}>{trailingAdornment}</span>}\n </div>\n {description !== undefined && (\n <Text slot=\"description\" className={fieldClasses.hint}>\n {description}\n </Text>\n )}\n <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n </TextField>\n );\n});\n"],"mappings":";;;;;;;;GC+Ba,IAAQ,EAAW,SAC9B,GACA,GACA;CACA,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,qBACA,sBACA,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,GAAD;EAAW,GAAI;EAAgB,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA3G;GACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAlB;KACG,MAAqB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAwB,CAAA;KAC1F,kBAAC,GAAD;MAAe;MAAkB;MAAe,CAAA;KAC/C,MAAsB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAyB,CAAA;KACxF;;GACL,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GAC5D;;EAEd"}

package/dist/chunks/{ItemList-POiCvUDx.js → ItemList-BcdHAah3.js} RENAMED Viewed

@@ -39,4 +39,4 @@ var r = {
 //#endregion
 export { i as t };
-//# sourceMappingURL=ItemList-POiCvUDx.js.map
+//# sourceMappingURL=ItemList-BcdHAah3.js.map

package/dist/chunks/{ItemList-POiCvUDx.js.map → ItemList-BcdHAah3.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ItemList-~~POiCvUDx~~.js","names":[],"sources":["../../src/components/ItemList/ItemList.module.css","../../src/components/ItemList/ItemList.tsx"],"sourcesContent":["/* One height and one inset for every sidebar list. A panel stacking two of\n them has to have their rows line up, which is what a private copy of this\n file per list stopped happening. /\n.list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n user-select: none;\n -webkit-user-select: none;\n position: relative;\n width: 100%;\n}\n\n.row {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 8px;\n height: 24px;\n font-size: var(--wzl-font-size-sm);\n color: var(--wzl-fg);\n background: transparent;\n border-radius: var(--wzl-radius-sm);\n cursor: default;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.row:hover {\n background: var(--wzl-surface);\n}\n\n.label {\n flex: 1 1 auto;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.selected,\n.selected:hover {\n background: var(--wzl-border);\n color: var(--wzl-fg);\n}\n\n/ Present but not in effect. /\n.muted {\n color: var(--wzl-fg-subtle);\n}\n\n.empty {\n padding: 12px 8px;\n font-size: var(--wzl-font-size-sm);\n color: var(--wzl-fg-subtle);\n font-style: italic;\n}\n","/\n The row chrome behind a sidebar list — layers, history, anything that is a\n * flat column of selectable rows in a panel.\n \n It owns the container, the row box and the empty state, and nothing else:\n * what a row means stays with the consumer. History dims its redo entries\n * and rules a line under the current one; a layer list drags to reorder and\n * leads each row with a swatch. Both reach that through `className` and\n * `rowProps` rather than through options here, so this does not grow a flag\n * per consumer.\n \n Rows are one height and one inset for every list, which is the point: two\n * panels stacked in the same sidebar have to agree, and they did not while\n * each owned a private copy of the same CSS.\n /\nimport { forwardRef, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport s from './ItemList.module.css';\n\n/* One row. `id` is the React key. /\nexport interface ItemListRow {\n id: string;\n label: ReactNode;\n /* Fixed-size content before the label — a color swatch, a checkbox. /\n leading?: ReactNode;\n /* The row the list considers current. /\n selected?: boolean;\n /* Present but not in effect — history's redo entries. /\n muted?: boolean;\n /* Consumer classes for states this component has no opinion about. /\n className?: string;\n /* Handlers and data attributes for this row's element. `data-` is\n spelled out because `HTMLAttributes` does not admit it, and every\n * consumer here marks its rows up with one. /\n rowProps?: HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, unknown>;\n}\n\nexport interface ItemListProps {\n rows: readonly ItemListRow[];\n /* Shown in place of the rows when there are none. /\n empty?: ReactNode;\n className?: string;\n /* Rendered inside the container above the rows — a drop indicator. /\n overlay?: ReactNode;\n /* Spread onto the container: pointer handlers for a drag, `aria-label`. */\n containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nexport const ItemList = forwardRef(function ItemList(\n { rows, empty, className, overlay, containerProps }: ItemListProps,\n ref: Ref<HTMLDivElement>,\n) {\n const cls = [s.list, className].filter(Boolean).join(' ');\n if (rows.length === 0) {\n return (\n <div className={cls} ref={ref} {...containerProps}>\n <div className={s.empty}>{empty ?? '—'}</div>\n </div>\n );\n }\n return (\n <div className={cls} ref={ref} {...containerProps}>\n {overlay}\n {rows.map((row) => (\n <div\n key={row.id}\n className={[\n s.row,\n row.selected && s.selected,\n row.muted && s.muted,\n row.className,\n ].filter(Boolean).join(' ')}\n {...row.rowProps}\n >\n {row.leading}\n <span className={s.label}>{row.label}</span>\n </div>\n ))}\n </div>\n );\n});\n"],"mappings":";;;;;;;;;GC+Ca,IAAW,EAAW,SACjC,EAAE,SAAM,UAAO,cAAW,YAAS,qBACnC,GACA;CACA,IAAM,IAAM,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAQzD,QAPI,EAAK,WAAW,IAEhB,kBAAC,OAAD;EAAK,WAAW;EAAU;EAAK,GAAI;YACjC,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAQ,KAAS;GAAU,CAAA;EACzC,CAAA,GAIR,kBAAC,OAAD;EAAK,WAAW;EAAU;EAAK,GAAI;YAAnC,CACG,GACA,EAAK,KAAK,MACT,kBAAC,OAAD;GAEE,WAAW;IACT,EAAE;IACF,EAAI,YAAY,EAAE;IAClB,EAAI,SAAS,EAAE;IACf,EAAI;IACL,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC3B,GAAI,EAAI;aARV,CAUG,EAAI,SACL,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAQ,EAAI;IAAa,CAAA,CACxC;KAXC,EAAI,GAWL,CACN,CACE;;EAER"}
1	+ {"version":3,"file":"ItemList-BcdHAah3.js","names":[],"sources":["../../src/components/ItemList/ItemList.module.css","../../src/components/ItemList/ItemList.tsx"],"sourcesContent":["/* One height and one inset for every sidebar list. A panel stacking two of\n them has to have their rows line up, which is what a private copy of this\n file per list stopped happening. /\n.list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n user-select: none;\n -webkit-user-select: none;\n position: relative;\n width: 100%;\n}\n\n.row {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 8px;\n height: 24px;\n font-size: var(--wzl-font-size-sm);\n color: var(--wzl-fg);\n background: transparent;\n border-radius: var(--wzl-radius-sm);\n cursor: default;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.row:hover {\n background: var(--wzl-surface);\n}\n\n.label {\n flex: 1 1 auto;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.selected,\n.selected:hover {\n background: var(--wzl-border);\n color: var(--wzl-fg);\n}\n\n/ Present but not in effect. /\n.muted {\n color: var(--wzl-fg-subtle);\n}\n\n.empty {\n padding: 12px 8px;\n font-size: var(--wzl-font-size-sm);\n color: var(--wzl-fg-subtle);\n font-style: italic;\n}\n","/\n The row chrome behind a sidebar list — layers, history, anything that is a\n * flat column of selectable rows in a panel.\n \n It owns the container, the row box and the empty state, and nothing else:\n * what a row means stays with the consumer. History dims its redo entries\n * and rules a line under the current one; a layer list drags to reorder and\n * leads each row with a swatch. Both reach that through `className` and\n * `rowProps` rather than through options here, so this does not grow a flag\n * per consumer.\n \n Rows are one height and one inset for every list, which is the point: two\n * panels stacked in the same sidebar have to agree, and they did not while\n * each owned a private copy of the same CSS.\n /\nimport { forwardRef, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport s from './ItemList.module.css';\n\n/* One row. `id` is the React key. /\nexport interface ItemListRow {\n id: string;\n label: ReactNode;\n /* Fixed-size content before the label — a color swatch, a checkbox. /\n leading?: ReactNode;\n /* The row the list considers current. /\n selected?: boolean;\n /* Present but not in effect — history's redo entries. /\n muted?: boolean;\n /* Consumer classes for states this component has no opinion about. /\n className?: string;\n /* Handlers and data attributes for this row's element. `data-` is\n spelled out because `HTMLAttributes` does not admit it, and every\n * consumer here marks its rows up with one. /\n rowProps?: HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, unknown>;\n}\n\nexport interface ItemListProps {\n rows: readonly ItemListRow[];\n /* Shown in place of the rows when there are none. /\n empty?: ReactNode;\n className?: string;\n /* Rendered inside the container above the rows — a drop indicator. /\n overlay?: ReactNode;\n /* Spread onto the container: pointer handlers for a drag, `aria-label`. */\n containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nexport const ItemList = forwardRef(function ItemList(\n { rows, empty, className, overlay, containerProps }: ItemListProps,\n ref: Ref<HTMLDivElement>,\n) {\n const cls = [s.list, className].filter(Boolean).join(' ');\n if (rows.length === 0) {\n return (\n <div className={cls} ref={ref} {...containerProps}>\n <div className={s.empty}>{empty ?? '—'}</div>\n </div>\n );\n }\n return (\n <div className={cls} ref={ref} {...containerProps}>\n {overlay}\n {rows.map((row) => (\n <div\n key={row.id}\n className={[\n s.row,\n row.selected && s.selected,\n row.muted && s.muted,\n row.className,\n ].filter(Boolean).join(' ')}\n {...row.rowProps}\n >\n {row.leading}\n <span className={s.label}>{row.label}</span>\n </div>\n ))}\n </div>\n );\n});\n"],"mappings":";;;;;;;;;GC+Ca,IAAW,EAAW,SACjC,EAAE,SAAM,UAAO,cAAW,YAAS,qBACnC,GACA;CACA,IAAM,IAAM,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAQzD,QAPI,EAAK,WAAW,IAEhB,kBAAC,OAAD;EAAK,WAAW;EAAU;EAAK,GAAI;YACjC,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAQ,KAAS;GAAU,CAAA;EACzC,CAAA,GAIR,kBAAC,OAAD;EAAK,WAAW;EAAU;EAAK,GAAI;YAAnC,CACG,GACA,EAAK,KAAK,MACT,kBAAC,OAAD;GAEE,WAAW;IACT,EAAE;IACF,EAAI,YAAY,EAAE;IAClB,EAAI,SAAS,EAAE;IACf,EAAI;IACL,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC3B,GAAI,EAAI;aARV,CAUG,EAAI,SACL,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAQ,EAAI;IAAa,CAAA,CACxC;KAXC,EAAI,GAWL,CACN,CACE;;EAER"}

package/dist/chunks/{Keycaps-DszN5Dwl.js → Keycaps-D-UGWDrt.js} RENAMED Viewed

@@ -394,4 +394,4 @@ function p(e, t = {}) {
 //#endregion
 export { s as a, c as i, p as n, o, d as r, u as t };
-//# sourceMappingURL=Keycaps-DszN5Dwl.js.map
+//# sourceMappingURL=Keycaps-D-UGWDrt.js.map

package/dist/chunks/{Keycaps-DszN5Dwl.js.map → Keycaps-D-UGWDrt.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Keycaps-DszN5Dwl.js","names":[],"sources":["../../src/components/Keycaps/Keycaps.module.css","../../src/components/Keycaps/Keycap.tsx","../../src/components/Keycaps/Keycaps.tsx","../../src/components/Keycaps/keySpecsFromMods.ts"],"sourcesContent":["/* Keystroke \"key cap\" styling — each modifier and key in its own bordered chip. /\n.keys {\n display: inline-flex;\n gap: 3px;\n / Bottom-align so chips with text labels and chips with icon glyphs\n (arrows, modifier symbols) line up at the same bottom edge. Baseline\n drifts because text baselines sit above icon centers. /\n align-items: flex-end;\n / When this whole sequence sits inline in surrounding text (e.g.\n \"Press <KeySequence> to confirm.\"), the row anchors to the\n surrounding line's bottom edge, not its baseline. /\n vertical-align: bottom;\n flex-wrap: wrap;\n}\n\n.keysEmpty {\n color: var(--wzl-fg-muted);\n}\n\n.sep {\n color: var(--wzl-fg-muted);\n font-size: var(--wzl-font-size-sm);\n line-height: 1;\n}\n\n.key {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 18px;\n padding: 0 4px;\n / Light face, slightly-darker-than-face border, dark glyph — reads as\n a real keycap rather than a recessed slot in the panel. /\n background: var(--wzl-fg, #e6e7e9);\n border: 1px solid #25272c;\n border-bottom-width: 2px;\n border-radius: var(--wzl-radius-sm);\n color: var(--wzl-surface);\n / Keycaps are a deliberate exception to the site theme — the design-\n system UI font (often a display face like Oswald) is wrong for\n keyboard chips. Use a neutral sans stack so labels read like real\n key legends. Consumers wanting a specific face per chip pass the\n `font` prop on KeyCap. /\n font-family: ui-sans-serif, system-ui, sans-serif;\n font-size: var(--wzl-font-size-sm);\n font-weight: var(--wzl-font-weight-bold);\n line-height: 1;\n}\n\n/ Default chip is square — letters, digits, and single glyphs (⎋ ⌫ ↑ etc.)\n sit in a uniform key-cap box. /\n.key[data-kind='square'] {\n width: 18px;\n padding: 0;\n}\n\n/ Modifiers (⌘ ⇪ ⌥ ⌃) are wider to match the visual weight of how they\n appear on a real keyboard — and to differentiate them from the keys\n they modify in a stack. /\n.key[data-kind='modifier'] {\n min-width: 26px;\n padding: 0 6px;\n}\n\n/ Tab / Enter / Space — actual wide keys on a real keyboard. /\n.key[data-kind='wide'] {\n min-width: 32px;\n padding: 0 8px;\n}\n\n/ Optional/inverted (default variant): face flips to dark; legend drops\n to 60% opacity; dotted border drops to 40% opacity. Three soft cues\n stacked for \"may be held but isn't required.\" /\n.key[data-inverted] {\n background: var(--wzl-surface);\n color: color-mix(in srgb, var(--wzl-fg, #e6e7e9) 60%, transparent);\n border-style: dotted;\n border-color: color-mix(in srgb, var(--wzl-fg, #e6e7e9) 40%, transparent);\n border-width: 1.5px;\n border-bottom-width: 1.5px;\n}\n\n/ Minimal variant — no fill, borders and legend follow currentColor.\n Useful inline in colored prose / next to colored badges where the\n chip should take the surrounding text color. /\n.key[data-variant='minimal'] {\n background: transparent;\n border-color: currentColor;\n color: currentColor;\n}\n\n/ Optional + minimal: dotted border at full currentColor, legend at full\n currentColor. The dotted pattern alone carries the \"optional\" cue here\n — minimal's whole point is to defer color to the surrounding context,\n so dimming would fight that. (Default variant uses graded opacity as a\n stacked cue; minimal keeps it crisp.) /\n.key[data-variant='minimal'][data-inverted] {\n border-style: dotted;\n border-color: currentColor;\n color: currentColor;\n border-width: 1.5px;\n border-bottom-width: 1.5px;\n}\n","import type { CSSProperties } from 'react';\nimport s from './Keycaps.module.css';\n\nconst MODIFIER_GLYPHS = new Set(['⌘', '⇪', '⌥', '⌃', '⇧']);\nconst WIDE_GLYPHS = new Set(['⇥', '↵', '␣']);\n\n/\n Width class of a keycap: a modifier glyph, a multi-character legend that\n * needs a wider chip, or a single character in a square one.\n /\nexport type KeycapKind = 'modifier' \| 'wide' \| 'square';\n\n/\n Picks the chip width for a legend — modifier glyphs and anything longer\n * than one character get the wider forms.\n /\nexport function inferKeycapKind(label: string): KeycapKind {\n if (MODIFIER_GLYPHS.has(label)) return 'modifier';\n if (WIDE_GLYPHS.has(label)) return 'wide';\n if (label.length > 1) return 'wide';\n return 'square';\n}\n\n/* Visual style of a keycap chip. /\nexport type KeyCapVariant = 'default' \| 'minimal';\n\n/* Props for {@link KeyCap}. /\nexport interface KeyCapProps {\n /* Glyph rendered in the chip (modifier or key). /\n label: string;\n /* Marks the chip as not required to trigger the action. In the default\n * variant the chip face inverts (dark face / light glyph) for\n * emphasis. In the `'minimal'` variant the chip's border becomes\n * dotted to read as \"may be held, but isn't required.\" /\n inverted?: boolean;\n /* Visual style. `'default'` (default) renders a filled chip; `'minimal'`\n * renders an unfilled chip whose border and legend are `currentColor`\n * — useful inline in colored prose / next to colored badges where the\n * chip should take the surrounding text color. /\n variant?: KeyCapVariant;\n className?: string;\n /* Optional inline style. Useful for one-off width overrides (e.g.\n * building a keyboard-layout where the space bar spans several\n * standard-key widths). The component sets no inline styles of its\n * own — everything else comes from the CSS module. /\n style?: CSSProperties;\n /* Override the chip's font-family. Accepts any CSS font-family\n * string. When omitted, the chip inherits from the design-system\n * UI font token (`--wzl-font-ui`). Useful for one-off cases where\n * a different face is desired — though the canonical move is to\n * override the CSS variable at the consumer's scope, not the prop. /\n font?: string;\n}\n\n/* Single bordered keycap chip for one glyph (modifier or key). Use\n * `KeySequence` to render a full shortcut. /\nexport function KeyCap({ label, inverted = false, variant = 'default', className, style, font }: KeyCapProps) {\n const resolvedStyle = font ? { ...style, fontFamily: font } : style;\n return (\n <kbd\n className={[s.key, className].filter(Boolean).join(' ')}\n data-kind={inferKeycapKind(label)}\n data-variant={variant === 'default' ? undefined : variant}\n data-inverted={inverted \|\| undefined}\n style={resolvedStyle}\n >\n {label}\n </kbd>\n );\n}\n","import { Fragment } from 'react';\nimport s from './Keycaps.module.css';\nimport { KeyCap, inferKeycapKind, type KeyCapVariant } from './Keycap';\n\n/* One key in a shortcut. /\nexport interface KeySpec {\n /* Glyph rendered in the chip (modifier or key). /\n label: string;\n /* When true, the chip renders inverted to mark it as not required to\n * trigger the action (e.g. an optional modifier). Defaults to false. /\n optional?: boolean;\n}\n\n/* Props for {@link KeySequence}. /\nexport interface KeySequenceProps {\n /* Keys to render. `undefined` or empty renders a muted em-dash.\n * Modifiers are always rendered first regardless of input order; relative\n * order within each group is preserved. /\n keys: readonly KeySpec[] \| undefined;\n /* Character inserted between the trailing modifier chip and the first\n * non-modifier chip (e.g. `'+'` renders `⌘ + K`). `null` or `''`\n * suppresses it. Defaults to `'+'`. /\n separator?: string \| null;\n /* Forwarded to every `KeyCap` in the sequence. `'minimal'` renders\n * unfilled chips whose border + legend are `currentColor`. /\n variant?: KeyCapVariant;\n /* Forwarded to every `KeyCap` in the sequence. Overrides the design-\n * system UI font for that chip only. /\n font?: string;\n className?: string;\n}\n\n/* Renders a shortcut as a row of `KeyCap` chips, one per key. Optional\n * keys render inverted to distinguish them from required ones. /\nexport function KeySequence({ keys, separator = '+', variant = 'default', font, className }: KeySequenceProps) {\n if (!keys \|\| keys.length === 0) {\n return <span className={[s.keysEmpty, className].filter(Boolean).join(' ')}>—</span>;\n }\n const ordered = keys\n .map((k, i) => ({ k, i }))\n .sort((a, b) => {\n const am = inferKeycapKind(a.k.label) === 'modifier' ? 0 : 1;\n const bm = inferKeycapKind(b.k.label) === 'modifier' ? 0 : 1;\n return am - bm \|\| a.i - b.i;\n })\n .map(({ k }) => k);\n const sepIdx = ordered.findIndex((k) => inferKeycapKind(k.label) !== 'modifier');\n const showSep = !!separator && sepIdx > 0 && sepIdx < ordered.length;\n return (\n <span className={[s.keys, className].filter(Boolean).join(' ')}>\n {ordered.map((k, i) => (\n <Fragment key={i}>\n {showSep && i === sepIdx ? <span className={s.sep}>{separator}</span> : null}\n <KeyCap label={k.label} inverted={k.optional ?? false} variant={variant} font={font} />\n </Fragment>\n ))}\n </span>\n );\n}\n","import type { KeySpec } from './Keycaps';\n\n/* Logical modifier name. Matches the kit's `ModifierKey` in shape — kept as a\n * local type so `weasel-ui` stays independent of `@weasel-js/core`. /\nexport type LogicalMod = 'mod' \| 'shift' \| 'alt' \| 'ctrl' \| 'meta';\n\n/* Detected (or overridden) platform. `'mod'` resolves to ⌘ on macOS,\n * Ctrl on Windows / Linux. /\nexport type Platform = 'macos' \| 'windows' \| 'linux';\n\n/* Visual form of a modifier or named-key label.\n \n - `'auto'` (default): the per-entry, per-platform default — whatever\n * label is actually printed on the physical key. macOS keys show the\n * Apple glyphs (⌘ ⌥ ⌃ ⇧ ⎋ ↵ ⇥). Windows keys mostly show text\n * (Ctrl, Alt, Shift) BUT the Win key shows its logo (⊞) and the\n * context-menu key shows ▤. Linux mirrors Windows with Super (⊞).\n * - `'symbol'` forces the Apple-style glyph everywhere a symbolic form\n * exists. Entries without a widely-recognized symbol still fall\n * back to text.\n * - `'text'` always spells the label out (Cmd / Option / Esc / Enter). /\nexport type LegendStyle = 'auto' \| 'symbol' \| 'text';\n\n/* A modifier to render, named platform-independently. /\nexport interface LogicalModSpec {\n name: LogicalMod;\n /* Marks this modifier as optional (may be held but isn't required).\n * Forwarded as the resulting `KeySpec.optional`. /\n optional?: boolean;\n}\n\n/* Options for {@link keySpecsFromMods}. /\nexport interface KeySpecsFromModsOptions {\n /* Override OS detection. Defaults to the detected platform, or\n * `'macos'` when detection is unavailable (e.g. in tests, or when\n * `navigator` is missing). /\n platform?: Platform;\n /* Defaults to `'auto'` (symbol on macOS, text everywhere else). Pass\n * `'symbol'` or `'text'` to force a specific style regardless of\n * platform. /\n legend?: LegendStyle;\n}\n\nconst MOD_BY_PLATFORM: Record<LogicalMod, Record<Platform, Record<LegendStyle, string>>> = {\n mod: {\n macos: { auto: '⌘', symbol: '⌘', text: 'Cmd' },\n windows: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n linux: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n },\n shift: {\n macos: { auto: '⇧', symbol: '⇧', text: 'Shift' },\n windows: { auto: '⇧', symbol: '⇧', text: 'Shift' },\n linux: { auto: '⇧', symbol: '⇧', text: 'Shift' },\n },\n alt: {\n macos: { auto: '⌥', symbol: '⌥', text: 'Option' },\n windows: { auto: 'Alt', symbol: 'Alt', text: 'Alt' },\n linux: { auto: 'Alt', symbol: 'Alt', text: 'Alt' },\n },\n ctrl: {\n macos: { auto: '⌃', symbol: '⌃', text: 'Control' },\n windows: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n linux: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n },\n // Windows/Linux Meta has a recognized symbol on the physical key (⊞ Win\n // logo / Super logo), so `auto` shows it. Use `text` for Win / Super.\n meta: {\n macos: { auto: '⌘', symbol: '⌘', text: 'Cmd' },\n windows: { auto: '⊞', symbol: '⊞', text: 'Win' },\n linux: { auto: '⊞', symbol: '⊞', text: 'Super' },\n },\n};\n\n/* Detect the user's OS from the browser environment. UA sniffing — not\n * 100% reliable, but adequate for picking a modifier-glyph convention.\n * Falls back to `'macos'` (matches the kit's docs convention) when\n * `navigator` is unavailable. /\nexport function detectPlatform(): Platform {\n if (typeof navigator === 'undefined') return 'macos';\n // Prefer the modern userAgentData when available (Chromium-only today).\n const uaData = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData;\n const raw = (uaData?.platform ?? navigator.userAgent ?? '').toLowerCase();\n if (raw.includes('mac') \|\| raw.includes('darwin') \|\| raw.includes('iphone') \|\| raw.includes('ipad')) return 'macos';\n if (raw.includes('win')) return 'windows';\n if (raw.includes('linux') \|\| raw.includes('x11')) return 'linux';\n return 'macos';\n}\n\n/\n Map a list of logical modifiers (`'mod'`, `'shift'`, …) to visual\n * `KeySpec`s appropriate for the current platform.\n \n The kit-side gesture grammar uses logical names so the same route reads\n * correctly on every OS — `'mod'` means \"Cmd on Mac, Ctrl on Win/Linux\".\n * `KeySequence` is purely visual and renders the labels you give it; this\n * helper is the bridge.\n \n ```ts\n * <KeySequence\n * keys={keySpecsFromMods([{ name: 'mod' }, { name: 'shift', optional: true }])}\n * />\n * ```\n \n On a Mac: renders `⌘ ⇧`. On Windows: renders `Ctrl Shift`. Pass an\n * explicit `platform` to override detection (e.g. for docs that always\n * show the macOS form). Pass `legend: 'text'` to force \"Cmd\" over \"⌘\"\n * even on macOS.\n /\nexport function keySpecsFromMods(\n mods: readonly LogicalModSpec[],\n opts: KeySpecsFromModsOptions = {},\n): readonly KeySpec[] {\n const platform = opts.platform ?? detectPlatform();\n const legend = opts.legend ?? 'auto';\n return mods.map((m) => {\n const label = MOD_BY_PLATFORM[m.name][platform][legend];\n return m.optional ? { label, optional: true } : { label };\n });\n}\n\n/* Per-platform × per-legend table for named, non-modifier keys. `auto`\n * is whatever's printed on the physical key for that platform. Arrows\n * are universal symbols on every platform. /\nconst NAMED_KEY: Record<string, Record<Platform, Record<LegendStyle, string>>> = {\n Escape: { macos: { auto: '⎋', symbol: '⎋', text: 'Esc' }, windows: { auto: 'Esc', symbol: 'Esc', text: 'Esc' }, linux: { auto: 'Esc', symbol: 'Esc', text: 'Esc' } },\n Enter: { macos: { auto: '↵', symbol: '↵', text: 'Return' }, windows: { auto: 'Enter', symbol: 'Enter', text: 'Enter' }, linux: { auto: 'Enter', symbol: 'Enter', text: 'Enter' } },\n Return: { macos: { auto: '↵', symbol: '↵', text: 'Return' }, windows: { auto: 'Enter', symbol: 'Enter', text: 'Enter' }, linux: { auto: 'Enter', symbol: 'Enter', text: 'Enter' } },\n Tab: { macos: { auto: '⇥', symbol: '⇥', text: 'Tab' }, windows: { auto: 'Tab', symbol: 'Tab', text: 'Tab' }, linux: { auto: 'Tab', symbol: 'Tab', text: 'Tab' } },\n Space: { macos: { auto: '␣', symbol: '␣', text: 'Space' }, windows: { auto: 'Space', symbol: 'Space', text: 'Space' }, linux: { auto: 'Space', symbol: 'Space', text: 'Space' } },\n ' ': { macos: { auto: '␣', symbol: '␣', text: 'Space' }, windows: { auto: 'Space', symbol: 'Space', text: 'Space' }, linux: { auto: 'Space', symbol: 'Space', text: 'Space' } },\n Backspace: { macos: { auto: '⌫', symbol: '⌫', text: 'Backspace' }, windows: { auto: 'Backspace', symbol: 'Backspace', text: 'Backspace' }, linux: { auto: 'Backspace', symbol: 'Backspace', text: 'Backspace' } },\n Delete: { macos: { auto: '⌦', symbol: '⌦', text: 'Delete' }, windows: { auto: 'Delete', symbol: 'Delete', text: 'Delete' }, linux: { auto: 'Delete', symbol: 'Delete', text: 'Delete' } },\n // Context-menu key (the right-Ctrl-area key on Windows / Linux keyboards\n // with a ▤ icon). Mac has no equivalent; falls back to text 'Menu'.\n ContextMenu: { macos: { auto: 'Menu', symbol: 'Menu', text: 'Menu' }, windows: { auto: '▤', symbol: '▤', text: 'Menu' }, linux: { auto: '▤', symbol: '▤', text: 'Menu' } },\n ArrowUp: { macos: { auto: '↑', symbol: '↑', text: '↑' }, windows: { auto: '↑', symbol: '↑', text: '↑' }, linux: { auto: '↑', symbol: '↑', text: '↑' } },\n ArrowDown: { macos: { auto: '↓', symbol: '↓', text: '↓' }, windows: { auto: '↓', symbol: '↓', text: '↓' }, linux: { auto: '↓', symbol: '↓', text: '↓' } },\n ArrowLeft: { macos: { auto: '←', symbol: '←', text: '←' }, windows: { auto: '←', symbol: '←', text: '←' }, linux: { auto: '←', symbol: '←', text: '←' } },\n ArrowRight: { macos: { auto: '→', symbol: '→', text: '→' }, windows: { auto: '→', symbol: '→', text: '→' }, linux: { auto: '→', symbol: '→', text: '→' } },\n};\n\n/\n Render a raw `KeyboardEvent.key` value as a platform-appropriate\n * `KeySpec`. Named non-modifier keys (Esc, Enter, Tab, Space, Backspace,\n * Delete, arrows) get the platform's conventional form. Letter / digit /\n * other keys pass through upper-cased.\n \n ```ts\n * keySpecFromKey('Escape', { platform: 'macos' }) // { label: '⎋' }\n * keySpecFromKey('Escape', { platform: 'windows' }) // { label: 'Esc' }\n * keySpecFromKey('p') // { label: 'P' }\n * ```\n \n Symbol mode is only meaningful on macOS — Windows / Linux keyboards\n * print the text form on the physical key, so symbol mode there falls\n * back to text.\n */\nexport function keySpecFromKey(\n raw: string,\n opts: KeySpecsFromModsOptions & { optional?: boolean } = {},\n): KeySpec {\n const platform = opts.platform ?? detectPlatform();\n const legend = opts.legend ?? 'auto';\n const entry = NAMED_KEY[raw];\n const label = entry ? entry[platform][legend] : raw.length === 1 ? raw.toUpperCase() : raw;\n return opts.optional ? { label, optional: true } : { label };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Keycaps-D-UGWDrt.js","names":[],"sources":["../../src/components/Keycaps/Keycaps.module.css","../../src/components/Keycaps/Keycap.tsx","../../src/components/Keycaps/Keycaps.tsx","../../src/components/Keycaps/keySpecsFromMods.ts"],"sourcesContent":["/* Keystroke \"key cap\" styling — each modifier and key in its own bordered chip. /\n.keys {\n display: inline-flex;\n gap: 3px;\n / Bottom-align so chips with text labels and chips with icon glyphs\n (arrows, modifier symbols) line up at the same bottom edge. Baseline\n drifts because text baselines sit above icon centers. /\n align-items: flex-end;\n / When this whole sequence sits inline in surrounding text (e.g.\n \"Press <KeySequence> to confirm.\"), the row anchors to the\n surrounding line's bottom edge, not its baseline. /\n vertical-align: bottom;\n flex-wrap: wrap;\n}\n\n.keysEmpty {\n color: var(--wzl-fg-muted);\n}\n\n.sep {\n color: var(--wzl-fg-muted);\n font-size: var(--wzl-font-size-sm);\n line-height: 1;\n}\n\n.key {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 18px;\n padding: 0 4px;\n / Light face, slightly-darker-than-face border, dark glyph — reads as\n a real keycap rather than a recessed slot in the panel. /\n background: var(--wzl-fg, #e6e7e9);\n border: 1px solid #25272c;\n border-bottom-width: 2px;\n border-radius: var(--wzl-radius-sm);\n color: var(--wzl-surface);\n / Keycaps are a deliberate exception to the site theme — the design-\n system UI font (often a display face like Oswald) is wrong for\n keyboard chips. Use a neutral sans stack so labels read like real\n key legends. Consumers wanting a specific face per chip pass the\n `font` prop on KeyCap. /\n font-family: ui-sans-serif, system-ui, sans-serif;\n font-size: var(--wzl-font-size-sm);\n font-weight: var(--wzl-font-weight-bold);\n line-height: 1;\n}\n\n/ Default chip is square — letters, digits, and single glyphs (⎋ ⌫ ↑ etc.)\n sit in a uniform key-cap box. /\n.key[data-kind='square'] {\n width: 18px;\n padding: 0;\n}\n\n/ Modifiers (⌘ ⇪ ⌥ ⌃) are wider to match the visual weight of how they\n appear on a real keyboard — and to differentiate them from the keys\n they modify in a stack. /\n.key[data-kind='modifier'] {\n min-width: 26px;\n padding: 0 6px;\n}\n\n/ Tab / Enter / Space — actual wide keys on a real keyboard. /\n.key[data-kind='wide'] {\n min-width: 32px;\n padding: 0 8px;\n}\n\n/ Optional/inverted (default variant): face flips to dark; legend drops\n to 60% opacity; dotted border drops to 40% opacity. Three soft cues\n stacked for \"may be held but isn't required.\" /\n.key[data-inverted] {\n background: var(--wzl-surface);\n color: color-mix(in srgb, var(--wzl-fg, #e6e7e9) 60%, transparent);\n border-style: dotted;\n border-color: color-mix(in srgb, var(--wzl-fg, #e6e7e9) 40%, transparent);\n border-width: 1.5px;\n border-bottom-width: 1.5px;\n}\n\n/ Minimal variant — no fill, borders and legend follow currentColor.\n Useful inline in colored prose / next to colored badges where the\n chip should take the surrounding text color. /\n.key[data-variant='minimal'] {\n background: transparent;\n border-color: currentColor;\n color: currentColor;\n}\n\n/ Optional + minimal: dotted border at full currentColor, legend at full\n currentColor. The dotted pattern alone carries the \"optional\" cue here\n — minimal's whole point is to defer color to the surrounding context,\n so dimming would fight that. (Default variant uses graded opacity as a\n stacked cue; minimal keeps it crisp.) /\n.key[data-variant='minimal'][data-inverted] {\n border-style: dotted;\n border-color: currentColor;\n color: currentColor;\n border-width: 1.5px;\n border-bottom-width: 1.5px;\n}\n","import type { CSSProperties } from 'react';\nimport s from './Keycaps.module.css';\n\nconst MODIFIER_GLYPHS = new Set(['⌘', '⇪', '⌥', '⌃', '⇧']);\nconst WIDE_GLYPHS = new Set(['⇥', '↵', '␣']);\n\n/\n Width class of a keycap: a modifier glyph, a multi-character legend that\n * needs a wider chip, or a single character in a square one.\n /\nexport type KeycapKind = 'modifier' \| 'wide' \| 'square';\n\n/\n Picks the chip width for a legend — modifier glyphs and anything longer\n * than one character get the wider forms.\n /\nexport function inferKeycapKind(label: string): KeycapKind {\n if (MODIFIER_GLYPHS.has(label)) return 'modifier';\n if (WIDE_GLYPHS.has(label)) return 'wide';\n if (label.length > 1) return 'wide';\n return 'square';\n}\n\n/* Visual style of a keycap chip. /\nexport type KeyCapVariant = 'default' \| 'minimal';\n\n/* Props for {@link KeyCap}. /\nexport interface KeyCapProps {\n /* Glyph rendered in the chip (modifier or key). /\n label: string;\n /* Marks the chip as not required to trigger the action. In the default\n * variant the chip face inverts (dark face / light glyph) for\n * emphasis. In the `'minimal'` variant the chip's border becomes\n * dotted to read as \"may be held, but isn't required.\" /\n inverted?: boolean;\n /* Visual style. `'default'` (default) renders a filled chip; `'minimal'`\n * renders an unfilled chip whose border and legend are `currentColor`\n * — useful inline in colored prose / next to colored badges where the\n * chip should take the surrounding text color. /\n variant?: KeyCapVariant;\n className?: string;\n /* Optional inline style. Useful for one-off width overrides (e.g.\n * building a keyboard-layout where the space bar spans several\n * standard-key widths). The component sets no inline styles of its\n * own — everything else comes from the CSS module. /\n style?: CSSProperties;\n /* Override the chip's font-family. Accepts any CSS font-family\n * string. When omitted, the chip inherits from the design-system\n * UI font token (`--wzl-font-ui`). Useful for one-off cases where\n * a different face is desired — though the canonical move is to\n * override the CSS variable at the consumer's scope, not the prop. /\n font?: string;\n}\n\n/* Single bordered keycap chip for one glyph (modifier or key). Use\n * `KeySequence` to render a full shortcut. /\nexport function KeyCap({ label, inverted = false, variant = 'default', className, style, font }: KeyCapProps) {\n const resolvedStyle = font ? { ...style, fontFamily: font } : style;\n return (\n <kbd\n className={[s.key, className].filter(Boolean).join(' ')}\n data-kind={inferKeycapKind(label)}\n data-variant={variant === 'default' ? undefined : variant}\n data-inverted={inverted \|\| undefined}\n style={resolvedStyle}\n >\n {label}\n </kbd>\n );\n}\n","import { Fragment } from 'react';\nimport s from './Keycaps.module.css';\nimport { KeyCap, inferKeycapKind, type KeyCapVariant } from './Keycap';\n\n/* One key in a shortcut. /\nexport interface KeySpec {\n /* Glyph rendered in the chip (modifier or key). /\n label: string;\n /* When true, the chip renders inverted to mark it as not required to\n * trigger the action (e.g. an optional modifier). Defaults to false. /\n optional?: boolean;\n}\n\n/* Props for {@link KeySequence}. /\nexport interface KeySequenceProps {\n /* Keys to render. `undefined` or empty renders a muted em-dash.\n * Modifiers are always rendered first regardless of input order; relative\n * order within each group is preserved. /\n keys: readonly KeySpec[] \| undefined;\n /* Character inserted between the trailing modifier chip and the first\n * non-modifier chip (e.g. `'+'` renders `⌘ + K`). `null` or `''`\n * suppresses it. Defaults to `'+'`. /\n separator?: string \| null;\n /* Forwarded to every `KeyCap` in the sequence. `'minimal'` renders\n * unfilled chips whose border + legend are `currentColor`. /\n variant?: KeyCapVariant;\n /* Forwarded to every `KeyCap` in the sequence. Overrides the design-\n * system UI font for that chip only. /\n font?: string;\n className?: string;\n}\n\n/* Renders a shortcut as a row of `KeyCap` chips, one per key. Optional\n * keys render inverted to distinguish them from required ones. /\nexport function KeySequence({ keys, separator = '+', variant = 'default', font, className }: KeySequenceProps) {\n if (!keys \|\| keys.length === 0) {\n return <span className={[s.keysEmpty, className].filter(Boolean).join(' ')}>—</span>;\n }\n const ordered = keys\n .map((k, i) => ({ k, i }))\n .sort((a, b) => {\n const am = inferKeycapKind(a.k.label) === 'modifier' ? 0 : 1;\n const bm = inferKeycapKind(b.k.label) === 'modifier' ? 0 : 1;\n return am - bm \|\| a.i - b.i;\n })\n .map(({ k }) => k);\n const sepIdx = ordered.findIndex((k) => inferKeycapKind(k.label) !== 'modifier');\n const showSep = !!separator && sepIdx > 0 && sepIdx < ordered.length;\n return (\n <span className={[s.keys, className].filter(Boolean).join(' ')}>\n {ordered.map((k, i) => (\n <Fragment key={i}>\n {showSep && i === sepIdx ? <span className={s.sep}>{separator}</span> : null}\n <KeyCap label={k.label} inverted={k.optional ?? false} variant={variant} font={font} />\n </Fragment>\n ))}\n </span>\n );\n}\n","import type { KeySpec } from './Keycaps';\n\n/* Logical modifier name. Matches the kit's `ModifierKey` in shape — kept as a\n * local type so `weasel-ui` stays independent of `@weasel-js/core`. /\nexport type LogicalMod = 'mod' \| 'shift' \| 'alt' \| 'ctrl' \| 'meta';\n\n/* Detected (or overridden) platform. `'mod'` resolves to ⌘ on macOS,\n * Ctrl on Windows / Linux. /\nexport type Platform = 'macos' \| 'windows' \| 'linux';\n\n/* Visual form of a modifier or named-key label.\n \n - `'auto'` (default): the per-entry, per-platform default — whatever\n * label is actually printed on the physical key. macOS keys show the\n * Apple glyphs (⌘ ⌥ ⌃ ⇧ ⎋ ↵ ⇥). Windows keys mostly show text\n * (Ctrl, Alt, Shift) BUT the Win key shows its logo (⊞) and the\n * context-menu key shows ▤. Linux mirrors Windows with Super (⊞).\n * - `'symbol'` forces the Apple-style glyph everywhere a symbolic form\n * exists. Entries without a widely-recognized symbol still fall\n * back to text.\n * - `'text'` always spells the label out (Cmd / Option / Esc / Enter). /\nexport type LegendStyle = 'auto' \| 'symbol' \| 'text';\n\n/* A modifier to render, named platform-independently. /\nexport interface LogicalModSpec {\n name: LogicalMod;\n /* Marks this modifier as optional (may be held but isn't required).\n * Forwarded as the resulting `KeySpec.optional`. /\n optional?: boolean;\n}\n\n/* Options for {@link keySpecsFromMods}. /\nexport interface KeySpecsFromModsOptions {\n /* Override OS detection. Defaults to the detected platform, or\n * `'macos'` when detection is unavailable (e.g. in tests, or when\n * `navigator` is missing). /\n platform?: Platform;\n /* Defaults to `'auto'` (symbol on macOS, text everywhere else). Pass\n * `'symbol'` or `'text'` to force a specific style regardless of\n * platform. /\n legend?: LegendStyle;\n}\n\nconst MOD_BY_PLATFORM: Record<LogicalMod, Record<Platform, Record<LegendStyle, string>>> = {\n mod: {\n macos: { auto: '⌘', symbol: '⌘', text: 'Cmd' },\n windows: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n linux: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n },\n shift: {\n macos: { auto: '⇧', symbol: '⇧', text: 'Shift' },\n windows: { auto: '⇧', symbol: '⇧', text: 'Shift' },\n linux: { auto: '⇧', symbol: '⇧', text: 'Shift' },\n },\n alt: {\n macos: { auto: '⌥', symbol: '⌥', text: 'Option' },\n windows: { auto: 'Alt', symbol: 'Alt', text: 'Alt' },\n linux: { auto: 'Alt', symbol: 'Alt', text: 'Alt' },\n },\n ctrl: {\n macos: { auto: '⌃', symbol: '⌃', text: 'Control' },\n windows: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n linux: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n },\n // Windows/Linux Meta has a recognized symbol on the physical key (⊞ Win\n // logo / Super logo), so `auto` shows it. Use `text` for Win / Super.\n meta: {\n macos: { auto: '⌘', symbol: '⌘', text: 'Cmd' },\n windows: { auto: '⊞', symbol: '⊞', text: 'Win' },\n linux: { auto: '⊞', symbol: '⊞', text: 'Super' },\n },\n};\n\n/* Detect the user's OS from the browser environment. UA sniffing — not\n * 100% reliable, but adequate for picking a modifier-glyph convention.\n * Falls back to `'macos'` (matches the kit's docs convention) when\n * `navigator` is unavailable. /\nexport function detectPlatform(): Platform {\n if (typeof navigator === 'undefined') return 'macos';\n // Prefer the modern userAgentData when available (Chromium-only today).\n const uaData = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData;\n const raw = (uaData?.platform ?? navigator.userAgent ?? '').toLowerCase();\n if (raw.includes('mac') \|\| raw.includes('darwin') \|\| raw.includes('iphone') \|\| raw.includes('ipad')) return 'macos';\n if (raw.includes('win')) return 'windows';\n if (raw.includes('linux') \|\| raw.includes('x11')) return 'linux';\n return 'macos';\n}\n\n/\n Map a list of logical modifiers (`'mod'`, `'shift'`, …) to visual\n * `KeySpec`s appropriate for the current platform.\n \n The kit-side gesture grammar uses logical names so the same route reads\n * correctly on every OS — `'mod'` means \"Cmd on Mac, Ctrl on Win/Linux\".\n * `KeySequence` is purely visual and renders the labels you give it; this\n * helper is the bridge.\n \n ```ts\n * <KeySequence\n * keys={keySpecsFromMods([{ name: 'mod' }, { name: 'shift', optional: true }])}\n * />\n * ```\n \n On a Mac: renders `⌘ ⇧`. On Windows: renders `Ctrl Shift`. Pass an\n * explicit `platform` to override detection (e.g. for docs that always\n * show the macOS form). Pass `legend: 'text'` to force \"Cmd\" over \"⌘\"\n * even on macOS.\n /\nexport function keySpecsFromMods(\n mods: readonly LogicalModSpec[],\n opts: KeySpecsFromModsOptions = {},\n): readonly KeySpec[] {\n const platform = opts.platform ?? detectPlatform();\n const legend = opts.legend ?? 'auto';\n return mods.map((m) => {\n const label = MOD_BY_PLATFORM[m.name][platform][legend];\n return m.optional ? { label, optional: true } : { label };\n });\n}\n\n/* Per-platform × per-legend table for named, non-modifier keys. `auto`\n * is whatever's printed on the physical key for that platform. Arrows\n * are universal symbols on every platform. /\nconst NAMED_KEY: Record<string, Record<Platform, Record<LegendStyle, string>>> = {\n Escape: { macos: { auto: '⎋', symbol: '⎋', text: 'Esc' }, windows: { auto: 'Esc', symbol: 'Esc', text: 'Esc' }, linux: { auto: 'Esc', symbol: 'Esc', text: 'Esc' } },\n Enter: { macos: { auto: '↵', symbol: '↵', text: 'Return' }, windows: { auto: 'Enter', symbol: 'Enter', text: 'Enter' }, linux: { auto: 'Enter', symbol: 'Enter', text: 'Enter' } },\n Return: { macos: { auto: '↵', symbol: '↵', text: 'Return' }, windows: { auto: 'Enter', symbol: 'Enter', text: 'Enter' }, linux: { auto: 'Enter', symbol: 'Enter', text: 'Enter' } },\n Tab: { macos: { auto: '⇥', symbol: '⇥', text: 'Tab' }, windows: { auto: 'Tab', symbol: 'Tab', text: 'Tab' }, linux: { auto: 'Tab', symbol: 'Tab', text: 'Tab' } },\n Space: { macos: { auto: '␣', symbol: '␣', text: 'Space' }, windows: { auto: 'Space', symbol: 'Space', text: 'Space' }, linux: { auto: 'Space', symbol: 'Space', text: 'Space' } },\n ' ': { macos: { auto: '␣', symbol: '␣', text: 'Space' }, windows: { auto: 'Space', symbol: 'Space', text: 'Space' }, linux: { auto: 'Space', symbol: 'Space', text: 'Space' } },\n Backspace: { macos: { auto: '⌫', symbol: '⌫', text: 'Backspace' }, windows: { auto: 'Backspace', symbol: 'Backspace', text: 'Backspace' }, linux: { auto: 'Backspace', symbol: 'Backspace', text: 'Backspace' } },\n Delete: { macos: { auto: '⌦', symbol: '⌦', text: 'Delete' }, windows: { auto: 'Delete', symbol: 'Delete', text: 'Delete' }, linux: { auto: 'Delete', symbol: 'Delete', text: 'Delete' } },\n // Context-menu key (the right-Ctrl-area key on Windows / Linux keyboards\n // with a ▤ icon). Mac has no equivalent; falls back to text 'Menu'.\n ContextMenu: { macos: { auto: 'Menu', symbol: 'Menu', text: 'Menu' }, windows: { auto: '▤', symbol: '▤', text: 'Menu' }, linux: { auto: '▤', symbol: '▤', text: 'Menu' } },\n ArrowUp: { macos: { auto: '↑', symbol: '↑', text: '↑' }, windows: { auto: '↑', symbol: '↑', text: '↑' }, linux: { auto: '↑', symbol: '↑', text: '↑' } },\n ArrowDown: { macos: { auto: '↓', symbol: '↓', text: '↓' }, windows: { auto: '↓', symbol: '↓', text: '↓' }, linux: { auto: '↓', symbol: '↓', text: '↓' } },\n ArrowLeft: { macos: { auto: '←', symbol: '←', text: '←' }, windows: { auto: '←', symbol: '←', text: '←' }, linux: { auto: '←', symbol: '←', text: '←' } },\n ArrowRight: { macos: { auto: '→', symbol: '→', text: '→' }, windows: { auto: '→', symbol: '→', text: '→' }, linux: { auto: '→', symbol: '→', text: '→' } },\n};\n\n/\n Render a raw `KeyboardEvent.key` value as a platform-appropriate\n * `KeySpec`. Named non-modifier keys (Esc, Enter, Tab, Space, Backspace,\n * Delete, arrows) get the platform's conventional form. Letter / digit /\n * other keys pass through upper-cased.\n \n ```ts\n * keySpecFromKey('Escape', { platform: 'macos' }) // { label: '⎋' }\n * keySpecFromKey('Escape', { platform: 'windows' }) // { label: 'Esc' }\n * keySpecFromKey('p') // { label: 'P' }\n * ```\n \n Symbol mode is only meaningful on macOS — Windows / Linux keyboards\n * print the text form on the physical key, so symbol mode there falls\n * back to text.\n */\nexport function keySpecFromKey(\n raw: string,\n opts: KeySpecsFromModsOptions & { optional?: boolean } = {},\n): KeySpec {\n const platform = opts.platform ?? detectPlatform();\n const legend = opts.legend ?? 'auto';\n const entry = NAMED_KEY[raw];\n const label = entry ? entry[platform][legend] : raw.length === 1 ? raw.toUpperCase() : raw;\n return opts.optional ? { label, optional: true } : { label };\n}\n"],"mappings":"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"}