@brijbyte/agentic-ui 0.0.1 → 0.0.2

package/src/styles/layer-order.css

@@ -0,0 +1,22 @@
+/*
+ * @brijbyte/agentic-ui — CSS layer order declaration
+ *
+ * Import this ONCE, before any other stylesheet in your app entry.
+ * It establishes the cascade order so component styles always beat
+ * Tailwind preflight resets, and Tailwind utilities always beat components.
+ *
+ * If you use the full bundle (@brijbyte/agentic-ui/styles) or tokens.css,
+ * this is already included — you don't need to import it separately.
+ *
+ * Manual setup (without Tailwind):
+ *   @import "@brijbyte/agentic-ui/layer-order";
+ *   @import "@brijbyte/agentic-ui/tokens";
+ *   @import "@brijbyte/agentic-ui/reset";
+ *
+ * With Tailwind v4:
+ *   @import "tailwindcss";
+ *   @import "@brijbyte/agentic-ui/layer-order";  ← before tokens
+ *   @import "@brijbyte/agentic-ui/tokens";
+ */
+
+@layer theme, base, components, utilities;

package/src/styles/reset.css

@@ -21,8 +21,8 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-md);
     line-height: var(--line-height-normal);
-    color: var(--color-text-primary);
-    background-color: var(--color-bg-base);
+    color: var(--color-primary);
+    background-color: var(--color-canvas);
   }
 
   img,
@@ -66,13 +66,13 @@
     font-weight: var(--font-weight-semibold);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
   }
 
   /* Scrollbar styling */
   * {
     scrollbar-width: thin;
-    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
+    scrollbar-color: var(--color-thumb) var(--color-track);
   }
 
   *::-webkit-scrollbar {
@@ -81,11 +81,11 @@
   }
 
   *::-webkit-scrollbar-thumb {
-    background: var(--color-scrollbar-thumb);
+    background: var(--color-thumb);
     border-radius: var(--radius-full);
   }
 
   *::-webkit-scrollbar-track {
-    background: var(--color-scrollbar-track);
+    background: var(--color-track);
   }
 }

package/src/styles/tailwind-theme.css

@@ -14,9 +14,9 @@
  * overrides work automatically without any Tailwind configuration.
  *
  * Generated utility examples:
- *   bg-bg-base        → background-color: var(--color-bg-base)
- *   text-text-primary → color: var(--color-text-primary)
- *   border-border-base→ border-color: var(--color-border-base)
+ *   bg-canvas         → background-color: var(--color-canvas)
+ *   text-primary      → color: var(--color-primary)
+ *   border-line       → border-color: var(--color-line)
  *   font-mono         → font-family: var(--font-mono)
  *   rounded-md        → border-radius: var(--radius-md)
  *   shadow-sm         → box-shadow: var(--shadow-sm)
@@ -24,34 +24,34 @@
 
 @theme inline {
   /* ── Backgrounds ────────────────────────────────────────────── */
-  --color-bg-base: var(--color-bg-base);
-  --color-bg-elevated: var(--color-bg-elevated);
-  --color-bg-sunken: var(--color-bg-sunken);
-  --color-bg-overlay: var(--color-bg-overlay);
-  --color-bg-sidebar: var(--color-bg-sidebar);
+  --color-canvas: var(--color-canvas);
+  --color-elevated: var(--color-elevated);
+  --color-sunken: var(--color-sunken);
+  --color-overlay: var(--color-overlay);
+  --color-sidebar: var(--color-sidebar);
 
   /* ── Surfaces ───────────────────────────────────────────────── */
   --color-surface-1: var(--color-surface-1);
   --color-surface-2: var(--color-surface-2);
   --color-surface-3: var(--color-surface-3);
-  --color-surface-hover: var(--color-surface-hover);
-  --color-surface-active: var(--color-surface-active);
-  --color-surface-selected: var(--color-surface-selected);
+  --color-hover: var(--color-hover);
+  --color-active: var(--color-active);
+  --color-selected: var(--color-selected);
 
   /* ── Text ───────────────────────────────────────────────────── */
-  --color-text-primary: var(--color-text-primary);
-  --color-text-secondary: var(--color-text-secondary);
-  --color-text-tertiary: var(--color-text-tertiary);
-  --color-text-disabled: var(--color-text-disabled);
-  --color-text-inverse: var(--color-text-inverse);
-  --color-text-on-accent: var(--color-text-on-accent);
-  --color-text-code: var(--color-text-code);
+  --color-primary: var(--color-primary);
+  --color-secondary: var(--color-secondary);
+  --color-tertiary: var(--color-tertiary);
+  --color-disabled: var(--color-disabled);
+  --color-inverse: var(--color-inverse);
+  --color-on-accent: var(--color-on-accent);
+  --color-code: var(--color-code);
 
   /* ── Borders ────────────────────────────────────────────────── */
-  --color-border-base: var(--color-border-base);
-  --color-border-strong: var(--color-border-strong);
-  --color-border-subtle: var(--color-border-subtle);
-  --color-border-focus: var(--color-border-focus);
+  --color-line: var(--color-line);
+  --color-line-strong: var(--color-line-strong);
+  --color-line-subtle: var(--color-line-subtle);
+  --color-line-focus: var(--color-line-focus);
 
   /* ── Accent (macOS blue) ────────────────────────────────────── */
   --color-accent: var(--color-accent);
@@ -85,7 +85,7 @@
   --color-info-solid: var(--color-info-solid);
 
   /* ── Code syntax ────────────────────────────────────────────── */
-  --color-code-bg: var(--color-code-bg);
+  --color-code-canvas: var(--color-code-canvas);
   --color-code-border: var(--color-code-border);
   --color-code-keyword: var(--color-code-keyword);
   --color-code-string: var(--color-code-string);

package/src/styles/tokens.css

@@ -1,10 +1,14 @@
 /**
  * @brijbyte/agentic-ui — Design Tokens
  *
- * macOS/iOS-inspired developer-focused design system.
+ * developer-focused design system, loosely inspired by native desktop and mobile UI.
  * Monospace-first, semantic color tokens, supports light & dark modes.
  */
-@layer base {
+
+/* Establish layer order — must come before any @layer usage */
+@layer theme, base, components, utilities;
+
+@layer theme {
   :root {
     /* ─── Typography ──────────────────────────────────────────────── */
     /*
@@ -125,35 +129,35 @@
   [data-theme="light"] {
     color-scheme: light;
 
-    /* Background layers (macOS vibrancy-inspired) */
-    --color-bg-base: #f5f5f5;
-    --color-bg-elevated: #ffffff;
-    --color-bg-sunken: #ebebeb;
-    --color-bg-overlay: rgba(255, 255, 255, 0.92);
-    --color-bg-sidebar: rgba(246, 246, 246, 0.95);
+    /* Background layers (inspired by system vibrancy) */
+    --color-canvas: #f0eff0;
+    --color-elevated: #fafafa;
+    --color-sunken: #e8e7e8;
+    --color-overlay: rgba(250, 250, 250, 0.92);
+    --color-sidebar: rgba(244, 243, 244, 0.96);
 
     /* Surface (card/panel backgrounds) */
-    --color-surface-1: #ffffff;
-    --color-surface-2: #f9f9f9;
-    --color-surface-3: #f4f4f4;
-    --color-surface-hover: rgba(0, 0, 0, 0.04);
-    --color-surface-active: rgba(0, 0, 0, 0.07);
-    --color-surface-selected: rgba(0, 120, 212, 0.1);
+    --color-surface-1: #fafafa;
+    --color-surface-2: #f4f3f4;
+    --color-surface-3: #eeeded;
+    --color-hover: rgba(0, 0, 0, 0.04);
+    --color-active: rgba(0, 0, 0, 0.07);
+    --color-selected: rgba(0, 120, 212, 0.1);
 
     /* Text */
-    --color-text-primary: rgba(0, 0, 0, 0.88);
-    --color-text-secondary: rgba(0, 0, 0, 0.55);
-    --color-text-tertiary: rgba(0, 0, 0, 0.36);
-    --color-text-disabled: rgba(0, 0, 0, 0.24);
-    --color-text-inverse: rgba(255, 255, 255, 0.95);
-    --color-text-on-accent: #ffffff;
-    --color-text-code: #0f766e;
+    --color-primary: rgba(0, 0, 0, 0.88);
+    --color-secondary: rgba(0, 0, 0, 0.55);
+    --color-tertiary: rgba(0, 0, 0, 0.36);
+    --color-disabled: rgba(0, 0, 0, 0.24);
+    --color-inverse: rgba(255, 255, 255, 0.95);
+    --color-on-accent: #ffffff;
+    --color-code: #0f766e;
 
     /* Borders */
-    --color-border-base: rgba(0, 0, 0, 0.12);
-    --color-border-strong: rgba(0, 0, 0, 0.22);
-    --color-border-subtle: rgba(0, 0, 0, 0.06);
-    --color-border-focus: var(--color-focus-ring);
+    --color-line: rgba(0, 0, 0, 0.12);
+    --color-line-strong: rgba(0, 0, 0, 0.22);
+    --color-line-subtle: rgba(0, 0, 0, 0.06);
+    --color-line-focus: var(--color-focus-ring);
 
     /* Accent — macOS blue
      * Semantic names instead of opaque Radix-style numbers:
@@ -181,7 +185,7 @@
     --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.16), 0 2px 6px -2px rgb(0 0 0 / 0.1);
     --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.12);
     --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.08);
-    --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
 
     /* Status — Success */
     --color-success-bg: #f0fdf4;
@@ -208,7 +212,7 @@
     --color-info-solid: #2563eb;
 
     /* Code / terminal palette */
-    --color-code-bg: #f6f8fa;
+    --color-code-canvas: #f6f8fa;
     --color-code-border: #d0d7de;
     --color-code-comment: #6e7781;
     --color-code-keyword: #cf222e;
@@ -217,8 +221,8 @@
     --color-code-function: #8250df;
 
     /* Scrollbar */
-    --color-scrollbar-thumb: rgba(0, 0, 0, 0.2);
-    --color-scrollbar-track: transparent;
+    --color-thumb: rgba(0, 0, 0, 0.2);
+    --color-track: transparent;
   }
 
   /* ═══════════════════════════════════════════════════════════════════
@@ -232,33 +236,33 @@
       color-scheme: dark;
 
       /* Background */
-      --color-bg-base: #1c1c1e;
-      --color-bg-elevated: #2c2c2e;
-      --color-bg-sunken: #141416;
-      --color-bg-overlay: rgba(30, 30, 32, 0.92);
-      --color-bg-sidebar: rgba(28, 28, 30, 0.95);
+      --color-canvas: #1c1c1e;
+      --color-elevated: #2c2c2e;
+      --color-sunken: #141416;
+      --color-overlay: rgba(30, 30, 32, 0.92);
+      --color-sidebar: rgba(28, 28, 30, 0.95);
 
       /* Surface */
       --color-surface-1: #2c2c2e;
       --color-surface-2: #3a3a3c;
       --color-surface-3: #48484a;
-      --color-surface-hover: rgba(255, 255, 255, 0.06);
-      --color-surface-active: rgba(255, 255, 255, 0.1);
-      --color-surface-selected: rgba(10, 132, 255, 0.16);
+      --color-hover: rgba(255, 255, 255, 0.06);
+      --color-active: rgba(255, 255, 255, 0.1);
+      --color-selected: rgba(10, 132, 255, 0.16);
 
       /* Text */
-      --color-text-primary: rgba(255, 255, 255, 0.92);
-      --color-text-secondary: rgba(255, 255, 255, 0.55);
-      --color-text-tertiary: rgba(255, 255, 255, 0.36);
-      --color-text-disabled: rgba(255, 255, 255, 0.24);
-      --color-text-inverse: rgba(0, 0, 0, 0.88);
-      --color-text-on-accent: #ffffff;
-      --color-text-code: #2dd4bf;
+      --color-primary: rgba(255, 255, 255, 0.92);
+      --color-secondary: rgba(255, 255, 255, 0.55);
+      --color-tertiary: rgba(255, 255, 255, 0.36);
+      --color-disabled: rgba(255, 255, 255, 0.24);
+      --color-inverse: rgba(0, 0, 0, 0.88);
+      --color-on-accent: #ffffff;
+      --color-code: #2dd4bf;
 
       /* Borders */
-      --color-border-base: rgba(255, 255, 255, 0.12);
-      --color-border-strong: rgba(255, 255, 255, 0.22);
-      --color-border-subtle: rgba(255, 255, 255, 0.06);
+      --color-line: rgba(255, 255, 255, 0.12);
+      --color-line-strong: rgba(255, 255, 255, 0.22);
+      --color-line-subtle: rgba(255, 255, 255, 0.06);
 
       /* Accent — macOS blue dark */
       --color-accent: #0a84ff;
@@ -279,7 +283,7 @@
       --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
       --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.4);
       --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.3);
-      --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+      --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
 
       /* Status — Success */
       --color-success-bg: rgba(22, 163, 74, 0.12);
@@ -306,7 +310,7 @@
       --color-info-solid: #3b82f6;
 
       /* Code / terminal palette */
-      --color-code-bg: #161b22;
+      --color-code-canvas: #161b22;
       --color-code-border: rgba(255, 255, 255, 0.1);
       --color-code-comment: #8b949e;
       --color-code-keyword: #ff7b72;
@@ -315,38 +319,38 @@
       --color-code-function: #d2a8ff;
 
       /* Scrollbar */
-      --color-scrollbar-thumb: rgba(255, 255, 255, 0.2);
-      --color-scrollbar-track: transparent;
+      --color-thumb: rgba(255, 255, 255, 0.2);
+      --color-track: transparent;
     }
   }
 
   [data-theme="dark"] {
     color-scheme: dark;
 
-    --color-bg-base: #1c1c1e;
-    --color-bg-elevated: #2c2c2e;
-    --color-bg-sunken: #141416;
-    --color-bg-overlay: rgba(30, 30, 32, 0.92);
-    --color-bg-sidebar: rgba(28, 28, 30, 0.95);
+    --color-canvas: #1c1c1e;
+    --color-elevated: #2c2c2e;
+    --color-sunken: #141416;
+    --color-overlay: rgba(30, 30, 32, 0.92);
+    --color-sidebar: rgba(28, 28, 30, 0.95);
 
     --color-surface-1: #2c2c2e;
     --color-surface-2: #3a3a3c;
     --color-surface-3: #48484a;
-    --color-surface-hover: rgba(255, 255, 255, 0.06);
-    --color-surface-active: rgba(255, 255, 255, 0.1);
-    --color-surface-selected: rgba(10, 132, 255, 0.16);
-
-    --color-text-primary: rgba(255, 255, 255, 0.92);
-    --color-text-secondary: rgba(255, 255, 255, 0.55);
-    --color-text-tertiary: rgba(255, 255, 255, 0.36);
-    --color-text-disabled: rgba(255, 255, 255, 0.24);
-    --color-text-inverse: rgba(0, 0, 0, 0.88);
-    --color-text-on-accent: #ffffff;
-    --color-text-code: #2dd4bf;
-
-    --color-border-base: rgba(255, 255, 255, 0.12);
-    --color-border-strong: rgba(255, 255, 255, 0.22);
-    --color-border-subtle: rgba(255, 255, 255, 0.06);
+    --color-hover: rgba(255, 255, 255, 0.06);
+    --color-active: rgba(255, 255, 255, 0.1);
+    --color-selected: rgba(10, 132, 255, 0.16);
+
+    --color-primary: rgba(255, 255, 255, 0.92);
+    --color-secondary: rgba(255, 255, 255, 0.55);
+    --color-tertiary: rgba(255, 255, 255, 0.36);
+    --color-disabled: rgba(255, 255, 255, 0.24);
+    --color-inverse: rgba(0, 0, 0, 0.88);
+    --color-on-accent: #ffffff;
+    --color-code: #2dd4bf;
+
+    --color-line: rgba(255, 255, 255, 0.12);
+    --color-line-strong: rgba(255, 255, 255, 0.22);
+    --color-line-subtle: rgba(255, 255, 255, 0.06);
 
     --color-accent: #0a84ff;
     --color-accent-hover: #0071e3;
@@ -364,7 +368,7 @@
     --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
     --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.4);
     --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.3);
-    --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
 
     --color-success-bg: rgba(22, 163, 74, 0.12);
     --color-success-border: rgba(22, 163, 74, 0.3);
@@ -386,7 +390,7 @@
     --color-info-text: #60a5fa;
     --color-info-solid: #3b82f6;
 
-    --color-code-bg: #161b22;
+    --color-code-canvas: #161b22;
     --color-code-border: rgba(255, 255, 255, 0.1);
     --color-code-comment: #8b949e;
     --color-code-keyword: #ff7b72;
@@ -394,7 +398,7 @@
     --color-code-number: #79c0ff;
     --color-code-function: #d2a8ff;
 
-    --color-scrollbar-thumb: rgba(255, 255, 255, 0.2);
-    --color-scrollbar-track: transparent;
+    --color-thumb: rgba(255, 255, 255, 0.2);
+    --color-track: transparent;
   }
 }

package/src/switch/switch.module.css

@@ -1,5 +1,3 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .root {
     display: flex;
@@ -8,19 +6,17 @@
     cursor: pointer;
     user-select: none;
   }
-
   .root[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   .thumb-track {
     position: relative;
     width: 36px;
     height: 20px;
     border-radius: var(--radius-full);
     background-color: var(--color-surface-3);
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     transition:
       background-color var(--duration-normal) var(--easing-standard),
       border-color var(--duration-normal) var(--easing-standard),
@@ -28,21 +24,17 @@
     outline: none;
     flex-shrink: 0;
   }
-
   .thumb-track:focus-visible {
     box-shadow: var(--shadow-focus);
   }
-
   .thumb-track[data-checked] {
     background-color: var(--color-accent);
     border-color: var(--color-accent);
   }
-
   .thumb-track[data-checked]:hover {
     background-color: var(--color-accent-hover);
     border-color: var(--color-accent-hover);
   }
-
   .thumb {
     position: absolute;
     top: 2px;
@@ -54,14 +46,12 @@
     box-shadow: var(--shadow-xs);
     transition: transform var(--duration-normal) var(--easing-spring);
   }
-
   .thumb-track[data-checked] .thumb {
     transform: translateX(16px);
   }
-
   .label {
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
   }
 }

package/src/tabs/tabs.module.css

@@ -1,26 +1,21 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .root {
     display: flex;
     flex-direction: column;
     gap: 0;
   }
-
   /* ─── Tab List ──────────────────────────────────────── */
   .list {
     display: flex;
     align-items: center;
     gap: var(--space-px);
-    border-bottom: var(--border-width-base) solid var(--color-border-base);
+    border-bottom: var(--border-width-base) solid var(--color-line);
     overflow-x: auto;
     scrollbar-width: none;
   }
-
   .list::-webkit-scrollbar {
     display: none;
   }
-
   /* ─── Tab trigger ────────────────────────────────────── */
   .tab {
     display: inline-flex;
@@ -30,7 +25,7 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-regular);
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     border: none;
     background: none;
     cursor: pointer;
@@ -44,16 +39,13 @@
       border-color var(--duration-fast) var(--easing-standard);
     user-select: none;
   }
-
   .tab:hover:not([data-disabled]) {
-    color: var(--color-text-primary);
-    border-bottom-color: var(--color-border-strong);
+    color: var(--color-primary);
+    border-bottom-color: var(--color-line-strong);
   }
-
   .tab:focus-visible {
     outline: none;
   }
-
   .tab:focus-visible::after {
     content: "";
     position: absolute;
@@ -62,29 +54,24 @@
     box-shadow: var(--shadow-focus);
     pointer-events: none;
   }
-
   .tab[data-active] {
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     font-weight: var(--font-weight-medium);
     border-bottom-color: var(--color-accent);
   }
-
   .tab[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   /* ─── Tab panel ─────────────────────────────────────── */
   .panel {
     padding-top: var(--space-4);
     outline: none;
     transition: opacity 150ms var(--easing-ease-out);
   }
-
   .panel[data-starting-style] {
     opacity: 0;
   }
-
   .panel:focus-visible {
     box-shadow: var(--shadow-focus);
     border-radius: var(--radius-sm);