@wildo-ai/presets-components 1.0.1 → 1.1.1

package/dist/esm/components/form/controls/number/slider.js

@@ -3,18 +3,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn, useI18n, useUI, createCompoundPreset } from "@wildo-ai/saas-frontend-lib";
-import { UIBehavior, FormControlVariant, FrontendComponentType } from "@wildo-ai/presets-components-models";
+import { ControlSize, FormControlVariant, FrontendComponentType, UIBehavior } from "@wildo-ai/presets-components-models";
 import { getNumberConstraints } from "@wildo-ai/zod-decorators";
 import { DisplayDirection } from "@wildo-ai/zod-decorators";
-const SliderRoot = React.forwardRef(function SliderRoot({ className, defaultValue, max = 100, step = 1, ...props }, ref) {
+const SLIDER_TRACK_SIZE_STRUCTURE = {
+    [ControlSize.SM]: "data-[orientation=horizontal]:h-1 data-[orientation=vertical]:w-1",
+    [ControlSize.MD]: "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5",
+};
+const SLIDER_THUMB_SIZE_STRUCTURE = {
+    [ControlSize.SM]: "size-3.5 pointer-coarse:size-6",
+    [ControlSize.MD]: "size-4 pointer-coarse:size-6",
+};
+const SliderRoot = React.forwardRef(function SliderRoot({ className, defaultValue, max = 100, step = 1, controlSize = ControlSize.MD, ...props }, ref) {
     const _values = defaultValue ?? [max / 2];
     const { getRecipe } = useUI();
     const recipe = getRecipe(UIBehavior.FORM_CONTROL, FormControlVariant.DEFAULT);
-    return (_jsxs(SliderPrimitive.Root, { ref: ref, "data-slot": "slider", defaultValue: _values, max: max, step: step, className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-[var(--opacity-disabled)] data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5", children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: cn(
+    return (_jsxs(SliderPrimitive.Root, { ref: ref, "data-slot": "slider", "data-size": controlSize, defaultValue: _values, max: max, step: step, className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-[var(--opacity-disabled)] data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full", SLIDER_TRACK_SIZE_STRUCTURE[controlSize]), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: cn(
                 // Structure
-                "block size-4 shrink-0 rounded-full border border-primary bg-background", 
-                // States — standardized focus ring (decision 1.16)
-                "ring-ring hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]", recipe.motion.transition) }, index)))] }));
+                "block shrink-0 rounded-full border border-primary bg-background", SLIDER_THUMB_SIZE_STRUCTURE[controlSize], 
+                // States — standardized 4px focus/hover halo
+                "focus-ring-thick", "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]", recipe.motion.transition) }, index)))] }));
 });
 SliderRoot.displayName = "SliderRoot";
 /**
@@ -23,7 +31,7 @@ SliderRoot.displayName = "SliderRoot";
  * Includes label, description, error display, and validation.
  * Auto-detects min/max from schema constraints.
  */
-const SliderImpl = React.forwardRef(function Slider({ schema, name, disabled, className, value: controlledValue, onValueChange, onBlur, defaultValue, validationMode: validationModeProp, min: minProp, max: maxProp, step: stepProp, showValue = false, orientation = DisplayDirection.HORIZONTAL, }, ref) {
+const SliderImpl = React.forwardRef(function Slider({ schema, name, disabled, className, value: controlledValue, onValueChange, onBlur, defaultValue, validationMode: validationModeProp, min: minProp, max: maxProp, step: stepProp, showValue = false, orientation = DisplayDirection.HORIZONTAL, controlSize = ControlSize.MD, }, ref) {
     const { formatNumber, isReady } = useI18n({
         component: FrontendComponentType.LOW_LEVEL_SLIDER,
     });
@@ -36,9 +44,15 @@ const SliderImpl = React.forwardRef(function Slider({ schema, name, disabled, cl
     const step = stepProp ?? constraints.step ?? 1;
     // Internal state for uncontrolled mode
     const [internalValue, setInternalValue] = React.useState(defaultValue ?? [min]);
-    // Determine if controlled
-    const isControlled = controlledValue !== undefined;
-    const currentValue = isControlled ? controlledValue : internalValue;
+    // Controlled ⇔ the caller supplied a change handler (or a defined value).
+    //
+    // Deciding by VALUE alone is unsafe for any caller that legitimately passes `undefined`: the
+    // control concludes it is uncontrolled, routes the user's drag into private internal state and
+    // NEVER calls `onValueChange`, so the form silently keeps the old value. That is reachable
+    // whenever a range is empty — a cleared field, or a create surface — and the tier-1 field
+    // wrappers were hardened against exactly this class while the presets they render were not.
+    const isControlled = onValueChange !== undefined || controlledValue !== undefined;
+    const currentValue = controlledValue ?? internalValue;
     // Handle value change - validation is handled by parent FormField via RHF
     const handleValueChange = React.useCallback((newValue) => {
         if (isControlled) {
@@ -56,7 +70,7 @@ const SliderImpl = React.forwardRef(function Slider({ schema, name, disabled, cl
     const displayValue = currentValue.length === 1
         ? formatNumber(currentValue[0])
         : `${formatNumber(currentValue[0])} - ${formatNumber(currentValue[currentValue.length - 1])}`;
-    return (_jsxs("div", { ref: ref, className: className, "data-field": name, children: [showValue && (_jsx("div", { className: "flex items-center justify-end mb-1", children: _jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: displayValue }) })), _jsxs(SliderPrimitive.Root, { value: currentValue, onValueChange: handleValueChange, onValueCommit: handleValueCommit, min: min, max: max, step: step, disabled: disabled, orientation: orientation, "data-slot": "slider", className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-[var(--opacity-disabled)] data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"), children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }), Array.from({ length: currentValue.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: cn("block size-4 shrink-0 rounded-full border border-primary bg-background pointer-coarse:size-6", "ring-ring hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]", recipe.motion.transition) }, index)))] })] }));
+    return (_jsxs("div", { ref: ref, className: className, "data-field": name, children: [showValue && (_jsx("div", { className: "flex items-center justify-end mb-1", children: _jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: displayValue }) })), _jsxs(SliderPrimitive.Root, { value: currentValue, onValueChange: handleValueChange, onValueCommit: handleValueCommit, min: min, max: max, step: step, disabled: disabled, orientation: orientation, "data-slot": "slider", "data-size": controlSize, className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-[var(--opacity-disabled)] data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"), children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full", SLIDER_TRACK_SIZE_STRUCTURE[controlSize]), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }), Array.from({ length: currentValue.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: cn("block shrink-0 rounded-full border border-primary bg-background", SLIDER_THUMB_SIZE_STRUCTURE[controlSize], "focus-ring-thick", "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]", recipe.motion.transition) }, index)))] })] }));
 });
 SliderImpl.displayName = "Slider";
 // ============================================================================
@@ -69,7 +83,7 @@ SliderImpl.displayName = "Slider";
  * Includes label, description, error display, and validation.
  * Auto-detects min/max from schema constraints.
  */
-const RangeSlider = React.forwardRef(function RangeSlider({ schema, name, disabled, className, value: controlledValue, onValueChange, onBlur, defaultValue, validationMode: validationModeProp, min: minProp, max: maxProp, step: stepProp, showValue = true, orientation = DisplayDirection.HORIZONTAL, }, ref) {
+const RangeSlider = React.forwardRef(function RangeSlider({ schema, name, disabled, className, value: controlledValue, onValueChange, onBlur, defaultValue, validationMode: validationModeProp, min: minProp, max: maxProp, step: stepProp, showValue = true, orientation = DisplayDirection.HORIZONTAL, controlSize = ControlSize.MD, }, ref) {
     const { formatNumber, tComponent, isReady } = useI18n({
         component: [FrontendComponentType.LOW_LEVEL_SLIDER, FrontendComponentType.LOW_LEVEL_RANGE_SLIDER],
     });
@@ -82,9 +96,15 @@ const RangeSlider = React.forwardRef(function RangeSlider({ schema, name, disabl
     const step = stepProp ?? constraints.step ?? 1;
     // Internal state for uncontrolled mode
     const [internalValue, setInternalValue] = React.useState(defaultValue ?? { from: min, to: max });
-    // Determine if controlled
-    const isControlled = controlledValue !== undefined;
-    const currentValue = isControlled ? controlledValue : internalValue;
+    // Controlled ⇔ the caller supplied a change handler (or a defined value).
+    //
+    // Deciding by VALUE alone is unsafe for any caller that legitimately passes `undefined`: the
+    // control concludes it is uncontrolled, routes the user's drag into private internal state and
+    // NEVER calls `onValueChange`, so the form silently keeps the old value. That is reachable
+    // whenever a range is empty — a cleared field, or a create surface — and the tier-1 field
+    // wrappers were hardened against exactly this class while the presets they render were not.
+    const isControlled = onValueChange !== undefined || controlledValue !== undefined;
+    const currentValue = controlledValue ?? internalValue;
     // Convert to slider format [from, to]
     const sliderValue = [
         currentValue?.from ?? min,
@@ -106,9 +126,11 @@ const RangeSlider = React.forwardRef(function RangeSlider({ schema, name, disabl
     }, [onBlur]);
     // Format display value with locale-aware formatting from regional preferences
     const displayValueText = `${formatNumber(sliderValue[0])} - ${formatNumber(sliderValue[1])}`;
-    return (_jsxs("div", { ref: ref, className: className, "data-field": name, children: [showValue && (_jsx("div", { className: "flex items-center justify-end mb-1", children: _jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: displayValueText }) })), _jsxs(SliderPrimitive.Root, { value: sliderValue, onValueChange: handleValueChange, onValueCommit: handleValueCommit, min: min, max: max, step: step, disabled: disabled, orientation: orientation, "data-slot": "range-slider", className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-[var(--opacity-disabled)] data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"), children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }), _jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", "aria-label": tComponent(FrontendComponentType.LOW_LEVEL_RANGE_SLIDER, 'minimumValue'), className: cn("block size-4 shrink-0 rounded-full border border-primary bg-background pointer-coarse:size-6", "ring-ring hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]", rangeRecipe.motion.transition) }), _jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", "aria-label": tComponent(FrontendComponentType.LOW_LEVEL_RANGE_SLIDER, 'maximumValue'), className: cn("block size-4 shrink-0 rounded-full border border-primary bg-background pointer-coarse:size-6", "ring-ring hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]", rangeRecipe.motion.transition) })] })] }));
+    if (!isReady)
+        return null;
+    return (_jsxs("div", { ref: ref, className: className, "data-field": name, children: [showValue && (_jsx("div", { className: "flex items-center justify-end mb-1", children: _jsx("span", { className: "text-sm text-muted-foreground tabular-nums", children: displayValueText }) })), _jsxs(SliderPrimitive.Root, { value: sliderValue, onValueChange: handleValueChange, onValueCommit: handleValueCommit, min: min, max: max, step: step, disabled: disabled, orientation: orientation, "data-slot": "range-slider", "data-size": controlSize, className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-[var(--opacity-disabled)] data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"), children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full", SLIDER_TRACK_SIZE_STRUCTURE[controlSize]), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }), _jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", "aria-label": tComponent(FrontendComponentType.LOW_LEVEL_RANGE_SLIDER, 'minimumValue'), className: cn("block shrink-0 rounded-full border border-primary bg-background", SLIDER_THUMB_SIZE_STRUCTURE[controlSize], "focus-ring-thick", "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]", rangeRecipe.motion.transition) }), _jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", "aria-label": tComponent(FrontendComponentType.LOW_LEVEL_RANGE_SLIDER, 'maximumValue'), className: cn("block shrink-0 rounded-full border border-primary bg-background", SLIDER_THUMB_SIZE_STRUCTURE[controlSize], "focus-ring-thick", "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]", rangeRecipe.motion.transition) })] })] }));
 });
 RangeSlider.displayName = "RangeSlider";
 export const Slider = createCompoundPreset(SliderImpl, { Root: SliderRoot });
 export { RangeSlider };
-//# sourceMappingURL=slider.js.map
+//# sourceMappingURL=slider.js.map

package/dist/esm/components/form/controls/number/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../../../src/components/form/controls/number/slider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../../../../src/components/form/controls/number/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\nimport { z } from \"zod\"\n\nimport { cn, useI18n, useUI, createCompoundPreset } from \"@wildo-ai/saas-frontend-lib\"\nimport { ControlSize, FormControlVariant, FrontendComponentType, UIBehavior } from \"@wildo-ai/presets-components-models\"\nimport { getNumberConstraints } from \"@wildo-ai/zod-decorators\"\nimport { DisplayDirection } from \"@wildo-ai/zod-decorators\"\nimport type {\n  SliderProps,\n  RangeSliderProps,\n  SliderRef,\n  RangeSliderRef,\n  SliderRootProps,\n  SliderRootRef,\n  SliderCompound,\n} from '@wildo-ai/saas-frontend-lib'\n\nconst SLIDER_TRACK_SIZE_STRUCTURE: Record<ControlSize, string> = {\n  [ControlSize.SM]: \"data-[orientation=horizontal]:h-1 data-[orientation=vertical]:w-1\",\n  [ControlSize.MD]: \"data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5\",\n}\n\nconst SLIDER_THUMB_SIZE_STRUCTURE: Record<ControlSize, string> = {\n  [ControlSize.SM]: \"size-3.5 pointer-coarse:size-6\",\n  [ControlSize.MD]: \"size-4 pointer-coarse:size-6\",\n}\n\nconst SliderRoot = React.forwardRef<SliderRootRef, SliderRootProps>(function SliderRoot({\n  className,\n  defaultValue,\n  max = 100,\n  step = 1,\n  controlSize = ControlSize.MD,\n  ...props\n}, ref) {\n  const _values = defaultValue ?? [max / 2]\n  const { getRecipe } = useUI()\n  const recipe = getRecipe(UIBehavior.FORM_CONTROL, FormControlVariant.DEFAULT)\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      data-slot=\"slider\"\n      data-size={controlSize}\n      defaultValue={_values}\n      max={max}\n      step={step}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-[var(--opacity-disabled)] data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          \"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\",\n          SLIDER_TRACK_SIZE_STRUCTURE[controlSize],\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className={cn(\n            // Structure\n            \"block shrink-0 rounded-full border border-primary bg-background\",\n            SLIDER_THUMB_SIZE_STRUCTURE[controlSize],\n            // States — standardized 4px focus/hover halo\n            \"focus-ring-thick\",\n            \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]\",\n            recipe.motion.transition,\n          )}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n})\n;(SliderRoot as typeof SliderRoot & { displayName: string }).displayName = \"SliderRoot\"\n\n/**\n * Schema-aware Slider component\n *\n * Includes label, description, error display, and validation.\n * Auto-detects min/max from schema constraints.\n */\nconst SliderImpl = React.forwardRef<SliderRef, SliderProps>(function Slider({\n  schema,\n  name,\n  disabled,\n  className,\n  value: controlledValue,\n  onValueChange,\n  onBlur,\n  defaultValue,\n  validationMode: validationModeProp,\n  min: minProp,\n  max: maxProp,\n  step: stepProp,\n  showValue = false,\n  orientation = DisplayDirection.HORIZONTAL,\n  controlSize = ControlSize.MD,\n}, ref) {\n  const { formatNumber, isReady } = useI18n({\n    component: FrontendComponentType.LOW_LEVEL_SLIDER,\n  })\n  const { getRecipe } = useUI()\n  const recipe = getRecipe(UIBehavior.FORM_CONTROL, FormControlVariant.DEFAULT)\n\n  // Auto-detect from schema\n  const constraints = getNumberConstraints(schema)\n  const min = minProp ?? constraints.min ?? 0\n  const max = maxProp ?? constraints.max ?? 100\n  const step = stepProp ?? constraints.step ?? 1\n\n  // Internal state for uncontrolled mode\n  const [internalValue, setInternalValue] = React.useState<number[]>(\n    defaultValue ?? [min]\n  )\n\n  // Controlled ⇔ the caller supplied a change handler (or a defined value).\n  //\n  // Deciding by VALUE alone is unsafe for any caller that legitimately passes `undefined`: the\n  // control concludes it is uncontrolled, routes the user's drag into private internal state and\n  // NEVER calls `onValueChange`, so the form silently keeps the old value. That is reachable\n  // whenever a range is empty — a cleared field, or a create surface — and the tier-1 field\n  // wrappers were hardened against exactly this class while the presets they render were not.\n  const isControlled = onValueChange !== undefined || controlledValue !== undefined\n  const currentValue = controlledValue ?? internalValue\n\n  // Handle value change - validation is handled by parent FormField via RHF\n  const handleValueChange = React.useCallback((newValue: number[]) => {\n    if (isControlled) {\n      onValueChange?.(newValue)\n    } else {\n      setInternalValue(newValue)\n    }\n  }, [isControlled, onValueChange])\n\n  // Handle blur (commit) - validation is handled by parent FormField via RHF\n  const handleValueCommit = React.useCallback((value: number[]) => {\n    onBlur?.()\n  }, [onBlur])\n\n  // Format display value with locale-aware formatting from regional preferences\n  const displayValue = currentValue.length === 1\n    ? formatNumber(currentValue[0])\n    : `${formatNumber(currentValue[0])} - ${formatNumber(currentValue[currentValue.length - 1])}`\n\n  return (\n    <div ref={ref} className={className} data-field={name}>\n      {showValue && (\n        <div className=\"flex items-center justify-end mb-1\">\n          <span className=\"text-sm text-muted-foreground tabular-nums\">{displayValue}</span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        value={currentValue}\n        onValueChange={handleValueChange}\n        onValueCommit={handleValueCommit}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={orientation as \"horizontal\" | \"vertical\"}\n        data-slot=\"slider\"\n        data-size={controlSize}\n        className={cn(\n          \"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-[var(--opacity-disabled)] data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\"\n        )}\n      >\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className={cn(\n            \"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\",\n            SLIDER_TRACK_SIZE_STRUCTURE[controlSize],\n          )}\n        >\n          <SliderPrimitive.Range\n            data-slot=\"slider-range\"\n            className={cn(\n              \"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n            )}\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: currentValue.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className={cn(\n              \"block shrink-0 rounded-full border border-primary bg-background\",\n              SLIDER_THUMB_SIZE_STRUCTURE[controlSize],\n              \"focus-ring-thick\",\n              \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]\",\n              recipe.motion.transition,\n            )}\n          />\n        ))}\n      </SliderPrimitive.Root>\n    </div>\n  )\n})\n\n;(SliderImpl as typeof SliderImpl & { displayName: string }).displayName = \"Slider\"\n\n// ============================================================================\n// RANGE SLIDER COMPONENT\n// ============================================================================\n\n/**\n * Range Slider component for z_range('number') schemas.\n *\n * Displays a two-thumb slider for selecting a min/max range.\n * Includes label, description, error display, and validation.\n * Auto-detects min/max from schema constraints.\n */\nconst RangeSlider = React.forwardRef<RangeSliderRef, RangeSliderProps>(function RangeSlider({\n  schema,\n  name,\n  disabled,\n  className,\n  value: controlledValue,\n  onValueChange,\n  onBlur,\n  defaultValue,\n  validationMode: validationModeProp,\n  min: minProp,\n  max: maxProp,\n  step: stepProp,\n  showValue = true,\n  orientation = DisplayDirection.HORIZONTAL,\n  controlSize = ControlSize.MD,\n}, ref) {\n  const { formatNumber, tComponent, isReady } = useI18n({\n    component: [FrontendComponentType.LOW_LEVEL_SLIDER, FrontendComponentType.LOW_LEVEL_RANGE_SLIDER],\n  })\n  const { getRecipe: getRangeRecipe } = useUI()\n  const rangeRecipe = getRangeRecipe(UIBehavior.FORM_CONTROL, FormControlVariant.DEFAULT)\n\n  // Auto-detect from schema - check if it's a range schema\n  const constraints = getNumberConstraints(schema)\n  const min = minProp ?? constraints.min ?? 0\n  const max = maxProp ?? constraints.max ?? 100\n  const step = stepProp ?? constraints.step ?? 1\n\n  // Internal state for uncontrolled mode\n  const [internalValue, setInternalValue] = React.useState<{ from?: number; to?: number }>(\n    defaultValue ?? { from: min, to: max }\n  )\n\n  // Controlled ⇔ the caller supplied a change handler (or a defined value).\n  //\n  // Deciding by VALUE alone is unsafe for any caller that legitimately passes `undefined`: the\n  // control concludes it is uncontrolled, routes the user's drag into private internal state and\n  // NEVER calls `onValueChange`, so the form silently keeps the old value. That is reachable\n  // whenever a range is empty — a cleared field, or a create surface — and the tier-1 field\n  // wrappers were hardened against exactly this class while the presets they render were not.\n  const isControlled = onValueChange !== undefined || controlledValue !== undefined\n  const currentValue = controlledValue ?? internalValue\n\n  // Convert to slider format [from, to]\n  const sliderValue: number[] = [\n    currentValue?.from ?? min,\n    currentValue?.to ?? max\n  ]\n\n  // Handle value change - validation is handled by parent FormField via RHF\n  const handleValueChange = React.useCallback((newValue: number[]) => {\n    const rangeValue = { from: newValue[0], to: newValue[1] }\n\n    if (isControlled) {\n      onValueChange?.(rangeValue)\n    } else {\n      setInternalValue(rangeValue)\n    }\n  }, [isControlled, onValueChange])\n\n  // Handle blur (commit) - validation is handled by parent FormField via RHF\n  const handleValueCommit = React.useCallback((value: number[]) => {\n    onBlur?.()\n  }, [onBlur])\n\n  // Format display value with locale-aware formatting from regional preferences\n  const displayValueText = `${formatNumber(sliderValue[0])} - ${formatNumber(sliderValue[1])}`\n\n  if (!isReady) return null\n\n  return (\n    <div ref={ref} className={className} data-field={name}>\n      {showValue && (\n        <div className=\"flex items-center justify-end mb-1\">\n          <span className=\"text-sm text-muted-foreground tabular-nums\">{displayValueText}</span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        value={sliderValue}\n        onValueChange={handleValueChange}\n        onValueCommit={handleValueCommit}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={orientation as \"horizontal\" | \"vertical\"}\n        data-slot=\"range-slider\"\n        data-size={controlSize}\n        className={cn(\n          \"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-[var(--opacity-disabled)] data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\"\n        )}\n      >\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className={cn(\n            \"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\",\n            SLIDER_TRACK_SIZE_STRUCTURE[controlSize],\n          )}\n        >\n          <SliderPrimitive.Range\n            data-slot=\"slider-range\"\n            className={cn(\n              \"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n            )}\n          />\n        </SliderPrimitive.Track>\n        {/* Two thumbs for range */}\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          aria-label={tComponent(FrontendComponentType.LOW_LEVEL_RANGE_SLIDER, 'minimumValue')}\n          className={cn(\n            \"block shrink-0 rounded-full border border-primary bg-background\",\n            SLIDER_THUMB_SIZE_STRUCTURE[controlSize],\n            \"focus-ring-thick\",\n            \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]\",\n            rangeRecipe.motion.transition,\n          )}\n        />\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          aria-label={tComponent(FrontendComponentType.LOW_LEVEL_RANGE_SLIDER, 'maximumValue')}\n          className={cn(\n            \"block shrink-0 rounded-full border border-primary bg-background\",\n            SLIDER_THUMB_SIZE_STRUCTURE[controlSize],\n            \"focus-ring-thick\",\n            \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]\",\n            rangeRecipe.motion.transition,\n          )}\n        />\n      </SliderPrimitive.Root>\n    </div>\n  )\n})\n\n;(RangeSlider as typeof RangeSlider & { displayName: string }).displayName = \"RangeSlider\"\n\nexport const Slider = createCompoundPreset<SliderCompound>(SliderImpl, { Root: SliderRoot })\nexport { RangeSlider }\n"]}

package/dist/esm/components/form/controls/number/slider.labels.d.ts

@@ -0,0 +1,4 @@
+import { type LabellingUnitaryDef } from '@wildo-ai/presets-components-models';
+export declare const LowLevelRangeSliderLabels: LabellingUnitaryDef[];
+export declare const LowLevelSliderLabels: LabellingUnitaryDef[];
+//# sourceMappingURL=slider.labels.d.ts.map

package/dist/esm/components/form/controls/number/slider.labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.labels.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/form/controls/number/slider.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,yBAAyB,EAAE,mBAAmB,EAAO,CAAC;AAGnE,eAAO,MAAM,oBAAoB,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/form/controls/number/slider.labels.js

@@ -0,0 +1,9 @@
+import { FrontendComponentType, registerComponentLabels } from '@wildo-ai/presets-components-models';
+// Companion-only label metadata for this component: keys + params + (where
+// authored) per-key purpose / kind / variable meaning. Statically scanned by
+// the dev companion; NOT imported at runtime, so it never ships in the bundle.
+export const LowLevelRangeSliderLabels = [];
+registerComponentLabels(FrontendComponentType.LOW_LEVEL_RANGE_SLIDER, LowLevelRangeSliderLabels);
+export const LowLevelSliderLabels = [];
+registerComponentLabels(FrontendComponentType.LOW_LEVEL_SLIDER, LowLevelSliderLabels);
+//# sourceMappingURL=slider.labels.js.map

package/dist/esm/components/form/controls/number/slider.labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.labels.js","sourceRoot":"","sources":["../../../../../../../src/components/form/controls/number/slider.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAA4B,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE/H,2EAA2E;AAC3E,6EAA6E;AAC7E,+EAA+E;AAE/E,MAAM,CAAC,MAAM,yBAAyB,GAA0B,EAAE,CAAC;AACnE,uBAAuB,CAAC,qBAAqB,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,CAAC;AAEjG,MAAM,CAAC,MAAM,oBAAoB,GAA0B,EAAE,CAAC;AAC9D,uBAAuB,CAAC,qBAAqB,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { FrontendComponentType, type LabellingUnitaryDef, registerComponentLabels } from '@wildo-ai/presets-components-models';\n\n// Companion-only label metadata for this component: keys + params + (where\n// authored) per-key purpose / kind / variable meaning. Statically scanned by\n// the dev companion; NOT imported at runtime, so it never ships in the bundle.\n\nexport const LowLevelRangeSliderLabels: LabellingUnitaryDef[] = [];\nregisterComponentLabels(FrontendComponentType.LOW_LEVEL_RANGE_SLIDER, LowLevelRangeSliderLabels);\n\nexport const LowLevelSliderLabels: LabellingUnitaryDef[] = [];\nregisterComponentLabels(FrontendComponentType.LOW_LEVEL_SLIDER, LowLevelSliderLabels);\n"]}

package/dist/esm/components/form/controls/string/color-input.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ColorInputProps } from '@wildo-ai/saas-frontend-lib';
+import type { ColorInputProps } from "@wildo-ai/saas-frontend-lib";
 declare const ColorInput: React.ForwardRefExoticComponent<ColorInputProps & React.RefAttributes<HTMLInputElement>>;
 export { ColorInput };
 //# sourceMappingURL=color-input.d.ts.map

package/dist/esm/components/form/controls/string/color-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/controls/string/color-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,6BAA6B,CAAA;AAGjF,QAAA,MAAM,UAAU,0FAoGd,CAED;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"color-input.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/form/controls/string/color-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsB9B,OAAO,KAAK,EAAE,eAAe,EAAqC,MAAM,6BAA6B,CAAA;AA+BrG,QAAA,MAAM,UAAU,0FAoPd,CAED;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/esm/components/form/controls/string/color-input.js

@@ -1,10 +1,36 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn, useI18n, Button, ButtonVariants_Variant, Input, Popover, PopoverContent, PopoverTrigger } from "@wildo-ai/saas-frontend-lib";
-import { FrontendComponentType } from "@wildo-ai/presets-components-models";
+import { cn, useI18n, useUI, getChartColorPaletteFromCSS, getTailwindColor, ColorNotation, parseCssColorToRgb, resolveCssColorViaDom, rgbToHsv, hsvToRgb, formatRgbAsCssColor, Button, ButtonVariants_Variant, Input, Popover, PopoverContent, PopoverTrigger, Skeleton, } from "@wildo-ai/saas-frontend-lib";
+import { ButtonSize, ControlSize, FormControlVariant, FrontendComponentType, UIBehavior } from "@wildo-ai/presets-components-models";
 import { HorizontalAlign } from "@wildo-ai/zod-decorators";
-const ColorInput = React.forwardRef(function ColorInput({ schema, name, placeholder = "#000000", disabled, readOnly, className, value: controlledValue, onChange, onBlur, defaultValue, validationMode: validationModeProp, format = 'hex', }, ref) {
+import { ColorPickerSurface } from "./color-picker-surface.js";
+/**
+ * Columns in the preset palette grid. The arrow-key navigation below is computed against this
+ * number, so the two move together.
+ */
+const PALETTE_GRID_COLUMNS = 6;
+/**
+ * Where the picking surface opens when the field is empty and the theme exposes no palette.
+ * A mid-saturation blue rather than black, so the first drag lands somewhere useful.
+ */
+const FALLBACK_START_POINT = { h: 210, s: 70, v: 90 };
+/**
+ * Resolve a field value — any notation `ZodTypeForColors` accepts — to a point on the picking
+ * surface. The analytic parse covers every notation the picker itself emits; the DOM fallback
+ * covers CSS named colours, which no regex should enumerate and which the schema does accept.
+ */
+function parseFieldValueToHsv(value) {
+    const trimmed = value.trim();
+    if (trimmed.length === 0)
+        return null;
+    const rgb = parseCssColorToRgb(trimmed) ?? resolveCssColorViaDom(trimmed);
+    return rgb ? rgbToHsv(rgb) : null;
+}
+const ColorInput = React.forwardRef(function ColorInput({ schema, name, placeholder = "#000000", disabled, readOnly, className, value: controlledValue, onChange, onBlur, defaultValue, validationMode: validationModeProp, format = ColorNotation.HEX, controlSize = ControlSize.MD, surfacePolicyOverride, }, ref) {
+    const { getRecipe } = useUI();
+    const controlRecipe = getRecipe(UIBehavior.FORM_CONTROL, FormControlVariant.DEFAULT);
+    const { tComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_COLOR_INPUT });
     // Internal state for uncontrolled mode
     const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');
     // Popover open state
@@ -21,11 +47,6 @@ const ColorInput = React.forwardRef(function ColorInput({ schema, name, placehol
             setInternalValue(newValue);
         }
     }, [isControlled, onChange]);
-    // Handle color picker change
-    const handleColorChange = React.useCallback((e) => {
-        const newValue = e.target.value;
-        handleInputChange(newValue);
-    }, [handleInputChange]);
     // Handle blur - validation is handled by parent FormField via RHF
     const handleBlur = React.useCallback(() => {
         onBlur?.();
@@ -37,13 +58,111 @@ const ColorInput = React.forwardRef(function ColorInput({ schema, name, placehol
             handleBlur();
         }
     }, [handleBlur]);
-    const { tComponent } = useI18n({ component: FrontendComponentType.LOW_LEVEL_COLOR_INPUT });
-    // ID for accessibility
-    const colorInputId = `field-${name}`;
-    // Ensure hex format for color input
-    const displayValue = currentValue || '#000000';
-    return (_jsxs("div", { className: cn("flex items-center gap-element", className), children: [_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: ButtonVariants_Variant.OUTLINE, disabled: disabled || readOnly, className: "h-9 w-12 border border-input shadow-xs p-0", style: { backgroundColor: displayValue }, "aria-label": tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'selectColor') }) }), _jsx(PopoverContent, { className: "w-auto p-card-sm", align: HorizontalAlign.START, children: _jsx("input", { type: "color", value: displayValue, onChange: handleColorChange, disabled: disabled || readOnly, className: "w-full h-10 cursor-pointer disabled:cursor-not-allowed" }) })] }), _jsx(Input, { ref: ref, schema: schema, name: `${name}-input`, value: currentValue, onChange: handleInputChange, onBlur: handleBlur, placeholder: placeholder, disabled: disabled, readOnly: readOnly, validationMode: validationModeProp, className: "flex-1" })] }));
+    // Theme palette, re-read on every popover open so a live theme switch is picked up.
+    const palette = React.useMemo(() => getChartColorPaletteFromCSS().map((colorName) => ({
+        name: colorName,
+        hex: getTailwindColor(colorName, 500),
+    })), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `open` is the deliberate refresh trigger
+    [open]);
+    /*
+     * The picking surface is driven from an HSV DRAFT rather than re-derived from the field string
+     * on every render, because HSV→string→HSV is lossy exactly where a user drags most: at value 0
+     * every hue is black and at saturation 0 every hue is grey, so a round-trip would snap the hue
+     * track back to red the moment someone dragged to the bottom edge. The draft is authoritative
+     * only while the field still holds what this control last emitted; any other change — typing in
+     * the hex box, a form reset, a remote update — re-parses and wins.
+     */
+    const [draftHsv, setDraftHsv] = React.useState(null);
+    const lastEmittedValue = React.useRef(null);
+    const parsedHsv = React.useMemo(() => parseFieldValueToHsv(currentValue), [currentValue]);
+    const isDraftAuthoritative = draftHsv !== null && currentValue === lastEmittedValue.current;
+    const surfaceHsv = isDraftAuthoritative
+        ? draftHsv
+        : parsedHsv ?? (palette.length > 0 ? rgbToHsv(parseCssColorToRgb(palette[0].hex) ?? hsvToRgb(FALLBACK_START_POINT)) : FALLBACK_START_POINT);
+    /**
+     * Commit a colour and remember both what was emitted and where the surface stands.
+     *
+     * The emitted string is derived from the RGB rather than re-derived from the HSV, because a
+     * palette entry is AUTHORITATIVE: picking "emerald" must persist the theme's own `#10b981`, not
+     * whatever the surface model reproduces after a trip through HSV. The two agree today (the
+     * conversion is lossless), and this keeps them agreeing if the maths ever changes.
+     */
+    const emitRgb = React.useCallback((rgb, hsv) => {
+        const nextValue = formatRgbAsCssColor(rgb, format);
+        setDraftHsv(hsv);
+        lastEmittedValue.current = nextValue;
+        handleInputChange(nextValue);
+    }, [format, handleInputChange]);
+    const emitColor = React.useCallback((hsv) => {
+        emitRgb(hsvToRgb(hsv), hsv);
+    }, [emitRgb]);
+    // Palette pick commits and closes; blur fires through onOpenChange.
+    const handlePalettePick = React.useCallback((hex) => {
+        const rgb = parseCssColorToRgb(hex);
+        if (rgb)
+            emitRgb(rgb, rgbToHsv(rgb));
+        setOpen(false);
+    }, [emitRgb]);
+    // Roving-tabindex arrow navigation across the swatch grid.
+    const swatchRefs = React.useRef([]);
+    const handleSwatchKeyDown = React.useCallback((index) => (e) => {
+        const last = palette.length - 1;
+        let target = null;
+        switch (e.key) {
+            case 'ArrowRight':
+                target = Math.min(index + 1, last);
+                break;
+            case 'ArrowLeft':
+                target = Math.max(index - 1, 0);
+                break;
+            case 'ArrowDown':
+                target = index + PALETTE_GRID_COLUMNS <= last ? index + PALETTE_GRID_COLUMNS : null;
+                break;
+            case 'ArrowUp':
+                target = index - PALETTE_GRID_COLUMNS >= 0 ? index - PALETTE_GRID_COLUMNS : null;
+                break;
+            case 'Home':
+                target = 0;
+                break;
+            case 'End':
+                target = last;
+                break;
+            default: return;
+        }
+        e.preventDefault();
+        if (target !== null)
+            swatchRefs.current[target]?.focus();
+    }, [palette.length]);
+    const normalizedValue = currentValue.trim().toLowerCase();
+    // A swatch reads as selected when the field holds exactly what picking it would commit — the
+    // same derivation as `handlePalettePick`, so the ring can never disagree with the commit.
+    const selectedPaletteIndex = palette.findIndex((entry) => {
+        const rgb = parseCssColorToRgb(entry.hex);
+        return rgb !== null && formatRgbAsCssColor(rgb, format).toLowerCase() === normalizedValue;
+    });
+    const triggerSize = controlSize === ControlSize.SM ? ButtonSize.ICON_SM : ButtonSize.ICON;
+    const triggerWidthClass = controlSize === ControlSize.SM ? "w-10" : "w-12";
+    // Trigger swatch: the value fills the chip; an empty optional field shows the standard "no
+    // colour" diagonal slash instead of faking a black value.
+    const hasValue = normalizedValue.length > 0;
+    const triggerSwatchStyle = hasValue
+        ? { backgroundColor: currentValue }
+        : {
+            backgroundImage: "linear-gradient(to top right, transparent calc(50% - 1px), var(--border) calc(50% - 1px), var(--border) calc(50% + 1px), transparent calc(50% + 1px))",
+        };
+    // Skeleton reserves the control's real geometry (theme size ladder) while labels load.
+    if (!isReady) {
+        return (_jsxs("div", { className: cn("flex items-center gap-element", className), children: [_jsx(Skeleton, { className: cn(triggerWidthClass, controlRecipe.sizes?.[controlSize]) }), _jsx(Skeleton, { className: cn("flex-1", controlRecipe.sizes?.[controlSize]) })] }));
+    }
+    return (_jsxs("div", { className: cn("flex items-center gap-element", className), children: [_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: ButtonVariants_Variant.OUTLINE, size: triggerSize, disabled: disabled || readOnly, className: cn("p-1", triggerWidthClass), "aria-label": tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'selectColor'), children: _jsx("span", { "aria-hidden": "true", className: "size-full rounded-sm border border-border", style: triggerSwatchStyle }) }) }), _jsx(PopoverContent, { className: "w-64 p-card-sm", align: HorizontalAlign.START, surfacePolicyOverride: surfacePolicyOverride, children: _jsxs("div", { className: "flex flex-col gap-field", children: [_jsx(ColorPickerSurface, { value: surfaceHsv, onChange: emitColor, onCommit: handleBlur, disabled: disabled || readOnly, controlSize: controlSize, planeLabel: tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'saturationBrightness'), hueLabel: tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'hue'), planeValueText: tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'saturationBrightnessValue', {
+                                        saturation: Math.round(surfaceHsv.s),
+                                        brightness: Math.round(surfaceHsv.v),
+                                    }) }), _jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'palette') }), _jsx("div", { role: "group", "aria-label": tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'palette'), className: "grid grid-cols-6 gap-item-xs", children: palette.map((entry, index) => {
+                                                const isSelected = index === selectedPaletteIndex;
+                                                return (_jsx("button", { type: "button", ref: (el) => { swatchRefs.current[index] = el; }, tabIndex: index === (selectedPaletteIndex >= 0 ? selectedPaletteIndex : 0) ? 0 : -1, disabled: disabled || readOnly, onClick: () => handlePalettePick(entry.hex), onKeyDown: handleSwatchKeyDown(index), "aria-label": tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'paletteSwatch', { color: entry.name }), "aria-pressed": isSelected, className: cn("size-6 rounded-sm border border-border outline-none transition-transform", "hover:scale-110 focus-visible:scale-110 focus-visible:ring-2 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]", isSelected && "ring-2 ring-ring"), style: { backgroundColor: entry.hex } }, entry.name));
+                                            }) })] })] }) })] }), _jsx(Input, { ref: ref, schema: schema, name: name, value: currentValue, onChange: handleInputChange, onBlur: handleBlur, placeholder: placeholder, disabled: disabled, readOnly: readOnly, validationMode: validationModeProp, controlSize: controlSize, className: "flex-1" })] }));
 });
 ColorInput.displayName = "ColorInput";
 export { ColorInput };
-//# sourceMappingURL=color-input.js.map
+//# sourceMappingURL=color-input.js.map

package/dist/esm/components/form/controls/string/color-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-input.js","sourceRoot":"","sources":["../../../../../../src/components/form/controls/string/color-input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"color-input.js","sourceRoot":"","sources":["../../../../../../../src/components/form/controls/string/color-input.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  cn,\n  useI18n,\n  useUI,\n  getChartColorPaletteFromCSS,\n  getTailwindColor,\n  ColorNotation,\n  parseCssColorToRgb,\n  resolveCssColorViaDom,\n  rgbToHsv,\n  hsvToRgb,\n  formatRgbAsCssColor,\n  Button,\n  ButtonVariants_Variant,\n  Input,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  Skeleton,\n} from \"@wildo-ai/saas-frontend-lib\"\nimport type { ColorInputProps, ColorInputRef, HsvColor, RgbColor } from \"@wildo-ai/saas-frontend-lib\"\nimport { ButtonSize, ControlSize, FormControlVariant, FrontendComponentType, UIBehavior } from \"@wildo-ai/presets-components-models\"\nimport { HorizontalAlign } from \"@wildo-ai/zod-decorators\"\n\nimport { ColorPickerSurface } from \"./color-picker-surface\"\n\n/**\n * Columns in the preset palette grid. The arrow-key navigation below is computed against this\n * number, so the two move together.\n */\nconst PALETTE_GRID_COLUMNS = 6\n\n/**\n * Where the picking surface opens when the field is empty and the theme exposes no palette.\n * A mid-saturation blue rather than black, so the first drag lands somewhere useful.\n */\nconst FALLBACK_START_POINT: HsvColor = { h: 210, s: 70, v: 90 }\n\n/**\n * Resolve a field value — any notation `ZodTypeForColors` accepts — to a point on the picking\n * surface. The analytic parse covers every notation the picker itself emits; the DOM fallback\n * covers CSS named colours, which no regex should enumerate and which the schema does accept.\n */\nfunction parseFieldValueToHsv(value: string): HsvColor | null {\n  const trimmed = value.trim()\n  if (trimmed.length === 0) return null\n\n  const rgb = parseCssColorToRgb(trimmed) ?? resolveCssColorViaDom(trimmed)\n  return rgb ? rgbToHsv(rgb) : null\n}\n\nconst ColorInput = React.forwardRef<ColorInputRef, ColorInputProps>(function ColorInput({\n  schema,\n  name,\n  placeholder = \"#000000\",\n  disabled,\n  readOnly,\n  className,\n  value: controlledValue,\n  onChange,\n  onBlur,\n  defaultValue,\n  validationMode: validationModeProp,\n  format = ColorNotation.HEX,\n  controlSize = ControlSize.MD,\n  surfacePolicyOverride,\n}, ref) {\n  const { getRecipe } = useUI()\n  const controlRecipe = getRecipe(UIBehavior.FORM_CONTROL, FormControlVariant.DEFAULT)\n  const { tComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_COLOR_INPUT })\n\n  // Internal state for uncontrolled mode\n  const [internalValue, setInternalValue] = React.useState<string>(defaultValue ?? '')\n\n  // Popover open state\n  const [open, setOpen] = React.useState(false)\n\n  // Determine if controlled\n  const isControlled = controlledValue !== undefined\n  const currentValue = isControlled ? controlledValue : internalValue\n\n  // Handle input change - validation is handled by parent FormField via RHF\n  const handleInputChange = React.useCallback((newValue: string) => {\n    if (isControlled) {\n      onChange?.(newValue)\n    } else {\n      setInternalValue(newValue)\n    }\n  }, [isControlled, onChange])\n\n  // Handle blur - validation is handled by parent FormField via RHF\n  const handleBlur = React.useCallback(() => {\n    onBlur?.()\n  }, [onBlur])\n\n  // Handle popover close\n  const handleOpenChange = React.useCallback((newOpen: boolean) => {\n    setOpen(newOpen)\n\n    if (!newOpen) {\n      handleBlur()\n    }\n  }, [handleBlur])\n\n  // Theme palette, re-read on every popover open so a live theme switch is picked up.\n  const palette = React.useMemo(\n    () => getChartColorPaletteFromCSS().map((colorName) => ({\n      name: colorName,\n      hex: getTailwindColor(colorName, 500),\n    })),\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- `open` is the deliberate refresh trigger\n    [open],\n  )\n\n  /*\n   * The picking surface is driven from an HSV DRAFT rather than re-derived from the field string\n   * on every render, because HSV→string→HSV is lossy exactly where a user drags most: at value 0\n   * every hue is black and at saturation 0 every hue is grey, so a round-trip would snap the hue\n   * track back to red the moment someone dragged to the bottom edge. The draft is authoritative\n   * only while the field still holds what this control last emitted; any other change — typing in\n   * the hex box, a form reset, a remote update — re-parses and wins.\n   */\n  const [draftHsv, setDraftHsv] = React.useState<HsvColor | null>(null)\n  const lastEmittedValue = React.useRef<string | null>(null)\n\n  const parsedHsv = React.useMemo(() => parseFieldValueToHsv(currentValue), [currentValue])\n  const isDraftAuthoritative = draftHsv !== null && currentValue === lastEmittedValue.current\n  const surfaceHsv = isDraftAuthoritative\n    ? draftHsv\n    : parsedHsv ?? (palette.length > 0 ? rgbToHsv(parseCssColorToRgb(palette[0].hex) ?? hsvToRgb(FALLBACK_START_POINT)) : FALLBACK_START_POINT)\n\n  /**\n   * Commit a colour and remember both what was emitted and where the surface stands.\n   *\n   * The emitted string is derived from the RGB rather than re-derived from the HSV, because a\n   * palette entry is AUTHORITATIVE: picking \"emerald\" must persist the theme's own `#10b981`, not\n   * whatever the surface model reproduces after a trip through HSV. The two agree today (the\n   * conversion is lossless), and this keeps them agreeing if the maths ever changes.\n   */\n  const emitRgb = React.useCallback((rgb: RgbColor, hsv: HsvColor) => {\n    const nextValue = formatRgbAsCssColor(rgb, format)\n    setDraftHsv(hsv)\n    lastEmittedValue.current = nextValue\n    handleInputChange(nextValue)\n  }, [format, handleInputChange])\n\n  const emitColor = React.useCallback((hsv: HsvColor) => {\n    emitRgb(hsvToRgb(hsv), hsv)\n  }, [emitRgb])\n\n  // Palette pick commits and closes; blur fires through onOpenChange.\n  const handlePalettePick = React.useCallback((hex: string) => {\n    const rgb = parseCssColorToRgb(hex)\n    if (rgb) emitRgb(rgb, rgbToHsv(rgb))\n    setOpen(false)\n  }, [emitRgb])\n\n  // Roving-tabindex arrow navigation across the swatch grid.\n  const swatchRefs = React.useRef<Array<HTMLButtonElement | null>>([])\n  const handleSwatchKeyDown = React.useCallback((index: number) => (e: React.KeyboardEvent) => {\n    const last = palette.length - 1\n    let target: number | null = null\n    switch (e.key) {\n      case 'ArrowRight': target = Math.min(index + 1, last); break\n      case 'ArrowLeft': target = Math.max(index - 1, 0); break\n      case 'ArrowDown': target = index + PALETTE_GRID_COLUMNS <= last ? index + PALETTE_GRID_COLUMNS : null; break\n      case 'ArrowUp': target = index - PALETTE_GRID_COLUMNS >= 0 ? index - PALETTE_GRID_COLUMNS : null; break\n      case 'Home': target = 0; break\n      case 'End': target = last; break\n      default: return\n    }\n    e.preventDefault()\n    if (target !== null) swatchRefs.current[target]?.focus()\n  }, [palette.length])\n\n  const normalizedValue = currentValue.trim().toLowerCase()\n  // A swatch reads as selected when the field holds exactly what picking it would commit — the\n  // same derivation as `handlePalettePick`, so the ring can never disagree with the commit.\n  const selectedPaletteIndex = palette.findIndex((entry) => {\n    const rgb = parseCssColorToRgb(entry.hex)\n    return rgb !== null && formatRgbAsCssColor(rgb, format).toLowerCase() === normalizedValue\n  })\n\n  const triggerSize = controlSize === ControlSize.SM ? ButtonSize.ICON_SM : ButtonSize.ICON\n  const triggerWidthClass = controlSize === ControlSize.SM ? \"w-10\" : \"w-12\"\n\n  // Trigger swatch: the value fills the chip; an empty optional field shows the standard \"no\n  // colour\" diagonal slash instead of faking a black value.\n  const hasValue = normalizedValue.length > 0\n  const triggerSwatchStyle: React.CSSProperties = hasValue\n    ? { backgroundColor: currentValue }\n    : {\n        backgroundImage:\n          \"linear-gradient(to top right, transparent calc(50% - 1px), var(--border) calc(50% - 1px), var(--border) calc(50% + 1px), transparent calc(50% + 1px))\",\n      }\n\n  // Skeleton reserves the control's real geometry (theme size ladder) while labels load.\n  if (!isReady) {\n    return (\n      <div className={cn(\"flex items-center gap-element\", className)}>\n        <Skeleton className={cn(triggerWidthClass, controlRecipe.sizes?.[controlSize])} />\n        <Skeleton className={cn(\"flex-1\", controlRecipe.sizes?.[controlSize])} />\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(\"flex items-center gap-element\", className)}>\n      <Popover open={open} onOpenChange={handleOpenChange}>\n        <PopoverTrigger asChild>\n          <Button\n            type=\"button\"\n            variant={ButtonVariants_Variant.OUTLINE}\n            size={triggerSize}\n            disabled={disabled || readOnly}\n            className={cn(\"p-1\", triggerWidthClass)}\n            aria-label={tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'selectColor')}\n          >\n            <span\n              aria-hidden=\"true\"\n              className=\"size-full rounded-sm border border-border\"\n              style={triggerSwatchStyle}\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-64 p-card-sm\" align={HorizontalAlign.START} surfacePolicyOverride={surfacePolicyOverride}>\n          <div className=\"flex flex-col gap-field\">\n            <ColorPickerSurface\n              value={surfaceHsv}\n              onChange={emitColor}\n              onCommit={handleBlur}\n              disabled={disabled || readOnly}\n              controlSize={controlSize}\n              planeLabel={tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'saturationBrightness')}\n              hueLabel={tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'hue')}\n              planeValueText={tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'saturationBrightnessValue', {\n                saturation: Math.round(surfaceHsv.s),\n                brightness: Math.round(surfaceHsv.v),\n              })}\n            />\n\n            <div className=\"flex flex-col gap-item-xs\">\n              <span className=\"text-xs text-muted-foreground\">\n                {tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'palette')}\n              </span>\n              <div\n                role=\"group\"\n                aria-label={tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'palette')}\n                className=\"grid grid-cols-6 gap-item-xs\"\n              >\n                {palette.map((entry, index) => {\n                  const isSelected = index === selectedPaletteIndex\n                  return (\n                    <button\n                      key={entry.name}\n                      type=\"button\"\n                      ref={(el) => { swatchRefs.current[index] = el }}\n                      tabIndex={index === (selectedPaletteIndex >= 0 ? selectedPaletteIndex : 0) ? 0 : -1}\n                      disabled={disabled || readOnly}\n                      onClick={() => handlePalettePick(entry.hex)}\n                      onKeyDown={handleSwatchKeyDown(index)}\n                      aria-label={tComponent(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, 'paletteSwatch', { color: entry.name })}\n                      aria-pressed={isSelected}\n                      className={cn(\n                        \"size-6 rounded-sm border border-border outline-none transition-transform\",\n                        \"hover:scale-110 focus-visible:scale-110 focus-visible:ring-2 focus-visible:ring-ring\",\n                        \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]\",\n                        isSelected && \"ring-2 ring-ring\",\n                      )}\n                      style={{ backgroundColor: entry.hex }}\n                    />\n                  )\n                })}\n              </div>\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n\n      <Input\n        ref={ref}\n        schema={schema}\n        name={name}\n        value={currentValue}\n        onChange={handleInputChange}\n        onBlur={handleBlur}\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readOnly}\n        validationMode={validationModeProp}\n        controlSize={controlSize}\n        className=\"flex-1\"\n      />\n    </div>\n  )\n})\n\n;(ColorInput as typeof ColorInput & { displayName: string }).displayName = \"ColorInput\"\n\nexport { ColorInput }\n"]}

package/dist/esm/components/form/controls/string/color-input.labels.d.ts

@@ -0,0 +1,3 @@
+import { type LabellingUnitaryDef } from '@wildo-ai/presets-components-models';
+export declare const LowLevelColorInputLabels: LabellingUnitaryDef[];
+//# sourceMappingURL=color-input.labels.d.ts.map

package/dist/esm/components/form/controls/string/color-input.labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-input.labels.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/form/controls/string/color-input.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM1I,eAAO,MAAM,wBAAwB,EAAE,mBAAmB,EAwCzD,CAAC"}

package/dist/esm/components/form/controls/string/color-input.labels.js

@@ -0,0 +1,47 @@
+import { FrontendComponentType, LabelKind, registerComponentLabels } from '@wildo-ai/presets-components-models';
+// Companion-only label metadata for this component: keys + params + (where
+// authored) per-key purpose / kind / variable meaning. Statically scanned by
+// the dev companion; NOT imported at runtime, so it never ships in the bundle.
+export const LowLevelColorInputLabels = [
+    {
+        ref: 'selectColor',
+        kind: LabelKind.ARIA,
+        purpose: 'Accessible name of the swatch button that opens the color picker popover',
+    },
+    {
+        ref: 'saturationBrightness',
+        kind: LabelKind.ARIA,
+        purpose: 'Accessible name of the two-dimensional color area where the user drags to set saturation and brightness',
+    },
+    {
+        ref: 'saturationBrightnessValue',
+        kind: LabelKind.ARIA,
+        params: [
+            { key: 'saturation', meaning: 'Current saturation as a whole-number percentage, 0 to 100' },
+            { key: 'brightness', meaning: 'Current brightness as a whole-number percentage, 0 to 100' },
+        ],
+        purpose: 'Spoken value of the color area, read out as the user moves within it',
+        notes: ['Must read naturally when announced by a screen reader, not as a bare pair of numbers'],
+    },
+    {
+        ref: 'hue',
+        kind: LabelKind.ARIA,
+        purpose: 'Accessible name of the hue slider that selects the base color of the picking area',
+    },
+    {
+        ref: 'palette',
+        kind: LabelKind.LABEL,
+        purpose: 'Heading and accessible name of the grid of preset theme colors below the picking area',
+    },
+    {
+        ref: 'paletteSwatch',
+        kind: LabelKind.ARIA,
+        params: [{ key: 'color', meaning: 'Human-readable name of the preset color, e.g. "sky" or "emerald"' }],
+        purpose: 'Accessible name of one preset color swatch button in the grid',
+        notes: [
+            'Must name the ACTION the button performs, not just the color: a screen-reader user hearing only the color name cannot tell it is actionable.',
+        ],
+    },
+];
+registerComponentLabels(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, LowLevelColorInputLabels);
+//# sourceMappingURL=color-input.labels.js.map

package/dist/esm/components/form/controls/string/color-input.labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-input.labels.js","sourceRoot":"","sources":["../../../../../../../src/components/form/controls/string/color-input.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAA4B,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE1I,2EAA2E;AAC3E,6EAA6E;AAC7E,+EAA+E;AAE/E,MAAM,CAAC,MAAM,wBAAwB,GAA0B;IAC7D;QACE,GAAG,EAAE,aAAa;QAClB,IAAI,EAAE,SAAS,CAAC,IAAI;QACpB,OAAO,EAAE,0EAA0E;KACpF;IACD;QACE,GAAG,EAAE,sBAAsB;QAC3B,IAAI,EAAE,SAAS,CAAC,IAAI;QACpB,OAAO,EAAE,yGAAyG;KACnH;IACD;QACE,GAAG,EAAE,2BAA2B;QAChC,IAAI,EAAE,SAAS,CAAC,IAAI;QACpB,MAAM,EAAE;YACN,EAAE,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,2DAA2D,EAAE;YAC3F,EAAE,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,2DAA2D,EAAE;SAC5F;QACD,OAAO,EAAE,sEAAsE;QAC/E,KAAK,EAAE,CAAC,sFAAsF,CAAC;KAChG;IACD;QACE,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,SAAS,CAAC,IAAI;QACpB,OAAO,EAAE,mFAAmF;KAC7F;IACD;QACE,GAAG,EAAE,SAAS;QACd,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,OAAO,EAAE,uFAAuF;KACjG;IACD;QACE,GAAG,EAAE,eAAe;QACpB,IAAI,EAAE,SAAS,CAAC,IAAI;QACpB,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,kEAAkE,EAAE,CAAC;QACvG,OAAO,EAAE,+DAA+D;QACxE,KAAK,EAAE;YACL,8IAA8I;SAC/I;KACF;CACF,CAAC;AACF,uBAAuB,CAAC,qBAAqB,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,CAAC","sourcesContent":["import { FrontendComponentType, LabelKind, type LabellingUnitaryDef, registerComponentLabels } from '@wildo-ai/presets-components-models';\n\n// Companion-only label metadata for this component: keys + params + (where\n// authored) per-key purpose / kind / variable meaning. Statically scanned by\n// the dev companion; NOT imported at runtime, so it never ships in the bundle.\n\nexport const LowLevelColorInputLabels: LabellingUnitaryDef[] = [\n  {\n    ref: 'selectColor',\n    kind: LabelKind.ARIA,\n    purpose: 'Accessible name of the swatch button that opens the color picker popover',\n  },\n  {\n    ref: 'saturationBrightness',\n    kind: LabelKind.ARIA,\n    purpose: 'Accessible name of the two-dimensional color area where the user drags to set saturation and brightness',\n  },\n  {\n    ref: 'saturationBrightnessValue',\n    kind: LabelKind.ARIA,\n    params: [\n      { key: 'saturation', meaning: 'Current saturation as a whole-number percentage, 0 to 100' },\n      { key: 'brightness', meaning: 'Current brightness as a whole-number percentage, 0 to 100' },\n    ],\n    purpose: 'Spoken value of the color area, read out as the user moves within it',\n    notes: ['Must read naturally when announced by a screen reader, not as a bare pair of numbers'],\n  },\n  {\n    ref: 'hue',\n    kind: LabelKind.ARIA,\n    purpose: 'Accessible name of the hue slider that selects the base color of the picking area',\n  },\n  {\n    ref: 'palette',\n    kind: LabelKind.LABEL,\n    purpose: 'Heading and accessible name of the grid of preset theme colors below the picking area',\n  },\n  {\n    ref: 'paletteSwatch',\n    kind: LabelKind.ARIA,\n    params: [{ key: 'color', meaning: 'Human-readable name of the preset color, e.g. \"sky\" or \"emerald\"' }],\n    purpose: 'Accessible name of one preset color swatch button in the grid',\n    notes: [\n      'Must name the ACTION the button performs, not just the color: a screen-reader user hearing only the color name cannot tell it is actionable.',\n    ],\n  },\n];\nregisterComponentLabels(FrontendComponentType.LOW_LEVEL_COLOR_INPUT, LowLevelColorInputLabels);\n"]}

package/dist/esm/components/form/controls/string/color-picker-surface.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { HsvColor } from "@wildo-ai/saas-frontend-lib";
+import { ControlSize } from "@wildo-ai/presets-components-models";
+export interface ColorPickerSurfaceProps {
+    /** The current point on the surface. Owned by the caller so hue survives black and white. */
+    value: HsvColor;
+    onChange: (value: HsvColor) => void;
+    /** Fired when a drag or keyboard adjustment finishes, so the caller can commit/blur. */
+    onCommit?: () => void;
+    disabled?: boolean;
+    controlSize?: ControlSize;
+    /** Accessible names, resolved by the caller — this surface renders no untranslated text. */
+    planeLabel: string;
+    hueLabel: string;
+    /** Spoken value of the plane, e.g. "Saturation 62%, brightness 90%". Caller interpolates it. */
+    planeValueText: string;
+}
+export declare function ColorPickerSurface({ value, onChange, onCommit, disabled, controlSize, planeLabel, hueLabel, planeValueText, }: ColorPickerSurfaceProps): React.JSX.Element;
+//# sourceMappingURL=color-picker-surface.d.ts.map

package/dist/esm/components/form/controls/string/color-picker-surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-surface.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/form/controls/string/color-picker-surface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAkC,MAAM,qCAAqC,CAAA;AA6BjG,MAAM,WAAW,uBAAuB;IACtC,6FAA6F;IAC7F,KAAK,EAAE,QAAQ,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAA;IACnC,wFAAwF;IACxF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,4FAA4F;IAC5F,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,gGAAgG;IAChG,cAAc,EAAE,MAAM,CAAA;CACvB;AAMD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAA4B,EAC5B,UAAU,EACV,QAAQ,EACR,cAAc,GACf,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6J7C"}