decantr 0.9.0

package/src/registry/skeletons.json

@@ -0,0 +1,259 @@
+{
+  "$schema": "https://decantr.ai/schemas/skeletons.v1.json",
+  "skeletons": {
+    "sidebar-main": {
+      "name": "Sidebar + Main",
+      "description": "Collapsible sidebar with header bar and scrollable main content area. Used by saas-dashboard, financial-dashboard, docs-explorer, ecommerce (account pages).",
+      "layout": "grid",
+      "atoms": "_grid _h[100vh]",
+      "config": {
+        "regions": ["header", "nav", "body"],
+        "grid": { "areas": [["nav", "header"], ["nav", "body"]] },
+        "nav": { "position": "left", "width": "240px", "collapseTo": "64px", "collapseBelow": "md" },
+        "header": { "height": "52px", "sticky": true },
+        "body": { "scroll": true }
+      },
+      "configurable": {
+        "nav": { "positions": ["left", "right", "top"], "modes": ["full", "rail", "hidden"] },
+        "header": { "toggleable": true, "positions": ["viewport", "body"] },
+        "footer": { "toggleable": true },
+        "aside": { "toggleable": true },
+        "sizing": {
+          "sidebarWidth": { "min": 48, "max": 400, "default": 240 },
+          "headerHeight": { "min": 36, "max": 80, "default": 52 },
+          "asideWidth": { "min": 200, "max": 480, "default": 280 }
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { h, text, onMount, onDestroy } from 'decantr/core';\nimport { createSignal } from 'decantr/state';\nimport { css } from 'decantr/css';\nimport { link, useRoute } from 'decantr/router';\nimport { Button, icon } from 'decantr/components';",
+        "example": "function SidebarMain({ nav, children }) {\n  const { div, aside, main, header, span } = tags;\n  const [collapsed, setCollapsed] = createSignal(false);\n\n  return div({ class: css('_grid _h[100vh]'), style: () => `grid-template-columns:${collapsed() ? '64px' : '240px'} 1fr;grid-template-rows:auto 1fr` },\n    // Sidebar\n    aside({ class: css('_flex _col _gap1 _p3 _bgmuted _overflow[auto] _borderR'), style: 'grid-row:1/3' },\n      div({ class: css('_flex _aic _jcsb _mb4') },\n        !collapsed() ? span({ class: css('_heading5') }, 'App') : null,\n        Button({ variant: 'ghost', size: 'sm', onclick: () => setCollapsed(!collapsed()) },\n          icon('panel-left')\n        )\n      ),\n      ...nav.map(item =>\n        link({ href: item.href, class: css('_flex _aic _gap2 _p2 _px3 _r2 _trans _fgfg') },\n          icon(item.icon),\n          !collapsed() ? text(item.label) : null\n        )\n      )\n    ),\n    // Header\n    header({ class: css('_flex _aic _jcsb _px6 _py3 _borderB') },\n      span({ class: css('_heading4') }, 'Page Title'),\n      div({ class: css('_flex _aic _gap2') })\n    ),\n    // Main content\n    main({ class: css('_flex _col _gap4 _p6 _overflow[auto] _flex1') },\n      ...children\n    )\n  );\n}"
+      }
+    },
+    "sidebar-right": {
+      "name": "Right Sidebar",
+      "description": "Main content with a right-side navigation panel. Useful for settings, documentation sidebars, or inspector layouts.",
+      "layout": "grid",
+      "atoms": "_grid _h[100vh]",
+      "config": {
+        "regions": ["header", "nav", "body"],
+        "grid": { "areas": [["header", "nav"], ["body", "nav"]] },
+        "nav": { "position": "right", "width": "240px", "collapseTo": "64px", "collapseBelow": "md" },
+        "header": { "height": "52px", "sticky": true },
+        "body": { "scroll": true }
+      },
+      "configurable": {
+        "nav": { "positions": ["left", "right", "top"], "modes": ["full", "rail", "hidden"] },
+        "header": { "toggleable": true },
+        "footer": { "toggleable": true },
+        "sizing": {
+          "sidebarWidth": { "min": 48, "max": 400, "default": 240 },
+          "headerHeight": { "min": 36, "max": 80, "default": 52 }
+        }
+      },
+      "code": {
+        "imports": "import { Shell } from 'decantr/components';",
+        "example": "Shell({ config: 'sidebar-right' },\n  Shell.Header({}, headerContent),\n  Shell.Nav({}, navContent),\n  Shell.Body({}, mainContent)\n)"
+      }
+    },
+    "sidebar-main-footer": {
+      "name": "Sidebar + Main + Footer",
+      "description": "Sidebar layout with a persistent footer bar. Used for apps needing status bars or action footers.",
+      "layout": "grid",
+      "atoms": "_grid _h[100vh]",
+      "config": {
+        "regions": ["header", "nav", "body", "footer"],
+        "grid": { "areas": [["nav", "header"], ["nav", "body"], ["nav", "footer"]] },
+        "nav": { "position": "left", "width": "240px", "collapseTo": "64px", "collapseBelow": "md" },
+        "header": { "height": "52px", "sticky": true },
+        "body": { "scroll": true },
+        "footer": { "height": "auto", "sticky": false }
+      },
+      "configurable": {
+        "nav": { "positions": ["left", "right", "top"], "modes": ["full", "rail", "hidden"] },
+        "header": { "toggleable": true },
+        "footer": { "toggleable": true },
+        "sizing": {
+          "sidebarWidth": { "min": 48, "max": 400, "default": 240 },
+          "headerHeight": { "min": 36, "max": 80, "default": 52 }
+        }
+      },
+      "code": {
+        "imports": "import { Shell } from 'decantr/components';",
+        "example": "Shell({ config: 'sidebar-main-footer' },\n  Shell.Header({}, headerContent),\n  Shell.Nav({}, navContent),\n  Shell.Body({}, mainContent),\n  Shell.Footer({}, footerContent)\n)"
+      }
+    },
+    "sidebar-aside": {
+      "name": "Sidebar + Aside",
+      "description": "Three-column layout with left navigation and right inspector/detail panel. Used for admin dashboards, email clients, IDE-style apps.",
+      "layout": "grid",
+      "atoms": "_grid _h[100vh]",
+      "config": {
+        "regions": ["header", "nav", "body", "aside"],
+        "grid": { "areas": [["nav", "header", "aside"], ["nav", "body", "aside"]] },
+        "nav": { "position": "left", "width": "240px", "collapseTo": "64px", "collapseBelow": "md" },
+        "header": { "height": "52px", "sticky": true },
+        "body": { "scroll": true },
+        "aside": { "width": "280px", "collapsible": true }
+      },
+      "configurable": {
+        "nav": { "positions": ["left", "right"], "modes": ["full", "rail", "hidden"] },
+        "header": { "toggleable": true },
+        "aside": { "toggleable": true },
+        "sizing": {
+          "sidebarWidth": { "min": 48, "max": 400, "default": 240 },
+          "headerHeight": { "min": 36, "max": 80, "default": 52 },
+          "asideWidth": { "min": 200, "max": 480, "default": 280 }
+        }
+      },
+      "code": {
+        "imports": "import { Shell } from 'decantr/components';",
+        "example": "Shell({ config: 'sidebar-aside' },\n  Shell.Header({}, headerContent),\n  Shell.Nav({}, navContent),\n  Shell.Body({}, mainContent),\n  Shell.Aside({}, asideContent)\n)"
+      }
+    },
+    "top-nav-main": {
+      "name": "Top Nav + Main",
+      "description": "Horizontal navigation bar with full-width main content below. Used by ecommerce (storefront), portfolio, content-site.",
+      "layout": "stack",
+      "atoms": "_flex _col _h[100vh]",
+      "config": {
+        "regions": ["header", "body"],
+        "grid": { "areas": [["header"], ["body"]] },
+        "nav": { "position": "top" },
+        "header": { "height": "52px", "sticky": true },
+        "body": { "scroll": true }
+      },
+      "configurable": {
+        "nav": { "positions": ["top", "left"], "modes": ["full"] },
+        "header": { "toggleable": true },
+        "footer": { "toggleable": true },
+        "sizing": {
+          "headerHeight": { "min": 36, "max": 80, "default": 52 }
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { text } from 'decantr/core';\nimport { css } from 'decantr/css';\nimport { link } from 'decantr/router';\nimport { Button, icon } from 'decantr/components';",
+        "example": "function TopNavMain({ brand, nav, children }) {\n  const { div, header, main, nav: navEl } = tags;\n\n  return div({ class: css('_flex _col _h[100vh]') },\n    // Top navigation bar\n    header({ class: css('_flex _aic _jcsb _px6 _py3 _borderB _bgbg') },\n      link({ href: '/', class: css('_heading5 _nounder _fgfg') }, brand),\n      navEl({ class: css('_flex _aic _gap6') },\n        ...nav.map(item =>\n          link({ href: item.href, class: css('_fgmuted _nounder _trans') }, item.label)\n        )\n      ),\n      div({ class: css('_flex _aic _gap2') },\n        Button({ variant: 'ghost', size: 'sm' }, icon('search')),\n        Button({ variant: 'ghost', size: 'sm' }, icon('user'))\n      )\n    ),\n    // Main content\n    main({ class: css('_flex _col _gap4 _p6 _overflow[auto] _flex1') },\n      ...children\n    )\n  );\n}"
+      }
+    },
+    "top-nav-footer": {
+      "name": "Top Nav + Footer",
+      "description": "Horizontal nav with main content and a persistent footer. Used for marketing sites, documentation with ToC footer.",
+      "layout": "stack",
+      "atoms": "_flex _col _h[100vh]",
+      "config": {
+        "regions": ["header", "body", "footer"],
+        "grid": { "areas": [["header"], ["body"], ["footer"]] },
+        "nav": { "position": "top" },
+        "header": { "height": "52px", "sticky": true },
+        "body": { "scroll": true },
+        "footer": { "height": "auto", "sticky": false }
+      },
+      "configurable": {
+        "nav": { "positions": ["top", "left"], "modes": ["full"] },
+        "header": { "toggleable": true },
+        "footer": { "toggleable": true },
+        "sizing": {
+          "headerHeight": { "min": 36, "max": 80, "default": 52 }
+        }
+      },
+      "code": {
+        "imports": "import { Shell } from 'decantr/components';",
+        "example": "Shell({ config: 'top-nav-footer' },\n  Shell.Header({}, headerContent),\n  Shell.Nav({}, navItems),\n  Shell.Body({}, mainContent),\n  Shell.Footer({}, footerContent)\n)"
+      }
+    },
+    "centered": {
+      "name": "Centered",
+      "description": "Centered card on a background. Used for auth flows (login, register, forgot password) across all archetypes.",
+      "layout": "center",
+      "atoms": "_flex _center _h[100vh] _bgmuted",
+      "config": {
+        "regions": ["body"],
+        "grid": { "areas": [["body"]] },
+        "nav": { "position": "left", "defaultState": "hidden" },
+        "body": { "scroll": false }
+      },
+      "configurable": {
+        "nav": { "positions": [], "modes": [] },
+        "sizing": {}
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { Card } from 'decantr/components';",
+        "example": "function Centered({ children, width = '400px' }) {\n  const { div } = tags;\n\n  return div({ class: css('_flex _center _h[100vh] _bgmuted _p4') },\n    Card({ class: css(`_w[${width}] _mw[100%]`) },\n      ...children\n    )\n  );\n}"
+      }
+    },
+    "full-bleed": {
+      "name": "Full Bleed",
+      "description": "No persistent navigation. Scroll-driven hero-first layout. Used by portfolio landing pages.",
+      "layout": "stack",
+      "atoms": "_flex _col",
+      "config": {
+        "regions": ["header", "body"],
+        "grid": { "areas": [["header"], ["body"]] },
+        "nav": { "position": "top", "defaultState": "hidden" },
+        "header": { "height": "52px", "sticky": true },
+        "body": { "scroll": true }
+      },
+      "configurable": {
+        "nav": { "positions": ["top"], "modes": ["full", "hidden"] },
+        "header": { "toggleable": true },
+        "sizing": {
+          "headerHeight": { "min": 36, "max": 80, "default": 52 }
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { link } from 'decantr/router';",
+        "example": "function FullBleed({ children }) {\n  const { div, header, main, nav: navEl } = tags;\n\n  return div({ class: css('_flex _col') },\n    // Floating nav (absolute positioned over hero)\n    header({ class: css('_fixed _top0 _left0 _wfull _flex _aic _jcsb _px8 _py4 _z[40]') },\n      link({ href: '/', class: css('_heading5 _nounder _fgfg') }, 'Brand'),\n      navEl({ class: css('_flex _aic _gap6') })\n    ),\n    // Content sections — each section is full viewport height or auto\n    main({ class: css('_flex _col') },\n      ...children\n    )\n  );\n}"
+      }
+    },
+    "minimal-header": {
+      "name": "Minimal Header",
+      "description": "Slim header with centered content below. Used for checkout flows, focused task pages.",
+      "layout": "stack",
+      "atoms": "_flex _col _h[100vh]",
+      "config": {
+        "regions": ["header", "body"],
+        "grid": { "areas": [["header"], ["body"]] },
+        "nav": { "position": "top", "defaultState": "hidden" },
+        "header": { "height": "44px", "sticky": true },
+        "body": { "scroll": true }
+      },
+      "configurable": {
+        "nav": { "positions": ["top"], "modes": ["hidden"] },
+        "header": { "toggleable": true },
+        "sizing": {
+          "headerHeight": { "min": 36, "max": 80, "default": 44 }
+        }
+      },
+      "code": {
+        "imports": "import { tags } from 'decantr/tags';\nimport { css } from 'decantr/css';\nimport { link } from 'decantr/router';\nimport { icon } from 'decantr/components';",
+        "example": "function MinimalHeader({ brand, children }) {\n  const { div, header, main } = tags;\n\n  return div({ class: css('_flex _col _h[100vh]') },\n    // Slim header\n    header({ class: css('_flex _aic _jcc _py3 _borderB') },\n      link({ href: '/', class: css('_flex _aic _gap2 _nounder _fgfg') },\n        icon('arrow-left'),\n        brand\n      )\n    ),\n    // Centered main content\n    main({ class: css('_flex _col _aic _overflow[auto] _flex1 _py8') },\n      div({ class: css('_w[720px] _mw[100%] _px4 _flex _col _gap6') },\n        ...children\n      )\n    )\n  );\n}"
+      }
+    },
+    "top-nav-sidebar": {
+      "name": "Top Nav + Sidebar",
+      "description": "Full-width header spanning both columns, with left sidebar navigation below. Combines top branding with sidebar navigation depth.",
+      "layout": "grid",
+      "atoms": "_grid _h[100vh]",
+      "config": {
+        "regions": ["header", "nav", "body"],
+        "grid": { "areas": [["header", "header"], ["nav", "body"]] },
+        "nav": { "position": "left", "width": "240px", "collapseTo": "64px", "collapseBelow": "md" },
+        "header": { "height": "52px", "sticky": true },
+        "body": { "scroll": true }
+      },
+      "configurable": {
+        "nav": { "positions": ["left", "right"], "modes": ["full", "rail", "hidden"] },
+        "header": { "toggleable": true },
+        "footer": { "toggleable": true },
+        "sizing": {
+          "sidebarWidth": { "min": 48, "max": 400, "default": 240 },
+          "headerHeight": { "min": 36, "max": 80, "default": 52 }
+        }
+      },
+      "code": {
+        "imports": "import { Shell } from 'decantr/components';",
+        "example": "Shell({ config: 'top-nav-sidebar' },\n  Shell.Header({}, headerContent),\n  Shell.Nav({}, sidebarContent),\n  Shell.Body({}, mainContent)\n)"
+      }
+    }
+  }
+}

package/src/registry/state.json

@@ -0,0 +1,137 @@
+{
+  "$schema": "https://decantr.ai/schemas/module.v1.json",
+  "module": "decantr/state",
+  "description": "Reactive primitives — signals, effects, memos, stores, batch",
+  "functions": {
+    "createSignal": {
+      "params": [
+        {
+          "name": "initialValue",
+          "type": "T"
+        }
+      ],
+      "returns": "[() => T, (v: T | ((prev: T) => T)) => void]"
+    },
+    "createEffect": {
+      "params": [
+        {
+          "name": "fn",
+          "type": "Function"
+        }
+      ],
+      "returns": "Function"
+    },
+    "createMemo": {
+      "params": [
+        {
+          "name": "fn",
+          "type": "() => T"
+        }
+      ],
+      "returns": "() => T"
+    },
+    "untrack": {
+      "params": [
+        {
+          "name": "initialValue",
+          "type": "T"
+        }
+      ],
+      "returns": "T"
+    },
+    "peek": {
+      "params": [
+        {
+          "name": "getter",
+          "type": "() => T"
+        }
+      ],
+      "returns": "T",
+      "description": "Read a signal getter without subscribing. Alias for untrack(). Aligns with TC39 Signals proposal terminology."
+    },
+    "on": {
+      "params": [
+        {
+          "name": "deps",
+          "type": "Array<() => T>|(() => T)"
+        },
+        {
+          "name": "fn",
+          "type": "(value: T|T[], prev: T|T[]) => U"
+        },
+        {
+          "name": "options",
+          "type": "{ defer?: boolean }",
+          "optional": true
+        }
+      ],
+      "returns": "Function",
+      "description": "Explicit dependency tracking."
+    },
+    "useLocalStorage": {
+      "params": [
+        {
+          "name": "key",
+          "type": "string",
+          "description": "localStorage key"
+        },
+        {
+          "name": "initialValue",
+          "type": "T",
+          "description": "fallback if no stored value"
+        }
+      ],
+      "returns": "[() => T, (v: T | ((prev: T) => T)) => void]"
+    },
+    "createContext": {
+      "params": [
+        {
+          "name": "defaultValue",
+          "type": "T",
+          "optional": true
+        }
+      ],
+      "returns": "{ Provider: (value: T) => (() => void), consume: () => T }"
+    },
+    "createSelector": {
+      "params": [
+        {
+          "name": "source",
+          "type": "() => T"
+        }
+      ],
+      "returns": "(key: U) => boolean"
+    },
+    "createDeferred": {
+      "params": [
+        {
+          "name": "fn",
+          "type": "() => T"
+        }
+      ],
+      "returns": "() => T"
+    },
+    "createHistory": {
+      "params": [
+        {
+          "name": "signal",
+          "type": "[() => T, (v: T) => void]"
+        },
+        {
+          "name": "options",
+          "type": "{ maxLength?: number }",
+          "optional": true
+        }
+      ],
+      "returns": "{ undo: () => void, redo: () => void, canUndo: () => boolean, canRedo: () => boolean, clear: () => void }"
+    },
+    "batch": {
+      "params": [
+        {
+          "name": "fn",
+          "type": "Function"
+        }
+      ]
+    }
+  }
+}

package/src/registry/tokens.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://decantr.ai/schemas/tokens.v1.json",
+  "description": "Design tokens derived from style seeds",
+  "groups": {
+    "palette": {
+      "label": "Color Palette",
+      "roles": ["primary", "accent", "tertiary", "success", "warning", "error", "info"],
+      "suffixes": ["", "-fg", "-hover", "-active", "-subtle", "-subtle-fg", "-border"]
+    },
+    "neutral": {
+      "label": "Neutral",
+      "tokens": ["--d-bg", "--d-fg", "--d-muted", "--d-muted-fg", "--d-border", "--d-border-strong", "--d-ring", "--d-overlay"]
+    },
+    "surfaces": {
+      "label": "Surfaces",
+      "levels": [0, 1, 2, 3],
+      "suffixes": ["", "-fg", "-border", "-filter"]
+    },
+    "typography": {
+      "label": "Typography",
+      "tokens": [["--d-text-xs", "xs"], ["--d-text-sm", "sm"], ["--d-text-base", "base"], ["--d-text-md", "md"], ["--d-text-lg", "lg"], ["--d-text-xl", "xl"], ["--d-text-2xl", "2xl"], ["--d-text-3xl", "3xl"], ["--d-text-4xl", "4xl"]]
+    },
+    "spacing": {
+      "label": "Spacing",
+      "tokens": [["--d-sp-1", "0.25rem"], ["--d-sp-1-5", "0.375rem"], ["--d-sp-2", "0.5rem"], ["--d-sp-3", "0.75rem"], ["--d-sp-4", "1rem"], ["--d-sp-5", "1.25rem"], ["--d-sp-6", "1.5rem"], ["--d-sp-8", "2rem"], ["--d-sp-10", "2.5rem"], ["--d-sp-12", "3rem"], ["--d-sp-16", "4rem"]]
+    },
+    "elevation": {
+      "label": "Elevation",
+      "levels": [0, 1, 2, 3]
+    },
+    "motion": {
+      "label": "Motion",
+      "tokens": ["--d-duration-instant", "--d-duration-fast", "--d-duration-normal", "--d-duration-slow"]
+    },
+    "chart": {
+      "label": "Chart",
+      "count": 8
+    }
+  }
+}

package/src/router/hash.js

@@ -0,0 +1,17 @@
+export const hashStrategy = {
+  current() {
+    return window.location.hash.slice(1) || '/';
+  },
+  push(path) {
+    window.location.hash = '#' + path;
+  },
+  replace(path) {
+    const url = window.location.pathname + window.location.search + '#' + path;
+    window.history.replaceState(null, '', url);
+  },
+  listen(callback) {
+    const handler = () => callback(hashStrategy.current());
+    window.addEventListener('hashchange', handler);
+    return () => window.removeEventListener('hashchange', handler);
+  }
+};

package/src/router/history.js

@@ -0,0 +1,18 @@
+export const historyStrategy = {
+  current() {
+    return window.location.pathname;
+  },
+  push(path) {
+    window.history.pushState(null, '', path);
+    window.dispatchEvent(new Event('popstate'));
+  },
+  replace(path) {
+    window.history.replaceState(null, '', path);
+    window.dispatchEvent(new Event('popstate'));
+  },
+  listen(callback) {
+    const handler = () => callback(historyStrategy.current());
+    window.addEventListener('popstate', handler);
+    return () => window.removeEventListener('popstate', handler);
+  }
+};