dalila 1.9.26 → 1.10.1

package/dist/cli/check.js

@@ -1,6 +1,10 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { buildRouteTree, injectHtmlPathTemplates, findFile, findProjectRoot, extractParamKeys, } from './routes-generator.js';
+const VOID_HTML_TAGS = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+    'link', 'meta', 'param', 'source', 'track', 'wbr',
+]);
 // ============================================================================
 // TypeScript Compiler API (dynamic import)
 // ============================================================================
@@ -406,6 +410,161 @@ function extractRootIdentifiers(expr) {
     }
     return result;
 }
+function findContainingRange(offset, ranges) {
+    for (const range of ranges) {
+        if (offset < range.start)
+            break;
+        if (offset >= range.start && offset < range.end)
+            return range;
+    }
+    return null;
+}
+function isInsideRange(offset, ranges) {
+    return findContainingRange(offset, ranges) !== null;
+}
+function hasRawMarkerAttribute(attrs) {
+    let i = 0;
+    while (i < attrs.length) {
+        while (i < attrs.length && /\s/.test(attrs[i]))
+            i++;
+        if (i >= attrs.length)
+            break;
+        if (attrs[i] === '/') {
+            i++;
+            continue;
+        }
+        const nameStart = i;
+        while (i < attrs.length && !/[\s=\/]/.test(attrs[i]))
+            i++;
+        if (i === nameStart) {
+            i++;
+            continue;
+        }
+        const name = attrs.slice(nameStart, i).toLowerCase();
+        if (name === 'd-pre' || name === 'd-raw')
+            return true;
+        while (i < attrs.length && /\s/.test(attrs[i]))
+            i++;
+        if (attrs[i] !== '=')
+            continue;
+        i++; // skip '='
+        while (i < attrs.length && /\s/.test(attrs[i]))
+            i++;
+        if (i >= attrs.length)
+            break;
+        const quote = attrs[i];
+        if (quote === '"' || quote === "'") {
+            i++;
+            while (i < attrs.length && attrs[i] !== quote)
+                i++;
+            if (i < attrs.length)
+                i++;
+            continue;
+        }
+        while (i < attrs.length && !/\s/.test(attrs[i]))
+            i++;
+    }
+    return false;
+}
+function extractRawTemplateRanges(html, options = {}) {
+    const ranges = [];
+    const stack = [];
+    const lowerHtml = html.toLowerCase();
+    let i = 0;
+    while (i < html.length) {
+        // script/style contents are raw text in HTML parsing; ignore any
+        // "<...>" sequences inside them to avoid false tag detection.
+        const scriptLike = stack[stack.length - 1];
+        if (scriptLike && (scriptLike.tagName === 'script' || scriptLike.tagName === 'style')) {
+            const closeNeedle = `</${scriptLike.tagName}`;
+            const closeIndex = lowerHtml.indexOf(closeNeedle, i);
+            if (closeIndex === -1)
+                break;
+            if (closeIndex > i) {
+                i = closeIndex;
+                continue;
+            }
+        }
+        if (html[i] !== '<') {
+            i++;
+            continue;
+        }
+        let j = i + 1;
+        let inString = null;
+        let escaped = false;
+        while (j < html.length) {
+            const ch = html[j];
+            if (inString) {
+                if (escaped) {
+                    escaped = false;
+                }
+                else if (ch === '\\') {
+                    escaped = true;
+                }
+                else if (ch === inString) {
+                    inString = null;
+                }
+                j++;
+                continue;
+            }
+            if (ch === '"' || ch === "'") {
+                inString = ch;
+                j++;
+                continue;
+            }
+            if (ch === '>')
+                break;
+            j++;
+        }
+        if (j >= html.length)
+            break;
+        const fullTag = html.slice(i, j + 1);
+        const inner = html.slice(i + 1, j).trim();
+        const isClosingTag = inner.startsWith('/');
+        const normalized = isClosingTag ? inner.slice(1).trim() : inner;
+        const nameMatch = /^([a-zA-Z][\w:-]*)/.exec(normalized);
+        if (!nameMatch) {
+            i = j + 1;
+            continue;
+        }
+        const tagName = nameMatch[1].toLowerCase();
+        const attrs = normalized.slice(nameMatch[1].length);
+        if (isClosingTag) {
+            for (let stackIdx = stack.length - 1; stackIdx >= 0; stackIdx--) {
+                if (stack[stackIdx].tagName !== tagName)
+                    continue;
+                const entry = stack.splice(stackIdx, 1)[0];
+                if (entry.isRaw) {
+                    ranges.push({ start: entry.start, end: i + fullTag.length });
+                }
+                break;
+            }
+            i = j + 1;
+            continue;
+        }
+        const isRawTag = (options.includePreCode && (tagName === 'pre' || tagName === 'code'))
+            || tagName === 'd-pre'
+            || tagName === 'd-raw'
+            || hasRawMarkerAttribute(attrs);
+        const isSelfClosingTag = VOID_HTML_TAGS.has(tagName);
+        if (isSelfClosingTag) {
+            if (isRawTag) {
+                ranges.push({ start: i, end: i + fullTag.length });
+            }
+            i = j + 1;
+            continue;
+        }
+        stack.push({ tagName, isRaw: isRawTag, start: i });
+        i = j + 1;
+    }
+    for (const entry of stack) {
+        if (entry.isRaw) {
+            ranges.push({ start: entry.start, end: html.length });
+        }
+    }
+    ranges.sort((a, b) => a.start - b.start);
+    return ranges;
+}
 /**
  * Extract all template identifiers from HTML content.
  *
@@ -413,7 +572,7 @@ function extractRootIdentifiers(expr) {
  * 1. Text interpolation `{expr}` — only outside HTML tags
  * 2. Context-binding directives `d-*="value"` — specific set
  */
-function extractTemplateIdentifiers(html) {
+function extractTemplateIdentifiers(html, rawRanges = [], interpolationRawRanges = rawRanges) {
     const identifiers = [];
     const lines = html.split('\n');
     const lineOffsets = [];
@@ -439,6 +598,13 @@ function extractTemplateIdentifiers(html) {
     let tagQuote = null;
     let i = 0;
     while (i < html.length) {
+        if (!inTag) {
+            const rawRange = findContainingRange(i, interpolationRawRanges);
+            if (rawRange) {
+                i = rawRange.end;
+                continue;
+            }
+        }
         const ch = html[i];
         if (!inTag && ch === '<') {
             inTag = true;
@@ -524,6 +690,8 @@ function extractTemplateIdentifiers(html) {
     DIRECTIVE_RE.lastIndex = 0;
     let match;
     while ((match = DIRECTIVE_RE.exec(html))) {
+        if (isInsideRange(match.index, rawRanges))
+            continue;
         const directive = match[1];
         const value = match[3].trim();
         if (!value)
@@ -544,11 +712,16 @@ function extractTemplateIdentifiers(html) {
     }
     return identifiers;
 }
-function extractLoopRanges(html) {
+function extractLoopRanges(html, rawRanges = []) {
     const ranges = [];
     const stack = [];
     let i = 0;
     while (i < html.length) {
+        const rawRange = findContainingRange(i, rawRanges);
+        if (rawRange) {
+            i = rawRange.end;
+            continue;
+        }
         if (html[i] !== '<') {
             i++;
             continue;
@@ -591,7 +764,7 @@ function extractLoopRanges(html) {
             i = j + 1;
             continue;
         }
-        const tagName = nameMatch[1];
+        const tagName = nameMatch[1].toLowerCase();
         const attrs = normalized.slice(tagName.length);
         const isSelfClosingTag = !isClosingTag && /\/\s*$/.test(normalized);
         if (isClosingTag) {
@@ -699,8 +872,10 @@ const LOOP_FORCED_CHECK_SOURCES = new Set([
     'd-virtual-overscan',
 ]);
 function checkHtmlContent(html, filePath, validIdentifiers, diagnostics) {
-    const ids = extractTemplateIdentifiers(html);
-    const loopRanges = extractLoopRanges(html);
+    const rawRanges = extractRawTemplateRanges(html);
+    const interpolationRawRanges = extractRawTemplateRanges(html, { includePreCode: true });
+    const ids = extractTemplateIdentifiers(html, rawRanges, interpolationRawRanges);
+    const loopRanges = extractLoopRanges(html, rawRanges);
     for (const id of ids) {
         if (validIdentifiers.has(id.name))
             continue;

package/dist/components/ui/runtime.js

@@ -30,6 +30,12 @@ const TAG_ALIASES = {
     "d-table-wrapper": "div", "d-table": "table",
     "d-pagination": "nav", "d-page": "button", "d-page-ellipsis": "span",
     "d-breadcrumb": "ol", "d-breadcrumb-item": "li",
+    "d-nav-bar": "nav", "d-nav-brand": "a", "d-nav-links": "div", "d-nav-link": "a",
+    "d-side-bar": "aside", "d-side-bar-header": "div", "d-side-bar-sections": "div",
+    "d-side-bar-inner": "div", "d-side-bar-footer": "div", "d-side-bar-avatar": "span",
+    "d-side-bar-top": "div", "d-side-bar-brand": "a", "d-side-bar-logo": "span", "d-side-bar-meta": "div",
+    "d-side-bar-name": "span", "d-side-bar-subtitle": "span", "d-side-bar-toggle": "button",
+    "d-side-bar-section": "details", "d-side-bar-title": "summary", "d-side-bar-links": "div", "d-side-bar-link": "a",
     "d-separator": "hr", "d-separator-label": "div",
     "d-skeleton": "div", "d-loading": "div", "d-spinner": "span",
     "d-empty": "div", "d-empty-icon": "div", "d-empty-title": "h3", "d-empty-text": "p",
@@ -72,6 +78,12 @@ const TAG_DEFAULT_CLASS = {
     "d-table-wrapper": "d-table-wrapper", "d-table": "d-table",
     "d-pagination": "d-pagination", "d-page": "d-page", "d-page-ellipsis": "d-page-ellipsis",
     "d-breadcrumb": "d-breadcrumb", "d-breadcrumb-item": "d-breadcrumb-item",
+    "d-nav-bar": "d-nav-bar", "d-nav-brand": "d-nav-brand", "d-nav-links": "d-nav-links", "d-nav-link": "d-nav-link",
+    "d-side-bar": "d-side-bar", "d-side-bar-header": "d-side-bar-header", "d-side-bar-sections": "d-side-bar-sections",
+    "d-side-bar-inner": "d-side-bar-inner", "d-side-bar-footer": "d-side-bar-footer", "d-side-bar-avatar": "d-side-bar-avatar",
+    "d-side-bar-top": "d-side-bar-top", "d-side-bar-brand": "d-side-bar-brand", "d-side-bar-logo": "d-side-bar-logo", "d-side-bar-meta": "d-side-bar-meta",
+    "d-side-bar-name": "d-side-bar-name", "d-side-bar-subtitle": "d-side-bar-subtitle", "d-side-bar-toggle": "d-side-bar-toggle",
+    "d-side-bar-section": "d-side-bar-section", "d-side-bar-title": "d-side-bar-title", "d-side-bar-links": "d-side-bar-links", "d-side-bar-link": "d-side-bar-link",
     "d-separator": "d-separator", "d-separator-label": "d-separator-label",
     "d-skeleton": "d-skeleton", "d-loading": "d-loading", "d-spinner": "d-spinner",
     "d-empty": "d-empty", "d-empty-icon": "d-empty-icon", "d-empty-title": "d-empty-title", "d-empty-text": "d-empty-text",
@@ -125,6 +137,7 @@ const TAG_UPGRADE_RULES = {
     "d-calendar-nav": { defaultType: "button" },
     "d-calendar-day": { defaultType: "button" },
     "d-combobox-input": { defaultType: "text" },
+    "d-side-bar-toggle": { defaultType: "button" },
 };
 // ── Tag upgrade engine ──────────────────────────────────────────────
 function upgradeDalilaTags(root) {

package/dist/runtime/bind.d.ts

@@ -15,7 +15,8 @@ export interface BindOptions {
      */
     events?: string[];
     /**
-     * Selectors for elements where text interpolation should be skipped
+     * Selectors for elements where text interpolation should be skipped.
+     * `d-pre` / `d-raw` subtrees are always skipped regardless of this option.
      */
     rawTextSelectors?: string;
     /**

package/dist/runtime/bind.js

@@ -103,6 +103,73 @@ function isWarnAsErrorEnabledForActiveScope() {
     }
     return false;
 }
+const RAW_BLOCK_SELECTORS = '[d-pre], [d-raw], d-pre, d-raw, [data-dalila-raw]';
+const RAW_BLOCK_STYLE_ID = 'dalila-raw-block-default-styles';
+function ensureRawBlockDefaultStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(RAW_BLOCK_STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = RAW_BLOCK_STYLE_ID;
+    style.textContent = `
+[data-dalila-raw] { white-space: pre-wrap; }
+d-pre[data-dalila-raw], d-raw[data-dalila-raw] { display: block; }
+  `.trim();
+    if (document.head) {
+        document.head.appendChild(style);
+        return;
+    }
+    document.documentElement?.appendChild(style);
+}
+function elementDepth(el) {
+    let depth = 0;
+    let cursor = el.parentElement;
+    while (cursor) {
+        depth += 1;
+        cursor = cursor.parentElement;
+    }
+    return depth;
+}
+function collectRawBlocks(root) {
+    const boundary = root.closest('[data-dalila-internal-bound]');
+    const matches = [];
+    if (root.matches(RAW_BLOCK_SELECTORS)) {
+        matches.push(root);
+    }
+    matches.push(...Array.from(root.querySelectorAll(RAW_BLOCK_SELECTORS)));
+    const inScope = matches.filter((el) => {
+        const bound = el.closest('[data-dalila-internal-bound]');
+        return bound === boundary;
+    });
+    inScope.sort((a, b) => elementDepth(a) - elementDepth(b));
+    const roots = [];
+    for (const el of inScope) {
+        if (roots.some((parent) => parent.contains(el)))
+            continue;
+        roots.push(el);
+    }
+    return roots;
+}
+function materializeRawBlocks(root) {
+    const rawBlocks = collectRawBlocks(root);
+    if (rawBlocks.length > 0) {
+        ensureRawBlockDefaultStyles();
+    }
+    for (const block of rawBlocks) {
+        if (block.hasAttribute('data-dalila-raw'))
+            continue;
+        const source = block.innerHTML;
+        block.setAttribute('data-dalila-raw', '');
+        block.textContent = source;
+    }
+}
+function isInsideRawBlock(el, boundary) {
+    const rawRoot = el.closest(RAW_BLOCK_SELECTORS);
+    if (!rawRoot)
+        return false;
+    return rawRoot.closest('[data-dalila-internal-bound]') === boundary;
+}
 function createBindScanPlan(root) {
     const boundary = root.closest('[data-dalila-internal-bound]');
     const elements = [];
@@ -208,16 +275,19 @@ function resolveSelectorFromIndex(plan, selector) {
     return null;
 }
 function qsaFromPlan(plan, selector) {
+    const boundary = plan.root.closest('[data-dalila-internal-bound]');
     const cacheable = !selector.includes('[');
     if (cacheable) {
         const cached = plan.selectorCache.get(selector);
         if (cached) {
-            return cached.filter(el => el === plan.root || plan.root.contains(el));
+            return cached.filter((el) => (el === plan.root || plan.root.contains(el))
+                && !isInsideRawBlock(el, boundary));
         }
     }
     const indexed = resolveSelectorFromIndex(plan, selector);
     const source = indexed ?? plan.elements.filter(el => el.matches(selector));
-    const matches = source.filter(el => el === plan.root || plan.root.contains(el));
+    const matches = source.filter((el) => (el === plan.root || plan.root.contains(el))
+        && !isInsideRawBlock(el, boundary));
     if (cacheable)
         plan.selectorCache.set(selector, matches);
     return matches;
@@ -239,7 +309,9 @@ function qsaIncludingRoot(root, selector) {
     const boundary = root.closest('[data-dalila-internal-bound]');
     return out.filter(el => {
         const bound = el.closest('[data-dalila-internal-bound]');
-        return bound === boundary;
+        if (bound !== boundary)
+            return false;
+        return !isInsideRawBlock(el, boundary);
     });
 }
 /**
@@ -1486,6 +1558,8 @@ function createInterpolationTemplatePlan(root, rawTextSelectors) {
         const parent = node.parentElement;
         if (parent && parent.closest(rawTextSelectors))
             continue;
+        if (parent && parent.closest(RAW_BLOCK_SELECTORS))
+            continue;
         if (parent) {
             const bound = parent.closest('[data-dalila-internal-bound]');
             if (bound !== textBoundary)
@@ -3381,6 +3455,9 @@ export function bind(root, ctx, options = {}) {
         warnAsErrorScopes.add(templateScope);
     }
     linkScopeToDom(templateScope, root, describeBindRoot(root));
+    // Harden raw code-example blocks early so nested markup is rendered as
+    // inert text before any directive/event pass runs.
+    materializeRawBlocks(root);
     const bindScanPlan = createBindScanPlan(root);
     let bindCompleted = false;
     let disposed = false;

package/dist/runtime/boundary.js

@@ -12,6 +12,10 @@ import { bind, warnSecurityRuntime } from './bind.js';
 import { defineComponent } from './component.js';
 import { hasExecutableHtmlSinkPattern, setElementInnerHTML } from './html-sinks.js';
 // ============================================================================
+// Types
+// ============================================================================
+const RAW_BLOCK_SELECTORS = '[d-pre], [d-raw], d-pre, d-raw, [data-dalila-raw]';
+// ============================================================================
 // Error Boundary Component
 // ============================================================================
 /**
@@ -97,6 +101,10 @@ export function bindBoundary(root, ctx, cleanups, options = {}) {
             continue;
         if (el.closest('[data-dalila-internal-bound]') !== boundary)
             continue;
+        // Raw blocks are inert by contract: d-* directives must not run inside.
+        const rawRoot = el.closest(RAW_BLOCK_SELECTORS);
+        if (rawRoot && rawRoot.closest('[data-dalila-internal-bound]') === boundary)
+            continue;
         for (const nested of Array.from(el.querySelectorAll('[d-boundary]'))) {
             consumedNested.add(nested);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dalila",
-  "version": "1.9.26",
+  "version": "1.10.1",
   "description": "DOM-first reactive framework based on signals",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/ui/dalila/dalila.css

@@ -35,6 +35,8 @@
 @import "../table/table.css";
 @import "../pagination/pagination.css";
 @import "../breadcrumb/breadcrumb.css";
+@import "../nav-bar/nav-bar.css";
+@import "../side-bar/side-bar.css";
 @import "../separator/separator.css";
 @import "../skeleton/skeleton.css";
 @import "../spinner/spinner.css";

package/src/components/ui/nav-bar/nav-bar.css

@@ -0,0 +1,75 @@
+/* Dalila UI — Nav Bar */
+
+.d-nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--d-space-4);
+  width: 100%;
+  padding: var(--d-space-3) var(--d-space-4);
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-lg);
+  background: var(--d-surface);
+}
+
+.d-nav-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--d-space-2);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-base);
+  font-weight: var(--d-font-semibold);
+  color: var(--d-text-primary);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.d-nav-links {
+  display: flex;
+  align-items: center;
+  gap: var(--d-space-1);
+  flex-wrap: wrap;
+}
+
+.d-nav-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2rem;
+  padding: var(--d-space-1) var(--d-space-3);
+  border-radius: var(--d-radius-md);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  font-weight: var(--d-font-medium);
+  color: var(--d-text-secondary);
+  text-decoration: none;
+  transition:
+    background var(--d-duration-fast) var(--d-ease),
+    color var(--d-duration-fast) var(--d-ease);
+}
+
+.d-nav-link:hover {
+  color: var(--d-text-primary);
+  background: var(--d-surface-raised);
+}
+
+.d-nav-link[aria-current="page"],
+.d-nav-link.active {
+  color: #fff;
+  background: var(--d-accent);
+}
+
+@media (max-width: 640px) {
+  .d-nav-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .d-nav-links {
+    width: 100%;
+  }
+
+  .d-nav-link {
+    flex: 1 1 auto;
+  }
+}

package/src/components/ui/side-bar/side-bar.css

@@ -0,0 +1,414 @@
+/* Dalila UI — Side Bar */
+
+.d-side-bar {
+  display: block;
+  box-sizing: border-box;
+  width: 18rem;
+  max-width: 18rem;
+  min-height: 22.75rem;
+  padding: var(--d-space-3);
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-xl);
+  background: var(--d-surface);
+  transition:
+    width var(--d-duration-slow) var(--d-ease),
+    max-width var(--d-duration-slow) var(--d-ease),
+    padding var(--d-duration) var(--d-ease);
+}
+
+.d-side-bar-shell {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: max-content 2.75rem;
+  column-gap: var(--d-space-3);
+  justify-self: start;
+  align-self: start;
+  width: fit-content;
+}
+
+.d-side-bar-rail {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  width: 2.75rem;
+  min-height: 100%;
+  padding-top: calc(var(--d-space-4) + 1px);
+}
+
+.d-side-bar-rail::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 50%;
+  width: 1px;
+  background: color-mix(in srgb, var(--d-border-color) 72%, transparent);
+  transform: translateX(-50%);
+}
+
+.d-side-bar-floating-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-lg);
+  background: color-mix(in srgb, var(--d-surface-card) 88%, var(--d-surface-raised));
+  color: var(--d-text-secondary);
+  box-shadow: var(--d-shadow-sm);
+  cursor: pointer;
+  z-index: 2;
+  transition:
+    background var(--d-duration-fast) var(--d-ease),
+    border-color var(--d-duration-fast) var(--d-ease),
+    color var(--d-duration-fast) var(--d-ease),
+    box-shadow var(--d-duration-fast) var(--d-ease);
+}
+
+.d-side-bar-floating-toggle:hover {
+  background: var(--d-surface-card);
+  border-color: color-mix(in srgb, var(--d-border-color) 50%, var(--d-accent) 50%);
+  color: var(--d-text-primary);
+}
+
+.d-side-bar-floating-toggle:focus-visible {
+  outline: none;
+  border-color: var(--d-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-accent) 18%, transparent);
+}
+
+.d-side-bar-toggle-icon {
+  width: 1rem;
+  height: 1rem;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.9;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.d-side-bar-floating-toggle .d-side-bar-toggle-icon-expand {
+  display: none;
+}
+
+.d-side-bar-floating-toggle.collapsed .d-side-bar-toggle-icon-expand {
+  display: block;
+}
+
+.d-side-bar-floating-toggle.collapsed .d-side-bar-toggle-icon-collapse {
+  display: none;
+}
+
+.d-side-bar-inner {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.d-side-bar-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--d-space-2);
+  margin-bottom: var(--d-space-3);
+}
+
+.d-side-bar-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--d-space-3);
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+}
+
+.d-side-bar-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--d-radius-md);
+  background: var(--d-primary-600);
+  color: var(--d-primary-50);
+  font-size: var(--d-text-base);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d-primary-50) 20%, transparent);
+}
+
+.d-side-bar-meta {
+  min-width: 0;
+}
+
+.d-side-bar-name {
+  display: block;
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  font-weight: var(--d-font-semibold);
+  color: var(--d-text-primary);
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.d-side-bar-subtitle {
+  display: block;
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-xs);
+  color: var(--d-text-tertiary);
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.d-side-bar-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-md);
+  background: transparent;
+  color: var(--d-text-secondary);
+  cursor: pointer;
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  line-height: 1;
+  transition:
+    background var(--d-duration-fast) var(--d-ease),
+    color var(--d-duration-fast) var(--d-ease);
+}
+
+.d-side-bar-toggle:hover {
+  background: var(--d-surface-raised);
+  color: var(--d-text-primary);
+}
+
+.d-side-bar-toggle:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--d-accent);
+}
+
+.d-side-bar-header {
+  margin-bottom: var(--d-space-3);
+  padding: 0 var(--d-space-2);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-xs);
+  font-weight: var(--d-font-semibold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--d-text-tertiary);
+}
+
+.d-side-bar-sections {
+  display: flex;
+  flex-direction: column;
+  gap: var(--d-space-1);
+}
+
+.d-side-bar-section {
+  border-radius: var(--d-radius-md);
+  overflow: hidden;
+}
+
+.d-side-bar-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 2.25rem;
+  padding: var(--d-space-2) var(--d-space-3);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  font-weight: var(--d-font-medium);
+  color: var(--d-text-primary);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  transition: background var(--d-duration-fast) var(--d-ease);
+  border-radius: var(--d-radius-md);
+}
+
+.d-side-bar-title:hover {
+  background: var(--d-surface-raised);
+}
+
+.d-side-bar-section[open] > .d-side-bar-title,
+.d-side-bar-section.open > .d-side-bar-title {
+  border-radius: var(--d-radius-md);
+}
+
+.d-side-bar-title::-webkit-details-marker {
+  display: none;
+}
+
+.d-side-bar-title::after {
+  content: "";
+  width: 0.45rem;
+  height: 0.45rem;
+  border-right: 2px solid var(--d-text-tertiary);
+  border-bottom: 2px solid var(--d-text-tertiary);
+  transform: rotate(45deg);
+  transition: transform var(--d-duration) var(--d-ease);
+  flex-shrink: 0;
+}
+
+.d-side-bar-section[open] > .d-side-bar-title::after,
+.d-side-bar-section.open > .d-side-bar-title::after {
+  transform: rotate(-135deg);
+}
+
+.d-side-bar-links {
+  display: grid;
+  gap: var(--d-space-1);
+  padding: var(--d-space-2) var(--d-space-2) var(--d-space-2) var(--d-space-4);
+  transition: padding var(--d-duration) var(--d-ease);
+}
+
+.d-side-bar-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--d-space-2);
+  width: 100%;
+  min-height: 2rem;
+  padding: var(--d-space-1) var(--d-space-2);
+  border-radius: var(--d-radius-sm);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-sm);
+  color: var(--d-text-secondary);
+  position: relative;
+  text-decoration: none;
+  transition:
+    background var(--d-duration-fast) var(--d-ease),
+    color var(--d-duration-fast) var(--d-ease);
+}
+
+.d-side-bar-link:hover {
+  color: var(--d-text-primary);
+  background: color-mix(in srgb, var(--d-accent) 12%, transparent);
+}
+
+.d-side-bar-link[aria-current="page"],
+.d-side-bar-link.active {
+  color: var(--d-accent);
+  background: color-mix(in srgb, var(--d-accent) 16%, transparent);
+}
+
+.d-side-bar-link-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  flex-shrink: 0;
+}
+
+.d-side-bar-link-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.d-side-bar.collapsed {
+  width: 4.25rem;
+  max-width: 4.25rem;
+  padding: var(--d-space-3) var(--d-space-2);
+}
+
+.d-side-bar.collapsed .d-side-bar-top {
+  margin-bottom: var(--d-space-2);
+  justify-content: center;
+}
+
+.d-side-bar.collapsed .d-side-bar-meta,
+.d-side-bar.collapsed .d-side-bar-header,
+.d-side-bar.collapsed .d-side-bar-footer {
+  display: none;
+}
+
+.d-side-bar.collapsed .d-side-bar-brand {
+  justify-content: center;
+  width: 100%;
+  gap: 0;
+}
+
+.d-side-bar.collapsed .d-side-bar-sections {
+  gap: var(--d-space-2);
+}
+
+.d-side-bar.collapsed .d-side-bar-section {
+  width: 100%;
+  overflow: visible;
+}
+
+.d-side-bar.collapsed .d-side-bar-link:nth-child(n + 2) {
+  display: none;
+}
+
+.d-side-bar.collapsed .d-side-bar-title {
+  display: none;
+}
+
+.d-side-bar.collapsed .d-side-bar-links {
+  padding: 0;
+}
+
+.d-side-bar.collapsed .d-side-bar-link {
+  justify-content: center;
+  min-height: 2.5rem;
+  padding: 0;
+  border-radius: var(--d-radius-md);
+}
+
+.d-side-bar.collapsed .d-side-bar-link-icon {
+  width: 1.25rem;
+  font-size: var(--d-text-base);
+}
+
+.d-side-bar.collapsed .d-side-bar-link-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.d-side-bar-footer {
+  margin-top: auto;
+  padding-top: var(--d-space-3);
+  display: flex;
+  justify-content: center;
+}
+
+.d-side-bar-avatar {
+  width: 1.9rem;
+  height: 1.9rem;
+  border-radius: 999px;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.d-side-bar-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.d-side-bar-avatar-text {
+  width: 100%;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.95rem;
+  background: linear-gradient(145deg, var(--d-primary-500), var(--d-accent-500));
+  color: #fff;
+}

package/src/components/ui/tokens/tokens.css

@@ -116,6 +116,7 @@
 
   --d-surface-page: var(--d-bg);
   --d-surface-card: var(--d-bg-card);
+  --d-surface: var(--d-surface-card);
   --d-surface-raised: var(--d-bg-elevated);
   --d-surface-overlay: rgba(0, 0, 0, 0.4);