@stephen-netu/design-system 0.1.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,25 @@
+PROPRIETARY LICENSE
+
+Copyright (c) 2026 Netu. All Rights Reserved.
+
+This software and associated documentation files (the "Software") are the 
+exclusive property of Netu. The Software contains confidential and proprietary
+information protected by intellectual property laws and international treaties.
+
+UNAUTHORIZED ACCESS, USE, REPRODUCTION, MODIFICATION, DISTRIBUTION, OR 
+DISCLOSURE OF THIS SOFTWARE IS STRICTLY PROHIBITED.
+
+No license, express or implied, is granted to any person or entity to access,
+use, copy, modify, merge, publish, distribute, sublicense, create derivative
+works from, or exploit in any manner the Software or any portion thereof.
+
+This Software is provided "AS IS" without warranty of any kind, express or
+implied, including but not limited to the warranties of merchantability,
+fitness for a particular purpose and noninfringement.
+
+Violation of this license may result in civil and criminal penalties under
+applicable laws.
+
+For licensing inquiries, contact: Netu
+
+Future open source release is planned but not yet available.

package/README.md

@@ -1,6 +1,6 @@
 # @kos/design-system
 
-KOS LEAP Design System — Legendary UI components with brass/copper aesthetic.
+Svelte 5 component library and design token system for KOS applications. Published to npm as both `@kos/design-system` and `@stephen-netu/design-system`.
 
 ## Installation
 
@@ -26,7 +26,7 @@ import '@kos/design-system/tokens/control-room.css';
 
 ## Design Tokens
 
-All values are CSS custom properties:
+All values are defined as CSS custom properties:
 
 ```css
 /* Colors */
@@ -46,20 +46,59 @@ All values are CSS custom properties:
 --space-4: 1rem;
 ```
 
+Theme variants (e.g. `control-room.css`) layer on top of the base tokens.
+
 ## Architecture
 
-- **p0-primitives**: Types, tokens, utilities
-- **u0-primitives**: Atoms (Button, Input, Card, Badge, Avatar, Toggle, etc.)
-- **l0-layout**: Molecules/Organisms (KanbanViewLayout, GroveCard, etc.)
-- **f0-forms**: Form components (FormField, Select, TextArea)
-- **s0-state**: Svelte 5 rune wrappers
-- **t0-transport**: Tauri IPC utilities
-- **d0-data-viz**: Data visualization (BarChart, MetricCard)
-- **n0-node-graph**: Node graph components (NodeCanvas, GraphEditor)
-- **n1-flow-canvas**: Canvas 2D flow editor
-- **n2-manifold-disk**: Poincare disk projection
-- **n3-force-graph**: Force-directed graph layout
-- **n4-adaptive-manifold**: Adaptive manifold visualization
+Components are organized into layered domains:
+
+| Layer | Scope |
+|-------|-------|
+| `p0-primitives` | Types, tokens, utilities |
+| `u0-primitives` | Atoms: Button, Input, Card, Badge, Avatar, Toggle |
+| `l0-layout` | Molecules/Organisms: KanbanViewLayout, GroveCard |
+| `f0-forms` | Form components: FormField, Select, TextArea |
+| `s0-state` | Svelte 5 rune wrappers |
+| `t0-transport` | Tauri IPC utilities |
+| `d0-data-viz` | Data visualization: BarChart, MetricCard |
+| `n0-node-graph` | Node graph components: NodeCanvas, GraphEditor |
+| `n1-flow-canvas` | Canvas 2D flow editor |
+| `n2-manifold-disk` | Poincare disk projection |
+| `n3-force-graph` | Force-directed graph layout |
+| `n4-adaptive-manifold` | Adaptive manifold visualization |
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run Storybook
+pnpm storybook
+
+# Build library
+pnpm build
+
+# Run tests
+pnpm test
+```
+
+## Versioning
+
+Uses [@changesets/cli](https://github.com/changesets/changesets) for versioning and changelog generation.
+
+## Releasing
+
+```bash
+pnpm changeset version
+pnpm changeset publish
+```
+
+## Contributing
+
+1. Create a changeset for your changes: `pnpm changeset`
+2. Ensure `.githooks` are enabled (topology gate checks run on commit)
+3. Submit a PR with the changeset file included
 
 ## License
 

package/{src → dist}/b0-app-shell/clarification-overlay/ClarificationOverlay.svelte

@@ -103,7 +103,7 @@
   .clarification-header {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
     padding: 10px 14px;
     border-bottom: 1px solid #3a3a3a;
   }
@@ -113,9 +113,9 @@
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: #b87333;
-    background: rgba(184, 115, 51, 0.15);
-    border: 1px solid rgba(184, 115, 51, 0.3);
+    color: var(--color-accent);
+    background: var(--color-accent-muted);
+    border: 1px solid var(--color-accent-muted);
     border-radius: 3px;
     padding: 2px 6px;
   }
@@ -158,7 +158,7 @@
   .context-hints {
     display: flex;
     flex-wrap: wrap;
-    gap: 6px;
+    gap: var(--space-15);
   }
 
   .hint-chip {
@@ -172,7 +172,7 @@
 
   .reply-area {
     display: flex;
-    gap: 8px;
+    gap: var(--space-2);
     align-items: flex-end;
   }
 
@@ -191,7 +191,7 @@
 
   .reply-input:focus {
     outline: none;
-    border-color: #b87333;
+    border-color: var(--color-accent);
   }
 
   .reply-input:disabled {
@@ -199,7 +199,7 @@
   }
 
   .submit-btn {
-    background: #b87333;
+    background: var(--color-accent);
     border: none;
     border-radius: 4px;
     color: #1a1a1a;

package/dist/b0-app-shell/clarification-overlay/ClarificationOverlay.svelte.d.ts

@@ -0,0 +1,19 @@
+/** Mirrors ClarificationSession from @kos/agent — kept local to avoid a design-system→agent dep. */
+interface ClarificationSession {
+    sessionId: string;
+    question: string;
+    contextHints: string[];
+    step: number;
+    totalSteps: number;
+    scaffoldKind: string;
+}
+interface Props {
+    session: ClarificationSession;
+    onSubmit: (reply: string) => void;
+    onDismiss: () => void;
+    submitting?: boolean;
+}
+declare const ClarificationOverlay: import("svelte").Component<Props, {}, "">;
+type ClarificationOverlay = ReturnType<typeof ClarificationOverlay>;
+export default ClarificationOverlay;
+//# sourceMappingURL=ClarificationOverlay.svelte.d.ts.map

package/dist/b0-app-shell/clarification-overlay/ClarificationOverlay.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClarificationOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/b0-app-shell/clarification-overlay/ClarificationOverlay.svelte.ts"],"names":[],"mappings":"AAGE,oGAAoG;AACpG,UAAU,oBAAoB;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,KAAK;IACb,OAAO,EAAE,oBAAoB,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA6DH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/b0-app-shell/clarification-overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ClarificationOverlay } from './ClarificationOverlay.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/b0-app-shell/clarification-overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/b0-app-shell/clarification-overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}

package/{src → dist}/b0-app-shell/command-bar/CommandBar.svelte

@@ -211,7 +211,7 @@
     height: 52px;
     width: 100%;
     background: #0a0a0a;
-    border-bottom: 1px solid rgba(184, 115, 51, 0.14);
+    border-bottom: 1px solid var(--color-accent-subtle);
     position: relative;
     overflow: visible;
     flex-shrink: 0;
@@ -243,11 +243,11 @@
     height: 1px;
     background: linear-gradient(
       90deg,
-      rgba(184, 115, 51, 0.5) 0%,
-      rgba(184, 115, 51, 0.0) 20%,
+      var(--color-accent-muted) 0%,
+      transparent 20%,
       transparent 50%,
-      rgba(184, 115, 51, 0.0) 80%,
-      rgba(184, 115, 51, 0.5) 100%
+      transparent 80%,
+      var(--color-accent-muted) 100%
     );
     pointer-events: none;
     z-index: 0;
@@ -261,7 +261,7 @@
 
   .cb-rule {
     width: 1px;
-    background: rgba(184, 115, 51, 0.12);
+    background: var(--color-accent-subtle);
     margin: 12px 0;
     z-index: 1;
   }
@@ -324,7 +324,7 @@
   .cb-phase__text {
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: var(--space-05);
   }
 
   .cb-phase__name {
@@ -350,7 +350,7 @@
   .cb-intent {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
     padding: 0 16px;
     position: relative;
     z-index: 1;
@@ -365,7 +365,7 @@
     left: 20px;
     right: 20px;
     height: 1px;
-    background: rgba(184, 115, 51, 0.45);
+    background: var(--color-accent-muted);
     transform: scaleX(0);
     transform-origin: center;
     transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
@@ -376,13 +376,13 @@
   }
 
   .cb-intent--focused {
-    background: rgba(184, 115, 51, 0.03);
+    background: var(--color-accent-faint);
   }
 
   .cb-intent__cursor {
     font-family: var(--font-mono);
     font-size: 13px;
-    color: rgba(184, 115, 51, 0.45);
+    color: var(--color-accent-muted);
     flex-shrink: 0;
     user-select: none;
     transition: color 0.15s, opacity 0.15s;
@@ -391,7 +391,7 @@
 
   .cb-intent--focused .cb-intent__cursor,
   .cb-intent--active .cb-intent__cursor {
-    color: #b87333;
+    color: var(--color-accent);
   }
 
   .cb-intent__input {
@@ -404,7 +404,7 @@
     font-size: 12px;
     color: var(--color-text-primary);
     padding: 0;
-    caret-color: #b87333;
+    caret-color: var(--color-accent);
   }
 
   .cb-intent__input::placeholder {
@@ -425,23 +425,23 @@
     width: 24px;
     height: 24px;
     background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(184, 115, 51, 0.28);
+    border: 1px solid var(--color-accent-glow);
     border-radius: var(--radius-sm, 3px);
-    color: rgba(184, 115, 51, 0.5);
+    color: var(--color-accent-muted);
     cursor: pointer;
     transition: all 0.12s;
   }
 
   .cb-intent__send--ready {
-    border-color: rgba(184, 115, 51, 0.45);
-    color: #b87333;
-    background: rgba(184, 115, 51, 0.08);
+    border-color: var(--color-accent-muted);
+    color: var(--color-accent);
+    background: var(--color-accent-subtle);
   }
 
   .cb-intent__send--ready:hover {
-    background: rgba(184, 115, 51, 0.16);
-    border-color: rgba(184, 115, 51, 0.65);
-    box-shadow: 0 0 8px rgba(184, 115, 51, 0.2);
+    background: var(--color-accent-muted);
+    border-color: var(--color-accent-muted);
+    box-shadow: 0 0 8px var(--color-accent-muted);
   }
 
   .cb-intent__send:disabled {
@@ -453,8 +453,8 @@
     display: inline-block;
     width: 10px;
     height: 10px;
-    border: 1.5px solid rgba(184, 115, 51, 0.2);
-    border-top-color: #b87333;
+    border: 1.5px solid var(--color-accent-muted);
+    border-top-color: var(--color-accent);
     border-radius: 50%;
     animation: cb-spin 0.65s linear infinite;
   }
@@ -482,7 +482,7 @@
     inset: 0;
     background: radial-gradient(
       ellipse 160% 120% at 110% 50%,
-      rgba(184, 115, 51, 0.07),
+      var(--color-accent-subtle),
       transparent 65%
     );
     pointer-events: none;
@@ -491,21 +491,21 @@
   .cb-spark__bar {
     display: flex;
     align-items: center;
-    gap: 2px;
+    gap: var(--space-05);
   }
 
   .cb-spark__seg {
     width: 4px;
     height: 11px;
     border-radius: var(--radius-xs, 1px);
-    background: rgba(184, 115, 51, 0.09);
+    background: var(--color-accent-subtle);
     transition: background 0.3s, box-shadow 0.3s;
     flex-shrink: 0;
   }
 
   .cb-spark__seg--on {
-    background: #b87333;
-    box-shadow: 0 0 3px rgba(184, 115, 51, 0.4);
+    background: var(--color-accent);
+    box-shadow: 0 0 3px var(--color-accent-muted);
   }
 
   /* Warning — amber shift */
@@ -536,7 +536,7 @@
   .cb-spark__val {
     font-size: 11px;
     font-weight: 600;
-    color: #b87333;
+    color: var(--color-accent);
     letter-spacing: 0.02em;
   }
 

package/dist/b0-app-shell/command-bar/CommandBar.svelte.d.ts

@@ -0,0 +1,35 @@
+/**
+ * CommandBar — The LEAP global command strip.
+ *
+ * Three zones, always in the same positions across every LEAP app:
+ *   LEFT  · FLOW PHASE — the system's current operational state
+ *   CENTER · INTENT    — the user's voice to the agent network
+ *   RIGHT  · SPARK     — available compute fuel
+ *
+ * Prop-driven: no store imports. Each app wires it to its own stores.
+ *
+ * Placement: top of every LEAP app shell, above app-specific navigation.
+ * Height: 52px fixed.
+ */
+interface Props {
+    /** Whether the daemon socket is connected. */
+    connected?: boolean;
+    /** Current FLOW phase string (e.g. "GO", "SPROUT", "FREEZE"). */
+    flowPhase?: string | null;
+    /** Remaining spark fuel units. Null when daemon is offline. */
+    sparkRemaining?: number | null;
+    /** Total spark fuel capacity. Null when daemon is offline. */
+    sparkTotal?: number | null;
+    /** Latest daemon sequence number — shown as secondary info in phase section. */
+    daemonSequence?: number | null;
+    /** REFLEX tick rate in ms — shown as secondary info. */
+    tickRateMs?: number | null;
+    /** True while an intent is being submitted. */
+    submitting?: boolean;
+    /** Called when the user submits an intent. */
+    onintent?: (text: string) => void;
+}
+declare const CommandBar: import("svelte").Component<Props, {}, "">;
+type CommandBar = ReturnType<typeof CommandBar>;
+export default CommandBar;
+//# sourceMappingURL=CommandBar.svelte.d.ts.map

package/dist/b0-app-shell/command-bar/CommandBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/b0-app-shell/command-bar/CommandBar.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;GAYG;AAEH,UAAU,KAAK;IACb,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkJH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/b0-app-shell/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * H0 App Shell — Global LEAP chrome components.
+ *
+ * H = Host/HUD. Free letter in both SOVEREIGN HDA domain assignments and
+ * existing DS prefixes (p/u/l/s/t/f/d/n). Replaces the prior a0- prefix
+ * which collided conceptually with SOVEREIGN's A=Axioms HDA domain.
+ *
+ * These components appear at the top of every LEAP app (Ryu, Atelier, Agora)
+ * and provide the shared control surface for system state, intent dispatch,
+ * and resource visibility. They are prop-driven (no store imports).
+ */
+export { default as CommandBar } from './command-bar/CommandBar.svelte';
+export { ClarificationOverlay } from './clarification-overlay/index';
+//# sourceMappingURL=index.d.ts.map

package/dist/b0-app-shell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/b0-app-shell/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}

package/{src/b0-app-shell/index.ts → dist/b0-app-shell/index.js}

@@ -9,6 +9,5 @@
  * and provide the shared control surface for system state, intent dispatch,
  * and resource visibility. They are prop-driven (no store imports).
  */
-
 export { default as CommandBar } from './command-bar/CommandBar.svelte';
 export { ClarificationOverlay } from './clarification-overlay/index';

package/dist/base.css

@@ -0,0 +1,138 @@
+/* @kos/design-system — Base styles */
+/* Reset, scrollbars, focus, selection, layout utilities */
+/* Component styles belong in their own .svelte files, not here */
+
+@import './p0-primitives/tokens/tokens.css';
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  background-color: var(--color-bg-app);
+  color: var(--color-text-primary);
+  color-scheme: dark;
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* --- Scrollbars --- */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-default);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
+}
+
+/* --- Focus Management --- */
+:focus-visible {
+  outline: 1px solid var(--color-accent);
+  outline-offset: 1px;
+}
+
+
+
+/* --- Selection --- */
+::selection {
+  background-color: var(--color-accent-subtle);
+  color: var(--color-accent-hover);
+}
+
+/* --- Layout Utilities ---
+   NOTE on visibility vs {#if} for persistent-state components:
+   - Use CSS visibility:hidden for lightweight toggleable chrome (toolbars, sidebars).
+     The component stays mounted; layout is preserved.
+   - Use {#if} conditional rendering for HEAVY stateful components (CodeMirror editors,
+     canvas renderers, maps). These_allocate significant DOM節點/memory; hidden trees
+     from 10+ editor instances cause unnecessary layout recalculation.
+   Rule of thumb: if the component creates >50 DOM nodes or holds GPU resources,
+   use {#if}. Otherwise visibility:hidden is fine. */
+.ds-stack { display: flex; flex-direction: column; }
+.ds-stack-1 { gap: var(--space-1); }
+.ds-stack-2 { gap: var(--space-2); }
+.ds-stack-3 { gap: var(--space-3); }
+.ds-stack-4 { gap: var(--space-4); }
+.ds-stack-5 { gap: var(--space-5); }
+.ds-stack-6 { gap: var(--space-6); }
+
+.ds-flex { display: flex; }
+.ds-flex-row { flex-direction: row; }
+.ds-flex-col { flex-direction: column; }
+.ds-items-center { align-items: center; }
+.ds-justify-between { justify-content: space-between; }
+.ds-justify-center { justify-content: center; }
+.ds-flex-wrap { flex-wrap: wrap; }
+
+.ds-grid { display: grid; }
+
+.ds-canvas-grid {
+  background-image:
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+.ds-canvas-dots {
+  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+/* --- Typography Utilities --- */
+/* NOTE: bare element selectors (h1-h6, p, code, pre, a) are intentional.
+   This library ships as global CSS; consumers opt in by importing base.css.
+   If scoped typography is needed, use the .ds-text-* utility classes instead. */
+
+.ds-text-h1 { font-size: var(--text-4xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
+.ds-text-h2 { font-size: var(--text-3xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
+.ds-text-h3 { font-size: var(--text-2xl); font-weight: 600; line-height: 1.3; }
+.ds-text-h4 { font-size: var(--text-xl); font-weight: 500; line-height: 1.4; }
+.ds-text-h5 { font-size: var(--text-lg); font-weight: 500; line-height: 1.4; }
+.ds-text-h6 { font-size: var(--text-base); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
+
+.ds-text-body { font-size: var(--text-base); line-height: 1.6; color: var(--color-text-secondary); }
+.ds-text-sm { font-size: var(--text-sm); }
+.ds-text-xs { font-size: var(--text-xs); }
+.ds-text-muted { color: var(--color-text-muted); }
+
+.ds-text-code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--color-bg-panel-elevated);
+  padding: 0.2em 0.4em;
+  color: var(--color-accent-hover);
+}
+
+/* --- Accessibility --- */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/{src → dist}/d0-data-viz/BarChart.svelte

@@ -209,7 +209,7 @@
   }
 
   .d0-grid-line {
-    stroke: var(--d0-chart-grid, rgba(184, 115, 51, 0.1));
+    stroke: var(--d0-chart-grid, var(--color-accent-subtle));
     stroke-width: 1;
   }
 
@@ -220,7 +220,7 @@
   }
 
   .d0-bar {
-    fill: var(--d0-chart-accent, #b87333);
+    fill: var(--d0-chart-accent, var(--color-accent));
     transition: opacity 150ms ease;
   }
 

package/dist/d0-data-viz/BarChart.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { DataSeries } from './types';
+interface BarChartProps {
+    series: DataSeries[];
+    width?: number;
+    height?: number;
+    orientation?: 'vertical' | 'horizontal';
+    showLabels?: boolean;
+    showGrid?: boolean;
+}
+declare const BarChart: import("svelte").Component<BarChartProps, {}, "">;
+type BarChart = ReturnType<typeof BarChart>;
+export default BarChart;
+//# sourceMappingURL=BarChart.svelte.d.ts.map

package/dist/d0-data-viz/BarChart.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.svelte.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/BarChart.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGxC,UAAU,aAAa;IACrB,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6IH,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}