dialkit 0.2.1 → 0.2.2

package/dist/index.d.ts

@@ -33,10 +33,10 @@ type TextConfig = {
 };
 type DialValue = number | boolean | string | SpringConfig | ActionConfig | SelectConfig | ColorConfig | TextConfig;
 type DialConfig = {
-    [key: string]: DialValue | [number, number, number] | DialConfig;
+    [key: string]: DialValue | [number, number, number, number?] | DialConfig;
 };
 type ResolvedValues<T extends DialConfig> = {
-    [K in keyof T]: T[K] extends [number, number, number] ? number : T[K] extends SpringConfig ? SpringConfig : T[K] extends SelectConfig ? string : T[K] extends ColorConfig ? string : T[K] extends TextConfig ? string : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
+    [K in keyof T]: T[K] extends [number, number, number, number?] ? number : T[K] extends SpringConfig ? SpringConfig : T[K] extends SelectConfig ? string : T[K] extends ColorConfig ? string : T[K] extends TextConfig ? string : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
 };
 type ControlMeta = {
     type: 'slider' | 'toggle' | 'spring' | 'folder' | 'action' | 'select' | 'color' | 'text';
@@ -46,6 +46,7 @@ type ControlMeta = {
     max?: number;
     step?: number;
     children?: ControlMeta[];
+    defaultOpen?: boolean;
     options?: (string | {
         value: string;
         label: string;

package/dist/index.js

@@ -160,16 +160,17 @@ var DialStoreClass = class {
   parseConfig(config, prefix) {
     const controls = [];
     for (const [key, value] of Object.entries(config)) {
+      if (key === "_collapsed") continue;
       const path = prefix ? `${prefix}.${key}` : key;
       const label = this.formatLabel(key);
-      if (Array.isArray(value) && value.length === 3 && typeof value[0] === "number") {
+      if (Array.isArray(value) && value.length <= 4 && typeof value[0] === "number") {
         controls.push({
           type: "slider",
           path,
           label,
           min: value[1],
           max: value[2],
-          step: this.inferStep(value[1], value[2])
+          step: value[3] ?? this.inferStep(value[1], value[2])
         });
       } else if (typeof value === "number") {
         const { min, max, step } = this.inferRange(value);
@@ -193,11 +194,14 @@ var DialStoreClass = class {
           controls.push({ type: "text", path, label });
         }
       } else if (typeof value === "object" && value !== null) {
+        const folderConfig = value;
+        const defaultOpen = "_collapsed" in folderConfig ? !folderConfig._collapsed : true;
         controls.push({
           type: "folder",
           path,
           label,
-          children: this.parseConfig(value, path)
+          defaultOpen,
+          children: this.parseConfig(folderConfig, path)
         });
       }
     }
@@ -206,8 +210,9 @@ var DialStoreClass = class {
   flattenValues(config, prefix) {
     const values = {};
     for (const [key, value] of Object.entries(config)) {
+      if (key === "_collapsed") continue;
       const path = prefix ? `${prefix}.${key}` : key;
-      if (Array.isArray(value) && value.length === 3 && typeof value[0] === "number") {
+      if (Array.isArray(value) && value.length <= 4 && typeof value[0] === "number") {
         values[path] = value[0];
       } else if (typeof value === "number" || typeof value === "boolean" || typeof value === "string") {
         values[path] = value;
@@ -299,8 +304,9 @@ function useDialKit(name, config, options) {
 function buildResolvedValues(config, flatValues, prefix) {
   const result = {};
   for (const [key, configValue] of Object.entries(config)) {
+    if (key === "_collapsed") continue;
     const path = prefix ? `${prefix}.${key}` : key;
-    if (Array.isArray(configValue) && configValue.length === 3 && typeof configValue[0] === "number") {
+    if (Array.isArray(configValue) && configValue.length <= 4 && typeof configValue[0] === "number") {
       result[key] = flatValues[path] ?? configValue[0];
     } else if (typeof configValue === "number" || typeof configValue === "boolean" || typeof configValue === "string") {
       result[key] = flatValues[path] ?? configValue;
@@ -346,7 +352,7 @@ function getFirstOptionValue(options) {
 
 // src/components/DialRoot.tsx
 import { useEffect as useEffect7, useState as useState8 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/Panel.tsx
 import { useState as useState7, useSyncExternalStore as useSyncExternalStore3 } from "react";
@@ -464,10 +470,14 @@ var CLICK_THRESHOLD = 3;
 var DEAD_ZONE = 32;
 var MAX_CURSOR_RANGE = 200;
 var MAX_STRETCH = 8;
+function decimalsForStep(step) {
+  const s = step.toString();
+  const dot = s.indexOf(".");
+  return dot === -1 ? 0 : s.length - dot - 1;
+}
 function roundValue(val, step) {
-  const decimals = step >= 1 ? 0 : 2;
-  const factor = 10 ** decimals;
-  return Math.round(val * factor) / factor;
+  const raw = Math.round(val / step) * step;
+  return parseFloat(raw.toFixed(decimalsForStep(step)));
 }
 function snapToDecile(rawValue, min, max) {
   const normalized = (rawValue - min) / (max - min);
@@ -615,7 +625,8 @@ function Slider({
       if (!isInteracting) return;
       if (isClickRef.current) {
         const rawValue = positionToValue(e.clientX);
-        const snappedValue = snapToDecile(rawValue, min, max);
+        const discreteSteps2 = (max - min) / step;
+        const snappedValue = discreteSteps2 <= 10 ? Math.max(min, Math.min(max, min + Math.round((rawValue - min) / step) * step)) : snapToDecile(rawValue, min, max);
         const newPct = percentFromValue(snappedValue);
         if (animRef.current) {
           animRef.current.stop();
@@ -695,7 +706,7 @@ function Slider({
       e.stopPropagation();
       e.preventDefault();
       setShowInput(true);
-      setInputValue(step >= 1 ? value.toFixed(0) : value.toFixed(2));
+      setInputValue(value.toFixed(decimalsForStep(step)));
     }
   };
   const handleInputKeyDown = (e) => {
@@ -709,7 +720,7 @@ function Slider({
   const handleInputBlur = () => {
     handleInputSubmit();
   };
-  const displayValue = step >= 1 ? value.toFixed(0) : value.toFixed(2);
+  const displayValue = value.toFixed(decimalsForStep(step));
   const HANDLE_BUFFER = 8;
   const LABEL_CSS_LEFT = 10;
   const VALUE_CSS_RIGHT = 10;
@@ -727,7 +738,18 @@ function Slider({
   const valueDodge = percentage < leftThreshold || percentage > rightThreshold;
   const handleOpacity = !isActive ? 0 : valueDodge ? 0.1 : isDragging ? 0.9 : 0.5;
   const fillBackground = isActive ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.11)";
-  const hashMarks = Array.from({ length: 9 }, (_, i) => {
+  const discreteSteps = (max - min) / step;
+  const hashMarks = discreteSteps <= 10 ? Array.from({ length: discreteSteps - 1 }, (_, i) => {
+    const pct = (i + 1) * step / (max - min) * 100;
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "dialkit-slider-hashmark",
+        style: { left: `${pct}%` }
+      },
+      i
+    );
+  }) : Array.from({ length: 9 }, (_, i) => {
     const pct = (i + 1) * 10;
     return /* @__PURE__ */ jsx2(
       "div",
@@ -1116,7 +1138,8 @@ function TextControl({ label, value, onChange, placeholder }) {
 }
 
 // src/components/SelectControl.tsx
-import { useState as useState4, useRef as useRef5, useEffect as useEffect4 } from "react";
+import { useState as useState4, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback2 } from "react";
+import { createPortal } from "react-dom";
 import { motion as motion4, AnimatePresence as AnimatePresence2 } from "motion/react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function toTitleCase(s) {
@@ -1129,23 +1152,50 @@ function normalizeOptions(options) {
 }
 function SelectControl({ label, value, options, onChange }) {
   const [isOpen, setIsOpen] = useState4(false);
-  const containerRef = useRef5(null);
+  const triggerRef = useRef5(null);
+  const dropdownRef = useRef5(null);
+  const [portalTarget, setPortalTarget] = useState4(null);
+  const [pos, setPos] = useState4(null);
   const normalized = normalizeOptions(options);
   const selectedOption = normalized.find((o) => o.value === value);
+  const updatePos = useCallback2(() => {
+    const el = triggerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const dropdownHeight = 8 + normalized.length * 36;
+    const spaceBelow = window.innerHeight - rect.bottom - 4;
+    const above = spaceBelow < dropdownHeight && rect.top > spaceBelow;
+    setPos({
+      top: above ? rect.top - 4 : rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+      above
+    });
+  }, [normalized.length]);
+  useEffect4(() => {
+    const root = triggerRef.current?.closest(".dialkit-root");
+    setPortalTarget(root ?? document.body);
+  }, []);
+  useEffect4(() => {
+    if (!isOpen) return;
+    updatePos();
+  }, [isOpen, updatePos]);
   useEffect4(() => {
     if (!isOpen) return;
     const handleClick = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      const target = e.target;
+      if (triggerRef.current && !triggerRef.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
         setIsOpen(false);
       }
     };
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs8("div", { ref: containerRef, className: "dialkit-select-row", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "dialkit-select-row", children: [
     /* @__PURE__ */ jsxs8(
       "button",
       {
+        ref: triggerRef,
         className: "dialkit-select-trigger",
         onClick: () => setIsOpen(!isOpen),
         "data-open": String(isOpen),
@@ -1172,29 +1222,39 @@ function SelectControl({ label, value, options, onChange }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx8(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsx8(
-      motion4.div,
-      {
-        className: "dialkit-select-dropdown",
-        initial: { opacity: 0, y: -8, scale: 0.95 },
-        animate: { opacity: 1, y: 0, scale: 1 },
-        exit: { opacity: 0, y: -8, scale: 0.95 },
-        transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
-        children: normalized.map((option) => /* @__PURE__ */ jsx8(
-          "button",
-          {
-            className: "dialkit-select-option",
-            "data-selected": String(option.value === value),
-            onClick: () => {
-              onChange(option.value);
-              setIsOpen(false);
-            },
-            children: option.label
+    portalTarget && createPortal(
+      /* @__PURE__ */ jsx8(AnimatePresence2, { children: isOpen && pos && /* @__PURE__ */ jsx8(
+        motion4.div,
+        {
+          ref: dropdownRef,
+          className: "dialkit-select-dropdown",
+          initial: { opacity: 0, y: pos.above ? 8 : -8, scale: 0.95 },
+          animate: { opacity: 1, y: 0, scale: 1 },
+          exit: { opacity: 0, y: pos.above ? 8 : -8, scale: 0.95 },
+          transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
+          style: {
+            position: "fixed",
+            left: pos.left,
+            width: pos.width,
+            ...pos.above ? { bottom: window.innerHeight - pos.top, transformOrigin: "bottom" } : { top: pos.top, transformOrigin: "top" }
           },
-          option.value
-        ))
-      }
-    ) })
+          children: normalized.map((option) => /* @__PURE__ */ jsx8(
+            "button",
+            {
+              className: "dialkit-select-option",
+              "data-selected": String(option.value === value),
+              onClick: () => {
+                onChange(option.value);
+                setIsOpen(false);
+              },
+              children: option.label
+            },
+            option.value
+          ))
+        }
+      ) }),
+      portalTarget
+    )
   ] });
 }
 
@@ -1277,8 +1337,8 @@ function expandShorthandHex(hex) {
 }
 
 // src/components/PresetManager.tsx
-import { useState as useState6, useRef as useRef7, useEffect as useEffect6, useCallback as useCallback2 } from "react";
-import { createPortal } from "react-dom";
+import { useState as useState6, useRef as useRef7, useEffect as useEffect6, useCallback as useCallback3 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 import { motion as motion5, AnimatePresence as AnimatePresence3 } from "motion/react";
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function PresetManager({ panelId, presets, activePresetId, onAdd }) {
@@ -1288,7 +1348,7 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
   const [pos, setPos] = useState6({ top: 0, left: 0, width: 0 });
   const hasPresets = presets.length > 0;
   const activePreset = presets.find((p) => p.id === activePresetId);
-  const open = useCallback2(() => {
+  const open = useCallback3(() => {
     if (!hasPresets) return;
     const rect = triggerRef.current?.getBoundingClientRect();
     if (rect) {
@@ -1296,8 +1356,8 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
     }
     setIsOpen(true);
   }, [hasPresets]);
-  const close = useCallback2(() => setIsOpen(false), []);
-  const toggle = useCallback2(() => {
+  const close = useCallback3(() => setIsOpen(false), []);
+  const toggle = useCallback3(() => {
     if (isOpen) close();
     else open();
   }, [isOpen, open, close]);
@@ -1353,12 +1413,12 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
         ]
       }
     ),
-    createPortal(
+    createPortal2(
       /* @__PURE__ */ jsx10(AnimatePresence3, { children: isOpen && /* @__PURE__ */ jsxs10(
         motion5.div,
         {
           ref: dropdownRef,
-          className: "dialkit-preset-dropdown",
+          className: "dialkit-root dialkit-preset-dropdown",
           style: { position: "fixed", top: pos.top, left: pos.left, minWidth: pos.width },
           initial: { opacity: 0, y: 4, scale: 0.97 },
           animate: { opacity: 1, y: 0, scale: 1 },
@@ -1477,7 +1537,7 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "folder":
-        return /* @__PURE__ */ jsx11(Folder, { title: control.label, children: control.children?.map(renderControl) }, control.path);
+        return /* @__PURE__ */ jsx11(Folder, { title: control.label, defaultOpen: control.defaultOpen ?? true, children: control.children?.map(renderControl) }, control.path);
       case "text":
         return /* @__PURE__ */ jsx11(
           TextControl,
@@ -1638,7 +1698,7 @@ function DialRoot({ position = "top-right" }) {
     return null;
   }
   const content = /* @__PURE__ */ jsx12("div", { className: "dialkit-root", children: /* @__PURE__ */ jsx12("div", { className: "dialkit-panel", "data-position": position, children: panels.map((panel) => /* @__PURE__ */ jsx12(Panel, { panel }, panel.id)) }) });
-  return createPortal2(content, document.body);
+  return createPortal3(content, document.body);
 }
 
 // src/components/ButtonGroup.tsx