dialkit 0.2.2 → 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
 
@@ -206,6 +206,7 @@ const p = useDialKit('Controls', {
 ```
 
 Action buttons trigger callbacks without storing any value. The `label` defaults to the formatted key name (camelCase becomes Title Case). Multiple adjacent actions are grouped vertically.
+Action buttons can be placed at the root or nested inside folders.
 
 ### Folder
 
@@ -233,6 +234,16 @@ shadow: {
 }
 ```
 
+DialKit also supports dynamic config updates. If your config shape, defaults, options, or labels change over time, the panel updates while preserving current values where paths still exist.
+
+Dynamic configs work with both inline objects and memoized configs — no special consumer action needed:
+
+```tsx
+const values = useDialKit('Controls', {
+  style: { type: 'select', options: dynamicOptions },
+});
+```
+
 ---
 
 ## DialRoot
@@ -244,8 +255,37 @@ shadow: {
 | Prop | Type | Default |
 |------|------|---------|
 | `position` | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | `'top-right'` |
+| `defaultOpen` | `boolean` | `true` |
+| `mode` | `'popover' \| 'inline'` | `'popover'` |
+
+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:
 
-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.
+**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.
 
 ---
 
@@ -316,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: