npm - @weasel-js/ui - Versions diffs - 1.4.0-pre.1 → 1.4.0 - Mend

@weasel-js/ui 1.4.0-pre.1 → 1.4.0

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 (146) hide show

package/dist/chunks/{GradientEditor-FwNdxxf-.js.map → GradientEditor-C5pPbMa_.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GradientEditor-FwNdxxf-.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 // `useHandleDrag` reports the pointer on move but not on end, so the last\n // position is held here to commit with. It stays null until the pointer\n // actually moves: a press that never moves must not write anything.\n const last = useRef<Point \| null>(null);\n const start = useRef<Point>(at);\n const drag = useHandleDrag<SVGCircleElement>({\n onStart: () => {\n start.current = at;\n last.current = null;\n },\n onMove: (p) => {\n last.current = p;\n onDrag(p, 'input');\n },\n onEnd: (e) => {\n const moved = last.current;\n last.current = null;\n if (moved === null) return;\n // A canceled pointer is not an edit — put the live preview back where\n // the gesture started rather than committing where it was abandoned.\n if (e.type === 'pointercancel') onDrag(start.current, 'input');\n else onDrag(moved, 'commit');\n },\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-C5pPbMa_.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 // `useHandleDrag` reports the pointer on move but not on end, so the last\n // position is held here to commit with. It stays null until the pointer\n // actually moves: a press that never moves must not write anything.\n const last = useRef<Point \| null>(null);\n const start = useRef<Point>(at);\n const drag = useHandleDrag<SVGCircleElement>({\n onStart: () => {\n start.current = at;\n last.current = null;\n },\n onMove: (p) => {\n last.current = p;\n onDrag(p, 'input');\n },\n onEnd: (e) => {\n const moved = last.current;\n last.current = null;\n if (moved === null) return;\n // A canceled pointer is not an edit — put the live preview back where\n // the gesture started rather than committing where it was abandoned.\n if (e.type === 'pointercancel') onDrag(start.current, 'input');\n else onDrag(moved, 'commit');\n },\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/{Icon-CxoJb_bw.js → Icon-DBXtBB1f.js} RENAMED Viewed

@@ -46,6 +46,9 @@ var t = {
 	warning: "<path d=\"M10 3.4 17.4 16.2H2.6z\"/><path d=\"M10 8.4v3.4\"/><path d=\"M10 14h0\"/>",
 	error: "<circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M7.6 7.6 12.4 12.4M12.4 7.6 7.6 12.4\"/>",
 	busy: "<path d=\"M10 3.2A6.8 6.8 0 1 1 3.2 10\"/>",
+	modeLight: "<circle cx=\"10\" cy=\"10\" r=\"3.5\"/><path d=\"M15.3 10L17.7 10M13.75 6.25L15.44 4.56M10 4.7L10 2.3M6.25 6.25L4.56 4.56M4.7 10L2.3 10M6.25 13.75L4.56 15.44M10 15.3L10 17.7M13.75 13.75L15.44 15.44\"/>",
+	modeDark: "<path d=\"M8.19 3.55A6.7 6.7 0 1 0 16.45 11.81A5.9 5.9 0 0 1 8.19 3.55Z\"/>",
+	modeAuto: "<path d=\"M10 2.6Q10 10 17.4 10Q10 10 10 17.4Q10 10 2.6 10Q10 10 10 2.6Z\"/>",
 	strokeWidth: "<path d=\"M3.4 5.6h13.2\" stroke-width=\"1\"/><path d=\"M3.4 10h13.2\" stroke-width=\"2\"/><path d=\"M3.4 15.2h13.2\" stroke-width=\"3.4\"/>",
 	strokeCap: "<path d=\"M2.5 10H12\" stroke-linecap=\"butt\"/><path d=\"M12 6V14\" stroke-width=\"1\"/>",
 	strokeJoin: "<path d=\"M4.4 15.5 10 5.5 15.6 15.5\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\"/>",
@@ -68,7 +71,10 @@ var t = {
 	paintRadial: "<path d=\"M3.4 3.4H16.6V16.6H3.4ZM4.95 4.95H15.05V15.05H4.95Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.7\"/><path d=\"M4.95 4.95H15.05V15.05H4.95ZM6.5 6.5H13.5V13.5H6.5Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.53\"/><path d=\"M6.5 6.5H13.5V13.5H6.5ZM8.05 8.05H11.95V11.95H8.05Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.37\"/><path d=\"M8.05 8.05H11.95V11.95H8.05Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.2\"/>",
 	paintConic: "<path d=\"M10 10L16.6 3.4L16.6 16.6Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/><path d=\"M10 10L16.6 16.6L3.4 16.6Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.68\"/><path d=\"M10 10L3.4 16.6L3.4 3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.42\"/><path d=\"M10 10L3.4 3.4L16.6 3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.2\"/>",
 	paintPattern: "<path d=\"M3.4 3.4L4.7 3.4L3.4 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M8.7 3.4L11.3 3.4L3.4 11.3L3.4 8.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M15.3 3.4L16.6 3.4L16.6 4.7L4.7 16.6L3.4 16.6L3.4 15.3Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M16.6 8.7L16.6 11.3L11.3 16.6L8.7 16.6Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M16.6 15.3L16.6 16.6L15.3 16.6Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M15.3 3.4L16.6 3.4L16.6 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M8.7 3.4L11.3 3.4L16.6 8.7L16.6 11.3Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M3.4 3.4L4.7 3.4L16.6 15.3L16.6 16.6L15.3 16.6L3.4 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M11.3 16.6L8.7 16.6L3.4 11.3L3.4 8.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M4.7 16.6L3.4 16.6L3.4 15.3Z\" fill=\"currentColor\" stroke=\"none\"/>",
-	paintNone: "<path d=\"M3.4 3.4H16.6V16.6H3.4Z\"/><path d=\"M3.4 16.6L16.6 3.4\" stroke=\"var(--wzl-danger, #d94a3f)\" stroke-width=\"1.8\" stroke-linecap=\"butt\"/>"
+	paintNone: "<path d=\"M3.4 3.4H16.6V16.6H3.4Z\"/><path d=\"M3.4 16.6L16.6 3.4\" stroke=\"var(--wzl-danger, #d94a3f)\" stroke-width=\"1.8\" stroke-linecap=\"butt\"/>",
+	layoutRows: "<rect x=\"3.4\" y=\"3.4\" width=\"13.2\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"3.4\" y=\"8.3\" width=\"13.2\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"3.4\" y=\"13.2\" width=\"13.2\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/>",
+	layoutColumns: "<rect x=\"3.4\" y=\"3.4\" width=\"3.4\" height=\"13.2\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"8.3\" y=\"3.4\" width=\"3.4\" height=\"13.2\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"13.2\" y=\"3.4\" width=\"3.4\" height=\"13.2\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/>",
+	layoutGrid: "<rect x=\"3.4\" y=\"3.4\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"8.3\" y=\"3.4\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"13.2\" y=\"3.4\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"3.4\" y=\"8.3\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"8.3\" y=\"8.3\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"13.2\" y=\"8.3\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"3.4\" y=\"13.2\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"8.3\" y=\"13.2\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"13.2\" y=\"13.2\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/>"
 }, n = {
 	viewBox: "0 0 20 20",
 	fill: "none",
@@ -92,4 +98,4 @@ function r({ name: r, className: i, size: a = 20, label: o }) {
 //#endregion
 export { t as n, r as t };
-//# sourceMappingURL=Icon-CxoJb_bw.js.map
+//# sourceMappingURL=Icon-DBXtBB1f.js.map

package/dist/chunks/{Icon-CxoJb_bw.js.map → Icon-DBXtBB1f.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon-CxoJb_bw.js","names":[],"sources":["../../src/icons/paths.ts","../../src/icons/Icon.tsx"],"sourcesContent":["// GENERATED by scripts/gen-icons.mjs — do not edit by hand.\n// Every glyph is a 20x20 viewBox drawn in currentColor at stroke-width 1.5.\n\nexport const ICON_PATHS = {\n\n // View and lifecycle\n clone: `<path d=\"M7 7.4V4.6A1.6 1.6 0 0 1 8.6 3h6.8A1.6 1.6 0 0 1 17 4.6v6.8a1.6 1.6 0 0 1-1.6 1.6H12.6\" stroke-linecap=\"butt\"/><rect x=\"3\" y=\"7\" width=\"10\" height=\"10\" rx=\"1.6\"/><path d=\"M5.7 10.8h4.6M5.7 13.4h3\" stroke-width=\"1\"/>`,\n reset: `<path d=\"M7.28 4.88A5.8 5.8 0 1 0 12.72 4.88\"/><path d=\"M13.81 7.57 12.72 4.88 15.56 4.28\"/>`,\n close: `<path d=\"M5 5 15 15M15 5 5 15\" stroke-width=\"1.75\"/>`,\n export: `<path d=\"M4 12.6v2.9A1.5 1.5 0 0 0 5.5 17h9a1.5 1.5 0 0 0 1.5-1.5v-2.9\"/><path d=\"M10 3.2v8.5\"/><path d=\"M11.7 9.35 10 11.7 8.3 9.35\"/><path d=\"M6.8 14.7h6.4\" stroke-width=\"1\"/>`,\n zoomIn: `<circle cx=\"9\" cy=\"9\" r=\"5.4\"/><path d=\"M12.82 12.82 16.9 16.9\"/><path d=\"M9 6.7v4.6M6.7 9h4.6\"/>`,\n pan: `<path d=\"M10 8.1V3.2M10 11.9V16.8M8.1 10H3.2M11.9 10H16.8\"/><path d=\"M8.26 5.27 10 3.2 11.74 5.27M11.74 14.73 10 16.8 8.26 14.73M5.27 11.74 3.2 10 5.27 8.26M14.73 8.26 16.8 10 14.73 11.74\"/><circle cx=\"10\" cy=\"10\" r=\"1.9\"/>`,\n\n // Actions\n add: `<path d=\"M10 4.9v10.2M4.9 10h10.2\"/>`,\n remove: `<path d=\"M4.9 10h10.2\"/>`,\n delete: `<path d=\"M3.6 5.8h12.8M8 5.8V4.5A1.1 1.1 0 0 1 9.1 3.4h1.8A1.1 1.1 0 0 1 12 4.5v1.3\"/><path d=\"M5.2 5.8v9.6A1.6 1.6 0 0 0 6.8 17h6.4a1.6 1.6 0 0 0 1.6-1.6V5.8\"/><path d=\"M8.4 8.8v5.2M11.6 8.8v5.2\" stroke-width=\"1\"/>`,\n sort: `<path d=\"M3.6 5.6h7.2M3.6 10h8.8M3.6 14.4h5\"/><path d=\"M15.3 5.4v9.4\"/><path d=\"M16.97 12.81 15.3 14.8 13.63 12.81\"/>`,\n undo: `<path d=\"M4.4 8.4h6.8a3.6 3.6 0 0 1 0 7.2H8.6\"/><path d=\"M6.47 10.14 4.4 8.4 6.47 6.66\"/>`,\n redo: `<path d=\"M15.6 8.4H8.8a3.6 3.6 0 0 0 0 7.2H11.4\"/><path d=\"M13.53 6.66 15.6 8.4 13.53 10.14\"/>`,\n zoomOut: `<circle cx=\"9\" cy=\"9\" r=\"5.4\"/><path d=\"M12.82 12.82 16.9 16.9\"/><path d=\"M6.7 9h4.6\"/>`,\n fit: `<path d=\"M3.2 7.2V4.4A1.2 1.2 0 0 1 4.4 3.2h2.8M12.8 3.2h2.8A1.2 1.2 0 0 1 16.8 4.4v2.8M16.8 12.8v2.8a1.2 1.2 0 0 1-1.2 1.2h-2.8M7.2 16.8H4.4a1.2 1.2 0 0 1-1.2-1.2v-2.8\"/><rect x=\"7.4\" y=\"8.2\" width=\"5.2\" height=\"3.6\" rx=\"0.8\" stroke-width=\"1\"/>`,\n snapshot: `<path d=\"M3.8 8.3A1.4 1.4 0 0 1 5.2 6.9h1.9L8 5.1h4l.9 1.8h1.9A1.4 1.4 0 0 1 16.2 8.3v6A1.4 1.4 0 0 1 14.8 15.7H5.2A1.4 1.4 0 0 1 3.8 14.3z\"/><circle cx=\"10\" cy=\"11\" r=\"2.75\"/>`,\n\n // State and instrument\n play: `<path d=\"M7.6 5.2 15.6 10 7.6 14.8Z\"/>`,\n pause: `<path d=\"M7.8 5.2v9.6M12.2 5.2v9.6\"/>`,\n stop: `<rect x=\"5.6\" y=\"5.6\" width=\"8.8\" height=\"8.8\" rx=\"1.4\"/>`,\n step: `<path d=\"M6.4 5.4 13 10 6.4 14.6Z\"/><path d=\"M15.2 5.4v9.2\"/>`,\n crosshair: `<circle cx=\"10\" cy=\"10\" r=\"5.6\"/><path d=\"M10 2.8v4.4M10 12.8v4.4M2.8 10h4.4M12.8 10h4.4\"/>`,\n fullscreen: `<path d=\"M11.6 3.6h4.8v4.8M8.4 16.4H3.6v-4.8\"/><path d=\"M16.4 3.6 11.2 8.8M3.6 16.4 8.8 11.2\"/>`,\n compare: `<rect x=\"3.4\" y=\"4.6\" width=\"13.2\" height=\"10.8\" rx=\"1.6\"/><path d=\"M10 4.6v10.8\" stroke-width=\"1\"/><path d=\"M5.2 7.6h3.4M5.2 10h2.6M5.2 12.4h3.4\" stroke-width=\"1\"/><path d=\"M11.4 7.6h3.4M11.4 10h3.4M11.4 12.4h1.8\" stroke-width=\"1\"/>`,\n filter: `<path d=\"M3.4 4.6h13.2L11.8 11v5.4L8.2 14.8V11z\"/>`,\n search: `<circle cx=\"9\" cy=\"9\" r=\"5.4\"/><path d=\"M12.82 12.82 16.9 16.9\"/>`,\n loupe: `<circle cx=\"9\" cy=\"9\" r=\"5.6\"/><path d=\"M12.96 12.96 17 17\"/><rect x=\"6\" y=\"6\" width=\"6\" height=\"6\" stroke-width=\"1\"/><path d=\"M9 6v6M6 9h6\" stroke-width=\"1\"/>`,\n layers: `<path d=\"M10 2.8 17.2 6.6 10 10.4 2.8 6.6z\"/><path d=\"M2.8 10 10 13.8 17.2 10\" stroke-width=\"1\"/><path d=\"M2.8 13.4 10 17.2 17.2 13.4\" stroke-width=\"1\"/>`,\n lock: `<rect x=\"4.6\" y=\"9\" width=\"10.8\" height=\"8\" rx=\"1.6\"/><path d=\"M7.2 9V6.6a2.8 2.8 0 0 1 5.6 0V9\"/>`,\n unlock: `<rect x=\"4.6\" y=\"9\" width=\"10.8\" height=\"8\" rx=\"1.6\"/><path d=\"M7.2 9V6.6a2.8 2.8 0 0 1 5.6 0\"/>`,\n visible: `<path d=\"M2.6 10C4.6 6.6 7.1 5 10 5s5.4 1.6 7.4 5c-2 3.4-4.5 5-7.4 5s-5.4-1.6-7.4-5z\"/><circle cx=\"10\" cy=\"10\" r=\"2.2\"/>`,\n hidden: `<path d=\"M2.6 10C4.6 6.6 7.1 5 10 5s5.4 1.6 7.4 5c-2 3.4-4.5 5-7.4 5s-5.4-1.6-7.4-5z\"/><circle cx=\"10\" cy=\"10\" r=\"2.2\"/><path d=\"M4.2 15.8 15.8 4.2\"/>`,\n pin: `<path d=\"M8.2 3.4v5.2l-2 2.6h7.6l-2-2.6V3.4z\"/><path d=\"M7 3.4h6\"/><path d=\"M10 11.2v5.4\"/>`,\n link: `<path d=\"M8.6 11.4a3.4 3.4 0 0 1 0-4.8l2.2-2.2a3.4 3.4 0 0 1 4.8 4.8l-1.1 1.1\"/><path d=\"M11.4 8.6a3.4 3.4 0 0 1 0 4.8l-2.2 2.2a3.4 3.4 0 0 1-4.8-4.8l1.1-1.1\"/>`,\n collapse: `<path d=\"M14.16 4.05 10 7.8 5.84 4.05M5.84 15.95 10 12.2 14.16 15.95\"/>`,\n expand: `<path d=\"M5.84 8.15 10 4.4 14.16 8.15M14.16 11.85 10 15.6 5.84 11.85\"/>`,\n chevron: `<path d=\"M14.9 7.98 10 12.4 5.1 7.98\"/>`,\n tune: `<path d=\"M3.4 6h13.2M3.4 10h13.2M3.4 14h13.2\" stroke-width=\"1.25\"/><circle cx=\"7\" cy=\"6\" r=\"1.8\"/><circle cx=\"12.6\" cy=\"10\" r=\"1.8\"/><circle cx=\"9\" cy=\"14\" r=\"1.8\"/>`,\n grid: `<rect x=\"3.4\" y=\"3.4\" width=\"13.2\" height=\"13.2\" rx=\"1.4\"/><path d=\"M7.8 3.4v13.2M12.2 3.4v13.2M3.4 7.8h13.2M3.4 12.2h13.2\" stroke-width=\"1\"/>`,\n snap: `<path d=\"M5.4 15.6V9.4a4.6 4.6 0 0 1 9.2 0v6.2h-3.2V9.4a1.4 1.4 0 0 0-2.8 0v6.2z\"/><path d=\"M5.4 12.8h3.2M11.4 12.8h3.2\" stroke-width=\"1\"/>`,\n measure: `<rect x=\"2.6\" y=\"7.4\" width=\"14.8\" height=\"5.2\" rx=\"1.2\"/><path d=\"M6 7.4v2.2M9.4 7.4v3M12.8 7.4v2.2\" stroke-width=\"1\"/>`,\n randomize: `<rect x=\"3.6\" y=\"3.6\" width=\"12.8\" height=\"12.8\" rx=\"2\"/><circle cx=\"7.2\" cy=\"7.2\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"12.8\" cy=\"12.8\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/>`,\n refresh: `<path d=\"M4.27 12.09A6.1 6.1 0 0 1 14.67 6.08\"/><path d=\"M14.67 3.38 14.67 6.08 12.01 5.61\"/><path d=\"M15.73 7.91A6.1 6.1 0 0 1 5.33 13.92\"/><path d=\"M5.33 16.62 5.33 13.92 7.99 14.39\"/>`,\n info: `<circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M10 9.4v4.4\"/><path d=\"M10 6.5h0\"/>`,\n warning: `<path d=\"M10 3.4 17.4 16.2H2.6z\"/><path d=\"M10 8.4v3.4\"/><path d=\"M10 14h0\"/>`,\n error: `<circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M7.6 7.6 12.4 12.4M12.4 7.6 7.6 12.4\"/>`,\n busy: `<path d=\"M10 3.2A6.8 6.8 0 1 1 3.2 10\"/>`,\n\n // Stroke cap, join, align and dash\n strokeWidth: `<path d=\"M3.4 5.6h13.2\" stroke-width=\"1\"/><path d=\"M3.4 10h13.2\" stroke-width=\"2\"/><path d=\"M3.4 15.2h13.2\" stroke-width=\"3.4\"/>`,\n strokeCap: `<path d=\"M2.5 10H12\" stroke-linecap=\"butt\"/><path d=\"M12 6V14\" stroke-width=\"1\"/>`,\n strokeJoin: `<path d=\"M4.4 15.5 10 5.5 15.6 15.5\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\"/>`,\n strokeAlign: `<circle cx=\"10\" cy=\"10\" r=\"6.2\"/>`,\n capButt: `<path d=\"M5.5 5.25H14.5V14.75H5.5Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"miter\"/>`,\n capRound: `<path d=\"M3.13 5.25H12.13V14.75H3.13Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"miter\"/><path d=\"M12.13 4.5A5.5 5.5 0 0 1 12.13 15.5Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n capSquare: `<path d=\"M3.13 5.25H12.13V14.75H3.13Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"miter\"/><path d=\"M12.13 4.5H17.63V15.5H12.13Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n joinMiter: `<path d=\"M10 3.5 15.6 15.5H4.4Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n joinRound: `<path d=\"M4.4 15.5V12a5.6 5.6 0 0 1 11.2 0v3.5Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n joinBevel: `<path d=\"M6.8 8.2h6.4l2.4 7.3H4.4Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n alignInner: `<path d=\"M10 3.8A6.2 6.2 0 1 0 10 16.2A6.2 6.2 0 1 0 10 3.8Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n alignCenter: `<path d=\"M10 2.1A7.9 7.9 0 1 0 10 17.9A7.9 7.9 0 1 0 10 2.1ZM10 5.5A4.5 4.5 0 1 0 10 14.5A4.5 4.5 0 1 0 10 5.5Z\" fill=\"currentColor\" stroke=\"none\" fill-rule=\"evenodd\"/>`,\n alignOuter: `<path d=\"M0 0H20V20H0ZM10 3.8A6.2 6.2 0 1 0 10 16.2A6.2 6.2 0 1 0 10 3.8Z\" fill=\"currentColor\" stroke=\"none\" fill-rule=\"evenodd\"/>`,\n dashSolid: `<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\"/>`,\n dashDashed: `<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\" stroke-dasharray=\"6 4\"/>`,\n dashDotted: `<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\" stroke-dasharray=\"2.5 2\"/>`,\n dashCustom: `<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\" stroke-dasharray=\"5 2 2 2\"/>`,\n paintSolid: `<path d=\"M3.4 3.4H16.6V16.6H3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/>`,\n paintLinear: `<path d=\"M3.4 3.4H6.7V16.6H3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/><path d=\"M6.7 3.4H10V16.6H6.7Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.68\"/><path d=\"M10 3.4H13.3V16.6H10Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.42\"/><path d=\"M13.3 3.4H16.6V16.6H13.3Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.2\"/>`,\n paintRadial: `<path d=\"M3.4 3.4H16.6V16.6H3.4ZM4.95 4.95H15.05V15.05H4.95Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.7\"/><path d=\"M4.95 4.95H15.05V15.05H4.95ZM6.5 6.5H13.5V13.5H6.5Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.53\"/><path d=\"M6.5 6.5H13.5V13.5H6.5ZM8.05 8.05H11.95V11.95H8.05Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.37\"/><path d=\"M8.05 8.05H11.95V11.95H8.05Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.2\"/>`,\n paintConic: `<path d=\"M10 10L16.6 3.4L16.6 16.6Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/><path d=\"M10 10L16.6 16.6L3.4 16.6Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.68\"/><path d=\"M10 10L3.4 16.6L3.4 3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.42\"/><path d=\"M10 10L3.4 3.4L16.6 3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.2\"/>`,\n paintPattern: `<path d=\"M3.4 3.4L4.7 3.4L3.4 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M8.7 3.4L11.3 3.4L3.4 11.3L3.4 8.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M15.3 3.4L16.6 3.4L16.6 4.7L4.7 16.6L3.4 16.6L3.4 15.3Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M16.6 8.7L16.6 11.3L11.3 16.6L8.7 16.6Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M16.6 15.3L16.6 16.6L15.3 16.6Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M15.3 3.4L16.6 3.4L16.6 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M8.7 3.4L11.3 3.4L16.6 8.7L16.6 11.3Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M3.4 3.4L4.7 3.4L16.6 15.3L16.6 16.6L15.3 16.6L3.4 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M11.3 16.6L8.7 16.6L3.4 11.3L3.4 8.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M4.7 16.6L3.4 16.6L3.4 15.3Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n paintNone: `<path d=\"M3.4 3.4H16.6V16.6H3.4Z\"/><path d=\"M3.4 16.6L16.6 3.4\" stroke=\"var(--wzl-danger, #d94a3f)\" stroke-width=\"1.8\" stroke-linecap=\"butt\"/>`,\n} as const;\n\n/** Every glyph name in the set. /\nexport type IconName = keyof typeof ICON_PATHS;\n","import type { SVGProps } from 'react';\nimport { ICON_PATHS, type IconName } from './paths';\n\n/* Shared prop shape for the icon set. Color comes from the surrounding\n * `color` CSS property — every glyph strokes in `currentColor`. /\nexport interface IconProps {\n className?: string;\n /* Rendered pixel size, applied to both width and height. Defaults to 20. /\n size?: number;\n /* Accessible name. Omit inside a button that already labels itself; the\n * glyph is then `aria-hidden`. /\n label?: string;\n}\n\nconst SVG_BASE: SVGProps<SVGSVGElement> = {\n viewBox: '0 0 20 20',\n fill: 'none',\n stroke: 'currentColor',\n strokeWidth: 1.5,\n strokeLinecap: 'round',\n strokeLinejoin: 'round',\n};\n\n/* Renders one glyph by name. The named components below are the usual way\n * in; reach for this when the glyph is chosen at runtime. */\nexport function Icon({ name, className, size = 20, label }: IconProps & { name: IconName }) {\n return (\n <svg\n {...SVG_BASE}\n className={className}\n width={size}\n height={size}\n role={label ? 'img' : undefined}\n aria-label={label}\n aria-hidden={label ? undefined : true}\n // Glyph bodies are generated from scripts/icons/ and contain no\n // interpolated input.\n dangerouslySetInnerHTML={{ __html: ICON_PATHS[name] }}\n />\n );\n}\n"],"mappings":";;AAGA,IAAa,IAAa;CAGxB,OAAO;CACP,OAAO;CACP,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,KAAK;CAGL,KAAK;CACL,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,MAAM;CACN,MAAM;CACN,SAAS;CACT,KAAK;CACL,UAAU;CAGV,MAAM;CACN,OAAO;CACP,MAAM;CACN,MAAM;CACN,WAAW;CACX,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,KAAK;CACL,MAAM;CACN,UAAU;CACV,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;CACN,MAAM;CACN,SAAS;CACT,WAAW;CACX,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;CACP,MAAM;CAGN,aAAa;CACb,WAAW;CACX,YAAY;CACZ,aAAa;CACb,SAAS;CACT,UAAU;CACV,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACX,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,WAAW;CACX,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,aAAa;CACb,YAAY;CACZ,cAAc;CACd,WAAW;CACZ,EClEK,IAAoC;CACxC,SAAS;CACT,MAAM;CACN,QAAQ;CACR,aAAa;CACb,eAAe;CACf,gBAAgB;CACjB;AAID,SAAgB,EAAK,EAAE,SAAM,cAAW,UAAO,IAAI,YAAyC;AAC1F,QACE,kBAAC,OAAD;EACE,GAAI;EACO;EACX,OAAO;EACP,QAAQ;EACR,MAAM,IAAQ,QAAQ,KAAA;EACtB,cAAY;EACZ,eAAa,IAAQ,KAAA,IAAY;EAGjC,yBAAyB,EAAE,QAAQ,EAAW,IAAO;EACrD,CAAA"}
1	+ {"version":3,"file":"Icon-DBXtBB1f.js","names":[],"sources":["../../src/icons/paths.ts","../../src/icons/Icon.tsx"],"sourcesContent":["// GENERATED by scripts/gen-icons.mjs — do not edit by hand.\n// Every glyph is a 20x20 viewBox drawn in currentColor at stroke-width 1.5.\n\nexport const ICON_PATHS = {\n\n // View and lifecycle\n clone: `<path d=\"M7 7.4V4.6A1.6 1.6 0 0 1 8.6 3h6.8A1.6 1.6 0 0 1 17 4.6v6.8a1.6 1.6 0 0 1-1.6 1.6H12.6\" stroke-linecap=\"butt\"/><rect x=\"3\" y=\"7\" width=\"10\" height=\"10\" rx=\"1.6\"/><path d=\"M5.7 10.8h4.6M5.7 13.4h3\" stroke-width=\"1\"/>`,\n reset: `<path d=\"M7.28 4.88A5.8 5.8 0 1 0 12.72 4.88\"/><path d=\"M13.81 7.57 12.72 4.88 15.56 4.28\"/>`,\n close: `<path d=\"M5 5 15 15M15 5 5 15\" stroke-width=\"1.75\"/>`,\n export: `<path d=\"M4 12.6v2.9A1.5 1.5 0 0 0 5.5 17h9a1.5 1.5 0 0 0 1.5-1.5v-2.9\"/><path d=\"M10 3.2v8.5\"/><path d=\"M11.7 9.35 10 11.7 8.3 9.35\"/><path d=\"M6.8 14.7h6.4\" stroke-width=\"1\"/>`,\n zoomIn: `<circle cx=\"9\" cy=\"9\" r=\"5.4\"/><path d=\"M12.82 12.82 16.9 16.9\"/><path d=\"M9 6.7v4.6M6.7 9h4.6\"/>`,\n pan: `<path d=\"M10 8.1V3.2M10 11.9V16.8M8.1 10H3.2M11.9 10H16.8\"/><path d=\"M8.26 5.27 10 3.2 11.74 5.27M11.74 14.73 10 16.8 8.26 14.73M5.27 11.74 3.2 10 5.27 8.26M14.73 8.26 16.8 10 14.73 11.74\"/><circle cx=\"10\" cy=\"10\" r=\"1.9\"/>`,\n\n // Actions\n add: `<path d=\"M10 4.9v10.2M4.9 10h10.2\"/>`,\n remove: `<path d=\"M4.9 10h10.2\"/>`,\n delete: `<path d=\"M3.6 5.8h12.8M8 5.8V4.5A1.1 1.1 0 0 1 9.1 3.4h1.8A1.1 1.1 0 0 1 12 4.5v1.3\"/><path d=\"M5.2 5.8v9.6A1.6 1.6 0 0 0 6.8 17h6.4a1.6 1.6 0 0 0 1.6-1.6V5.8\"/><path d=\"M8.4 8.8v5.2M11.6 8.8v5.2\" stroke-width=\"1\"/>`,\n sort: `<path d=\"M3.6 5.6h7.2M3.6 10h8.8M3.6 14.4h5\"/><path d=\"M15.3 5.4v9.4\"/><path d=\"M16.97 12.81 15.3 14.8 13.63 12.81\"/>`,\n undo: `<path d=\"M4.4 8.4h6.8a3.6 3.6 0 0 1 0 7.2H8.6\"/><path d=\"M6.47 10.14 4.4 8.4 6.47 6.66\"/>`,\n redo: `<path d=\"M15.6 8.4H8.8a3.6 3.6 0 0 0 0 7.2H11.4\"/><path d=\"M13.53 6.66 15.6 8.4 13.53 10.14\"/>`,\n zoomOut: `<circle cx=\"9\" cy=\"9\" r=\"5.4\"/><path d=\"M12.82 12.82 16.9 16.9\"/><path d=\"M6.7 9h4.6\"/>`,\n fit: `<path d=\"M3.2 7.2V4.4A1.2 1.2 0 0 1 4.4 3.2h2.8M12.8 3.2h2.8A1.2 1.2 0 0 1 16.8 4.4v2.8M16.8 12.8v2.8a1.2 1.2 0 0 1-1.2 1.2h-2.8M7.2 16.8H4.4a1.2 1.2 0 0 1-1.2-1.2v-2.8\"/><rect x=\"7.4\" y=\"8.2\" width=\"5.2\" height=\"3.6\" rx=\"0.8\" stroke-width=\"1\"/>`,\n snapshot: `<path d=\"M3.8 8.3A1.4 1.4 0 0 1 5.2 6.9h1.9L8 5.1h4l.9 1.8h1.9A1.4 1.4 0 0 1 16.2 8.3v6A1.4 1.4 0 0 1 14.8 15.7H5.2A1.4 1.4 0 0 1 3.8 14.3z\"/><circle cx=\"10\" cy=\"11\" r=\"2.75\"/>`,\n\n // State and instrument\n play: `<path d=\"M7.6 5.2 15.6 10 7.6 14.8Z\"/>`,\n pause: `<path d=\"M7.8 5.2v9.6M12.2 5.2v9.6\"/>`,\n stop: `<rect x=\"5.6\" y=\"5.6\" width=\"8.8\" height=\"8.8\" rx=\"1.4\"/>`,\n step: `<path d=\"M6.4 5.4 13 10 6.4 14.6Z\"/><path d=\"M15.2 5.4v9.2\"/>`,\n crosshair: `<circle cx=\"10\" cy=\"10\" r=\"5.6\"/><path d=\"M10 2.8v4.4M10 12.8v4.4M2.8 10h4.4M12.8 10h4.4\"/>`,\n fullscreen: `<path d=\"M11.6 3.6h4.8v4.8M8.4 16.4H3.6v-4.8\"/><path d=\"M16.4 3.6 11.2 8.8M3.6 16.4 8.8 11.2\"/>`,\n compare: `<rect x=\"3.4\" y=\"4.6\" width=\"13.2\" height=\"10.8\" rx=\"1.6\"/><path d=\"M10 4.6v10.8\" stroke-width=\"1\"/><path d=\"M5.2 7.6h3.4M5.2 10h2.6M5.2 12.4h3.4\" stroke-width=\"1\"/><path d=\"M11.4 7.6h3.4M11.4 10h3.4M11.4 12.4h1.8\" stroke-width=\"1\"/>`,\n filter: `<path d=\"M3.4 4.6h13.2L11.8 11v5.4L8.2 14.8V11z\"/>`,\n search: `<circle cx=\"9\" cy=\"9\" r=\"5.4\"/><path d=\"M12.82 12.82 16.9 16.9\"/>`,\n loupe: `<circle cx=\"9\" cy=\"9\" r=\"5.6\"/><path d=\"M12.96 12.96 17 17\"/><rect x=\"6\" y=\"6\" width=\"6\" height=\"6\" stroke-width=\"1\"/><path d=\"M9 6v6M6 9h6\" stroke-width=\"1\"/>`,\n layers: `<path d=\"M10 2.8 17.2 6.6 10 10.4 2.8 6.6z\"/><path d=\"M2.8 10 10 13.8 17.2 10\" stroke-width=\"1\"/><path d=\"M2.8 13.4 10 17.2 17.2 13.4\" stroke-width=\"1\"/>`,\n lock: `<rect x=\"4.6\" y=\"9\" width=\"10.8\" height=\"8\" rx=\"1.6\"/><path d=\"M7.2 9V6.6a2.8 2.8 0 0 1 5.6 0V9\"/>`,\n unlock: `<rect x=\"4.6\" y=\"9\" width=\"10.8\" height=\"8\" rx=\"1.6\"/><path d=\"M7.2 9V6.6a2.8 2.8 0 0 1 5.6 0\"/>`,\n visible: `<path d=\"M2.6 10C4.6 6.6 7.1 5 10 5s5.4 1.6 7.4 5c-2 3.4-4.5 5-7.4 5s-5.4-1.6-7.4-5z\"/><circle cx=\"10\" cy=\"10\" r=\"2.2\"/>`,\n hidden: `<path d=\"M2.6 10C4.6 6.6 7.1 5 10 5s5.4 1.6 7.4 5c-2 3.4-4.5 5-7.4 5s-5.4-1.6-7.4-5z\"/><circle cx=\"10\" cy=\"10\" r=\"2.2\"/><path d=\"M4.2 15.8 15.8 4.2\"/>`,\n pin: `<path d=\"M8.2 3.4v5.2l-2 2.6h7.6l-2-2.6V3.4z\"/><path d=\"M7 3.4h6\"/><path d=\"M10 11.2v5.4\"/>`,\n link: `<path d=\"M8.6 11.4a3.4 3.4 0 0 1 0-4.8l2.2-2.2a3.4 3.4 0 0 1 4.8 4.8l-1.1 1.1\"/><path d=\"M11.4 8.6a3.4 3.4 0 0 1 0 4.8l-2.2 2.2a3.4 3.4 0 0 1-4.8-4.8l1.1-1.1\"/>`,\n collapse: `<path d=\"M14.16 4.05 10 7.8 5.84 4.05M5.84 15.95 10 12.2 14.16 15.95\"/>`,\n expand: `<path d=\"M5.84 8.15 10 4.4 14.16 8.15M14.16 11.85 10 15.6 5.84 11.85\"/>`,\n chevron: `<path d=\"M14.9 7.98 10 12.4 5.1 7.98\"/>`,\n tune: `<path d=\"M3.4 6h13.2M3.4 10h13.2M3.4 14h13.2\" stroke-width=\"1.25\"/><circle cx=\"7\" cy=\"6\" r=\"1.8\"/><circle cx=\"12.6\" cy=\"10\" r=\"1.8\"/><circle cx=\"9\" cy=\"14\" r=\"1.8\"/>`,\n grid: `<rect x=\"3.4\" y=\"3.4\" width=\"13.2\" height=\"13.2\" rx=\"1.4\"/><path d=\"M7.8 3.4v13.2M12.2 3.4v13.2M3.4 7.8h13.2M3.4 12.2h13.2\" stroke-width=\"1\"/>`,\n snap: `<path d=\"M5.4 15.6V9.4a4.6 4.6 0 0 1 9.2 0v6.2h-3.2V9.4a1.4 1.4 0 0 0-2.8 0v6.2z\"/><path d=\"M5.4 12.8h3.2M11.4 12.8h3.2\" stroke-width=\"1\"/>`,\n measure: `<rect x=\"2.6\" y=\"7.4\" width=\"14.8\" height=\"5.2\" rx=\"1.2\"/><path d=\"M6 7.4v2.2M9.4 7.4v3M12.8 7.4v2.2\" stroke-width=\"1\"/>`,\n randomize: `<rect x=\"3.6\" y=\"3.6\" width=\"12.8\" height=\"12.8\" rx=\"2\"/><circle cx=\"7.2\" cy=\"7.2\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"12.8\" cy=\"12.8\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/>`,\n refresh: `<path d=\"M4.27 12.09A6.1 6.1 0 0 1 14.67 6.08\"/><path d=\"M14.67 3.38 14.67 6.08 12.01 5.61\"/><path d=\"M15.73 7.91A6.1 6.1 0 0 1 5.33 13.92\"/><path d=\"M5.33 16.62 5.33 13.92 7.99 14.39\"/>`,\n info: `<circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M10 9.4v4.4\"/><path d=\"M10 6.5h0\"/>`,\n warning: `<path d=\"M10 3.4 17.4 16.2H2.6z\"/><path d=\"M10 8.4v3.4\"/><path d=\"M10 14h0\"/>`,\n error: `<circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M7.6 7.6 12.4 12.4M12.4 7.6 7.6 12.4\"/>`,\n busy: `<path d=\"M10 3.2A6.8 6.8 0 1 1 3.2 10\"/>`,\n modeLight: `<circle cx=\"10\" cy=\"10\" r=\"3.5\"/><path d=\"M15.3 10L17.7 10M13.75 6.25L15.44 4.56M10 4.7L10 2.3M6.25 6.25L4.56 4.56M4.7 10L2.3 10M6.25 13.75L4.56 15.44M10 15.3L10 17.7M13.75 13.75L15.44 15.44\"/>`,\n modeDark: `<path d=\"M8.19 3.55A6.7 6.7 0 1 0 16.45 11.81A5.9 5.9 0 0 1 8.19 3.55Z\"/>`,\n modeAuto: `<path d=\"M10 2.6Q10 10 17.4 10Q10 10 10 17.4Q10 10 2.6 10Q10 10 10 2.6Z\"/>`,\n\n // Stroke cap, join, align and dash\n strokeWidth: `<path d=\"M3.4 5.6h13.2\" stroke-width=\"1\"/><path d=\"M3.4 10h13.2\" stroke-width=\"2\"/><path d=\"M3.4 15.2h13.2\" stroke-width=\"3.4\"/>`,\n strokeCap: `<path d=\"M2.5 10H12\" stroke-linecap=\"butt\"/><path d=\"M12 6V14\" stroke-width=\"1\"/>`,\n strokeJoin: `<path d=\"M4.4 15.5 10 5.5 15.6 15.5\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\"/>`,\n strokeAlign: `<circle cx=\"10\" cy=\"10\" r=\"6.2\"/>`,\n capButt: `<path d=\"M5.5 5.25H14.5V14.75H5.5Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"miter\"/>`,\n capRound: `<path d=\"M3.13 5.25H12.13V14.75H3.13Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"miter\"/><path d=\"M12.13 4.5A5.5 5.5 0 0 1 12.13 15.5Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n capSquare: `<path d=\"M3.13 5.25H12.13V14.75H3.13Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"miter\"/><path d=\"M12.13 4.5H17.63V15.5H12.13Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n joinMiter: `<path d=\"M10 3.5 15.6 15.5H4.4Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n joinRound: `<path d=\"M4.4 15.5V12a5.6 5.6 0 0 1 11.2 0v3.5Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n joinBevel: `<path d=\"M6.8 8.2h6.4l2.4 7.3H4.4Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n alignInner: `<path d=\"M10 3.8A6.2 6.2 0 1 0 10 16.2A6.2 6.2 0 1 0 10 3.8Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n alignCenter: `<path d=\"M10 2.1A7.9 7.9 0 1 0 10 17.9A7.9 7.9 0 1 0 10 2.1ZM10 5.5A4.5 4.5 0 1 0 10 14.5A4.5 4.5 0 1 0 10 5.5Z\" fill=\"currentColor\" stroke=\"none\" fill-rule=\"evenodd\"/>`,\n alignOuter: `<path d=\"M0 0H20V20H0ZM10 3.8A6.2 6.2 0 1 0 10 16.2A6.2 6.2 0 1 0 10 3.8Z\" fill=\"currentColor\" stroke=\"none\" fill-rule=\"evenodd\"/>`,\n dashSolid: `<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\"/>`,\n dashDashed: `<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\" stroke-dasharray=\"6 4\"/>`,\n dashDotted: `<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\" stroke-dasharray=\"2.5 2\"/>`,\n dashCustom: `<path d=\"M2 10h16\" stroke-width=\"3\" stroke-linecap=\"butt\" stroke-dasharray=\"5 2 2 2\"/>`,\n paintSolid: `<path d=\"M3.4 3.4H16.6V16.6H3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/>`,\n paintLinear: `<path d=\"M3.4 3.4H6.7V16.6H3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/><path d=\"M6.7 3.4H10V16.6H6.7Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.68\"/><path d=\"M10 3.4H13.3V16.6H10Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.42\"/><path d=\"M13.3 3.4H16.6V16.6H13.3Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.2\"/>`,\n paintRadial: `<path d=\"M3.4 3.4H16.6V16.6H3.4ZM4.95 4.95H15.05V15.05H4.95Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.7\"/><path d=\"M4.95 4.95H15.05V15.05H4.95ZM6.5 6.5H13.5V13.5H6.5Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.53\"/><path d=\"M6.5 6.5H13.5V13.5H6.5ZM8.05 8.05H11.95V11.95H8.05Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.37\"/><path d=\"M8.05 8.05H11.95V11.95H8.05Z\" fill=\"currentColor\" fill-rule=\"evenodd\" stroke=\"none\" fill-opacity=\"0.2\"/>`,\n paintConic: `<path d=\"M10 10L16.6 3.4L16.6 16.6Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"1\"/><path d=\"M10 10L16.6 16.6L3.4 16.6Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.68\"/><path d=\"M10 10L3.4 16.6L3.4 3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.42\"/><path d=\"M10 10L3.4 3.4L16.6 3.4Z\" fill=\"currentColor\" stroke=\"none\" fill-opacity=\"0.2\"/>`,\n paintPattern: `<path d=\"M3.4 3.4L4.7 3.4L3.4 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M8.7 3.4L11.3 3.4L3.4 11.3L3.4 8.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M15.3 3.4L16.6 3.4L16.6 4.7L4.7 16.6L3.4 16.6L3.4 15.3Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M16.6 8.7L16.6 11.3L11.3 16.6L8.7 16.6Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M16.6 15.3L16.6 16.6L15.3 16.6Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M15.3 3.4L16.6 3.4L16.6 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M8.7 3.4L11.3 3.4L16.6 8.7L16.6 11.3Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M3.4 3.4L4.7 3.4L16.6 15.3L16.6 16.6L15.3 16.6L3.4 4.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M11.3 16.6L8.7 16.6L3.4 11.3L3.4 8.7Z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M4.7 16.6L3.4 16.6L3.4 15.3Z\" fill=\"currentColor\" stroke=\"none\"/>`,\n paintNone: `<path d=\"M3.4 3.4H16.6V16.6H3.4Z\"/><path d=\"M3.4 16.6L16.6 3.4\" stroke=\"var(--wzl-danger, #d94a3f)\" stroke-width=\"1.8\" stroke-linecap=\"butt\"/>`,\n\n // Workspace layout\n layoutRows: `<rect x=\"3.4\" y=\"3.4\" width=\"13.2\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"3.4\" y=\"8.3\" width=\"13.2\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"3.4\" y=\"13.2\" width=\"13.2\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/>`,\n layoutColumns: `<rect x=\"3.4\" y=\"3.4\" width=\"3.4\" height=\"13.2\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"8.3\" y=\"3.4\" width=\"3.4\" height=\"13.2\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"13.2\" y=\"3.4\" width=\"3.4\" height=\"13.2\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/>`,\n layoutGrid: `<rect x=\"3.4\" y=\"3.4\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"8.3\" y=\"3.4\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"13.2\" y=\"3.4\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"3.4\" y=\"8.3\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"8.3\" y=\"8.3\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"13.2\" y=\"8.3\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"3.4\" y=\"13.2\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"8.3\" y=\"13.2\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"13.2\" y=\"13.2\" width=\"3.4\" height=\"3.4\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/>`,\n} as const;\n\n/** Every glyph name in the set. /\nexport type IconName = keyof typeof ICON_PATHS;\n","import type { SVGProps } from 'react';\nimport { ICON_PATHS, type IconName } from './paths';\n\n/* Shared prop shape for the icon set. Color comes from the surrounding\n * `color` CSS property — every glyph strokes in `currentColor`. /\nexport interface IconProps {\n className?: string;\n /* Rendered pixel size, applied to both width and height. Defaults to 20. /\n size?: number;\n /* Accessible name. Omit inside a button that already labels itself; the\n * glyph is then `aria-hidden`. /\n label?: string;\n}\n\nconst SVG_BASE: SVGProps<SVGSVGElement> = {\n viewBox: '0 0 20 20',\n fill: 'none',\n stroke: 'currentColor',\n strokeWidth: 1.5,\n strokeLinecap: 'round',\n strokeLinejoin: 'round',\n};\n\n/* Renders one glyph by name. The named components below are the usual way\n * in; reach for this when the glyph is chosen at runtime. */\nexport function Icon({ name, className, size = 20, label }: IconProps & { name: IconName }) {\n return (\n <svg\n {...SVG_BASE}\n className={className}\n width={size}\n height={size}\n role={label ? 'img' : undefined}\n aria-label={label}\n aria-hidden={label ? undefined : true}\n // Glyph bodies are generated from scripts/icons/ and contain no\n // interpolated input.\n dangerouslySetInnerHTML={{ __html: ICON_PATHS[name] }}\n />\n );\n}\n"],"mappings":";;AAGA,IAAa,IAAa;CAGxB,OAAO;CACP,OAAO;CACP,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,KAAK;CAGL,KAAK;CACL,QAAQ;CACR,QAAQ;CACR,MAAM;CACN,MAAM;CACN,MAAM;CACN,SAAS;CACT,KAAK;CACL,UAAU;CAGV,MAAM;CACN,OAAO;CACP,MAAM;CACN,MAAM;CACN,WAAW;CACX,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,KAAK;CACL,MAAM;CACN,UAAU;CACV,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;CACN,MAAM;CACN,SAAS;CACT,WAAW;CACX,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;CACP,MAAM;CACN,WAAW;CACX,UAAU;CACV,UAAU;CAGV,aAAa;CACb,WAAW;CACX,YAAY;CACZ,aAAa;CACb,SAAS;CACT,UAAU;CACV,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACX,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,WAAW;CACX,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,aAAa;CACb,YAAY;CACZ,cAAc;CACd,WAAW;CAGX,YAAY;CACZ,eAAe;CACf,YAAY;CACb,EC1EK,IAAoC;CACxC,SAAS;CACT,MAAM;CACN,QAAQ;CACR,aAAa;CACb,eAAe;CACf,gBAAgB;CACjB;AAID,SAAgB,EAAK,EAAE,SAAM,cAAW,UAAO,IAAI,YAAyC;AAC1F,QACE,kBAAC,OAAD;EACE,GAAI;EACO;EACX,OAAO;EACP,QAAQ;EACR,MAAM,IAAQ,QAAQ,KAAA;EACtB,cAAY;EACZ,eAAa,IAAQ,KAAA,IAAY;EAGjC,yBAAyB,EAAE,QAAQ,EAAW,IAAO;EACrD,CAAA"}

package/dist/chunks/InlineRange-CBt_SBsC.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { t as e } from "./range.module-CttzfN6a.js";
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+var n = { range: "_range_1on6e_4" };
+//#endregion
+//#region src/components/InlineRange/InlineRange.tsx
+function r(r) {
+	let { value: i, min: a = 0, max: o = 100, className: s, style: c, ...l } = r, u = o - a, d = u > 0 ? (Math.min(Math.max(i, a), o) - a) / u * 100 : 0;
+	return /* @__PURE__ */ t("input", {
+		...l,
+		type: "range",
+		value: i,
+		min: a,
+		max: o,
+		className: [
+			e.range,
+			n.range,
+			s
+		].filter(Boolean).join(" "),
+		style: {
+			"--slider-fill": `${d}%`,
+			...c
+		}
+	});
+}
+//#endregion
+export { r as t };
+//# sourceMappingURL=InlineRange-CBt_SBsC.js.map

package/dist/chunks/InlineRange-CBt_SBsC.js.map ADDED Viewed

@@ -0,0 +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"}

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

@@ -1,11 +1,11 @@
-import { n as e } from "./Field-BCcTt6Fd.js";
+import { n as e } from "./Field-Bc6Nuc3p.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";
 var l = {
-	field: "_field_zwx85_1",
-	frame: "_frame_zwx85_9",
-	adornment: "_adornment_zwx85_54"
+	field: "_field_1jrsz_1",
+	frame: "_frame_1jrsz_9",
+	adornment: "_adornment_1jrsz_54"
 }, u = r(function(r, u) {
 	let { label: d, description: f, errorMessage: p, placeholder: m, leadingAdornment: h, trailingAdornment: g, className: _, ...v } = r;
 	return /* @__PURE__ */ n(c, {
@@ -52,4 +52,4 @@ var l = {
 //#endregion
 export { u as t };
-//# sourceMappingURL=Input-DRUeowbz.js.map
+//# sourceMappingURL=Input-CSAECs_T.js.map

package/dist/chunks/Input-CSAECs_T.js.map ADDED Viewed

@@ -0,0 +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"}

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

@@ -1,12 +1,12 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
 var r = {
-	list: "_list_1x3t3_4",
-	row: "_row_1x3t3_14",
-	label: "_label_1x3t3_33",
-	selected: "_selected_1x3t3_39",
-	muted: "_muted_1x3t3_46",
-	empty: "_empty_1x3t3_50"
+	list: "_list_cdj63_4",
+	row: "_row_cdj63_14",
+	label: "_label_cdj63_33",
+	selected: "_selected_cdj63_39",
+	muted: "_muted_cdj63_46",
+	empty: "_empty_cdj63_50"
 }, i = n(function({ rows: n, empty: i, className: a, overlay: o, containerProps: s }, c) {
 	let l = [r.list, a].filter(Boolean).join(" ");
 	return n.length === 0 ? /* @__PURE__ */ e("div", {
@@ -39,4 +39,4 @@ var r = {
 //#endregion
 export { i as t };
-//# sourceMappingURL=ItemList-BUTk9E8-.js.map
+//# sourceMappingURL=ItemList-POiCvUDx.js.map

package/dist/chunks/ItemList-POiCvUDx.js.map ADDED Viewed

@@ -0,0 +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"}

package/dist/chunks/{NumberField-CQ7OJORF.js → NumberField-Byw1iaIJ.js} RENAMED Viewed

@@ -1,20 +1,21 @@
-import { n as e } from "./Field-BCcTt6Fd.js";
+import { n as e } from "./Field-Bc6Nuc3p.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
 import { Button as i, FieldError as a, Group as o, Input as s, Label as c, NumberField as l, Text as u } from "react-aria-components";
 var d = {
-	field: "_field_1o8zh_1",
-	frame: "_frame_1o8zh_9",
-	steppers: "_steppers_1o8zh_57",
-	stepper: "_stepper_1o8zh_57"
+	field: "_field_1ey71_1",
+	frame: "_frame_1ey71_9",
+	steppers: "_steppers_1ey71_57",
+	stepper: "_stepper_1ey71_57",
+	ghost: "_ghost_1ey71_98"
 }, f = r(function(r, f) {
-	let { label: p, description: m, errorMessage: h, hideSteppers: g, placeholder: _, className: v, ...y } = r;
+	let { label: p, description: m, errorMessage: h, hideSteppers: g, ghost: _, placeholder: v, className: y, ...b } = r;
 	return /* @__PURE__ */ n(l, {
-		...y,
+		...b,
 		className: [
 			d.field,
 			e.root,
-			v
+			y
 		].filter(Boolean).join(" "),
 		children: [
 			p !== void 0 && /* @__PURE__ */ t(c, {
@@ -22,10 +23,10 @@ var d = {
 				children: p
 			}),
 			/* @__PURE__ */ n(o, {
-				className: d.frame,
+				className: _ ? `${d.frame} ${d.ghost}` : d.frame,
 				children: [/* @__PURE__ */ t(s, {
 					ref: f,
-					placeholder: _
+					placeholder: v
 				}), !g && /* @__PURE__ */ n("div", {
 					className: d.steppers,
 					children: [/* @__PURE__ */ t(i, {
@@ -56,4 +57,4 @@ var d = {
 //#endregion
 export { f as t };
-//# sourceMappingURL=NumberField-CQ7OJORF.js.map
+//# sourceMappingURL=NumberField-Byw1iaIJ.js.map

package/dist/chunks/NumberField-Byw1iaIJ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NumberField-Byw1iaIJ.js","names":[],"sources":["../../src/components/NumberField/NumberField.module.css","../../src/components/NumberField/NumberField.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: stretch;\n height: var(--wzl-field-h, var(--wzl-control-h));\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 overflow: hidden;\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 var(--wzl-field-pad-x);\n text-align: right;\n -moz-appearance: textfield;\n}\n\n.frame input::-webkit-outer-spin-button,\n.frame input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.steppers {\n display: flex;\n flex-direction: column;\n border-left: 1px solid var(--wzl-border);\n}\n\n.stepper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n flex: 1;\n background: transparent;\n border: none;\n color: var(--wzl-fg-muted);\n cursor: pointer;\n padding: 0;\n font-size: var(--wzl-font-size-2xs);\n line-height: 1;\n}\n\n.stepper:not(:last-child) {\n border-bottom: 1px solid var(--wzl-border);\n}\n\n.stepper[data-hovered]:not([data-disabled]) {\n background: var(--wzl-surface-hover);\n color: var(--wzl-fg);\n}\n\n.stepper[data-pressed]:not([data-disabled]) {\n background: var(--wzl-surface-pressed);\n}\n\n.stepper[data-disabled] {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n/* Mirrors the property rows' editable readout (`.readoutInput`), so a number\n sitting inside other chrome does not draw a second box around itself. */\n.ghost {\n height: auto;\n background: transparent;\n border-color: transparent;\n color: var(--wzl-accent);\n font-weight: var(--wzl-font-weight-medium);\n}\n\n.ghost input {\n padding: 1px 0;\n}\n\n.ghost:hover {\n background: color-mix(in srgb, currentColor 8%, transparent);\n}\n\n.ghost:focus-within {\n background: var(--wzl-surface-sunken);\n border-color: var(--wzl-focus-ring);\n box-shadow: none;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n NumberField as RACNumberField,\n Label,\n Input as RACInput,\n Group,\n Button as RACButton,\n Text,\n FieldError,\n type NumberFieldProps as RACNumberFieldProps,\n type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './NumberField.module.css';\n\n/** Props for {@link NumberField}, on top of React Aria's `NumberField` props. */\nexport type NumberFieldProps = Omit<RACNumberFieldProps, 'children' | 'className'> & {\n label?: ReactNode;\n description?: ReactNode;\n errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n /** Hide the up/down stepper buttons. Defaults to false. */\n hideSteppers?: boolean;\n /** Render with no box until focused — the readout treatment the property\n * rows use, for a value that sits inside other chrome rather than in a form. */\n ghost?: boolean;\n /** Native input placeholder — e.g. `'Mixed'` for a multi-selection\n * editor with no shared value. */\n placeholder?: string;\n className?: string;\n};\n\n/**\n * Numeric input with stepper buttons, wrapping React Aria's NumberField and\n * supplying the same label / description / errorMessage slots as `Input`.\n * Arrow keys and scroll step the value; parsing and formatting are React\n * Aria's.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const NumberField = forwardRef(function NumberField(\n props: NumberFieldProps,\n ref: Ref<HTMLInputElement>,\n) {\n const { label, description, errorMessage, hideSteppers, ghost, placeholder, className, ...rest } =\n props;\n return (\n <RACNumberField\n {...rest}\n className={[s.field, fieldClasses.root, className].filter(Boolean).join(' ')}\n >\n {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n <Group className={ghost ? `${s.frame} ${s.ghost}` : s.frame}>\n <RACInput ref={ref} placeholder={placeholder} />\n {!hideSteppers && (\n <div className={s.steppers}>\n <RACButton slot=\"increment\" className={s.stepper} aria-label=\"Increment\">▲</RACButton>\n <RACButton slot=\"decrement\" className={s.stepper} aria-label=\"Decrement\">▼</RACButton>\n </div>\n )}\n </Group>\n {description !== undefined && (\n <Text slot=\"description\" className={fieldClasses.hint}>\n {description}\n </Text>\n )}\n <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n </RACNumberField>\n );\n});\n"],"mappings":";;;;;;;;;;GCuCa,IAAc,EAAW,SACpC,GACA,GACA;CACA,IAAM,EAAE,UAAO,gBAAa,iBAAc,iBAAc,UAAO,gBAAa,cAAW,GAAG,MACxF;AACF,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAF9E;GAIG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,GAAD;IAAO,WAAW,IAAQ,GAAG,EAAE,MAAM,GAAG,EAAE,UAAU,EAAE;cAAtD,CACE,kBAAC,GAAD;KAAe;KAAkB;KAAe,CAAA,EAC/C,CAAC,KACA,kBAAC,OAAD;KAAK,WAAW,EAAE;eAAlB,CACE,kBAAC,GAAD;MAAW,MAAK;MAAY,WAAW,EAAE;MAAS,cAAW;gBAAY;MAAa,CAAA,EACtF,kBAAC,GAAD;MAAW,MAAK;MAAY,WAAW,EAAE;MAAS,cAAW;gBAAY;MAAa,CAAA,CAClF;OAEF;;GACP,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACvD;;EAEnB"}

package/dist/chunks/{PaintInput-CgZR3B0r.js → PaintInput-DtCSGda0.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { n as e, t } from "./Icon-CxoJb_bw.js";
+import { n as e, t } from "./Icon-DBXtBB1f.js";
 import { t as n } from "./ToggleBar-D0veW91s.js";
-import { t as r } from "./ColorField-CKbnsEUN.js";
-import { r as i } from "./GradientEditor-FwNdxxf-.js";
-import { t as a } from "./PatternPicker-v9BFsaMM.js";
+import { t as r } from "./ColorField-pEkaSppg.js";
+import { r as i } from "./GradientEditor-C5pPbMa_.js";
+import { t as a } from "./PatternPicker-G9e0CU5H.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { getPaintKind as c, listPaintKinds as l, withGradientKind as u } from "@weasel-js/core";
 import { useCallback as d, useRef as f } from "react";
@@ -115,4 +115,4 @@ function b(b) {
 //#endregion
 export { b as t };
-//# sourceMappingURL=PaintInput-CgZR3B0r.js.map
+//# sourceMappingURL=PaintInput-DtCSGda0.js.map

package/dist/chunks/{PaintInput-CgZR3B0r.js.map → PaintInput-DtCSGda0.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaintInput-CgZR3B0r.js","names":[],"sources":["../../src/components/PaintInput/PaintInput.module.css","../../src/components/PaintInput/PaintInput.tsx"],"sourcesContent":["/* Kind switch stacked over whichever paint body it selects. /\n.root {\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-inline-size: 0;\n}\n\n/ A value is in effect but nobody chose it. Never louder than mixed. /\n.unset {\n opacity: 0.55;\n}\n","import { useCallback, useRef, type ReactElement } from 'react';\nimport {\n getPaintKind,\n listPaintKinds,\n withGradientKind,\n type FillStyle,\n type GradientFill,\n type GradientKind,\n type PaintKind,\n} from '@weasel-js/core';\nimport { Icon } from '../../icons/Icon';\nimport { ICON_PATHS, type IconName } from '../../icons/paths';\nimport { ColorField } from '../ColorField';\nimport { GradientEditor } from '../GradientEditor';\nimport { PatternPicker, type PatternFill } from '../PatternPicker';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport s from './PaintInput.module.css';\n\n/* What a kind with no color of its own seeds from. /\nconst FALLBACK_COLOR = '#000000ff';\n\n/* The bar's answer for \"no paint at all\". Not a registered kind — absence\n * has no seed, no color and nothing to render — so it is this control's own\n * segment rather than a registry entry. /\nconst NONE = 'none';\n\nconst GRADIENT_KINDS: readonly string[] = [\n 'linear-gradient',\n 'radial-gradient',\n 'conic-gradient',\n];\n\nfunction isGradient(paint: FillStyle \| undefined): paint is GradientFill {\n return paint !== undefined && GRADIENT_KINDS.includes(paint.fill ?? '');\n}\n\nfunction isPattern(paint: FillStyle \| undefined): paint is PatternFill {\n return paint?.fill === 'pattern';\n}\n\n/* A paint's own discriminant. The solid member leaves `fill` off, and an\n * explicit `null` is the absence of paint rather than an unknown one. /\nfunction kindOf(paint: FillStyle \| null \| undefined): PaintKind \| null {\n if (paint === null) return NONE;\n if (paint === undefined) return null;\n return paint.fill ?? 'solid';\n}\n\n/* Props for {@link PaintInput}. `onInput` fires throughout a gesture and\n * `onChange` once at its end. /\nexport interface PaintInputProps {\n /* The paint being edited. `null` is an explicit \"no paint\"; `undefined`\n * is no value to show. /\n value: FillStyle \| null \| undefined;\n /* Indeterminate presentation: no kind lit, and the body withheld because\n * there is no single paint to show. /\n mixed?: boolean;\n /* Dim the control — a value is in effect but was never chosen. /\n unset?: boolean;\n /* Restrict the kind bar. Default: every registered kind. /\n kinds?: readonly PaintKind[];\n /* Offer \"None\". Default `true` — the bar answers \"what kind of paint is\n * this?\" and no-paint is one of the answers. Turn it off where the slot\n * cannot express absence. /\n allowNone?: boolean;\n onInput?: (next: FillStyle \| null) => void;\n onChange: (next: FillStyle \| null) => void;\n /* Names the paint this control edits — `Fill`, `Color`. Carried by the\n * solid body's swatch, which is the part with a value to announce. /\n 'aria-label'?: string;\n className?: string;\n}\n\n/\n Editor for a whole `FillStyle` — a kind bar over whichever body that kind\n * wants.\n \n The bar is driven by the paint-kind registry rather than a fixed list, so a\n * consumer's registered kind appears in it and renders that entry's `Editor`.\n * The five built-in kinds keep their branch here: their editors live in this\n * package and `@weasel-js/core`, which owns the registry, cannot import it.\n \n Geometry is deliberately absent — on a canvas it belongs on the artwork,\n * via `<SceneGradientHandles>`.\n /\nexport function PaintInput(props: PaintInputProps): ReactElement {\n const {\n value, mixed = false, unset = false, kinds, allowNone = true,\n onInput, onChange, className,\n } = props;\n const ariaLabel = props['aria-label'];\n\n // Per-kind memory, so linear → solid → linear comes back with its stops.\n // A ref, not state: it must not survive the control being pointed at a\n // different selection, and nothing renders off it directly.\n const remembered = useRef(new Map<PaintKind, FillStyle>());\n\n const active = mixed ? null : kindOf(value);\n if (value != null && active !== null) remembered.current.set(active, value);\n\n const entries = listPaintKinds().filter(\n (entry) => kinds === undefined \|\| kinds.includes(entry.id),\n );\n const segment = (id: string, label: string, icon: string \| undefined): ToggleBarItem<PaintKind> =>\n icon && icon in ICON_PATHS\n // Icon-only: six labelled segments do not fit a property row, and the\n // full label stays the accessible name.\n // 14 to match the panel's other glyph segments. A `sm` bar is 17px tall\n // over 1px of padding, so 15 fills the segment box edge to edge.\n ? { value: id, label: <Icon name={icon as IconName} size={14} />, ariaLabel: label }\n : { value: id, label };\n\n const items: readonly ToggleBarItem<PaintKind>[] = [\n ...(allowNone ? [segment(NONE, 'None', 'paintNone')] : []),\n ...entries.map((entry) => segment(entry.id, entry.label, entry.icon)),\n ];\n\n /* The color a switch seeds from: whatever the current paint shows. */\n const currentColor = useCallback((): string => {\n if (value == null) return FALLBACK_COLOR;\n return getPaintKind(kindOf(value) ?? 'solid')?.colorOf(value) ?? FALLBACK_COLOR;\n }, [value]);\n\n const switchKind = (kind: PaintKind): void => {\n if (kind === active) return;\n if (kind === NONE) {\n onChange(null);\n return;\n }\n const seen = remembered.current.get(kind);\n if (seen !== undefined) {\n onChange(seen);\n return;\n }\n if (value != null && isGradient(value) && GRADIENT_KINDS.includes(kind)) {\n onChange(withGradientKind(value, kind as GradientKind));\n return;\n }\n const entry = getPaintKind(kind);\n if (entry) onChange(entry.seed(currentColor()));\n };\n\n return (\n <div\n className={[s.root, unset && s.unset, className].filter(Boolean).join(' ')}\n title={unset ? 'Not set' : undefined}\n >\n <ToggleBar<PaintKind>\n items={items}\n value={active}\n size=\"sm\"\n ariaLabel=\"Paint kind\"\n onChange={(kind) => kind && switchKind(kind)}\n />\n {renderBody()}\n </div>\n );\n\n function renderBody(): ReactElement \| null {\n if (mixed \|\| value === undefined) {\n return (\n <ColorField\n mixed\n aria-label={ariaLabel}\n onChange={(color) => onChange({ fill: 'solid', color })}\n />\n );\n }\n // Absence has nothing to edit. The lit segment is the whole statement.\n if (value === null) return null;\n // A registered `Editor` wins even for a built-in id: re-registering one is\n // how a consumer replaces a kit control, and the built-in branches below\n // are the fallback for the ids that ship without an entry editor.\n const entry = getPaintKind(kindOf(value) ?? 'solid');\n if (entry?.Editor) {\n const Editor = entry.Editor;\n return <Editor value={value} onInput={onInput} onChange={onChange} />;\n }\n if (isGradient(value)) {\n return (\n <GradientEditor\n value={value}\n kindSwitch={false}\n onInput={onInput}\n onChange={onChange}\n />\n );\n }\n if (isPattern(value)) {\n return <PatternPicker value={value} color={currentColor()} onChange={onChange} />;\n }\n return (\n <ColorField\n value={currentColor()}\n alpha\n aria-label={ariaLabel}\n onInput={(color) => onInput?.({ fill: 'solid', color })}\n onChange={(color) => onChange({ fill: 'solid', color })}\n />\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"PaintInput-DtCSGda0.js","names":[],"sources":["../../src/components/PaintInput/PaintInput.module.css","../../src/components/PaintInput/PaintInput.tsx"],"sourcesContent":["/* Kind switch stacked over whichever paint body it selects. /\n.root {\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-inline-size: 0;\n}\n\n/ A value is in effect but nobody chose it. Never louder than mixed. /\n.unset {\n opacity: 0.55;\n}\n","import { useCallback, useRef, type ReactElement } from 'react';\nimport {\n getPaintKind,\n listPaintKinds,\n withGradientKind,\n type FillStyle,\n type GradientFill,\n type GradientKind,\n type PaintKind,\n} from '@weasel-js/core';\nimport { Icon } from '../../icons/Icon';\nimport { ICON_PATHS, type IconName } from '../../icons/paths';\nimport { ColorField } from '../ColorField';\nimport { GradientEditor } from '../GradientEditor';\nimport { PatternPicker, type PatternFill } from '../PatternPicker';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport s from './PaintInput.module.css';\n\n/* What a kind with no color of its own seeds from. /\nconst FALLBACK_COLOR = '#000000ff';\n\n/* The bar's answer for \"no paint at all\". Not a registered kind — absence\n * has no seed, no color and nothing to render — so it is this control's own\n * segment rather than a registry entry. /\nconst NONE = 'none';\n\nconst GRADIENT_KINDS: readonly string[] = [\n 'linear-gradient',\n 'radial-gradient',\n 'conic-gradient',\n];\n\nfunction isGradient(paint: FillStyle \| undefined): paint is GradientFill {\n return paint !== undefined && GRADIENT_KINDS.includes(paint.fill ?? '');\n}\n\nfunction isPattern(paint: FillStyle \| undefined): paint is PatternFill {\n return paint?.fill === 'pattern';\n}\n\n/* A paint's own discriminant. The solid member leaves `fill` off, and an\n * explicit `null` is the absence of paint rather than an unknown one. /\nfunction kindOf(paint: FillStyle \| null \| undefined): PaintKind \| null {\n if (paint === null) return NONE;\n if (paint === undefined) return null;\n return paint.fill ?? 'solid';\n}\n\n/* Props for {@link PaintInput}. `onInput` fires throughout a gesture and\n * `onChange` once at its end. /\nexport interface PaintInputProps {\n /* The paint being edited. `null` is an explicit \"no paint\"; `undefined`\n * is no value to show. /\n value: FillStyle \| null \| undefined;\n /* Indeterminate presentation: no kind lit, and the body withheld because\n * there is no single paint to show. /\n mixed?: boolean;\n /* Dim the control — a value is in effect but was never chosen. /\n unset?: boolean;\n /* Restrict the kind bar. Default: every registered kind. /\n kinds?: readonly PaintKind[];\n /* Offer \"None\". Default `true` — the bar answers \"what kind of paint is\n * this?\" and no-paint is one of the answers. Turn it off where the slot\n * cannot express absence. /\n allowNone?: boolean;\n onInput?: (next: FillStyle \| null) => void;\n onChange: (next: FillStyle \| null) => void;\n /* Names the paint this control edits — `Fill`, `Color`. Carried by the\n * solid body's swatch, which is the part with a value to announce. /\n 'aria-label'?: string;\n className?: string;\n}\n\n/\n Editor for a whole `FillStyle` — a kind bar over whichever body that kind\n * wants.\n \n The bar is driven by the paint-kind registry rather than a fixed list, so a\n * consumer's registered kind appears in it and renders that entry's `Editor`.\n * The five built-in kinds keep their branch here: their editors live in this\n * package and `@weasel-js/core`, which owns the registry, cannot import it.\n \n Geometry is deliberately absent — on a canvas it belongs on the artwork,\n * via `<SceneGradientHandles>`.\n /\nexport function PaintInput(props: PaintInputProps): ReactElement {\n const {\n value, mixed = false, unset = false, kinds, allowNone = true,\n onInput, onChange, className,\n } = props;\n const ariaLabel = props['aria-label'];\n\n // Per-kind memory, so linear → solid → linear comes back with its stops.\n // A ref, not state: it must not survive the control being pointed at a\n // different selection, and nothing renders off it directly.\n const remembered = useRef(new Map<PaintKind, FillStyle>());\n\n const active = mixed ? null : kindOf(value);\n if (value != null && active !== null) remembered.current.set(active, value);\n\n const entries = listPaintKinds().filter(\n (entry) => kinds === undefined \|\| kinds.includes(entry.id),\n );\n const segment = (id: string, label: string, icon: string \| undefined): ToggleBarItem<PaintKind> =>\n icon && icon in ICON_PATHS\n // Icon-only: six labelled segments do not fit a property row, and the\n // full label stays the accessible name.\n // 14 to match the panel's other glyph segments. A `sm` bar is 17px tall\n // over 1px of padding, so 15 fills the segment box edge to edge.\n ? { value: id, label: <Icon name={icon as IconName} size={14} />, ariaLabel: label }\n : { value: id, label };\n\n const items: readonly ToggleBarItem<PaintKind>[] = [\n ...(allowNone ? [segment(NONE, 'None', 'paintNone')] : []),\n ...entries.map((entry) => segment(entry.id, entry.label, entry.icon)),\n ];\n\n /* The color a switch seeds from: whatever the current paint shows. */\n const currentColor = useCallback((): string => {\n if (value == null) return FALLBACK_COLOR;\n return getPaintKind(kindOf(value) ?? 'solid')?.colorOf(value) ?? FALLBACK_COLOR;\n }, [value]);\n\n const switchKind = (kind: PaintKind): void => {\n if (kind === active) return;\n if (kind === NONE) {\n onChange(null);\n return;\n }\n const seen = remembered.current.get(kind);\n if (seen !== undefined) {\n onChange(seen);\n return;\n }\n if (value != null && isGradient(value) && GRADIENT_KINDS.includes(kind)) {\n onChange(withGradientKind(value, kind as GradientKind));\n return;\n }\n const entry = getPaintKind(kind);\n if (entry) onChange(entry.seed(currentColor()));\n };\n\n return (\n <div\n className={[s.root, unset && s.unset, className].filter(Boolean).join(' ')}\n title={unset ? 'Not set' : undefined}\n >\n <ToggleBar<PaintKind>\n items={items}\n value={active}\n size=\"sm\"\n ariaLabel=\"Paint kind\"\n onChange={(kind) => kind && switchKind(kind)}\n />\n {renderBody()}\n </div>\n );\n\n function renderBody(): ReactElement \| null {\n if (mixed \|\| value === undefined) {\n return (\n <ColorField\n mixed\n aria-label={ariaLabel}\n onChange={(color) => onChange({ fill: 'solid', color })}\n />\n );\n }\n // Absence has nothing to edit. The lit segment is the whole statement.\n if (value === null) return null;\n // A registered `Editor` wins even for a built-in id: re-registering one is\n // how a consumer replaces a kit control, and the built-in branches below\n // are the fallback for the ids that ship without an entry editor.\n const entry = getPaintKind(kindOf(value) ?? 'solid');\n if (entry?.Editor) {\n const Editor = entry.Editor;\n return <Editor value={value} onInput={onInput} onChange={onChange} />;\n }\n if (isGradient(value)) {\n return (\n <GradientEditor\n value={value}\n kindSwitch={false}\n onInput={onInput}\n onChange={onChange}\n />\n );\n }\n if (isPattern(value)) {\n return <PatternPicker value={value} color={currentColor()} onChange={onChange} />;\n }\n return (\n <ColorField\n value={currentColor()}\n alpha\n aria-label={ariaLabel}\n onInput={(color) => onInput?.({ fill: 'solid', color })}\n onChange={(color) => onChange({ fill: 'solid', color })}\n />\n );\n }\n}\n"],"mappings":";;;;;;;;;;;GCmBM,IAAiB,aAKjB,IAAO,QAEP,IAAoC;CACxC;CACA;CACA;CACD;AAED,SAAS,EAAW,GAAqD;AACvE,QAAO,MAAU,KAAA,KAAa,EAAe,SAAS,EAAM,QAAQ,GAAG;;AAGzE,SAAS,EAAU,GAAoD;AACrE,QAAO,GAAO,SAAS;;AAKzB,SAAS,EAAO,GAAuD;AAGrE,QAFI,MAAU,OAAa,IACvB,MAAU,KAAA,IAAkB,OACzB,EAAM,QAAQ;;AAwCvB,SAAgB,EAAW,GAAsC;CAC/D,IAAM,EACJ,UAAO,WAAQ,IAAO,WAAQ,IAAO,UAAO,eAAY,IACxD,YAAS,aAAU,iBACjB,GACE,IAAY,EAAM,eAKlB,IAAa,kBAAO,IAAI,KAA2B,CAAC,EAEpD,IAAS,IAAQ,OAAO,EAAO,EAAM;AAC3C,CAAI,KAAS,QAAQ,MAAW,QAAM,EAAW,QAAQ,IAAI,GAAQ,EAAM;CAE3E,IAAM,IAAU,GAAgB,CAAC,QAC9B,MAAU,MAAU,KAAA,KAAa,EAAM,SAAS,EAAM,GAAG,CAC3D,EACK,KAAW,GAAY,GAAe,MAC1C,KAAQ,KAAQ,IAKZ;EAAE,OAAO;EAAI,OAAO,kBAAC,GAAD;GAAM,MAAM;GAAkB,MAAM;GAAM,CAAA;EAAE,WAAW;EAAO,GAClF;EAAE,OAAO;EAAI;EAAO,EAEpB,IAA6C,CACjD,GAAI,IAAY,CAAC,EAAQ,GAAM,QAAQ,YAAY,CAAC,GAAG,EAAE,EACzD,GAAG,EAAQ,KAAK,MAAU,EAAQ,EAAM,IAAI,EAAM,OAAO,EAAM,KAAK,CAAC,CACtE,EAGK,IAAe,QACf,KAAS,OAAa,IACnB,EAAa,EAAO,EAAM,IAAI,QAAQ,EAAE,QAAQ,EAAM,IAAI,GAChE,CAAC,EAAM,CAAC,EAEL,KAAc,MAA0B;AAC5C,MAAI,MAAS,EAAQ;AACrB,MAAI,MAAS,GAAM;AACjB,KAAS,KAAK;AACd;;EAEF,IAAM,IAAO,EAAW,QAAQ,IAAI,EAAK;AACzC,MAAI,MAAS,KAAA,GAAW;AACtB,KAAS,EAAK;AACd;;AAEF,MAAI,KAAS,QAAQ,EAAW,EAAM,IAAI,EAAe,SAAS,EAAK,EAAE;AACvE,KAAS,EAAiB,GAAO,EAAqB,CAAC;AACvD;;EAEF,IAAM,IAAQ,EAAa,EAAK;AAChC,EAAI,KAAO,EAAS,EAAM,KAAK,GAAc,CAAC,CAAC;;AAGjD,QACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAE;GAAM,KAAS,EAAE;GAAO;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC1E,OAAO,IAAQ,YAAY,KAAA;YAF7B,CAIE,kBAAC,GAAD;GACS;GACP,OAAO;GACP,MAAK;GACL,WAAU;GACV,WAAW,MAAS,KAAQ,EAAW,EAAK;GAC5C,CAAA,EACD,GAAY,CACT;;CAGR,SAAS,IAAkC;AACzC,MAAI,KAAS,MAAU,KAAA,EACrB,QACE,kBAAC,GAAD;GACE,OAAA;GACA,cAAY;GACZ,WAAW,MAAU,EAAS;IAAE,MAAM;IAAS;IAAO,CAAC;GACvD,CAAA;AAIN,MAAI,MAAU,KAAM,QAAO;EAI3B,IAAM,IAAQ,EAAa,EAAO,EAAM,IAAI,QAAQ;AACpD,MAAI,GAAO,QAAQ;GACjB,IAAM,IAAS,EAAM;AACrB,UAAO,kBAAC,GAAD;IAAe;IAAgB;IAAmB;IAAY,CAAA;;AAevE,SAbI,EAAW,EAAM,GAEjB,kBAAC,GAAD;GACS;GACP,YAAY;GACH;GACC;GACV,CAAA,GAGF,EAAU,EAAM,GACX,kBAAC,GAAD;GAAsB;GAAO,OAAO,GAAc;GAAY;GAAY,CAAA,GAGjF,kBAAC,GAAD;GACE,OAAO,GAAc;GACrB,OAAA;GACA,cAAY;GACZ,UAAU,MAAU,IAAU;IAAE,MAAM;IAAS;IAAO,CAAC;GACvD,WAAW,MAAU,EAAS;IAAE,MAAM;IAAS;IAAO,CAAC;GACvD,CAAA"}

package/dist/chunks/{PatternPicker-v9BFsaMM.js → PatternPicker-G9e0CU5H.js} RENAMED Viewed

@@ -90,4 +90,4 @@ function d(d) {
 //#endregion
 export { u as n, d as t };
-//# sourceMappingURL=PatternPicker-v9BFsaMM.js.map
+//# sourceMappingURL=PatternPicker-G9e0CU5H.js.map

package/dist/chunks/{PatternPicker-v9BFsaMM.js.map → PatternPicker-G9e0CU5H.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PatternPicker-~~v9BFsaMM~~.js","names":[],"sources":["../../src/components/PatternPicker/PatternPicker.module.css","../../src/components/PatternPicker/PatternPicker.tsx"],"sourcesContent":["/* Tile grid over the size switch. /\n.root {\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-inline-size: 0;\n}\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(var(--wzl-swatch-size, 28px), 1fr));\n gap: 0;\n}\n\n/ The swatch's whole face is its own tile, so it must not carry a flat\n background — and the tile repeats at its own scale, not the swatch's. /\n.swatch {\n width: 100%;\n aspect-ratio: 1 / 1;\n min-width: 0;\n padding: 0;\n border: 0.5px solid var(--wzl-border);\n border-radius: 0;\n cursor: pointer;\n background-color: var(--wzl-surface-sunken);\n background-image: var(--tile-preview);\n background-repeat: repeat;\n background-size: 16px 16px;\n background-clip: padding-box;\n}\n\n.swatch:hover {\n border-color: var(--wzl-fg-muted);\n}\n\n.swatchActive {\n border-color: var(--wzl-accent);\n box-shadow: 0 0 0 1px var(--wzl-accent);\n}\n","import type { ReactElement } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { FillStyle, TilePatternSpec } from '@weasel-js/core';\nimport { tilePreviewCssUrl } from '@weasel-js/svg';\nimport { ToggleBar } from '../ToggleBar';\nimport s from './PatternPicker.module.css';\n\n/* The `pattern` member of the paint union. /\nexport type PatternFill = Extract<FillStyle, { fill: 'pattern' }>;\n\nconst TILES: readonly TilePatternSpec['tile'][] = ['hatch', 'crosshatch', 'dots', 'chunks'];\n\n/* Tile sizes the picker offers, coarse enough that each reads as a\n * distinct texture rather than a nudge. /\nconst TILE_SIZES: readonly { value: number; label: string }[] = [\n { value: 4, label: 'S' },\n { value: 8, label: 'M' },\n { value: 16, label: 'L' },\n { value: 32, label: 'XL' },\n];\n\nconst DEFAULT_TILE_SIZE = 8;\n\n/* Every swatch previews at one size so the grid compares tiles, not scales. /\nconst PREVIEW_SIZE = 16;\n\n/* The spec a pattern paint carries, if it carries one. A consumer-built\n * `TextureHandle` has no spec, so the picker shows no tile selected and\n * replaces it wholesale on the next click. /\nfunction specOf(fill: PatternFill): TilePatternSpec \| null {\n return 'tile' in fill.pattern ? fill.pattern : null;\n}\n\n/\n A pattern seeded from a color. `units: 'bounds'` anchors the tile to the\n * node's box, so the texture travels with the shape.\n /\nexport function seedPattern(\n tile: TilePatternSpec['tile'],\n from: string,\n size: number = DEFAULT_TILE_SIZE,\n): PatternFill {\n const spec: TilePatternSpec = { tile, color: from, size };\n // `chunks` is a scatter over a ground rather than a line texture; without a\n // background it reads as loose specks on whatever sits beneath.\n if (tile === 'chunks') spec.bg = '#00000000';\n return { fill: 'pattern', pattern: spec, units: 'bounds' };\n}\n\n/* Props for {@link PatternPicker}. /\nexport interface PatternPickerProps {\n /* The pattern paint being edited. /\n value: PatternFill;\n /* The color new tiles are seeded with — the paint's own, normally. /\n color: string;\n /* Committed value: one call per click. A tile pick and a size change are\n * each a complete gesture, so there is no `onInput`. /\n onChange: (next: PatternFill) => void;\n className?: string;\n}\n\n/\n Grid of tile swatches over a size switch, each swatch previewing the real\n * tile at the current color.\n \n The preview shares its shape mapper with what the renderer paints, so a\n * swatch cannot drift from the texture it selects.\n */\nexport function PatternPicker(props: PatternPickerProps): ReactElement {\n const { value, color, onChange, className } = props;\n const spec = specOf(value);\n const size = spec?.size ?? DEFAULT_TILE_SIZE;\n\n const pick = (tile: TilePatternSpec['tile']): void => {\n onChange(seedPattern(tile, color, size));\n };\n\n const resize = (nextSize: number): void => {\n if (!spec) return;\n onChange({ ...value, pattern: { ...spec, size: nextSize } });\n };\n\n return (\n <div className={[s.root, className].filter(Boolean).join(' ')}>\n <div className={s.grid}>\n {TILES.map((tile) => {\n const preview: TilePatternSpec = { tile, color, size: PREVIEW_SIZE };\n if (tile === 'chunks') preview.bg = '#00000000';\n const selected = spec?.tile === tile;\n return (\n <button\n key={tile}\n type=\"button\"\n className={[s.swatch, selected && s.swatchActive].filter(Boolean).join(' ')}\n style={{ ['--tile-preview' as string]: tilePreviewCssUrl(preview) } as CSSProperties}\n title={tile}\n aria-label={tile}\n aria-pressed={selected}\n onClick={() => pick(tile)}\n />\n );\n })}\n </div>\n <ToggleBar<number>\n items={TILE_SIZES}\n value={size}\n size=\"sm\"\n ariaLabel=\"Tile size\"\n onChange={(v) => v != null && resize(v)}\n />\n </div>\n );\n}\n"],"mappings":";;;;;;;;GCUM,IAA4C;CAAC;CAAS;CAAc;CAAQ;CAAS,EAIrF,IAA0D;CAC9D;EAAE,OAAO;EAAG,OAAO;EAAK;CACxB;EAAE,OAAO;EAAG,OAAO;EAAK;CACxB;EAAE,OAAO;EAAI,OAAO;EAAK;CACzB;EAAE,OAAO;EAAI,OAAO;EAAM;CAC3B,EAEK,IAAoB,GAGpB,IAAe;AAKrB,SAAS,EAAO,GAA2C;AACzD,QAAO,UAAU,EAAK,UAAU,EAAK,UAAU;;AAOjD,SAAgB,EACd,GACA,GACA,IAAe,GACF;CACb,IAAM,IAAwB;EAAE;EAAM,OAAO;EAAM;EAAM;AAIzD,QADI,MAAS,aAAU,EAAK,KAAK,cAC1B;EAAE,MAAM;EAAW,SAAS;EAAM,OAAO;EAAU;;AAsB5D,SAAgB,EAAc,GAAyC;CACrE,IAAM,EAAE,UAAO,UAAO,aAAU,iBAAc,GACxC,IAAO,EAAO,EAAM,EACpB,IAAO,GAAM,QAAQ,GAErB,KAAQ,MAAwC;AACpD,IAAS,EAAY,GAAM,GAAO,EAAK,CAAC;IAGpC,KAAU,MAA2B;AACpC,OACL,EAAS;GAAE,GAAG;GAAO,SAAS;IAAE,GAAG;IAAM,MAAM;IAAU;GAAE,CAAC;;AAG9D,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7D,CACE,kBAAC,OAAD;GAAK,WAAW,EAAE;aACf,EAAM,KAAK,MAAS;IACnB,IAAM,IAA2B;KAAE;KAAM;KAAO,MAAM;KAAc;AACpE,IAAI,MAAS,aAAU,EAAQ,KAAK;IACpC,IAAM,IAAW,GAAM,SAAS;AAChC,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,WAAW,CAAC,EAAE,QAAQ,KAAY,EAAE,aAAa,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KAC3E,OAAO,EAAG,kBAA6B,EAAkB,EAAQ,EAAE;KACnE,OAAO;KACP,cAAY;KACZ,gBAAc;KACd,eAAe,EAAK,EAAK;KACzB,EARK,EAQL;KAEJ;GACE,CAAA,EACN,kBAAC,GAAD;GACE,OAAO;GACP,OAAO;GACP,MAAK;GACL,WAAU;GACV,WAAW,MAAM,KAAK,QAAQ,EAAO,EAAE;GACvC,CAAA,CACE"}
1	+ {"version":3,"file":"PatternPicker-G9e0CU5H.js","names":[],"sources":["../../src/components/PatternPicker/PatternPicker.module.css","../../src/components/PatternPicker/PatternPicker.tsx"],"sourcesContent":["/* Tile grid over the size switch. /\n.root {\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-inline-size: 0;\n}\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(var(--wzl-swatch-size, 28px), 1fr));\n gap: 0;\n}\n\n/ The swatch's whole face is its own tile, so it must not carry a flat\n background — and the tile repeats at its own scale, not the swatch's. /\n.swatch {\n width: 100%;\n aspect-ratio: 1 / 1;\n min-width: 0;\n padding: 0;\n border: 0.5px solid var(--wzl-border);\n border-radius: 0;\n cursor: pointer;\n background-color: var(--wzl-surface-sunken);\n background-image: var(--tile-preview);\n background-repeat: repeat;\n background-size: 16px 16px;\n background-clip: padding-box;\n}\n\n.swatch:hover {\n border-color: var(--wzl-fg-muted);\n}\n\n.swatchActive {\n border-color: var(--wzl-accent);\n box-shadow: 0 0 0 1px var(--wzl-accent);\n}\n","import type { ReactElement } from 'react';\nimport type { CSSProperties } from 'react';\nimport type { FillStyle, TilePatternSpec } from '@weasel-js/core';\nimport { tilePreviewCssUrl } from '@weasel-js/svg';\nimport { ToggleBar } from '../ToggleBar';\nimport s from './PatternPicker.module.css';\n\n/* The `pattern` member of the paint union. /\nexport type PatternFill = Extract<FillStyle, { fill: 'pattern' }>;\n\nconst TILES: readonly TilePatternSpec['tile'][] = ['hatch', 'crosshatch', 'dots', 'chunks'];\n\n/* Tile sizes the picker offers, coarse enough that each reads as a\n * distinct texture rather than a nudge. /\nconst TILE_SIZES: readonly { value: number; label: string }[] = [\n { value: 4, label: 'S' },\n { value: 8, label: 'M' },\n { value: 16, label: 'L' },\n { value: 32, label: 'XL' },\n];\n\nconst DEFAULT_TILE_SIZE = 8;\n\n/* Every swatch previews at one size so the grid compares tiles, not scales. /\nconst PREVIEW_SIZE = 16;\n\n/* The spec a pattern paint carries, if it carries one. A consumer-built\n * `TextureHandle` has no spec, so the picker shows no tile selected and\n * replaces it wholesale on the next click. /\nfunction specOf(fill: PatternFill): TilePatternSpec \| null {\n return 'tile' in fill.pattern ? fill.pattern : null;\n}\n\n/\n A pattern seeded from a color. `units: 'bounds'` anchors the tile to the\n * node's box, so the texture travels with the shape.\n /\nexport function seedPattern(\n tile: TilePatternSpec['tile'],\n from: string,\n size: number = DEFAULT_TILE_SIZE,\n): PatternFill {\n const spec: TilePatternSpec = { tile, color: from, size };\n // `chunks` is a scatter over a ground rather than a line texture; without a\n // background it reads as loose specks on whatever sits beneath.\n if (tile === 'chunks') spec.bg = '#00000000';\n return { fill: 'pattern', pattern: spec, units: 'bounds' };\n}\n\n/* Props for {@link PatternPicker}. /\nexport interface PatternPickerProps {\n /* The pattern paint being edited. /\n value: PatternFill;\n /* The color new tiles are seeded with — the paint's own, normally. /\n color: string;\n /* Committed value: one call per click. A tile pick and a size change are\n * each a complete gesture, so there is no `onInput`. /\n onChange: (next: PatternFill) => void;\n className?: string;\n}\n\n/\n Grid of tile swatches over a size switch, each swatch previewing the real\n * tile at the current color.\n \n The preview shares its shape mapper with what the renderer paints, so a\n * swatch cannot drift from the texture it selects.\n */\nexport function PatternPicker(props: PatternPickerProps): ReactElement {\n const { value, color, onChange, className } = props;\n const spec = specOf(value);\n const size = spec?.size ?? DEFAULT_TILE_SIZE;\n\n const pick = (tile: TilePatternSpec['tile']): void => {\n onChange(seedPattern(tile, color, size));\n };\n\n const resize = (nextSize: number): void => {\n if (!spec) return;\n onChange({ ...value, pattern: { ...spec, size: nextSize } });\n };\n\n return (\n <div className={[s.root, className].filter(Boolean).join(' ')}>\n <div className={s.grid}>\n {TILES.map((tile) => {\n const preview: TilePatternSpec = { tile, color, size: PREVIEW_SIZE };\n if (tile === 'chunks') preview.bg = '#00000000';\n const selected = spec?.tile === tile;\n return (\n <button\n key={tile}\n type=\"button\"\n className={[s.swatch, selected && s.swatchActive].filter(Boolean).join(' ')}\n style={{ ['--tile-preview' as string]: tilePreviewCssUrl(preview) } as CSSProperties}\n title={tile}\n aria-label={tile}\n aria-pressed={selected}\n onClick={() => pick(tile)}\n />\n );\n })}\n </div>\n <ToggleBar<number>\n items={TILE_SIZES}\n value={size}\n size=\"sm\"\n ariaLabel=\"Tile size\"\n onChange={(v) => v != null && resize(v)}\n />\n </div>\n );\n}\n"],"mappings":";;;;;;;;GCUM,IAA4C;CAAC;CAAS;CAAc;CAAQ;CAAS,EAIrF,IAA0D;CAC9D;EAAE,OAAO;EAAG,OAAO;EAAK;CACxB;EAAE,OAAO;EAAG,OAAO;EAAK;CACxB;EAAE,OAAO;EAAI,OAAO;EAAK;CACzB;EAAE,OAAO;EAAI,OAAO;EAAM;CAC3B,EAEK,IAAoB,GAGpB,IAAe;AAKrB,SAAS,EAAO,GAA2C;AACzD,QAAO,UAAU,EAAK,UAAU,EAAK,UAAU;;AAOjD,SAAgB,EACd,GACA,GACA,IAAe,GACF;CACb,IAAM,IAAwB;EAAE;EAAM,OAAO;EAAM;EAAM;AAIzD,QADI,MAAS,aAAU,EAAK,KAAK,cAC1B;EAAE,MAAM;EAAW,SAAS;EAAM,OAAO;EAAU;;AAsB5D,SAAgB,EAAc,GAAyC;CACrE,IAAM,EAAE,UAAO,UAAO,aAAU,iBAAc,GACxC,IAAO,EAAO,EAAM,EACpB,IAAO,GAAM,QAAQ,GAErB,KAAQ,MAAwC;AACpD,IAAS,EAAY,GAAM,GAAO,EAAK,CAAC;IAGpC,KAAU,MAA2B;AACpC,OACL,EAAS;GAAE,GAAG;GAAO,SAAS;IAAE,GAAG;IAAM,MAAM;IAAU;GAAE,CAAC;;AAG9D,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7D,CACE,kBAAC,OAAD;GAAK,WAAW,EAAE;aACf,EAAM,KAAK,MAAS;IACnB,IAAM,IAA2B;KAAE;KAAM;KAAO,MAAM;KAAc;AACpE,IAAI,MAAS,aAAU,EAAQ,KAAK;IACpC,IAAM,IAAW,GAAM,SAAS;AAChC,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,WAAW,CAAC,EAAE,QAAQ,KAAY,EAAE,aAAa,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KAC3E,OAAO,EAAG,kBAA6B,EAAkB,EAAQ,EAAE;KACnE,OAAO;KACP,cAAY;KACZ,gBAAc;KACd,eAAe,EAAK,EAAK;KACzB,EARK,EAQL;KAEJ;GACE,CAAA,EACN,kBAAC,GAAD;GACE,OAAO;GACP,OAAO;GACP,MAAK;GACL,WAAU;GACV,WAAW,MAAM,KAAK,QAAQ,EAAO,EAAE;GACvC,CAAA,CACE"}

package/dist/chunks/{Plot2D-B08SYGQV.js → Plot2D-D63D5w6c.js} RENAMED Viewed

@@ -131,4 +131,4 @@ var d = {
 //#endregion
 export { l as n, u as r, f as t };
-//# sourceMappingURL=Plot2D-B08SYGQV.js.map
+//# sourceMappingURL=Plot2D-D63D5w6c.js.map