@deepfuture/dui-components 1.2.0 → 1.3.0

package/all.d.ts

@@ -44,6 +44,7 @@ import "./textarea/index.js";
 import "./toggle/index.js";
 import "./toolbar/index.js";
 import "./tooltip/index.js";
+import "./tree/index.js";
 import "./trunc/index.js";
 export { DuiAccordion } from "./accordion/index.js";
 export { DuiAccordionItem } from "./accordion/index.js";
@@ -133,6 +134,8 @@ export { DuiToolbar } from "./toolbar/index.js";
 export { DuiTooltip } from "./tooltip/index.js";
 export { DuiTooltipPopup } from "./tooltip/index.js";
 export { DuiTooltipTrigger } from "./tooltip/index.js";
+export { DuiTree } from "./tree/index.js";
+export { DuiTreeItem } from "./tree/index.js";
 export { DuiTrunc } from "./trunc/index.js";
 export type { AccordionContext } from "@deepfuture/dui-primitives/accordion";
 export type { AlertDialogOpenChangeDetail } from "@deepfuture/dui-primitives/alert-dialog";
@@ -159,3 +162,4 @@ export type { TextareaResize } from "@deepfuture/dui-primitives/textarea";
 export type { ToggleGroupContext } from "@deepfuture/dui-primitives/toggle";
 export type { TooltipOpenChangeDetail } from "@deepfuture/dui-primitives/tooltip";
 export type { TooltipContext, TooltipSide } from "@deepfuture/dui-primitives/tooltip";
+export type { SelectionMode, TreeContext } from "@deepfuture/dui-primitives/tree";

package/all.js

@@ -44,6 +44,7 @@ import "./textarea/index.js";
 import "./toggle/index.js";
 import "./toolbar/index.js";
 import "./tooltip/index.js";
+import "./tree/index.js";
 import "./trunc/index.js";
 export { DuiAccordion } from "./accordion/index.js";
 export { DuiAccordionItem } from "./accordion/index.js";
@@ -133,4 +134,6 @@ export { DuiToolbar } from "./toolbar/index.js";
 export { DuiTooltip } from "./tooltip/index.js";
 export { DuiTooltipPopup } from "./tooltip/index.js";
 export { DuiTooltipTrigger } from "./tooltip/index.js";
+export { DuiTree } from "./tree/index.js";
+export { DuiTreeItem } from "./tree/index.js";
 export { DuiTrunc } from "./trunc/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepfuture/dui-components",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "DUI styled web components — extends dui-primitives with design tokens and variant CSS",
   "type": "module",
   "license": "MIT",
@@ -170,6 +170,10 @@
       "import": "./textarea/index.js",
       "types": "./textarea/index.d.ts"
     },
+    "./theme": {
+      "import": "./theme/index.js",
+      "types": "./theme/index.d.ts"
+    },
     "./toggle": {
       "import": "./toggle/index.js",
       "types": "./toggle/index.d.ts"
@@ -182,6 +186,10 @@
       "import": "./tooltip/index.js",
       "types": "./tooltip/index.d.ts"
     },
+    "./tree": {
+      "import": "./tree/index.js",
+      "types": "./tree/index.d.ts"
+    },
     "./tokens": {
       "import": "./tokens/tokens.js",
       "types": "./tokens/tokens.d.ts"
@@ -206,7 +214,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@deepfuture/dui-primitives": "1.1.0",
+    "@deepfuture/dui-primitives": "1.3.0",
     "lit": "^3.3.2",
     "@lit/context": "^1.1.3"
   },

package/theme/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Theme configuration API — bridges DESIGN.md intent to DUI runtime tokens.
+ *
+ * Usage:
+ *   import { applyTheme } from "@deepfuture/dui-components/theme";
+ *
+ *   applyTheme({
+ *     light: { accent: "oklch(0.55 0.25 160)" },
+ *     dark:  { accent: "oklch(0.75 0.18 160)" },
+ *     fonts: { sans: "Inter", mono: "Geist Mono" },
+ *     radius: "0.5rem",
+ *   });
+ *
+ * Call after importing any DUI component. Appends an adopted stylesheet
+ * that overrides DUI's defaults in the correct cascade position.
+ */
+export type ThemePrimitives = {
+    background?: string;
+    foreground?: string;
+    accent?: string;
+    destructive?: string;
+};
+export type ThemeFonts = {
+    sans?: string;
+    mono?: string;
+    serif?: string;
+};
+export type ThemeConfig = {
+    /** Light mode color primitives. */
+    light?: ThemePrimitives;
+    /** Dark mode color primitives. If omitted, dark mode is derived from light. */
+    dark?: ThemePrimitives;
+    /** Font family overrides. Values are family names (e.g. "Inter"), not full stacks. */
+    fonts?: ThemeFonts;
+    /** Base border-radius (e.g. "0.5rem" or "8px"). The full scale is derived from this value. */
+    radius?: string;
+};
+export declare function applyTheme(config: ThemeConfig): void;

package/theme/index.js

@@ -0,0 +1,165 @@
+/**
+ * Theme configuration API — bridges DESIGN.md intent to DUI runtime tokens.
+ *
+ * Usage:
+ *   import { applyTheme } from "@deepfuture/dui-components/theme";
+ *
+ *   applyTheme({
+ *     light: { accent: "oklch(0.55 0.25 160)" },
+ *     dark:  { accent: "oklch(0.75 0.18 160)" },
+ *     fonts: { sans: "Inter", mono: "Geist Mono" },
+ *     radius: "0.5rem",
+ *   });
+ *
+ * Call after importing any DUI component. Appends an adopted stylesheet
+ * that overrides DUI's defaults in the correct cascade position.
+ */
+/**
+ * Apply a theme configuration to the document.
+ *
+ * Creates a CSSStyleSheet and appends it to `document.adoptedStyleSheets`
+ * after DUI's token sheet, so overrides cascade correctly.
+ *
+ * Safe to call multiple times — each call replaces the previous theme sheet.
+ */
+let themeSheet = null;
+export function applyTheme(config) {
+    const rules = [];
+    // --- Color primitives ---
+    const lightVars = buildColorVars(config.light);
+    const darkVars = buildColorVars(config.dark ?? deriveDark(config.light));
+    if (lightVars) {
+        rules.push(`:root:not([data-theme="dark"]) { ${lightVars} }`);
+    }
+    if (darkVars) {
+        rules.push(`:root[data-theme="dark"] { ${darkVars} }`);
+    }
+    // --- Fonts and radius (theme-independent, go on :root) ---
+    const rootVars = buildRootVars(config);
+    if (rootVars) {
+        rules.push(`:root { ${rootVars} }`);
+    }
+    const css = rules.join("\n");
+    if (!css)
+        return;
+    // Replace previous theme sheet if one exists
+    if (themeSheet) {
+        const idx = document.adoptedStyleSheets.indexOf(themeSheet);
+        if (idx !== -1) {
+            document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s) => s !== themeSheet);
+        }
+    }
+    themeSheet = new CSSStyleSheet();
+    themeSheet.replaceSync(css);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, themeSheet];
+}
+// --- Internals ---
+function buildColorVars(primitives) {
+    if (!primitives)
+        return "";
+    const entries = [];
+    if (primitives.background)
+        entries.push(`--background: ${primitives.background};`);
+    if (primitives.foreground)
+        entries.push(`--foreground: ${primitives.foreground};`);
+    if (primitives.accent)
+        entries.push(`--accent: ${primitives.accent};`);
+    if (primitives.destructive)
+        entries.push(`--destructive: ${primitives.destructive};`);
+    return entries.join(" ");
+}
+function buildRootVars(config) {
+    const entries = [];
+    // Fonts
+    if (config.fonts?.sans) {
+        entries.push(`--font-sans: '${config.fonts.sans}', system-ui, -apple-system, sans-serif;`);
+    }
+    if (config.fonts?.mono) {
+        entries.push(`--font-mono: '${config.fonts.mono}', ui-monospace, SFMono-Regular, monospace;`);
+    }
+    if (config.fonts?.serif) {
+        entries.push(`--font-serif: '${config.fonts.serif}', ui-serif, Georgia, serif;`);
+    }
+    // Radius scale derived from base
+    if (config.radius) {
+        const base = parseRadiusToRem(config.radius);
+        if (base !== null) {
+            entries.push(`--radius-xs: ${rem(Math.max(base * 0.25, 0))};`);
+            entries.push(`--radius-sm: ${rem(Math.max(base * 0.5, 0))};`);
+            entries.push(`--radius-md: ${rem(base)};`);
+            entries.push(`--radius-lg: ${rem(base * 2)};`);
+            entries.push(`--radius-xl: ${rem(base * 3)};`);
+            entries.push(`--radius-2xl: ${rem(base * 4)};`);
+        }
+    }
+    return entries.join(" ");
+}
+/**
+ * Derive dark mode primitives from light mode values.
+ *
+ * Strategy: parse OKLCH values and adjust lightness.
+ * - background: invert L (0.97 → 0.15), add slight chroma from accent hue
+ * - foreground: invert L (0.15 → 0.93)
+ * - accent: boost L (+0.20), reduce C slightly
+ * - destructive: boost L (+0.15), reduce C slightly
+ *
+ * Falls back to DUI's built-in dark defaults if parsing fails.
+ */
+function deriveDark(light) {
+    if (!light)
+        return undefined;
+    const dark = {};
+    if (light.background) {
+        const parsed = parseOklch(light.background);
+        if (parsed) {
+            // Invert: light bg → dark bg. Add a hint of accent hue chroma.
+            const accentParsed = light.accent ? parseOklch(light.accent) : null;
+            const hue = accentParsed?.h ?? 0;
+            dark.background = `oklch(${(1 - parsed.l).toFixed(2)} 0.015 ${hue})`;
+        }
+    }
+    if (light.foreground) {
+        const parsed = parseOklch(light.foreground);
+        if (parsed) {
+            dark.foreground = `oklch(${(1 - parsed.l + 0.08).toFixed(2)} 0 0)`;
+        }
+    }
+    if (light.accent) {
+        const parsed = parseOklch(light.accent);
+        if (parsed) {
+            dark.accent = `oklch(${Math.min(parsed.l + 0.20, 0.90).toFixed(2)} ${Math.max(parsed.c - 0.07, 0.05).toFixed(2)} ${parsed.h})`;
+        }
+    }
+    if (light.destructive) {
+        const parsed = parseOklch(light.destructive);
+        if (parsed) {
+            dark.destructive = `oklch(${Math.min(parsed.l + 0.15, 0.85).toFixed(2)} ${Math.max(parsed.c - 0.04, 0.05).toFixed(2)} ${parsed.h})`;
+        }
+    }
+    return Object.keys(dark).length > 0 ? dark : undefined;
+}
+/** Parse an oklch(...) string into { l, c, h } numbers. */
+function parseOklch(value) {
+    const match = value.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/);
+    if (!match)
+        return null;
+    return {
+        l: parseFloat(match[1]),
+        c: parseFloat(match[2]),
+        h: parseFloat(match[3]),
+    };
+}
+/** Parse a radius value (rem or px) to rem number. */
+function parseRadiusToRem(value) {
+    const remMatch = value.match(/^([\d.]+)\s*rem$/);
+    if (remMatch)
+        return parseFloat(remMatch[1]);
+    const pxMatch = value.match(/^([\d.]+)\s*px$/);
+    if (pxMatch)
+        return parseFloat(pxMatch[1]) / 16;
+    return null;
+}
+/** Format a number as a rem string. */
+function rem(value) {
+    return value === 0 ? "0" : `${Number(value.toFixed(4))}rem`;
+}

package/tree/index.d.ts

@@ -0,0 +1,6 @@
+import "./tree.js";
+import "./tree-item.js";
+export { DuiTree } from "./tree.js";
+export { DuiTreeItem } from "./tree-item.js";
+export type { SelectionMode, TreeContext } from "@deepfuture/dui-primitives/tree";
+export { actionEvent, expandedChangeEvent, loadChildrenEvent, selectionChangeEvent, } from "@deepfuture/dui-primitives/tree";

package/tree/index.js

@@ -0,0 +1,5 @@
+import "./tree.js";
+import "./tree-item.js";
+export { DuiTree } from "./tree.js";
+export { DuiTreeItem } from "./tree-item.js";
+export { actionEvent, expandedChangeEvent, loadChildrenEvent, selectionChangeEvent, } from "@deepfuture/dui-primitives/tree";

package/tree/tree-item.d.ts

@@ -0,0 +1,5 @@
+import { DuiTreeItemPrimitive } from "@deepfuture/dui-primitives/tree";
+import "../_install.js";
+export declare class DuiTreeItem extends DuiTreeItemPrimitive {
+    static styles: import("lit").CSSResult[];
+}

package/tree/tree-item.js

@@ -0,0 +1,144 @@
+import { css, unsafeCSS } from "lit";
+import { DuiTreeItemPrimitive } from "@deepfuture/dui-primitives/tree";
+import "../_install.js";
+// Lucide chevron-right, encoded for use as a CSS mask
+const chevronMask = unsafeCSS(`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")`);
+// Lucide loader-2 (rotating arc), used as a spinner mask while loading
+const spinnerMask = unsafeCSS(`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E")`);
+const styles = css `
+  /* ── Row container ─────────────────────────────────────────────────── */
+
+  /*
+  * IMPORTANT: All visual styling lives on [part="content"], NOT [part="root"].
+  * [part="root"] wraps both the row and the children group, so :hover on it
+  * would bleed onto descendant rows. See the hover-bleed regression demo.
+  */
+  [part="content"] {
+    height: var(--dui-tree-row-height);
+    padding-inline-start: calc(
+      var(--_tree-row-px) +
+        (var(--dui-tree-level, 1) - 1) * var(--dui-tree-indent)
+      );
+      padding-inline-end: var(--_tree-row-px);
+      margin-block: calc(var(--dui-tree-row-spacing) / 2);
+      margin-inline: var(--space-1);
+      border-radius: var(--dui-tree-row-radius);
+      gap: var(--_tree-inline-gap);
+      color: var(--text-1);
+      font-family: var(--font-sans);
+      font-size: var(--_tree-label-font-size);
+      line-height: var(--_tree-label-line-height);
+      cursor: pointer;
+      transition-property: background, box-shadow, color;
+      transition-duration: var(--duration-faster);
+      transition-timing-function: var(--ease-out-3);
+      /* Allow children to truncate */
+      min-width: 0;
+    }
+
+    @media (hover: hover) {
+      [part="content"]:hover {
+        background: var(--dui-tree-hover-bg);
+      }
+    }
+
+    :host([data-selected]) [part="content"] {
+      background: var(--dui-tree-selected-bg);
+    }
+
+    :host([data-disabled]) [part="content"] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    /* ── Focus ring ─────────────────────────────────────────────────────── */
+
+    [part="root"]:focus-visible {
+      outline: none;
+    }
+
+    [part="root"]:focus-visible [part="content"] {
+      box-shadow:
+        0 0 0 var(--focus-ring-offset) var(--background),
+        0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width))
+        var(--focus-ring-color);
+      /* Keep the highlighted row above siblings so the ring isn't clipped. */
+      position: relative;
+      z-index: 1;
+    }
+
+    /* ── Indicator (chevron / spinner / leaf placeholder) ─────────────── */
+
+    [part="indicator"] {
+      width: var(--_tree-indicator-size);
+      height: var(--_tree-indicator-size);
+      color: var(--text-2);
+    }
+
+    /* Branch chevron */
+    :host([data-branch]) [part="indicator"]::before {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 100%;
+      background: currentColor;
+      -webkit-mask: ${chevronMask} center / contain no-repeat;
+      mask: ${chevronMask} center / contain no-repeat;
+      transition-property: transform;
+      transition-duration: var(--duration-fast);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    :host([data-expanded]) [part="indicator"]::before {
+      transform: rotate(90deg);
+    }
+
+    /* Loading spinner replaces the chevron in-place */
+    :host([data-loading]) [part="indicator"]::before {
+      -webkit-mask: ${spinnerMask} center / contain no-repeat;
+      mask: ${spinnerMask} center / contain no-repeat;
+      transform: none;
+      animation: dui-tree-spin 0.9s linear infinite;
+    }
+
+    @keyframes dui-tree-spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* ── Slotted content ────────────────────────────────────────────────── */
+
+    ::slotted([slot="label"]) {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    ::slotted([slot="end"]) {
+      flex-shrink: 0;
+      color: var(--text-2);
+      font-size: var(--_tree-end-font-size);
+      line-height: var(--_tree-end-line-height);
+    }
+
+    /* ── Reduced motion ────────────────────────────────────────────────── */
+
+    @media (prefers-reduced-motion: reduce) {
+      [part="content"],
+      :host([data-branch]) [part="indicator"]::before {
+        transition-duration: 0s;
+      }
+      :host([data-loading]) [part="indicator"]::before {
+        animation: none;
+      }
+    }
+  `;
+export class DuiTreeItem extends DuiTreeItemPrimitive {
+    static styles = [...DuiTreeItemPrimitive.styles, styles];
+}
+customElements.define(DuiTreeItem.tagName, DuiTreeItem);

package/tree/tree.d.ts

@@ -0,0 +1,5 @@
+import { DuiTreePrimitive } from "@deepfuture/dui-primitives/tree";
+import "../_install.js";
+export declare class DuiTree extends DuiTreePrimitive {
+    static styles: import("lit").CSSResult[];
+}

package/tree/tree.js

@@ -0,0 +1,51 @@
+import { css } from "lit";
+import { DuiTreePrimitive } from "@deepfuture/dui-primitives/tree";
+import "../_install.js";
+const styles = css `
+  /* ── Sizes — write to public tokens on :host so consumer overrides win ── */
+
+  :host {
+    /* Default = sm */
+    --dui-tree-row-height: var(--component-height-sm);
+    --dui-tree-indent: var(--space-4);
+    --dui-tree-row-spacing: 0;
+    --dui-tree-row-radius: var(--radius-sm);
+    --dui-tree-hover-bg: oklch(from var(--foreground) l c h / 0.05);
+    --dui-tree-selected-bg: oklch(from var(--foreground) l c h / 0.10);
+
+    /* Internal-only (not part of public token surface) */
+    --_tree-label-font-size: var(--text-xs);
+    --_tree-label-line-height: var(--text-xs--line-height);
+    --_tree-end-font-size: var(--text-2xs);
+    --_tree-end-line-height: var(--text-2xs--line-height);
+    --_tree-indicator-size: 14px;
+    --_tree-row-px: var(--space-2);
+    --_tree-inline-gap: var(--space-2);
+  }
+
+  :host([size="md"]) {
+    --dui-tree-row-height: var(--component-height-md);
+    --dui-tree-indent: var(--space-5);
+    --_tree-label-font-size: var(--text-sm);
+    --_tree-label-line-height: var(--text-sm--line-height);
+    --_tree-end-font-size: var(--text-xs);
+    --_tree-end-line-height: var(--text-xs--line-height);
+    --_tree-indicator-size: var(--space-4);
+    --_tree-inline-gap: var(--space-2);
+  }
+
+  :host([size="lg"]) {
+    --dui-tree-row-height: var(--component-height-lg);
+    --dui-tree-indent: var(--space-6);
+    --_tree-label-font-size: var(--text-sm);
+    --_tree-label-line-height: var(--text-sm--line-height);
+    --_tree-end-font-size: var(--text-xs);
+    --_tree-end-line-height: var(--text-xs--line-height);
+    --_tree-indicator-size: var(--space-4);
+    --_tree-inline-gap: var(--space-2_5);
+  }
+`;
+export class DuiTree extends DuiTreePrimitive {
+    static styles = [...DuiTreePrimitive.styles, styles];
+}
+customElements.define(DuiTree.tagName, DuiTree);