@weasel-js/ui 0.6.0 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/{Callout-CvTKW1sd.js → Callout-CxxrEcSb.js} +1 -1
- package/dist/chunks/{Callout-CvTKW1sd.js.map → Callout-CxxrEcSb.js.map} +1 -1
- package/dist/chunks/{Checkbox-BeWFZr1M.js → Checkbox-CtK8H_OQ.js} +1 -1
- package/dist/chunks/{Checkbox-BeWFZr1M.js.map → Checkbox-CtK8H_OQ.js.map} +1 -1
- package/dist/chunks/{ColorField-B7vHaU5G.js → ColorField-sGLnThpB.js} +1 -1
- package/dist/chunks/{ColorField-B7vHaU5G.js.map → ColorField-sGLnThpB.js.map} +1 -1
- package/dist/chunks/{ComboBox-yfrxG0_I.js → ComboBox-CotoRgNi.js} +2 -2
- package/dist/chunks/{ComboBox-yfrxG0_I.js.map → ComboBox-CotoRgNi.js.map} +1 -1
- package/dist/chunks/{CurveEditor-BEQtef4P.js → CurveEditor-DAb2EMyR.js} +1 -1
- package/dist/chunks/{CurveEditor-BEQtef4P.js.map → CurveEditor-DAb2EMyR.js.map} +1 -1
- package/dist/chunks/{Dialog-tAi14bY3.js → Dialog-CQymDCAl.js} +1 -1
- package/dist/chunks/{Dialog-tAi14bY3.js.map → Dialog-CQymDCAl.js.map} +1 -1
- package/dist/chunks/{Field-4cagmYlT.js → Field-BHSu2F3E.js} +1 -1
- package/dist/chunks/{Field-4cagmYlT.js.map → Field-BHSu2F3E.js.map} +1 -1
- package/dist/chunks/{Input-DRei6KJr.js → Input-D_Xzgr2b.js} +2 -2
- package/dist/chunks/{Input-DRei6KJr.js.map → Input-D_Xzgr2b.js.map} +1 -1
- package/dist/chunks/{NumberField-BAmJwxw0.js → NumberField-BQmELz32.js} +2 -2
- package/dist/chunks/{NumberField-BAmJwxw0.js.map → NumberField-BQmELz32.js.map} +1 -1
- package/dist/chunks/{PointPlotter-Dvh5cyOC.js → PointPlotter-EkbCBK9j.js} +2 -2
- package/dist/chunks/{PointPlotter-Dvh5cyOC.js.map → PointPlotter-EkbCBK9j.js.map} +1 -1
- package/dist/chunks/{Powerline-W_yqAVMc.js → Powerline-C8rddbbK.js} +1 -1
- package/dist/chunks/{Powerline-W_yqAVMc.js.map → Powerline-C8rddbbK.js.map} +1 -1
- package/dist/chunks/{Prefs-NOoGuUHy.js → Prefs-BkDJ5Cdz.js} +10 -10
- package/dist/chunks/{Prefs-NOoGuUHy.js.map → Prefs-BkDJ5Cdz.js.map} +1 -1
- package/dist/chunks/{RadioGroup-DUlTy95a.js → RadioGroup-Ci-I9NEx.js} +2 -2
- package/dist/chunks/{RadioGroup-DUlTy95a.js.map → RadioGroup-Ci-I9NEx.js.map} +1 -1
- package/dist/chunks/{RangeSlider-Bks9GQuO.js → RangeSlider-CW-edtNx.js} +1 -1
- package/dist/chunks/{RangeSlider-Bks9GQuO.js.map → RangeSlider-CW-edtNx.js.map} +1 -1
- package/dist/chunks/ResizeHandle-C2OBMqTs.js +81 -0
- package/dist/chunks/ResizeHandle-C2OBMqTs.js.map +1 -0
- package/dist/chunks/{Select-BV70VU5O.js → Select-CLyBisCS.js} +15 -9
- package/dist/chunks/Select-CLyBisCS.js.map +1 -0
- package/dist/chunks/{SelectionPanel-D_U7GKup.js → SelectionPanel-DBdhAKIK.js} +92 -72
- package/dist/chunks/SelectionPanel-DBdhAKIK.js.map +1 -0
- package/dist/chunks/{Sidebar-Bk9_TPhX.js → Sidebar-doLqiTZH.js} +1 -1
- package/dist/chunks/{Sidebar-Bk9_TPhX.js.map → Sidebar-doLqiTZH.js.map} +1 -1
- package/dist/chunks/{SidebarPanel-Nd9Od5WD.js → SidebarPanel-DjTfOzB9.js} +1 -1
- package/dist/chunks/{SidebarPanel-Nd9Od5WD.js.map → SidebarPanel-DjTfOzB9.js.map} +1 -1
- package/dist/chunks/StatusBar-OOjfqCD8.js +41 -0
- package/dist/chunks/StatusBar-OOjfqCD8.js.map +1 -0
- package/dist/chunks/{Switch-iUmlnP_b.js → Switch-DxJLMYki.js} +1 -1
- package/dist/chunks/{Switch-iUmlnP_b.js.map → Switch-DxJLMYki.js.map} +1 -1
- package/dist/chunks/{Tabs-DCs-Ww2f.js → Tabs-DOW5jtnq.js} +1 -1
- package/dist/chunks/{Tabs-DCs-Ww2f.js.map → Tabs-DOW5jtnq.js.map} +1 -1
- package/dist/chunks/{Toast-NdSJo2vj.js → Toast-DLM2AsTz.js} +1 -1
- package/dist/chunks/{Toast-NdSJo2vj.js.map → Toast-DLM2AsTz.js.map} +1 -1
- package/dist/chunks/{ToggleBar-BfcvLaOr.js → ToggleBar-Defj6Asn.js} +31 -22
- package/dist/chunks/ToggleBar-Defj6Asn.js.map +1 -0
- package/dist/chunks/{ToolButton-GAzBOvcR.js → ToolButton-Dv6NdZKh.js} +1 -1
- package/dist/chunks/{ToolButton-GAzBOvcR.js.map → ToolButton-Dv6NdZKh.js.map} +1 -1
- package/dist/chunks/{ToolGroup-Btg47vJF.js → ToolGroup-BAthcF5H.js} +1 -1
- package/dist/chunks/{ToolGroup-Btg47vJF.js.map → ToolGroup-BAthcF5H.js.map} +1 -1
- package/dist/chunks/ToolOptionsBar-ChiL-HVA.js +27 -0
- package/dist/chunks/ToolOptionsBar-ChiL-HVA.js.map +1 -0
- package/dist/chunks/{ToolPalette-C8V-I-uX.js → ToolPalette-DXVIEO0w.js} +3 -3
- package/dist/chunks/{ToolPalette-C8V-I-uX.js.map → ToolPalette-DXVIEO0w.js.map} +1 -1
- package/dist/components/Callout/index.js +1 -1
- package/dist/components/Checkbox/index.js +1 -1
- package/dist/components/ColorField/index.js +1 -1
- package/dist/components/ComboBox/index.js +1 -1
- package/dist/components/CurveEditor/index.js +1 -1
- package/dist/components/Dialog/index.js +1 -1
- package/dist/components/Field/index.js +1 -1
- package/dist/components/Input/index.js +1 -1
- package/dist/components/NumberField/index.js +1 -1
- package/dist/components/PointPlotter/index.js +1 -1
- package/dist/components/Powerline/index.js +1 -1
- package/dist/components/Prefs/index.js +1 -1
- package/dist/components/RadioGroup/index.js +1 -1
- package/dist/components/RangeSlider/index.js +1 -1
- package/dist/components/ResizeHandle/ResizeHandle.d.ts +52 -0
- package/dist/components/ResizeHandle/ResizeHandle.d.ts.map +1 -0
- package/dist/components/ResizeHandle/index.d.ts +3 -0
- package/dist/components/ResizeHandle/index.d.ts.map +1 -0
- package/dist/components/ResizeHandle/index.js +2 -0
- package/dist/components/Select/Select.d.ts +8 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/index.js +1 -1
- package/dist/components/SelectionPanel/SelectionPanel.d.ts.map +1 -1
- package/dist/components/SelectionPanel/index.d.ts +1 -1
- package/dist/components/SelectionPanel/index.d.ts.map +1 -1
- package/dist/components/SelectionPanel/index.js +2 -2
- package/dist/components/SelectionPanel/model.d.ts +13 -11
- package/dist/components/SelectionPanel/model.d.ts.map +1 -1
- package/dist/components/Sidebar/index.js +1 -1
- package/dist/components/SidebarPanel/index.js +1 -1
- package/dist/components/StatusBar/StatusBar.d.ts +45 -0
- package/dist/components/StatusBar/StatusBar.d.ts.map +1 -0
- package/dist/components/StatusBar/index.d.ts +3 -0
- package/dist/components/StatusBar/index.d.ts.map +1 -0
- package/dist/components/StatusBar/index.js +2 -0
- package/dist/components/Switch/index.js +1 -1
- package/dist/components/Tabs/index.js +1 -1
- package/dist/components/Toast/index.js +1 -1
- package/dist/components/ToggleBar/ToggleBar.d.ts +17 -0
- package/dist/components/ToggleBar/ToggleBar.d.ts.map +1 -1
- package/dist/components/ToggleBar/index.js +1 -1
- package/dist/components/ToolButton/index.js +1 -1
- package/dist/components/ToolGroup/index.js +1 -1
- package/dist/components/ToolOptionsBar/ToolOptionsBar.d.ts +44 -0
- package/dist/components/ToolOptionsBar/ToolOptionsBar.d.ts.map +1 -0
- package/dist/components/ToolOptionsBar/index.d.ts +3 -0
- package/dist/components/ToolOptionsBar/index.d.ts.map +1 -0
- package/dist/components/ToolOptionsBar/index.js +2 -0
- package/dist/components/ToolPalette/index.js +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +45 -42
- package/dist/index.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/dist/chunks/Select-BV70VU5O.js.map +0 -1
- package/dist/chunks/SelectionPanel-D_U7GKup.js.map +0 -1
- package/dist/chunks/ToggleBar-BfcvLaOr.js.map +0 -1
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export interface StatusBarProps {
|
|
3
|
+
/**
|
|
4
|
+
* Accessible label for the bar. Deliberately not a live region — a status
|
|
5
|
+
* bar's readouts change on every pointer move (zoom, cursor position,
|
|
6
|
+
* selection count), and announcing each one would make a screen reader
|
|
7
|
+
* unusable. Screen-reader users reach the same facts through the controls
|
|
8
|
+
* that own them.
|
|
9
|
+
*/
|
|
10
|
+
ariaLabel?: string;
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* The thin readout strip along the bottom of an editor window: monospace,
|
|
16
|
+
* one row, items separated by a fixed gap, with an optional spacer that
|
|
17
|
+
* pushes everything after it to the trailing edge.
|
|
18
|
+
*
|
|
19
|
+
* Pure presentation — it holds whatever the app puts in it. Compose with
|
|
20
|
+
* `<StatusBarItem>` and `<StatusBarSpacer>`.
|
|
21
|
+
*/
|
|
22
|
+
export declare function StatusBar(props: StatusBarProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export interface StatusBarItemProps {
|
|
24
|
+
/**
|
|
25
|
+
* Hover text. Items that carry one also get a `help` cursor, so the
|
|
26
|
+
* affordance is discoverable rather than hidden behind a hover delay.
|
|
27
|
+
*/
|
|
28
|
+
title?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Dim the item and use tabular figures. For reference material that
|
|
31
|
+
* shouldn't compete with live readouts — build stamps, hints, units.
|
|
32
|
+
*/
|
|
33
|
+
muted?: boolean;
|
|
34
|
+
children?: ReactNode;
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
/** One readout in a `<StatusBar>`. */
|
|
38
|
+
export declare function StatusBarItem(props: StatusBarItemProps): import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
/**
|
|
40
|
+
* Splits a status bar into leading and trailing runs — everything after the
|
|
41
|
+
* spacer is pushed to the trailing edge. Decorative, so it's hidden from the
|
|
42
|
+
* accessibility tree.
|
|
43
|
+
*/
|
|
44
|
+
export declare function StatusBarSpacer(): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
//# sourceMappingURL=StatusBar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../src/components/StatusBar/StatusBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,cAAc;IAC7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAO9C;AAED,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,sCAAsC;AACtC,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAKtD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,4CAE9B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StatusBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACxE,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "../../chunks/Switch-
|
|
1
|
+
import { t as e } from "../../chunks/Switch-DxJLMYki.js";
|
|
2
2
|
export { e as Switch };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { i as e, n as t, r as n, t as r } from "../../chunks/Tabs-
|
|
1
|
+
import { i as e, n as t, r as n, t as r } from "../../chunks/Tabs-DOW5jtnq.js";
|
|
2
2
|
export { r as Tab, t as TabList, n as TabPanel, e as Tabs };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as e, i as t, n, r, t as i } from "../../chunks/Toast-
|
|
1
|
+
import { a as e, i as t, n, r, t as i } from "../../chunks/Toast-DLM2AsTz.js";
|
|
2
2
|
export { n as ToastQueue, i as ToastRegion, r as createToastQueue, t as defaultToastQueue, e as toast };
|
|
@@ -28,6 +28,23 @@ export type ToggleBarProps<V extends string | number = string> = (CommonProps &
|
|
|
28
28
|
mode: 'multiple';
|
|
29
29
|
items: readonly ToggleBarItem<V>[];
|
|
30
30
|
value: readonly V[];
|
|
31
|
+
/**
|
|
32
|
+
* Values that are neither on nor off — the sources this bar
|
|
33
|
+
* aggregates disagree (a text range that is bold in part of it, a
|
|
34
|
+
* multi-selection whose nodes differ). Rendered `aria-pressed="mixed"`,
|
|
35
|
+
* the ARIA tri-state a toggle button actually has, rather than
|
|
36
|
+
* `SelectionPanel`'s reduced-opacity-plus-`title` workaround for
|
|
37
|
+
* `Switch`, which has no indeterminate state to render.
|
|
38
|
+
*
|
|
39
|
+
* `value` wins where the two lists overlap, so a caller that can't
|
|
40
|
+
* cheaply keep them disjoint doesn't get an ambiguous segment.
|
|
41
|
+
*
|
|
42
|
+
* Clicking a mixed segment turns it fully **on**, matching the
|
|
43
|
+
* everywhere-else convention (and `toggleFlagInRange`'s rule for a
|
|
44
|
+
* partially-styled text range) that a mixed toggle resolves toward
|
|
45
|
+
* the affirmative rather than clearing.
|
|
46
|
+
*/
|
|
47
|
+
mixedValues?: readonly V[];
|
|
31
48
|
onChange: (next: V[]) => void;
|
|
32
49
|
});
|
|
33
50
|
export declare function ToggleBar<V extends string | number = string>(props: ToggleBarProps<V>): ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleBar.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleBar/ToggleBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhI,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI;IAC9D,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AACxC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,CAAC;AAErD,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;4EACwE;IACxE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;0EACsE;IACtE,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IACzD,CAAC,WAAW,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,EAAE,SAAS,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC,GACF,CAAC,WAAW,GAAG;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,SAAS,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;CAC/B,CAAC,CAAC;AA8BP,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"ToggleBar.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleBar/ToggleBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhI,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI;IAC9D,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AACxC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,CAAC;AAErD,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;4EACwE;IACxE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;0EACsE;IACtE,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IACzD,CAAC,WAAW,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,EAAE,SAAS,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC,GACF,CAAC,WAAW,GAAG;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,SAAS,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB;;;;;;;;;;;;;;;OAeG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;CAC/B,CAAC,CAAC;AA8BP,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,YAAY,CAwIpG"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "../../chunks/ToggleBar-
|
|
1
|
+
import { t as e } from "../../chunks/ToggleBar-Defj6Asn.js";
|
|
2
2
|
export { e as ToggleBar };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "../../chunks/ToolButton-
|
|
1
|
+
import { t as e } from "../../chunks/ToolButton-Dv6NdZKh.js";
|
|
2
2
|
export { e as ToolButton };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "../../chunks/ToolGroup-
|
|
1
|
+
import { t as e } from "../../chunks/ToolGroup-BAthcF5H.js";
|
|
2
2
|
export { e as ToolGroup };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export interface ToolOptionsBarProps {
|
|
3
|
+
/**
|
|
4
|
+
* Context label for the row — e.g. the active tool's name. Rendered
|
|
5
|
+
* before the children and doubles as the toolbar's `aria-label`. Omit
|
|
6
|
+
* it and the row still renders (it's a permanently reserved slot), just
|
|
7
|
+
* without an accessible name.
|
|
8
|
+
*
|
|
9
|
+
* Using `label` for both the visible text and `aria-label` means a
|
|
10
|
+
* screen reader announces it twice when landing on the toolbar ("Text,
|
|
11
|
+
* toolbar", then "Text" again when browsing into the visible span).
|
|
12
|
+
* `aria-labelledby` would avoid the echo at the cost of id plumbing and
|
|
13
|
+
* an awkward no-`id`-to-point-at case when `label` is omitted. The
|
|
14
|
+
* double-announcement is common enough for labelled landmark regions
|
|
15
|
+
* that it's left as-is — considered, not missed.
|
|
16
|
+
*/
|
|
17
|
+
label?: string;
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Horizontal strip reserved above the workspace for contextual tool
|
|
23
|
+
* options — its first tenant is the character controls a text tool
|
|
24
|
+
* exposes while a caret range is active. Pure chrome: it renders an
|
|
25
|
+
* optional label and a children slot, nothing else. It knows nothing
|
|
26
|
+
* about text, or about any specific tool — any tool can fill it.
|
|
27
|
+
*
|
|
28
|
+
* The row always renders, even with no `label` and no `children`,
|
|
29
|
+
* because the app reserves its height permanently rather than mounting
|
|
30
|
+
* it on demand — mounting mid-edit would resize the workspace under a
|
|
31
|
+
* canvas that's sized to the page.
|
|
32
|
+
*
|
|
33
|
+
* `role="toolbar"` without roving tabindex: the ARIA authoring practices
|
|
34
|
+
* expect arrow-key roving focus across a toolbar's items, but this
|
|
35
|
+
* component doesn't own or know the shape of its children — they're
|
|
36
|
+
* arbitrary, possibly compound controls (`NumberField`, `Select`,
|
|
37
|
+
* `ColorField`) that already use arrow keys for their own value editing.
|
|
38
|
+
* Imposing roving focus here would fight those controls' own key
|
|
39
|
+
* handling. Tab order falls back to normal DOM order for now; revisit
|
|
40
|
+
* once the first tenant's control set is concrete and a roving-focus
|
|
41
|
+
* contract can be designed in coordination with those controls.
|
|
42
|
+
*/
|
|
43
|
+
export declare function ToolOptionsBar(props: ToolOptionsBarProps): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
//# sourceMappingURL=ToolOptionsBar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolOptionsBar.d.ts","sourceRoot":"","sources":["../../../src/components/ToolOptionsBar/ToolOptionsBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,mBAAmB;IAClC;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CASxD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToolOptionsBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as e, r as t, t as n } from "../../chunks/ToolPalette-
|
|
1
|
+
import { n as e, r as t, t as n } from "../../chunks/ToolPalette-DXVIEO0w.js";
|
|
2
2
|
export { n as ToolPalette, e as formatShortcut, t as formatShortcutParts };
|
package/dist/index.d.ts
CHANGED
|
@@ -8,11 +8,14 @@ export * from './components/Slider';
|
|
|
8
8
|
export * from './components/ToggleBar';
|
|
9
9
|
export * from './components/OptionsBar';
|
|
10
10
|
export * from './components/ActionsBar';
|
|
11
|
+
export * from './components/ToolOptionsBar';
|
|
11
12
|
export * from './components/Powerline';
|
|
12
13
|
export * from './components/Prefs';
|
|
13
14
|
export * from './components/SelectionPanel';
|
|
15
|
+
export * from './components/ResizeHandle';
|
|
14
16
|
export * from './components/Sidebar';
|
|
15
17
|
export * from './components/SidebarPanel';
|
|
18
|
+
export * from './components/StatusBar';
|
|
16
19
|
export * from './components/ToolButton';
|
|
17
20
|
export * from './components/ToolGroup';
|
|
18
21
|
export * from './components/ToolPalette';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EACV,aAAa,EACb,yBAAyB,EACzB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EACV,aAAa,EACb,yBAAyB,EACzB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,sBAAsB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -4,48 +4,51 @@ import { t as s } from "./chunks/ActionBar-CiKvEvXi.js";
|
|
|
4
4
|
import { n as c, t as l } from "./chunks/Badge-DU8ihE7Z.js";
|
|
5
5
|
import "./components/Badge/index.js";
|
|
6
6
|
import { t as ee } from "./chunks/Button-9QNIYugK.js";
|
|
7
|
-
import { n as
|
|
8
|
-
import { a as
|
|
9
|
-
import { t as
|
|
10
|
-
import { n as
|
|
11
|
-
import { t as
|
|
12
|
-
import { t as
|
|
13
|
-
import { t as
|
|
14
|
-
import { t as
|
|
15
|
-
import { t as
|
|
16
|
-
import { t as
|
|
17
|
-
import {
|
|
18
|
-
import { t as
|
|
19
|
-
import { t as
|
|
20
|
-
import {
|
|
21
|
-
import { t as
|
|
22
|
-
import {
|
|
23
|
-
import { t as
|
|
24
|
-
import {
|
|
25
|
-
import { t as
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import { t as
|
|
29
|
-
import { t as
|
|
30
|
-
import { t as
|
|
31
|
-
import { n as
|
|
7
|
+
import { n as te, t as u } from "./chunks/DataGrid-mUq38k0Q.js";
|
|
8
|
+
import { a as d, i as f, n as p, o as m, r as h, t as g } from "./chunks/Keycaps-B9dJMYx_.js";
|
|
9
|
+
import { t as _ } from "./chunks/keyGlyph-BDH5fqkO.js";
|
|
10
|
+
import { n as v, r as y, t as b } from "./chunks/Slider-sUJGgmKR.js";
|
|
11
|
+
import { t as x } from "./chunks/ToggleBar-Defj6Asn.js";
|
|
12
|
+
import { t as S } from "./chunks/OptionsBar-CHOP_CiW.js";
|
|
13
|
+
import { t as C } from "./chunks/ActionsBar-CzU6Of3B.js";
|
|
14
|
+
import { t as w } from "./chunks/ToolOptionsBar-ChiL-HVA.js";
|
|
15
|
+
import { t as T } from "./chunks/Powerline-C8rddbbK.js";
|
|
16
|
+
import { t as E } from "./chunks/Checkbox-CtK8H_OQ.js";
|
|
17
|
+
import { t as D } from "./chunks/ColorField-sGLnThpB.js";
|
|
18
|
+
import { n as O, t as k } from "./chunks/Field-BHSu2F3E.js";
|
|
19
|
+
import { t as A } from "./chunks/Input-D_Xzgr2b.js";
|
|
20
|
+
import { t as j } from "./chunks/NumberField-BQmELz32.js";
|
|
21
|
+
import { n as M, t as N } from "./chunks/RadioGroup-Ci-I9NEx.js";
|
|
22
|
+
import { t as P } from "./chunks/RangeSlider-CW-edtNx.js";
|
|
23
|
+
import { n as F, t as I } from "./chunks/Select-CLyBisCS.js";
|
|
24
|
+
import { t as L } from "./chunks/Switch-DxJLMYki.js";
|
|
25
|
+
import { a as R, i as z, n as B, r as V, t as H } from "./chunks/Prefs-BkDJ5Cdz.js";
|
|
26
|
+
import { t as U } from "./chunks/Dialog-CQymDCAl.js";
|
|
27
|
+
import { a as W, c as G, i as K, n as q, o as J, r as Y, s as X, t as Z } from "./chunks/SelectionPanel-DBdhAKIK.js";
|
|
28
|
+
import { t as Q } from "./chunks/ResizeHandle-C2OBMqTs.js";
|
|
29
|
+
import { t as ne } from "./chunks/Sidebar-doLqiTZH.js";
|
|
30
|
+
import { t as re } from "./chunks/SidebarPanel-DjTfOzB9.js";
|
|
31
|
+
import { n as ie, r as ae, t as oe } from "./chunks/StatusBar-OOjfqCD8.js";
|
|
32
|
+
import { t as se } from "./chunks/ToolButton-Dv6NdZKh.js";
|
|
33
|
+
import { t as ce } from "./chunks/ToolGroup-BAthcF5H.js";
|
|
34
|
+
import { n as le, r as ue, t as de } from "./chunks/ToolPalette-DXVIEO0w.js";
|
|
32
35
|
import "./components/Field/index.js";
|
|
33
|
-
import { i as
|
|
34
|
-
import { n as
|
|
35
|
-
import { n as
|
|
36
|
-
import { a as
|
|
37
|
-
import { a as
|
|
38
|
-
import { t as
|
|
39
|
-
import { oklabToSrgbU8 as
|
|
40
|
-
import { jsx as
|
|
36
|
+
import { i as fe, n as pe, r as me, t as he } from "./chunks/Tabs-DOW5jtnq.js";
|
|
37
|
+
import { n as ge, t as _e } from "./chunks/ComboBox-CotoRgNi.js";
|
|
38
|
+
import { n as ve, t as ye } from "./chunks/Callout-CxxrEcSb.js";
|
|
39
|
+
import { a as be, i as xe, n as Se, r as Ce, t as we } from "./chunks/Toast-DLM2AsTz.js";
|
|
40
|
+
import { a as Te, i as Ee, n as De, o as $, r as Oe, t as ke } from "./chunks/CurveEditor-DAb2EMyR.js";
|
|
41
|
+
import { t as Ae } from "./chunks/PointPlotter-EkbCBK9j.js";
|
|
42
|
+
import { oklabToSrgbU8 as je, oklchToOklab as Me, rgbaToHex as Ne } from "@weasel-js/core";
|
|
43
|
+
import { jsx as Pe } from "react/jsx-runtime";
|
|
41
44
|
//#region src/paintGradientTrack.tsx
|
|
42
|
-
var
|
|
45
|
+
var Fe = {
|
|
43
46
|
angleDeg: 135,
|
|
44
47
|
stripe: 2,
|
|
45
48
|
gap: 4,
|
|
46
49
|
dim: 75
|
|
47
50
|
};
|
|
48
|
-
function
|
|
51
|
+
function Ie(e) {
|
|
49
52
|
let { gradient: t, samples: n = 16, activeRange: r, hatch: i } = e;
|
|
50
53
|
return (e) => {
|
|
51
54
|
let a = [];
|
|
@@ -56,7 +59,7 @@ function Ae(e) {
|
|
|
56
59
|
let o = `linear-gradient(to right, ${a.join(", ")})`, s = [];
|
|
57
60
|
if (r) {
|
|
58
61
|
let t = e.valueToFraction(r[0]) * 100, n = e.valueToFraction(r[1]) * 100, a = {
|
|
59
|
-
...
|
|
62
|
+
...Fe,
|
|
60
63
|
...i
|
|
61
64
|
}, o = `repeating-linear-gradient(${a.angleDeg}deg, transparent 0 ${a.stripe}px, var(--wzl-panel-bg, #fafbfc) ${a.stripe}px ${a.stripe + a.gap}px)`, c = `color-mix(in srgb, var(--wzl-panel-bg, #fafbfc) ${a.dim}%, transparent)`, l = `linear-gradient(${c}, ${c})`;
|
|
62
65
|
if (t > 0 && (s.push(`${l} left 0 / ${t.toFixed(2)}% 100% no-repeat`), s.push(`${o} left 0 / ${t.toFixed(2)}% 100% no-repeat`)), n < 100) {
|
|
@@ -64,7 +67,7 @@ function Ae(e) {
|
|
|
64
67
|
s.push(`${l} right 0 / ${e}% 100% no-repeat`), s.push(`${o} right 0 / ${e}% 100% no-repeat`);
|
|
65
68
|
}
|
|
66
69
|
}
|
|
67
|
-
return s.push(o), /* @__PURE__ */
|
|
70
|
+
return s.push(o), /* @__PURE__ */ Pe("div", { style: {
|
|
68
71
|
position: "absolute",
|
|
69
72
|
inset: 0,
|
|
70
73
|
background: s.join(", ")
|
|
@@ -73,19 +76,19 @@ function Ae(e) {
|
|
|
73
76
|
}
|
|
74
77
|
//#endregion
|
|
75
78
|
//#region src/color/oklch.ts
|
|
76
|
-
function
|
|
77
|
-
let [r, i, a] =
|
|
78
|
-
return
|
|
79
|
+
function Le(e, t, n) {
|
|
80
|
+
let [r, i, a] = Me(e, t, n * Math.PI / 180), [o, s, c] = je(r, i, a);
|
|
81
|
+
return Ne([
|
|
79
82
|
o / 255,
|
|
80
83
|
s / 255,
|
|
81
84
|
c / 255
|
|
82
85
|
]);
|
|
83
86
|
}
|
|
84
|
-
function
|
|
87
|
+
function Re(e, t) {
|
|
85
88
|
let [n, r] = t.lRange;
|
|
86
89
|
return e <= n ? t.cBot : e >= r ? t.cTop : e <= t.midL ? t.cBot + (t.cPeak - t.cBot) * ((e - n) / (t.midL - n)) : t.cPeak + (t.cTop - t.cPeak) * ((e - t.midL) / (r - t.midL));
|
|
87
90
|
}
|
|
88
91
|
//#endregion
|
|
89
|
-
export { s as ActionBar,
|
|
92
|
+
export { s as ActionBar, C as ActionsBar, l as Badge, ee as Button, ye as Callout, ve as CalloutTrigger, E as Checkbox, D as ColorField, _e as ComboBox, ge as ComboBoxItem, De as CurveEditor, u as DataGrid, U as Dialog, c as EDGE_PROFILES, k as Field, A as Input, d as KeyCap, f as KeySequence, Oe as LayeredCurveEditor, v as MINUS_SIGN, q as MIXED, j as NumberField, S as OptionsBar, i as Plot2D, Ae as PointPlotter, T as Powerline, H as PrefsDialog, B as PrefsForm, N as Radio, M as RadioGroup, P as RangeSlider, Q as ResizeHandle, I as Select, F as SelectItem, Z as SelectionPanel, ne as Sidebar, re as SidebarPanel, b as Slider, oe as StatusBar, ie as StatusBarItem, ae as StatusBarSpacer, L as Switch, he as Tab, pe as TabList, me as TabPanel, fe as Tabs, Se as ToastQueue, we as ToastRegion, x as ToggleBar, se as ToolButton, ce as ToolGroup, w as ToolOptionsBar, de as ToolPalette, o as Tooltip, a as TooltipTrigger, Y as aggregateValue, Re as chromaAt, K as classifyKind, Ee as createFunctionLayer, ke as createSetCurveOp, Ce as createToastQueue, xe as defaultToastQueue, g as detectPlatform, t as dlog, W as effectiveSections, O as fieldClasses, y as formatNumber, le as formatShortcut, ue as formatShortcutParts, Te as functionLayerState, m as inferKeycapKind, e as isDebugEnabled, V as isPrefLeaf, _ as keyGlyph, p as keySpecFromKey, h as keySpecsFromMods, J as kindBreakdown, n as modelToPlot, X as nodeValueAt, Le as oklchToHex, Ie as paintGradientTrack, r as plotToModel, z as prefValueAtPath, $ as sampleByInterpolation, G as setAtPath, be as toast, te as useReorderDragList, R as visiblePrefSubtree };
|
|
90
93
|
|
|
91
94
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../src/paintGradientTrack.tsx","../src/color/oklch.ts"],"sourcesContent":["import type { ReactNode, CSSProperties } from 'react';\nimport type { TrackCtx } from './components/Slider';\n\nexport type GradientTrackOpts = {\n gradient: (t: number) => string;\n samples?: number;\n activeRange?: [number, number];\n hatch?: {\n angleDeg?: number;\n stripe?: number;\n gap?: number;\n dim?: number;\n };\n};\n\nconst DEFAULT_HATCH = { angleDeg: 135, stripe: 2, gap: 4, dim: 75 };\n\nexport function paintGradientTrack(opts: GradientTrackOpts): (ctx: TrackCtx) => ReactNode {\n const { gradient, samples = 16, activeRange, hatch } = opts;\n\n return (ctx: TrackCtx) => {\n const stops: string[] = [];\n for (let i = 0; i <= samples; i++) {\n const t = i / samples;\n stops.push(`${gradient(t)} ${(t * 100).toFixed(1)}%`);\n }\n const baseGradient = `linear-gradient(to right, ${stops.join(', ')})`;\n\n const layers: string[] = [];\n if (activeRange) {\n const lowPct = ctx.valueToFraction(activeRange[0]) * 100;\n const highPct = ctx.valueToFraction(activeRange[1]) * 100;\n const h = { ...DEFAULT_HATCH, ...hatch };\n const stripe = `repeating-linear-gradient(${h.angleDeg}deg, transparent 0 ${h.stripe}px, var(--wzl-panel-bg, #fafbfc) ${h.stripe}px ${h.stripe + h.gap}px)`;\n const dimColor = `color-mix(in srgb, var(--wzl-panel-bg, #fafbfc) ${h.dim}%, transparent)`;\n const dimOverlay = `linear-gradient(${dimColor}, ${dimColor})`;\n\n if (lowPct > 0) {\n layers.push(`${dimOverlay} left 0 / ${lowPct.toFixed(2)}% 100% no-repeat`);\n layers.push(`${stripe} left 0 / ${lowPct.toFixed(2)}% 100% no-repeat`);\n }\n if (highPct < 100) {\n const wR = (100 - highPct).toFixed(2);\n layers.push(`${dimOverlay} right 0 / ${wR}% 100% no-repeat`);\n layers.push(`${stripe} right 0 / ${wR}% 100% no-repeat`);\n }\n }\n layers.push(baseGradient);\n\n const style: CSSProperties = {\n position: 'absolute',\n inset: 0,\n background: layers.join(', '),\n };\n return <div style={style} />;\n };\n}\n","// OKLCH math from Björn Ottosson: https://bottosson.github.io/posts/oklab/\nimport { oklchToOklab, oklabToSrgbU8, rgbaToHex } from '@weasel-js/core';\n\nexport type ChromaCurve = {\n lRange: [number, number];\n midL: number;\n cBot: number;\n cPeak: number;\n cTop: number;\n};\n\nexport type ChromaCurvePoint = { L: number; C: number };\n\nexport function oklchToHex(L: number, C: number, Hdeg: number): string {\n // Delegate to the kit's OKLab pipeline (kit angle unit is radians) →\n // gamut-clipped u8 sRGB → `#rrggbb`.\n const [l, a, b] = oklchToOklab(L, C, (Hdeg * Math.PI) / 180);\n const [r, g, bl] = oklabToSrgbU8(l, a, b);\n return rgbaToHex([r / 255, g / 255, bl / 255]);\n}\n\nexport function chromaAt(L: number, curve: ChromaCurve): number {\n const [lo, hi] = curve.lRange;\n if (L <= lo) return curve.cBot;\n if (L >= hi) return curve.cTop;\n if (L <= curve.midL) return curve.cBot + (curve.cPeak - curve.cBot) * ((L - lo) / (curve.midL - lo));\n return curve.cPeak + (curve.cTop - curve.cPeak) * ((L - curve.midL) / (hi - curve.midL));\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../src/paintGradientTrack.tsx","../src/color/oklch.ts"],"sourcesContent":["import type { ReactNode, CSSProperties } from 'react';\nimport type { TrackCtx } from './components/Slider';\n\nexport type GradientTrackOpts = {\n gradient: (t: number) => string;\n samples?: number;\n activeRange?: [number, number];\n hatch?: {\n angleDeg?: number;\n stripe?: number;\n gap?: number;\n dim?: number;\n };\n};\n\nconst DEFAULT_HATCH = { angleDeg: 135, stripe: 2, gap: 4, dim: 75 };\n\nexport function paintGradientTrack(opts: GradientTrackOpts): (ctx: TrackCtx) => ReactNode {\n const { gradient, samples = 16, activeRange, hatch } = opts;\n\n return (ctx: TrackCtx) => {\n const stops: string[] = [];\n for (let i = 0; i <= samples; i++) {\n const t = i / samples;\n stops.push(`${gradient(t)} ${(t * 100).toFixed(1)}%`);\n }\n const baseGradient = `linear-gradient(to right, ${stops.join(', ')})`;\n\n const layers: string[] = [];\n if (activeRange) {\n const lowPct = ctx.valueToFraction(activeRange[0]) * 100;\n const highPct = ctx.valueToFraction(activeRange[1]) * 100;\n const h = { ...DEFAULT_HATCH, ...hatch };\n const stripe = `repeating-linear-gradient(${h.angleDeg}deg, transparent 0 ${h.stripe}px, var(--wzl-panel-bg, #fafbfc) ${h.stripe}px ${h.stripe + h.gap}px)`;\n const dimColor = `color-mix(in srgb, var(--wzl-panel-bg, #fafbfc) ${h.dim}%, transparent)`;\n const dimOverlay = `linear-gradient(${dimColor}, ${dimColor})`;\n\n if (lowPct > 0) {\n layers.push(`${dimOverlay} left 0 / ${lowPct.toFixed(2)}% 100% no-repeat`);\n layers.push(`${stripe} left 0 / ${lowPct.toFixed(2)}% 100% no-repeat`);\n }\n if (highPct < 100) {\n const wR = (100 - highPct).toFixed(2);\n layers.push(`${dimOverlay} right 0 / ${wR}% 100% no-repeat`);\n layers.push(`${stripe} right 0 / ${wR}% 100% no-repeat`);\n }\n }\n layers.push(baseGradient);\n\n const style: CSSProperties = {\n position: 'absolute',\n inset: 0,\n background: layers.join(', '),\n };\n return <div style={style} />;\n };\n}\n","// OKLCH math from Björn Ottosson: https://bottosson.github.io/posts/oklab/\nimport { oklchToOklab, oklabToSrgbU8, rgbaToHex } from '@weasel-js/core';\n\nexport type ChromaCurve = {\n lRange: [number, number];\n midL: number;\n cBot: number;\n cPeak: number;\n cTop: number;\n};\n\nexport type ChromaCurvePoint = { L: number; C: number };\n\nexport function oklchToHex(L: number, C: number, Hdeg: number): string {\n // Delegate to the kit's OKLab pipeline (kit angle unit is radians) →\n // gamut-clipped u8 sRGB → `#rrggbb`.\n const [l, a, b] = oklchToOklab(L, C, (Hdeg * Math.PI) / 180);\n const [r, g, bl] = oklabToSrgbU8(l, a, b);\n return rgbaToHex([r / 255, g / 255, bl / 255]);\n}\n\nexport function chromaAt(L: number, curve: ChromaCurve): number {\n const [lo, hi] = curve.lRange;\n if (L <= lo) return curve.cBot;\n if (L >= hi) return curve.cTop;\n if (L <= curve.midL) return curve.cBot + (curve.cPeak - curve.cBot) * ((L - lo) / (curve.midL - lo));\n return curve.cPeak + (curve.cTop - curve.cPeak) * ((L - curve.midL) / (hi - curve.midL));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,IAAM,KAAgB;CAAE,UAAU;CAAK,QAAQ;CAAG,KAAK;CAAG,KAAK;CAAI;AAEnE,SAAgB,GAAmB,GAAuD;CACxF,IAAM,EAAE,aAAU,aAAU,IAAI,gBAAa,aAAU;CAEvD,QAAQ,MAAkB;EACxB,IAAM,IAAkB,EAAE;EAC1B,KAAK,IAAI,IAAI,GAAG,KAAK,GAAS,KAAK;GACjC,IAAM,IAAI,IAAI;GACd,EAAM,KAAK,GAAG,EAAS,EAAE,CAAC,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC,GAAG;;EAEvD,IAAM,IAAe,6BAA6B,EAAM,KAAK,KAAK,CAAC,IAE7D,IAAmB,EAAE;EAC3B,IAAI,GAAa;GACf,IAAM,IAAS,EAAI,gBAAgB,EAAY,GAAG,GAAG,KAC/C,IAAU,EAAI,gBAAgB,EAAY,GAAG,GAAG,KAChD,IAAI;IAAE,GAAG;IAAe,GAAG;IAAO,EAClC,IAAS,6BAA6B,EAAE,SAAS,qBAAqB,EAAE,OAAO,mCAAmC,EAAE,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,MACjJ,IAAW,mDAAmD,EAAE,IAAI,kBACpE,IAAa,mBAAmB,EAAS,IAAI,EAAS;GAM5D,IAJI,IAAS,MACX,EAAO,KAAK,GAAG,EAAW,YAAY,EAAO,QAAQ,EAAE,CAAC,kBAAkB,EAC1E,EAAO,KAAK,GAAG,EAAO,YAAY,EAAO,QAAQ,EAAE,CAAC,kBAAkB,GAEpE,IAAU,KAAK;IACjB,IAAM,KAAM,MAAM,GAAS,QAAQ,EAAE;IAErC,AADA,EAAO,KAAK,GAAG,EAAW,aAAa,EAAG,kBAAkB,EAC5D,EAAO,KAAK,GAAG,EAAO,aAAa,EAAG,kBAAkB;;;EAU5D,OAPA,EAAO,KAAK,EAAa,EAOlB,mBAAC,OAAD,EAAY,OAAA;GAJjB,UAAU;GACV,OAAO;GACP,YAAY,EAAO,KAAK,KAAK;GAEZ,EAAS,CAAA;;;;;ACzChC,SAAgB,GAAW,GAAW,GAAW,GAAsB;CAGrE,IAAM,CAAC,GAAG,GAAG,KAAK,GAAa,GAAG,GAAI,IAAO,KAAK,KAAM,IAAI,EACtD,CAAC,GAAG,GAAG,KAAM,GAAc,GAAG,GAAG,EAAE;CACzC,OAAO,GAAU;EAAC,IAAI;EAAK,IAAI;EAAK,IAAK;EAAI,CAAC;;AAGhD,SAAgB,GAAS,GAAW,GAA4B;CAC9D,IAAM,CAAC,GAAI,KAAM,EAAM;CAIvB,OAHI,KAAK,IAAW,EAAM,OACtB,KAAK,IAAW,EAAM,OACtB,KAAK,EAAM,OAAa,EAAM,QAAQ,EAAM,QAAQ,EAAM,UAAU,IAAI,MAAO,EAAM,OAAO,MACzF,EAAM,SAAS,EAAM,OAAO,EAAM,WAAW,IAAI,EAAM,SAAS,IAAK,EAAM"}
|