@deepfuture/dui-components 0.0.10 → 0.0.11

package/tabs/index.d.ts

@@ -1,12 +1,6 @@
-import { DuiTabs, valueChangeEvent } from "./tabs.js";
-export { DuiTabs, valueChangeEvent };
-import { DuiTabsList } from "./tabs-list.js";
-export { DuiTabsList };
-import { DuiTab } from "./tab.js";
-export { DuiTab };
-import { DuiTabsPanel } from "./tabs-panel.js";
-export { DuiTabsPanel };
-import { DuiTabsIndicator } from "./tabs-indicator.js";
-export { DuiTabsIndicator };
+export { DuiTabs, valueChangeEvent } from "./tabs.js";
+export { DuiTabsList } from "./tabs-list.js";
+export { DuiTab } from "./tab.js";
+export { DuiTabsPanel } from "./tabs-panel.js";
+export { DuiTabsIndicator } from "./tabs-indicator.js";
 export type { TabsContext } from "./tabs-context.js";
-export declare const tabsFamily: (typeof DuiTabs | typeof DuiTabsList | typeof DuiTab | typeof DuiTabsPanel | typeof DuiTabsIndicator)[];

package/tabs/index.js

@@ -1,11 +1,5 @@
-import { DuiTabs, valueChangeEvent } from "./tabs.js";
-export { DuiTabs, valueChangeEvent };
-import { DuiTabsList } from "./tabs-list.js";
-export { DuiTabsList };
-import { DuiTab } from "./tab.js";
-export { DuiTab };
-import { DuiTabsPanel } from "./tabs-panel.js";
-export { DuiTabsPanel };
-import { DuiTabsIndicator } from "./tabs-indicator.js";
-export { DuiTabsIndicator };
-export const tabsFamily = [DuiTabs, DuiTabsList, DuiTab, DuiTabsPanel, DuiTabsIndicator];
+export { DuiTabs, valueChangeEvent } from "./tabs.js";
+export { DuiTabsList } from "./tabs-list.js";
+export { DuiTab } from "./tab.js";
+export { DuiTabsPanel } from "./tabs-panel.js";
+export { DuiTabsIndicator } from "./tabs-indicator.js";

package/tabs/register.d.ts

@@ -0,0 +1 @@
+export {};

package/tabs/register.js

@@ -0,0 +1,10 @@
+import { DuiTabs } from "./tabs.js";
+import { DuiTabsList } from "./tabs-list.js";
+import { DuiTab } from "./tab.js";
+import { DuiTabsPanel } from "./tabs-panel.js";
+import { DuiTabsIndicator } from "./tabs-indicator.js";
+for (const C of [DuiTabs, DuiTabsList, DuiTab, DuiTabsPanel, DuiTabsIndicator]) {
+    if (!customElements.get(C.tagName)) {
+        customElements.define(C.tagName, C);
+    }
+}

package/textarea/index.d.ts

@@ -1,4 +1,2 @@
-import { DuiTextarea, textareaChangeEvent } from "./textarea.js";
-export { DuiTextarea, textareaChangeEvent };
+export { DuiTextarea, textareaChangeEvent } from "./textarea.js";
 export type { TextareaResize } from "./textarea.js";
-export declare const textareaFamily: (typeof DuiTextarea)[];

package/textarea/index.js

@@ -1,3 +1 @@
-import { DuiTextarea, textareaChangeEvent } from "./textarea.js";
-export { DuiTextarea, textareaChangeEvent };
-export const textareaFamily = [DuiTextarea];
+export { DuiTextarea, textareaChangeEvent } from "./textarea.js";

package/textarea/register.d.ts

@@ -0,0 +1 @@
+export {};

package/textarea/register.js

@@ -0,0 +1,4 @@
+import { DuiTextarea } from "./textarea.js";
+if (!customElements.get(DuiTextarea.tagName)) {
+    customElements.define(DuiTextarea.tagName, DuiTextarea);
+}

package/toggle/index.d.ts

@@ -1,6 +1,3 @@
-import { DuiToggle, pressedChangeEvent } from "./toggle.js";
-export { DuiToggle, pressedChangeEvent };
-import { DuiToggleGroup, valueChangeEvent } from "./toggle-group.js";
-export { DuiToggleGroup, valueChangeEvent };
+export { DuiToggle, pressedChangeEvent } from "./toggle.js";
+export { DuiToggleGroup, valueChangeEvent } from "./toggle-group.js";
 export type { ToggleGroupContext } from "./toggle-group-context.js";
-export declare const toggleFamily: (typeof DuiToggle | typeof DuiToggleGroup)[];

package/toggle/index.js

@@ -1,5 +1,2 @@
-import { DuiToggle, pressedChangeEvent } from "./toggle.js";
-export { DuiToggle, pressedChangeEvent };
-import { DuiToggleGroup, valueChangeEvent } from "./toggle-group.js";
-export { DuiToggleGroup, valueChangeEvent };
-export const toggleFamily = [DuiToggle, DuiToggleGroup];
+export { DuiToggle, pressedChangeEvent } from "./toggle.js";
+export { DuiToggleGroup, valueChangeEvent } from "./toggle-group.js";

package/toggle/register.d.ts

@@ -0,0 +1 @@
+export {};

package/toggle/register.js

@@ -0,0 +1,8 @@
+import { DuiToggle } from "./toggle.js";
+import { DuiToggleGroup } from "./toggle-group.js";
+if (!customElements.get(DuiToggle.tagName)) {
+    customElements.define(DuiToggle.tagName, DuiToggle);
+}
+if (!customElements.get(DuiToggleGroup.tagName)) {
+    customElements.define(DuiToggleGroup.tagName, DuiToggleGroup);
+}

package/toggle/toggle-group.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, type TemplateResult } from "lit";
+import { type ToggleGroupContext } from "./toggle-group-context.js";
 export declare const valueChangeEvent: (detail: {
     value: string[];
 }) => CustomEvent<{
@@ -21,6 +22,7 @@ export declare class DuiToggleGroup extends LitElement {
     accessor orientation: "horizontal" | "vertical";
     accessor disabled: boolean;
     accessor loop: boolean;
+    accessor _ctx: ToggleGroupContext;
     connectedCallback(): void;
     willUpdate(): void;
     render(): TemplateResult;

package/toggle/toggle-group.js

@@ -5,9 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, LitElement } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
+import { provide } from "@lit/context";
 import { base } from "@deepfuture/dui-core/base";
 import { customEvent } from "@deepfuture/dui-core/event";
+import { toggleGroupContext, } from "./toggle-group-context.js";
 export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
 /** Structural styles only — layout CSS. */
 const styles = css `
@@ -75,9 +77,9 @@ export class DuiToggleGroup extends LitElement {
         }
         this.dispatchEvent(valueChangeEvent({ value: next }));
     };
-    #ctx_accessor_storage = this.#buildContext();
-    get #ctx() { return this.#ctx_accessor_storage; }
-    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    #_ctx_accessor_storage = this.#buildContext();
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
     #buildContext() {
         return {
             value: this.#currentValue,
@@ -91,10 +93,10 @@ export class DuiToggleGroup extends LitElement {
         if (this.value === undefined && this.defaultValue.length > 0) {
             this.#internalValue = [...this.defaultValue];
         }
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     willUpdate() {
-        this.#ctx = this.#buildContext();
+        this._ctx = this.#buildContext();
     }
     #onKeyDown = (e) => {
         const isHorizontal = this.orientation === "horizontal";
@@ -161,3 +163,7 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], DuiToggleGroup.prototype, "loop", null);
+__decorate([
+    provide({ context: toggleGroupContext }),
+    state()
+], DuiToggleGroup.prototype, "_ctx", null);

package/toggle/toggle.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, type TemplateResult } from "lit";
+import { type ToggleGroupContext } from "./toggle-group-context.js";
 export declare const pressedChangeEvent: (detail: {
     pressed: boolean;
 }) => CustomEvent<{
@@ -21,6 +22,7 @@ export declare class DuiToggle extends LitElement {
     accessor defaultPressed: boolean;
     accessor disabled: boolean;
     accessor value: string | undefined;
+    accessor _groupCtx: ToggleGroupContext;
     connectedCallback(): void;
     render(): TemplateResult;
 }

package/toggle/toggle.js

@@ -5,9 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, LitElement } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
+import { consume } from "@lit/context";
 import { base } from "@deepfuture/dui-core/base";
 import { customEvent } from "@deepfuture/dui-core/event";
+import { toggleGroupContext, } from "./toggle-group-context.js";
 export const pressedChangeEvent = customEvent("pressed-change", { bubbles: true, composed: true });
 /** Structural styles only — layout CSS. */
 const styles = css `
@@ -63,17 +65,17 @@ export class DuiToggle extends LitElement {
     #internalPressed_accessor_storage = false;
     get #internalPressed() { return this.#internalPressed_accessor_storage; }
     set #internalPressed(value) { this.#internalPressed_accessor_storage = value; }
-    #groupCtx_accessor_storage;
-    get #groupCtx() { return this.#groupCtx_accessor_storage; }
-    set #groupCtx(value) { this.#groupCtx_accessor_storage = value; }
+    #_groupCtx_accessor_storage;
+    get _groupCtx() { return this.#_groupCtx_accessor_storage; }
+    set _groupCtx(value) { this.#_groupCtx_accessor_storage = value; }
     get #isPressed() {
-        if (this.#groupCtx && this.value !== undefined) {
-            return this.#groupCtx.value.includes(this.value);
+        if (this._groupCtx && this.value !== undefined) {
+            return this._groupCtx.value.includes(this.value);
         }
         return this.pressed ?? this.#internalPressed;
     }
     get #isDisabled() {
-        return this.disabled || (this.#groupCtx?.disabled ?? false);
+        return this.disabled || (this._groupCtx?.disabled ?? false);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -84,8 +86,8 @@ export class DuiToggle extends LitElement {
     #handleClick = () => {
         if (this.#isDisabled)
             return;
-        if (this.#groupCtx && this.value !== undefined) {
-            this.#groupCtx.toggle(this.value);
+        if (this._groupCtx && this.value !== undefined) {
+            this._groupCtx.toggle(this.value);
             return;
         }
         const newPressed = !this.#isPressed;
@@ -125,3 +127,7 @@ __decorate([
 __decorate([
     property()
 ], DuiToggle.prototype, "value", null);
+__decorate([
+    consume({ context: toggleGroupContext, subscribe: true }),
+    state()
+], DuiToggle.prototype, "_groupCtx", null);

package/toolbar/index.d.ts

@@ -1,3 +1 @@
-import { DuiToolbar } from "./toolbar.js";
-export { DuiToolbar };
-export declare const toolbarFamily: (typeof DuiToolbar)[];
+export { DuiToolbar } from "./toolbar.js";

package/toolbar/index.js

@@ -1,3 +1 @@
-import { DuiToolbar } from "./toolbar.js";
-export { DuiToolbar };
-export const toolbarFamily = [DuiToolbar];
+export { DuiToolbar } from "./toolbar.js";

package/toolbar/register.d.ts

@@ -0,0 +1 @@
+export {};

package/toolbar/register.js

@@ -0,0 +1,4 @@
+import { DuiToolbar } from "./toolbar.js";
+if (!customElements.get(DuiToolbar.tagName)) {
+    customElements.define(DuiToolbar.tagName, DuiToolbar);
+}

package/tooltip/index.d.ts

@@ -1,9 +1,5 @@
-import { DuiTooltip, openChangeEvent } from "./tooltip.js";
-export { DuiTooltip, openChangeEvent };
+export { DuiTooltip, openChangeEvent } from "./tooltip.js";
 export type { TooltipOpenChangeDetail } from "./tooltip.js";
-import { DuiTooltipTrigger } from "./tooltip-trigger.js";
-export { DuiTooltipTrigger };
-import { DuiTooltipPopup } from "./tooltip-popup.js";
-export { DuiTooltipPopup };
+export { DuiTooltipTrigger } from "./tooltip-trigger.js";
+export { DuiTooltipPopup } from "./tooltip-popup.js";
 export type { TooltipContext, TooltipSide } from "./tooltip-context.js";
-export declare const tooltipFamily: (typeof DuiTooltip | typeof DuiTooltipTrigger | typeof DuiTooltipPopup)[];

package/tooltip/index.js

@@ -1,7 +1,3 @@
-import { DuiTooltip, openChangeEvent } from "./tooltip.js";
-export { DuiTooltip, openChangeEvent };
-import { DuiTooltipTrigger } from "./tooltip-trigger.js";
-export { DuiTooltipTrigger };
-import { DuiTooltipPopup } from "./tooltip-popup.js";
-export { DuiTooltipPopup };
-export const tooltipFamily = [DuiTooltip, DuiTooltipTrigger, DuiTooltipPopup];
+export { DuiTooltip, openChangeEvent } from "./tooltip.js";
+export { DuiTooltipTrigger } from "./tooltip-trigger.js";
+export { DuiTooltipPopup } from "./tooltip-popup.js";

package/tooltip/register.d.ts

@@ -0,0 +1 @@
+export {};

package/tooltip/register.js

@@ -0,0 +1,12 @@
+import { DuiTooltip } from "./tooltip.js";
+import { DuiTooltipTrigger } from "./tooltip-trigger.js";
+import { DuiTooltipPopup } from "./tooltip-popup.js";
+if (!customElements.get(DuiTooltip.tagName)) {
+    customElements.define(DuiTooltip.tagName, DuiTooltip);
+}
+if (!customElements.get(DuiTooltipTrigger.tagName)) {
+    customElements.define(DuiTooltipTrigger.tagName, DuiTooltipTrigger);
+}
+if (!customElements.get(DuiTooltipPopup.tagName)) {
+    customElements.define(DuiTooltipPopup.tagName, DuiTooltipPopup);
+}

package/tooltip/tooltip.d.ts

@@ -1,6 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/tooltip */
 import { LitElement, type PropertyValues, type TemplateResult } from "lit";
-import { type TooltipSide } from "./tooltip-context.js";
+import { type TooltipContext, type TooltipSide } from "./tooltip-context.js";
 export type TooltipOpenChangeDetail = {
     open: boolean;
 };
@@ -29,6 +29,7 @@ export declare class DuiTooltip extends LitElement {
     accessor closeDelay: number;
     /** Disable the tooltip. */
     accessor disabled: boolean;
+    accessor _ctx: TooltipContext;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;

package/tooltip/tooltip.js

@@ -6,9 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, LitElement } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
+import { provide } from "@lit/context";
 import { base } from "@deepfuture/dui-core/base";
 import { customEvent } from "@deepfuture/dui-core/event";
+import { tooltipContext, } from "./tooltip-context.js";
 export const openChangeEvent = customEvent("open-change", { bubbles: true, composed: true });
 const hostStyles = css `
   :host {
@@ -62,7 +64,7 @@ export class DuiTooltip extends LitElement {
     #closeTimeout;
     #triggerId = `tooltip-trigger-${crypto.randomUUID().slice(0, 8)}`;
     #popupId = `tooltip-popup-${crypto.randomUUID().slice(0, 8)}`;
-    #ctx_accessor_storage = {
+    #_ctx_accessor_storage = {
         open: false,
         triggerId: this.#triggerId,
         popupId: this.#popupId,
@@ -74,8 +76,8 @@ export class DuiTooltip extends LitElement {
         closeTooltip: () => this.#scheduleClose(),
         setTriggerEl: (el) => this.#setTriggerEl(el),
     };
-    get #ctx() { return this.#ctx_accessor_storage; }
-    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    get _ctx() { return this.#_ctx_accessor_storage; }
+    set _ctx(value) { this.#_ctx_accessor_storage = value; }
     connectedCallback() {
         super.connectedCallback();
         if (this.defaultOpen && !this.disabled) {
@@ -92,10 +94,10 @@ export class DuiTooltip extends LitElement {
             changed.has("side") ||
             changed.has("sideOffset") ||
             changed.has("disabled") ||
-            this.#ctx.open !== isOpen ||
-            this.#ctx.triggerEl !== this.#triggerEl) {
-            this.#ctx = {
-                ...this.#ctx,
+            this._ctx.open !== isOpen ||
+            this._ctx.triggerEl !== this.#triggerEl) {
+            this._ctx = {
+                ...this._ctx,
                 open: isOpen,
                 side: this.side,
                 sideOffset: this.sideOffset,
@@ -174,3 +176,7 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], DuiTooltip.prototype, "disabled", null);
+__decorate([
+    provide({ context: tooltipContext }),
+    state()
+], DuiTooltip.prototype, "_ctx", null);

package/trunc/index.d.ts

@@ -1,3 +1 @@
-import { DuiTrunc } from "./trunc.js";
-export { DuiTrunc };
-export declare const truncFamily: (typeof DuiTrunc)[];
+export { DuiTrunc } from "./trunc.js";

package/trunc/index.js

@@ -1,3 +1 @@
-import { DuiTrunc } from "./trunc.js";
-export { DuiTrunc };
-export const truncFamily = [DuiTrunc];
+export { DuiTrunc } from "./trunc.js";

package/trunc/register.d.ts

@@ -0,0 +1 @@
+export {};

package/trunc/register.js

@@ -0,0 +1,4 @@
+import { DuiTrunc } from "./trunc.js";
+if (!customElements.get(DuiTrunc.tagName)) {
+    customElements.define(DuiTrunc.tagName, DuiTrunc);
+}

package/README.md

@@ -1,191 +0,0 @@
-# DUI
-
-[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
-[![npm](https://img.shields.io/npm/v/@deepfuture/dui-core.svg)](https://www.npmjs.com/package/@deepfuture/dui-core)
-
-Unstyled [Lit](https://lit.dev) web component library with composable themes.
-
-Components provide structure and behavior with zero visual opinions. Themes provide all aesthetics — colors, spacing, typography, borders. Swap the theme to completely change the look without touching component code.
-
-**[Live Docs & Demos →](https://deepfuturenow.github.io/dui/)**
-
-## Install
-
-**npm / pnpm / yarn:**
-
-```bash
-npm install @deepfuture/dui-core @deepfuture/dui-components @deepfuture/dui-theme-default
-```
-
-**Deno:**
-
-```typescript
-import { applyTheme } from "npm:@deepfuture/dui-core/apply-theme";
-import { defaultTheme } from "npm:@deepfuture/dui-theme-default";
-import { allComponents } from "npm:@deepfuture/dui-components/all";
-```
-
-**CDN (zero setup):**
-
-```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@deepfuture/dui-cdn/dui.min.js"></script>
-```
-
-## Quick Start
-
-```typescript
-import { applyTheme } from "@deepfuture/dui-core/apply-theme";
-import { defaultTheme } from "@deepfuture/dui-theme-default";
-import { DuiButton } from "@deepfuture/dui-components/button";
-import { DuiDialog, DuiDialogTrigger, DuiDialogPopup, DuiDialogClose } from "@deepfuture/dui-components/dialog";
-
-// Register components with a theme — this is the only setup needed
-applyTheme({
-  theme: defaultTheme,
-  components: [DuiButton, DuiDialog, DuiDialogTrigger, DuiDialogPopup, DuiDialogClose],
-});
-```
-
-```html
-<dui-dialog>
-  <dui-dialog-trigger>
-    <dui-button>Open Dialog</dui-button>
-  </dui-dialog-trigger>
-  <dui-dialog-popup>
-    <h2>Hello</h2>
-    <p>This is a dialog.</p>
-    <dui-dialog-close>
-      <dui-button variant="outline">Close</dui-button>
-    </dui-dialog-close>
-  </dui-dialog-popup>
-</dui-dialog>
-```
-
-Or register everything at once:
-
-```typescript
-import { applyTheme } from "@deepfuture/dui-core/apply-theme";
-import { defaultTheme } from "@deepfuture/dui-theme-default";
-import { allComponents } from "@deepfuture/dui-components/all";
-
-applyTheme({ theme: defaultTheme, components: allComponents });
-```
-
-## How It Works
-
-`applyTheme()` takes unstyled component classes and a theme, creates themed subclasses with composed styles, and registers them as custom elements.
-
-```
-Component structural CSS → Theme base styles → Theme component styles
-```
-
-No build step, no decorators, no code generation — just a function call. Components are standard web components that work in any framework or plain HTML.
-
-## Components
-
-43 component families, 85+ elements total.
-
-| Category | Components |
-|----------|-----------|
-| **Actions** | Button, Link, Toggle, Toggle Group, Toolbar |
-| **Forms** | Input, Textarea, Select, Combobox, Checkbox, Checkbox Group, Radio, Radio Group, Switch, Slider, Number Field, Dropzone |
-| **Data Display** | Badge, Avatar, Calendar, Data Table, Progress, Spinner, Separator, Trunc |
-| **Overlays** | Dialog, Alert Dialog, Popover, Tooltip, Menu, Menubar, Preview Card, Command |
-| **Disclosure** | Accordion, Collapsible, Tabs |
-| **Navigation** | Breadcrumb, Sidebar (with 12 sub-components) |
-| **Layout** | HStack, VStack, Center, Page Inset, Scroll Area, Portal |
-| **Utility** | Icon |
-
-## Styling
-
-DUI uses a two-layer styling approach:
-
-### CSS Variables — for the variant system
-
-Variables control values that variants, sizes, and states toggle:
-
-```css
-/* Override variant colors */
-dui-button {
-  --button-bg: linear-gradient(135deg, pink, purple);
-  --button-radius: var(--radius-full);
-}
-```
-
-### `::part(root)` — for everything else
-
-Every component exposes a `root` CSS part for full CSS expressiveness:
-
-```css
-/* Frosted glass effect */
-dui-dialog-popup::part(root) {
-  backdrop-filter: blur(12px);
-}
-
-/* Custom hover animation */
-dui-button::part(root):hover {
-  filter: brightness(1.25);
-  transform: translateY(-1px);
-}
-
-/* Glow shadow */
-dui-badge::part(root) {
-  box-shadow: 0 0 16px oklch(0.7 0.2 280 / 0.4);
-}
-```
-
-No need for the library to anticipate every CSS property — `::part()` gives you direct access.
-
-## Dark Mode
-
-DUI uses CSS custom properties for theming. Toggle dark mode by adding `class="dark"` to a parent element:
-
-```html
-<body class="dark">
-  <!-- All DUI components render in dark mode -->
-</body>
-```
-
-## Packages
-
-| Package | Purpose |
-|---------|---------|
-| [`@deepfuture/dui-core`](https://www.npmjs.com/package/@deepfuture/dui-core) | `applyTheme()`, event factory, base styles |
-| [`@deepfuture/dui-components`](https://www.npmjs.com/package/@deepfuture/dui-components) | Unstyled component classes |
-| [`@deepfuture/dui-theme-default`](https://www.npmjs.com/package/@deepfuture/dui-theme-default) | Design tokens + aesthetic styles |
-| [`@deepfuture/dui-cdn`](https://www.npmjs.com/package/@deepfuture/dui-cdn) | Pre-bundled CDN build (all deps inlined) |
-
-## Dev Tools
-
-### Theme Editor
-
-A visual editor for design tokens. Edit colors with OKLCH sliders, tweak spacing and typography, and export your customized `tokens.css`.
-
-### Inspector
-
-A runtime inspector and mutation API for DUI components. Two interfaces:
-
-- **Visual UI** (Ctrl+Shift+I) — hover-highlight components, inspect properties/tokens/styles, edit theme CSS and design tokens live
-- **Console API** — `window.__dui_inspect()`, `window.__dui_mutate.*`, `window.__dui_export()` for programmatic access by agents or scripts
-
-Both share a changelog, so agent and human edits are visible to each other. Changes can be exported as structured source file diffs.
-
-See **[Inspector docs](docs/inspector.md)** for the full API reference and usage guide.
-
-## Documentation
-
-- **[Live Docs](https://deepfuturenow.github.io/dui/)** — interactive demos for every component
-- [Architecture](docs/architecture.md) — mental model, package responsibilities, design decisions
-- [Creating Components](docs/creating-components.md) — guide for adding new components
-- [Theming](docs/theming.md) — theme system, design tokens, writing component styles
-- [Consuming](docs/consuming.md) — integrating DUI into an app
-- [Inspector](docs/inspector.md) — runtime inspection, mutation API, and visual editor
-- [Accessibility](docs/accessibility.md) — accessibility patterns and guidelines
-
-## Contributing
-
-See [CONTRIBUTING.md](CONTRIBUTING.md) for dev setup, code conventions, and PR guidelines.
-
-## License
-
-[MIT](LICENSE)

package/center/index.d.ts

@@ -1,3 +0,0 @@
-import { DuiCenter } from "./center.js";
-export { DuiCenter };
-export declare const centerFamily: (typeof DuiCenter)[];

package/center/index.js

@@ -1,3 +0,0 @@
-import { DuiCenter } from "./center.js";
-export { DuiCenter };
-export const centerFamily = [DuiCenter];

package/hstack/index.d.ts

@@ -1,4 +0,0 @@
-import { DuiHstack } from "./hstack.js";
-export { DuiHstack };
-export type { HstackAlignment, HstackJustify } from "./hstack.js";
-export declare const hstackFamily: (typeof DuiHstack)[];

package/hstack/index.js

@@ -1,3 +0,0 @@
-import { DuiHstack } from "./hstack.js";
-export { DuiHstack };
-export const hstackFamily = [DuiHstack];

package/page-inset/index.d.ts

@@ -1,3 +0,0 @@
-import { DuiPageInset } from "./page-inset.js";
-export { DuiPageInset };
-export declare const pageInsetFamily: (typeof DuiPageInset)[];

package/page-inset/index.js

@@ -1,3 +0,0 @@
-import { DuiPageInset } from "./page-inset.js";
-export { DuiPageInset };
-export const pageInsetFamily = [DuiPageInset];

package/vstack/index.d.ts

@@ -1,3 +0,0 @@
-import { DuiVstack } from "./vstack.js";
-export { DuiVstack };
-export declare const vstackFamily: (typeof DuiVstack)[];

package/vstack/index.js

@@ -1,3 +0,0 @@
-import { DuiVstack } from "./vstack.js";
-export { DuiVstack };
-export const vstackFamily = [DuiVstack];