@weasel-js/ui 1.7.0 → 1.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (416) hide show
  1. package/dist/chunks/ActionBar-xA73vzzF.js +64 -0
  2. package/dist/chunks/ActionBar-xA73vzzF.js.map +1 -0
  3. package/dist/chunks/{Badge-D2aD7xVL.js → Badge-jYQjrTKc.js} +235 -264
  4. package/dist/chunks/{Badge-D2aD7xVL.js.map → Badge-jYQjrTKc.js.map} +1 -1
  5. package/dist/chunks/{BandEditor-Dd0egAgE.js → BandEditor-B4jUAHQ8.js} +13 -13
  6. package/dist/chunks/BandEditor-B4jUAHQ8.js.map +1 -0
  7. package/dist/chunks/{Button-BIdXHQOx.js → Button-XB-T75YL.js} +2 -2
  8. package/dist/chunks/{Button-BIdXHQOx.js.map → Button-XB-T75YL.js.map} +1 -1
  9. package/dist/chunks/{ButtonBar-DIQTe5GQ.js → ButtonBar-CIMKPPRS.js} +7 -9
  10. package/dist/chunks/{ButtonBar-DIQTe5GQ.js.map → ButtonBar-CIMKPPRS.js.map} +1 -1
  11. package/dist/chunks/Callout-BUn0dP_S.js +115 -0
  12. package/dist/chunks/Callout-BUn0dP_S.js.map +1 -0
  13. package/dist/chunks/Checkbox-DFn-x0JO.js +37 -0
  14. package/dist/chunks/Checkbox-DFn-x0JO.js.map +1 -0
  15. package/dist/chunks/{CloseButton-C2J7wVfo.js → CloseButton-BmNmRVtb.js} +3 -3
  16. package/dist/chunks/{CloseButton-C2J7wVfo.js.map → CloseButton-BmNmRVtb.js.map} +1 -1
  17. package/dist/chunks/ColorField-BwlelY26.js +90 -0
  18. package/dist/chunks/ColorField-BwlelY26.js.map +1 -0
  19. package/dist/chunks/{ColorModeControl-BewxA0rX.js → ColorModeControl-DaVJ-SyX.js} +3 -3
  20. package/dist/chunks/{ColorModeControl-BewxA0rX.js.map → ColorModeControl-DaVJ-SyX.js.map} +1 -1
  21. package/dist/chunks/ComboBox-DKln_mOd.js +138 -0
  22. package/dist/chunks/ComboBox-DKln_mOd.js.map +1 -0
  23. package/dist/chunks/{CurveEditor-DUVjd25R.js → CurveEditor-0EE00D6s.js} +90 -87
  24. package/dist/chunks/CurveEditor-0EE00D6s.js.map +1 -0
  25. package/dist/chunks/{DataGrid-LZ2JgY2Y.js → DataGrid-CmHJe57v.js} +23 -18
  26. package/dist/chunks/DataGrid-CmHJe57v.js.map +1 -0
  27. package/dist/chunks/DetailList-BpU50XVe.js +54 -0
  28. package/dist/chunks/DetailList-BpU50XVe.js.map +1 -0
  29. package/dist/chunks/{DetentSlider-5uQPFucv.js → DetentSlider-DNTAk8xP.js} +2 -2
  30. package/dist/chunks/{DetentSlider-5uQPFucv.js.map → DetentSlider-DNTAk8xP.js.map} +1 -1
  31. package/dist/chunks/{Dialog-DGFutQ--.js → Dialog-DKfsk5VN.js} +3 -3
  32. package/dist/chunks/{Dialog-DGFutQ--.js.map → Dialog-DKfsk5VN.js.map} +1 -1
  33. package/dist/chunks/{DragGhost-B5_hb9W9.js → DragGhost-BeYDJyLZ.js} +2 -2
  34. package/dist/chunks/{DragGhost-B5_hb9W9.js.map → DragGhost-BeYDJyLZ.js.map} +1 -1
  35. package/dist/chunks/{FallthroughDiagram-BEHiM5IS.js → FallthroughDiagram-CS1IhQaU.js} +16 -16
  36. package/dist/chunks/FallthroughDiagram-CS1IhQaU.js.map +1 -0
  37. package/dist/chunks/Field-DiX_WByH.js +25 -0
  38. package/dist/chunks/Field-DiX_WByH.js.map +1 -0
  39. package/dist/chunks/FillStrokeSwatch-C4h3rUFM.js +112 -0
  40. package/dist/chunks/FillStrokeSwatch-C4h3rUFM.js.map +1 -0
  41. package/dist/chunks/{FontFamilySelect-DkRgNtag.js → FontFamilySelect-DEvMXyZd.js} +2 -2
  42. package/dist/chunks/FontFamilySelect-DEvMXyZd.js.map +1 -0
  43. package/dist/chunks/FontWeightSelect-BLQ_LMJF.js +49 -0
  44. package/dist/chunks/FontWeightSelect-BLQ_LMJF.js.map +1 -0
  45. package/dist/chunks/{GestureRoute-C_YGl7bJ.js → GestureRoute-BXESrHI0.js} +2 -2
  46. package/dist/chunks/{GestureRoute-C_YGl7bJ.js.map → GestureRoute-BXESrHI0.js.map} +1 -1
  47. package/dist/chunks/GradientEditor-DD2OjQtn.js +325 -0
  48. package/dist/chunks/GradientEditor-DD2OjQtn.js.map +1 -0
  49. package/dist/chunks/{Icon-CcVjdq2C.js → Icon--B1ME-6c.js} +3 -1
  50. package/dist/chunks/Icon--B1ME-6c.js.map +1 -0
  51. package/dist/chunks/{InlineRange-P01ABSzo.js → InlineRange-DPjIsJB3.js} +3 -3
  52. package/dist/chunks/InlineRange-DPjIsJB3.js.map +1 -0
  53. package/dist/chunks/{Input-CHmkfYaD.js → Input-D7SDKbST.js} +10 -15
  54. package/dist/chunks/Input-D7SDKbST.js.map +1 -0
  55. package/dist/chunks/{ItemList-Cm-HUWCi.js → ItemList-CRu9y7hL.js} +2 -2
  56. package/dist/chunks/ItemList-CRu9y7hL.js.map +1 -0
  57. package/dist/chunks/{Jog-DRmfrkCg.js → Jog-BrkzdGV2.js} +8 -8
  58. package/dist/chunks/Jog-BrkzdGV2.js.map +1 -0
  59. package/dist/chunks/{LayerList-wCI1EueM.js → LayerList-Bxj1N6bj.js} +151 -153
  60. package/dist/chunks/LayerList-Bxj1N6bj.js.map +1 -0
  61. package/dist/chunks/ListEditor-OQDzG4A5.js +72 -0
  62. package/dist/chunks/ListEditor-OQDzG4A5.js.map +1 -0
  63. package/dist/chunks/MenuButton-TAFg88Lp.js +75 -0
  64. package/dist/chunks/MenuButton-TAFg88Lp.js.map +1 -0
  65. package/dist/chunks/MeshEditor-DWpvg8H6.js +199 -0
  66. package/dist/chunks/MeshEditor-DWpvg8H6.js.map +1 -0
  67. package/dist/chunks/{NumberField-BnJxcazc.js → NumberField-DS0WSiin.js} +26 -23
  68. package/dist/chunks/NumberField-DS0WSiin.js.map +1 -0
  69. package/dist/chunks/{OptionsBar-ujxYidhj.js → OptionsBar-DeTAjVb7.js} +6 -8
  70. package/dist/chunks/{OptionsBar-ujxYidhj.js.map → OptionsBar-DeTAjVb7.js.map} +1 -1
  71. package/dist/chunks/PaintField-BdmQM53v.js +63 -0
  72. package/dist/chunks/PaintField-BdmQM53v.js.map +1 -0
  73. package/dist/chunks/PaintInput-DaQMeBsI.js +132 -0
  74. package/dist/chunks/PaintInput-DaQMeBsI.js.map +1 -0
  75. package/dist/chunks/PatternPicker-B3HcMZWg.js +135 -0
  76. package/dist/chunks/PatternPicker-B3HcMZWg.js.map +1 -0
  77. package/dist/chunks/{Plot2D-CTXHkL5p.js → Plot2D-BrvQS0dh.js} +7 -7
  78. package/dist/chunks/Plot2D-BrvQS0dh.js.map +1 -0
  79. package/dist/chunks/{PointPlotter-ldI4RrU1.js → PointPlotter-BBXpQ_QD.js} +2 -2
  80. package/dist/chunks/{PointPlotter-ldI4RrU1.js.map → PointPlotter-BBXpQ_QD.js.map} +1 -1
  81. package/dist/chunks/{Powerline-DNyH885r.js → Powerline-6wIFmDik.js} +2 -2
  82. package/dist/chunks/{Powerline-DNyH885r.js.map → Powerline-6wIFmDik.js.map} +1 -1
  83. package/dist/chunks/{Prefs-ByA-x51i.js → Prefs-C4MZ28SX.js} +118 -95
  84. package/dist/chunks/Prefs-C4MZ28SX.js.map +1 -0
  85. package/dist/chunks/{Properties-DmAeQ3mk.js → Properties-DseN56WI.js} +29 -29
  86. package/dist/chunks/{Properties-DmAeQ3mk.js.map → Properties-DseN56WI.js.map} +1 -1
  87. package/dist/chunks/PropertyField-BbNqK8xr.js +743 -0
  88. package/dist/chunks/PropertyField-BbNqK8xr.js.map +1 -0
  89. package/dist/chunks/{RadioGroup-Bh4-12e-.js → RadioGroup-B70_M-gT.js} +2 -2
  90. package/dist/chunks/{RadioGroup-Bh4-12e-.js.map → RadioGroup-B70_M-gT.js.map} +1 -1
  91. package/dist/chunks/{RangeSlider-SEGE-7VF.js → RangeSlider-DO5TZVk7.js} +8 -8
  92. package/dist/chunks/{RangeSlider-SEGE-7VF.js.map → RangeSlider-DO5TZVk7.js.map} +1 -1
  93. package/dist/chunks/RecentColorsProvider-DHcfk25u.js +84 -0
  94. package/dist/chunks/RecentColorsProvider-DHcfk25u.js.map +1 -0
  95. package/dist/chunks/ResizeHandle-CbAgCQOt.js +81 -0
  96. package/dist/chunks/ResizeHandle-CbAgCQOt.js.map +1 -0
  97. package/dist/chunks/Select-ouV8O6cp.js +236 -0
  98. package/dist/chunks/Select-ouV8O6cp.js.map +1 -0
  99. package/dist/chunks/{SelectionPanel-BaQnX4Bs.js → SelectionPanel-C3WzyaZV.js} +14 -13
  100. package/dist/chunks/{SelectionPanel-BaQnX4Bs.js.map → SelectionPanel-C3WzyaZV.js.map} +1 -1
  101. package/dist/chunks/{SidebarPanel-BblDEz4G.js → SidebarPanel-AXQ0jRDx.js} +2 -2
  102. package/dist/chunks/{SidebarPanel-BblDEz4G.js.map → SidebarPanel-AXQ0jRDx.js.map} +1 -1
  103. package/dist/chunks/{Slider-YofwGOI4.js → Slider-DSrlMEq8.js} +19 -19
  104. package/dist/chunks/Slider-DSrlMEq8.js.map +1 -0
  105. package/dist/chunks/{StatusBar-Ca9Dvhhq.js → StatusBar-BEOfOX0D.js} +6 -6
  106. package/dist/chunks/StatusBar-BEOfOX0D.js.map +1 -0
  107. package/dist/chunks/SwatchGrid-9ZPiDmxd.js +78 -0
  108. package/dist/chunks/SwatchGrid-9ZPiDmxd.js.map +1 -0
  109. package/dist/chunks/SwatchStrip-Bi9iPLoh.js +577 -0
  110. package/dist/chunks/SwatchStrip-Bi9iPLoh.js.map +1 -0
  111. package/dist/chunks/{ThemeSwitcher-BlsInAmR.js → ThemeSwitcher-DiBmMh_B.js} +3 -3
  112. package/dist/chunks/{ThemeSwitcher-BlsInAmR.js.map → ThemeSwitcher-DiBmMh_B.js.map} +1 -1
  113. package/dist/chunks/{Timeline-B39cwfMB.js → Timeline-sMCH2fah.js} +293 -280
  114. package/dist/chunks/Timeline-sMCH2fah.js.map +1 -0
  115. package/dist/chunks/Toast-C3ozq11V.js +170 -0
  116. package/dist/chunks/Toast-C3ozq11V.js.map +1 -0
  117. package/dist/chunks/{ToggleBar-BTYkBXU9.js → ToggleBar-Z2jZiguF.js} +6 -8
  118. package/dist/chunks/{ToggleBar-BTYkBXU9.js.map → ToggleBar-Z2jZiguF.js.map} +1 -1
  119. package/dist/chunks/{TokenPanel-CMDAOfYH.js → TokenPanel-WtKGY2Db.js} +32 -32
  120. package/dist/chunks/TokenPanel-WtKGY2Db.js.map +1 -0
  121. package/dist/chunks/{ToolButton-CAHBa08P.js → ToolButton-BURp4YIO.js} +7 -9
  122. package/dist/chunks/ToolButton-BURp4YIO.js.map +1 -0
  123. package/dist/chunks/{ToolOptionsBar-D_GCrBAN.js → ToolOptionsBar-CZTYPoC2.js} +3 -2
  124. package/dist/chunks/{ToolOptionsBar-D_GCrBAN.js.map → ToolOptionsBar-CZTYPoC2.js.map} +1 -1
  125. package/dist/chunks/{ToolPalette-OOWN51Xx.js → ToolPalette-DKDFWOX-.js} +7 -9
  126. package/dist/chunks/{ToolPalette-OOWN51Xx.js.map → ToolPalette-DKDFWOX-.js.map} +1 -1
  127. package/dist/chunks/{Tooltip-Clg2mhSt.js → Tooltip-C6eFCYxw.js} +2 -2
  128. package/dist/chunks/{Tooltip-Clg2mhSt.js.map → Tooltip-C6eFCYxw.js.map} +1 -1
  129. package/dist/chunks/Tree-Cc8lIzgM.js.map +1 -1
  130. package/dist/chunks/checkbox.module-DLQV9tMX.js +5 -0
  131. package/dist/chunks/checkbox.module-DLQV9tMX.js.map +1 -0
  132. package/dist/chunks/{createKeyframeLayer-DVl321_l.js → createKeyframeLayer-DSVf13Su.js} +194 -208
  133. package/dist/chunks/createKeyframeLayer-DSVf13Su.js.map +1 -0
  134. package/dist/chunks/field.module-B27pWv0i.js +15 -0
  135. package/dist/chunks/field.module-B27pWv0i.js.map +1 -0
  136. package/dist/chunks/formatShortcut-DRQrVThu.js.map +1 -1
  137. package/dist/chunks/handles-CqVANLtu.js +17 -0
  138. package/dist/chunks/handles-CqVANLtu.js.map +1 -0
  139. package/dist/chunks/{icons-BhcR1l64.js → icons-Dr2-r30x.js} +2 -2
  140. package/dist/chunks/icons-Dr2-r30x.js.map +1 -0
  141. package/dist/chunks/listbox.module-BcdVJMbm.js +8 -0
  142. package/dist/chunks/listbox.module-BcdVJMbm.js.map +1 -0
  143. package/dist/chunks/model-qsAFK7_0.js +386 -0
  144. package/dist/chunks/model-qsAFK7_0.js.map +1 -0
  145. package/dist/chunks/{portalHost-yTOVuCej.js → portalHost-CE70wLzo.js} +10 -6
  146. package/dist/chunks/portalHost-CE70wLzo.js.map +1 -0
  147. package/dist/chunks/prefField-BE_Ytr2H.js +229 -0
  148. package/dist/chunks/prefField-BE_Ytr2H.js.map +1 -0
  149. package/dist/chunks/{segmentTooltip-CStYHKzd.js → segmentTooltip-CGxCOWNz.js} +2 -2
  150. package/dist/chunks/{segmentTooltip-CStYHKzd.js.map → segmentTooltip-CGxCOWNz.js.map} +1 -1
  151. package/dist/chunks/segmentedControl.module-BzGXUL5G.js +11 -0
  152. package/dist/chunks/segmentedControl.module-BzGXUL5G.js.map +1 -0
  153. package/dist/chunks/useReorderDragList-CStYKjHl.js +133 -0
  154. package/dist/chunks/useReorderDragList-CStYKjHl.js.map +1 -0
  155. package/dist/chunks/useRovingTabIndex-D7u22Ia_.js +91 -0
  156. package/dist/chunks/useRovingTabIndex-D7u22Ia_.js.map +1 -0
  157. package/dist/components/ActionBar/ActionBar.d.ts.map +1 -1
  158. package/dist/components/ActionBar/index.js +1 -1
  159. package/dist/components/Badge/bases/ChamferedRect.d.ts.map +1 -1
  160. package/dist/components/Badge/index.js +1 -1
  161. package/dist/components/BandEditor/BandEditor.d.ts +1 -0
  162. package/dist/components/BandEditor/BandEditor.d.ts.map +1 -1
  163. package/dist/components/BandEditor/index.js +1 -1
  164. package/dist/components/Button/index.js +1 -1
  165. package/dist/components/ButtonBar/ButtonBar.d.ts.map +1 -1
  166. package/dist/components/ButtonBar/index.js +1 -1
  167. package/dist/components/Callout/Callout.d.ts.map +1 -1
  168. package/dist/components/Callout/index.js +1 -1
  169. package/dist/components/Checkbox/Checkbox.d.ts +28 -13
  170. package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
  171. package/dist/components/Checkbox/index.js +1 -1
  172. package/dist/components/CloseButton/index.js +1 -1
  173. package/dist/components/ColorField/ColorField.d.ts.map +1 -1
  174. package/dist/components/ColorField/OpacityRange.d.ts +18 -0
  175. package/dist/components/ColorField/OpacityRange.d.ts.map +1 -0
  176. package/dist/components/ColorField/index.js +1 -1
  177. package/dist/components/ColorModeControl/index.js +1 -1
  178. package/dist/components/ComboBox/ComboBox.d.ts +7 -0
  179. package/dist/components/ComboBox/ComboBox.d.ts.map +1 -1
  180. package/dist/components/ComboBox/index.js +1 -1
  181. package/dist/components/CurveEditor/CurveEditor.d.ts.map +1 -1
  182. package/dist/components/CurveEditor/LayeredCurveEditor.d.ts.map +1 -1
  183. package/dist/components/CurveEditor/index.js +2 -2
  184. package/dist/components/DataGrid/DataGrid.d.ts +3 -0
  185. package/dist/components/DataGrid/DataGrid.d.ts.map +1 -1
  186. package/dist/components/DataGrid/index.js +1 -1
  187. package/dist/components/DetailList/DetailList.d.ts +1 -1
  188. package/dist/components/DetailList/DetailList.d.ts.map +1 -1
  189. package/dist/components/DetailList/index.js +1 -1
  190. package/dist/components/DetentSlider/index.js +1 -1
  191. package/dist/components/Dialog/index.js +1 -1
  192. package/dist/components/DragGhost/index.js +1 -1
  193. package/dist/components/FallthroughDiagram/index.js +1 -1
  194. package/dist/components/Field/index.js +1 -1
  195. package/dist/components/FillStrokeSwatch/FillStrokeSwatch.d.ts +5 -2
  196. package/dist/components/FillStrokeSwatch/FillStrokeSwatch.d.ts.map +1 -1
  197. package/dist/components/FillStrokeSwatch/index.js +1 -1
  198. package/dist/components/FontFamilySelect/FontFamilySelect.d.ts +20 -0
  199. package/dist/components/FontFamilySelect/FontFamilySelect.d.ts.map +1 -1
  200. package/dist/components/FontFamilySelect/index.js +1 -1
  201. package/dist/components/FontWeightSelect/FontWeightSelect.d.ts +26 -0
  202. package/dist/components/FontWeightSelect/FontWeightSelect.d.ts.map +1 -0
  203. package/dist/components/FontWeightSelect/index.d.ts +3 -0
  204. package/dist/components/FontWeightSelect/index.d.ts.map +1 -0
  205. package/dist/components/FontWeightSelect/index.js +2 -0
  206. package/dist/components/GestureRoute/index.js +1 -1
  207. package/dist/components/GradientEditor/GradientHandles.d.ts +1 -8
  208. package/dist/components/GradientEditor/GradientHandles.d.ts.map +1 -1
  209. package/dist/components/GradientEditor/SceneGradientHandles.d.ts +7 -5
  210. package/dist/components/GradientEditor/SceneGradientHandles.d.ts.map +1 -1
  211. package/dist/components/GradientEditor/handleOverlay.d.ts +41 -0
  212. package/dist/components/GradientEditor/handleOverlay.d.ts.map +1 -0
  213. package/dist/components/GradientEditor/index.js +1 -1
  214. package/dist/components/InlineRange/index.js +1 -1
  215. package/dist/components/Input/Input.d.ts +1 -1
  216. package/dist/components/Input/Input.d.ts.map +1 -1
  217. package/dist/components/Input/index.js +1 -1
  218. package/dist/components/ItemList/ItemList.d.ts +32 -31
  219. package/dist/components/ItemList/ItemList.d.ts.map +1 -1
  220. package/dist/components/ItemList/index.js +1 -1
  221. package/dist/components/Jog/index.js +1 -1
  222. package/dist/components/LayerList/LayerList.d.ts.map +1 -1
  223. package/dist/components/LayerList/index.js +1 -1
  224. package/dist/components/ListEditor/ListEditor.d.ts.map +1 -1
  225. package/dist/components/ListEditor/index.js +1 -1
  226. package/dist/components/MenuButton/MenuButton.d.ts.map +1 -1
  227. package/dist/components/MenuButton/index.js +1 -1
  228. package/dist/components/MeshEditor/MeshEditor.d.ts +4 -3
  229. package/dist/components/MeshEditor/MeshEditor.d.ts.map +1 -1
  230. package/dist/components/MeshEditor/MeshHandles.d.ts +38 -0
  231. package/dist/components/MeshEditor/MeshHandles.d.ts.map +1 -0
  232. package/dist/components/MeshEditor/index.d.ts +2 -0
  233. package/dist/components/MeshEditor/index.d.ts.map +1 -1
  234. package/dist/components/MeshEditor/index.js +2 -2
  235. package/dist/components/NumberField/NumberField.d.ts +1 -1
  236. package/dist/components/NumberField/NumberField.d.ts.map +1 -1
  237. package/dist/components/NumberField/index.js +1 -1
  238. package/dist/components/OptionsBar/OptionsBar.d.ts.map +1 -1
  239. package/dist/components/OptionsBar/index.js +1 -1
  240. package/dist/components/PaintField/PaintField.d.ts.map +1 -1
  241. package/dist/components/PaintField/index.js +1 -1
  242. package/dist/components/PaintInput/PaintInput.d.ts.map +1 -1
  243. package/dist/components/PaintInput/index.js +1 -1
  244. package/dist/components/PatternPicker/PatternPicker.d.ts +6 -5
  245. package/dist/components/PatternPicker/PatternPicker.d.ts.map +1 -1
  246. package/dist/components/PatternPicker/index.js +1 -1
  247. package/dist/components/Plot2D/index.js +1 -1
  248. package/dist/components/PointPlotter/index.js +1 -1
  249. package/dist/components/Powerline/index.js +2 -2
  250. package/dist/components/Prefs/PrefsForm.d.ts +22 -0
  251. package/dist/components/Prefs/PrefsForm.d.ts.map +1 -1
  252. package/dist/components/Prefs/PrefsRail.d.ts +3 -2
  253. package/dist/components/Prefs/PrefsRail.d.ts.map +1 -1
  254. package/dist/components/Prefs/PrefsRow.d.ts +4 -0
  255. package/dist/components/Prefs/PrefsRow.d.ts.map +1 -1
  256. package/dist/components/Prefs/index.js +2 -2
  257. package/dist/components/Prefs/prefField.d.ts +13 -0
  258. package/dist/components/Prefs/prefField.d.ts.map +1 -1
  259. package/dist/components/Properties/PropertyField.d.ts +13 -2
  260. package/dist/components/Properties/PropertyField.d.ts.map +1 -1
  261. package/dist/components/Properties/PropertyPanel.d.ts +18 -1
  262. package/dist/components/Properties/PropertyPanel.d.ts.map +1 -1
  263. package/dist/components/Properties/index.d.ts +2 -2
  264. package/dist/components/Properties/index.d.ts.map +1 -1
  265. package/dist/components/Properties/index.js +3 -3
  266. package/dist/components/RadioGroup/index.js +1 -1
  267. package/dist/components/RangeSlider/index.js +1 -1
  268. package/dist/components/RecentColors/RecentColorsProvider.d.ts +24 -0
  269. package/dist/components/RecentColors/RecentColorsProvider.d.ts.map +1 -0
  270. package/dist/components/RecentColors/index.d.ts +5 -0
  271. package/dist/components/RecentColors/index.d.ts.map +1 -0
  272. package/dist/components/RecentColors/index.js +2 -0
  273. package/dist/components/RecentColors/recentColors.d.ts +39 -0
  274. package/dist/components/RecentColors/recentColors.d.ts.map +1 -0
  275. package/dist/components/ResizeHandle/ResizeHandle.d.ts.map +1 -1
  276. package/dist/components/ResizeHandle/index.js +1 -1
  277. package/dist/components/Select/Select.d.ts +6 -2
  278. package/dist/components/Select/Select.d.ts.map +1 -1
  279. package/dist/components/Select/index.js +1 -1
  280. package/dist/components/SelectionPanel/index.js +2 -2
  281. package/dist/components/SelectionPanel/renderLeaf.d.ts +12 -2
  282. package/dist/components/SelectionPanel/renderLeaf.d.ts.map +1 -1
  283. package/dist/components/SidebarPanel/index.js +1 -1
  284. package/dist/components/Slider/index.js +1 -1
  285. package/dist/components/StatusBar/StatusBar.d.ts +1 -1
  286. package/dist/components/StatusBar/index.js +1 -1
  287. package/dist/components/SwatchGrid/SwatchGrid.d.ts.map +1 -1
  288. package/dist/components/SwatchGrid/index.js +1 -1
  289. package/dist/components/SwatchStrip/SwatchStrip.d.ts +44 -0
  290. package/dist/components/SwatchStrip/SwatchStrip.d.ts.map +1 -0
  291. package/dist/components/SwatchStrip/index.d.ts +5 -0
  292. package/dist/components/SwatchStrip/index.d.ts.map +1 -0
  293. package/dist/components/SwatchStrip/index.js +2 -0
  294. package/dist/components/SwatchStrip/palettes.d.ts +21 -0
  295. package/dist/components/SwatchStrip/palettes.d.ts.map +1 -0
  296. package/dist/components/ThemeSwitcher/index.js +1 -1
  297. package/dist/components/Timeline/AnimatedTimeline.d.ts +1 -0
  298. package/dist/components/Timeline/AnimatedTimeline.d.ts.map +1 -1
  299. package/dist/components/Timeline/EasingPicker.d.ts +3 -0
  300. package/dist/components/Timeline/EasingPicker.d.ts.map +1 -1
  301. package/dist/components/Timeline/LaneGraph.d.ts +1 -1
  302. package/dist/components/Timeline/LaneGraph.d.ts.map +1 -1
  303. package/dist/components/Timeline/Timeline.d.ts +10 -1
  304. package/dist/components/Timeline/Timeline.d.ts.map +1 -1
  305. package/dist/components/Timeline/Transport.d.ts +6 -0
  306. package/dist/components/Timeline/Transport.d.ts.map +1 -1
  307. package/dist/components/Timeline/index.js +1 -1
  308. package/dist/components/Timeline/keys.d.ts +1 -0
  309. package/dist/components/Timeline/keys.d.ts.map +1 -1
  310. package/dist/components/Toast/Toast.d.ts +12 -3
  311. package/dist/components/Toast/Toast.d.ts.map +1 -1
  312. package/dist/components/Toast/index.js +1 -1
  313. package/dist/components/ToggleBar/ToggleBar.d.ts.map +1 -1
  314. package/dist/components/ToggleBar/index.js +1 -1
  315. package/dist/components/TokenPanel/index.js +1 -1
  316. package/dist/components/TokenPanel/tokenTypes.d.ts +1 -0
  317. package/dist/components/TokenPanel/tokenTypes.d.ts.map +1 -1
  318. package/dist/components/ToolButton/ToolButton.d.ts +1 -10
  319. package/dist/components/ToolButton/ToolButton.d.ts.map +1 -1
  320. package/dist/components/ToolButton/index.js +1 -1
  321. package/dist/components/ToolOptionsBar/index.js +1 -1
  322. package/dist/components/ToolPalette/ToolPalette.d.ts.map +1 -1
  323. package/dist/components/ToolPalette/formatShortcut.d.ts +2 -0
  324. package/dist/components/ToolPalette/formatShortcut.d.ts.map +1 -1
  325. package/dist/components/ToolPalette/index.js +1 -1
  326. package/dist/components/Tooltip/index.js +1 -1
  327. package/dist/components/Tree/Tree.d.ts +27 -26
  328. package/dist/components/Tree/Tree.d.ts.map +1 -1
  329. package/dist/icons/index.d.ts +51 -0
  330. package/dist/icons/index.d.ts.map +1 -1
  331. package/dist/icons/paths.d.ts +2 -0
  332. package/dist/icons/paths.d.ts.map +1 -1
  333. package/dist/index.d.ts +4 -1
  334. package/dist/index.d.ts.map +1 -1
  335. package/dist/index.js +98 -95
  336. package/dist/index.js.map +1 -1
  337. package/dist/overlays/portalHost.d.ts +6 -0
  338. package/dist/overlays/portalHost.d.ts.map +1 -1
  339. package/dist/style.css +1 -1
  340. package/dist/useAsyncOptions.d.ts.map +1 -1
  341. package/dist/useReorderDragList.d.ts.map +1 -1
  342. package/dist/useRovingTabIndex.d.ts +40 -39
  343. package/dist/useRovingTabIndex.d.ts.map +1 -1
  344. package/package.json +9 -9
  345. package/dist/chunks/ActionBar-DCq16yFA.js +0 -57
  346. package/dist/chunks/ActionBar-DCq16yFA.js.map +0 -1
  347. package/dist/chunks/BandEditor-Dd0egAgE.js.map +0 -1
  348. package/dist/chunks/Callout-ndW5_Bqx.js +0 -116
  349. package/dist/chunks/Callout-ndW5_Bqx.js.map +0 -1
  350. package/dist/chunks/Checkbox-DHXTUHO9.js +0 -47
  351. package/dist/chunks/Checkbox-DHXTUHO9.js.map +0 -1
  352. package/dist/chunks/ColorField-Yz_BkcCT.js +0 -69
  353. package/dist/chunks/ColorField-Yz_BkcCT.js.map +0 -1
  354. package/dist/chunks/ComboBox-B34H76CW.js +0 -138
  355. package/dist/chunks/ComboBox-B34H76CW.js.map +0 -1
  356. package/dist/chunks/CurveEditor-DUVjd25R.js.map +0 -1
  357. package/dist/chunks/DataGrid-LZ2JgY2Y.js.map +0 -1
  358. package/dist/chunks/DetailList-BKomDzg5.js +0 -52
  359. package/dist/chunks/DetailList-BKomDzg5.js.map +0 -1
  360. package/dist/chunks/FallthroughDiagram-BEHiM5IS.js.map +0 -1
  361. package/dist/chunks/Field--onYxXTF.js +0 -32
  362. package/dist/chunks/Field--onYxXTF.js.map +0 -1
  363. package/dist/chunks/FillStrokeSwatch-DNb0KXPk.js +0 -111
  364. package/dist/chunks/FillStrokeSwatch-DNb0KXPk.js.map +0 -1
  365. package/dist/chunks/FontFamilySelect-DkRgNtag.js.map +0 -1
  366. package/dist/chunks/GradientEditor-b7v4Ph3i.js +0 -363
  367. package/dist/chunks/GradientEditor-b7v4Ph3i.js.map +0 -1
  368. package/dist/chunks/Icon-CcVjdq2C.js.map +0 -1
  369. package/dist/chunks/InlineRange-P01ABSzo.js.map +0 -1
  370. package/dist/chunks/Input-CHmkfYaD.js.map +0 -1
  371. package/dist/chunks/ItemList-Cm-HUWCi.js.map +0 -1
  372. package/dist/chunks/Jog-DRmfrkCg.js.map +0 -1
  373. package/dist/chunks/LayerList-wCI1EueM.js.map +0 -1
  374. package/dist/chunks/ListEditor-BeA60TAA.js +0 -71
  375. package/dist/chunks/ListEditor-BeA60TAA.js.map +0 -1
  376. package/dist/chunks/MenuButton-BSqEChJE.js +0 -70
  377. package/dist/chunks/MenuButton-BSqEChJE.js.map +0 -1
  378. package/dist/chunks/MeshEditor-D1HLZcAh.js +0 -87
  379. package/dist/chunks/MeshEditor-D1HLZcAh.js.map +0 -1
  380. package/dist/chunks/NumberField-BnJxcazc.js.map +0 -1
  381. package/dist/chunks/PaintField-DadOELMg.js +0 -62
  382. package/dist/chunks/PaintField-DadOELMg.js.map +0 -1
  383. package/dist/chunks/PaintInput-v8Y7MDbH.js +0 -121
  384. package/dist/chunks/PaintInput-v8Y7MDbH.js.map +0 -1
  385. package/dist/chunks/PatternPicker-R_EQtw2Q.js +0 -93
  386. package/dist/chunks/PatternPicker-R_EQtw2Q.js.map +0 -1
  387. package/dist/chunks/Plot2D-CTXHkL5p.js.map +0 -1
  388. package/dist/chunks/Prefs-ByA-x51i.js.map +0 -1
  389. package/dist/chunks/PropertyField-DfIJJ5GS.js +0 -673
  390. package/dist/chunks/PropertyField-DfIJJ5GS.js.map +0 -1
  391. package/dist/chunks/ResizeHandle-rKVWyeTG.js +0 -79
  392. package/dist/chunks/ResizeHandle-rKVWyeTG.js.map +0 -1
  393. package/dist/chunks/Select-ClmKtyWg.js +0 -229
  394. package/dist/chunks/Select-ClmKtyWg.js.map +0 -1
  395. package/dist/chunks/Slider-YofwGOI4.js.map +0 -1
  396. package/dist/chunks/StatusBar-Ca9Dvhhq.js.map +0 -1
  397. package/dist/chunks/SwatchGrid-BYvA8Bmh.js +0 -73
  398. package/dist/chunks/SwatchGrid-BYvA8Bmh.js.map +0 -1
  399. package/dist/chunks/Timeline-B39cwfMB.js.map +0 -1
  400. package/dist/chunks/Toast-BF9GE0HC.js +0 -126
  401. package/dist/chunks/Toast-BF9GE0HC.js.map +0 -1
  402. package/dist/chunks/TokenPanel-CMDAOfYH.js.map +0 -1
  403. package/dist/chunks/ToolButton-CAHBa08P.js.map +0 -1
  404. package/dist/chunks/createKeyframeLayer-DVl321_l.js.map +0 -1
  405. package/dist/chunks/icons-BhcR1l64.js.map +0 -1
  406. package/dist/chunks/model-BaF65rnX.js +0 -365
  407. package/dist/chunks/model-BaF65rnX.js.map +0 -1
  408. package/dist/chunks/portalHost-yTOVuCej.js.map +0 -1
  409. package/dist/chunks/prefField-BopW9bjx.js +0 -201
  410. package/dist/chunks/prefField-BopW9bjx.js.map +0 -1
  411. package/dist/chunks/segmentedControl.module-D6SzYJD7.js +0 -11
  412. package/dist/chunks/segmentedControl.module-D6SzYJD7.js.map +0 -1
  413. package/dist/chunks/useReorderDragList-FCMoFIzH.js +0 -131
  414. package/dist/chunks/useReorderDragList-FCMoFIzH.js.map +0 -1
  415. package/dist/chunks/useRovingTabIndex-Bp_hYm_h.js +0 -65
  416. package/dist/chunks/useRovingTabIndex-Bp_hYm_h.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"useAsyncOptions.d.ts","sourceRoot":"","sources":["../src/useAsyncOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,KAAK,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3B,oEAAoE;AACpE,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,GAAG,IAAI,cAAc,GAAG;IAAE,KAAK,EAAE,CAAC,CAAA;CAAE,CAAC;AAEvE,2CAA2C;AAC3C,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,GAAG,IAAI;IAChD;;;OAGG;IACH,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrF,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,gFAAgF;AAChF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,GAAG,IAAI;IAC9C,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,GAAG,GAAG,MAAM,EAAE,EACtD,IAAI,EACJ,UAAgB,EAChB,SAAa,GACd,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CA8DjD"}
1
+ {"version":3,"file":"useAsyncOptions.d.ts","sourceRoot":"","sources":["../src/useAsyncOptions.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,KAAK,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3B,oEAAoE;AACpE,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,GAAG,IAAI,cAAc,GAAG;IAAE,KAAK,EAAE,CAAC,CAAA;CAAE,CAAC;AAEvE,2CAA2C;AAC3C,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,GAAG,IAAI;IAChD;;;OAGG;IACH,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrF,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,gFAAgF;AAChF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,GAAG,IAAI;IAC9C,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,GAAG,GAAG,MAAM,EAAE,EACtD,IAAI,EACJ,UAAgB,EAChB,SAAa,GACd,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CA6DjD"}
@@ -1 +1 @@
1
- {"version":3,"file":"useReorderDragList.d.ts","sourceRoot":"","sources":["../src/useReorderDragList.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,IAAI,iBAAiB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIvF,qCAAqC;AACrC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB;8DAC0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IACpD;;;;;oEAKgE;IAChE,OAAO,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;IACjD,2FAA2F;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;0BAEsB;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,6CAA6C;AAC7C,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,SAAS,MAAM,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;CAC5B;AAID;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG;QAAE,aAAa,CAAC,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;KAAE,CAAC;IACnF,cAAc,EAAE;QACd,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;KAC/B,CAAC;IACF,KAAK,EAAE,gBAAgB,CAAC;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;CAC1D;AAuDD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,yBAAyB,GAAG,mBAAmB,CAwHvF"}
1
+ {"version":3,"file":"useReorderDragList.d.ts","sourceRoot":"","sources":["../src/useReorderDragList.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,IAAI,iBAAiB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIvF,qCAAqC;AACrC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB;8DAC0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IACpD;;;;;oEAKgE;IAChE,OAAO,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;IACjD,2FAA2F;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;0BAEsB;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,6CAA6C;AAC7C,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,SAAS,MAAM,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;CAC5B;AAID;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG;QAAE,aAAa,CAAC,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;KAAE,CAAC;IACnF,cAAc,EAAE;QACd,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;KAC/B,CAAC;IACF,KAAK,EAAE,gBAAgB,CAAC;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;CAC1D;AAuDD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,yBAAyB,GAAG,mBAAmB,CAuHvF"}
@@ -1,59 +1,60 @@
1
1
  import { type KeyboardEvent as ReactKeyboardEvent, type RefObject } from 'react';
2
- /** The only thing the hook needs to know about a bar's items: which are
3
- * skipped by arrow navigation. */
4
- export type RovingItem = {
5
- disabled?: boolean;
6
- };
2
+ /** Which arrow keys walk the items. `'both'` answers to all four, the way a
3
+ * radio group does; a one-axis toolbar leaves the cross-axis arrows to the
4
+ * page. Matches `aria-orientation` for the one-axis values. */
5
+ export type RovingOrientation = 'horizontal' | 'vertical' | 'both';
7
6
  /** Options for {@link useRovingTabIndex}. */
8
7
  export type UseRovingTabIndexOptions = {
9
- /** In the same order as the elements carrying `itemClassName`. */
10
- items: readonly RovingItem[];
11
- /** Class on the focusable element of each item, inside the container the
12
- * returned `rootRef` is attached to. Their DOM order must match `items`. */
13
- itemClassName: string;
14
- /** Index that carries `tabIndex=0`. Defaults to the first enabled item; a
15
- * radiogroup-style bar passes its selected index so Tab lands on the
16
- * current value. */
8
+ /** Selects the items inside the container, in DOM order. Items belonging to
9
+ * a nested roving container are its own, not this one's. Defaults to
10
+ * `'button, [role="button"]'`. */
11
+ itemSelector?: string;
12
+ /** Defaults to `'both'`. */
13
+ orientation?: RovingOrientation;
14
+ /** The item that holds the tab stop while focus is outside the container —
15
+ * a radiogroup-style bar passes its selected index so Tab lands on the
16
+ * current value. Omitted, the stop stays on whichever item last had focus,
17
+ * starting at the first enabled one. */
17
18
  tabStopIndex?: number;
18
- /** Called with the new index as arrow/Home/End focus moves, before focus
19
- * moves. This is where a selection-follows-focus bar commits the value. */
19
+ /** Called with the destination index as arrow/Home/End navigation moves,
20
+ * before focus does. This is where a selection-follows-focus bar commits
21
+ * the value. */
20
22
  onNavigate?: (index: number) => void;
21
23
  /** Space/Enter on the item at `index`. When omitted the keypress is left
22
24
  * alone, which on a native `<button>` produces an ordinary click. */
23
25
  onActivate?: (index: number) => void;
24
26
  };
25
- /**
26
- * What {@link useRovingTabIndex} returns: a container ref plus the per-item
27
- * `tabIndex` and `onKeyDown` values to spread onto each item.
28
- */
27
+ /** What {@link useRovingTabIndex} returns. Attach both to the container. */
29
28
  export type RovingTabIndex<T extends HTMLElement = HTMLDivElement> = {
30
- /** Attach to the container element that holds the items. */
31
29
  rootRef: RefObject<T | null>;
32
- /** `tabIndex` value for the item at `index`. */
33
- tabIndexFor: (index: number) => 0 | -1;
34
- /** `onKeyDown` for the item at `index`. */
35
- onKeyDown: (index: number) => (e: ReactKeyboardEvent<HTMLElement>) => void;
30
+ onKeyDown: (e: ReactKeyboardEvent<T>) => void;
36
31
  };
32
+ /** Where `key` takes focus from `current`, or null if it does not move it.
33
+ * Arrows skip disabled items and wrap; Home and End go to the first and last
34
+ * enabled item. */
35
+ export declare function rovingTarget(current: number, key: string, enabled: readonly boolean[], orientation?: RovingOrientation): number | null;
37
36
  /**
38
- * Roving tabindex for a bar of items: one item is in the tab order, and the
39
- * arrow keys move focus among the rest, skipping disabled ones and wrapping
40
- * at both ends. Home and End go to the first and last enabled item. Both axes
41
- * navigate, so the same bar works laid out either way.
37
+ * The APG roving-tabindex contract for a container of items: exactly one item
38
+ * is in the tab order, and the arrow keys move focus among the rest, skipping
39
+ * disabled ones (`disabled` or `aria-disabled="true"`) and wrapping at both
40
+ * ends. Home and End go to the first and last enabled item. While focus is
41
+ * inside, the focused item holds the tab stop, so Tab and Shift+Tab both leave
42
+ * the container.
42
43
  *
43
- * Backs `ButtonBar`, `OptionsBar`, and `ToggleBar`.
44
+ * The items are found in the DOM and their `tabIndex` is written there, so the
45
+ * container can hold arbitrary children; callers must not render `tabIndex` on
46
+ * the items themselves. Adding, removing, disabling or enabling an item moves
47
+ * the stop without the container re-rendering.
48
+ *
49
+ * With every item disabled there is no tab stop and the container drops out of
50
+ * the tab order entirely.
44
51
  *
45
52
  * **When a bar should not use this.** What decides it is the items, not who
46
53
  * owns them. A container of compound controls — a number field, a select, a
47
54
  * color field — must leave the arrow keys alone, because those controls edit
48
- * their own value with them; taking the arrows over would break the control
49
- * to navigate between controls. `ToolOptionsBar` is that case: it draws its
50
- * own controls from a tool's schema now rather than taking arbitrary
51
- * children, and a schema-drawn number field eats arrows exactly as a
52
- * hand-placed one did, so it keeps plain DOM tab order. A bar whose items are
53
- * all simple buttons is the case this hook is for.
54
- *
55
- * With every item disabled there is no tab stop and the bar drops out of the
56
- * tab order entirely.
55
+ * their own value with them. `ToolOptionsBar` is that case, and keeps plain
56
+ * DOM tab order. A bar whose items are all simple buttons is the case this
57
+ * hook is for.
57
58
  */
58
- export declare function useRovingTabIndex<T extends HTMLElement = HTMLDivElement>(options: UseRovingTabIndexOptions): RovingTabIndex<T>;
59
+ export declare function useRovingTabIndex<T extends HTMLElement = HTMLDivElement>(options?: UseRovingTabIndexOptions): RovingTabIndex<T>;
59
60
  //# sourceMappingURL=useRovingTabIndex.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useRovingTabIndex.d.ts","sourceRoot":"","sources":["../src/useRovingTabIndex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,aAAa,IAAI,kBAAkB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF;mCACmC;AACnC,MAAM,MAAM,UAAU,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhD,6CAA6C;AAC7C,MAAM,MAAM,wBAAwB,GAAG;IACrC,kEAAkE;IAClE,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B;iFAC6E;IAC7E,aAAa,EAAE,MAAM,CAAC;IACtB;;yBAEqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;gFAC4E;IAC5E,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;0EACsE;IACtE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,IAAI;IACnE,4DAA4D;IAC5D,OAAO,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7B,gDAAgD;IAChD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACvC,2CAA2C;IAC3C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC5E,CAAC;AA8BF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtE,OAAO,EAAE,wBAAwB,GAChC,cAAc,CAAC,CAAC,CAAC,CAmDnB"}
1
+ {"version":3,"file":"useRovingTabIndex.d.ts","sourceRoot":"","sources":["../src/useRovingTabIndex.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,aAAa,IAAI,kBAAkB,EACxC,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf;;gEAEgE;AAChE,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAEnE,6CAA6C;AAC7C,MAAM,MAAM,wBAAwB,GAAG;IACrC;;uCAEmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC;;;6CAGyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;qBAEiB;IACjB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;0EACsE;IACtE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,4EAA4E;AAC5E,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,IAAI;IACnE,OAAO,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7B,SAAS,EAAE,CAAC,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CAC/C,CAAC;AASF;;oBAEoB;AACpB,wBAAgB,YAAY,CAC1B,OAAO,EAAE,MAAM,EACf,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,SAAS,OAAO,EAAE,EAC3B,WAAW,GAAE,iBAA0B,GACtC,MAAM,GAAG,IAAI,CAmBf;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtE,OAAO,GAAE,wBAA6B,GACrC,cAAc,CAAC,CAAC,CAAC,CAqGnB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weasel-js/ui",
3
- "version": "1.7.0",
3
+ "version": "1.7.2",
4
4
  "description": "UI chrome primitives for weasel apps (properties panel, etc.)",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -23,17 +23,17 @@
23
23
  "./package.json": "./package.json"
24
24
  },
25
25
  "dependencies": {
26
- "@weasel-js/font": "1.7.0",
27
- "@weasel-js/modes": "1.7.0",
28
- "@weasel-js/quantity": "1.7.0",
29
- "@weasel-js/svg": "1.7.0",
30
- "@weasel-js/theme": "1.7.0",
26
+ "@weasel-js/font": "1.7.2",
27
+ "@weasel-js/modes": "1.7.2",
28
+ "@weasel-js/quantity": "1.7.2",
29
+ "@weasel-js/svg": "1.7.2",
30
+ "@weasel-js/theme": "1.7.2",
31
31
  "react-aria-components": "^1.5.0"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": ">=18",
35
35
  "react-dom": ">=18",
36
- "@weasel-js/core": "1.7.0"
36
+ "@weasel-js/core": "1.7.2"
37
37
  },
38
38
  "author": "orochi235",
39
39
  "homepage": "https://orochi235.github.io/weasel/",
@@ -61,7 +61,7 @@
61
61
  "provenance": true
62
62
  },
63
63
  "devDependencies": {
64
- "@weasel-js/cursor": "1.7.0",
65
- "@weasel-js/geom": "1.7.0"
64
+ "@weasel-js/cursor": "1.7.2",
65
+ "@weasel-js/geom": "1.7.2"
66
66
  }
67
67
  }
@@ -1,57 +0,0 @@
1
- import { n as e, r as t } from "./Tooltip-Clg2mhSt.js";
2
- import { t as n } from "./formatShortcut-DRQrVThu.js";
3
- import { actionItems as r, actionShortcuts as i, buildDepsFromRequires as a, evaluateEnabled as o, useActionsRegistry as s, useOptionalDepRegistry as c } from "@weasel-js/core";
4
- import { jsx as l, jsxs as u } from "react/jsx-runtime";
5
- import { useSyncExternalStore as d } from "react";
6
- import { Focusable as f } from "react-aria-components";
7
- var p = {
8
- bar: "_bar_1x8zd_7",
9
- vertical: "_vertical_1x8zd_18",
10
- button: "_button_1x8zd_22"
11
- }, m = Object.freeze([]), h = () => () => {};
12
- function g(e, t) {
13
- if (t !== void 0) return t;
14
- let n = e.icon;
15
- return typeof n == "function" ? n() : n;
16
- }
17
- function _(e, t) {
18
- let r = t.action.shortcut ?? n(i(t.action, t.params)[0]);
19
- return r ? `${e} (${r})` : e;
20
- }
21
- function v(n) {
22
- let { group: i, orientation: v = "horizontal", icons: y, labels: b, className: x } = n, S = s(), C = c(), w = d(S ? S.subscribe : h, S ? S.list : () => m, S ? S.list : () => m).filter((e) => e.group === i).flatMap(r), T = [
23
- p.bar,
24
- v === "vertical" && p.vertical,
25
- x
26
- ].filter(Boolean).join(" ");
27
- return /* @__PURE__ */ l("div", {
28
- className: T,
29
- role: "toolbar",
30
- "aria-label": `${i} actions`,
31
- children: w.map((n) => {
32
- let r = b?.[n.key] ?? n.label, i = g(n, y?.[n.key]), s = C ? a(n.action, C) : void 0, { enabled: c } = o(n.action, s), d = !c, m = _(r, n);
33
- return /* @__PURE__ */ u(t, {
34
- isDisabled: d,
35
- children: [/* @__PURE__ */ l(f, {
36
- isDisabled: d,
37
- children: /* @__PURE__ */ l("button", {
38
- type: "button",
39
- "data-testid": `action-bar-item-${n.key}`,
40
- "aria-label": r,
41
- "aria-disabled": d || void 0,
42
- disabled: d,
43
- className: p.button,
44
- onClick: () => {
45
- d || S?.trigger(n.action.id, n.params);
46
- },
47
- children: i
48
- })
49
- }), /* @__PURE__ */ l(e, { children: m })]
50
- }, n.key);
51
- })
52
- });
53
- }
54
- //#endregion
55
- export { v as t };
56
-
57
- //# sourceMappingURL=ActionBar-DCq16yFA.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ActionBar-DCq16yFA.js","names":["s","TooltipTrigger","Tooltip","Tooltip$1","TooltipTrigger$1","formatShortcut","ActionBar_module_default","EMPTY_LIST","noopSubscribe","resolveIcon","override","i","item","resolveTitle","shortcut","actionShortcuts","label","ActionBar","props","registry","useActionsRegistry","depReg","useOptionalDepRegistry","items","useSyncExternalStore","a","group","actionItems","cls","orientation","className","labels","icon","icons","deps","buildDepsFromRequires","evaluateEnabled","disabled","enabled","title","Focusable"],"sources":["../../src/components/ActionBar/ActionBar.module.css","../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["/* `<ActionBar>` shares the segmented widget look of the WeaselDraw\n * pathfinder panel — small chrome on the panel surface so a bar of\n * Action buttons reads as a single control. Tokens are theme-driven\n * via `--wzl-*`. Visual parity with `PathfinderPanel.module.css` is\n * intentional; this is the generic version. */\n\n.bar {\n display: flex;\n flex-direction: row;\n gap: 1px;\n background: var(--wzl-surface);\n border: 1px solid var(--wzl-border);\n border-radius: var(--wzl-radius-sm);\n padding: var(--wzl-space-1);\n user-select: none;\n}\n\n.bar.vertical {\n flex-direction: column;\n}\n\n.button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--wzl-tb-height);\n height: var(--wzl-tb-height);\n padding: 0;\n background: transparent;\n border: 0;\n border-radius: var(--wzl-radius-sm);\n color: var(--wzl-fg);\n cursor: default;\n}\n\n.button:hover:not([disabled]) {\n background: var(--wzl-border);\n}\n\n.button:active:not([disabled]) {\n background: color-mix(in srgb, var(--wzl-border) 70%, transparent);\n}\n\n.button[disabled] {\n opacity: 0.4;\n cursor: default;\n}\n\n.button > svg {\n display: block;\n}\n","import { useSyncExternalStore, type ReactNode } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport {\n useActionsRegistry,\n useOptionalDepRegistry,\n evaluateEnabled,\n buildDepsFromRequires,\n actionItems,\n actionShortcuts,\n type Action,\n type ActionItem,\n} from '@weasel-js/core';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport { formatShortcut } from '../ToolPalette/formatShortcut';\nimport s from './ActionBar.module.css';\n\nconst EMPTY_LIST: readonly Action[] = Object.freeze([]);\nconst noopSubscribe = (): (() => void) => () => {};\n\n/** Props for {@link ActionBar}. */\nexport interface ActionBarProps {\n /** Group key — only actions with `action.group === group` are rendered. */\n group: string;\n /** Layout direction. Defaults to `'horizontal'`. */\n orientation?: 'horizontal' | 'vertical';\n /**\n * Per-entry icon overrides, keyed by `ActionItem.key` — the action id, or\n * `id:variant` for one variant of a parametric action. When an entry is provided\n * it replaces the action's own `icon` for this bar only. Mirrors\n * `PathfinderPanelProps.icons` so call sites that ship custom glyph sets\n * can swap them in without re-registering actions.\n */\n icons?: Record<string, ReactNode>;\n /**\n * Per-entry label overrides, keyed like `icons`. Drives both `aria-label`\n * and `title`. When omitted, the entry's own `label` is used.\n */\n labels?: Record<string, string>;\n /** Additional class for the toolbar root. */\n className?: string;\n}\n\nfunction resolveIcon(item: ActionItem, override: ReactNode | undefined): ReactNode {\n if (override !== undefined) return override;\n const i = item.icon;\n if (typeof i === 'function') return i();\n return i;\n}\n\nfunction resolveTitle(label: string, item: ActionItem): string {\n const shortcut = item.action.shortcut ?? formatShortcut(actionShortcuts(item.action, item.params)[0]);\n return shortcut ? `${label} (${shortcut})` : label;\n}\n\n/**\n * Generic group-keyed action toolbar. Reads the parent `ActionsRegistry`,\n * filters to actions whose `group` matches `props.group`, and renders one\n * icon button per match — or per variant, for an action that declares\n * `variants`. Disabled state is derived from each action's\n * `enabled` predicate via `evaluateEnabled` (so the button greys out and\n * swallows clicks while the keybinding — if any — still fires through the\n * registry's keydown listener; that's the registry's contract, not ours).\n *\n * Visual parity with the WeaselDraw `<PathfinderPanel>` is intentional;\n * this is the generic, registry-driven version. No keyboard navigation\n * (roving tabindex) yet — bar consumers today are short flat strips. Add\n * if/when a long bar lands.\n */\nexport function ActionBar(props: ActionBarProps) {\n const { group, orientation = 'horizontal', icons, labels, className } = props;\n const registry = useActionsRegistry();\n const depReg = useOptionalDepRegistry();\n const all = useSyncExternalStore(\n registry ? registry.subscribe : noopSubscribe,\n registry ? registry.list : () => EMPTY_LIST,\n registry ? registry.list : () => EMPTY_LIST,\n );\n const items = all.filter((a) => a.group === group).flatMap(actionItems);\n\n const cls = [s.bar, orientation === 'vertical' && s.vertical, className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={cls} role=\"toolbar\" aria-label={`${group} actions`}>\n {items.map((item) => {\n const label = labels?.[item.key] ?? item.label;\n const icon = resolveIcon(item, icons?.[item.key]);\n // Read at render: `enabled` reflects whatever the deps hold now, so\n // the bar is current as long as its parent re-renders on changes.\n const deps = depReg ? buildDepsFromRequires(item.action, depReg) : undefined;\n const { enabled } = evaluateEnabled(item.action, deps);\n const disabled = !enabled;\n const title = resolveTitle(label, item);\n return (\n <TooltipTrigger key={item.key} isDisabled={disabled}>\n <Focusable isDisabled={disabled}>\n <button\n type=\"button\"\n data-testid={`action-bar-item-${item.key}`}\n aria-label={label}\n aria-disabled={disabled || undefined}\n disabled={disabled}\n className={s.button}\n onClick={() => {\n if (disabled) return;\n // Dispatch through the registry so the enabled() guard runs.\n // If no registry is in scope the click is a no-op — ActionBar\n // is expected to render under an `ActionsProvider`.\n registry?.trigger(item.action.id, item.params);\n }}\n >\n {icon}\n </button>\n </Focusable>\n <Tooltip>{title}</Tooltip>\n </TooltipTrigger>\n );\n })}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;GCgBMO,IAAgC,OAAO,OAAO,CAAC,CAAC,GAChDC,gBAA0C,CAAC;AAyBjD,SAASC,EAAY,GAAkB,GAA4C;CACjF,IAAIC,MAAa,KAAA,GAAW,OAAOA;CACnC,IAAMC,IAAIC,EAAK;CAEf,OADI,OAAOD,KAAM,aAAmBA,EAAE,IAC/BA;AACT;AAEA,SAASE,EAAa,GAAe,GAA0B;CAC7D,IAAMC,IAAWF,EAAK,OAAO,YAAYP,EAAeU,EAAgBH,EAAK,QAAQA,EAAK,MAAM,CAAC,CAAC,EAAE;CACpG,OAAOE,IAAW,GAAGE,EAAM,IAAIF,EAAS,KAAKE;AAC/C;AAgBA,SAAgBC,EAAU,GAAuB;CAC/C,IAAM,EAAE,UAAO,iBAAc,cAAc,UAAO,WAAQ,iBAAcC,GAClEC,IAAWC,EAAmB,GAC9BC,IAASC,EAAuB,GAMhCC,IALMC,EACVL,IAAWA,EAAS,YAAYX,GAChCW,IAAWA,EAAS,aAAaZ,GACjCY,IAAWA,EAAS,aAAaZ,CAErB,CAAA,CAAI,QAAQ,MAAMkB,EAAE,UAAUC,CAAK,CAAC,CAAC,QAAQC,CAAW,GAEhEC,IAAM;EAAC5B,EAAE;EAAK6B,MAAgB,cAAc7B,EAAE;EAAU8B;CAAS,CAAC,CACrE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAWF;EAAK,MAAK;EAAU,cAAY,GAAGF,EAAM;EACtD,UAAAH,EAAM,KAAK,MAAS;GACnB,IAAMP,IAAQe,IAASnB,EAAK,QAAQA,EAAK,OACnCoB,IAAOvB,EAAYG,GAAMqB,IAAQrB,EAAK,IAAI,GAG1CsB,IAAOb,IAASc,EAAsBvB,EAAK,QAAQS,CAAM,IAAI,KAAA,GAC7D,EAAE,eAAYe,EAAgBxB,EAAK,QAAQsB,CAAI,GAC/CG,IAAW,CAACC,GACZC,IAAQ1B,EAAaG,GAAOJ,CAAI;GACtC,OACE,kBAACX,GAAD;IAA+B,YAAYoC;IAA3C,UAAA,CACE,kBAACG,GAAD;KAAW,YAAYH;KACrB,UAAA,kBAAC,UAAD;MACE,MAAK;MACL,eAAa,mBAAmBzB,EAAK;MACrC,cAAYI;MACZ,iBAAeqB,KAAY,KAAA;MACjB;MACV,WAAWrC,EAAE;MACb,eAAe;OACb,AAAIqC,KAIJlB,GAAU,QAAQP,EAAK,OAAO,IAAIA,EAAK,MAAM;MAC/C;MAEC,UAAAoB;KACK,CAAA;IACC,CAAA,GACX,kBAAC9B,GAAD,EAAA,UAAUqC,EAAe,CAAA,CACX;GArBK,GAAA3B,EAAK,GAqBV;EAEpB,CAAC;CACE,CAAA;AAET"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"BandEditor-Dd0egAgE.js","names":["s","Fragment","snapToNearest","Fragment$1","BandEditor_module_default","clamp01","u","linearScale","max","min","value","unit","logScale","lo","hi","warnedNonPositiveMin","isDev","resolveScale","requested","scale","normalizeBands","bands","b","bandBounds","index","seamBounds","clampSeamTo","to","setSeam","next","unitEdges","edges","clampBandShift","isFirst","isLast","shift","moveBandEdges","from","splitBands","at","makeData","mergeBand","i","SEAM_DISPLAY","decimal","untag","band","amount","retagBands","firstTagged","input","source","retag","KEY_STEP","pct","keepData","isTextEntry","target","tag","BandEditor","tagged","props","snap","splitBand","trackRef","useRef","sessionRef","labelId","useId","draft","setDraft","useState","retagged","onInput","onChange","committed","shown","sc","toUnit","v","fromUnit","trackWidth","unitAt","rect","clientX","snapped","altKey","ticks","width","tick","drag","openPointerSession","down","onEnd","onSeamPointerDown","e","base","latest","ev","onSeamKeyDown","delta","onBandPointerDown","selectedIndex","onSelect","startUnit","onBandFocus","className","label","qty","isSelected","renderBand","display"],"sources":["../../src/components/BandEditor/BandEditor.module.css","../../src/components/BandEditor/scale.ts","../../src/components/BandEditor/bands.ts","../../src/components/BandEditor/BandEditor.tsx"],"sourcesContent":[".root {\n position: relative;\n user-select: none;\n -webkit-user-select: none;\n touch-action: none;\n display: flex;\n flex-direction: column;\n gap: var(--wzl-space-1);\n}\n\n.label {\n font: var(--wzl-font-weight-medium) var(--wzl-font-size-sm) / var(--wzl-leading-tight) var(--wzl-font-ui);\n color: var(--wzl-fg-muted);\n}\n\n/* The ruler carries the ticks and is the split affordance: a click anywhere\n * on it divides the band underneath. The band strip below owns selection and\n * body drags, so neither gesture has to guess which the pointer meant. */\n.ruler {\n position: relative;\n height: var(--be-ruler-height, 20px);\n cursor: crosshair;\n}\n\n.tick {\n position: absolute;\n left: var(--be-at);\n bottom: 0;\n width: 1px;\n height: 6px;\n background: var(--wzl-fg-subtle);\n pointer-events: none;\n}\n\n.tickLabel {\n position: absolute;\n bottom: 7px;\n left: 0;\n transform: translateX(-50%);\n font: var(--wzl-font-weight-medium) var(--wzl-font-size-xs) / var(--wzl-leading-tight) var(--wzl-font-mono);\n color: var(--wzl-fg-muted);\n white-space: nowrap;\n}\n\n.bands {\n position: relative;\n height: var(--be-band-height, 34px);\n}\n\n.band {\n position: absolute;\n top: 0;\n bottom: 0;\n left: var(--be-from);\n width: calc(var(--be-to) - var(--be-from));\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n padding: 0 var(--wzl-space-2);\n margin: 0;\n background: var(--wzl-surface-raised);\n border: 1px solid var(--wzl-border);\n border-radius: var(--wzl-radius-sm);\n color: var(--wzl-fg);\n font: var(--wzl-font-weight-medium) var(--wzl-font-size-sm) / var(--wzl-leading-tight) var(--wzl-font-ui);\n cursor: grab;\n}\n\n.band:hover {\n background: var(--wzl-surface-hover);\n}\n\n.band:active {\n cursor: grabbing;\n}\n\n.band:focus-visible {\n outline: 2px solid var(--wzl-accent);\n outline-offset: -2px;\n}\n\n/* First and last bands are pinned to `min` / `max`, so their bodies do not\n * translate — the cursor should not promise otherwise. */\n.band:first-of-type,\n.band:last-of-type {\n cursor: default;\n}\n\n/* Accent mixed toward transparent rather than a flat token, so the tint\n reads over whatever surface the consumer's theme puts behind it. */\n.selected {\n background: color-mix(in srgb, var(--wzl-accent) 22%, transparent);\n border-color: var(--wzl-accent);\n box-shadow: inset 0 0 0 1px var(--wzl-accent);\n color: var(--wzl-fg);\n}\n\n.bandContent {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n pointer-events: none;\n}\n\n/* Where a dragged band or seam started, held until the drag ends. */\n.bandGhost {\n position: absolute;\n top: 0;\n bottom: 0;\n left: var(--be-from);\n width: calc(var(--be-to) - var(--be-from));\n border: 1px dashed var(--wzl-border-strong);\n border-radius: var(--wzl-radius-sm);\n pointer-events: none;\n}\n\n.seamGhost {\n position: absolute;\n left: var(--be-at);\n top: -3px;\n bottom: -3px;\n width: 0;\n border-left: 1px dashed var(--wzl-border-strong);\n pointer-events: none;\n}\n\n/* Wider than the line it draws: a 1px seam is unhittable. */\n.seam {\n position: absolute;\n left: var(--be-at);\n top: -3px;\n bottom: -3px;\n width: 11px;\n margin-left: -5px;\n z-index: 1;\n cursor: ew-resize;\n background: none;\n border: none;\n}\n\n.seam::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 5px;\n width: 1px;\n background: var(--wzl-border-strong);\n}\n\n.seam:hover::before,\n.seam:focus-visible::before {\n background: var(--wzl-accent);\n width: 2px;\n}\n\n.seam:focus-visible {\n outline: 2px solid var(--wzl-accent);\n outline-offset: 0;\n border-radius: var(--wzl-radius-sm);\n}\n","/** Maps a domain value onto its position along the track, and back. */\nexport interface BandScale {\n /** Domain → position in [0,1]. Must be monotonic increasing. */\n toUnit(value: number, min: number, max: number): number;\n /** Inverse of `toUnit`. */\n fromUnit(unit: number, min: number, max: number): number;\n}\n\nexport function clamp01(u: number): number {\n return u < 0 ? 0 : u > 1 ? 1 : u;\n}\n\n/** Even domain steps take even track steps. */\nexport const linearScale: BandScale = {\n toUnit: (value, min, max) => (max === min ? 0 : (value - min) / (max - min)),\n fromUnit: (unit, min, max) => min + unit * (max - min),\n};\n\n/** Even *ratios* take even track steps. Requires `min > 0`. */\nexport const logScale: BandScale = {\n toUnit: (value, min, max) => {\n const lo = Math.log(min);\n const hi = Math.log(max);\n return hi === lo ? 0 : (Math.log(value) - lo) / (hi - lo);\n },\n fromUnit: (unit, min, max) => {\n const lo = Math.log(min);\n return Math.exp(lo + unit * (Math.log(max) - lo));\n },\n};\n\nlet warnedNonPositiveMin = false;\n\nfunction isDev(): boolean {\n return typeof process !== 'undefined' ? process.env.NODE_ENV !== 'production' : true;\n}\n\n/**\n * Resolves the `scale` prop, substituting `linearScale` for a `logScale`\n * that `min` would send to `NaN`.\n */\nexport function resolveScale(\n scale: 'linear' | 'log' | BandScale | undefined,\n min: number,\n): BandScale {\n const requested =\n scale === undefined || scale === 'log'\n ? logScale\n : scale === 'linear'\n ? linearScale\n : scale;\n\n if (requested !== logScale || min > 0) return requested;\n\n if (isDev() && !warnedNonPositiveMin) {\n warnedNonPositiveMin = true;\n console.warn(\n `BandEditor: a log scale needs min > 0, but min is ${min}. Falling back to a linear scale. ` +\n `Pass scale=\"linear\" to silence this.`,\n );\n }\n return linearScale;\n}\n","import type { Quantity } from '@weasel-js/quantity';\nimport type { BandScale } from './scale';\nimport { clamp01 } from './scale';\n\n/** One band. `from` may be a tagged quantity, which keeps its display and\n * unit through every edit: see `BandEditor`. */\nexport interface Band<T, F extends Quantity = number> {\n /** Domain value where this band starts. The first band's is normalized to `min`. */\n from: F;\n data: T;\n}\n\n/**\n * A band list covers `[min, max]` exactly: N bands, N−1 interior seams, no\n * gaps and no overlaps. Seam *k* is `bands[k + 1].from`, and lives between\n * `bands[k].from` and the start of the band after next (or `max`).\n *\n * Every function here preserves that. Each returns the array it was given\n * when the edit would be a no-op, so callers can skip a callback with `===`.\n */\n\n/** Pins the first band's start to `min`; leaves the rest alone. */\nexport function normalizeBands<T>(value: readonly Band<T>[], min: number): Band<T>[] {\n const bands = value.map((b) => ({ ...b }));\n if (bands.length > 0) bands[0].from = min;\n return bands;\n}\n\n/** `[from, to]` of band `index` in domain space. */\nexport function bandBounds<T>(\n bands: readonly Band<T>[],\n index: number,\n min: number,\n max: number,\n): [number, number] {\n const from = index === 0 ? min : bands[index].from;\n const to = index === bands.length - 1 ? max : bands[index + 1].from;\n return [from, to];\n}\n\n/** How far seam `index` can travel before it would cross a neighbour. */\nexport function seamBounds<T>(\n bands: readonly Band<T>[],\n index: number,\n min: number,\n max: number,\n): [number, number] {\n const lo = index === 0 ? min : bands[index].from;\n const hi = index + 2 <= bands.length - 1 ? bands[index + 2].from : max;\n return [lo, hi];\n}\n\n/** Clamps a target position for seam `index` to its neighbours, inclusive. */\nexport function clampSeamTo<T>(\n bands: readonly Band<T>[],\n index: number,\n to: number,\n min: number,\n max: number,\n): number {\n const [lo, hi] = seamBounds(bands, index, min, max);\n return Math.max(lo, Math.min(hi, to));\n}\n\nexport function setSeam<T>(bands: readonly Band<T>[], index: number, to: number): Band<T>[] {\n if (bands[index + 1] === undefined || bands[index + 1].from === to) return bands as Band<T>[];\n const next = bands.map((b) => ({ ...b }));\n next[index + 1].from = to;\n return next;\n}\n\n/** Band edges as track positions: `length + 1` values from 0 to 1. */\nexport function unitEdges<T>(\n bands: readonly Band<T>[],\n scale: BandScale,\n min: number,\n max: number,\n): number[] {\n const edges = bands.map((b, i) => (i === 0 ? 0 : clamp01(scale.toUnit(b.from, min, max))));\n edges.push(1);\n return edges;\n}\n\n/**\n * Largest part of `shift` band `index` can take without pushing a neighbour's\n * far edge past it. Zero for the first and last band, whose outer edges are\n * `min` and `max` and do not move.\n */\nexport function clampBandShift(edges: readonly number[], index: number, shift: number): number {\n const isFirst = index === 0;\n const isLast = index === edges.length - 2;\n if (isFirst || isLast) return 0;\n const lo = edges[index - 1] - edges[index];\n const hi = edges[index + 2] - edges[index + 1];\n return Math.max(lo, Math.min(hi, shift));\n}\n\n/** Moves both edges of band `index`, which is the same as moving two seams. */\nexport function moveBandEdges<T>(\n bands: readonly Band<T>[],\n index: number,\n from: number,\n to: number,\n): Band<T>[] {\n const next = bands.map((b) => ({ ...b }));\n next[index].from = from;\n if (next[index + 1] !== undefined) next[index + 1].from = to;\n return next;\n}\n\n/**\n * Splits the band containing `at` in two, the new band starting there.\n * A position already on a seam or on `min` / `max` splits nothing.\n */\nexport function splitBands<T>(\n bands: readonly Band<T>[],\n at: number,\n min: number,\n max: number,\n makeData: (at: number, from: T) => T,\n): Band<T>[] {\n if (bands.length === 0 || at <= min || at >= max) return bands as Band<T>[];\n let index = -1;\n for (let i = 0; i < bands.length; i++) {\n const [from, to] = bandBounds(bands, i, min, max);\n if (at > from && at < to) {\n index = i;\n break;\n }\n }\n if (index < 0) return bands as Band<T>[];\n const next = bands.map((b) => ({ ...b }));\n next.splice(index + 1, 0, { from: at, data: makeData(at, bands[index].data) });\n return next;\n}\n\n/**\n * Merges band `index` into its left neighbour, which keeps its payload and\n * absorbs the span. The first band has no left neighbour and cannot be\n * merged away — a partition always has at least one part.\n */\nexport function mergeBand<T>(bands: readonly Band<T>[], index: number): Band<T>[] {\n if (index <= 0 || index >= bands.length) return bands as Band<T>[];\n return bands.filter((_, i) => i !== index).map((b) => ({ ...b }));\n}\n","import {\n Fragment,\n useEffect,\n useId,\n useRef,\n useState,\n type CSSProperties,\n type KeyboardEvent as ReactKeyboardEvent,\n type PointerEvent as ReactPointerEvent,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { openPointerSession, type PointerSession } from '@weasel-js/core';\nimport { amount, decimal, qty, retag, type Display, type Quantity } from '@weasel-js/quantity';\nimport s from './BandEditor.module.css';\nimport { SNAP_RADIUS_PX, snapToNearest } from '../../snap';\nimport { clamp01, resolveScale, type BandScale } from './scale';\nimport {\n bandBounds,\n clampBandShift,\n clampSeamTo,\n mergeBand,\n moveBandEdges,\n normalizeBands,\n seamBounds,\n setSeam,\n splitBands,\n unitEdges,\n type Band,\n} from './bands';\n\nexport type { Band, BandScale };\n\nexport interface BandEditorProps<T, F extends Quantity = number> {\n /** Ascending by `from`. `value[0].from` is normalized to `min` on read. A\n * tagged `from` stays tagged through every edit, with its display and unit. */\n value: Band<T, F>[];\n /** Live during a drag — wire for preview, do not write to history. */\n onInput?: (next: Band<T, F>[]) => void;\n /** Committed at gesture end: one call per gesture. */\n onChange: (next: Band<T, F>[]) => void;\n min: number;\n max: number;\n /** Default `'log'`. */\n scale?: 'linear' | 'log' | BandScale;\n /** A tick with no `label` of its own is labeled through `display`, when given. */\n ticks?: { at: number; label?: ReactNode }[];\n /**\n * How a seam's value shows and is spoken — `fraction()` makes a seam at\n * 1/12 announce `1 over 12` rather than `0.08333333333333333`. A tagged\n * `from` uses its own display instead. Default: three decimals.\n */\n display?: Display;\n /** Snap a dragged seam to a tick within ~6px. Default true; `alt` defeats it per-drag. */\n snap?: boolean;\n renderBand?: (band: Band<T, F>, index: number) => ReactNode;\n selectedIndex?: number | null;\n onSelect?: (index: number) => void;\n /** Payload for a band split off an existing one. Default duplicates `from`. */\n splitBand?: (at: number, from: T) => T;\n label?: ReactNode;\n className?: string;\n}\n\n/** A drag under way: the bands as the pointer has them, and which edges it took from where. */\ntype Draft<T> = { bands: Band<T>[]; ghost: { seam: number } | { band: number } };\n\nconst SEAM_DISPLAY = decimal();\n\nfunction untag<T, F extends Quantity>(band: Band<T, F>): Band<T> {\n return typeof band.from === 'number' ? (band as Band<T>) : { from: amount(band.from), data: band.data };\n}\n\n/**\n * `next` with each `from` in the shape the consumer gave it. A band keeps the\n * tag of the band at its index when the count is unchanged; after a split or\n * a merge it takes the tag of the input band carrying the same payload, else\n * the first tagged one — a split band inherits its parent's presentation.\n */\nfunction retagBands<T, F extends Quantity>(input: readonly Band<T, F>[], next: readonly Band<T>[]): Band<T, F>[] {\n const firstTagged = input.find((b) => typeof b.from !== 'number');\n if (!firstTagged) return next as Band<T, F>[];\n return next.map((band, i) => {\n const source =\n (next.length === input.length ? input[i] : input.find((b) => b.data === band.data)) ?? firstTagged;\n return { from: retag(source.from, band.from), data: band.data };\n });\n}\n\n/** One arrow-key step, as a fraction of the track. */\nconst KEY_STEP = 0.01;\n\nfunction pct(unit: number): string {\n return `${clamp01(unit) * 100}%`;\n}\n\nfunction keepData<T>(_at: number, from: T): T {\n return from;\n}\n\nfunction isTextEntry(target: EventTarget | null): boolean {\n if (!(target instanceof HTMLElement)) return false;\n if (target.isContentEditable) return true;\n const tag = target.tagName;\n return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';\n}\n\n/**\n * Divides a numeric axis into contiguous bands and lets you drag the seams\n * between them. Each band carries a payload the consumer supplies and\n * renders through `renderBand`; the control itself knows nothing about what\n * a band means.\n *\n * The axis is always fully covered — N bands, N−1 interior seams, no gaps and\n * no overlaps — so editing is editing a sorted list of seam positions. Seams\n * clamp at their neighbours rather than crossing, which means a drag can\n * never destroy a band: removal is only ever the explicit `x` / `Delete`\n * merge. The first band is doubly exceptional, its left edge pinned to `min`\n * and its body immovable, and it has no left neighbour to merge into.\n *\n * | Gesture | Effect |\n * |---|---|\n * | drag a seam | resize the two bands either side |\n * | drag a band body | move both its seams, preserving its span |\n * | click the ruler | split the band under the pointer |\n * | `x` / `Delete` | merge the selected band into its left neighbour |\n * | click a band | select it |\n * | `←` `→` on a focused seam | move it by one step; `shift` for ten |\n *\n * `scale` defaults to `'log'`, because the interesting part of a width axis\n * is usually its narrow end.\n */\nexport function BandEditor<T, F extends Quantity = number>(props: BandEditorProps<T, F>): ReactElement {\n const {\n value: tagged,\n display = SEAM_DISPLAY,\n min,\n max,\n scale,\n ticks,\n renderBand,\n selectedIndex,\n onSelect,\n label,\n className,\n } = props;\n const snap = props.snap ?? true;\n const splitBand = props.splitBand ?? keepData;\n\n const trackRef = useRef<HTMLDivElement | null>(null);\n const sessionRef = useRef<PointerSession | null>(null);\n useEffect(() => () => { sessionRef.current?.cancel(); }, []);\n const labelId = useId();\n const [draft, setDraft] = useState<Draft<T> | null>(null);\n const value = tagged.map(untag);\n const retagged = (next: Band<T>[]): Band<T, F>[] => retagBands(tagged, next);\n const onInput = props.onInput && ((next: Band<T>[]) => props.onInput?.(retagged(next)));\n const onChange = (next: Band<T>[]) => props.onChange(retagged(next));\n const committed = normalizeBands(value, min);\n // Drawn from the drag while one is under way, so the control moves with the pointer whether or not the consumer\n // wires `onInput`. Every edit reads `committed`.\n const bands = draft?.bands ?? committed;\n const shown = retagged(bands);\n const sc = resolveScale(scale, min);\n const toUnit = (v: number): number => clamp01(sc.toUnit(v, min, max));\n const fromUnit = (u: number): number => sc.fromUnit(clamp01(u), min, max);\n\n const trackWidth = (): number => trackRef.current?.getBoundingClientRect().width ?? 0;\n\n const unitAt = (clientX: number): number => {\n const rect = trackRef.current?.getBoundingClientRect();\n if (!rect || rect.width === 0) return 0;\n return clamp01((clientX - rect.left) / rect.width);\n };\n\n const snapped = (unit: number, altKey: boolean): number => {\n if (!snap || altKey || !ticks || ticks.length === 0) return unit;\n const width = trackWidth();\n if (width === 0) return unit;\n return snapToNearest(unit, ticks.map((tick) => toUnit(tick.at)), SNAP_RADIUS_PX / width);\n };\n\n // No pointer capture: a band body is a `<button>` whose content the consumer\n // renders, and capture would retarget pointerup and kill the click on it.\n // A drag that ends without a release commits nothing.\n const drag = (\n down: ReactPointerEvent<HTMLElement>,\n onMove: (ev: PointerEvent) => void,\n onEnd: () => void,\n ): void => {\n sessionRef.current?.cancel();\n sessionRef.current = openPointerSession(down.currentTarget, down, {\n onMove,\n onEnd: () => { sessionRef.current = null; setDraft(null); onEnd(); },\n onCancel: () => { sessionRef.current = null; setDraft(null); },\n }, { capture: false });\n };\n\n const onSeamPointerDown = (index: number) => (e: ReactPointerEvent<HTMLDivElement>): void => {\n if (typeof e.button === 'number' && e.button > 0) return;\n e.preventDefault();\n e.stopPropagation();\n const base = committed;\n let latest: Band<T>[] | null = null;\n drag(\n e,\n (ev) => {\n const to = clampSeamTo(base, index, fromUnit(snapped(unitAt(ev.clientX), ev.altKey)), min, max);\n latest = setSeam(base, index, to);\n setDraft({ bands: latest, ghost: { seam: index } });\n onInput?.(latest);\n },\n () => {\n if (latest) onChange(latest);\n },\n );\n };\n\n const onSeamKeyDown = (index: number) => (e: ReactKeyboardEvent<HTMLDivElement>): void => {\n const [lo, hi] = seamBounds(committed, index, min, max);\n let target: number;\n if (e.key === 'Home') target = lo;\n else if (e.key === 'End') target = hi;\n else {\n let delta = 0;\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = e.shiftKey ? KEY_STEP * 10 : KEY_STEP;\n else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = e.shiftKey ? -KEY_STEP * 10 : -KEY_STEP;\n else return;\n target = fromUnit(toUnit(committed[index + 1].from) + delta);\n }\n e.preventDefault();\n const next = setSeam(committed, index, clampSeamTo(committed, index, target, min, max));\n if (next !== committed) onChange(next);\n };\n\n const onBandPointerDown = (index: number) => (e: ReactPointerEvent<HTMLButtonElement>): void => {\n if (typeof e.button === 'number' && e.button > 0) return;\n if (index !== selectedIndex) onSelect?.(index);\n // The first and last bands' outer edges are `min` and `max`, which do not\n // move, so their bodies have nothing to translate.\n if (index === 0 || index === committed.length - 1) return;\n const base = committed;\n const edges = unitEdges(base, sc, min, max);\n const startUnit = unitAt(e.clientX);\n let latest: Band<T>[] | null = null;\n drag(\n e,\n (ev) => {\n const shift = clampBandShift(edges, index, unitAt(ev.clientX) - startUnit);\n latest = moveBandEdges(\n base,\n index,\n fromUnit(edges[index] + shift),\n fromUnit(edges[index + 1] + shift),\n );\n setDraft({ bands: latest, ghost: { band: index } });\n onInput?.(latest);\n },\n () => {\n if (latest) onChange(latest);\n },\n );\n };\n\n const onBandFocus = (index: number) => (): void => {\n if (index !== selectedIndex) onSelect?.(index);\n };\n\n const onTrackPointerDown = (e: ReactPointerEvent<HTMLDivElement>): void => {\n if (typeof e.button === 'number' && e.button > 0) return;\n e.preventDefault();\n const next = splitBands(committed, fromUnit(unitAt(e.clientX)), min, max, splitBand);\n if (next !== committed) onChange(next);\n };\n\n const onRootKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>): void => {\n if (e.key !== 'x' && e.key !== 'Delete') return;\n // `x` is a bare letter and Cmd/Ctrl+X is cut: neither may be swallowed\n // when the keystroke belongs to something a consumer put in a band.\n if (e.metaKey || e.ctrlKey || e.altKey) return;\n if (isTextEntry(e.target)) return;\n if (selectedIndex === null || selectedIndex === undefined) return;\n const next = mergeBand(committed, selectedIndex);\n if (next === committed) return;\n e.preventDefault();\n onChange(next);\n onSelect?.(selectedIndex - 1);\n };\n\n return (\n <div\n className={[s.root, className].filter(Boolean).join(' ')}\n role=\"group\"\n aria-label={typeof label === 'string' ? label : undefined}\n aria-labelledby={label !== undefined && typeof label !== 'string' ? labelId : undefined}\n onKeyDown={onRootKeyDown}\n >\n {label !== undefined && <div id={labelId} className={s.label}>{label}</div>}\n <div className={s.ruler} ref={trackRef} data-band-ruler=\"\" onPointerDown={onTrackPointerDown}>\n {ticks?.map((tick, i) => (\n <span\n key={i}\n className={s.tick}\n data-tick-at={tick.at}\n style={{ '--be-at': pct(toUnit(tick.at)) } as CSSProperties}\n >\n {(tick.label !== undefined || props.display !== undefined) && (\n <span className={s.tickLabel}>{tick.label ?? qty(tick.at, props.display).text}</span>\n )}\n </span>\n ))}\n </div>\n <div className={s.bands}>\n {bands.map((_, i) => {\n const [from, to] = bandBounds(bands, i, min, max);\n const isSelected = selectedIndex === i;\n return (\n <Fragment key={i}>\n <button\n type=\"button\"\n className={[s.band, isSelected ? s.selected : null].filter(Boolean).join(' ')}\n style={{ '--be-from': pct(toUnit(from)), '--be-to': pct(toUnit(to)) } as CSSProperties}\n aria-label={`Band ${i + 1}`}\n aria-pressed={isSelected}\n data-band-index={i}\n onPointerDown={onBandPointerDown(i)}\n onFocus={onBandFocus(i)}\n >\n <span className={s.bandContent}>{renderBand?.(shown[i]!, i)}</span>\n </button>\n {i < bands.length - 1 && (\n <div\n role=\"slider\"\n tabIndex={0}\n className={s.seam}\n style={{ '--be-at': pct(toUnit(bands[i + 1].from)) } as CSSProperties}\n aria-label={`Seam ${i + 1}`}\n aria-orientation=\"horizontal\"\n aria-valuemin={seamBounds(bands, i, min, max)[0]}\n aria-valuemax={seamBounds(bands, i, min, max)[1]}\n aria-valuenow={bands[i + 1].from}\n aria-valuetext={qty(shown[i + 1]!.from, display).spoken}\n data-seam-index={i}\n onPointerDown={onSeamPointerDown(i)}\n onKeyDown={onSeamKeyDown(i)}\n />\n )}\n </Fragment>\n );\n })}\n {draft && 'band' in draft.ghost && (\n <div\n className={s.bandGhost}\n data-band-ghost=\"\"\n aria-hidden=\"true\"\n style={{\n '--be-from': pct(toUnit(bandBounds(committed, draft.ghost.band, min, max)[0])),\n '--be-to': pct(toUnit(bandBounds(committed, draft.ghost.band, min, max)[1])),\n } as CSSProperties}\n />\n )}\n {draft && 'seam' in draft.ghost && (\n <div\n className={s.seamGhost}\n data-band-ghost=\"\"\n aria-hidden=\"true\"\n style={{ '--be-at': pct(toUnit(committed[draft.ghost.seam + 1].from)) } as CSSProperties}\n />\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
@@ -1,116 +0,0 @@
1
- import { r as e } from "./portalHost-yTOVuCej.js";
2
- import { t } from "./stance-BFQpS_fL.js";
3
- import { t as n } from "./CloseButton-C2J7wVfo.js";
4
- import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
5
- import { useCallback as o, useEffect as s, useId as c, useRef as l } from "react";
6
- import { Dialog as u, DialogTrigger as d, Heading as f, OverlayArrow as p, Popover as m } from "react-aria-components";
7
- import { createPortal as h } from "react-dom";
8
- var g = {
9
- anchor: "_anchor_w6dfg_1",
10
- popover: "_popover_w6dfg_6",
11
- arrow: "_arrow_w6dfg_204",
12
- dialog: "_dialog_w6dfg_223",
13
- header: "_header_w6dfg_230",
14
- title: "_title_w6dfg_237",
15
- body: "_body_w6dfg_248",
16
- footer: "_footer_w6dfg_255"
17
- };
18
- //#endregion
19
- //#region src/components/Callout/Callout.tsx
20
- function _(d) {
21
- let { children: _, className: v, title: y, footer: b, stance: x = "notice", tone: S, modal: C = !1, showCloseButton: w, onDismiss: T, triggerRef: E, anchorRect: D, placement: O = "top", offset: k = 12, maxHeight: A = 400, onOpenChange: j, shouldCloseOnInteractOutside: M, "aria-label": N, "aria-labelledby": P, portalContainer: F, ...I } = d, L = l(null), R = t({
22
- stance: x,
23
- tone: S
24
- }), { anchor: z, portalProps: B } = e(F), V = w ?? !C, H = l(T);
25
- H.current = T;
26
- let U = l((e) => {
27
- e.key === "Escape" && H.current?.();
28
- }), W = l(null), G = o((e) => {
29
- W.current?.removeEventListener("keydown", U.current), W.current = e, e?.addEventListener("keydown", U.current);
30
- }, []), K = c(), q = D !== void 0;
31
- s(() => {
32
- q && typeof window < "u" && window.dispatchEvent(new Event("resize"));
33
- }, [
34
- q,
35
- D?.x,
36
- D?.y,
37
- D?.width,
38
- D?.height
39
- ]);
40
- let J = C && y !== void 0 ? K : P, Y = C ? N : void 0;
41
- return /* @__PURE__ */ a(r, { children: [
42
- z,
43
- D !== void 0 && h(/* @__PURE__ */ i("span", {
44
- ref: L,
45
- "data-callout-anchor": "",
46
- className: g.anchor,
47
- "aria-hidden": "true",
48
- style: {
49
- left: D.x,
50
- top: D.y,
51
- width: D.width,
52
- height: D.height
53
- }
54
- }), document.body),
55
- /* @__PURE__ */ a(m, {
56
- ...I,
57
- triggerRef: D === void 0 ? E : L,
58
- isNonModal: !C,
59
- placement: O,
60
- offset: k,
61
- maxHeight: A,
62
- onOpenChange: j,
63
- shouldCloseOnInteractOutside: M ?? (C ? () => !1 : void 0),
64
- "aria-label": Y,
65
- "aria-labelledby": J,
66
- className: [g.popover, v].filter(Boolean).join(" "),
67
- ...R,
68
- "data-weasel-overlay": "",
69
- ...B,
70
- children: [/* @__PURE__ */ i(p, {
71
- className: g.arrow,
72
- children: /* @__PURE__ */ i("svg", {
73
- width: 12,
74
- height: 12,
75
- viewBox: "0 0 12 12",
76
- "aria-hidden": "true",
77
- children: /* @__PURE__ */ i("path", { d: "M0 0 L6 6 L12 0" })
78
- })
79
- }), /* @__PURE__ */ i(u, {
80
- role: C ? "alertdialog" : "dialog",
81
- className: g.dialog,
82
- "aria-label": N,
83
- "aria-labelledby": P,
84
- ref: G,
85
- children: ({ close: e }) => /* @__PURE__ */ a(r, { children: [
86
- (y !== void 0 || V) && /* @__PURE__ */ a("header", {
87
- className: g.header,
88
- children: [y !== void 0 && /* @__PURE__ */ i(f, {
89
- id: K,
90
- slot: "title",
91
- className: g.title,
92
- children: y
93
- }), V && /* @__PURE__ */ i(n, {
94
- ariaLabel: "Close callout",
95
- onClick: () => {
96
- e(), j?.(!1), T?.();
97
- }
98
- })]
99
- }),
100
- /* @__PURE__ */ i("div", {
101
- className: g.body,
102
- children: _
103
- }),
104
- b !== void 0 && /* @__PURE__ */ i("footer", {
105
- className: g.footer,
106
- children: b
107
- })
108
- ] })
109
- })]
110
- })
111
- ] });
112
- }
113
- //#endregion
114
- export { d as n, _ as t };
115
-
116
- //# sourceMappingURL=Callout-ndW5_Bqx.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Callout-ndW5_Bqx.js","names":["_Fragment","s","RACPopover","RACDialog","useOverlayPortal","CloseButton","DialogTrigger$1","Callout_module_default","Callout","ariaLabel","ariaLabelledby","rest","props","anchorRef","useRef","stanced","useStance","portalAnchor","portalContainer","showClose","showCloseButton","modal","onDismissRef","onDismiss","escapeListener","listeningTo","dialogRef","useCallback","node","titleId","useId","hasAnchorRect","anchorRect","popoverAriaLabelledby","title","popoverAriaLabel","Fragment","createPortal","Popover","triggerRef","shouldCloseOnInteractOutside","className","portalProps","OverlayArrow","Dialog","Heading","close","onOpenChange","footer"],"sources":["../../src/components/Callout/Callout.module.css","../../src/components/Callout/Callout.tsx"],"sourcesContent":[".anchor {\n position: fixed;\n pointer-events: none;\n}\n\n.popover {\n /* Above Dialog overlay (1000) and ToastRegion (1100) — RAC sets no z-index. */\n z-index: 1200;\n background: var(--_s-fill);\n border: var(--_s-border-width) var(--_s-border-style) var(--_s-border-color);\n border-radius: var(--_s-radius);\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);\n color: var(--wzl-fg);\n font-family: var(--wzl-font-ui);\n max-width: 320px;\n transition: opacity var(--wzl-motion-fast);\n}\n\n.popover[data-entering],\n.popover[data-exiting] {\n opacity: 0;\n}\n\n/* BEGIN GENERATED stance rules: callout — `npm run gen:stances`, do not edit. */\n\n.popover {\n --wzl-tone: initial;\n}\n\n.popover {\n --_s-surface: var(--wzl-surface);\n --_s-border-color: var(--wzl-accent-strong);\n --_s-border-style: solid;\n --_s-border-width: 1px;\n --_s-radius: var(--wzl-radius-md);\n --_s-tone-mix: var(--wzl-panel-tone-mix);\n --_s-tone: var(--wzl-tone, var(--_s-surface));\n --_s-accent: var(--wzl-tone);\n --_s-title-font: var(--wzl-font-ui);\n --_s-title-weight: var(--wzl-font-weight-bold);\n --_s-title-size: var(--wzl-font-size);\n --_s-title-case: none;\n --_s-title-tracking: normal;\n --_s-title-color: var(--wzl-fg);\n}\n\n.popover[data-stance='scope'] {\n --_s-surface: var(--wzl-stance-scope-surface, var(--wzl-surface));\n --_s-border-color: var(--wzl-stance-scope-border-color, var(--wzl-accent-strong));\n --_s-border-style: var(--wzl-stance-scope-border-style, solid);\n --_s-border-width: var(--wzl-stance-scope-border-width, 1px);\n --_s-radius: var(--wzl-stance-scope-radius, var(--wzl-radius-md));\n --_s-tone-mix: var(--wzl-stance-scope-tone-mix, var(--wzl-panel-tone-mix));\n --_s-tone: var(--wzl-tone, var(--wzl-stance-scope-tone, var(--_s-surface)));\n --_s-accent: var(--wzl-stance-scope-accent, var(--wzl-tone));\n --_s-title-font: var(--wzl-stance-scope-title-font, var(--wzl-font-ui));\n --_s-title-weight: var(--wzl-stance-scope-title-weight, var(--wzl-font-weight-bold));\n --_s-title-size: var(--wzl-stance-scope-title-size, var(--wzl-font-size));\n --_s-title-case: var(--wzl-stance-scope-title-case, none);\n --_s-title-tracking: var(--wzl-stance-scope-title-tracking, normal);\n --_s-title-color: var(--wzl-stance-scope-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='aside'] {\n --_s-surface: var(--wzl-stance-aside-surface, var(--wzl-surface));\n --_s-border-color: var(--wzl-stance-aside-border-color, var(--wzl-accent-strong));\n --_s-border-style: var(--wzl-stance-aside-border-style, solid);\n --_s-border-width: var(--wzl-stance-aside-border-width, 1px);\n --_s-radius: var(--wzl-stance-aside-radius, var(--wzl-radius-md));\n --_s-tone-mix: var(--wzl-stance-aside-tone-mix, var(--wzl-panel-tone-mix));\n --_s-tone: var(--wzl-tone, var(--wzl-stance-aside-tone, var(--_s-surface)));\n --_s-accent: var(--wzl-stance-aside-accent, var(--wzl-tone));\n --_s-title-font: var(--wzl-stance-aside-title-font, var(--wzl-font-ui));\n --_s-title-weight: var(--wzl-stance-aside-title-weight, var(--wzl-font-weight-bold));\n --_s-title-size: var(--wzl-stance-aside-title-size, var(--wzl-font-size));\n --_s-title-case: var(--wzl-stance-aside-title-case, none);\n --_s-title-tracking: var(--wzl-stance-aside-title-tracking, normal);\n --_s-title-color: var(--wzl-stance-aside-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='advanced'] {\n --_s-surface: var(--wzl-stance-advanced-surface, var(--wzl-surface));\n --_s-border-color: var(--wzl-stance-advanced-border-color, var(--wzl-accent-strong));\n --_s-border-style: var(--wzl-stance-advanced-border-style, solid);\n --_s-border-width: var(--wzl-stance-advanced-border-width, 1px);\n --_s-radius: var(--wzl-stance-advanced-radius, var(--wzl-radius-md));\n --_s-tone-mix: var(--wzl-stance-advanced-tone-mix, var(--wzl-panel-tone-mix));\n --_s-tone: var(--wzl-tone, var(--wzl-stance-advanced-tone, var(--_s-surface)));\n --_s-accent: var(--wzl-stance-advanced-accent, var(--wzl-tone));\n --_s-title-font: var(--wzl-stance-advanced-title-font, var(--wzl-font-ui));\n --_s-title-weight: var(--wzl-stance-advanced-title-weight, var(--wzl-font-weight-bold));\n --_s-title-size: var(--wzl-stance-advanced-title-size, var(--wzl-font-size));\n --_s-title-case: var(--wzl-stance-advanced-title-case, none);\n --_s-title-tracking: var(--wzl-stance-advanced-title-tracking, normal);\n --_s-title-color: var(--wzl-stance-advanced-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='debug'] {\n --_s-surface: var(--wzl-stance-debug-surface, var(--wzl-surface));\n --_s-border-color: var(--wzl-stance-debug-border-color, var(--wzl-accent-strong));\n --_s-border-style: var(--wzl-stance-debug-border-style, solid);\n --_s-border-width: var(--wzl-stance-debug-border-width, 1px);\n --_s-radius: var(--wzl-stance-debug-radius, var(--wzl-radius-md));\n --_s-tone-mix: var(--wzl-stance-debug-tone-mix, var(--wzl-panel-tone-mix));\n --_s-tone: var(--wzl-tone, var(--wzl-stance-debug-tone, var(--_s-surface)));\n --_s-accent: var(--wzl-stance-debug-accent, var(--wzl-tone));\n --_s-title-font: var(--wzl-stance-debug-title-font, var(--wzl-font-ui));\n --_s-title-weight: var(--wzl-stance-debug-title-weight, var(--wzl-font-weight-bold));\n --_s-title-size: var(--wzl-stance-debug-title-size, var(--wzl-font-size));\n --_s-title-case: var(--wzl-stance-debug-title-case, none);\n --_s-title-tracking: var(--wzl-stance-debug-title-tracking, normal);\n --_s-title-color: var(--wzl-stance-debug-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='danger'] {\n --_s-surface: var(--wzl-stance-danger-surface, var(--wzl-surface));\n --_s-border-color: var(--wzl-stance-danger-border-color, var(--wzl-accent-strong));\n --_s-border-style: var(--wzl-stance-danger-border-style, solid);\n --_s-border-width: var(--wzl-stance-danger-border-width, 1px);\n --_s-radius: var(--wzl-stance-danger-radius, var(--wzl-radius-md));\n --_s-tone-mix: var(--wzl-stance-danger-tone-mix, var(--wzl-panel-tone-mix));\n --_s-tone: var(--wzl-tone, var(--wzl-stance-danger-tone, var(--_s-surface)));\n --_s-accent: var(--wzl-stance-danger-accent, var(--wzl-tone));\n --_s-title-font: var(--wzl-stance-danger-title-font, var(--wzl-font-ui));\n --_s-title-weight: var(--wzl-stance-danger-title-weight, var(--wzl-font-weight-bold));\n --_s-title-size: var(--wzl-stance-danger-title-size, var(--wzl-font-size));\n --_s-title-case: var(--wzl-stance-danger-title-case, none);\n --_s-title-tracking: var(--wzl-stance-danger-title-tracking, normal);\n --_s-title-color: var(--wzl-stance-danger-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='notice'] {\n --_s-surface: var(--wzl-stance-notice-surface, var(--wzl-surface));\n --_s-border-color: var(--wzl-stance-notice-border-color, var(--wzl-accent-strong));\n --_s-border-style: var(--wzl-stance-notice-border-style, solid);\n --_s-border-width: var(--wzl-stance-notice-border-width, 1px);\n --_s-radius: var(--wzl-stance-notice-radius, var(--wzl-radius-md));\n --_s-tone-mix: var(--wzl-stance-notice-tone-mix, var(--wzl-panel-tone-mix));\n --_s-tone: var(--wzl-tone, var(--wzl-stance-notice-tone, var(--_s-surface)));\n --_s-accent: var(--wzl-stance-notice-accent, var(--wzl-tone));\n --_s-title-font: var(--wzl-stance-notice-title-font, var(--wzl-font-ui));\n --_s-title-weight: var(--wzl-stance-notice-title-weight, var(--wzl-font-weight-bold));\n --_s-title-size: var(--wzl-stance-notice-title-size, var(--wzl-font-size));\n --_s-title-case: var(--wzl-stance-notice-title-case, none);\n --_s-title-tracking: var(--wzl-stance-notice-title-tracking, normal);\n --_s-title-color: var(--wzl-stance-notice-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='important'] {\n --_s-surface: var(--wzl-stance-important-surface, var(--wzl-surface));\n --_s-border-color: var(--wzl-stance-important-border-color, var(--wzl-accent-strong));\n --_s-border-style: var(--wzl-stance-important-border-style, solid);\n --_s-border-width: var(--wzl-stance-important-border-width, 1px);\n --_s-radius: var(--wzl-stance-important-radius, var(--wzl-radius-md));\n --_s-tone-mix: var(--wzl-stance-important-tone-mix, var(--wzl-panel-tone-mix));\n --_s-tone: var(--wzl-tone, var(--wzl-stance-important-tone, var(--_s-surface)));\n --_s-accent: var(--wzl-stance-important-accent, var(--wzl-tone));\n --_s-title-font: var(--wzl-stance-important-title-font, var(--wzl-font-ui));\n --_s-title-weight: var(--wzl-stance-important-title-weight, var(--wzl-font-weight-bold));\n --_s-title-size: var(--wzl-stance-important-title-size, var(--wzl-font-size));\n --_s-title-case: var(--wzl-stance-important-title-case, none);\n --_s-title-tracking: var(--wzl-stance-important-title-tracking, normal);\n --_s-title-color: var(--wzl-stance-important-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='preview'] {\n --_s-surface: var(--wzl-stance-preview-surface, var(--wzl-surface));\n --_s-border-color: var(--wzl-stance-preview-border-color, var(--wzl-accent-strong));\n --_s-border-style: var(--wzl-stance-preview-border-style, solid);\n --_s-border-width: var(--wzl-stance-preview-border-width, 1px);\n --_s-radius: var(--wzl-stance-preview-radius, var(--wzl-radius-md));\n --_s-tone-mix: var(--wzl-stance-preview-tone-mix, var(--wzl-panel-tone-mix));\n --_s-tone: var(--wzl-tone, var(--wzl-stance-preview-tone, var(--_s-surface)));\n --_s-accent: var(--wzl-stance-preview-accent, var(--wzl-tone));\n --_s-title-font: var(--wzl-stance-preview-title-font, var(--wzl-font-ui));\n --_s-title-weight: var(--wzl-stance-preview-title-weight, var(--wzl-font-weight-bold));\n --_s-title-size: var(--wzl-stance-preview-title-size, var(--wzl-font-size));\n --_s-title-case: var(--wzl-stance-preview-title-case, none);\n --_s-title-tracking: var(--wzl-stance-preview-title-tracking, normal);\n --_s-title-color: var(--wzl-stance-preview-title-color, var(--wzl-fg));\n}\n\n.popover {\n --_s-fill: var(--_s-surface);\n}\n\n.popover[data-tone],\n.popover[data-stance] {\n --_s-fill: color-mix(in oklab, var(--_s-tone) var(--_s-tone-mix), var(--_s-surface));\n}\n\n.popover[data-tone] {\n --wzl-accent: var(--_s-accent);\n --wzl-accent-base: var(--_s-accent);\n --wzl-accent-strong: color-mix(in oklab, var(--_s-accent) 70%, var(--wzl-fg));\n --wzl-accent-soft: color-mix(in oklab, var(--_s-accent) 45%, var(--wzl-surface));\n --wzl-accent-hover: var(--wzl-accent-strong);\n --wzl-accent-fg: var(--wzl-accent-strong);\n --wzl-focus-ring: var(--wzl-accent-strong);\n}\n\n/* END GENERATED stance rules: callout */\n\n.arrow svg {\n display: block;\n fill: var(--_s-fill);\n stroke: var(--_s-border-color);\n stroke-width: 1;\n}\n\n.arrow[data-placement='bottom'] svg {\n transform: rotate(180deg);\n}\n\n.arrow[data-placement='left'] svg {\n transform: rotate(-90deg);\n}\n\n.arrow[data-placement='right'] svg {\n transform: rotate(90deg);\n}\n\n.dialog {\n outline: none;\n max-height: inherit;\n display: flex;\n flex-direction: column;\n}\n\n.header {\n display: flex;\n align-items: center;\n gap: var(--wzl-space-4);\n padding: var(--wzl-space-5) var(--wzl-space-6) 0;\n}\n\n.title {\n margin: 0;\n flex: 1;\n font-family: var(--_s-title-font);\n font-size: var(--_s-title-size);\n font-weight: var(--_s-title-weight);\n text-transform: var(--_s-title-case);\n letter-spacing: var(--_s-title-tracking);\n color: var(--_s-title-color);\n}\n\n.body {\n padding: var(--wzl-space-4) var(--wzl-space-6) var(--wzl-space-5);\n font-size: var(--wzl-font-size);\n line-height: 1.4;\n overflow-y: auto;\n}\n\n.footer {\n display: flex;\n justify-content: flex-end;\n gap: var(--wzl-space-4);\n padding: 0 var(--wzl-space-6) var(--wzl-space-5);\n}\n","import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n DialogTrigger,\n Popover as RACPopover,\n OverlayArrow,\n Dialog as RACDialog,\n Heading,\n type PopoverProps as RACPopoverProps,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps, type WithoutPortalTarget } from '../../overlays/portalHost';\nimport { CloseButton } from '../CloseButton';\nimport { type StanceProps, useStance } from '../stance';\nimport s from './Callout.module.css';\n\n/**\n * Composition wrapper for press-to-open callouts:\n * `<CalloutTrigger><Pressable>…</Pressable><Callout>…</Callout></CalloutTrigger>`.\n * Re-exported RAC DialogTrigger — non-RAC trigger elements must be wrapped\n * in `<Pressable>` from react-aria-components.\n * In composed mode, put `defaultOpen` on `CalloutTrigger`, not `Callout` —\n * RAC detaches to local open state on the trigger, not the popover.\n */\nexport { DialogTrigger as CalloutTrigger };\n\n/** Props for {@link Callout}, on top of React Aria's `Popover` props. */\nexport type CalloutProps = Omit<\n WithoutPortalTarget<RACPopoverProps>,\n 'children' | 'className' | 'isNonModal' | 'triggerRef'\n> &\n OverlayPortalProps &\n StanceProps & {\n children?: ReactNode;\n className?: string;\n /** Optional heading rendered above the body. */\n title?: ReactNode;\n /** Footer slot — typically action buttons. */\n footer?: ReactNode;\n /**\n * `true` — blocks interaction with the rest of the app until dismissed;\n * inner dialog is `role=\"alertdialog\"`. `false` (default) — non-blocking:\n * the app stays interactive; Esc / outside click / close button dismiss.\n */\n modal?: boolean;\n /**\n * Show the close button. Defaults to `!modal`. In programmatic\n * `triggerRef`/`anchorRect` modes the close button needs controlled open\n * (`isOpen` + `onOpenChange`); with only `defaultOpen` it has no open-state\n * setter to call and cannot close.\n */\n showCloseButton?: boolean;\n /**\n * The user asked for this callout to go away — the close button or Escape.\n *\n * Distinct from `onOpenChange`, which a non-modal popover *also* fires when\n * interaction or focus merely leaves it. On a canvas that's every click on\n * the artwork, so a consumer that pins `isOpen` and treats `onOpenChange`\n * as dismissal retires messages nobody read. Use this instead: it fires\n * only on a deliberate act, and never on incidental focus loss.\n */\n onDismiss?: () => void;\n /** Anchor to an arbitrary element (programmatic use, with `isOpen`). */\n triggerRef?: RefObject<Element | null>;\n /**\n * Anchor to a client-coordinate rect — e.g. a scene node's on-screen box.\n * The callout re-anchors whenever this rect changes, so a consumer that\n * recomputes it on pan, zoom, or scene edits keeps the arrow on its target.\n * Takes precedence over `triggerRef`.\n */\n anchorRect?: { x: number; y: number; width: number; height: number };\n };\n\n/**\n * Anchored callout with an arrow pointing at its source — a trigger\n * element, an arbitrary `triggerRef`, or a client-space `anchorRect`.\n * Wraps React Aria Popover + Dialog; positioning, collision flipping,\n * dismissal, and focus behavior come from the underlying primitives.\n */\nexport function Callout(props: CalloutProps) {\n const {\n children,\n className,\n title,\n footer,\n stance = 'notice',\n tone,\n modal = false,\n showCloseButton,\n onDismiss,\n triggerRef,\n anchorRect,\n placement = 'top',\n offset = 12,\n maxHeight = 400,\n onOpenChange,\n shouldCloseOnInteractOutside,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n portalContainer,\n ...rest\n } = props;\n const anchorRef = useRef<HTMLSpanElement>(null);\n const stanced = useStance({ stance, tone });\n const { anchor: portalAnchor, portalProps } = useOverlayPortal(portalContainer);\n const showClose = showCloseButton ?? !modal;\n // Escape is a dismissal like the close button is. It can't ride on a React `onKeyDown`:\n // RAC's Dialog runs its props through filterDOMProps, which drops handlers\n // it doesn't know, so the listener goes on the section itself. RAC's own\n // Escape handling is untouched — this only adds the signal.\n const onDismissRef = useRef(onDismiss);\n onDismissRef.current = onDismiss;\n const escapeListener = useRef((e: KeyboardEvent) => {\n if (e.key === 'Escape') onDismissRef.current?.();\n });\n const listeningTo = useRef<HTMLElement | null>(null);\n const dialogRef = useCallback((node: HTMLElement | null) => {\n listeningTo.current?.removeEventListener('keydown', escapeListener.current);\n listeningTo.current = node;\n node?.addEventListener('keydown', escapeListener.current);\n }, []);\n const titleId = useId();\n // RAC positions on open and recomputes on scroll, resize, and a\n // ResizeObserver on the anchor — none of which fire when `anchorRect` is\n // merely *translated*, as it is when a consumer tracks a scene node across a\n // pan. (Zoom happens to work, since scaling also changes the anchor's size.)\n // Nudging RAC's own resize listener is the supported way to make it\n // recompute; there's no public updatePosition on Popover.\n const hasAnchorRect = anchorRect !== undefined;\n useEffect(() => {\n if (!hasAnchorRect || typeof window === 'undefined') return;\n window.dispatchEvent(new Event('resize'));\n }, [hasAnchorRect, anchorRect?.x, anchorRect?.y, anchorRect?.width, anchorRect?.height]);\n // RAC's popover role-heuristic misses alertdialog; label the outer role\n // it stamps. Upstream: react-spectrum Popover.mjs querySelector('[role=dialog]').\n const popoverAriaLabelledby =\n modal && title !== undefined ? titleId : ariaLabelledby;\n const popoverAriaLabel = modal ? ariaLabel : undefined;\n return (\n <>\n {portalAnchor}\n {/* Harmless while closed — RAC reads the ref only when the popover is open. */}\n {anchorRect !== undefined &&\n createPortal(\n <span\n ref={anchorRef}\n data-callout-anchor=\"\"\n className={s.anchor}\n aria-hidden=\"true\"\n // Dynamic geometry — inline style is the mechanism here, not styling.\n style={{\n left: anchorRect.x,\n top: anchorRect.y,\n width: anchorRect.width,\n height: anchorRect.height,\n }}\n />,\n document.body,\n )}\n <RACPopover\n {...rest}\n triggerRef={anchorRect !== undefined ? anchorRef : triggerRef}\n isNonModal={!modal}\n placement={placement}\n offset={offset}\n maxHeight={maxHeight}\n onOpenChange={onOpenChange}\n shouldCloseOnInteractOutside={\n shouldCloseOnInteractOutside ?? (modal ? () => false : undefined)\n }\n aria-label={popoverAriaLabel}\n aria-labelledby={popoverAriaLabelledby}\n className={[s.popover, className].filter(Boolean).join(' ')}\n {...stanced}\n data-weasel-overlay=\"\"\n {...portalProps}\n >\n <OverlayArrow className={s.arrow}>\n <svg width={12} height={12} viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n <path d=\"M0 0 L6 6 L12 0\" />\n </svg>\n </OverlayArrow>\n <RACDialog\n role={modal ? 'alertdialog' : 'dialog'}\n className={s.dialog}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n ref={dialogRef}\n >\n {({ close }) => (\n <>\n {(title !== undefined || showClose) && (\n <header className={s.header}>\n {title !== undefined && (\n <Heading id={titleId} slot=\"title\" className={s.title}>\n {title}\n </Heading>\n )}\n {showClose && (\n <CloseButton\n ariaLabel=\"Close callout\"\n onClick={() => {\n // `close()` resolves OverlayTriggerStateContext, only\n // provided by DialogTrigger (composed mode). In\n // triggerRef/anchorRect modes there is no such\n // context, so `close()` is a no-op there — the\n // controlled-open fallback below does the work.\n close();\n onOpenChange?.(false);\n onDismiss?.();\n }}\n />\n )}\n </header>\n )}\n <div className={s.body}>{children}</div>\n {footer !== undefined && <footer className={s.footer}>{footer}</footer>}\n </>\n )}\n </RACDialog>\n </RACPopover>\n </>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AC8EA,SAAgBQ,EAAQ,GAAqB;CAC3C,IAAM,EACJ,aACA,cACA,UACA,WACA,YAAS,UACT,SACA,WAAQ,IACR,oBACA,cACA,eACA,eACA,eAAY,OACZ,YAAS,IACT,eAAY,KACZ,iBACA,iCACA,cAAcC,GACd,mBAAmBC,GACnB,oBACA,GAAGC,MACDC,GACEC,IAAYC,EAAwB,IAAI,GACxCC,IAAUC,EAAU;EAAE;EAAQ;CAAK,CAAC,GACpC,EAAE,QAAQC,GAAc,mBAAgBb,EAAiBc,CAAe,GACxEC,IAAYC,KAAmB,CAACC,GAKhCC,IAAeR,EAAOS,CAAS;CACrC,EAAa,UAAUA;CACvB,IAAMC,IAAiBV,GAAQ,MAAqB;EAClD,AAAI,EAAE,QAAQ,YAAUQ,EAAa,UAAU;CACjD,CAAC,GACKG,IAAcX,EAA2B,IAAI,GAC7CY,IAAYC,GAAa,MAA6B;EAG1D,AAFAF,EAAY,SAAS,oBAAoB,WAAWD,EAAe,OAAO,GAC1E,EAAY,UAAUI,GACtBA,GAAM,iBAAiB,WAAWJ,EAAe,OAAO;CAC1D,GAAG,CAAC,CAAC,GACCK,IAAUC,EAAM,GAOhBC,IAAgBC,MAAe,KAAA;CACrC,QAAgB;EACd,AAAKD,KAAiB,OAAO,SAAW,OACxC,OAAO,cAAc,IAAI,MAAM,QAAQ,CAAC;CAC1C,GAAG;EAACA;EAAeC,GAAY;EAAGA,GAAY;EAAGA,GAAY;EAAOA,GAAY;CAAM,CAAC;CAGvF,IAAMC,IACJZ,KAASa,MAAU,KAAA,IAAYL,IAAUnB,GACrCyB,IAAmBd,IAAQZ,IAAY,KAAA;CAC7C,OACE,kBAAAT,GAAA,EAAA,UAAA;EACGiB;EAEAe,MAAe,KAAA,KACdK,EACE,kBAAC,QAAD;GACE,KAAKxB;GACL,uBAAoB;GACpB,WAAWZ,EAAE;GACb,eAAY;GAEZ,OAAO;IACL,MAAM+B,EAAW;IACjB,KAAKA,EAAW;IAChB,OAAOA,EAAW;IAClB,QAAQA,EAAW;GACrB;EACD,CAAA,GACD,SAAS,IACX;EACF,kBAAC9B,GAAD;GACE,GAAIS;GACJ,YAAYqB,MAAe,KAAA,IAAwBO,IAAZ1B;GACvC,YAAY,CAACQ;GACF;GACH;GACG;GACG;GACd,8BACEmB,MAAiCnB,UAAc,KAAQ,KAAA;GAEzD,cAAYc;GACZ,mBAAiBF;GACjB,WAAW,CAAChC,EAAE,SAASwC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAC1D,GAAI1B;GACJ,uBAAoB;GACpB,GAAI2B;GAhBN,UAAA,CAkBE,kBAACC,GAAD;IAAc,WAAW1C,EAAE;IACzB,UAAA,kBAAC,OAAD;KAAK,OAAO;KAAI,QAAQ;KAAI,SAAQ;KAAY,eAAY;KAC1D,UAAA,kBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;IACxB,CAAA;GACO,CAAA,GACd,kBAACE,GAAD;IACE,MAAMkB,IAAQ,gBAAgB;IAC9B,WAAWpB,EAAE;IACb,cAAYQ;IACZ,mBAAiBC;IACjB,KAAKgB;IAEH,WAAA,EAAE,eACF,kBAAA1B,GAAA,EAAA,UAAA;MACIkC,MAAU,KAAA,KAAaf,MACvB,kBAAC,UAAD;MAAQ,WAAWlB,EAAE;MAArB,UAAA,CACGiC,MAAU,KAAA,KACT,kBAACW,GAAD;OAAS,IAAIhB;OAAS,MAAK;OAAQ,WAAW5B,EAAE;OAC7C,UAAAiC;MACM,CAAA,GAEVf,KACC,kBAACd,GAAD;OACE,WAAU;OACV,eAAe;QAQb,AAFAyC,EAAM,GACNC,IAAe,EAAK,GACpBxB,IAAY;OACd;MACD,CAAA,CAEG;;KAEV,kBAAC,OAAD;MAAK,WAAWtB,EAAE;MAAO;KAAc,CAAA;KACtC+C,MAAW,KAAA,KAAa,kBAAC,UAAD;MAAQ,WAAW/C,EAAE;MAAS,UAAA+C;KAAe,CAAA;IACtE,EAAA,CAAA;GAEK,CAAA,CACD;;CACZ,EAAA,CAAA;AAEN"}
@@ -1,47 +0,0 @@
1
- import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
2
- import { forwardRef as r } from "react";
3
- import { Checkbox as i } from "react-aria-components";
4
- var a = {
5
- checkbox: "_checkbox_1gsy2_1",
6
- box: "_box_1gsy2_18",
7
- checkmark: "_checkmark_1gsy2_47",
8
- label: "_label_1gsy2_60"
9
- }, o = r(function(r, o) {
10
- let { children: s, className: c, ...l } = r;
11
- return /* @__PURE__ */ t(i, {
12
- ...l,
13
- ref: o,
14
- className: [a.checkbox, c].filter(Boolean).join(" "),
15
- children: ({ isIndeterminate: r }) => /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
16
- className: a.box,
17
- children: /* @__PURE__ */ t("svg", {
18
- className: a.checkmark,
19
- viewBox: "0 0 14 14",
20
- "aria-hidden": "true",
21
- children: r ? /* @__PURE__ */ t("line", {
22
- x1: "3",
23
- y1: "7",
24
- x2: "11",
25
- y2: "7",
26
- stroke: "currentColor",
27
- strokeWidth: "2",
28
- strokeLinecap: "round"
29
- }) : /* @__PURE__ */ t("polyline", {
30
- points: "3,7.5 6,10.5 11,4.5",
31
- fill: "none",
32
- stroke: "currentColor",
33
- strokeWidth: "2",
34
- strokeLinecap: "round",
35
- strokeLinejoin: "round"
36
- })
37
- })
38
- }), s !== void 0 && /* @__PURE__ */ t("span", {
39
- className: a.label,
40
- children: s
41
- })] })
42
- });
43
- });
44
- //#endregion
45
- export { o as t };
46
-
47
- //# sourceMappingURL=Checkbox-DHXTUHO9.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Checkbox-DHXTUHO9.js","names":["Checkbox","RACCheckbox","s","_Fragment","Checkbox_module_default","Checkbox$1","forwardRef","rest","props","Checkbox","className","Fragment","isIndeterminate","children"],"sources":["../../src/components/Checkbox/Checkbox.module.css","../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":[".checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--wzl-space-4);\n cursor: pointer;\n font-family: var(--wzl-font-ui);\n font-size: var(--wzl-font-size);\n color: var(--wzl-fg);\n user-select: none;\n -webkit-user-select: none;\n}\n\n.checkbox[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.box {\n position: relative;\n flex: 0 0 auto;\n width: 14px;\n height: 14px;\n background: var(--wzl-surface-sunken);\n border: 1px solid var(--wzl-border-strong);\n border-radius: var(--wzl-radius-sm);\n transition: background-color var(--wzl-motion-fast), border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.checkbox[data-focus-visible] .box {\n box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.checkbox[data-hovered]:not([data-disabled]) .box {\n border-color: var(--wzl-fg-muted);\n}\n\n.checkbox[data-selected] .box,\n.checkbox[data-indeterminate] .box {\n background: var(--wzl-accent-strong);\n border-color: var(--wzl-accent-strong);\n}\n\n.checkbox[data-invalid] .box {\n border-color: var(--wzl-danger);\n}\n\n.checkmark {\n position: absolute;\n inset: 0;\n color: var(--wzl-fg-on-accent);\n opacity: 0;\n pointer-events: none;\n}\n\n.checkbox[data-selected] .checkmark,\n.checkbox[data-indeterminate] .checkmark {\n opacity: 1;\n}\n\n.label {\n line-height: 1.2;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n Checkbox as RACCheckbox,\n type CheckboxProps as RACCheckboxProps,\n} from 'react-aria-components';\nimport s from './Checkbox.module.css';\n\n/**\n * Props for {@link Checkbox}, on top of React Aria's `Checkbox` props. The\n * label is passed as children.\n */\nexport type CheckboxProps = Omit<RACCheckboxProps, 'children' | 'className'> & {\n children?: ReactNode;\n className?: string;\n};\n\n/**\n * Single checkbox wrapping React Aria's Checkbox. Supports indeterminate\n * via `isIndeterminate`. The label is supplied as children.\n */\nexport const Checkbox = forwardRef(function Checkbox(\n props: CheckboxProps,\n ref: Ref<HTMLLabelElement>,\n) {\n const { children, className, ...rest } = props;\n return (\n <RACCheckbox\n {...rest}\n ref={ref}\n className={[s.checkbox, className].filter(Boolean).join(' ')}\n >\n {({ isIndeterminate }) => (\n <>\n <span className={s.box}>\n <svg className={s.checkmark} viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n {isIndeterminate ? (\n <line x1=\"3\" y1=\"7\" x2=\"11\" y2=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n ) : (\n <polyline\n points=\"3,7.5 6,10.5 11,4.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n )}\n </svg>\n </span>\n {children !== undefined && <span className={s.label}>{children}</span>}\n </>\n )}\n </RACCheckbox>\n );\n});\n"],"mappings":";;;;;;;;GCoBaA,IAAWM,EAAW,SACjC,GACA,GACA;CACA,IAAM,EAAE,aAAU,cAAW,GAAGC,MAASC;CACzC,OACE,kBAACP,GAAD;EACE,GAAIM;EACC;EACL,WAAW,CAACL,EAAE,UAAUQ,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAEzD,WAAA,EAAE,yBACF,kBAAAP,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAWD,EAAE;GACjB,UAAA,kBAAC,OAAD;IAAK,WAAWA,EAAE;IAAW,SAAQ;IAAY,eAAY;IAC1D,UAAAU,IACC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAI,IAAG;KAAK,IAAG;KAAI,QAAO;KAAe,aAAY;KAAI,eAAc;IAAS,CAAA,IAEhG,kBAAC,YAAD;KACE,QAAO;KACP,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GAEA,CAAA;EACD,CAAA,GACLC,MAAa,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAWX,EAAE;GAAQ;EAAe,CAAA,CACrE,EAAA,CAAA;CAEO,CAAA;AAEjB,CAAC"}