@weasel-js/ui 1.3.0-pre.0 → 1.4.0-pre.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/{ActionBar-BTev_ZZl.js → ActionBar-D4N1o4LB.js} +2 -2
- package/dist/chunks/{ActionBar-BTev_ZZl.js.map → ActionBar-D4N1o4LB.js.map} +1 -1
- package/dist/chunks/{ActionsBar-gTuCtkv8.js → ActionsBar-B-gWm0NE.js} +3 -3
- package/dist/chunks/{ActionsBar-gTuCtkv8.js.map → ActionsBar-B-gWm0NE.js.map} +1 -1
- package/dist/chunks/{Badge-9dPfvYOk.js → Badge-BXTDs-zi.js} +1 -1
- package/dist/chunks/{Badge-9dPfvYOk.js.map → Badge-BXTDs-zi.js.map} +1 -1
- package/dist/chunks/{BandEditor-DKbcHG2_.js → BandEditor-D13ybQN_.js} +1 -1
- package/dist/chunks/{BandEditor-DKbcHG2_.js.map → BandEditor-D13ybQN_.js.map} +1 -1
- package/dist/chunks/{Button-CIu40Epu.js → Button-0OdcoOMx.js} +1 -1
- package/dist/chunks/{Button-CIu40Epu.js.map → Button-0OdcoOMx.js.map} +1 -1
- package/dist/chunks/{Callout-CHs98djt.js → Callout-DAFusbzz.js} +1 -1
- package/dist/chunks/Callout-DAFusbzz.js.map +1 -0
- package/dist/chunks/{Checkbox-BLEw-wEb.js → Checkbox-BePa_djO.js} +1 -1
- package/dist/chunks/{Checkbox-BLEw-wEb.js.map → Checkbox-BePa_djO.js.map} +1 -1
- package/dist/chunks/{ColorField-D1t-BdSa.js → ColorField-CKbnsEUN.js} +2 -2
- package/dist/chunks/{ColorField-D1t-BdSa.js.map → ColorField-CKbnsEUN.js.map} +1 -1
- package/dist/chunks/{ComboBox-cvdKolWv.js → ComboBox-B6QS8y3j.js} +2 -2
- package/dist/chunks/{ComboBox-cvdKolWv.js.map → ComboBox-B6QS8y3j.js.map} +1 -1
- package/dist/chunks/{CurveEditor-BaA-PabB.js → CurveEditor-COJ6WK9K.js} +3 -2
- package/dist/chunks/{CurveEditor-BaA-PabB.js.map → CurveEditor-COJ6WK9K.js.map} +1 -1
- package/dist/chunks/DataGrid-BWZZUekH.js +107 -0
- package/dist/chunks/DataGrid-BWZZUekH.js.map +1 -0
- package/dist/chunks/DetentSlider-CXIeTHaM.js +83 -0
- package/dist/chunks/DetentSlider-CXIeTHaM.js.map +1 -0
- package/dist/chunks/{Dialog-DC1x46Sq.js → Dialog-CQAZ7hS7.js} +1 -1
- package/dist/chunks/{Dialog-DC1x46Sq.js.map → Dialog-CQAZ7hS7.js.map} +1 -1
- package/dist/chunks/DragHandleGlyph--2zsZzA2.js +47 -0
- package/dist/chunks/DragHandleGlyph--2zsZzA2.js.map +1 -0
- package/dist/chunks/{Field-BjFl_yng.js → Field-BCcTt6Fd.js} +1 -1
- package/dist/chunks/{Field-BjFl_yng.js.map → Field-BCcTt6Fd.js.map} +1 -1
- package/dist/chunks/FontFamilySelect-DwkwRYrr.js +29 -0
- package/dist/chunks/FontFamilySelect-DwkwRYrr.js.map +1 -0
- package/dist/chunks/{GradientEditor-BJRD0n1g.js → GradientEditor-FwNdxxf-.js} +4 -4
- package/dist/chunks/{GradientEditor-BJRD0n1g.js.map → GradientEditor-FwNdxxf-.js.map} +1 -1
- package/dist/chunks/{PaintInput-Cggm9OIl.js → Icon-CxoJb_bw.js} +17 -127
- package/dist/chunks/Icon-CxoJb_bw.js.map +1 -0
- package/dist/chunks/{InlineRange-C6UYKxLD.js → InlineRange-mb19EGOI.js} +1 -1
- package/dist/chunks/{InlineRange-C6UYKxLD.js.map → InlineRange-mb19EGOI.js.map} +1 -1
- package/dist/chunks/{Input-DhWBgpRx.js → Input-DRUeowbz.js} +2 -2
- package/dist/chunks/{Input-DhWBgpRx.js.map → Input-DRUeowbz.js.map} +1 -1
- package/dist/chunks/ItemList-BUTk9E8-.js +42 -0
- package/dist/chunks/ItemList-BUTk9E8-.js.map +1 -0
- package/dist/chunks/{Keycaps-BhCKdyws.js → Keycaps-DszN5Dwl.js} +1 -1
- package/dist/chunks/{Keycaps-BhCKdyws.js.map → Keycaps-DszN5Dwl.js.map} +1 -1
- package/dist/chunks/LayerStack-htMwIsJ6.js +145 -0
- package/dist/chunks/LayerStack-htMwIsJ6.js.map +1 -0
- package/dist/chunks/{NumberField-ZdVa4bpJ.js → NumberField-CQ7OJORF.js} +2 -2
- package/dist/chunks/{NumberField-ZdVa4bpJ.js.map → NumberField-CQ7OJORF.js.map} +1 -1
- package/dist/chunks/{OptionsBar-DahCI4Aq.js → OptionsBar-efIwfqYe.js} +3 -3
- package/dist/chunks/{OptionsBar-DahCI4Aq.js.map → OptionsBar-efIwfqYe.js.map} +1 -1
- package/dist/chunks/PaintInput-CgZR3B0r.js +118 -0
- package/dist/chunks/PaintInput-CgZR3B0r.js.map +1 -0
- package/dist/chunks/{PatternPicker-B63SlDoF.js → PatternPicker-v9BFsaMM.js} +2 -2
- package/dist/chunks/{PatternPicker-B63SlDoF.js.map → PatternPicker-v9BFsaMM.js.map} +1 -1
- package/dist/chunks/Plot2D-B08SYGQV.js +134 -0
- package/dist/chunks/Plot2D-B08SYGQV.js.map +1 -0
- package/dist/chunks/{PointPlotter-CLd9u5Bq.js → PointPlotter-DEh7a3xB.js} +2 -2
- package/dist/chunks/{PointPlotter-CLd9u5Bq.js.map → PointPlotter-DEh7a3xB.js.map} +1 -1
- package/dist/chunks/{Powerline-DhQJYaUg.js → Powerline-M1Q3Hx5E.js} +2 -2
- package/dist/chunks/{Powerline-DhQJYaUg.js.map → Powerline-M1Q3Hx5E.js.map} +1 -1
- package/dist/chunks/{Prefs-BSJ0lMmJ.js → Prefs-C2qhxnmt.js} +11 -11
- package/dist/chunks/{Prefs-BSJ0lMmJ.js.map → Prefs-C2qhxnmt.js.map} +1 -1
- package/dist/chunks/Properties-CFRJ8mYH.js +655 -0
- package/dist/chunks/Properties-CFRJ8mYH.js.map +1 -0
- package/dist/chunks/{RadioGroup-vtwjRiUm.js → RadioGroup-B8eMJ6lu.js} +2 -2
- package/dist/chunks/{RadioGroup-vtwjRiUm.js.map → RadioGroup-B8eMJ6lu.js.map} +1 -1
- package/dist/chunks/{RangeSlider-B-n_7AgJ.js → RangeSlider-JczhglgA.js} +1 -1
- package/dist/chunks/RangeSlider-JczhglgA.js.map +1 -0
- package/dist/chunks/{ResizeHandle--ZExnMfa.js → ResizeHandle-CXBXV6Px.js} +1 -1
- package/dist/chunks/{ResizeHandle--ZExnMfa.js.map → ResizeHandle-CXBXV6Px.js.map} +1 -1
- package/dist/chunks/{Select--BVTi-j0.js → Select-g8PhE010.js} +2 -2
- package/dist/chunks/{Select--BVTi-j0.js.map → Select-g8PhE010.js.map} +1 -1
- package/dist/chunks/SelectionPanel-Cl18SdD6.js +561 -0
- package/dist/chunks/SelectionPanel-Cl18SdD6.js.map +1 -0
- package/dist/chunks/{Sidebar-CtwBdr4n.js → Sidebar-mWGsndWw.js} +1 -1
- package/dist/chunks/{Sidebar-CtwBdr4n.js.map → Sidebar-mWGsndWw.js.map} +1 -1
- package/dist/chunks/SidebarPanel-B2d0erLv.js +59 -0
- package/dist/chunks/SidebarPanel-B2d0erLv.js.map +1 -0
- package/dist/chunks/Slider-BbbmHE0c.js +291 -0
- package/dist/chunks/Slider-BbbmHE0c.js.map +1 -0
- package/dist/chunks/{StatusBar-D_wu-SZh.js → StatusBar-xxCcWsfq.js} +1 -1
- package/dist/chunks/{StatusBar-D_wu-SZh.js.map → StatusBar-xxCcWsfq.js.map} +1 -1
- package/dist/chunks/{Switch-CtZwp5zm.js → Switch-QviBb61l.js} +1 -1
- package/dist/chunks/{Switch-CtZwp5zm.js.map → Switch-QviBb61l.js.map} +1 -1
- package/dist/chunks/{Tabs-lB0IB4TX.js → Tabs-DT-dIt6d.js} +1 -1
- package/dist/chunks/{Tabs-lB0IB4TX.js.map → Tabs-DT-dIt6d.js.map} +1 -1
- package/dist/chunks/Timeline-DsLeV5I1.js +894 -0
- package/dist/chunks/Timeline-DsLeV5I1.js.map +1 -0
- package/dist/chunks/{Toast-hr9BYsho.js → Toast-CfkiN0Nv.js} +1 -1
- package/dist/chunks/{Toast-hr9BYsho.js.map → Toast-CfkiN0Nv.js.map} +1 -1
- package/dist/chunks/{ToggleBar-BxgWq-wO.js → ToggleBar-D0veW91s.js} +2 -2
- package/dist/chunks/{ToggleBar-BxgWq-wO.js.map → ToggleBar-D0veW91s.js.map} +1 -1
- package/dist/chunks/{ToolButton-CJrPjbsj.js → ToolButton-CLoR9Z4o.js} +2 -2
- package/dist/chunks/{ToolButton-CJrPjbsj.js.map → ToolButton-CLoR9Z4o.js.map} +1 -1
- package/dist/chunks/{ToolGroup-D_lDzkvU.js → ToolGroup-BnE23mcA.js} +1 -1
- package/dist/chunks/{ToolGroup-D_lDzkvU.js.map → ToolGroup-BnE23mcA.js.map} +1 -1
- package/dist/chunks/{ToolOptionsBar-BA6Sb3U2.js → ToolOptionsBar-ByHX7y1M.js} +1 -1
- package/dist/chunks/{ToolOptionsBar-BA6Sb3U2.js.map → ToolOptionsBar-ByHX7y1M.js.map} +1 -1
- package/dist/chunks/{ToolPalette-TMvkaJwr.js → ToolPalette-W-rAsomq.js} +5 -5
- package/dist/chunks/{ToolPalette-TMvkaJwr.js.map → ToolPalette-W-rAsomq.js.map} +1 -1
- package/dist/chunks/{Tooltip-Di7vxbFa.js → Tooltip-Bq8Hvj4r.js} +1 -1
- package/dist/chunks/{Tooltip-Di7vxbFa.js.map → Tooltip-Bq8Hvj4r.js.map} +1 -1
- package/dist/chunks/dlog-CMYiRF3Q.js +38 -0
- package/dist/chunks/dlog-CMYiRF3Q.js.map +1 -0
- package/dist/chunks/icons-CdLHgzV8.js +144 -0
- package/dist/chunks/icons-CdLHgzV8.js.map +1 -0
- package/dist/chunks/{keyGlyph-DNpLxF8u.js → keyGlyph-BLFMKZgF.js} +1 -1
- package/dist/chunks/{keyGlyph-DNpLxF8u.js.map → keyGlyph-BLFMKZgF.js.map} +1 -1
- package/dist/chunks/number-D3TDawLC.js +18 -0
- package/dist/chunks/number-D3TDawLC.js.map +1 -0
- package/dist/chunks/{segmentedControl.module-D4b7x19O.js → segmentedControl.module-XADeq9e5.js} +1 -1
- package/dist/chunks/{segmentedControl.module-D4b7x19O.js.map → segmentedControl.module-XADeq9e5.js.map} +1 -1
- package/dist/chunks/useReorderDragList-nQMVwNBd.js +109 -0
- package/dist/chunks/useReorderDragList-nQMVwNBd.js.map +1 -0
- package/dist/chunks/{useRovingTabIndex-CQz8EiKh.js → useRovingTabIndex-ByjY4lnw.js} +1 -1
- package/dist/chunks/{useRovingTabIndex-CQz8EiKh.js.map → useRovingTabIndex-ByjY4lnw.js.map} +1 -1
- package/dist/components/ActionBar/index.js +1 -1
- package/dist/components/ActionsBar/index.js +1 -1
- package/dist/components/Badge/index.js +1 -1
- package/dist/components/BandEditor/index.js +1 -1
- package/dist/components/Button/index.js +1 -1
- package/dist/components/Callout/Callout.d.ts +3 -3
- 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/index.js +1 -1
- package/dist/components/DataGrid/index.js +1 -1
- package/dist/components/DetentSlider/DetentSlider.d.ts +52 -0
- package/dist/components/DetentSlider/DetentSlider.d.ts.map +1 -0
- package/dist/components/DetentSlider/index.d.ts +3 -0
- package/dist/components/DetentSlider/index.d.ts.map +1 -0
- package/dist/components/DetentSlider/index.js +2 -0
- package/dist/components/Dialog/index.js +1 -1
- package/dist/components/DragHandleGlyph/DragHandleGlyph.d.ts +12 -0
- package/dist/components/DragHandleGlyph/DragHandleGlyph.d.ts.map +1 -0
- package/dist/components/DragHandleGlyph/index.d.ts +3 -0
- package/dist/components/DragHandleGlyph/index.d.ts.map +1 -0
- package/dist/components/DragHandleGlyph/index.js +2 -0
- package/dist/components/Field/index.js +1 -1
- package/dist/components/FontFamilySelect/FontFamilySelect.d.ts +15 -0
- package/dist/components/FontFamilySelect/FontFamilySelect.d.ts.map +1 -0
- package/dist/components/FontFamilySelect/index.d.ts +3 -0
- package/dist/components/FontFamilySelect/index.d.ts.map +1 -0
- package/dist/components/FontFamilySelect/index.js +2 -0
- package/dist/components/GradientEditor/index.js +1 -1
- package/dist/components/InlineRange/index.js +1 -1
- package/dist/components/Input/index.js +1 -1
- package/dist/components/ItemList/ItemList.d.ts +45 -0
- package/dist/components/ItemList/ItemList.d.ts.map +1 -0
- package/dist/components/ItemList/index.d.ts +3 -0
- package/dist/components/ItemList/index.d.ts.map +1 -0
- package/dist/components/ItemList/index.js +2 -0
- package/dist/components/Keycaps/index.js +2 -2
- package/dist/components/LayerStack/LayerStack.d.ts +49 -0
- package/dist/components/LayerStack/LayerStack.d.ts.map +1 -0
- package/dist/components/LayerStack/index.d.ts +2 -0
- package/dist/components/LayerStack/index.d.ts.map +1 -0
- package/dist/components/LayerStack/index.js +2 -0
- package/dist/components/NumberField/index.js +1 -1
- package/dist/components/OptionsBar/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/CurveField.d.ts +37 -0
- package/dist/components/Properties/CurveField.d.ts.map +1 -0
- package/dist/components/Properties/EffectCard.d.ts +68 -0
- package/dist/components/Properties/EffectCard.d.ts.map +1 -0
- package/dist/components/Properties/PropertyGroup.d.ts +24 -0
- package/dist/components/Properties/PropertyGroup.d.ts.map +1 -0
- package/dist/components/Properties/PropertyPanel.d.ts +195 -0
- package/dist/components/Properties/PropertyPanel.d.ts.map +1 -0
- package/dist/components/Properties/index.d.ts +9 -0
- package/dist/components/Properties/index.d.ts.map +1 -0
- package/dist/components/Properties/index.js +2 -0
- package/dist/components/Properties/storyLayouts.d.ts +11 -0
- package/dist/components/Properties/storyLayouts.d.ts.map +1 -0
- package/dist/components/RadioGroup/index.js +1 -1
- package/dist/components/RangeSlider/RangeSlider.d.ts +2 -2
- package/dist/components/RangeSlider/index.js +1 -1
- package/dist/components/ResizeHandle/index.js +1 -1
- package/dist/components/Select/index.js +1 -1
- package/dist/components/SelectionPanel/SelectionPanel.d.ts.map +1 -1
- package/dist/components/SelectionPanel/index.js +1 -1
- package/dist/components/Sidebar/index.js +1 -1
- package/dist/components/SidebarPanel/SidebarPanel.d.ts.map +1 -1
- package/dist/components/SidebarPanel/index.js +1 -1
- package/dist/components/Slider/Slider.d.ts +16 -1
- 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/AnimatedTimeline.d.ts +15 -0
- package/dist/components/Timeline/AnimatedTimeline.d.ts.map +1 -0
- package/dist/components/Timeline/EasingPicker.d.ts +8 -0
- package/dist/components/Timeline/EasingPicker.d.ts.map +1 -0
- package/dist/components/Timeline/Lane.d.ts +28 -0
- package/dist/components/Timeline/Lane.d.ts.map +1 -0
- package/dist/components/Timeline/Ruler.d.ts +12 -0
- package/dist/components/Timeline/Ruler.d.ts.map +1 -0
- package/dist/components/Timeline/Timeline.d.ts +39 -0
- package/dist/components/Timeline/Timeline.d.ts.map +1 -0
- package/dist/components/Timeline/Transport.d.ts +14 -0
- package/dist/components/Timeline/Transport.d.ts.map +1 -0
- package/dist/components/Timeline/easingSpec.d.ts +16 -0
- package/dist/components/Timeline/easingSpec.d.ts.map +1 -0
- package/dist/components/Timeline/index.d.ts +11 -0
- package/dist/components/Timeline/index.d.ts.map +1 -0
- package/dist/components/Timeline/index.js +2 -0
- package/dist/components/Timeline/keys.d.ts +34 -0
- package/dist/components/Timeline/keys.d.ts.map +1 -0
- package/dist/components/Timeline/lanes.d.ts +24 -0
- package/dist/components/Timeline/lanes.d.ts.map +1 -0
- package/dist/components/Timeline/timeScale.d.ts +31 -0
- package/dist/components/Timeline/timeScale.d.ts.map +1 -0
- package/dist/components/Toast/index.js +1 -1
- package/dist/components/ToggleBar/index.js +1 -1
- package/dist/components/ToolButton/index.js +1 -1
- package/dist/components/ToolGroup/index.js +1 -1
- package/dist/components/ToolOptionsBar/index.js +1 -1
- package/dist/components/ToolPalette/index.js +1 -1
- package/dist/components/Tooltip/index.js +1 -1
- package/dist/format/number.d.ts +13 -0
- package/dist/format/number.d.ts.map +1 -1
- package/dist/icons/index.d.ts +3 -1
- package/dist/icons/index.d.ts.map +1 -1
- package/dist/icons/paths.d.ts +2 -0
- package/dist/icons/paths.d.ts.map +1 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +63 -184
- package/dist/index.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +5 -4
- package/dist/chunks/Callout-CHs98djt.js.map +0 -1
- package/dist/chunks/DataGrid-D15I779H.js +0 -210
- package/dist/chunks/DataGrid-D15I779H.js.map +0 -1
- package/dist/chunks/PaintInput-Cggm9OIl.js.map +0 -1
- package/dist/chunks/Plot2D-sPXTw_-l.js +0 -168
- package/dist/chunks/Plot2D-sPXTw_-l.js.map +0 -1
- package/dist/chunks/RangeSlider-B-n_7AgJ.js.map +0 -1
- package/dist/chunks/SelectionPanel-C7kygTFE.js +0 -446
- package/dist/chunks/SelectionPanel-C7kygTFE.js.map +0 -1
- package/dist/chunks/SidebarPanel-AeSc7wNR.js +0 -59
- package/dist/chunks/SidebarPanel-AeSc7wNR.js.map +0 -1
- package/dist/chunks/Slider-cxWR47gi.js +0 -259
- package/dist/chunks/Slider-cxWR47gi.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid-D15I779H.js","names":[],"sources":["../../src/useReorderDragList.ts","../../src/components/DataGrid/DataGrid.module.css","../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport type { ReactNode, PointerEvent as ReactPointerEvent, RefCallback } from 'react';\n\n/** One row in a reorderable list. */\nexport interface LayerListItem {\n id: string;\n label: ReactNode;\n /** Locked rows cannot be dragged, cannot be crossed by drops, and\n * never combine with other rows in a multi-selection. */\n locked?: boolean;\n /** Optional color swatch rendered before the label. Any CSS color string. */\n swatch?: string;\n}\n\n/**\n * Options for {@link useReorderDragList}. `onReorder` receives the dragged ids\n * and the index they were dropped at, measured against the pre-drag `items`.\n */\nexport interface UseReorderDragListOptions {\n items: LayerListItem[];\n selectedIds: string[];\n onReorder(ids: string[], targetIndex: number): void;\n /** Pointer-move distance (px) before pending drag engages. Default 4. */\n threshold?: number;\n}\n\n/**\n * Live drag state for rendering feedback: which ids are being dragged and the\n * insertion index the drop would use. Both `null` when no drag is engaged.\n */\nexport interface ReorderDragState {\n draggedIds: string[] | null;\n targetIndex: number | null;\n}\n\n/**\n * Props to spread onto the list container and each row, plus the live\n * {@link ReorderDragState}.\n */\nexport interface ReorderDragHandlers {\n rowProps(id: string, index: number): { onPointerDown(e: ReactPointerEvent): void };\n containerProps: {\n ref: RefCallback<HTMLElement>;\n onPointerMove(e: ReactPointerEvent): void;\n onPointerUp(e: ReactPointerEvent): void;\n onPointerCancel(e: ReactPointerEvent): void;\n };\n state: ReorderDragState;\n}\n\ninterface PendingState {\n id: string;\n sourceIndex: number;\n startX: number;\n startY: number;\n pointerId: number;\n}\n\ninterface ActiveState extends PendingState {\n draggedIds: string[];\n targetIndex: number;\n}\n\n/**\n * The half-open run of indices a row at `sourceIndex` may be dropped into:\n * bounded by the nearest locked row above and below it, so a locked row is a\n * wall in both directions rather than a global ceiling.\n */\nfunction unlockedSegment(items: readonly LayerListItem[], sourceIndex: number): [number, number] {\n let lo = 0;\n for (let i = sourceIndex - 1; i >= 0; i--) {\n if (items[i]?.locked) { lo = i + 1; break; }\n }\n let hi = items.length;\n for (let i = sourceIndex + 1; i < items.length; i++) {\n if (items[i]?.locked) { hi = i; break; }\n }\n return [lo, hi];\n}\n\n/**\n * Drag-to-reorder for a vertical list of rows. Dragging a row that is part of\n * the current selection drags the whole selection; dragging any other row\n * drags just that row. Locked rows can neither be dragged nor crossed by a\n * drop. A drop that would leave a contiguous block where it already is does\n * not call `onReorder`.\n *\n * The pointer is captured on the row, so a drag that leaves the list still\n * tracks and still releases cleanly.\n */\nexport function useReorderDragList(opts: UseReorderDragListOptions): ReorderDragHandlers {\n const { threshold = 4 } = opts;\n const optsRef = useRef(opts);\n optsRef.current = opts;\n const containerRef = useRef<HTMLElement | null>(null);\n const pendingRef = useRef<PendingState | null>(null);\n const activeRef = useRef<ActiveState | null>(null);\n const [state, setState] = useState<ReorderDragState>({ draggedIds: null, targetIndex: null });\n\n const computeTargetIndex = useCallback((clientY: number, sourceIndex: number): number => {\n const [lo, hi] = unlockedSegment(optsRef.current.items, sourceIndex);\n const c = containerRef.current;\n if (!c) return lo;\n const rows = Array.from(c.children) as HTMLElement[];\n let raw = rows.length;\n for (let i = 0; i < rows.length; i++) {\n const row = rows[i];\n if (!row) continue;\n const r = row.getBoundingClientRect();\n if (clientY < r.bottom) { raw = i; break; }\n }\n return Math.max(lo, Math.min(raw, hi));\n }, []);\n\n const refCb = useCallback<RefCallback<HTMLElement>>((el) => {\n containerRef.current = el;\n }, []);\n\n const onPointerDownRow = useCallback((id: string, index: number, e: ReactPointerEvent) => {\n // Locked items cannot be dragged — skip recording the pending state so\n // pointer-move cannot engage. Plain click still works because LayerList\n // tracks click intent in its own ref, separate from drag candidacy.\n const item = optsRef.current.items[index];\n if (item?.locked) return;\n // Capture the pointer to the row so subsequent move/up events keep firing\n // (on the row, bubbling to the container) even when the user drags\n // outside the list's bounding box. Without capture, releasing outside\n // the container leaves the drag state stuck because pointerup fires on\n // the document, not the list.\n try { (e.currentTarget as Element).setPointerCapture?.(e.pointerId); } catch { /* unsupported / already captured */ }\n pendingRef.current = {\n id,\n sourceIndex: index,\n startX: e.clientX,\n startY: e.clientY,\n pointerId: e.pointerId,\n };\n }, []);\n\n const reset = useCallback(() => {\n pendingRef.current = null;\n activeRef.current = null;\n setState({ draggedIds: null, targetIndex: null });\n }, []);\n\n const onPointerMove = useCallback((e: ReactPointerEvent) => {\n const active = activeRef.current;\n if (active) {\n const targetIndex = computeTargetIndex(e.clientY, active.sourceIndex);\n if (targetIndex !== active.targetIndex) {\n active.targetIndex = targetIndex;\n setState({ draggedIds: active.draggedIds, targetIndex });\n }\n return;\n }\n const pending = pendingRef.current;\n if (!pending) return;\n const dx = e.clientX - pending.startX;\n const dy = e.clientY - pending.startY;\n if (Math.hypot(dx, dy) < threshold) return;\n // Engage.\n const selected = optsRef.current.selectedIds;\n const inSelection = selected.includes(pending.id);\n const [lo, hi] = unlockedSegment(optsRef.current.items, pending.sourceIndex);\n const draggedIds = (inSelection ? [...selected] : [pending.id]).filter((id) => {\n const i = optsRef.current.items.findIndex((it) => it.id === id);\n return i >= lo && i < hi;\n });\n const targetIndex = computeTargetIndex(e.clientY, pending.sourceIndex);\n activeRef.current = { ...pending, draggedIds, targetIndex };\n setState({ draggedIds, targetIndex });\n }, [computeTargetIndex, threshold]);\n\n const onPointerUp = useCallback((e: ReactPointerEvent) => {\n const active = activeRef.current;\n if (!active) {\n reset();\n return;\n }\n const targetIndex = computeTargetIndex(e.clientY, active.sourceIndex);\n // Skip no-op: target lands inside the dragged-ids contiguous block.\n const items = optsRef.current.items;\n const indices = active.draggedIds\n .map((id) => items.findIndex((it) => it.id === id))\n .filter((i) => i >= 0)\n .sort((a, b) => a - b);\n const isContiguous =\n indices.length > 0 &&\n indices.every((v, i) => {\n if (i === 0) return true;\n const prev = indices[i - 1];\n return prev !== undefined && v === prev + 1;\n });\n const first = indices[0];\n const last = indices[indices.length - 1];\n const wouldBeNoop =\n isContiguous &&\n first !== undefined &&\n last !== undefined &&\n targetIndex >= first &&\n targetIndex <= last + 1;\n if (!wouldBeNoop) {\n optsRef.current.onReorder(active.draggedIds, targetIndex);\n }\n reset();\n }, [computeTargetIndex, reset]);\n\n const onPointerCancel = useCallback(() => {\n reset();\n }, [reset]);\n\n return {\n rowProps: (id, index) => ({\n onPointerDown: (e) => onPointerDownRow(id, index, e),\n }),\n containerProps: {\n ref: refCb,\n onPointerMove,\n onPointerUp,\n onPointerCancel,\n },\n state,\n };\n}\n",".grid {\n position: relative;\n width: 100%;\n}\n\n.table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--wzl-font-size-sm);\n}\n\n.table th,\n.table td {\n text-align: left;\n padding: 3px 6px;\n vertical-align: middle;\n}\n.table tbody tr {\n border-bottom: 1px solid var(--wzl-line-subtle);\n}\n\n.table th {\n font-weight: var(--wzl-font-weight-bold);\n color: var(--wzl-fg-muted);\n position: sticky;\n top: 0;\n background: var(--wzl-surface, #2a2018);\n z-index: 1;\n border-bottom: 1px solid var(--wzl-border);\n}\n\n.sortButton {\n all: unset;\n cursor: pointer;\n user-select: none;\n display: block;\n width: 100%;\n}\n.sortButton:hover { color: var(--wzl-fg, #e6e7e9); }\n.sortButton:focus-visible {\n outline: 2px solid var(--wzl-focus-ring, var(--wzl-accent, #7fb069));\n outline-offset: -2px;\n}\n.sortActive { color: var(--wzl-fg, #e6e7e9); }\n\n.empty {\n color: var(--wzl-fg-muted);\n font-style: italic;\n padding: 8px 0;\n text-align: center;\n}\n\n/* Drag-handle column. */\n.handleCol { width: 14px; }\n.handleCell {\n width: 14px;\n cursor: grab;\n color: var(--wzl-fg-muted);\n user-select: none;\n text-align: center;\n}\n.handleCell:active { cursor: grabbing; }\n\n.dragging { opacity: 0.4; }\n\n.dropBefore > td { box-shadow: inset 0 2px 0 0 var(--wzl-accent, #7fb069); }\n.dropAfter > td { box-shadow: inset 0 -2px 0 0 var(--wzl-accent, #7fb069); }\n","/**\n * Lightweight sortable data grid. Use for inspector tables — action\n * registries, route maps, telemetry rows. Intentionally narrow:\n *\n * - Sortable columns (click header to cycle asc → desc → none)\n * - Custom cell render via per-column `render`\n * - Optional drag handles for row reordering (when `onReorder` is set)\n *\n * Not: virtual scrolling, column resizing, multi-column sort, filtering,\n * inline editing. Reach for a real grid library when you need those.\n */\nimport { useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { useReorderDragList } from '../../useReorderDragList';\nimport s from './DataGrid.module.css';\n\n/**\n * One column of a {@link DataGrid}. `id` doubles as the default property name\n * read off each row when no `accessor` is given.\n */\nexport interface DataGridColumn<Row> {\n id: string;\n header: ReactNode;\n /** Pull a sortable value from the row. Defaults to `(row as any)[column.id]`. */\n accessor?: (row: Row) => string | number | null | undefined;\n /** Render the cell. Defaults to `String(accessor(row) ?? '')`. */\n render?: (row: Row) => ReactNode;\n /** Default true. Set false to suppress the sort affordance on this column. */\n sortable?: boolean;\n /** Optional CSS class on every <td> in this column. */\n className?: string;\n}\n\n/** Props for {@link DataGrid}. */\nexport interface DataGridProps<Row extends { id: string }> {\n rows: readonly Row[];\n columns: readonly DataGridColumn<Row>[];\n /** Initial sort. Omit for unsorted (rows render in input order). */\n defaultSort?: { columnId: string; direction: 'asc' | 'desc' };\n /** Enable drag handles in a leading column. Receives the reorder spec\n * (the existing `useReorderDragList` semantics — see weasel-ui). */\n onReorder?: (ids: string[], targetIndex: number) => void;\n /** Empty-state row text. Default `'—'`. */\n empty?: ReactNode;\n className?: string;\n}\n\ntype SortState = { columnId: string; direction: 'asc' | 'desc' } | null;\n\n/**\n * Sortable table for inspector-style data. Rows are keyed by `id`. Clicking a\n * sortable header cycles ascending, descending, unsorted; nullish values sort\n * last regardless of direction. Passing `onReorder` adds a leading drag-handle\n * column — note that the drag indices it reports are into the *sorted* row\n * order, not the input order.\n */\nexport function DataGrid<Row extends { id: string }>(props: DataGridProps<Row>) {\n const { rows, columns, defaultSort, onReorder, empty = '—', className } = props;\n const [sort, setSort] = useState<SortState>(defaultSort ?? null);\n\n const sortedRows = useMemo(() => {\n if (!sort) return [...rows];\n const col = columns.find((c) => c.id === sort.columnId);\n if (!col) return [...rows];\n const get = col.accessor ?? ((row: Row) => (row as unknown as Record<string, unknown>)[col.id] as string | number | null | undefined);\n const dir = sort.direction === 'asc' ? 1 : -1;\n return [...rows].sort((a, b) => {\n const av = get(a);\n const bv = get(b);\n if (av == null && bv == null) return 0;\n if (av == null) return 1;\n if (bv == null) return -1;\n if (av < bv) return -1 * dir;\n if (av > bv) return 1 * dir;\n return 0;\n });\n }, [rows, columns, sort]);\n\n const cycleSort = (columnId: string) => {\n setSort((cur) => {\n if (!cur || cur.columnId !== columnId) return { columnId, direction: 'asc' };\n if (cur.direction === 'asc') return { columnId, direction: 'desc' };\n return null;\n });\n };\n\n // Drag handles via useReorderDragList. Adapter: the hook expects\n // `{ id, label }`-shaped items; we map our rows to that shape (label\n // unused — the hook only uses id and locked).\n const drag = useReorderDragList({\n items: sortedRows.map((r) => ({ id: r.id, label: '' })),\n selectedIds: [],\n onReorder: onReorder ?? (() => {}),\n });\n const dragEnabled = !!onReorder;\n\n const cls = [s.grid, className].filter(Boolean).join(' ');\n\n return (\n <div\n className={cls}\n onPointerMove={dragEnabled ? drag.containerProps.onPointerMove : undefined}\n onPointerUp={dragEnabled ? drag.containerProps.onPointerUp : undefined}\n onPointerCancel={dragEnabled ? drag.containerProps.onPointerCancel : undefined}\n >\n <table className={s.table}>\n <thead>\n <tr>\n {dragEnabled && <th className={s.handleCol} aria-label=\"drag\" />}\n {columns.map((col) => {\n const sortable = col.sortable !== false;\n const active = sort?.columnId === col.id;\n const indicator = active ? (sort.direction === 'asc' ? ' ↑' : ' ↓') : '';\n return (\n <th\n key={col.id}\n className={[col.className, active ? s.sortActive : ''].filter(Boolean).join(' ')}\n aria-sort={sortable ? (active ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none') : undefined}\n >\n {sortable ? (\n <button type=\"button\" className={s.sortButton} onClick={() => cycleSort(col.id)}>\n {col.header}{indicator}\n </button>\n ) : (\n <>{col.header}{indicator}</>\n )}\n </th>\n );\n })}\n </tr>\n </thead>\n <tbody ref={dragEnabled ? (drag.containerProps.ref as React.RefCallback<HTMLTableSectionElement>) : undefined}>\n {sortedRows.length === 0 && (\n <tr>\n <td colSpan={columns.length + (dragEnabled ? 1 : 0)} className={s.empty}>\n {empty}\n </td>\n </tr>\n )}\n {sortedRows.map((row, i) => {\n const isDragging = drag.state.draggedIds?.includes(row.id) ?? false;\n const target = drag.state.targetIndex;\n const rowCls = [\n isDragging && s.dragging,\n target === i && s.dropBefore,\n target === sortedRows.length && i === sortedRows.length - 1 && s.dropAfter,\n ].filter(Boolean).join(' ');\n return (\n <tr key={row.id} className={rowCls || undefined}>\n {dragEnabled && (\n <td\n className={s.handleCell}\n onPointerDown={(e) => drag.rowProps(row.id, i).onPointerDown(e)}\n >\n <span aria-hidden=\"true\">⋮⋮</span>\n </td>\n )}\n {columns.map((col) => {\n const get = col.accessor ?? ((r: Row) => (r as unknown as Record<string, unknown>)[col.id] as string | number | null | undefined);\n const content = col.render ? col.render(row) : String(get(row) ?? '');\n return (\n <td key={col.id} className={col.className}>\n {content}\n </td>\n );\n })}\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PaintInput-Cggm9OIl.js","names":[],"sources":["../../src/icons/paths.ts","../../src/icons/Icon.tsx","../../src/components/PaintInput/PaintInput.module.css","../../src/components/PaintInput/PaintInput.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 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 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","/* 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,168 +0,0 @@
|
|
|
1
|
-
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as n, useCallback as r, useEffect as i, useImperativeHandle as a, useMemo as o, useRef as s } from "react";
|
|
3
|
-
//#region src/dlog.ts
|
|
4
|
-
var c = ["weasel.debug", "weaseldraw.debug"], l = null;
|
|
5
|
-
function u() {
|
|
6
|
-
let e = {
|
|
7
|
-
all: !1,
|
|
8
|
-
set: /* @__PURE__ */ new Set()
|
|
9
|
-
};
|
|
10
|
-
if (typeof localStorage > "u") return e;
|
|
11
|
-
try {
|
|
12
|
-
for (let e of c) {
|
|
13
|
-
let t = localStorage.getItem(e);
|
|
14
|
-
if (!(t == null || t === "")) return t === "1" || t === "true" || t === "*" ? {
|
|
15
|
-
all: !0,
|
|
16
|
-
set: /* @__PURE__ */ new Set()
|
|
17
|
-
} : {
|
|
18
|
-
all: !1,
|
|
19
|
-
set: new Set(t.split(/[\s,]+/).filter(Boolean))
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
return e;
|
|
23
|
-
} catch {
|
|
24
|
-
return e;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
function d() {
|
|
28
|
-
return l === null && (l = u()), l;
|
|
29
|
-
}
|
|
30
|
-
function f(e) {
|
|
31
|
-
let t = d();
|
|
32
|
-
return t.all || t.set.has(e);
|
|
33
|
-
}
|
|
34
|
-
function p(e, ...t) {
|
|
35
|
-
f(e) && console.debug(`[${e}]`, ...t);
|
|
36
|
-
}
|
|
37
|
-
//#endregion
|
|
38
|
-
//#region src/components/Plot2D/geometry.ts
|
|
39
|
-
function m(e, t, n) {
|
|
40
|
-
let r = (e.x - t.xMin) / (t.xMax - t.xMin), i = (e.y - t.yMin) / (t.yMax - t.yMin);
|
|
41
|
-
return {
|
|
42
|
-
x: r * n.width,
|
|
43
|
-
y: (1 - i) * n.height
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
function h(e, t, n) {
|
|
47
|
-
let r = e.x / n.width, i = 1 - e.y / n.height;
|
|
48
|
-
return {
|
|
49
|
-
x: t.xMin + r * (t.xMax - t.xMin),
|
|
50
|
-
y: t.yMin + i * (t.yMax - t.yMin)
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
var g = {
|
|
54
|
-
root: "_root_1djm7_1",
|
|
55
|
-
grid: "_grid_1djm7_28",
|
|
56
|
-
axis: "_axis_1djm7_34"
|
|
57
|
-
}, _ = n(function(n, c) {
|
|
58
|
-
let { width: l, height: u, xRange: d = [0, 1], yRange: f = [0, 1], grid: _, axes: v, tabIndex: y, className: b, style: x, onPointerDown: S, onKeyDown: C, children: w } = n, T = s(null), E = o(() => ({
|
|
59
|
-
xMin: d[0],
|
|
60
|
-
xMax: d[1],
|
|
61
|
-
yMin: f[0],
|
|
62
|
-
yMax: f[1]
|
|
63
|
-
}), [d, f]), D = o(() => ({
|
|
64
|
-
width: l,
|
|
65
|
-
height: u
|
|
66
|
-
}), [l, u]), O = r((e) => {
|
|
67
|
-
let t = T.current?.getBoundingClientRect(), n = t?.left ?? 0, r = t?.top ?? 0;
|
|
68
|
-
return {
|
|
69
|
-
x: e.clientX - n,
|
|
70
|
-
y: e.clientY - r
|
|
71
|
-
};
|
|
72
|
-
}, []);
|
|
73
|
-
i(() => (p("plot2d", "mount", {
|
|
74
|
-
width: l,
|
|
75
|
-
height: u
|
|
76
|
-
}), () => p("plot2d", "unmount")), []), a(c, () => ({
|
|
77
|
-
get svg() {
|
|
78
|
-
return T.current;
|
|
79
|
-
},
|
|
80
|
-
plotToModel: (e) => h(e, E, D),
|
|
81
|
-
modelToPlot: (e) => m(e, E, D),
|
|
82
|
-
clientToPlot: O,
|
|
83
|
-
clientToModel: (e) => h(O(e), E, D),
|
|
84
|
-
get width() {
|
|
85
|
-
return D.width;
|
|
86
|
-
},
|
|
87
|
-
get height() {
|
|
88
|
-
return D.height;
|
|
89
|
-
}
|
|
90
|
-
}), [
|
|
91
|
-
E,
|
|
92
|
-
D,
|
|
93
|
-
O
|
|
94
|
-
]);
|
|
95
|
-
let k = r((e) => {
|
|
96
|
-
if (!S) return;
|
|
97
|
-
let t = O(e);
|
|
98
|
-
S(e, {
|
|
99
|
-
plot: t,
|
|
100
|
-
model: h(t, E, D)
|
|
101
|
-
});
|
|
102
|
-
}, [
|
|
103
|
-
S,
|
|
104
|
-
O,
|
|
105
|
-
E,
|
|
106
|
-
D
|
|
107
|
-
]);
|
|
108
|
-
return /* @__PURE__ */ t("svg", {
|
|
109
|
-
ref: T,
|
|
110
|
-
className: [g.root, b].filter(Boolean).join(" "),
|
|
111
|
-
style: x,
|
|
112
|
-
width: l,
|
|
113
|
-
height: u,
|
|
114
|
-
viewBox: `0 0 ${l} ${u}`,
|
|
115
|
-
role: "img",
|
|
116
|
-
tabIndex: y,
|
|
117
|
-
onPointerDown: S ? k : void 0,
|
|
118
|
-
onKeyDown: C,
|
|
119
|
-
children: [
|
|
120
|
-
_ && (() => {
|
|
121
|
-
let n = _.divisions ?? 3, r = _.color, i = [];
|
|
122
|
-
for (let e = 1; e <= n; e++) i.push(e / (n + 1));
|
|
123
|
-
return /* @__PURE__ */ t("g", { children: [i.map((t) => /* @__PURE__ */ e("line", {
|
|
124
|
-
"data-plot-element": "grid",
|
|
125
|
-
className: g.grid,
|
|
126
|
-
stroke: r,
|
|
127
|
-
x1: t * l,
|
|
128
|
-
x2: t * l,
|
|
129
|
-
y1: 0,
|
|
130
|
-
y2: u
|
|
131
|
-
}, `gx-${t}`)), i.map((t) => /* @__PURE__ */ e("line", {
|
|
132
|
-
"data-plot-element": "grid",
|
|
133
|
-
className: g.grid,
|
|
134
|
-
stroke: r,
|
|
135
|
-
x1: 0,
|
|
136
|
-
x2: l,
|
|
137
|
-
y1: t * u,
|
|
138
|
-
y2: t * u
|
|
139
|
-
}, `gy-${t}`))] });
|
|
140
|
-
})(),
|
|
141
|
-
v !== !1 && v !== null && (() => {
|
|
142
|
-
let n = v?.color;
|
|
143
|
-
return /* @__PURE__ */ t("g", { children: [/* @__PURE__ */ e("line", {
|
|
144
|
-
"data-plot-element": "axis",
|
|
145
|
-
className: g.axis,
|
|
146
|
-
stroke: n,
|
|
147
|
-
x1: 0,
|
|
148
|
-
x2: l,
|
|
149
|
-
y1: u,
|
|
150
|
-
y2: u
|
|
151
|
-
}), /* @__PURE__ */ e("line", {
|
|
152
|
-
"data-plot-element": "axis",
|
|
153
|
-
className: g.axis,
|
|
154
|
-
stroke: n,
|
|
155
|
-
x1: 0,
|
|
156
|
-
x2: 0,
|
|
157
|
-
y1: 0,
|
|
158
|
-
y2: u
|
|
159
|
-
})] });
|
|
160
|
-
})(),
|
|
161
|
-
w
|
|
162
|
-
]
|
|
163
|
-
});
|
|
164
|
-
});
|
|
165
|
-
//#endregion
|
|
166
|
-
export { f as a, p as i, m as n, h as r, _ as t };
|
|
167
|
-
|
|
168
|
-
//# sourceMappingURL=Plot2D-sPXTw_-l.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Plot2D-sPXTw_-l.js","names":[],"sources":["../../src/dlog.ts","../../src/components/Plot2D/geometry.ts","../../src/components/Plot2D/Plot2D.module.css","../../src/components/Plot2D/Plot2D.tsx"],"sourcesContent":["/**\n * Namespaced, opt-in console tracing. Off by default; production builds\n * may strip the calls entirely depending on the bundler.\n *\n * Enable in the browser:\n *\n * localStorage.setItem('weasel.debug', '*') // all namespaces\n * localStorage.setItem('weasel.debug', 'curve-editor') // just curve editor\n * localStorage.setItem('weasel.debug', 'curve-editor,layer-stack')\n *\n * Each component picks a stable namespace and calls `dlog(namespace, ...)`.\n * Useful for tracing pointer/event flows that are hard to capture\n * post-hoc (drag handlers, gesture sequences, selection mutations).\n *\n * The flag is read once and cached for the page session — reload to\n * pick up changes. Cheap hot-path checks (one nullish-coalesce + Set\n * lookup) so leaving calls in place is fine.\n *\n * Mirrors `src/debug/flag.ts` in the kit. Two impls live here because\n * weasel-ui doesn't depend on the kit, but both read the same\n * localStorage keys so behavior is uniform. See the kit copy for the\n * canonical list of kit-level namespaces.\n *\n * Known weasel-ui namespaces:\n * - plot2d — Plot2D mount / unmount\n * - curve-editor — CurveEditor pointer flow\n */\n\nconst KEYS = ['weasel.debug', 'weaseldraw.debug'] as const;\n\ninterface Cached {\n all: boolean;\n set: Set<string>;\n}\n\nlet cached: Cached | null = null;\n\nfunction read(): Cached {\n const empty: Cached = { all: false, set: new Set() };\n if (typeof localStorage === 'undefined') return empty;\n try {\n for (const k of KEYS) {\n const v = localStorage.getItem(k);\n if (v == null || v === '') continue;\n if (v === '1' || v === 'true' || v === '*') return { all: true, set: new Set() };\n return { all: false, set: new Set(v.split(/[\\s,]+/).filter(Boolean)) };\n }\n return empty;\n } catch {\n return empty;\n }\n}\n\nfunction get(): Cached {\n if (cached === null) cached = read();\n return cached;\n}\n\n/** True when `namespace` (or `*`) is enabled. */\nexport function isDebugEnabled(namespace: string): boolean {\n const c = get();\n return c.all || c.set.has(namespace);\n}\n\n/** Conditional `console.debug` — no-op unless `namespace` (or `*`) is enabled.\n * Each call is prefixed with `[namespace]` so the source is searchable. */\nexport function dlog(namespace: string, ...args: unknown[]): void {\n if (!isDebugEnabled(namespace)) return;\n // eslint-disable-next-line no-console\n console.debug(`[${namespace}]`, ...args);\n}\n","/**\n * Coordinate transforms (model ↔ plot) for Plot2D. Pure / deterministic —\n * no DOM, no React, no state.\n *\n * Model space: caller-defined xRange × yRange. Y axis goes UP.\n * Plot space: 0..width × 0..height in CSS pixels. Y axis goes DOWN (SVG).\n */\n\nexport interface Point {\n x: number;\n y: number;\n}\n\n/**\n * The caller-defined extent of model space, the coordinate system a plot's\n * data lives in.\n */\nexport interface ModelRange {\n xMin: number;\n xMax: number;\n yMin: number;\n yMax: number;\n}\n\n/** The plot's drawing area in CSS pixels. */\nexport interface PlotSize {\n width: number;\n height: number;\n}\n\n/**\n * Maps a model-space point into plot space, flipping the y axis so model y\n * grows upward while SVG y grows downward.\n */\nexport function modelToPlot(p: Point, m: ModelRange, plot: PlotSize): Point {\n const xFrac = (p.x - m.xMin) / (m.xMax - m.xMin);\n const yFrac = (p.y - m.yMin) / (m.yMax - m.yMin);\n return {\n x: xFrac * plot.width,\n // Invert y so model y=0 sits at plot bottom (SVG y grows downward).\n y: (1 - yFrac) * plot.height,\n };\n}\n\n/** The inverse of {@link modelToPlot}. */\nexport function plotToModel(p: Point, m: ModelRange, plot: PlotSize): Point {\n const xFrac = p.x / plot.width;\n const yFrac = 1 - p.y / plot.height;\n return {\n x: m.xMin + xFrac * (m.xMax - m.xMin),\n y: m.yMin + yFrac * (m.yMax - m.yMin),\n };\n}\n",".root {\n /* Component-local vars layered over theme tokens. Consumers override\n * either the plot-* var (component scope) or the wzl-* token (app\n * scope). */\n --plot-bg: var(--wzl-surface-sunken);\n --plot-grid: var(--wzl-line);\n /* Axes get full foreground contrast — they're the plot frame, the\n * most prominent structural element after caller-rendered content. */\n --plot-axis: var(--wzl-fg);\n\n display: block;\n /* Caller-rendered marks at the very edge (e.g. CurveEditor anchors)\n * extend past the SVG box by their radius — let them paint over the\n * host page instead of being half-clipped. */\n overflow: visible;\n background: var(--plot-bg);\n user-select: none;\n touch-action: none;\n outline: none;\n}\n\n/* Keyboard-only focus ring. Caller opts in via `tabIndex`. */\n.root:focus-visible {\n outline: 2px solid var(--wzl-focus-ring);\n outline-offset: 2px;\n}\n\n.grid {\n stroke: var(--plot-grid);\n stroke-width: 1;\n fill: none;\n}\n\n.axis {\n stroke: var(--plot-axis);\n stroke-width: var(--wzl-line-width);\n fill: none;\n}\n","import {\n forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef,\n type CSSProperties,\n type KeyboardEvent as ReactKeyboardEvent,\n type PointerEvent as ReactPointerEvent,\n type ReactNode,\n} from 'react';\nimport {\n modelToPlot, plotToModel,\n type ModelRange, type Point,\n} from './geometry';\nimport s from './Plot2D.module.css';\nimport { dlog } from '../../dlog';\n\n/** Background grid configuration for a {@link Plot2D}. */\nexport interface GridSettings {\n /** Number of evenly-spaced internal grid lines per axis (excluding\n * the edges). Applied to both x and y. Default 3. */\n divisions?: number;\n /** Stroke color override. When omitted, uses `var(--plot-grid)`. */\n color?: string;\n}\n\n/** Axis-line configuration for a {@link Plot2D}. */\nexport interface AxesSettings {\n /** Stroke color override. When omitted, uses `var(--plot-axis)`. */\n color?: string;\n}\n\n/** A pointer position given in both of the plot's coordinate systems. */\nexport interface Plot2DCoords {\n plot: Point;\n model: Point;\n}\n\n/** Props for {@link Plot2D}. */\nexport interface Plot2DProps {\n width: number;\n height: number;\n /** Model-space x range. Default [0, 1]. */\n xRange?: readonly [number, number];\n /** Model-space y range. Default [0, 1]. */\n yRange?: readonly [number, number];\n /** Background grid. `false` / `null` / omitted = no grid. Pass `{}`\n * for default (3 divisions per axis) or populated GridSettings. */\n grid?: GridSettings | false | null;\n /** Axis lines. `false` / `null` = no axes. Omitted = default-styled\n * axes (on). Pass AxesSettings to customize. */\n axes?: AxesSettings | false | null;\n /** Forwarded to the underlying svg. Consumer opts into focus this way. */\n tabIndex?: number;\n className?: string;\n style?: CSSProperties;\n /** Pointer down on the SVG. Receives both plot- and model-space coords\n * pre-computed so consumers don't repeat the rect/transform dance. */\n onPointerDown?: (e: ReactPointerEvent<SVGSVGElement>, coords: Plot2DCoords) => void;\n onKeyDown?: (e: ReactKeyboardEvent<SVGSVGElement>) => void;\n children?: ReactNode;\n}\n\n/**\n * Imperative handle on a {@link Plot2D}: the SVG element, its size, and the\n * coordinate conversions, including ones that start from a raw DOM event so a\n * drag tracked on `window` can still map back into the plot.\n */\nexport interface Plot2DHandle {\n readonly svg: SVGSVGElement | null;\n plotToModel(pt: Point): Point;\n modelToPlot(pt: Point): Point;\n /** Convert a DOM event's clientX/clientY (e.g. from a window-attached\n * pointermove during drag) to plot-space. */\n clientToPlot(e: { clientX: number; clientY: number }): Point;\n /** Convenience: clientToPlot → plotToModel. */\n clientToModel(e: { clientX: number; clientY: number }): Point;\n readonly width: number;\n readonly height: number;\n}\n\n/**\n * An SVG plotting surface with an optional grid and axes. It draws the frame\n * and owns the model-space to plot-space mapping; the plotted content is\n * whatever children are passed, positioned in plot space.\n */\nexport const Plot2D = forwardRef<Plot2DHandle, Plot2DProps>(function Plot2D(props, ref) {\n const {\n width, height,\n xRange = [0, 1],\n yRange = [0, 1],\n grid,\n axes,\n tabIndex,\n className,\n style,\n onPointerDown,\n onKeyDown,\n children,\n } = props;\n\n const svgRef = useRef<SVGSVGElement | null>(null);\n\n const modelRange: ModelRange = useMemo(\n () => ({ xMin: xRange[0], xMax: xRange[1], yMin: yRange[0], yMax: yRange[1] }),\n [xRange, yRange],\n );\n\n const plotSize = useMemo(() => ({ width, height }), [width, height]);\n\n const clientToPlot = useCallback((e: { clientX: number; clientY: number }): Point => {\n const rect = svgRef.current?.getBoundingClientRect();\n const left = rect?.left ?? 0;\n const top = rect?.top ?? 0;\n return { x: e.clientX - left, y: e.clientY - top };\n }, []);\n\n useEffect(() => {\n dlog('plot2d', 'mount', { width, height });\n return () => dlog('plot2d', 'unmount');\n // Mount/unmount trace: re-running on a resize would log a spurious mount.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n useImperativeHandle(ref, () => ({\n get svg() { return svgRef.current; },\n plotToModel: (pt: Point) => plotToModel(pt, modelRange, plotSize),\n modelToPlot: (pt: Point) => modelToPlot(pt, modelRange, plotSize),\n clientToPlot,\n clientToModel: (e) => plotToModel(clientToPlot(e), modelRange, plotSize),\n get width() { return plotSize.width; },\n get height() { return plotSize.height; },\n }), [modelRange, plotSize, clientToPlot]);\n\n const handlePointerDown = useCallback((e: ReactPointerEvent<SVGSVGElement>) => {\n if (!onPointerDown) return;\n const plot = clientToPlot(e);\n const model = plotToModel(plot, modelRange, plotSize);\n onPointerDown(e, { plot, model });\n }, [onPointerDown, clientToPlot, modelRange, plotSize]);\n\n const cls = [s.root, className].filter(Boolean).join(' ');\n\n return (\n <svg\n ref={svgRef}\n className={cls}\n style={style}\n width={width}\n height={height}\n viewBox={`0 0 ${width} ${height}`}\n role=\"img\"\n tabIndex={tabIndex}\n onPointerDown={onPointerDown ? handlePointerDown : undefined}\n onKeyDown={onKeyDown}\n >\n {grid && (() => {\n const divisions = grid.divisions ?? 3;\n const stroke = grid.color;\n // Evenly-spaced internal divisions, excluding the edges (which\n // belong to the axes). For divisions=3, fractions are 1/4, 2/4, 3/4.\n const fractions: number[] = [];\n for (let i = 1; i <= divisions; i++) fractions.push(i / (divisions + 1));\n return (\n <g>\n {fractions.map((f) => (\n <line\n key={`gx-${f}`}\n data-plot-element=\"grid\"\n className={s.grid}\n stroke={stroke}\n x1={f * width} x2={f * width}\n y1={0} y2={height}\n />\n ))}\n {fractions.map((f) => (\n <line\n key={`gy-${f}`}\n data-plot-element=\"grid\"\n className={s.grid}\n stroke={stroke}\n x1={0} x2={width}\n y1={f * height} y2={f * height}\n />\n ))}\n </g>\n );\n })()}\n {axes !== false && axes !== null && (() => {\n const stroke = axes?.color;\n return (\n <g>\n <line\n data-plot-element=\"axis\"\n className={s.axis}\n stroke={stroke}\n x1={0} x2={width}\n y1={height} y2={height}\n />\n <line\n data-plot-element=\"axis\"\n className={s.axis}\n stroke={stroke}\n x1={0} x2={0}\n y1={0} y2={height}\n />\n </g>\n );\n })()}\n {children}\n </svg>\n );\n});\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RangeSlider-B-n_7AgJ.js","names":[],"sources":["../../src/components/RangeSlider/RangeSlider.module.css","../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":[".slider {\n display: flex;\n flex-direction: column;\n width: 100%;\n gap: 4px;\n font-family: var(--wzl-font-ui);\n color: var(--wzl-fg);\n}\n\n.slider[data-orientation=\"vertical\"] {\n flex-direction: row;\n align-items: stretch;\n width: 28px;\n height: 160px;\n}\n\n.head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n}\n\n.label {\n font-size: var(--wzl-font-size-sm);\n font-weight: var(--wzl-font-weight-medium);\n color: var(--wzl-fg);\n}\n\n.output {\n font-size: var(--wzl-font-size-sm);\n color: var(--wzl-fg-subtle);\n font-variant-numeric: tabular-nums;\n}\n\n.track {\n position: relative;\n height: 6px;\n min-width: 80px;\n background: var(--wzl-surface-sunken);\n border: 1px solid var(--wzl-border);\n border-radius: var(--wzl-radius-sm);\n}\n\n.slider[data-orientation=\"vertical\"] .track {\n width: 6px;\n height: 100%;\n}\n\n.fill {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n background: var(--wzl-accent-strong);\n border-radius: var(--wzl-radius-sm);\n}\n\n.thumb {\n width: 14px;\n height: 14px;\n background: var(--wzl-fg-muted);\n border: 1px solid var(--wzl-border-strong);\n border-radius: 50%;\n cursor: ew-resize;\n outline: none;\n transition: box-shadow var(--wzl-motion-fast);\n}\n\n.slider[data-orientation=\"vertical\"] .thumb {\n cursor: ns-resize;\n}\n\n.thumb[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.thumb[data-dragging] {\n background: var(--wzl-accent-strong);\n}\n\n.slider[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n","import type { ReactNode } from 'react';\nimport {\n Slider as RACSlider,\n SliderOutput,\n SliderTrack,\n SliderThumb,\n Label,\n type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport s from './RangeSlider.module.css';\n\n/** Props for {@link RangeSlider}, on top of React Aria's `Slider` props. */\nexport type RangeSliderProps = Omit<RACSliderProps, 'children' | 'className'> & {\n label?: ReactNode;\n /** Show the current value next to the label. Defaults to true when a\n * label is supplied. */\n showOutput?: boolean;\n /** Format the rendered value(s). Useful for units (`v => `${v}%``). */\n formatOutput?: (v: number | number[]) => ReactNode;\n className?: string;\n};\n\n/**\n * Linear range slider on React Aria. Single-value by default; pass an array\n * to `value` / `defaultValue` for multi-thumb. Distinct from the kit's\n * canvas-scrub `Slider`, which is shaped for tool-canvas interactions.\n */\nexport function RangeSlider(props: RangeSliderProps) {\n const { label, showOutput, formatOutput, className, ...rest } = props;\n const wantOutput = showOutput ?? label !== undefined;\n return (\n <RACSlider {...rest} className={[s.slider, className].filter(Boolean).join(' ')}>\n {(label !== undefined || wantOutput) && (\n <div className={s.head}>\n {label !== undefined && <Label className={s.label}>{label}</Label>}\n {wantOutput && (\n <SliderOutput className={s.output}>\n {({ state }) => {\n const v = state.values.length === 1 ? state.values[0] : state.values;\n return formatOutput ? formatOutput(v) : Array.isArray(v) ? v.join(' – ') : String(v);\n }}\n </SliderOutput>\n )}\n </div>\n )}\n <SliderTrack className={s.track}>\n {({ state }) => {\n // Single-thumb: fill from start to thumb. Multi-thumb: fill\n // between adjacent thumbs (simplest = between first and last).\n const fillStart = state.values.length > 1 ? state.getThumbPercent(0) * 100 : 0;\n const fillEnd = state.getThumbPercent(state.values.length - 1) * 100;\n return (\n <>\n <div\n className={s.fill}\n style={{ left: `${fillStart}%`, right: `${100 - fillEnd}%` }}\n />\n {state.values.map((_, i) => (\n <SliderThumb key={i} index={i} className={s.thumb} />\n ))}\n </>\n );\n }}\n </SliderTrack>\n </RACSlider>\n );\n}\n"],"mappings":";;;;;;;;;;;;;AC2BA,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,UAAO,eAAY,iBAAc,cAAW,GAAG,MAAS,GAC1D,IAAa,KAAc,MAAU,KAAA;AAC3C,QACE,kBAAC,GAAD;EAAW,GAAI;EAAM,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA/E,EACI,MAAU,KAAA,KAAa,MACvB,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAE;cAAQ;IAAc,CAAA,EACjE,KACC,kBAAC,GAAD;IAAc,WAAW,EAAE;eACvB,EAAE,eAAY;KACd,IAAM,IAAI,EAAM,OAAO,WAAW,IAAI,EAAM,OAAO,KAAK,EAAM;AAC9D,YAAO,IAAe,EAAa,EAAE,GAAG,MAAM,QAAQ,EAAE,GAAG,EAAE,KAAK,MAAM,GAAG,OAAO,EAAE;;IAEzE,CAAA,CAEb;MAER,kBAAC,GAAD;GAAa,WAAW,EAAE;cACtB,EAAE,eAAY;IAGd,IAAM,IAAY,EAAM,OAAO,SAAS,IAAI,EAAM,gBAAgB,EAAE,GAAG,MAAM,GACvE,IAAU,EAAM,gBAAgB,EAAM,OAAO,SAAS,EAAE,GAAG;AACjE,WACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;KACE,WAAW,EAAE;KACb,OAAO;MAAE,MAAM,GAAG,EAAU;MAAI,OAAO,GAAG,MAAM,EAAQ;MAAI;KAC5D,CAAA,EACD,EAAM,OAAO,KAAK,GAAG,MACpB,kBAAC,GAAD;KAAqB,OAAO;KAAG,WAAW,EAAE;KAAS,EAAnC,EAAmC,CACrD,CACD,EAAA,CAAA;;GAGK,CAAA,CACJ"}
|