dialkit 0.2.1 → 0.2.2

package/README.md

@@ -72,12 +72,24 @@ Returns a fully typed object matching your config shape with live values. Updati
 
 ### Slider
 
+Numbers create sliders. There are three ways to define them:
+
+**Explicit range** — `[default, min, max]`:
+```tsx
+blur: [24, 0, 100]
+```
+
+**Explicit range + step** — `[default, min, max, step]`:
 ```tsx
-blur: [24, 0, 100]      // [default, min, max] — explicit range
-scale: 1.2              // auto-infers range from value
+blur: [24, 0, 100, 5]    // snaps in increments of 5
 ```
+When `step` is omitted, it's inferred from the range (see table below).
 
-Numbers create sliders. With a tuple `[default, min, max]` you set the range explicitly. A bare number auto-infers a reasonable range:
+**Auto-inferred** — bare number:
+```tsx
+scale: 1.2
+```
+A single number auto-infers a reasonable min, max, and step:
 
 | Value range | Inferred min/max | Step |
 |-------------|-----------------|------|
@@ -197,19 +209,28 @@ Action buttons trigger callbacks without storing any value. The `label` defaults
 
 ### Folder
 
+Any nested plain object becomes a collapsible folder. Folders can nest arbitrarily deep.
+
 ```tsx
 shadow: {
   blur: [10, 0, 50],
   opacity: [0.25, 0, 1],
   color: '#000000',
 }
+
+// Access nested values:
+params.shadow.blur     // number
+params.shadow.color    // string
 ```
 
-Any nested plain object becomes a collapsible folder. Folders can nest arbitrarily deep. Access nested values with dot notation on the returned object:
+Folders are open by default. Add `_collapsed: true` to start a folder closed. This is a reserved metadata key — it controls the UI only and won't appear in your returned values.
 
 ```tsx
-params.shadow.blur     // number
-params.shadow.color    // string
+shadow: {
+  _collapsed: true,    // folder starts closed
+  blur: [10, 0, 50],
+  opacity: [0.25, 0, 1],
+}
 ```
 
 ---

package/dist/index.cjs

@@ -197,16 +197,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);
@@ -230,11 +231,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)
         });
       }
     }
@@ -243,8 +247,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;
@@ -336,8 +341,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;
@@ -383,7 +389,7 @@ function getFirstOptionValue(options) {
 
 // src/components/DialRoot.tsx
 var import_react16 = require("react");
-var import_react_dom2 = require("react-dom");
+var import_react_dom3 = require("react-dom");
 
 // src/components/Panel.tsx
 var import_react14 = require("react");
@@ -501,10 +507,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);
@@ -652,7 +662,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();
@@ -732,7 +743,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) => {
@@ -746,7 +757,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;
@@ -764,7 +775,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__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "dialkit-slider-hashmark",
+        style: { left: `${pct}%` }
+      },
+      i
+    );
+  }) : Array.from({ length: 9 }, (_, i) => {
     const pct = (i + 1) * 10;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
@@ -1154,6 +1176,7 @@ function TextControl({ label, value, onChange, placeholder }) {
 
 // src/components/SelectControl.tsx
 var import_react9 = require("react");
+var import_react_dom = require("react-dom");
 var import_react10 = require("motion/react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function toTitleCase(s) {
@@ -1166,23 +1189,50 @@ function normalizeOptions(options) {
 }
 function SelectControl({ label, value, options, onChange }) {
   const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const containerRef = (0, import_react9.useRef)(null);
+  const triggerRef = (0, import_react9.useRef)(null);
+  const dropdownRef = (0, import_react9.useRef)(null);
+  const [portalTarget, setPortalTarget] = (0, import_react9.useState)(null);
+  const [pos, setPos] = (0, import_react9.useState)(null);
   const normalized = normalizeOptions(options);
   const selectedOption = normalized.find((o) => o.value === value);
+  const updatePos = (0, import_react9.useCallback)(() => {
+    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]);
+  (0, import_react9.useEffect)(() => {
+    const root = triggerRef.current?.closest(".dialkit-root");
+    setPortalTarget(root ?? document.body);
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    if (!isOpen) return;
+    updatePos();
+  }, [isOpen, updatePos]);
   (0, import_react9.useEffect)(() => {
     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__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: containerRef, className: "dialkit-select-row", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dialkit-select-row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "button",
       {
+        ref: triggerRef,
         className: "dialkit-select-trigger",
         onClick: () => setIsOpen(!isOpen),
         "data-open": String(isOpen),
@@ -1209,29 +1259,39 @@ function SelectControl({ label, value, options, onChange }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_react10.motion.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__ */ (0, import_jsx_runtime8.jsx)(
-          "button",
-          {
-            className: "dialkit-select-option",
-            "data-selected": String(option.value === value),
-            onClick: () => {
-              onChange(option.value);
-              setIsOpen(false);
-            },
-            children: option.label
+    portalTarget && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.AnimatePresence, { children: isOpen && pos && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_react10.motion.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__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              className: "dialkit-select-option",
+              "data-selected": String(option.value === value),
+              onClick: () => {
+                onChange(option.value);
+                setIsOpen(false);
+              },
+              children: option.label
+            },
+            option.value
+          ))
+        }
+      ) }),
+      portalTarget
+    )
   ] });
 }
 
@@ -1315,7 +1375,7 @@ function expandShorthandHex(hex) {
 
 // src/components/PresetManager.tsx
 var import_react12 = require("react");
-var import_react_dom = require("react-dom");
+var import_react_dom2 = require("react-dom");
 var import_react13 = require("motion/react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function PresetManager({ panelId, presets, activePresetId, onAdd }) {
@@ -1390,12 +1450,12 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
         ]
       }
     ),
-    (0, import_react_dom.createPortal)(
+    (0, import_react_dom2.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react13.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         import_react13.motion.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 },
@@ -1514,7 +1574,7 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "folder":
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Folder, { title: control.label, children: control.children?.map(renderControl) }, control.path);
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Folder, { title: control.label, defaultOpen: control.defaultOpen ?? true, children: control.children?.map(renderControl) }, control.path);
       case "text":
         return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           TextControl,
@@ -1675,7 +1735,7 @@ function DialRoot({ position = "top-right" }) {
     return null;
   }
   const content = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "dialkit-root", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "dialkit-panel", "data-position": position, children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Panel, { panel }, panel.id)) }) });
-  return (0, import_react_dom2.createPortal)(content, document.body);
+  return (0, import_react_dom3.createPortal)(content, document.body);
 }
 
 // src/components/ButtonGroup.tsx