zds-pickers 4.1.8 → 4.2.1

package/dist/other/SvgText.js

@@ -1,6 +1,35 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 const MEASUREMENT_ELEMENT_ID = '__react_svg_text_measurement_id';
+/**
+ * The only computed properties that affect measured text geometry. Copying
+ * the full computed style (~300 properties) onto the measurement node per
+ * instance forced a style flush that dominated initial render in hosts
+ * with many SvgText instances.
+ */
+const FONT_PROPERTIES = [
+    'font-family',
+    'font-feature-settings',
+    'font-kerning',
+    'font-size',
+    'font-stretch',
+    'font-style',
+    'font-variant',
+    'font-weight',
+    'letter-spacing',
+    'text-transform',
+    'word-spacing',
+];
+const fontSignature = (style) => FONT_PROPERTIES.map(key => style.getPropertyValue(key)).join('|');
+/**
+ * Word widths only depend on the word and the font it renders in, so they
+ * are cached module-wide by font signature. Text that repeats across
+ * instances (labels, numbers) measures once per font, ever.
+ */
+const fontMetricsCache = new Map();
+const __resetFontMetricsCacheForTests = () => {
+    fontMetricsCache.clear();
+};
 const calculateWordsByLines = (text, wordWidths, maxWidth, maxHeight) => {
     const { lineHeight, spaceWidth, wordsWithComputedWidth } = wordWidths;
     return text.split(/\s+/).reduce((result, word) => {
@@ -27,19 +56,39 @@ const calculateWordsByLines = (text, wordWidths, maxWidth, maxHeight) => {
 };
 const calculateWordWidths = (style, textNode, text) => {
     if (style && textNode) {
-        // biome-ignore lint/complexity/noForEach: <explanation>
-        Array.from(style).forEach(key => textNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key)));
+        const signature = fontSignature(style);
+        let metrics = fontMetricsCache.get(signature);
         const wordArray = [...new Set(String(text).split(/\s+/))];
-        const wordsWithComputedWidth = wordArray.reduce((wordMap, word) => {
-            textNode.textContent = word;
-            // biome-ignore lint/performance/noAccumulatingSpread: <explanation>
-            return { ...wordMap, [word]: textNode.getBBox().width };
-        }, {});
-        textNode.textContent = '\u00A0';
-        const spaceWidth = textNode?.getComputedTextLength?.() || 8;
-        const lineHeight = textNode.getBBox().height;
-        textNode.setAttribute('style', '');
-        return { wordsWithComputedWidth, spaceWidth, lineHeight };
+        const knownWidths = metrics?.widths;
+        const missingWords = knownWidths
+            ? wordArray.filter(word => !knownWidths.has(word))
+            : wordArray;
+        if (!metrics || missingWords.length) {
+            for (const key of FONT_PROPERTIES) {
+                textNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key));
+            }
+            if (!metrics) {
+                textNode.textContent = '\u00A0';
+                const spaceWidth = textNode?.getComputedTextLength?.() || 8;
+                const lineHeight = textNode.getBBox().height;
+                metrics = { widths: new Map(), spaceWidth, lineHeight };
+                fontMetricsCache.set(signature, metrics);
+            }
+            for (const word of missingWords) {
+                textNode.textContent = word;
+                metrics.widths.set(word, textNode.getBBox().width);
+            }
+            textNode.setAttribute('style', '');
+        }
+        const wordsWithComputedWidth = {};
+        for (const word of wordArray) {
+            wordsWithComputedWidth[word] = metrics.widths.get(word) ?? 0;
+        }
+        return {
+            wordsWithComputedWidth,
+            spaceWidth: metrics.spaceWidth,
+            lineHeight: metrics.lineHeight,
+        };
     }
     return undefined;
 };
@@ -67,14 +116,28 @@ const SvgText = (props) => {
         if (el === null) {
             const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
             svg.setAttribute('id', MEASUREMENT_ELEMENT_ID);
+            svg.setAttribute('aria-hidden', 'true');
+            // Rendered but invisible: getBBox returns zeros under display:none,
+            // so park it offscreen instead. Being outside any host SVG also
+            // keeps per-word getBBox from forcing layout of live content.
+            svg.style.position = 'fixed';
+            svg.style.left = '-9999px';
+            svg.style.top = '0';
+            const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            svg.appendChild(textEl);
             document.body.appendChild(svg);
-            svg.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'text'));
-            measureRef.current = svg;
-            return () => {
-                document.body.removeChild(svg);
-            };
+            // Measure against the <text> child — pointing at the <svg> container
+            // made every measurement return the svg's own box.
+            measureRef.current = textEl;
+            // Deliberately no cleanup: the element is a shared singleton and
+            // other mounted instances may still hold it as their measure target.
+            return;
         }
-        measureRef.current = el;
+        // Hosts may provide either the <text> itself or a container around one.
+        measureRef.current =
+            el.tagName.toLowerCase() === 'text'
+                ? el
+                : (el.querySelector('text') ?? el);
     }, []);
     useEffect(() => {
         const wordWithWidths = calculateWordWidths(style, measureRef.current, text);
@@ -105,4 +168,4 @@ const SvgText = (props) => {
         // textAnchor={textAnchor}
         transform: transform, ...rest, children: _jsxs(_Fragment, { children: [displayedLines.map((line, idx) => (_jsx("tspan", { dx: x + dx, dy: idx === 0 ? startDy + dy : wordWidths?.lineHeight || 0, x: 0, children: line.words.join(' ') }, idx))), textLines.length && displayedLines.length !== textLines.length && (_jsxs(_Fragment, { children: [_jsx("tspan", { children: "..." }), _jsx("title", { children: text })] }))] }) }));
 };
-export { SvgText, MEASUREMENT_ELEMENT_ID };
+export { __resetFontMetricsCacheForTests, calculateWordsByLines, calculateWordWidths, MEASUREMENT_ELEMENT_ID, SvgText, };

package/dist/pickers/Knob.js

@@ -5,7 +5,7 @@ import { RotaryKnob } from '../rotaryKnob';
 import { assertRange } from '../utils';
 import { knobSkin10 } from './knobSkin10';
 const Knob = (props) => {
-    const { disabled = false, max = 127, min = 0, onChange, value: initialValue = 0, wheelEnabled = false, wheelSensitivity = 0.1, ...rest } = props;
+    const { centered = false, disabled = false, max = 127, min = 0, onChange, value: initialValue = 0, wheelEnabled = false, wheelSensitivity = 0.1, ...rest } = props;
     const [value, setValue] = useStateWithDynamicDefault(initialValue);
     const handleChange = (val) => {
         if (disabled)
@@ -36,7 +36,7 @@ const Knob = (props) => {
         onChange,
         setValue,
     ]);
-    return (_jsx(RotaryKnob, { clampMax: 320, clampMin: 40, className: "zds-pickers__knob-container", disabled: disabled, onChange: handleChange, onWheel: wheelEnabled ? handleWheel : undefined, preciseMode: false, rotateDegrees: 180, 
+    return (_jsx(RotaryKnob, { centered: centered, clampMax: 320, clampMin: 40, className: "zds-pickers__knob-container", disabled: disabled, onChange: handleChange, onWheel: wheelEnabled ? handleWheel : undefined, preciseMode: false, rotateDegrees: 180, 
         /**
          * To see all skins:
          * http://react-rotary-knob-skins-preview.surge.sh/

package/dist/pickers/KnobPicker.js

@@ -4,7 +4,7 @@ import { arraySequence } from '../utils';
 import { Knob } from './Knob';
 import { Select } from './Select';
 const KnobPicker = forwardRef((props, ref) => {
-    const { disabled, highToLow, includeLabel, includePicker, knobProps, label, max = 127, min = 0, onChange, shrinkLabel, value = 0, wheelEnabled, wheelSensitivity = 0.1, ...rest } = props;
+    const { centered, disabled, highToLow, includeLabel, includePicker, knobProps, label, max = 127, min = 0, onChange, shrinkLabel, value = 0, wheelEnabled, wheelSensitivity = 0.1, ...rest } = props;
     const options = useMemo(() => {
         const result = arraySequence(max - min + 1)
             .map(i => min + i)
@@ -17,7 +17,8 @@ const KnobPicker = forwardRef((props, ref) => {
                         onChange,
                         options,
                         ref,
-                        value })), _jsx(Knob, { disabled,
+                        value })), _jsx(Knob, { centered,
+                        disabled,
                         max,
                         min,
                         onChange,

package/dist/pickers/knobSkin10.js

@@ -1,3 +1,9 @@
+import { buildValueArcPath } from '../rotaryKnob/arcPath';
+/** Value-arc geometry in the skin's fixed group: knob center and a radius in
+ * the dark bezel ring between the face plate (r≈86) and outer edge (r≈99). */
+const ARC_CX = 100;
+const ARC_CY = 100;
+const ARC_R = 93;
 const knobSkin10 = {
     knobX: 71.44,
     knobY: 71.44,
@@ -60,13 +66,15 @@ const knobSkin10 = {
                   <path d="M72.4209282,3.63066376 L88.6786876,16.869789 C81.585496,18.1548295 76.1662428,18.7973498 72.4209282,18.7973498 C68.6756135,18.7973498 63.2563604,18.1548295 56.1631688,16.869789 L72.4209282,3.63066376 Z" id="Rectangle" fill="#E6D7D7" transform="translate(72.420928, 11.214007) scale(1, -1) translate(-72.420928, -11.214007) "/>
               </g>
 
+              <!-- Value arc: anchor->value fill in the bezel ring; path data is
+                   computed per-render via updateAttributes (see below).
+                   Consumers can restyle it via the knob-value-arc class. -->
+              <path id="valueArc" class="knob-value-arc" d="" stroke="#35619F" stroke-width="7" fill="none" opacity="0.85" stroke-linecap="round" pointer-events="none"/>
+
               <!-- Fixed position marks (outside the rotating knob group) -->
               <!-- 12:00 position mark (more prominent) -->
               <line x1="100.0098534" y1="15" x2="100.0098534" y2="35" stroke="#CCCCCC" stroke-width="4" opacity="0.9"/>
 
-              <!-- Arc fill between end position marks -->
-             <!-- <path d="M 35 165 A 65 65 0 0 1 165 165" stroke="#666666" stroke-width="8" fill="none" opacity="0.3"/> -->
-
               <!-- End position marks (0 and 127) -->
               <!-- 0 position mark (40 degrees from top, clockwise) - at outer radius beyond knob edge -->
               <!-- This should be at the bottom-left where the value indicator points when at 0 -->
@@ -106,6 +114,26 @@ const knobSkin10 = {
                 },
             ],
         },
+        {
+            element: '#valueArc',
+            attrs: [
+                {
+                    name: 'd',
+                    value: (props, value) => buildValueArcPath({
+                        value,
+                        min: props.min ?? 0,
+                        max: props.max ?? 127,
+                        centered: props.centered ?? false,
+                        cx: ARC_CX,
+                        cy: ARC_CY,
+                        r: ARC_R,
+                        clampMin: props.clampMin ?? 40,
+                        clampMax: props.clampMax ?? 320,
+                        rotateDegrees: props.rotateDegrees ?? 180,
+                    }),
+                },
+            ],
+        },
     ],
 };
 export { knobSkin10 };

package/dist/rotaryKnob/arcPath.js

@@ -0,0 +1,39 @@
+/**
+ * Pure geometry for the knob's value-arc fill.
+ *
+ * Angle convention matches RotaryKnob's convertValueToAngle: a value maps
+ * linearly onto [clampMin, clampMax] sweep degrees, then rotateDegrees is
+ * added (mod 360). The resulting angle is measured clockwise from 12 o'clock,
+ * because the skin's #knob indicator points up at rotation 0.
+ *
+ * With Knob's constants (clampMin 40, clampMax 320, rotateDegrees 180):
+ * min → 220° (bottom-left), max → 140° (bottom-right), midpoint → 0° (top).
+ */
+/** Below this many sweep degrees no arc is drawn (avoids zero-length paths). */
+const MIN_ARC_DEGREES = 0.5;
+const point = (cx, cy, r, clockwiseFromTopDeg) => {
+    const rad = (clockwiseFromTopDeg * Math.PI) / 180;
+    return [cx + r * Math.sin(rad), cy - r * Math.cos(rad)];
+};
+const fmt = (n) => String(Math.round(n * 1000) / 1000);
+/**
+ * SVG path `d` for the arc from the anchor (min, or sweep midpoint when
+ * centered) to the current value. Empty string when there is nothing to draw.
+ */
+const buildValueArcPath = ({ value, min, max, centered = false, cx = 100, cy = 100, r = 93, clampMin = 40, clampMax = 320, rotateDegrees = 180, }) => {
+    if (max === min)
+        return '';
+    const ratio = Math.min(1, Math.max(0, (value - min) / (max - min)));
+    const sweepValue = clampMin + ratio * (clampMax - clampMin);
+    const sweepAnchor = centered ? (clampMin + clampMax) / 2 : clampMin;
+    const delta = sweepValue - sweepAnchor;
+    if (Math.abs(delta) < MIN_ARC_DEGREES)
+        return '';
+    const angleOf = (sweep) => (((sweep + rotateDegrees) % 360) + 360) % 360;
+    const [x1, y1] = point(cx, cy, r, angleOf(sweepAnchor));
+    const [x2, y2] = point(cx, cy, r, angleOf(sweepValue));
+    const largeArc = Math.abs(delta) > 180 ? 1 : 0;
+    const sweepFlag = delta > 0 ? 1 : 0;
+    return `M ${fmt(x1)} ${fmt(y1)} A ${fmt(r)} ${fmt(r)} 0 ${largeArc} ${sweepFlag} ${fmt(x2)} ${fmt(y2)}`;
+};
+export { buildValueArcPath };

package/dist/rotaryKnob/index.js

@@ -25,7 +25,10 @@ import { getAngleForPoint } from './utils';
  * Generic knob component
  */
 const RotaryKnob = (props) => {
-    const { clampMax = 360, clampMin = 0, defaultValue = 0, disabled = false, format = (val) => val.toFixed(0), max = 100, min = 0, onChange = () => { }, onEnd = () => { }, onStart = () => { }, preciseMode = true, rotateDegrees = 0, skin = defaultSkin, step = 1, style, unlockDistance = 100, value, ...rest } = props;
+    const { 
+    // Consumed by skins via updateAttributes; destructured so it doesn't
+    // leak onto the container <div> through ...rest.
+    centered: _centered, clampMax = 360, clampMin = 0, defaultValue = 0, disabled = false, format = (val) => val.toFixed(0), max = 100, min = 0, onChange = () => { }, onEnd = () => { }, onStart = () => { }, preciseMode = true, rotateDegrees = 0, skin = defaultSkin, step = 1, style, unlockDistance = 100, value, ...rest } = props;
     const [isControlled, setIsControlled] = useState(value !== undefined);
     const container = useRef(null);
     const inputRef = useRef(null);

package/dist/types/other/SvgText.d.ts

@@ -1,14 +1,17 @@
 declare const MEASUREMENT_ELEMENT_ID = "__react_svg_text_measurement_id";
+declare const __resetFontMetricsCacheForTests: () => void;
 type WordsByLine = {
     words: string[];
     width: number;
     showLine: boolean;
 };
+declare const calculateWordsByLines: (text: string, wordWidths: WordWidths, maxWidth: number, maxHeight: number) => WordsByLine[];
 type WordWidths = {
     wordsWithComputedWidth: Record<string, number>;
     spaceWidth: number;
     lineHeight: number;
 };
+declare const calculateWordWidths: (style?: CSSStyleDeclaration, textNode?: SVGGraphicsElement | null, text?: string) => WordWidths | undefined;
 type TextProps = Partial<HTMLOrSVGElement> & {
     className?: string;
     dx?: number;
@@ -23,5 +26,5 @@ type TextProps = Partial<HTMLOrSVGElement> & {
     y?: number;
 };
 declare const SvgText: (props: TextProps) => import("react/jsx-runtime").JSX.Element;
-export { SvgText, MEASUREMENT_ELEMENT_ID };
+export { __resetFontMetricsCacheForTests, calculateWordsByLines, calculateWordWidths, MEASUREMENT_ELEMENT_ID, SvgText, };
 export type { TextProps, WordWidths, WordsByLine };

package/dist/types/pickers/Knob.d.ts

@@ -1,4 +1,6 @@
 type KnobProps = {
+    /** Anchor the value arc at 12 o'clock (bipolar display) instead of min. */
+    centered?: boolean;
     disabled?: boolean;
     max?: number;
     min?: number;

package/dist/types/pickers/KnobPicker.d.ts

@@ -1,10 +1,12 @@
 import type { GroupBase, SelectInstance } from 'react-select';
+import type { KnobProps } from './Knob';
 import type { Option, SelectProps } from './Select';
 type KnobPickerProps = SelectProps<number> & {
+    centered?: boolean;
     highToLow?: boolean;
     includeLabel?: boolean;
     includePicker?: boolean;
-    knobProps?: Partial<KnobPickerProps>;
+    knobProps?: Partial<KnobProps>;
     max?: number;
     min?: number;
     wheelEnabled?: boolean;
@@ -39,10 +41,11 @@ declare const KnobPicker: import("react").ForwardRefExoticComponent<Partial<impo
     shrinkLabel?: boolean;
     value?: number | undefined;
 } & {
+    centered?: boolean;
     highToLow?: boolean;
     includeLabel?: boolean;
     includePicker?: boolean;
-    knobProps?: Partial<KnobPickerProps>;
+    knobProps?: Partial<KnobProps>;
     max?: number;
     min?: number;
     wheelEnabled?: boolean;

package/dist/types/pickers/knobSkin10.d.ts

@@ -1,14 +1,22 @@
+import type { RotaryKnobProps } from '../rotaryKnob';
 declare const knobSkin10: {
     knobX: number;
     knobY: number;
     svg: string;
-    updateAttributes: {
+    updateAttributes: ({
         element: string;
-        content: (_props: React.CSSProperties, value: number) => string;
+        content: (_props: RotaryKnobProps, value: number) => string;
         attrs: {
             name: string;
             value: () => string;
         }[];
-    }[];
+    } | {
+        element: string;
+        attrs: {
+            name: string;
+            value: (props: RotaryKnobProps, value: number) => string;
+        }[];
+        content?: undefined;
+    })[];
 };
 export { knobSkin10 };

package/dist/types/rotaryKnob/arcPath.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Pure geometry for the knob's value-arc fill.
+ *
+ * Angle convention matches RotaryKnob's convertValueToAngle: a value maps
+ * linearly onto [clampMin, clampMax] sweep degrees, then rotateDegrees is
+ * added (mod 360). The resulting angle is measured clockwise from 12 o'clock,
+ * because the skin's #knob indicator points up at rotation 0.
+ *
+ * With Knob's constants (clampMin 40, clampMax 320, rotateDegrees 180):
+ * min → 220° (bottom-left), max → 140° (bottom-right), midpoint → 0° (top).
+ */
+type ValueArcOptions = {
+    value: number;
+    min: number;
+    max: number;
+    /** Anchor the arc at the sweep midpoint (12 o'clock) instead of min. */
+    centered?: boolean;
+    cx?: number;
+    cy?: number;
+    r?: number;
+    clampMin?: number;
+    clampMax?: number;
+    rotateDegrees?: number;
+};
+/**
+ * SVG path `d` for the arc from the anchor (min, or sweep midpoint when
+ * centered) to the current value. Empty string when there is nothing to draw.
+ */
+declare const buildValueArcPath: ({ value, min, max, centered, cx, cy, r, clampMin, clampMax, rotateDegrees, }: ValueArcOptions) => string;
+export { buildValueArcPath };
+export type { ValueArcOptions };

package/dist/types/rotaryKnob/index.d.ts

@@ -2,28 +2,8 @@
  * Show the rotation circle and marker
  * dispatches drag events
  */
-/**
- * type definition for the skin system attribute modification element
- */
-type AttributeSetValue = {
-    name: string;
-    value: (props: unknown, value: unknown) => string;
-};
-/**
- * Type definition for the skin element manipulation block
- */
-interface UpdateElement {
-    element: string;
-    content: (_props: React.CSSProperties, value: number) => string;
-    attrs: AttributeSetValue[];
-}
-interface Skin {
-    svg: string;
-    knobX: number;
-    knobY: number;
-    updateAttributes: UpdateElement[];
-}
 type KnobProps = Omit<React.ComponentProps<'div'>, 'onChange'> & {
+    centered?: boolean;
     clampMax?: number;
     clampMin?: number;
     defaultValue?: number;
@@ -42,8 +22,32 @@ type KnobProps = Omit<React.ComponentProps<'div'>, 'onChange'> & {
     unlockDistance?: number;
     value?: number;
 };
+/**
+ * type definition for the skin system attribute modification element.
+ * Skins receive the knob's full props (min/max/centered/clamp*, etc.) plus
+ * the current value, so they can derive geometry like the value arc.
+ */
+type AttributeSetValue = {
+    name: string;
+    value: (props: KnobProps, value: number) => string;
+};
+/**
+ * Type definition for the skin element manipulation block
+ */
+interface UpdateElement {
+    element: string;
+    content?: (props: KnobProps, value: number) => string;
+    attrs: AttributeSetValue[];
+}
+interface Skin {
+    svg: string;
+    knobX: number;
+    knobY: number;
+    updateAttributes: UpdateElement[];
+}
 /**
  * Generic knob component
  */
 declare const RotaryKnob: (props: KnobProps) => import("react/jsx-runtime").JSX.Element;
 export { RotaryKnob };
+export type { KnobProps as RotaryKnobProps, Skin, UpdateElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.1.8",
+  "version": "4.2.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -21,25 +21,24 @@
   },
   "sideEffects": ["lib/soundfonts/*.js", "dist/soundfonts/*.js"],
   "files": ["dist", "lib/soundfonts"],
-  "homepage": "https://github.com/dkadrios/zds-pickers#readme",
+  "homepage": "https://github.com/nebiru-software/zds-pickers#readme",
   "license": "MIT",
   "author": "Darin Kadrioski <dkadrios@gmail.com>",
   "bugs": {
-    "url": "https://github.com/dkadrios/zds-pickers/issues"
+    "url": "https://github.com/nebiru-software/zds-pickers/issues"
   },
   "description": "Picker controls that are common to Zendrum Studio apps",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/dkadrios/zds-pickers.git"
+    "url": "git+https://github.com/nebiru-software/zds-pickers.git"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@storybook/addon-docs": "8.6.18",
-    "@storybook/addon-essentials": "8.6.18",
-    "@storybook/addon-links": "8.6.18",
-    "@storybook/builder-vite": "10.4.6",
-    "@storybook/react": "8.6.18",
-    "@storybook/react-vite": "10.4.6",
+    "@storybook/addon-docs": "10.5.5",
+    "@storybook/addon-links": "10.5.5",
+    "@storybook/builder-vite": "10.5.5",
+    "@storybook/react": "10.5.5",
+    "@storybook/react-vite": "10.5.5",
     "@types/d3-drag": "3.0.7",
     "@types/d3-scale": "4.0.9",
     "@types/d3-selection": "3.0.11",
@@ -49,19 +48,19 @@
     "classnames": "2.5.1",
     "globals": "15.15.0",
     "immer": "10.1.1",
-    "nodemon": "3.1.9",
+    "nodemon": "3.1.14",
     "prop-types": "15.8.1",
     "rc-slider": "11.1.8",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-select": "5.10.1",
-    "storybook": "8.6.18",
+    "storybook": "10.5.5",
     "typescript": "5.8.2",
     "vite": "^8.0.16",
+    "vitest": "4.1.10",
     "zds-mappings": "1.4.9"
   },
   "dependencies": {
-    "caniuse-lite": "1.0.30001741",
     "d3-drag": "3.0.0",
     "d3-scale": "4.0.2",
     "d3-selection": "3.0.0",
@@ -75,7 +74,7 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-select": ">=5.10.0",
-    "zds-mappings": "1.4.9"
+    "zds-mappings": "^1.4.9"
   },
   "scripts": {
     "dev": "vite",
@@ -85,6 +84,11 @@
     "preview": "vite preview",
     "sb": "storybook dev --quiet -p 6006 --no-open",
     "sb:watch": "nodemon --watch .storybook -e ts,tsx,js,jsx --exec 'npm run sb'",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "lint:ci": "biome check",
+    "test": "vitest run"
+  },
+  "engines": {
+    "node": ">=22"
   }
 }