@weasel-js/ui 1.4.0-pre.1 → 1.4.1
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.
- package/dist/chunks/{Badge-BXTDs-zi.js → Badge-7yQseqZb.js} +233 -263
- package/dist/chunks/Badge-7yQseqZb.js.map +1 -0
- package/dist/chunks/BandEditor-DjOi4ldl.js +252 -0
- package/dist/chunks/BandEditor-DjOi4ldl.js.map +1 -0
- package/dist/chunks/{Callout-DAFusbzz.js → Callout-wRyevt8I.js} +1 -1
- package/dist/chunks/{Callout-DAFusbzz.js.map → Callout-wRyevt8I.js.map} +1 -1
- package/dist/chunks/{Checkbox-BePa_djO.js → Checkbox-D_GCnoJ0.js} +1 -1
- package/dist/chunks/{Checkbox-BePa_djO.js.map → Checkbox-D_GCnoJ0.js.map} +1 -1
- package/dist/chunks/{ColorField-CKbnsEUN.js → ColorField-pEkaSppg.js} +7 -7
- package/dist/chunks/ColorField-pEkaSppg.js.map +1 -0
- package/dist/chunks/{ComboBox-B6QS8y3j.js → ComboBox-inno5gt1.js} +9 -9
- package/dist/chunks/ComboBox-inno5gt1.js.map +1 -0
- package/dist/chunks/{CurveEditor-COJ6WK9K.js → CurveEditor-DoX5Q0_V.js} +193 -196
- package/dist/chunks/CurveEditor-DoX5Q0_V.js.map +1 -0
- package/dist/chunks/{DataGrid-BWZZUekH.js → DataGrid-DHV0chfL.js} +2 -5
- package/dist/chunks/DataGrid-DHV0chfL.js.map +1 -0
- package/dist/chunks/{DetentSlider-CXIeTHaM.js → DetentSlider-Cd5360U3.js} +2 -2
- package/dist/chunks/{DetentSlider-CXIeTHaM.js.map → DetentSlider-Cd5360U3.js.map} +1 -1
- package/dist/chunks/{Dialog-CQAZ7hS7.js → Dialog-CX2B8PIp.js} +1 -1
- package/dist/chunks/{Dialog-CQAZ7hS7.js.map → Dialog-CX2B8PIp.js.map} +1 -1
- package/dist/chunks/{Field-BCcTt6Fd.js → Field-Bc6Nuc3p.js} +1 -1
- package/dist/chunks/{Field-BCcTt6Fd.js.map → Field-Bc6Nuc3p.js.map} +1 -1
- package/dist/chunks/{FontFamilySelect-DwkwRYrr.js → FontFamilySelect-CvrXKVwv.js} +2 -2
- package/dist/chunks/{FontFamilySelect-DwkwRYrr.js.map → FontFamilySelect-CvrXKVwv.js.map} +1 -1
- package/dist/chunks/{GradientEditor-FwNdxxf-.js → GradientEditor-CPeTbkFE.js} +12 -10
- package/dist/chunks/{GradientEditor-FwNdxxf-.js.map → GradientEditor-CPeTbkFE.js.map} +1 -1
- package/dist/chunks/{Icon-CxoJb_bw.js → Icon-DBXtBB1f.js} +8 -2
- package/dist/chunks/{Icon-CxoJb_bw.js.map → Icon-DBXtBB1f.js.map} +1 -1
- package/dist/chunks/InlineRange-CBt_SBsC.js +29 -0
- package/dist/chunks/InlineRange-CBt_SBsC.js.map +1 -0
- package/dist/chunks/{Input-DRUeowbz.js → Input-CSAECs_T.js} +5 -5
- package/dist/chunks/Input-CSAECs_T.js.map +1 -0
- package/dist/chunks/{ItemList-BUTk9E8-.js → ItemList-POiCvUDx.js} +7 -7
- package/dist/chunks/ItemList-POiCvUDx.js.map +1 -0
- package/dist/chunks/{LayerStack-htMwIsJ6.js → LayerStack-BVdwhAhG.js} +2 -5
- package/dist/chunks/{LayerStack-htMwIsJ6.js.map → LayerStack-BVdwhAhG.js.map} +1 -1
- package/dist/chunks/{NumberField-CQ7OJORF.js → NumberField-Byw1iaIJ.js} +12 -11
- package/dist/chunks/NumberField-Byw1iaIJ.js.map +1 -0
- package/dist/chunks/{PaintInput-CgZR3B0r.js → PaintInput-6HTUAFL1.js} +5 -5
- package/dist/chunks/{PaintInput-CgZR3B0r.js.map → PaintInput-6HTUAFL1.js.map} +1 -1
- package/dist/chunks/{PatternPicker-v9BFsaMM.js → PatternPicker-G9e0CU5H.js} +1 -1
- package/dist/chunks/{PatternPicker-v9BFsaMM.js.map → PatternPicker-G9e0CU5H.js.map} +1 -1
- package/dist/chunks/{Plot2D-B08SYGQV.js → Plot2D-D63D5w6c.js} +1 -1
- package/dist/chunks/{Plot2D-B08SYGQV.js.map → Plot2D-D63D5w6c.js.map} +1 -1
- package/dist/chunks/{PointPlotter-DEh7a3xB.js → PointPlotter-CZJE8Ccu.js} +2 -2
- package/dist/chunks/{PointPlotter-DEh7a3xB.js.map → PointPlotter-CZJE8Ccu.js.map} +1 -1
- package/dist/chunks/{Powerline-M1Q3Hx5E.js → Powerline-BY_ADnqq.js} +2 -2
- package/dist/chunks/{Powerline-M1Q3Hx5E.js.map → Powerline-BY_ADnqq.js.map} +1 -1
- package/dist/chunks/{Prefs-C2qhxnmt.js → Prefs-ByKG3ylD.js} +10 -10
- package/dist/chunks/{Prefs-C2qhxnmt.js.map → Prefs-ByKG3ylD.js.map} +1 -1
- package/dist/chunks/Properties-BuNzy7Hb.js +662 -0
- package/dist/chunks/Properties-BuNzy7Hb.js.map +1 -0
- package/dist/chunks/{RadioGroup-B8eMJ6lu.js → RadioGroup-XjbfUb7S.js} +2 -2
- package/dist/chunks/{RadioGroup-B8eMJ6lu.js.map → RadioGroup-XjbfUb7S.js.map} +1 -1
- package/dist/chunks/{RangeSlider-JczhglgA.js → RangeSlider-D0hFbx_Z.js} +1 -1
- package/dist/chunks/{RangeSlider-JczhglgA.js.map → RangeSlider-D0hFbx_Z.js.map} +1 -1
- package/dist/chunks/ResizeHandle-DfqqfaZz.js +79 -0
- package/dist/chunks/ResizeHandle-DfqqfaZz.js.map +1 -0
- package/dist/chunks/{Select-g8PhE010.js → Select-D1uP21db.js} +2 -2
- package/dist/chunks/{Select-g8PhE010.js.map → Select-D1uP21db.js.map} +1 -1
- package/dist/chunks/{SelectionPanel-Cl18SdD6.js → SelectionPanel-BU2cmRtp.js} +10 -10
- package/dist/chunks/{SelectionPanel-Cl18SdD6.js.map → SelectionPanel-BU2cmRtp.js.map} +1 -1
- package/dist/chunks/{Sidebar-mWGsndWw.js → Sidebar-Du0yp1S0.js} +1 -1
- package/dist/chunks/{Sidebar-mWGsndWw.js.map → Sidebar-Du0yp1S0.js.map} +1 -1
- package/dist/chunks/{SidebarPanel-B2d0erLv.js → SidebarPanel-Cuq__FIC.js} +2 -2
- package/dist/chunks/{SidebarPanel-B2d0erLv.js.map → SidebarPanel-Cuq__FIC.js.map} +1 -1
- package/dist/chunks/Slider-BE6jaxyU.js +303 -0
- package/dist/chunks/Slider-BE6jaxyU.js.map +1 -0
- package/dist/chunks/{StatusBar-xxCcWsfq.js → StatusBar-DLYwh5sb.js} +1 -1
- package/dist/chunks/{StatusBar-xxCcWsfq.js.map → StatusBar-DLYwh5sb.js.map} +1 -1
- package/dist/chunks/{Switch-QviBb61l.js → Switch-B521iN3m.js} +1 -1
- package/dist/chunks/{Switch-QviBb61l.js.map → Switch-B521iN3m.js.map} +1 -1
- package/dist/chunks/{Tabs-DT-dIt6d.js → Tabs-BuifAv0p.js} +1 -1
- package/dist/chunks/{Tabs-DT-dIt6d.js.map → Tabs-BuifAv0p.js.map} +1 -1
- package/dist/chunks/{Timeline-DsLeV5I1.js → Timeline-CWuh0nV0.js} +254 -240
- package/dist/chunks/Timeline-CWuh0nV0.js.map +1 -0
- package/dist/chunks/{Toast-CfkiN0Nv.js → Toast-B75V2gqL.js} +1 -1
- package/dist/chunks/{Toast-CfkiN0Nv.js.map → Toast-B75V2gqL.js.map} +1 -1
- package/dist/chunks/{ToolButton-CLoR9Z4o.js → ToolButton-D5VwD47i.js} +1 -1
- package/dist/chunks/{ToolButton-CLoR9Z4o.js.map → ToolButton-D5VwD47i.js.map} +1 -1
- package/dist/chunks/{ToolGroup-BnE23mcA.js → ToolGroup-B2PlMKQ-.js} +1 -1
- package/dist/chunks/{ToolGroup-BnE23mcA.js.map → ToolGroup-B2PlMKQ-.js.map} +1 -1
- package/dist/chunks/{ToolPalette-W-rAsomq.js → ToolPalette-Bi5ezkO6.js} +3 -3
- package/dist/chunks/{ToolPalette-W-rAsomq.js.map → ToolPalette-Bi5ezkO6.js.map} +1 -1
- package/dist/chunks/{icons-CdLHgzV8.js → icons-BV27dhKB.js} +58 -40
- package/dist/chunks/icons-BV27dhKB.js.map +1 -0
- package/dist/chunks/range.module-CttzfN6a.js +8 -0
- package/dist/chunks/range.module-CttzfN6a.js.map +1 -0
- package/dist/chunks/useReorderDragList-UvHJFjTZ.js +106 -0
- package/dist/chunks/useReorderDragList-UvHJFjTZ.js.map +1 -0
- package/dist/components/Badge/Badge.d.ts.map +1 -1
- package/dist/components/Badge/index.js +1 -1
- package/dist/components/Badge/shapes/Perforated.d.ts.map +1 -1
- package/dist/components/Badge/shapes/Shield.d.ts.map +1 -1
- package/dist/components/Badge/useSvgBox.d.ts +10 -0
- package/dist/components/Badge/useSvgBox.d.ts.map +1 -0
- package/dist/components/BandEditor/BandEditor.d.ts.map +1 -1
- package/dist/components/BandEditor/index.js +1 -1
- package/dist/components/Callout/index.js +1 -1
- package/dist/components/Checkbox/index.js +1 -1
- package/dist/components/ColorField/index.js +1 -1
- package/dist/components/ComboBox/index.js +1 -1
- package/dist/components/CurveEditor/LayeredCurveEditor.d.ts.map +1 -1
- package/dist/components/CurveEditor/index.js +1 -1
- package/dist/components/DataGrid/DataGrid.d.ts.map +1 -1
- package/dist/components/DataGrid/index.js +1 -1
- package/dist/components/DetentSlider/index.js +1 -1
- package/dist/components/Dialog/index.js +1 -1
- package/dist/components/Field/index.js +1 -1
- package/dist/components/FontFamilySelect/index.js +1 -1
- package/dist/components/GradientEditor/index.js +1 -1
- package/dist/components/InlineRange/InlineRange.d.ts.map +1 -1
- package/dist/components/InlineRange/index.js +1 -1
- package/dist/components/Input/index.js +1 -1
- package/dist/components/ItemList/index.js +1 -1
- package/dist/components/LayerStack/LayerStack.d.ts.map +1 -1
- package/dist/components/LayerStack/index.js +1 -1
- package/dist/components/NumberField/NumberField.d.ts +6 -0
- package/dist/components/NumberField/NumberField.d.ts.map +1 -1
- package/dist/components/NumberField/index.js +1 -1
- package/dist/components/PaintInput/index.js +1 -1
- package/dist/components/PatternPicker/index.js +1 -1
- package/dist/components/Plot2D/index.js +1 -1
- package/dist/components/PointPlotter/index.js +1 -1
- package/dist/components/Powerline/index.js +2 -2
- package/dist/components/Prefs/index.js +1 -1
- package/dist/components/Properties/PropertyPanel.d.ts +7 -1
- package/dist/components/Properties/PropertyPanel.d.ts.map +1 -1
- package/dist/components/Properties/index.js +1 -1
- package/dist/components/RadioGroup/index.js +1 -1
- package/dist/components/RangeSlider/index.js +1 -1
- package/dist/components/ResizeHandle/ResizeHandle.d.ts.map +1 -1
- package/dist/components/ResizeHandle/index.js +1 -1
- package/dist/components/Select/index.js +1 -1
- package/dist/components/SelectionPanel/index.js +1 -1
- package/dist/components/Sidebar/index.js +1 -1
- package/dist/components/SidebarPanel/index.js +1 -1
- package/dist/components/Slider/Slider.d.ts +3 -0
- package/dist/components/Slider/Slider.d.ts.map +1 -1
- package/dist/components/Slider/index.js +1 -1
- package/dist/components/StatusBar/index.js +1 -1
- package/dist/components/Switch/index.js +1 -1
- package/dist/components/Tabs/index.js +1 -1
- package/dist/components/Timeline/Lane.d.ts.map +1 -1
- package/dist/components/Timeline/Ruler.d.ts.map +1 -1
- package/dist/components/Timeline/index.js +1 -1
- package/dist/components/Toast/index.js +1 -1
- package/dist/components/ToolButton/index.js +1 -1
- package/dist/components/ToolGroup/index.js +1 -1
- package/dist/components/ToolPalette/index.js +1 -1
- package/dist/icons/index.d.ts +6 -0
- package/dist/icons/index.d.ts.map +1 -1
- package/dist/icons/paths.d.ts +6 -0
- package/dist/icons/paths.d.ts.map +1 -1
- package/dist/index.js +62 -62
- package/dist/style.css +1 -1
- package/dist/useReorderDragList.d.ts +20 -7
- package/dist/useReorderDragList.d.ts.map +1 -1
- package/package.json +8 -5
- package/dist/chunks/Badge-BXTDs-zi.js.map +0 -1
- package/dist/chunks/BandEditor-D13ybQN_.js +0 -248
- package/dist/chunks/BandEditor-D13ybQN_.js.map +0 -1
- package/dist/chunks/ColorField-CKbnsEUN.js.map +0 -1
- package/dist/chunks/ComboBox-B6QS8y3j.js.map +0 -1
- package/dist/chunks/CurveEditor-COJ6WK9K.js.map +0 -1
- package/dist/chunks/DataGrid-BWZZUekH.js.map +0 -1
- package/dist/chunks/InlineRange-mb19EGOI.js +0 -24
- package/dist/chunks/InlineRange-mb19EGOI.js.map +0 -1
- package/dist/chunks/Input-DRUeowbz.js.map +0 -1
- package/dist/chunks/ItemList-BUTk9E8-.js.map +0 -1
- package/dist/chunks/NumberField-CQ7OJORF.js.map +0 -1
- package/dist/chunks/Properties-CFRJ8mYH.js +0 -655
- package/dist/chunks/Properties-CFRJ8mYH.js.map +0 -1
- package/dist/chunks/ResizeHandle-CXBXV6Px.js +0 -81
- package/dist/chunks/ResizeHandle-CXBXV6Px.js.map +0 -1
- package/dist/chunks/Slider-BbbmHE0c.js +0 -291
- package/dist/chunks/Slider-BbbmHE0c.js.map +0 -1
- package/dist/chunks/Timeline-DsLeV5I1.js.map +0 -1
- package/dist/chunks/icons-CdLHgzV8.js.map +0 -1
- package/dist/chunks/useReorderDragList-nQMVwNBd.js +0 -109
- package/dist/chunks/useReorderDragList-nQMVwNBd.js.map +0 -1
|
@@ -46,6 +46,9 @@ var t = {
|
|
|
46
46
|
warning: "<path d=\"M10 3.4 17.4 16.2H2.6z\"/><path d=\"M10 8.4v3.4\"/><path d=\"M10 14h0\"/>",
|
|
47
47
|
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\"/>",
|
|
48
48
|
busy: "<path d=\"M10 3.2A6.8 6.8 0 1 1 3.2 10\"/>",
|
|
49
|
+
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\"/>",
|
|
50
|
+
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\"/>",
|
|
51
|
+
modeAuto: "<path d=\"M10 2.6Q10 10 17.4 10Q10 10 10 17.4Q10 10 2.6 10Q10 10 10 2.6Z\"/>",
|
|
49
52
|
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\"/>",
|
|
50
53
|
strokeCap: "<path d=\"M2.5 10H12\" stroke-linecap=\"butt\"/><path d=\"M12 6V14\" stroke-width=\"1\"/>",
|
|
51
54
|
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 = {
|
|
|
68
71
|
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\"/>",
|
|
69
72
|
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\"/>",
|
|
70
73
|
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\"/>",
|
|
71
|
-
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\"/>"
|
|
74
|
+
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\"/>",
|
|
75
|
+
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\"/>",
|
|
76
|
+
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\"/>",
|
|
77
|
+
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\"/>"
|
|
72
78
|
}, n = {
|
|
73
79
|
viewBox: "0 0 20 20",
|
|
74
80
|
fill: "none",
|
|
@@ -92,4 +98,4 @@ function r({ name: r, className: i, size: a = 20, label: o }) {
|
|
|
92
98
|
//#endregion
|
|
93
99
|
export { t as n, r as t };
|
|
94
100
|
|
|
95
|
-
//# sourceMappingURL=Icon-
|
|
101
|
+
//# sourceMappingURL=Icon-DBXtBB1f.js.map
|
|
@@ -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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { t as e } from "./range.module-CttzfN6a.js";
|
|
2
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
4
|
+
var n = { range: "_range_1on6e_4" };
|
|
5
|
+
//#endregion
|
|
6
|
+
//#region src/components/InlineRange/InlineRange.tsx
|
|
7
|
+
function r(r) {
|
|
8
|
+
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;
|
|
9
|
+
return /* @__PURE__ */ t("input", {
|
|
10
|
+
...l,
|
|
11
|
+
type: "range",
|
|
12
|
+
value: i,
|
|
13
|
+
min: a,
|
|
14
|
+
max: o,
|
|
15
|
+
className: [
|
|
16
|
+
e.range,
|
|
17
|
+
n.range,
|
|
18
|
+
s
|
|
19
|
+
].filter(Boolean).join(" "),
|
|
20
|
+
style: {
|
|
21
|
+
"--slider-fill": `${d}%`,
|
|
22
|
+
...c
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
//#endregion
|
|
27
|
+
export { r as t };
|
|
28
|
+
|
|
29
|
+
//# sourceMappingURL=InlineRange-CBt_SBsC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InlineRange-CBt_SBsC.js","names":[],"sources":["../../src/components/InlineRange/InlineRange.module.css","../../src/components/InlineRange/InlineRange.tsx"],"sourcesContent":["/* Track and thumb come from the shared range skin. What is local to\n InlineRange is the filled-to-N% paint, which no other surface has:\n `--slider-fill` carries the value, since no static rule expresses it. */\n.range {\n flex: 1;\n --wzl-range-bg: linear-gradient(\n to right,\n var(--wzl-accent) 0 var(--slider-fill, 0%),\n var(--wzl-border-strong) var(--slider-fill, 0%) 100%\n );\n --wzl-range-box-h: var(--wzl-slider-track-h);\n /* The gradient above IS the track, so the shared track paint must not land on top of it. */\n --wzl-range-track-bg: transparent;\n border-radius: var(--wzl-radius-pill);\n}\n","import { type CSSProperties, type InputHTMLAttributes, type ReactElement } from 'react';\nimport shared from '../range.module.css';\nimport s from './InlineRange.module.css';\n\n/** Props for {@link InlineRange} — a range input's, with `value` required. */\nexport type InlineRangeProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'value' | 'min' | 'max'\n> & {\n value: number;\n min?: number;\n max?: number;\n};\n\n/**\n * Compact range input for a property row: one track, no label, no output.\n *\n * Distinct from the kit's other two — `Slider` is shaped for canvas scrubbing,\n * and `RangeSlider` is a full-width labelled form control on React Aria. This\n * one exists to sit inline beside a swatch or a readout, and to own the track\n * painting both of those surfaces need.\n */\nexport function InlineRange(props: InlineRangeProps): ReactElement {\n const { value, min = 0, max = 100, className, style, ...rest } = props;\n const span = max - min;\n const filled = span > 0 ? ((Math.min(Math.max(value, min), max) - min) / span) * 100 : 0;\n return (\n <input\n {...rest}\n type=\"range\"\n value={value}\n min={min}\n max={max}\n className={[shared.range, s.range, className].filter(Boolean).join(' ')}\n style={{ ['--slider-fill' as string]: `${filled}%`, ...style } as CSSProperties}\n />\n );\n}\n"],"mappings":";;;;;;ACsBA,SAAgB,EAAY,GAAuC;CACjE,IAAM,EAAE,UAAO,SAAM,GAAG,SAAM,KAAK,cAAW,UAAO,GAAG,MAAS,GAC3D,IAAO,IAAM,GACb,IAAS,IAAO,KAAM,KAAK,IAAI,KAAK,IAAI,GAAO,EAAI,EAAE,EAAI,GAAG,KAAO,IAAQ,MAAM;AACvF,QACE,kBAAC,SAAD;EACE,GAAI;EACJ,MAAK;EACE;EACF;EACA;EACL,WAAW;GAAC,EAAO;GAAO,EAAE;GAAO;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACvE,OAAO;GAAG,iBAA4B,GAAG,EAAO;GAAI,GAAG;GAAO;EAC9D,CAAA"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { n as e } from "./Field-
|
|
1
|
+
import { n as e } from "./Field-Bc6Nuc3p.js";
|
|
2
2
|
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef as r } from "react";
|
|
4
4
|
import { FieldError as i, Input as a, Label as o, Text as s, TextField as c } from "react-aria-components";
|
|
5
5
|
var l = {
|
|
6
|
-
field: "
|
|
7
|
-
frame: "
|
|
8
|
-
adornment: "
|
|
6
|
+
field: "_field_1jrsz_1",
|
|
7
|
+
frame: "_frame_1jrsz_9",
|
|
8
|
+
adornment: "_adornment_1jrsz_54"
|
|
9
9
|
}, u = r(function(r, u) {
|
|
10
10
|
let { label: d, description: f, errorMessage: p, placeholder: m, leadingAdornment: h, trailingAdornment: g, className: _, ...v } = r;
|
|
11
11
|
return /* @__PURE__ */ n(c, {
|
|
@@ -52,4 +52,4 @@ var l = {
|
|
|
52
52
|
//#endregion
|
|
53
53
|
export { u as t };
|
|
54
54
|
|
|
55
|
-
//# sourceMappingURL=Input-
|
|
55
|
+
//# sourceMappingURL=Input-CSAECs_T.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input-CSAECs_T.js","names":[],"sources":["../../src/components/Input/Input.module.css","../../src/components/Input/Input.tsx"],"sourcesContent":[".field {\n display: flex;\n flex-direction: column;\n width: 100%;\n min-width: 0;\n gap: 4px;\n}\n\n.frame {\n display: flex;\n align-items: center;\n gap: 6px;\n height: var(--wzl-field-h, var(--wzl-control-h));\n padding: 0 var(--wzl-field-pad-x);\n background: var(--wzl-surface-sunken);\n border: 1px solid var(--wzl-border);\n border-radius: var(--wzl-radius-sm);\n color: var(--wzl-fg);\n font-family: var(--wzl-font-ui);\n font-size: var(--wzl-font-size);\n line-height: 1;\n transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n border-color: var(--wzl-focus-ring);\n box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n border-color: var(--wzl-danger);\n}\n\n.field[data-disabled] .frame {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.frame input {\n flex: 1;\n min-width: 0;\n background: transparent;\n border: none;\n outline: none;\n color: inherit;\n font: inherit;\n padding: 0;\n}\n\n.frame input::placeholder {\n color: var(--wzl-fg-subtle);\n}\n\n.adornment {\n display: inline-flex;\n align-items: center;\n color: var(--wzl-fg-subtle);\n font-size: var(--wzl-font-size-sm);\n pointer-events: none;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n TextField,\n Label,\n Input as RACInput,\n Text,\n FieldError,\n type TextFieldProps as RACTextFieldProps,\n type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './Input.module.css';\n\n/** Props for {@link Input}, on top of React Aria's `TextField` props. */\nexport type InputProps = Omit<RACTextFieldProps, 'children' | 'className'> & {\n label?: ReactNode;\n description?: ReactNode;\n errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n placeholder?: string;\n leadingAdornment?: ReactNode;\n trailingAdornment?: ReactNode;\n className?: string;\n};\n\n/**\n * Single-line text input wrapping React Aria's TextField. Supplies a\n * default skin against the `--wzl-*` token system, and exposes the\n * familiar label / description / errorMessage / adornment slot shape.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const Input = forwardRef(function Input(\n props: InputProps,\n ref: Ref<HTMLInputElement>,\n) {\n const {\n label,\n description,\n errorMessage,\n placeholder,\n leadingAdornment,\n trailingAdornment,\n className,\n ...textFieldProps\n } = props;\n\n return (\n <TextField {...textFieldProps} className={[s.field, fieldClasses.root, className].filter(Boolean).join(' ')}>\n {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n <div className={s.frame}>\n {leadingAdornment !== undefined && <span className={s.adornment}>{leadingAdornment}</span>}\n <RACInput ref={ref} placeholder={placeholder} />\n {trailingAdornment !== undefined && <span className={s.adornment}>{trailingAdornment}</span>}\n </div>\n {description !== undefined && (\n <Text slot=\"description\" className={fieldClasses.hint}>\n {description}\n </Text>\n )}\n <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n </TextField>\n );\n});\n"],"mappings":";;;;;;;;GC+Ba,IAAQ,EAAW,SAC9B,GACA,GACA;CACA,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,qBACA,sBACA,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,GAAD;EAAW,GAAI;EAAgB,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA3G;GACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAlB;KACG,MAAqB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAwB,CAAA;KAC1F,kBAAC,GAAD;MAAe;MAAkB;MAAe,CAAA;KAC/C,MAAsB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAyB,CAAA;KACxF;;GACL,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GAC5D;;EAEd"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as n } from "react";
|
|
3
3
|
var r = {
|
|
4
|
-
list: "
|
|
5
|
-
row: "
|
|
6
|
-
label: "
|
|
7
|
-
selected: "
|
|
8
|
-
muted: "
|
|
9
|
-
empty: "
|
|
4
|
+
list: "_list_cdj63_4",
|
|
5
|
+
row: "_row_cdj63_14",
|
|
6
|
+
label: "_label_cdj63_33",
|
|
7
|
+
selected: "_selected_cdj63_39",
|
|
8
|
+
muted: "_muted_cdj63_46",
|
|
9
|
+
empty: "_empty_cdj63_50"
|
|
10
10
|
}, i = n(function({ rows: n, empty: i, className: a, overlay: o, containerProps: s }, c) {
|
|
11
11
|
let l = [r.list, a].filter(Boolean).join(" ");
|
|
12
12
|
return n.length === 0 ? /* @__PURE__ */ e("div", {
|
|
@@ -39,4 +39,4 @@ var r = {
|
|
|
39
39
|
//#endregion
|
|
40
40
|
export { i as t };
|
|
41
41
|
|
|
42
|
-
//# sourceMappingURL=ItemList-
|
|
42
|
+
//# sourceMappingURL=ItemList-POiCvUDx.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ItemList-POiCvUDx.js","names":[],"sources":["../../src/components/ItemList/ItemList.module.css","../../src/components/ItemList/ItemList.tsx"],"sourcesContent":["/* One height and one inset for every sidebar list. A panel stacking two of\n them has to have their rows line up, which is what a private copy of this\n file per list stopped happening. */\n.list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n user-select: none;\n -webkit-user-select: none;\n position: relative;\n width: 100%;\n}\n\n.row {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 8px;\n height: 24px;\n font-size: var(--wzl-font-size-sm);\n color: var(--wzl-fg);\n background: transparent;\n border-radius: var(--wzl-radius-sm);\n cursor: default;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.row:hover {\n background: var(--wzl-surface);\n}\n\n.label {\n flex: 1 1 auto;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.selected,\n.selected:hover {\n background: var(--wzl-border);\n color: var(--wzl-fg);\n}\n\n/* Present but not in effect. */\n.muted {\n color: var(--wzl-fg-subtle);\n}\n\n.empty {\n padding: 12px 8px;\n font-size: var(--wzl-font-size-sm);\n color: var(--wzl-fg-subtle);\n font-style: italic;\n}\n","/**\n * The row chrome behind a sidebar list — layers, history, anything that is a\n * flat column of selectable rows in a panel.\n *\n * It owns the container, the row box and the empty state, and nothing else:\n * what a row *means* stays with the consumer. History dims its redo entries\n * and rules a line under the current one; a layer list drags to reorder and\n * leads each row with a swatch. Both reach that through `className` and\n * `rowProps` rather than through options here, so this does not grow a flag\n * per consumer.\n *\n * Rows are one height and one inset for every list, which is the point: two\n * panels stacked in the same sidebar have to agree, and they did not while\n * each owned a private copy of the same CSS.\n */\nimport { forwardRef, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport s from './ItemList.module.css';\n\n/** One row. `id` is the React key. */\nexport interface ItemListRow {\n id: string;\n label: ReactNode;\n /** Fixed-size content before the label — a color swatch, a checkbox. */\n leading?: ReactNode;\n /** The row the list considers current. */\n selected?: boolean;\n /** Present but not in effect — history's redo entries. */\n muted?: boolean;\n /** Consumer classes for states this component has no opinion about. */\n className?: string;\n /** Handlers and data attributes for this row's element. `data-*` is\n * spelled out because `HTMLAttributes` does not admit it, and every\n * consumer here marks its rows up with one. */\n rowProps?: HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, unknown>;\n}\n\nexport interface ItemListProps {\n rows: readonly ItemListRow[];\n /** Shown in place of the rows when there are none. */\n empty?: ReactNode;\n className?: string;\n /** Rendered inside the container above the rows — a drop indicator. */\n overlay?: ReactNode;\n /** Spread onto the container: pointer handlers for a drag, `aria-label`. */\n containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nexport const ItemList = forwardRef(function ItemList(\n { rows, empty, className, overlay, containerProps }: ItemListProps,\n ref: Ref<HTMLDivElement>,\n) {\n const cls = [s.list, className].filter(Boolean).join(' ');\n if (rows.length === 0) {\n return (\n <div className={cls} ref={ref} {...containerProps}>\n <div className={s.empty}>{empty ?? '—'}</div>\n </div>\n );\n }\n return (\n <div className={cls} ref={ref} {...containerProps}>\n {overlay}\n {rows.map((row) => (\n <div\n key={row.id}\n className={[\n s.row,\n row.selected && s.selected,\n row.muted && s.muted,\n row.className,\n ].filter(Boolean).join(' ')}\n {...row.rowProps}\n >\n {row.leading}\n <span className={s.label}>{row.label}</span>\n </div>\n ))}\n </div>\n );\n});\n"],"mappings":";;;;;;;;;GC+Ca,IAAW,EAAW,SACjC,EAAE,SAAM,UAAO,cAAW,YAAS,qBACnC,GACA;CACA,IAAM,IAAM,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAQzD,QAPI,EAAK,WAAW,IAEhB,kBAAC,OAAD;EAAK,WAAW;EAAU;EAAK,GAAI;YACjC,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAQ,KAAS;GAAU,CAAA;EACzC,CAAA,GAIR,kBAAC,OAAD;EAAK,WAAW;EAAU;EAAK,GAAI;YAAnC,CACG,GACA,EAAK,KAAK,MACT,kBAAC,OAAD;GAEE,WAAW;IACT,EAAE;IACF,EAAI,YAAY,EAAE;IAClB,EAAI,SAAS,EAAE;IACf,EAAI;IACL,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC3B,GAAI,EAAI;aARV,CAUG,EAAI,SACL,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAQ,EAAI;IAAa,CAAA,CACxC;KAXC,EAAI,GAWL,CACN,CACE;;EAER"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as e } from "./dlog-CMYiRF3Q.js";
|
|
2
|
-
import { t } from "./useReorderDragList-
|
|
2
|
+
import { t } from "./useReorderDragList-UvHJFjTZ.js";
|
|
3
3
|
import { t as n } from "./DragHandleGlyph--2zsZzA2.js";
|
|
4
4
|
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
5
5
|
import { useEffect as a, useState as o } from "react";
|
|
@@ -75,9 +75,6 @@ function c({ className: c, title: l, items: u, paletteKinds: d, onAdd: f, onRemo
|
|
|
75
75
|
}), /* @__PURE__ */ i("div", {
|
|
76
76
|
className: s.list,
|
|
77
77
|
ref: b.containerProps.ref,
|
|
78
|
-
onPointerMove: b.containerProps.onPointerMove,
|
|
79
|
-
onPointerUp: b.containerProps.onPointerUp,
|
|
80
|
-
onPointerCancel: b.containerProps.onPointerCancel,
|
|
81
78
|
children: [u.map((e, t) => {
|
|
82
79
|
let a = v.has(e.id), o = b.state.draggedIds?.[0], c = o === String(e.id), l = b.state.targetIndex === t && o !== String(e.id), d = b.state.targetIndex === u.length && t === u.length - 1, f = [
|
|
83
80
|
s.card,
|
|
@@ -142,4 +139,4 @@ function c({ className: c, title: l, items: u, paletteKinds: d, onAdd: f, onRemo
|
|
|
142
139
|
//#endregion
|
|
143
140
|
export { c as t };
|
|
144
141
|
|
|
145
|
-
//# sourceMappingURL=LayerStack-
|
|
142
|
+
//# sourceMappingURL=LayerStack-BVdwhAhG.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayerStack-htMwIsJ6.js","names":[],"sources":["../../src/components/LayerStack/LayerStack.module.css","../../src/components/LayerStack/LayerStack.tsx"],"sourcesContent":["/* Authored against labkit's `.lk-root`, which supplied a border-box reset and a\n set of bare-button defaults. weasel-ui has neither, so the stack restates\n both over its own subtree rather than depending on an ancestor class. */\n.stack,\n.stack * {\n box-sizing: border-box;\n}\n\n.stack {\n display: grid;\n gap: 8px;\n}\n\n.head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n}\n\n.title {\n margin: 0;\n font-family: var(--wzl-font-display);\n font-weight: var(--wzl-font-weight-light);\n font-size: var(--wzl-font-size-lg);\n color: var(--wzl-fg);\n}\n\n.palette {\n display: flex;\n gap: 4px;\n}\n\n.add {\n font: inherit;\n height: var(--wzl-control-h);\n background: transparent;\n border: 1px dashed var(--wzl-border);\n border-radius: var(--wzl-radius-sm);\n padding: 2px 8px;\n font-size: var(--wzl-font-size-sm);\n color: var(--wzl-fg-subtle);\n cursor: pointer;\n}\n\n.add:hover {\n background: var(--wzl-surface-raised);\n color: var(--wzl-fg);\n}\n\n.list {\n display: grid;\n gap: 6px;\n}\n\n.dropHint {\n height: 2px;\n background: var(--wzl-accent);\n border-radius: var(--wzl-radius-sm);\n}\n\n.empty {\n color: var(--wzl-fg-subtle);\n font-size: var(--wzl-font-size);\n padding: 8px;\n text-align: center;\n}\n\n.card {\n background: var(--wzl-surface-raised);\n border: 1px solid var(--wzl-border);\n border-radius: var(--wzl-radius-md);\n overflow: hidden;\n}\n\n.cardAccented {\n /* Re-bind --wzl-accent inside the card so descendant controls (slider tracks\n and thumbs, readouts, etc.) tint to the per-card accent instead of the\n global theme accent. Mirrors EffectCard's behavior. */\n --wzl-accent: var(--wzl-layer-stack-accent);\n border-left: 3px solid var(--wzl-layer-stack-accent);\n}\n\n.cardDragging {\n opacity: 0.5;\n}\n\n.cardHead {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 8px;\n}\n\n.handle {\n font: inherit;\n background: transparent;\n border: 0;\n color: var(--wzl-fg-subtle);\n padding: 2px 4px;\n cursor: grab;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 22px;\n height: 22px;\n border-radius: var(--wzl-radius-sm);\n font-weight: var(--wzl-font-weight-bold);\n font-size: var(--wzl-font-size);\n}\n\n.cardAccented .handle {\n background: var(--wzl-layer-stack-accent);\n color: white;\n}\n\n.handle:active {\n cursor: grabbing;\n}\n\n.kind,\n.primary {\n flex: 1;\n font-size: var(--wzl-font-size);\n}\n\n.primary {\n background: transparent;\n border: 0;\n color: var(--wzl-fg);\n font: inherit;\n text-transform: uppercase;\n letter-spacing: var(--wzl-tracking-wide);\n}\n\n.remove {\n font: inherit;\n height: var(--wzl-control-h);\n background: transparent;\n border: 0;\n color: var(--wzl-fg-subtle);\n font-size: var(--wzl-font-size-lg);\n cursor: pointer;\n padding: 2px 6px;\n}\n\n.remove:hover {\n color: var(--wzl-fg);\n}\n\n.cardBody {\n padding: 8px;\n border-top: 1px solid var(--wzl-border);\n}\n","import { type CSSProperties, type ReactNode, type RefCallback, useEffect, useState } from 'react';\nimport { dlog } from '../../dlog';\nimport { useReorderDragList } from '../../useReorderDragList';\nimport { DragHandleGlyph } from '../DragHandleGlyph';\nimport s from './LayerStack.module.css';\n\n/** One card in a layer stack: its identity, the label shown when collapsed,\n * and the optional select hoisted into its header. */\nexport interface LayerStackItem {\n /** Stable id used for keys, onRemove, onReorder. Numeric to match\n * common id-from-nextId conventions; string ids also work. */\n id: number | string;\n /** Short kind label rendered in the header when no primary select\n * is hoisted (e.g. \"shadow\", \"stroke\"). */\n kind: string;\n /** When present, hoist this select into the card header so the user\n * can switch mode/shape without expanding. */\n primaryValue?: string;\n primaryOptions?: string[];\n /** Accent CSS color used as the left border / index-badge fill. Sets\n * --wzl-layer-stack-accent on the card, which re-binds --wzl-accent\n * for everything inside it. */\n accent?: string;\n /** Optional badge text rendered before the primary control\n * (e.g. tail index \"1\", \"2\", \"3\"). When omitted a drag handle\n * glyph renders in its place. */\n badge?: string;\n /** Initial expanded state. Defaults to true for newly-added items. */\n defaultExpanded?: boolean;\n}\n\n/** Props for `<LayerStack>`. */\nexport interface LayerStackProps {\n title: string;\n items: LayerStackItem[];\n /** Kinds the user can add via the header palette. */\n paletteKinds: string[];\n onAdd: (kind: string) => void;\n onRemove: (id: number | string) => void;\n onReorder: (orderedIds: Array<number | string>) => void;\n onPrimaryChange: (id: number | string, nextValue: string) => void;\n /** Render the body controls for each item. */\n renderBody: (item: LayerStackItem) => ReactNode;\n /** Hide the title + palette row (used when an outer wrap renders its\n * own head — see speech-balloons Tails panel). */\n hideHead?: boolean;\n /** Appended to the root element's class list. The module's own class names\n * are hashed, so this is the supported way to reach the stack from a\n * consumer stylesheet. */\n className?: string;\n}\n\n/** A drag-reorderable stack of expandable cards, with a palette in the header\n * for adding more. The body of each card is the caller's to render. */\nexport function LayerStack({\n className,\n title,\n items,\n paletteKinds,\n onAdd,\n onRemove,\n onReorder,\n onPrimaryChange,\n renderBody,\n hideHead,\n}: LayerStackProps) {\n const [expandedIds, setExpandedIds] = useState<Set<number | string>>(\n () => new Set(items.filter((i) => i.defaultExpanded !== false).map((i) => i.id)),\n );\n\n useEffect(() => {\n setExpandedIds((prev) => {\n let next: Set<number | string> | null = null;\n for (const item of items) {\n if (item.defaultExpanded === false) continue;\n if (prev.has(item.id)) continue;\n if (next === null) next = new Set(prev);\n next.add(item.id);\n }\n return next ?? prev;\n });\n }, [items]);\n\n const dragItems = items.map((it) => ({ id: String(it.id), label: it.kind }));\n const drag = useReorderDragList({\n items: dragItems,\n selectedIds: [],\n onReorder: (ids, targetIndex) => {\n dlog('layer-stack', 'onReorder', { ids, targetIndex });\n const orig = items.map((i) => i.id);\n const moving = new Set(ids);\n const remaining = orig.filter((id) => !moving.has(String(id)));\n const movedIds = items.map((i) => i.id).filter((id) => moving.has(String(id)));\n // weasel reports targetIndex against the original list (which includes\n // the dragged row). Each moved item that originally sat before\n // targetIndex needs to shift the insertion point left by one.\n const shift = orig.filter((id, idx) => moving.has(String(id)) && idx < targetIndex).length;\n const adjusted = targetIndex - shift;\n const out = [...remaining];\n out.splice(adjusted, 0, ...movedIds);\n onReorder(out);\n },\n });\n\n const toggleExpanded = (id: number | string) => {\n setExpandedIds((current) => {\n const n = new Set(current);\n if (n.has(id)) n.delete(id);\n else n.add(id);\n return n;\n });\n };\n\n return (\n <div className={className ? `${s.stack} ${className}` : s.stack}>\n {!hideHead && (\n <div className={s.head}>\n <h2 className={s.title}>{title}</h2>\n <div className={s.palette}>\n {paletteKinds.map((k) => (\n <button\n key={k}\n type=\"button\"\n className={s.add}\n onClick={() => {\n dlog('layer-stack', 'onAdd', { kind: k });\n onAdd(k);\n }}\n aria-label={`Add ${k}`}\n >\n {k}\n </button>\n ))}\n </div>\n </div>\n )}\n <div\n className={s.list}\n ref={drag.containerProps.ref as RefCallback<HTMLDivElement>}\n onPointerMove={drag.containerProps.onPointerMove}\n onPointerUp={drag.containerProps.onPointerUp}\n onPointerCancel={drag.containerProps.onPointerCancel}\n >\n {items.map((item, i) => {\n const expanded = expandedIds.has(item.id);\n const draggedId = drag.state.draggedIds?.[0];\n const isDragging = draggedId === String(item.id);\n const showHintBefore = drag.state.targetIndex === i && draggedId !== String(item.id);\n const showHintAfter = drag.state.targetIndex === items.length && i === items.length - 1;\n const cardCls = [\n s.card,\n isDragging ? s.cardDragging : '',\n item.accent ? s.cardAccented : '',\n ]\n .filter(Boolean)\n .join(' ');\n const cardStyle = item.accent\n ? ({ '--wzl-layer-stack-accent': item.accent } as CSSProperties)\n : undefined;\n const { onPointerDown } = drag.rowProps(String(item.id), i);\n return (\n <div key={item.id}>\n {showHintBefore && <div className={s.dropHint} />}\n <div className={cardCls} data-testid={`layer-card-${item.id}`} style={cardStyle}>\n <div className={s.cardHead}>\n <button\n type=\"button\"\n className={s.handle}\n aria-label={`Drag to reorder layer ${item.id}`}\n onPointerDown={onPointerDown}\n onClick={() => toggleExpanded(item.id)}\n >\n {item.badge ?? <DragHandleGlyph />}\n </button>\n {item.primaryValue !== undefined && item.primaryOptions ? (\n <select\n className={s.primary}\n value={item.primaryValue}\n aria-label={`Primary select for layer ${item.id}`}\n onChange={(e) => onPrimaryChange(item.id, e.target.value)}\n onClick={(e) => e.stopPropagation()}\n >\n {item.primaryOptions.map((o) => (\n <option key={o} value={o}>\n {o}\n </option>\n ))}\n </select>\n ) : (\n <span className={s.kind}>{item.kind}</span>\n )}\n <button\n type=\"button\"\n className={s.remove}\n aria-label=\"Remove layer\"\n onClick={(e) => {\n e.stopPropagation();\n onRemove(item.id);\n }}\n >\n ✕\n </button>\n </div>\n {expanded && <div className={s.cardBody}>{renderBody(item)}</div>}\n </div>\n {showHintAfter && <div className={s.dropHint} />}\n </div>\n );\n })}\n {items.length === 0 && (\n <div className={s.empty}>No layers — add one above.</div>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LayerStack-BVdwhAhG.js","names":[],"sources":["../../src/components/LayerStack/LayerStack.module.css","../../src/components/LayerStack/LayerStack.tsx"],"sourcesContent":["/* Authored against labkit's `.lk-root`, which supplied a border-box reset and a\n set of bare-button defaults. weasel-ui has neither, so the stack restates\n both over its own subtree rather than depending on an ancestor class. */\n.stack,\n.stack * {\n box-sizing: border-box;\n}\n\n.stack {\n display: grid;\n gap: 8px;\n}\n\n.head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n}\n\n.title {\n margin: 0;\n font-family: var(--wzl-font-display);\n font-weight: var(--wzl-font-weight-light);\n font-size: var(--wzl-font-size-lg);\n color: var(--wzl-fg);\n}\n\n.palette {\n display: flex;\n gap: 4px;\n}\n\n.add {\n font: inherit;\n height: var(--wzl-control-h);\n background: transparent;\n border: 1px dashed var(--wzl-border);\n border-radius: var(--wzl-radius-sm);\n padding: 2px 8px;\n font-size: var(--wzl-font-size-sm);\n color: var(--wzl-fg-subtle);\n cursor: pointer;\n}\n\n.add:hover {\n background: var(--wzl-surface-raised);\n color: var(--wzl-fg);\n}\n\n.list {\n display: grid;\n gap: 6px;\n}\n\n.dropHint {\n height: 2px;\n background: var(--wzl-accent);\n border-radius: var(--wzl-radius-sm);\n}\n\n.empty {\n color: var(--wzl-fg-subtle);\n font-size: var(--wzl-font-size);\n padding: 8px;\n text-align: center;\n}\n\n.card {\n background: var(--wzl-surface-raised);\n border: 1px solid var(--wzl-border);\n border-radius: var(--wzl-radius-md);\n overflow: hidden;\n}\n\n.cardAccented {\n /* Re-bind --wzl-accent inside the card so descendant controls (slider tracks\n and thumbs, readouts, etc.) tint to the per-card accent instead of the\n global theme accent. Mirrors EffectCard's behavior. */\n --wzl-accent: var(--wzl-layer-stack-accent);\n border-left: 3px solid var(--wzl-layer-stack-accent);\n}\n\n.cardDragging {\n opacity: 0.5;\n}\n\n.cardHead {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 8px;\n}\n\n.handle {\n font: inherit;\n background: transparent;\n border: 0;\n color: var(--wzl-fg-subtle);\n padding: 2px 4px;\n cursor: grab;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 22px;\n height: 22px;\n border-radius: var(--wzl-radius-sm);\n font-weight: var(--wzl-font-weight-bold);\n font-size: var(--wzl-font-size);\n}\n\n.cardAccented .handle {\n background: var(--wzl-layer-stack-accent);\n color: white;\n}\n\n.handle:active {\n cursor: grabbing;\n}\n\n.kind,\n.primary {\n flex: 1;\n font-size: var(--wzl-font-size);\n}\n\n.primary {\n background: transparent;\n border: 0;\n color: var(--wzl-fg);\n font: inherit;\n text-transform: uppercase;\n letter-spacing: var(--wzl-tracking-wide);\n}\n\n.remove {\n font: inherit;\n height: var(--wzl-control-h);\n background: transparent;\n border: 0;\n color: var(--wzl-fg-subtle);\n font-size: var(--wzl-font-size-lg);\n cursor: pointer;\n padding: 2px 6px;\n}\n\n.remove:hover {\n color: var(--wzl-fg);\n}\n\n.cardBody {\n padding: 8px;\n border-top: 1px solid var(--wzl-border);\n}\n","import { type CSSProperties, type ReactNode, type RefCallback, useEffect, useState } from 'react';\nimport { dlog } from '../../dlog';\nimport { useReorderDragList } from '../../useReorderDragList';\nimport { DragHandleGlyph } from '../DragHandleGlyph';\nimport s from './LayerStack.module.css';\n\n/** One card in a layer stack: its identity, the label shown when collapsed,\n * and the optional select hoisted into its header. */\nexport interface LayerStackItem {\n /** Stable id used for keys, onRemove, onReorder. Numeric to match\n * common id-from-nextId conventions; string ids also work. */\n id: number | string;\n /** Short kind label rendered in the header when no primary select\n * is hoisted (e.g. \"shadow\", \"stroke\"). */\n kind: string;\n /** When present, hoist this select into the card header so the user\n * can switch mode/shape without expanding. */\n primaryValue?: string;\n primaryOptions?: string[];\n /** Accent CSS color used as the left border / index-badge fill. Sets\n * --wzl-layer-stack-accent on the card, which re-binds --wzl-accent\n * for everything inside it. */\n accent?: string;\n /** Optional badge text rendered before the primary control\n * (e.g. tail index \"1\", \"2\", \"3\"). When omitted a drag handle\n * glyph renders in its place. */\n badge?: string;\n /** Initial expanded state. Defaults to true for newly-added items. */\n defaultExpanded?: boolean;\n}\n\n/** Props for `<LayerStack>`. */\nexport interface LayerStackProps {\n title: string;\n items: LayerStackItem[];\n /** Kinds the user can add via the header palette. */\n paletteKinds: string[];\n onAdd: (kind: string) => void;\n onRemove: (id: number | string) => void;\n onReorder: (orderedIds: Array<number | string>) => void;\n onPrimaryChange: (id: number | string, nextValue: string) => void;\n /** Render the body controls for each item. */\n renderBody: (item: LayerStackItem) => ReactNode;\n /** Hide the title + palette row (used when an outer wrap renders its\n * own head — see speech-balloons Tails panel). */\n hideHead?: boolean;\n /** Appended to the root element's class list. The module's own class names\n * are hashed, so this is the supported way to reach the stack from a\n * consumer stylesheet. */\n className?: string;\n}\n\n/** A drag-reorderable stack of expandable cards, with a palette in the header\n * for adding more. The body of each card is the caller's to render. */\nexport function LayerStack({\n className,\n title,\n items,\n paletteKinds,\n onAdd,\n onRemove,\n onReorder,\n onPrimaryChange,\n renderBody,\n hideHead,\n}: LayerStackProps) {\n const [expandedIds, setExpandedIds] = useState<Set<number | string>>(\n () => new Set(items.filter((i) => i.defaultExpanded !== false).map((i) => i.id)),\n );\n\n useEffect(() => {\n setExpandedIds((prev) => {\n let next: Set<number | string> | null = null;\n for (const item of items) {\n if (item.defaultExpanded === false) continue;\n if (prev.has(item.id)) continue;\n if (next === null) next = new Set(prev);\n next.add(item.id);\n }\n return next ?? prev;\n });\n }, [items]);\n\n const dragItems = items.map((it) => ({ id: String(it.id), label: it.kind }));\n const drag = useReorderDragList({\n items: dragItems,\n selectedIds: [],\n onReorder: (ids, targetIndex) => {\n dlog('layer-stack', 'onReorder', { ids, targetIndex });\n const orig = items.map((i) => i.id);\n const moving = new Set(ids);\n const remaining = orig.filter((id) => !moving.has(String(id)));\n const movedIds = items.map((i) => i.id).filter((id) => moving.has(String(id)));\n // weasel reports targetIndex against the original list (which includes\n // the dragged row). Each moved item that originally sat before\n // targetIndex needs to shift the insertion point left by one.\n const shift = orig.filter((id, idx) => moving.has(String(id)) && idx < targetIndex).length;\n const adjusted = targetIndex - shift;\n const out = [...remaining];\n out.splice(adjusted, 0, ...movedIds);\n onReorder(out);\n },\n });\n\n const toggleExpanded = (id: number | string) => {\n setExpandedIds((current) => {\n const n = new Set(current);\n if (n.has(id)) n.delete(id);\n else n.add(id);\n return n;\n });\n };\n\n return (\n <div className={className ? `${s.stack} ${className}` : s.stack}>\n {!hideHead && (\n <div className={s.head}>\n <h2 className={s.title}>{title}</h2>\n <div className={s.palette}>\n {paletteKinds.map((k) => (\n <button\n key={k}\n type=\"button\"\n className={s.add}\n onClick={() => {\n dlog('layer-stack', 'onAdd', { kind: k });\n onAdd(k);\n }}\n aria-label={`Add ${k}`}\n >\n {k}\n </button>\n ))}\n </div>\n </div>\n )}\n <div\n className={s.list}\n ref={drag.containerProps.ref as RefCallback<HTMLDivElement>}\n >\n {items.map((item, i) => {\n const expanded = expandedIds.has(item.id);\n const draggedId = drag.state.draggedIds?.[0];\n const isDragging = draggedId === String(item.id);\n const showHintBefore = drag.state.targetIndex === i && draggedId !== String(item.id);\n const showHintAfter = drag.state.targetIndex === items.length && i === items.length - 1;\n const cardCls = [\n s.card,\n isDragging ? s.cardDragging : '',\n item.accent ? s.cardAccented : '',\n ]\n .filter(Boolean)\n .join(' ');\n const cardStyle = item.accent\n ? ({ '--wzl-layer-stack-accent': item.accent } as CSSProperties)\n : undefined;\n const { onPointerDown } = drag.rowProps(String(item.id), i);\n return (\n <div key={item.id}>\n {showHintBefore && <div className={s.dropHint} />}\n <div className={cardCls} data-testid={`layer-card-${item.id}`} style={cardStyle}>\n <div className={s.cardHead}>\n <button\n type=\"button\"\n className={s.handle}\n aria-label={`Drag to reorder layer ${item.id}`}\n onPointerDown={onPointerDown}\n onClick={() => toggleExpanded(item.id)}\n >\n {item.badge ?? <DragHandleGlyph />}\n </button>\n {item.primaryValue !== undefined && item.primaryOptions ? (\n <select\n className={s.primary}\n value={item.primaryValue}\n aria-label={`Primary select for layer ${item.id}`}\n onChange={(e) => onPrimaryChange(item.id, e.target.value)}\n onClick={(e) => e.stopPropagation()}\n >\n {item.primaryOptions.map((o) => (\n <option key={o} value={o}>\n {o}\n </option>\n ))}\n </select>\n ) : (\n <span className={s.kind}>{item.kind}</span>\n )}\n <button\n type=\"button\"\n className={s.remove}\n aria-label=\"Remove layer\"\n onClick={(e) => {\n e.stopPropagation();\n onRemove(item.id);\n }}\n >\n ✕\n </button>\n </div>\n {expanded && <div className={s.cardBody}>{renderBody(item)}</div>}\n </div>\n {showHintAfter && <div className={s.dropHint} />}\n </div>\n );\n })}\n {items.length === 0 && (\n <div className={s.empty}>No layers — add one above.</div>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
import { n as e } from "./Field-
|
|
1
|
+
import { n as e } from "./Field-Bc6Nuc3p.js";
|
|
2
2
|
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef as r } from "react";
|
|
4
4
|
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";
|
|
5
5
|
var d = {
|
|
6
|
-
field: "
|
|
7
|
-
frame: "
|
|
8
|
-
steppers: "
|
|
9
|
-
stepper: "
|
|
6
|
+
field: "_field_1ey71_1",
|
|
7
|
+
frame: "_frame_1ey71_9",
|
|
8
|
+
steppers: "_steppers_1ey71_57",
|
|
9
|
+
stepper: "_stepper_1ey71_57",
|
|
10
|
+
ghost: "_ghost_1ey71_98"
|
|
10
11
|
}, f = r(function(r, f) {
|
|
11
|
-
let { label: p, description: m, errorMessage: h, hideSteppers: g,
|
|
12
|
+
let { label: p, description: m, errorMessage: h, hideSteppers: g, ghost: _, placeholder: v, className: y, ...b } = r;
|
|
12
13
|
return /* @__PURE__ */ n(l, {
|
|
13
|
-
...
|
|
14
|
+
...b,
|
|
14
15
|
className: [
|
|
15
16
|
d.field,
|
|
16
17
|
e.root,
|
|
17
|
-
|
|
18
|
+
y
|
|
18
19
|
].filter(Boolean).join(" "),
|
|
19
20
|
children: [
|
|
20
21
|
p !== void 0 && /* @__PURE__ */ t(c, {
|
|
@@ -22,10 +23,10 @@ var d = {
|
|
|
22
23
|
children: p
|
|
23
24
|
}),
|
|
24
25
|
/* @__PURE__ */ n(o, {
|
|
25
|
-
className: d.frame,
|
|
26
|
+
className: _ ? `${d.frame} ${d.ghost}` : d.frame,
|
|
26
27
|
children: [/* @__PURE__ */ t(s, {
|
|
27
28
|
ref: f,
|
|
28
|
-
placeholder:
|
|
29
|
+
placeholder: v
|
|
29
30
|
}), !g && /* @__PURE__ */ n("div", {
|
|
30
31
|
className: d.steppers,
|
|
31
32
|
children: [/* @__PURE__ */ t(i, {
|
|
@@ -56,4 +57,4 @@ var d = {
|
|
|
56
57
|
//#endregion
|
|
57
58
|
export { f as t };
|
|
58
59
|
|
|
59
|
-
//# sourceMappingURL=NumberField-
|
|
60
|
+
//# sourceMappingURL=NumberField-Byw1iaIJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { n as e, t } from "./Icon-
|
|
1
|
+
import { n as e, t } from "./Icon-DBXtBB1f.js";
|
|
2
2
|
import { t as n } from "./ToggleBar-D0veW91s.js";
|
|
3
|
-
import { t as r } from "./ColorField-
|
|
4
|
-
import { r as i } from "./GradientEditor-
|
|
5
|
-
import { t as a } from "./PatternPicker-
|
|
3
|
+
import { t as r } from "./ColorField-pEkaSppg.js";
|
|
4
|
+
import { r as i } from "./GradientEditor-CPeTbkFE.js";
|
|
5
|
+
import { t as a } from "./PatternPicker-G9e0CU5H.js";
|
|
6
6
|
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
7
7
|
import { getPaintKind as c, listPaintKinds as l, withGradientKind as u } from "@weasel-js/core";
|
|
8
8
|
import { useCallback as d, useRef as f } from "react";
|
|
@@ -115,4 +115,4 @@ function b(b) {
|
|
|
115
115
|
//#endregion
|
|
116
116
|
export { b as t };
|
|
117
117
|
|
|
118
|
-
//# sourceMappingURL=PaintInput-
|
|
118
|
+
//# sourceMappingURL=PaintInput-6HTUAFL1.js.map
|
|
@@ -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-6HTUAFL1.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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PatternPicker-
|
|
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"}
|