dialkit 1.0.0 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # dialkit
 
-Real-time parameter tweaking for React + Motion.
+Real-time parameter tweaking for React, Solid, and Svelte.
 
 ## Quick Start
 
@@ -256,8 +256,36 @@ const values = useDialKit('Controls', {
 |------|------|---------|
 | `position` | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | `'top-right'` |
 | `defaultOpen` | `boolean` | `true` |
+| `mode` | `'popover' \| 'inline'` | `'popover'` |
 
-Mount once at your app root. The panel renders via a portal on `document.body`. It collapses to a small icon button and expands to 280px wide on click.
+Mount once at your app root. In the default `popover` mode, the panel renders via a portal on `document.body`. It collapses to a small icon button and expands to 280px wide on click.
+
+### Inline mode
+
+Use `mode="inline"` to render DialKit directly in your layout instead of as a floating popover. The panel fills its container and scrolls internally, which is useful for embedding in a sidebar or resizable panel. Inline mode works across all frameworks:
+
+**React:**
+```tsx
+<aside style={{ width: 300, height: '100vh', overflow: 'hidden' }}>
+  <DialRoot mode="inline" />
+</aside>
+```
+
+**Solid:**
+```tsx
+<aside style={{ width: '300px', height: '100vh', overflow: 'hidden' }}>
+  <DialRoot mode="inline" />
+</aside>
+```
+
+**Svelte:**
+```svelte
+<aside style:width="300px" style:height="100vh" style:overflow="hidden">
+  <DialRoot mode="inline" />
+</aside>
+```
+
+In inline mode, the `position` prop is ignored and the collapse-to-icon behavior is disabled.
 
 ---
 
@@ -328,6 +356,99 @@ function PhotoStack() {
 
 ---
 
+## Solid
+
+DialKit also works with Solid. Import from `dialkit/solid` instead of `dialkit` — the API mirrors the React version, with `createDialKit` replacing `useDialKit` and `DialRoot` as a Solid component.
+
+```bash
+npm install dialkit solid-js
+```
+
+```tsx
+// App.tsx
+import { DialRoot } from 'dialkit/solid';
+import 'dialkit/styles.css';
+
+export default function App() {
+  return (
+    <>
+      <MyComponent />
+      <DialRoot />
+    </>
+  );
+}
+```
+
+```tsx
+// component.tsx
+import { createDialKit } from 'dialkit/solid';
+
+function Card() {
+  const params = createDialKit('Card', {
+    blur: [24, 0, 100],
+    scale: 1.2,
+    color: '#ff5500',
+    visible: true,
+  });
+
+  return (
+    <div style={{
+      filter: `blur(${params().blur}px)`,
+      transform: `scale(${params().scale})`,
+      color: params().color,
+      opacity: params().visible ? 1 : 0,
+    }}>
+      ...
+    </div>
+  );
+}
+```
+
+`createDialKit` returns an accessor — call `params()` to read the current values. All control types, config shapes, and panel features (presets, copy, folders) work identically to the React version.
+
+---
+
+## Svelte
+
+DialKit works with Svelte 5 (≥5.8.0). Import from `dialkit/svelte` — no extra dependencies needed.
+
+```bash
+npm install dialkit
+```
+
+```svelte
+<!-- +layout.svelte -->
+<script>
+  import { DialRoot } from 'dialkit/svelte';
+  let { children } = $props();
+</script>
+
+{@render children()}
+<DialRoot />
+```
+
+```svelte
+<!-- Card.svelte -->
+<script>
+  import { createDialKit } from 'dialkit/svelte';
+
+  const params = createDialKit('Card', {
+    blur: [24, 0, 100],
+    scale: 1.2,
+    color: '#ff5500',
+    visible: true
+  });
+</script>
+
+<div style:filter={`blur(${params.blur}px)`} style:color={params.color}>
+  ...
+</div>
+```
+
+`createDialKit` returns a reactive object — access values directly (e.g. `params.blur`). Styles are injected automatically by `DialRoot` (no CSS import needed). Cleanup is automatic when the component unmounts. All control types, presets, folders, and transitions match the React/Solid entries.
+
+---
+
 ## Types
 
 All config and value types are exported:

package/dist/index.cjs

@@ -561,7 +561,7 @@ var import_react16 = require("motion/react");
 var import_react2 = require("react");
 var import_react3 = require("motion/react");
 var import_jsx_runtime = require("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] = (0, import_react2.useState)(defaultOpen);
   const [isCollapsed, setIsCollapsed] = (0, import_react2.useState)(!defaultOpen);
   const contentRef = (0, import_react2.useRef)(null);
@@ -579,6 +579,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) {
@@ -592,40 +593,35 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `dialkit-folder-header ${isRoot ? "dialkit-panel-header" : ""}`, onClick: handleToggle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dialkit-folder-header-top", children: [
         isRoot ? isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dialkit-folder-title dialkit-folder-title-root", children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dialkit-folder-title", children: title }) }),
-        isRoot ? (
-          // Root panel icon — fixed position, container morphs around it
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "svg",
-            {
-              className: "dialkit-panel-icon",
-              viewBox: "0 0 16 16",
-              fill: "none",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6", cy: "8", r: "0.998596", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10.4999", cy: "3.5", r: "0.998657", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
-            import_react3.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
-            }
-          )
+        isRoot && !inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "svg",
+          {
+            className: "dialkit-panel-icon",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6", cy: "8", r: "0.998596", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10.4999", cy: "3.5", r: "0.998657", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9.75015", cy: "12.5", r: "0.997986", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" })
+            ]
+          }
+        ),
+        !isRoot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react3.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
+          }
         )
       ] }),
       isRoot && toolbar && isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-panel-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar })
@@ -644,6 +640,9 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
     ) })
   ] });
   if (isRoot) {
+    if (inline) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
       import_react3.motion.div,
@@ -1838,7 +1837,7 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
 
 // src/components/Panel.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function Panel({ panel, defaultOpen = true }) {
+function Panel({ panel, defaultOpen = true, inline = false }) {
   const [copied, setCopied] = (0, import_react15.useState)(false);
   const [isPanelOpen, setIsPanelOpen] = (0, import_react15.useState)(defaultOpen);
   const values = (0, import_react15.useSyncExternalStore)(
@@ -2043,14 +2042,15 @@ Apply these values as the new defaults in the useDialKit call.`;
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Folder, { title: panel.name, defaultOpen, isRoot: true, onOpenChange: setIsPanelOpen, toolbar, children: renderControls() }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Folder, { title: panel.name, defaultOpen, isRoot: true, inline, onOpenChange: setIsPanelOpen, toolbar, children: renderControls() }) });
 }
 
 // src/components/DialRoot.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function DialRoot({ position = "top-right", defaultOpen = true }) {
+function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover" }) {
   const [panels, setPanels] = (0, import_react17.useState)([]);
   const [mounted, setMounted] = (0, import_react17.useState)(false);
+  const inline = mode === "inline";
   (0, import_react17.useEffect)(() => {
     setMounted(true);
     setPanels(DialStore.getPanels());
@@ -2065,7 +2065,10 @@ function DialRoot({ position = "top-right", defaultOpen = true }) {
   if (panels.length === 0) {
     return null;
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dialkit-root", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dialkit-panel", "data-position": position, children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Panel, { panel, defaultOpen }, panel.id)) }) });
+  const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dialkit-root", "data-mode": mode, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dialkit-panel", "data-position": inline ? void 0 : position, "data-mode": mode, children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Panel, { panel, defaultOpen: inline || defaultOpen, inline }, panel.id)) }) });
+  if (inline) {
+    return content;
+  }
   return (0, import_react_dom3.createPortal)(content, document.body);
 }