dialkit 1.0.0 → 1.1.0

package/dist/index.d.cts

@@ -1,6 +1,5 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 type SpringConfig = {
     type: 'spring';
@@ -131,11 +130,13 @@ interface UseDialOptions {
 declare function useDialKit<T extends DialConfig>(name: string, config: T, options?: UseDialOptions): ResolvedValues<T>;
 
 type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type DialMode = 'popover' | 'inline';
 interface DialRootProps {
     position?: DialPosition;
     defaultOpen?: boolean;
+    mode?: DialMode;
 }
-declare function DialRoot({ position, defaultOpen }: DialRootProps): react.ReactPortal | null;
+declare function DialRoot({ position, defaultOpen, mode }: DialRootProps): react_jsx_runtime.JSX.Element | null;
 
 interface SliderProps {
     label: string;
@@ -160,10 +161,11 @@ interface FolderProps {
     children: ReactNode;
     defaultOpen?: boolean;
     isRoot?: boolean;
+    inline?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     toolbar?: ReactNode;
 }
-declare function Folder({ title, children, defaultOpen, isRoot, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
+declare function Folder({ title, children, defaultOpen, isRoot, inline, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonGroupProps {
     buttons: Array<{
@@ -237,4 +239,4 @@ interface PresetManagerProps {
 }
 declare function PresetManager({ panelId, presets, activePresetId, onAdd }: PresetManagerProps): react_jsx_runtime.JSX.Element;
 
-export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialPosition, DialRoot, DialStore, type DialValue, type EasingConfig, EasingVisualization, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type TransitionConfig, TransitionControl, type UseDialOptions, useDialKit };
+export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialMode, type DialPosition, DialRoot, DialStore, type DialValue, type EasingConfig, EasingVisualization, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type TransitionConfig, TransitionControl, type UseDialOptions, useDialKit };

package/dist/index.d.ts

@@ -1,6 +1,5 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 type SpringConfig = {
     type: 'spring';
@@ -131,11 +130,13 @@ interface UseDialOptions {
 declare function useDialKit<T extends DialConfig>(name: string, config: T, options?: UseDialOptions): ResolvedValues<T>;
 
 type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type DialMode = 'popover' | 'inline';
 interface DialRootProps {
     position?: DialPosition;
     defaultOpen?: boolean;
+    mode?: DialMode;
 }
-declare function DialRoot({ position, defaultOpen }: DialRootProps): react.ReactPortal | null;
+declare function DialRoot({ position, defaultOpen, mode }: DialRootProps): react_jsx_runtime.JSX.Element | null;
 
 interface SliderProps {
     label: string;
@@ -160,10 +161,11 @@ interface FolderProps {
     children: ReactNode;
     defaultOpen?: boolean;
     isRoot?: boolean;
+    inline?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     toolbar?: ReactNode;
 }
-declare function Folder({ title, children, defaultOpen, isRoot, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
+declare function Folder({ title, children, defaultOpen, isRoot, inline, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonGroupProps {
     buttons: Array<{
@@ -237,4 +239,4 @@ interface PresetManagerProps {
 }
 declare function PresetManager({ panelId, presets, activePresetId, onAdd }: PresetManagerProps): react_jsx_runtime.JSX.Element;
 
-export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialPosition, DialRoot, DialStore, type DialValue, type EasingConfig, EasingVisualization, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type TransitionConfig, TransitionControl, type UseDialOptions, useDialKit };
+export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialMode, type DialPosition, DialRoot, DialStore, type DialValue, type EasingConfig, EasingVisualization, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type TransitionConfig, TransitionControl, type UseDialOptions, useDialKit };

package/dist/index.js

@@ -522,7 +522,7 @@ import { motion as motion6, AnimatePresence as AnimatePresence4 } from "motion/r
 import { useState, useRef as useRef2, useEffect as useEffect2 } from "react";
 import { motion, AnimatePresence } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenChange, toolbar }) {
+function Folder({ title, children, defaultOpen = true, isRoot = false, inline = false, onOpenChange, toolbar }) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const [isCollapsed, setIsCollapsed] = useState(!defaultOpen);
   const contentRef = useRef2(null);
@@ -540,6 +540,7 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
     return () => ro.disconnect();
   }, [isOpen]);
   const handleToggle = () => {
+    if (inline && isRoot) return;
     const next = !isOpen;
     setIsOpen(next);
     if (next) {
@@ -553,40 +554,35 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
     /* @__PURE__ */ jsxs("div", { className: `dialkit-folder-header ${isRoot ? "dialkit-panel-header" : ""}`, onClick: handleToggle, children: [
       /* @__PURE__ */ jsxs("div", { className: "dialkit-folder-header-top", children: [
         isRoot ? isOpen && /* @__PURE__ */ jsx("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ jsx("span", { className: "dialkit-folder-title dialkit-folder-title-root", children: title }) }) : /* @__PURE__ */ jsx("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ jsx("span", { className: "dialkit-folder-title", children: title }) }),
-        isRoot ? (
-          // Root panel icon — fixed position, container morphs around it
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              className: "dialkit-panel-icon",
-              viewBox: "0 0 16 16",
-              fill: "none",
-              children: [
-                /* @__PURE__ */ jsx("path", { opacity: "0.5", d: "M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z", fill: "currentColor" }),
-                /* @__PURE__ */ jsx("circle", { cx: "6", cy: "8", r: "0.998596", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
-                /* @__PURE__ */ jsx("circle", { cx: "10.4999", cy: "3.5", r: "0.998657", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
-                /* @__PURE__ */ jsx("circle", { cx: "9.75015", cy: "12.5", r: "0.997986", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" })
-              ]
-            }
-          )
-        ) : (
-          // Section folders use rotating chevron with gentle spring
-          /* @__PURE__ */ jsx(
-            motion.svg,
-            {
-              className: "dialkit-folder-icon",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              initial: false,
-              animate: { rotate: isOpen ? 0 : 180 },
-              transition: { type: "spring", visualDuration: 0.35, bounce: 0.15 },
-              children: /* @__PURE__ */ jsx("path", { d: "M6 9.5L12 15.5L18 9.5" })
-            }
-          )
+        isRoot && !inline && /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "dialkit-panel-icon",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            children: [
+              /* @__PURE__ */ jsx("path", { opacity: "0.5", d: "M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z", fill: "currentColor" }),
+              /* @__PURE__ */ jsx("circle", { cx: "6", cy: "8", r: "0.998596", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
+              /* @__PURE__ */ jsx("circle", { cx: "10.4999", cy: "3.5", r: "0.998657", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
+              /* @__PURE__ */ jsx("circle", { cx: "9.75015", cy: "12.5", r: "0.997986", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" })
+            ]
+          }
+        ),
+        !isRoot && /* @__PURE__ */ jsx(
+          motion.svg,
+          {
+            className: "dialkit-folder-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            initial: false,
+            animate: { rotate: isOpen ? 0 : 180 },
+            transition: { type: "spring", visualDuration: 0.35, bounce: 0.15 },
+            children: /* @__PURE__ */ jsx("path", { d: "M6 9.5L12 15.5L18 9.5" })
+          }
         )
       ] }),
       isRoot && toolbar && isOpen && /* @__PURE__ */ jsx("div", { className: "dialkit-panel-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar })
@@ -605,6 +601,9 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
     ) })
   ] });
   if (isRoot) {
+    if (inline) {
+      return /* @__PURE__ */ jsx("div", { className: "dialkit-panel-inner dialkit-panel-inline", children: folderContent });
+    }
     const panelStyle = isOpen ? { width: 280, height: contentHeight !== void 0 ? contentHeight + 24 : "auto", borderRadius: 14, boxShadow: "0 8px 32px rgba(0, 0, 0, 0.5)", cursor: void 0 } : { width: 42, height: 42, borderRadius: 21, boxShadow: "0 4px 16px rgba(0, 0, 0, 0.25)", overflow: "hidden", cursor: "pointer" };
     return /* @__PURE__ */ jsx(
       motion.div,
@@ -1799,7 +1798,7 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
 
 // src/components/Panel.tsx
 import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
-function Panel({ panel, defaultOpen = true }) {
+function Panel({ panel, defaultOpen = true, inline = false }) {
   const [copied, setCopied] = useState8(false);
   const [isPanelOpen, setIsPanelOpen] = useState8(defaultOpen);
   const values = useSyncExternalStore4(
@@ -2004,14 +2003,15 @@ Apply these values as the new defaults in the useDialKit call.`;
       }
     )
   ] });
-  return /* @__PURE__ */ jsx13("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ jsx13(Folder, { title: panel.name, defaultOpen, isRoot: true, onOpenChange: setIsPanelOpen, toolbar, children: renderControls() }) });
+  return /* @__PURE__ */ jsx13("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ jsx13(Folder, { title: panel.name, defaultOpen, isRoot: true, inline, onOpenChange: setIsPanelOpen, toolbar, children: renderControls() }) });
 }
 
 // src/components/DialRoot.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-function DialRoot({ position = "top-right", defaultOpen = true }) {
+function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover" }) {
   const [panels, setPanels] = useState9([]);
   const [mounted, setMounted] = useState9(false);
+  const inline = mode === "inline";
   useEffect7(() => {
     setMounted(true);
     setPanels(DialStore.getPanels());
@@ -2026,7 +2026,10 @@ function DialRoot({ position = "top-right", defaultOpen = true }) {
   if (panels.length === 0) {
     return null;
   }
-  const content = /* @__PURE__ */ jsx14("div", { className: "dialkit-root", children: /* @__PURE__ */ jsx14("div", { className: "dialkit-panel", "data-position": position, children: panels.map((panel) => /* @__PURE__ */ jsx14(Panel, { panel, defaultOpen }, panel.id)) }) });
+  const content = /* @__PURE__ */ jsx14("div", { className: "dialkit-root", "data-mode": mode, children: /* @__PURE__ */ jsx14("div", { className: "dialkit-panel", "data-position": inline ? void 0 : position, "data-mode": mode, children: panels.map((panel) => /* @__PURE__ */ jsx14(Panel, { panel, defaultOpen: inline || defaultOpen, inline }, panel.id)) }) });
+  if (inline) {
+    return content;
+  }
   return createPortal3(content, document.body);
 }