@plures/design-dojo 0.5.3 → 0.7.1

package/dist/surfaces/Pane.svelte

@@ -0,0 +1,172 @@
+<!--
+  Pane — A named, scrollable content region. The atomic layout unit.
+
+  GUI mode: Flexbox container with optional scroll and title.
+  TUI mode: Box-drawing–style border with bold title, scrollable area.
+           Maps to ratatui Block::default().borders(Borders::ALL).title(…)
+-->
+<script lang="ts">
+  import { provideTui, useTui } from "../useTui.js";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    /** Enable TUI mode: box-drawing border, terminal-safe colors, no decorative CSS. */
+    tui?: boolean;
+    /** Title shown in the top border (TUI) or as a label above content (GUI). */
+    title?: string;
+    /** Allow content to scroll vertically. */
+    scrollable?: boolean;
+    /** Flex-grow weight for proportional sizing inside SplitPane. */
+    flex?: number;
+    /** Override width. Numbers are treated as pixels. */
+    width?: string | number;
+    /** Override height. Numbers are treated as pixels. */
+    height?: string | number;
+    /**
+     * Show a border around the pane.
+     * Default: true in TUI mode, false in GUI mode.
+     */
+    border?: boolean;
+    class?: string;
+    children: Snippet;
+  }
+
+  let {
+    tui = false,
+    title = "",
+    scrollable = false,
+    flex,
+    width,
+    height,
+    border,
+    class: className = "",
+    children,
+  }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+
+  // Propagate TUI mode to nested children
+  provideTui(() => isTui);
+
+  const showBorder = $derived(border !== undefined ? border : isTui);
+
+  const widthStyle = $derived(
+    width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
+  );
+  const heightStyle = $derived(
+    height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
+  );
+  const flexStyle = $derived(flex !== undefined ? String(flex) : undefined);
+</script>
+
+{#if isTui}
+  <div
+    class="pane-tui {className}"
+    class:pane-tui--border={showBorder}
+    style:flex-grow={flexStyle}
+    style:width={widthStyle}
+    style:height={heightStyle}
+  >
+    {#if title && showBorder}
+      <span class="pane-tui__title">{title}</span>
+    {/if}
+    <div class="pane-tui__content" class:pane-tui__content--scroll={scrollable}>
+      {@render children()}
+    </div>
+  </div>
+{:else}
+  <div
+    class="pane-gui {className}"
+    class:pane-gui--border={showBorder}
+    style:flex-grow={flexStyle}
+    style:width={widthStyle}
+    style:height={heightStyle}
+  >
+    {#if title}
+      <div class="pane-gui__title">{title}</div>
+    {/if}
+    <div class="pane-gui__content" class:pane-gui__content--scroll={scrollable}>
+      {@render children()}
+    </div>
+  </div>
+{/if}
+
+<style>
+  /* ===== GUI mode ===== */
+  .pane-gui {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .pane-gui--border {
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    padding: var(--space-4, 16px);
+  }
+
+  .pane-gui__title {
+    font-size: var(--text-sm, 14px);
+    font-weight: 600;
+    color: var(--color-text-muted, #888888);
+    margin-bottom: var(--space-2, 8px);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .pane-gui__content {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .pane-gui__content--scroll {
+    overflow-y: auto;
+  }
+
+  /* ===== TUI mode ===== */
+  .pane-tui {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    font-family: var(--font-mono, monospace);
+    color: var(--tui-text, #e0e0e0);
+    background: var(--tui-surface, #16213e);
+  }
+
+  .pane-tui--border {
+    position: relative;
+    border: 1px solid var(--tui-border, #0f3460);
+    padding: var(--space-4, 16px);
+  }
+
+  .pane-tui--border:has(.pane-tui__title) {
+    padding-top: calc(var(--space-4, 16px) + 0.9em);
+  }
+
+  .pane-tui__title {
+    position: absolute;
+    top: -0.65em;
+    left: 1ch;
+    background: var(--tui-surface, #16213e);
+    padding: 0 1ch;
+    color: var(--tui-accent, #00d4ff);
+    font-weight: bold;
+    font-size: var(--text-sm, 14px);
+    font-family: var(--font-mono, monospace);
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .pane-tui__content {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .pane-tui__content--scroll {
+    overflow-y: auto;
+  }
+</style>

package/dist/surfaces/Pane.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Enable TUI mode: box-drawing border, terminal-safe colors, no decorative CSS. */
+    tui?: boolean;
+    /** Title shown in the top border (TUI) or as a label above content (GUI). */
+    title?: string;
+    /** Allow content to scroll vertically. */
+    scrollable?: boolean;
+    /** Flex-grow weight for proportional sizing inside SplitPane. */
+    flex?: number;
+    /** Override width. Numbers are treated as pixels. */
+    width?: string | number;
+    /** Override height. Numbers are treated as pixels. */
+    height?: string | number;
+    /**
+     * Show a border around the pane.
+     * Default: true in TUI mode, false in GUI mode.
+     */
+    border?: boolean;
+    class?: string;
+    children: Snippet;
+}
+declare const Pane: import("svelte").Component<Props, {}, "">;
+type Pane = ReturnType<typeof Pane>;
+export default Pane;

package/dist/surfaces/index.d.ts

@@ -0,0 +1,4 @@
+export { default as GlassPanel } from "./GlassPanel.svelte";
+export { default as Pane } from "./Pane.svelte";
+export { default as ChatPane } from "./ChatPane.svelte";
+export type { ChatMessage } from "./ChatPane.types.js";

package/dist/surfaces/index.js

@@ -0,0 +1,3 @@
+export { default as GlassPanel } from "./GlassPanel.svelte";
+export { default as Pane } from "./Pane.svelte";
+export { default as ChatPane } from "./ChatPane.svelte";

package/dist/telemetry/correlation.js

@@ -0,0 +1,26 @@
+/**
+ * correlation — Lightweight correlation ID utilities for design-dojo telemetry.
+ *
+ * Correlation IDs link related spans across component boundaries and async
+ * operations without including any personally-identifiable information.
+ */
+/**
+ * Generate a UUID v4 correlation ID suitable for use in URLs and logs.
+ * Uses crypto.randomUUID when available, falls back to crypto.getRandomValues.
+ */
+export function generateCorrelationId() {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+        return crypto.randomUUID();
+    }
+    if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
+        const bytes = new Uint8Array(16);
+        crypto.getRandomValues(bytes);
+        // Format as UUID v4
+        bytes[6] = (bytes[6] & 0x0f) | 0x40;
+        bytes[8] = (bytes[8] & 0x3f) | 0x80;
+        const hex = Array.from(bytes).map((b) => b.toString(16).padStart(2, "0")).join("");
+        return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+    }
+    // SSR/non-crypto fallback (non-unique, good enough for local dev)
+    return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}

package/dist/telemetry/index.d.ts

@@ -15,7 +15,7 @@
  * tracer.recordInteraction("click", "success");
  * ```
  */
-export { createComponentTracer, SpanAttributes } from './tracer.js';
-export type { ComponentTracer, ComponentAttributes, EventOutcome } from './tracer.js';
-export { shouldSample, TELEMETRY_ENABLED, SAMPLE_RATE } from './sampling.js';
-export { generateCorrelationId } from './correlation.js';
+export { createComponentTracer, SpanAttributes } from "./tracer.js";
+export type { ComponentTracer, ComponentAttributes, EventOutcome } from "./tracer.js";
+export { shouldSample, TELEMETRY_ENABLED, SAMPLE_RATE } from "./sampling.js";
+export { generateCorrelationId } from "./correlation.js";

package/dist/telemetry/index.js

@@ -1,101 +1,20 @@
-import { trace as f, INVALID_SPAN_CONTEXT as O, SpanStatusCode as N } from "@opentelemetry/api";
-const _ = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, d = (() => {
-  try {
-    const t = _;
-    if ((t == null ? void 0 : t.VITE_OTEL_ENABLED) === "false") return !1;
-  } catch {
-  }
-  return !0;
-})(), u = (() => {
-  try {
-    const t = _, e = t == null ? void 0 : t.VITE_OTEL_SAMPLE_RATE;
-    if (e !== void 0) {
-      const a = parseFloat(e);
-      if (!isNaN(a) && a >= 0 && a <= 1) return a;
-    }
-  } catch {
-  }
-  return 1;
-})();
-function p() {
-  return d ? u >= 1 ? !0 : u <= 0 ? !1 : Math.random() < u : !1;
-}
-function S() {
-  if (typeof crypto < "u" && typeof crypto.randomUUID == "function")
-    return crypto.randomUUID();
-  if (typeof crypto < "u" && typeof crypto.getRandomValues == "function") {
-    const t = new Uint8Array(16);
-    crypto.getRandomValues(t), t[6] = t[6] & 15 | 64, t[8] = t[8] & 63 | 128;
-    const e = Array.from(t).map((a) => a.toString(16).padStart(2, "0")).join("");
-    return `${e.slice(0, 8)}-${e.slice(8, 12)}-${e.slice(12, 16)}-${e.slice(16, 20)}-${e.slice(20)}`;
-  }
-  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
-}
-const A = "@plures/design-dojo", s = {
-  COMPONENT_NAME: "ui.component.name",
-  COMPONENT_VARIANT: "ui.component.variant",
-  COMPONENT_STATE: "ui.component.state",
-  EVENT_NAME: "ui.event.name",
-  EVENT_OUTCOME: "ui.event.outcome",
-  CORRELATION_ID: "ui.correlation_id"
-};
-function R(t, e = {}) {
-  const a = f.getTracer(A), T = S();
-  function E(r = {}) {
-    const n = {};
-    e.extra && Object.assign(n, e.extra), r.extra && Object.assign(n, r.extra), n[s.COMPONENT_NAME] = t, n[s.CORRELATION_ID] = T;
-    const o = r.variant ?? e.variant, i = r.state ?? e.state;
-    return o !== void 0 && (n[s.COMPONENT_VARIANT] = o), i !== void 0 && (n[s.COMPONENT_STATE] = i), n;
-  }
-  return {
-    otel: a,
-    correlationId: T,
-    recordInteraction(r, n, o = {}) {
-      if (!p()) return;
-      const i = a.startSpan(`${t}.${r}`, {
-        attributes: {
-          ...E(o),
-          [s.EVENT_NAME]: r,
-          [s.EVENT_OUTCOME]: n
-        }
-      });
-      n === "error" && i.setStatus({ code: N.ERROR }), i.end();
-    },
-    startInteractionSpan(r, n = {}) {
-      if (!p())
-        return { span: f.wrapSpanContext(O), finish: () => {
-        } };
-      const o = a.startSpan(`${t}.${r}`, {
-        attributes: {
-          ...E(n),
-          [s.EVENT_NAME]: r
-        }
-      });
-      return {
-        span: o,
-        finish(i, c) {
-          o.setAttribute(s.EVENT_OUTCOME, i), i === "error" && (o.setStatus({
-            code: N.ERROR,
-            message: c == null ? void 0 : c.message
-          }), c && o.recordException(c)), o.end();
-        }
-      };
-    },
-    startRenderSpan(r = {}) {
-      if (!p()) return () => {
-      };
-      const n = a.startSpan(`${t}.render`, {
-        attributes: E(r)
-      });
-      return () => n.end();
-    }
-  };
-}
-export {
-  u as SAMPLE_RATE,
-  s as SpanAttributes,
-  d as TELEMETRY_ENABLED,
-  R as createComponentTracer,
-  S as generateCorrelationId,
-  p as shouldSample
-};
+/**
+ * @plures/design-dojo — telemetry module
+ *
+ * Provides OpenTelemetry instrumentation utilities for design-dojo components.
+ *
+ * The module uses `@opentelemetry/api` which is a no-op by default — spans are
+ * only recorded once a consumer app registers an OTel SDK provider.  See
+ * docs/telemetry.md for setup instructions.
+ *
+ * @example
+ * ```ts
+ * import { createComponentTracer } from "@plures/design-dojo/telemetry";
+ *
+ * const tracer = createComponentTracer("MyButton", { variant: "solid" });
+ * tracer.recordInteraction("click", "success");
+ * ```
+ */
+export { createComponentTracer, SpanAttributes } from "./tracer.js";
+export { shouldSample, TELEMETRY_ENABLED, SAMPLE_RATE } from "./sampling.js";
+export { generateCorrelationId } from "./correlation.js";

package/dist/telemetry/sampling.js

@@ -0,0 +1,58 @@
+/**
+ * sampling — Sampling controls for design-dojo telemetry.
+ *
+ * Consumers configure sampling via Vite environment variables, which are
+ * resolved at build time and inlined via `import.meta.env`:
+ *
+ *   VITE_OTEL_SAMPLE_RATE=0.1   (10% of spans recorded, default 1.0)
+ *   VITE_OTEL_ENABLED=false     (disable telemetry entirely)
+ *
+ * These values are read once at module initialisation so they impose no
+ * per-span overhead in production.
+ */
+/** Whether telemetry is enabled at all.  Defaults to `true`. */
+export const TELEMETRY_ENABLED = (() => {
+    try {
+        // Vite replaces import.meta.env.* at build time; cast via unknown to satisfy
+        // strict TS outside of a vite/client type context.
+        const env = import.meta.env;
+        if (env?.VITE_OTEL_ENABLED === "false")
+            return false;
+    }
+    catch {
+        // Not a Vite environment — treat as enabled.
+    }
+    return true;
+})();
+/**
+ * Fractional sample rate in `[0, 1]`.  `1.0` records every span; `0` records
+ * none.  Controlled by `VITE_OTEL_SAMPLE_RATE` (build-time env var).
+ */
+export const SAMPLE_RATE = (() => {
+    try {
+        const env = import.meta.env;
+        const raw = env?.VITE_OTEL_SAMPLE_RATE;
+        if (raw !== undefined) {
+            const parsed = parseFloat(raw);
+            if (!isNaN(parsed) && parsed >= 0 && parsed <= 1)
+                return parsed;
+        }
+    }
+    catch {
+        // Not a Vite environment — use default.
+    }
+    return 1.0;
+})();
+/**
+ * Returns `true` when this particular call-site should be recorded.
+ * Used by all span helpers to honour the configured sample rate.
+ */
+export function shouldSample() {
+    if (!TELEMETRY_ENABLED)
+        return false;
+    if (SAMPLE_RATE >= 1.0)
+        return true;
+    if (SAMPLE_RATE <= 0)
+        return false;
+    return Math.random() < SAMPLE_RATE;
+}

package/dist/telemetry/tracer.d.ts

@@ -1,4 +1,19 @@
-import { Tracer, Span, Attributes } from '@opentelemetry/api';
+/**
+ * tracer — Component tracer factory for design-dojo telemetry.
+ *
+ * Uses `@opentelemetry/api` which is a zero-overhead no-op when no SDK is
+ * registered.  Consumer apps wire up their preferred SDK in
+ * `hooks.client.ts` / `hooks.server.ts` (see docs/telemetry.md).
+ *
+ * Span attribute conventions (no PII):
+ *   ui.component.name     — e.g. "Button"
+ *   ui.component.variant  — e.g. "solid" | "ghost"
+ *   ui.component.state    — e.g. "disabled" | "focused"
+ *   ui.event.name         — e.g. "click" | "change"
+ *   ui.event.outcome      — "success" | "error" | "cancelled"
+ *   ui.correlation_id     — UUID v4 string linking related spans
+ */
+import { type Tracer, type Span, type Attributes } from "@opentelemetry/api";
 /** Well-known attribute keys (keeps typos out of call sites). */
 export declare const SpanAttributes: {
     readonly COMPONENT_NAME: "ui.component.name";

package/dist/telemetry/tracer.js

@@ -0,0 +1,112 @@
+/**
+ * tracer — Component tracer factory for design-dojo telemetry.
+ *
+ * Uses `@opentelemetry/api` which is a zero-overhead no-op when no SDK is
+ * registered.  Consumer apps wire up their preferred SDK in
+ * `hooks.client.ts` / `hooks.server.ts` (see docs/telemetry.md).
+ *
+ * Span attribute conventions (no PII):
+ *   ui.component.name     — e.g. "Button"
+ *   ui.component.variant  — e.g. "solid" | "ghost"
+ *   ui.component.state    — e.g. "disabled" | "focused"
+ *   ui.event.name         — e.g. "click" | "change"
+ *   ui.event.outcome      — "success" | "error" | "cancelled"
+ *   ui.correlation_id     — UUID v4 string linking related spans
+ */
+import { trace, SpanStatusCode, INVALID_SPAN_CONTEXT, } from "@opentelemetry/api";
+import { shouldSample } from "./sampling.js";
+import { generateCorrelationId } from "./correlation.js";
+/** Instrumentation scope name for all design-dojo spans. */
+const INSTRUMENTATION_NAME = "@plures/design-dojo";
+/** Well-known attribute keys (keeps typos out of call sites). */
+export const SpanAttributes = {
+    COMPONENT_NAME: "ui.component.name",
+    COMPONENT_VARIANT: "ui.component.variant",
+    COMPONENT_STATE: "ui.component.state",
+    EVENT_NAME: "ui.event.name",
+    EVENT_OUTCOME: "ui.event.outcome",
+    CORRELATION_ID: "ui.correlation_id",
+};
+/**
+ * Create a `ComponentTracer` bound to `componentName`.
+ *
+ * @param componentName  PascalCase component name, e.g. "Button"
+ * @param defaultAttrs   Attributes applied to every span from this tracer
+ */
+export function createComponentTracer(componentName, defaultAttrs = {}) {
+    const otel = trace.getTracer(INSTRUMENTATION_NAME);
+    const correlationId = generateCorrelationId();
+    function baseAttributes(attrs = {}) {
+        const merged = {};
+        // Merge default extras first, then caller-provided extras so they can override; reserved keys below always win.
+        if (defaultAttrs.extra)
+            Object.assign(merged, defaultAttrs.extra);
+        if (attrs.extra)
+            Object.assign(merged, attrs.extra);
+        // Enforce required convention attributes last.
+        merged[SpanAttributes.COMPONENT_NAME] = componentName;
+        merged[SpanAttributes.CORRELATION_ID] = correlationId;
+        const variant = attrs.variant ?? defaultAttrs.variant;
+        const state = attrs.state ?? defaultAttrs.state;
+        if (variant !== undefined)
+            merged[SpanAttributes.COMPONENT_VARIANT] = variant;
+        if (state !== undefined)
+            merged[SpanAttributes.COMPONENT_STATE] = state;
+        return merged;
+    }
+    return {
+        otel,
+        correlationId,
+        recordInteraction(eventName, outcome, attrs = {}) {
+            if (!shouldSample())
+                return;
+            const span = otel.startSpan(`${componentName}.${eventName}`, {
+                attributes: {
+                    ...baseAttributes(attrs),
+                    [SpanAttributes.EVENT_NAME]: eventName,
+                    [SpanAttributes.EVENT_OUTCOME]: outcome,
+                },
+            });
+            if (outcome === "error") {
+                span.setStatus({ code: SpanStatusCode.ERROR });
+            }
+            span.end();
+        },
+        startInteractionSpan(eventName, attrs = {}) {
+            if (!shouldSample()) {
+                // Return a non-recording span so no span is emitted regardless of SDK.
+                const noopSpan = trace.wrapSpanContext(INVALID_SPAN_CONTEXT);
+                return { span: noopSpan, finish: () => { } };
+            }
+            const span = otel.startSpan(`${componentName}.${eventName}`, {
+                attributes: {
+                    ...baseAttributes(attrs),
+                    [SpanAttributes.EVENT_NAME]: eventName,
+                },
+            });
+            return {
+                span,
+                finish(outcome, error) {
+                    span.setAttribute(SpanAttributes.EVENT_OUTCOME, outcome);
+                    if (outcome === "error") {
+                        span.setStatus({
+                            code: SpanStatusCode.ERROR,
+                            message: error?.message,
+                        });
+                        if (error)
+                            span.recordException(error);
+                    }
+                    span.end();
+                },
+            };
+        },
+        startRenderSpan(attrs = {}) {
+            if (!shouldSample())
+                return () => { };
+            const span = otel.startSpan(`${componentName}.render`, {
+                attributes: baseAttributes(attrs),
+            });
+            return () => span.end();
+        },
+    };
+}

package/dist/tokens.css

@@ -0,0 +1,123 @@
+/*
+ * Pares Design Tokens
+ *
+ * The single source of truth for all visual values.
+ * No component should use raw values — only tokens.
+ */
+
+:root {
+  /* ===== Spacing (4px grid) ===== */
+  --space-0: 0px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --space-16: 64px;
+
+  /* ===== Typography (Major Third 1.25×) ===== */
+  --text-xs:   12px;
+  --text-sm:   14px;
+  --text-base: 16px;
+  --text-lg:   20px;
+  --text-xl:   24px;
+  --text-2xl:  30px;
+  --text-3xl:  36px;
+  --text-4xl:  48px;
+
+  --leading-tight:   1.25;
+  --leading-normal:  1.5;
+  --leading-relaxed: 1.625;
+
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", "Fira Code", monospace;
+
+  /* ===== Border Radius ===== */
+  --radius-sm:   6px;
+  --radius-md:   10px;
+  --radius-lg:   16px;
+  --radius-xl:   24px;
+  --radius-full: 9999px;
+
+  /* ===== Shadows / Elevation ===== */
+  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1);
+  --shadow-md:  0 4px 6px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.1);
+  --shadow-lg:  0 10px 25px rgba(0,0,0,0.1), 0 20px 48px rgba(0,0,0,0.15);
+
+  /* Elevation: 0 = flush, 1 = card, 2 = popover, 3 = modal */
+  --elevation-0: none;
+  --elevation-1: var(--shadow-sm);
+  --elevation-2: var(--shadow-md);
+  --elevation-3: var(--shadow-lg);
+
+  /* ===== Focus ring ===== */
+  --focus-ring-width:  3px;
+  --focus-ring-offset: 2px;
+
+  /* ===== Selection ===== */
+  --color-selection-bg:   rgba(99,102,241,0.35);
+  --color-selection-text: inherit;
+
+  /* ===== Alpha layers ===== */
+  --alpha-5:  rgba(255,255,255, 0.05);
+  --alpha-10: rgba(255,255,255, 0.10);
+  --alpha-20: rgba(255,255,255, 0.20);
+  --alpha-40: rgba(255,255,255, 0.40);
+}
+
+/* ===== Dark Theme (default) ===== */
+:root, [data-theme="dark"] {
+  --surface-0: #0a0a0a;
+  --surface-1: #141414;
+  --surface-2: #1e1e1e;
+  --surface-3: rgba(0,0,0,0.6);
+
+  --color-text:        #e8e8e8;
+  --color-text-muted:  #888888;
+  --color-text-subtle: #555555;
+  --color-accent:      #6366f1;
+  --color-accent-hover:#818cf8;
+  --color-success:     #22c55e;
+  --color-warning:     #f59e0b;
+  --color-danger:      #ef4444;
+  --color-info:        #3b82f6;
+  --color-border:      #2a2a2a;
+  --color-focus-ring:  #818cf8;
+}
+
+/* ===== Light Theme ===== */
+[data-theme="light"] {
+  --surface-0: #ffffff;
+  --surface-1: #f5f5f5;
+  --surface-2: #eeeeee;
+  --surface-3: rgba(0,0,0,0.3);
+
+  --color-text:        #1a1a1a;
+  --color-text-muted:  #666666;
+  --color-text-subtle: #999999;
+  --color-accent:      #4f46e5;
+  --color-accent-hover:#6366f1;
+  --color-success:     #16a34a;
+  --color-warning:     #d97706;
+  --color-danger:      #dc2626;
+  --color-info:        #2563eb;
+  --color-border:      #e0e0e0;
+  --color-focus-ring:  #4f46e5;
+}
+
+/* ===== Reduced Motion ===== */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ===== Selection ===== */
+::selection {
+  background: var(--color-selection-bg, rgba(99,102,241,0.35));
+  color: var(--color-selection-text, inherit);
+}