@molecule/app-adjustment-slider-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/AdjustmentSlider.d.ts

@@ -0,0 +1,36 @@
+import type { ReactElement } from 'react';
+import type { AdjustmentSliderProps } from './types.js';
+/**
+ * Bipolar (zero-center) adjustment slider — a labelled `<input type="range">`
+ * tuned for photo-editor / DAW / animation parameter controls (brightness,
+ * contrast, saturation, exposure, gain, pan, etc.).
+ *
+ * Behaviour:
+ * - When `bipolar` is `true` (default), a center mark is rendered at zero
+ *   and the reset target is `0`. When `false`, the slider is unipolar and
+ *   the reset target is `min`.
+ * - Double-clicking the input resets the value (calling `onReset` if
+ *   provided, otherwise emitting `defaultResetValue(min, bipolar)` via
+ *   `onChange`).
+ * - Up/Right arrows nudge by `step`; Down/Left arrows nudge by `-step`.
+ *   Holding Shift multiplies the nudge by 10.
+ * - The numeric value display is formatted via `format` if supplied,
+ *   otherwise via `value + (unit || '')`.
+ *
+ * @param props - Component props.
+ * @param props.label - Visible control label.
+ * @param props.value - Current numeric value.
+ * @param props.onChange - Called whenever the value changes.
+ * @param props.min - Lower bound (default `-100`).
+ * @param props.max - Upper bound (default `100`).
+ * @param props.step - Step increment (default `1`).
+ * @param props.bipolar - Bipolar / zero-center mode (default `true`).
+ * @param props.unit - Optional unit suffix appended to the default formatter.
+ * @param props.format - Optional custom value formatter.
+ * @param props.onReset - Optional reset handler (overrides default reset).
+ * @param props.className - Optional extra classes for the outer container.
+ * @param props.dataMolId - Optional `data-mol-id` for the outer container.
+ * @returns The rendered adjustment slider.
+ */
+export declare function AdjustmentSlider({ label, value, onChange, min, max, step, bipolar, unit, format, onReset, className, dataMolId, }: AdjustmentSliderProps): ReactElement;
+//# sourceMappingURL=AdjustmentSlider.d.ts.map

package/dist/AdjustmentSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdjustmentSlider.d.ts","sourceRoot":"","sources":["../src/AdjustmentSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA8B,YAAY,EAAE,MAAM,OAAO,CAAA;AAMrE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAGvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAU,EACV,GAAS,EACT,IAAQ,EACR,OAAc,EACd,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAS,GACV,EAAE,qBAAqB,GAAG,YAAY,CA6GtC"}

package/dist/AdjustmentSlider.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef } from 'react';
+import { useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { clampStep, defaultFormatter, defaultResetValue, keyboardNudge } from './utilities.js';
+/**
+ * Bipolar (zero-center) adjustment slider — a labelled `<input type="range">`
+ * tuned for photo-editor / DAW / animation parameter controls (brightness,
+ * contrast, saturation, exposure, gain, pan, etc.).
+ *
+ * Behaviour:
+ * - When `bipolar` is `true` (default), a center mark is rendered at zero
+ *   and the reset target is `0`. When `false`, the slider is unipolar and
+ *   the reset target is `min`.
+ * - Double-clicking the input resets the value (calling `onReset` if
+ *   provided, otherwise emitting `defaultResetValue(min, bipolar)` via
+ *   `onChange`).
+ * - Up/Right arrows nudge by `step`; Down/Left arrows nudge by `-step`.
+ *   Holding Shift multiplies the nudge by 10.
+ * - The numeric value display is formatted via `format` if supplied,
+ *   otherwise via `value + (unit || '')`.
+ *
+ * @param props - Component props.
+ * @param props.label - Visible control label.
+ * @param props.value - Current numeric value.
+ * @param props.onChange - Called whenever the value changes.
+ * @param props.min - Lower bound (default `-100`).
+ * @param props.max - Upper bound (default `100`).
+ * @param props.step - Step increment (default `1`).
+ * @param props.bipolar - Bipolar / zero-center mode (default `true`).
+ * @param props.unit - Optional unit suffix appended to the default formatter.
+ * @param props.format - Optional custom value formatter.
+ * @param props.onReset - Optional reset handler (overrides default reset).
+ * @param props.className - Optional extra classes for the outer container.
+ * @param props.dataMolId - Optional `data-mol-id` for the outer container.
+ * @returns The rendered adjustment slider.
+ */
+export function AdjustmentSlider({ label, value, onChange, min = -100, max = 100, step = 1, bipolar = true, unit, format, onReset, className, dataMolId, }) {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const inputRef = useRef(null);
+    const formatter = useMemo(() => format ?? defaultFormatter(unit), [format, unit]);
+    const resetTarget = useMemo(() => defaultResetValue(min, bipolar), [min, bipolar]);
+    const emit = useCallback((next) => {
+        const normalized = clampStep(next, min, max, step);
+        if (normalized !== value)
+            onChange(normalized);
+    }, [max, min, onChange, step, value]);
+    const performReset = useCallback(() => {
+        if (onReset) {
+            onReset();
+            return;
+        }
+        emit(resetTarget);
+    }, [emit, onReset, resetTarget]);
+    const handleChange = useCallback((e) => {
+        emit(Number(e.target.value));
+    }, [emit]);
+    const handleKeyDown = useCallback((e) => {
+        // Native <input type="range"> handles arrows already, but it ignores
+        // the Shift modifier — intercept and apply our 10x nudge.
+        if (!e.shiftKey)
+            return;
+        const delta = keyboardNudge(step, true);
+        let next;
+        if (e.key === 'ArrowUp' || e.key === 'ArrowRight')
+            next = value + delta;
+        else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft')
+            next = value - delta;
+        if (next === undefined)
+            return;
+        e.preventDefault();
+        emit(next);
+    }, [emit, step, value]);
+    const handleDoubleClick = useCallback(() => {
+        performReset();
+    }, [performReset]);
+    const display = formatter(value);
+    const showCenterMark = bipolar && min < 0 && max > 0;
+    // Position center mark proportionally between min..max (0..100%).
+    const centerPct = showCenterMark ? ((0 - min) / (max - min)) * 100 : 50;
+    const resetAria = t('adjustmentSlider.reset.aria', { label }, { defaultValue: `Reset ${label}` });
+    const sliderAria = t('adjustmentSlider.aria', { label }, { defaultValue: label });
+    return (_jsxs("div", { className: cm.cn(cm.stack(1), className), "data-mol-id": dataMolId ?? 'adjustment-slider', children: [_jsxs("div", { className: cm.flex({ align: 'center', justify: 'between', gap: 'sm' }), children: [_jsx("span", { className: cm.cn(cm.textSize('sm'), cm.fontWeight('medium')), children: label }), _jsx("button", { type: "button", onClick: performReset, "aria-label": resetAria, className: cm.cn(cm.textSize('xs')), "data-mol-id": "adjustment-slider-reset", style: { background: 'transparent', border: 'none', cursor: 'pointer' }, children: display })] }), _jsxs("div", { style: { position: 'relative' }, children: [showCenterMark && (_jsx("span", { "aria-hidden": "true", "data-mol-id": "adjustment-slider-center-mark", style: {
+                            position: 'absolute',
+                            left: `${centerPct}%`,
+                            top: '50%',
+                            width: 1,
+                            height: 8,
+                            transform: 'translate(-50%, -50%)',
+                            background: 'currentColor',
+                            opacity: 0.5,
+                            pointerEvents: 'none',
+                        } })), _jsx("input", { ref: inputRef, type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onKeyDown: handleKeyDown, onDoubleClick: handleDoubleClick, "aria-label": sliderAria, "data-mol-id": "adjustment-slider-input", style: { width: '100%' } })] })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Adjustment slider feature for molecule.dev.
+ *
+ * Bipolar (zero-center) numeric slider tuned for photo-editor / DAW /
+ * animation parameter controls (brightness, contrast, saturation, exposure,
+ * gain, pan, etc.). Pairs well with `@molecule/app-feature-image-canvas-react`.
+ *
+ * @example
+ * ```tsx
+ * import { AdjustmentSlider } from '@molecule/app-adjustment-slider-react'
+ *
+ * <AdjustmentSlider
+ *   label="Exposure"
+ *   value={exposure}
+ *   onChange={setExposure}
+ *   min={-100}
+ *   max={100}
+ *   step={1}
+ *   bipolar
+ *   unit="%"
+ * />
+ * ```
+ *
+ * @module
+ */
+export * from './AdjustmentSlider.js';
+export * from './types.js';
+export * from './utilities.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,cAAc,uBAAuB,CAAA;AACrC,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}

package/dist/index.js

@@ -0,0 +1,28 @@
+/**
+ * Adjustment slider feature for molecule.dev.
+ *
+ * Bipolar (zero-center) numeric slider tuned for photo-editor / DAW /
+ * animation parameter controls (brightness, contrast, saturation, exposure,
+ * gain, pan, etc.). Pairs well with `@molecule/app-feature-image-canvas-react`.
+ *
+ * @example
+ * ```tsx
+ * import { AdjustmentSlider } from '@molecule/app-adjustment-slider-react'
+ *
+ * <AdjustmentSlider
+ *   label="Exposure"
+ *   value={exposure}
+ *   onChange={setExposure}
+ *   min={-100}
+ *   max={100}
+ *   step={1}
+ *   bipolar
+ *   unit="%"
+ * />
+ * ```
+ *
+ * @module
+ */
+export * from './AdjustmentSlider.js';
+export * from './types.js';
+export * from './utilities.js';

package/dist/types.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Types for the AdjustmentSlider feature package.
+ *
+ * @module
+ */
+/** Function signature used to format the rendered numeric value. */
+export type AdjustmentSliderFormatter = (value: number) => string;
+/** Public props for `<AdjustmentSlider>`. */
+export interface AdjustmentSliderProps {
+    /** Visible label (rendered to the left of the slider). */
+    label: string;
+    /** Current numeric value. */
+    value: number;
+    /** Called whenever the slider value changes. */
+    onChange: (value: number) => void;
+    /** Lower bound. Defaults to `-100`. */
+    min?: number;
+    /** Upper bound. Defaults to `100`. */
+    max?: number;
+    /** Step increment. Defaults to `1`. */
+    step?: number;
+    /**
+     * When `true` (default), the slider is bipolar with a center mark at zero
+     * and double-click / Reset returns the value to `0`. When `false`, the
+     * slider is unipolar (a normal range slider) and double-click resets to
+     * `min`.
+     */
+    bipolar?: boolean;
+    /** Optional unit suffix (e.g. `'%'`, `'dB'`) appended to the default formatter. */
+    unit?: string;
+    /**
+     * Optional formatter overriding the default `value + (unit || '')` display.
+     * Useful for rendering e.g. `+12` (signed) or `1.4 EV`.
+     */
+    format?: AdjustmentSliderFormatter;
+    /**
+     * Optional reset handler. When provided, double-clicking the slider OR
+     * pressing the visual Reset button calls this instead of resetting to
+     * the default reset value.
+     */
+    onReset?: () => void;
+    /** Optional extra class names appended to the outer container. */
+    className?: string;
+    /** Optional `data-mol-id` for AI-agent / E2E targeting. */
+    dataMolId?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,oEAAoE;AACpE,MAAM,MAAM,yBAAyB,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;AAEjE,6CAA6C;AAC7C,MAAM,WAAW,qBAAqB;IACpC,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,yBAAyB,CAAA;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/types.js

@@ -0,0 +1,6 @@
+/**
+ * Types for the AdjustmentSlider feature package.
+ *
+ * @module
+ */
+export {};

package/dist/utilities.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Pure helpers for the AdjustmentSlider component.
+ *
+ * @module
+ */
+import type { AdjustmentSliderFormatter } from './types.js';
+/**
+ * Clamp a numeric value to the inclusive `[min, max]` range, snapping to the
+ * nearest multiple of `step` measured from `min`. Does not assume `min === 0`
+ * (so bipolar `[-100, 100]` works correctly with non-integer steps).
+ *
+ * @param value - The raw value to normalise.
+ * @param min - Inclusive lower bound.
+ * @param max - Inclusive upper bound.
+ * @param step - Step increment (must be > 0).
+ * @returns The clamped + step-snapped value.
+ */
+export declare function clampStep(value: number, min: number, max: number, step: number): number;
+/**
+ * Compute the value the slider should reset to when double-clicked.
+ *
+ * @param min - Inclusive lower bound.
+ * @param bipolar - Whether the slider is in bipolar (zero-center) mode.
+ * @returns `0` for bipolar sliders, `min` otherwise.
+ */
+export declare function defaultResetValue(min: number, bipolar: boolean): number;
+/**
+ * Build the default value formatter — appends an optional unit suffix.
+ *
+ * @param unit - Optional unit string (e.g. `'%'`).
+ * @returns A formatter producing `"<value><unit>"`.
+ */
+export declare function defaultFormatter(unit?: string): AdjustmentSliderFormatter;
+/**
+ * Compute the keyboard nudge step for arrow keys.
+ *
+ * Plain arrow → `step`. Shift-modifier → `step * 10` so users can move in
+ * coarser increments. Always at least `step`.
+ *
+ * @param step - The base step increment.
+ * @param shift - Whether the Shift modifier is held.
+ * @returns The effective per-keypress delta.
+ */
+export declare function keyboardNudge(step: number, shift: boolean): number;
+//# sourceMappingURL=utilities.d.ts.map

package/dist/utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../src/utilities.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAA;AAE3D;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUvF;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAEvE;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,yBAAyB,CAGzE;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,CAElE"}

package/dist/utilities.js

@@ -0,0 +1,78 @@
+/**
+ * Pure helpers for the AdjustmentSlider component.
+ *
+ * @module
+ */
+/**
+ * Clamp a numeric value to the inclusive `[min, max]` range, snapping to the
+ * nearest multiple of `step` measured from `min`. Does not assume `min === 0`
+ * (so bipolar `[-100, 100]` works correctly with non-integer steps).
+ *
+ * @param value - The raw value to normalise.
+ * @param min - Inclusive lower bound.
+ * @param max - Inclusive upper bound.
+ * @param step - Step increment (must be > 0).
+ * @returns The clamped + step-snapped value.
+ */
+export function clampStep(value, min, max, step) {
+    if (!Number.isFinite(value))
+        return min;
+    const clamped = Math.min(Math.max(value, min), max);
+    if (!(step > 0))
+        return clamped;
+    const snapped = min + Math.round((clamped - min) / step) * step;
+    // Re-clamp in case rounding pushed us across max.
+    const reclamped = Math.min(Math.max(snapped, min), max);
+    // Trim float drift so e.g. step=0.1 doesn't surface 0.30000000000000004.
+    const decimals = decimalsForStep(step);
+    return Number(reclamped.toFixed(decimals));
+}
+/**
+ * Compute the value the slider should reset to when double-clicked.
+ *
+ * @param min - Inclusive lower bound.
+ * @param bipolar - Whether the slider is in bipolar (zero-center) mode.
+ * @returns `0` for bipolar sliders, `min` otherwise.
+ */
+export function defaultResetValue(min, bipolar) {
+    return bipolar ? 0 : min;
+}
+/**
+ * Build the default value formatter — appends an optional unit suffix.
+ *
+ * @param unit - Optional unit string (e.g. `'%'`).
+ * @returns A formatter producing `"<value><unit>"`.
+ */
+export function defaultFormatter(unit) {
+    const suffix = unit ?? '';
+    return (n) => `${n}${suffix}`;
+}
+/**
+ * Compute the keyboard nudge step for arrow keys.
+ *
+ * Plain arrow → `step`. Shift-modifier → `step * 10` so users can move in
+ * coarser increments. Always at least `step`.
+ *
+ * @param step - The base step increment.
+ * @param shift - Whether the Shift modifier is held.
+ * @returns The effective per-keypress delta.
+ */
+export function keyboardNudge(step, shift) {
+    return shift ? step * 10 : step;
+}
+/**
+ * Number of decimal places implied by the step value (for fixed-format
+ * snapping).
+ *
+ * @param step - Step increment.
+ * @returns Decimal-place count to round to.
+ */
+function decimalsForStep(step) {
+    if (!Number.isFinite(step) || step <= 0)
+        return 0;
+    const s = String(step);
+    const dot = s.indexOf('.');
+    if (dot === -1)
+        return 0;
+    return Math.min(s.length - dot - 1, 12);
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@molecule/app-adjustment-slider-react",
+  "version": "1.0.0",
+  "description": "Bipolar (zero-center) adjustment slider for photo-editor / DAW / animation parameters (brightness, exposure, gain, etc.) with double-click reset and arrow-key nudging",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "molecule",
+    "adjustment",
+    "slider",
+    "bipolar",
+    "photo-editor",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@molecule/app-i18n": "1.0.0",
+    "@molecule/app-react": "1.0.0",
+    "@molecule/app-ui": "1.0.0",
+    "@testing-library/react": "16.3.2",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "jsdom": "30.0.1",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}