zds-pickers 4.1.7 → 4.2.0

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/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.7",
+  "version": "4.2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -9,6 +9,9 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
+    },
+    "./dist/soundfonts/acoustic_grand_piano-mp3": {
+      "default": "./dist/soundfonts/acoustic_grand_piano-mp3.js"
     }
   },
   "private": false,
@@ -18,47 +21,46 @@
   },
   "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": "8.6.18",
-    "@storybook/react": "8.6.18",
-    "@storybook/react-vite": "8.6.18",
+    "@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",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
-    "@vitejs/plugin-react-swc": "3.8.0",
+    "@vitejs/plugin-react-swc": "4.3.1",
     "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": "^6.3.6",
+    "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",
@@ -72,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",
@@ -82,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"
   }
 }