@brijbyte/agentic-ui 0.0.1 → 0.0.3

package/dist/toast/toast.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import { Toast } from "@base-ui/react/toast";
 import styles from "./toast.module.css";
 

package/dist/toast/toast.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.module.js","names":[],"sources":["../../src/toast/toast.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  /* ─── Viewport ───────────────────────────────────────────────────── */\n\n  .viewport {\n    position: fixed;\n    bottom: var(--space-4);\n    right: var(--space-4);\n    z-index: var(--z-toast);\n    display: flex;\n    flex-direction: column;\n    width: 360px;\n    max-width: calc(100vw - var(--space-8));\n    list-style: none;\n    pointer-events: none;\n    outline: none;\n  }\n\n  /* List variant — toasts sit in a normal column */\n  .viewport-list {\n    gap: var(--space-2);\n  }\n\n  /* Stacked variant — toasts overlap; viewport height = frontmost toast */\n  .viewport-stacked {\n    gap: 0;\n  }\n\n  /* ─── Toast base ─────────────────────────────────────────────────── */\n\n  .toast {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--space-3);\n    padding: var(--space-3) var(--space-4);\n    background-color: var(--color-bg-overlay);\n    border: var(--border-width-base) solid var(--color-border-base);\n    border-radius: var(--radius-xl);\n    box-shadow: var(--shadow-popover);\n    pointer-events: auto;\n    cursor: default;\n    width: 100%;\n  }\n\n  @supports (backdrop-filter: blur(12px)) {\n    .toast {\n      backdrop-filter: blur(12px) saturate(1.5);\n      -webkit-backdrop-filter: blur(12px) saturate(1.5);\n    }\n  }\n\n  /* ─── List mode animations ───────────────────────────────────────── */\n\n  .viewport-list .toast {\n    transform-origin: bottom right;\n    opacity: 1;\n    transform: translateX(0);\n    transition:\n      opacity 300ms var(--easing-ease-out),\n      transform 300ms var(--easing-spring);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateX(calc(100% + var(--space-4)));\n    }\n  }\n\n  .viewport-list .toast[data-ending-style] {\n    opacity: 0;\n    transform: translateX(calc(100% + var(--space-4)));\n    transition:\n      opacity 200ms var(--easing-ease-in),\n      transform 200ms var(--easing-ease-in);\n  }\n\n  /* ─── Stacked mode ───────────────────────────────────────────────── */\n\n  /*\n   * Base UI provides on each toast root (as inline styles):\n   *   --toast-index   : plain integer, 0 = frontmost/newest\n   *   --toast-offset-y: \"Npx\" — cumulative height of all toasts above\n   *   --toast-height  : \"Npx\" — this toast's measured height\n   *\n   * Base UI provides on the viewport:\n   *   --toast-frontmost-height: \"Npx\" — height of index-0 toast\n   *\n   * Collapsed: toasts sit at bottom:0, stacked via scale+translate.\n   * Expanded (data-expanded): each toast moves to its offset position.\n   */\n\n  .viewport-stacked {\n    height: calc(var(--toast-frontmost-height, 64px) + 20px);\n    padding-top: 20px;\n    box-sizing: content-box;\n    clip-path: inset(0 0 0 0 round var(--radius-xl));\n    transition:\n      clip-path 200ms var(--easing-ease-out),\n      height 200ms var(--easing-ease-out);\n  }\n\n  .viewport-stacked[data-expanded] {\n    clip-path: inset(-9999px 0 0 0 round var(--radius-xl));\n    height: calc(var(--toast-frontmost-height, 64px) + 20px);\n  }\n\n  /* Fill the gaps between expanded toasts so the mouse doesn't leave\n     the viewport as it moves between them, which would collapse the stack */\n  .viewport-stacked[data-expanded]::after {\n    content: \"\";\n    position: absolute;\n    inset: -9999px 0 0 0;\n    pointer-events: auto;\n    z-index: 0;\n  }\n\n  .toast-stacked {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n\n    z-index: calc(50 - var(--toast-index));\n\n    transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * 0.04));\n    transform-origin: bottom center;\n    opacity: calc(1 - var(--toast-index) * 0.15);\n\n    transition:\n      transform 200ms var(--easing-ease-out),\n      opacity 200ms var(--easing-ease-out);\n  }\n\n  /* Expanded: each toast animates to its stacked position with a gap */\n  .viewport-stacked[data-expanded] .toast-stacked {\n    transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  /* Enter: new toast slides up from below */\n  .viewport-stacked .toast-stacked {\n    @starting-style {\n      opacity: 0;\n      transform: translateY(16px) scale(calc(1 - var(--toast-index) * 0.04));\n    }\n  }\n\n  /* Exit: dismissed toast slides right */\n  .viewport-stacked .toast-stacked[data-ending-style] {\n    opacity: 0;\n    transform: translateX(calc(100% + var(--space-4)));\n    transition:\n      opacity 150ms var(--easing-ease-in),\n      transform 150ms var(--easing-ease-in);\n  }\n\n  /* ─── Variant tints ──────────────────────────────────────────────── */\n\n  .toast-success {\n    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-bg-overlay));\n  }\n\n  .toast-error {\n    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-bg-overlay));\n  }\n\n  .toast-warning {\n    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-bg-overlay));\n  }\n\n  .toast-info {\n    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-bg-overlay));\n  }\n\n  /* ─── Icon ───────────────────────────────────────────────────────── */\n\n  .icon {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    margin-top: 1px;\n  }\n\n  .icon-success {\n    color: var(--color-success-solid);\n  }\n  .icon-warning {\n    color: var(--color-warning-solid);\n  }\n  .icon-error {\n    color: var(--color-error-solid);\n  }\n  .icon-info {\n    color: var(--color-info-solid);\n  }\n\n  /* ─── Content ────────────────────────────────────────────────────── */\n\n  .content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5);\n    min-width: 0;\n  }\n\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-text-primary);\n    line-height: var(--line-height-normal);\n  }\n\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-text-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n\n  /* ─── Close button ───────────────────────────────────────────────── */\n\n  .close {\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-text-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n    margin-top: 1px;\n  }\n\n  .close:hover {\n    background-color: var(--color-surface-hover);\n    color: var(--color-text-primary);\n  }\n\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n}\n"],"mappings":";AAoCA,IAAA,uBAAe;CAAA,SAAO;CAAe,WAAQ;CAAA,eAAA;CAAA,QAAA;CAAA,cAAA;CAAA,aAAA;CAAA,gBAAA;CAAA,gBAAA;CAAA,SAAA;CAAA,SAAA;CAAA,eAAA;CAAA,cAAA;CAAA,iBAAA;CAAA,iBAAA;CAAA,iBAAA;CAAA,YAAA;CAAA,iBAAA;CAAA,oBAAA;CAAA"}
+{"version":3,"file":"toast.module.js","names":[],"sources":["../../src/toast/toast.module.css"],"sourcesContent":["@layer components {\n  /* ─── Viewport ───────────────────────────────────────────────────── */\n  .viewport {\n    position: fixed;\n    bottom: var(--space-4);\n    right: var(--space-4);\n    z-index: var(--z-toast);\n    display: flex;\n    flex-direction: column;\n    width: 360px;\n    max-width: calc(100vw - var(--space-8));\n    list-style: none;\n    pointer-events: none;\n    outline: none;\n  }\n  /* List variant — toasts sit in a normal column */\n  .viewport-list {\n    gap: var(--space-2);\n  }\n  /* Stacked variant — toasts overlap; viewport height = frontmost toast */\n  .viewport-stacked {\n    gap: 0;\n  }\n  /* ─── Toast base ─────────────────────────────────────────────────── */\n  .toast {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--space-3);\n    padding: var(--space-3) var(--space-4);\n    background-color: var(--color-overlay);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-xl);\n    box-shadow: var(--shadow-popover);\n    pointer-events: auto;\n    cursor: default;\n    width: 100%;\n  }\n  @supports (backdrop-filter: blur(12px)) {\n    .toast {\n      backdrop-filter: blur(12px) saturate(1.5);\n      -webkit-backdrop-filter: blur(12px) saturate(1.5);\n    }\n  }\n  /* ─── List mode animations ───────────────────────────────────────── */\n  .viewport-list .toast {\n    transform-origin: bottom right;\n    opacity: 1;\n    transform: translateX(0);\n    transition:\n      opacity 300ms var(--easing-ease-out),\n      transform 300ms var(--easing-spring);\n    @starting-style {\n      opacity: 0;\n      transform: translateX(calc(100% + var(--space-4)));\n    }\n  }\n  .viewport-list .toast[data-ending-style] {\n    opacity: 0;\n    transform: translateX(calc(100% + var(--space-4)));\n    transition:\n      opacity 200ms var(--easing-ease-in),\n      transform 200ms var(--easing-ease-in);\n  }\n  /* ─── Stacked mode ───────────────────────────────────────────────── */\n  /*\n   * Base UI provides on each toast root (as inline styles):\n   *   --toast-index   : plain integer, 0 = frontmost/newest\n   *   --toast-offset-y: \"Npx\" — cumulative height of all toasts above\n   *   --toast-height  : \"Npx\" — this toast's measured height\n   *\n   * Base UI provides on the viewport:\n   *   --toast-frontmost-height: \"Npx\" — height of index-0 toast\n   *\n   * Collapsed: toasts sit at bottom:0, stacked via scale+translate.\n   * Expanded (data-expanded): each toast moves to its offset position.\n   */\n  .viewport-stacked {\n    height: calc(var(--toast-frontmost-height, 64px) + 20px);\n    padding-top: 20px;\n    box-sizing: content-box;\n    clip-path: inset(0 0 0 0 round var(--radius-xl));\n    transition:\n      clip-path 200ms var(--easing-ease-out),\n      height 200ms var(--easing-ease-out);\n  }\n  .viewport-stacked[data-expanded] {\n    clip-path: inset(-9999px 0 0 0 round var(--radius-xl));\n    height: calc(var(--toast-frontmost-height, 64px) + 20px);\n  }\n  /* Fill the gaps between expanded toasts so the mouse doesn't leave\n     the viewport as it moves between them, which would collapse the stack */\n  .viewport-stacked[data-expanded]::after {\n    content: \"\";\n    position: absolute;\n    inset: -9999px 0 0 0;\n    pointer-events: auto;\n    z-index: 0;\n  }\n  .toast-stacked {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: calc(50 - var(--toast-index));\n    transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * 0.04));\n    transform-origin: bottom center;\n    opacity: calc(1 - var(--toast-index) * 0.15);\n    transition:\n      transform 200ms var(--easing-ease-out),\n      opacity 200ms var(--easing-ease-out);\n  }\n  /* Expanded: each toast animates to its stacked position with a gap */\n  .viewport-stacked[data-expanded] .toast-stacked {\n    transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));\n    opacity: 1;\n    pointer-events: auto;\n  }\n  /* Enter: new toast slides up from below */\n  .viewport-stacked .toast-stacked {\n    @starting-style {\n      opacity: 0;\n      transform: translateY(16px) scale(calc(1 - var(--toast-index) * 0.04));\n    }\n  }\n  /* Exit: dismissed toast slides right */\n  .viewport-stacked .toast-stacked[data-ending-style] {\n    opacity: 0;\n    transform: translateX(calc(100% + var(--space-4)));\n    transition:\n      opacity 150ms var(--easing-ease-in),\n      transform 150ms var(--easing-ease-in);\n  }\n  /* ─── Variant tints ──────────────────────────────────────────────── */\n  .toast-success {\n    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-overlay));\n  }\n  .toast-error {\n    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-overlay));\n  }\n  .toast-warning {\n    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-overlay));\n  }\n  .toast-info {\n    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-overlay));\n  }\n  /* ─── Icon ───────────────────────────────────────────────────────── */\n  .icon {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    margin-top: 1px;\n  }\n  .icon-success {\n    color: var(--color-success-solid);\n  }\n  .icon-warning {\n    color: var(--color-warning-solid);\n  }\n  .icon-error {\n    color: var(--color-error-solid);\n  }\n  .icon-info {\n    color: var(--color-info-solid);\n  }\n  /* ─── Content ────────────────────────────────────────────────────── */\n  .content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5);\n    min-width: 0;\n  }\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-primary);\n    line-height: var(--line-height-normal);\n  }\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n  }\n  /* ─── Close button ───────────────────────────────────────────────── */\n  .close {\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--color-tertiary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard);\n    margin-top: 1px;\n  }\n  .close:hover {\n    background-color: var(--color-hover);\n    color: var(--color-primary);\n  }\n  .close:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n}\n"],"mappings":";AAoCA,IAAA,uBAAE;CAAA,SAAA;CAAA,WAAA;CAAA,eAAA;CAAA,QAAA;CAAA,cAAA;CAAA,aAAA;CAAA,gBAAA;CAAA,gBAAA;CAAA,SAAA;CAAA,SAAA;CAAA,eAAA;CAAA,cAAA;CAAA,iBAAA;CAAA,iBAAA;CAAA,iBAAA;CAAA,YAAA;CAAA,iBAAA;CAAA,oBAAA;CAAA"}

package/dist/tokens.css

@@ -1,10 +1,11 @@
 /**
  * @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 {
+
+@layer theme {
   :root {
     /* ─── Typography ──────────────────────────────────────────────── */
     /*
@@ -125,35 +126,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.6); /* raised from 0.55 — AA 5.01:1 on hover bg */
+    --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:
@@ -166,6 +167,8 @@
     --color-accent: #0078d4;
     --color-accent-hover: #006bbf;
     --color-accent-pressed: #005ea8;
+    --color-accent-solid: #0078d4; /* solid button bg — same as accent in light (4.83:1 vs white) */
+    --color-accent-text: #005ea8; /* text/icon on tinted surfaces — AA 5.09:1 on accent-tint bg */
     --color-accent-tint: rgba(0, 120, 212, 0.1);
     --color-accent-tint-hover: rgba(0, 120, 212, 0.16);
 
@@ -181,25 +184,28 @@
     --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;
     --color-success-border: #bbf7d0;
-    --color-success-text: #15803d;
-    --color-success-solid: #16a34a;
+    --color-success-text: #147a39; /* darkened from #15803d — AA 4.73:1 on canvas */
+    --color-success-solid: #15803d; /* darkened from #16a34a — AA 5.02:1 vs white */
+    --color-success-on-solid: #ffffff;
 
     /* Status — Warning */
     --color-warning-bg: #fffbeb;
     --color-warning-border: #fde68a;
     --color-warning-text: #92400e;
-    --color-warning-solid: #d97706;
+    --color-warning-solid: #b45309; /* darkened from #d97706 — AA 5.02:1 vs white */
+    --color-warning-on-solid: #ffffff;
 
     /* Status — Error */
     --color-error-bg: #fef2f2;
     --color-error-border: #fecaca;
     --color-error-text: #991b1b;
     --color-error-solid: #dc2626;
+    --color-error-on-solid: #ffffff;
 
     /* Status — Info */
     --color-info-bg: #eff6ff;
@@ -208,7 +214,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 +223,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,38 +238,40 @@
       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;
       --color-accent-hover: #0071e3;
       --color-accent-pressed: #005bb5;
+      --color-accent-solid: #0071e3; /* solid button bg — darkened from #0a84ff — AA 4.70:1 vs white */
+      --color-accent-text: #60a5fa; /* text/icon on tinted surfaces — AA 5.87:1 on accent-tint bg */
       --color-accent-tint: rgba(10, 132, 255, 0.12);
       --color-accent-tint-hover: rgba(10, 132, 255, 0.2);
 
@@ -279,25 +287,28 @@
       --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);
       --color-success-border: rgba(22, 163, 74, 0.3);
       --color-success-text: #4ade80;
-      --color-success-solid: #22c55e;
+      --color-success-solid: #22c55e; /* vivid — AA 9.22:1 vs black text */
+      --color-success-on-solid: #000000; /* dark text preserves vibrancy */
 
       /* Status — Warning */
       --color-warning-bg: rgba(217, 119, 6, 0.12);
       --color-warning-border: rgba(217, 119, 6, 0.3);
       --color-warning-text: #fbbf24;
-      --color-warning-solid: #f59e0b;
+      --color-warning-solid: #f59e0b; /* vivid — AA 9.78:1 vs black text */
+      --color-warning-on-solid: #000000; /* dark text preserves vibrancy */
 
       /* Status — Error */
       --color-error-bg: rgba(220, 38, 38, 0.12);
       --color-error-border: rgba(220, 38, 38, 0.3);
       --color-error-text: #f87171;
-      --color-error-solid: #ef4444;
+      --color-error-solid: #dc2626; /* darkened from #ef4444 — AA 4.83:1 vs white */
+      --color-error-on-solid: #ffffff;
 
       /* Status — Info */
       --color-info-bg: rgba(37, 99, 235, 0.12);
@@ -306,7 +317,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,42 +326,44 @@
       --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;
     --color-accent-pressed: #005bb5;
+    --color-accent-solid: #0071e3;
+    --color-accent-text: #60a5fa;
     --color-accent-tint: rgba(10, 132, 255, 0.12);
     --color-accent-tint-hover: rgba(10, 132, 255, 0.2);
 
@@ -364,29 +377,32 @@
     --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);
     --color-success-text: #4ade80;
     --color-success-solid: #22c55e;
+    --color-success-on-solid: #000000;
 
     --color-warning-bg: rgba(217, 119, 6, 0.12);
     --color-warning-border: rgba(217, 119, 6, 0.3);
     --color-warning-text: #fbbf24;
     --color-warning-solid: #f59e0b;
+    --color-warning-on-solid: #000000;
 
     --color-error-bg: rgba(220, 38, 38, 0.12);
     --color-error-border: rgba(220, 38, 38, 0.3);
     --color-error-text: #f87171;
-    --color-error-solid: #ef4444;
+    --color-error-solid: #dc2626;
+    --color-error-on-solid: #ffffff;
 
     --color-info-bg: rgba(37, 99, 235, 0.12);
     --color-info-border: rgba(37, 99, 235, 0.3);
     --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 +410,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/dist/tooltip/parts.js

@@ -1,6 +1,6 @@
 import tooltip_module_default from "./tooltip.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Tooltip } from "@base-ui/react/tooltip";
 //#region src/tooltip/parts.tsx
 /**

package/dist/tooltip/tooltip.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .positioner_yQZxSq {
     z-index: var(--z-tooltip);
@@ -7,19 +5,19 @@
 
   .popup_yQZxSq {
     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);
     border-radius: var(--radius-sm);
     box-shadow: var(--shadow-sm);
     padding: var(--space-1) var(--space-2);
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     line-height: var(--line-height-normal);
     word-break: break-word;
     max-width: 240px;
     transform-origin: var(--transform-origin);
-    transition: opacity .125s var(--easing-ease-out),
-      transform .125s var(--easing-ease-out);
+    transition: opacity .15s var(--easing-ease-out),
+      transform .3s var(--easing-spring);
   }
 
   .popup_yQZxSq[data-instant] {
@@ -28,14 +26,14 @@
 
   .popup_yQZxSq[data-starting-style] {
     opacity: 0;
-    transform: scale(.96);
+    transform: scale(.85);
   }
 
   .popup_yQZxSq[data-ending-style] {
     opacity: 0;
     transition: opacity 75ms var(--easing-ease-in),
       transform 75ms var(--easing-ease-in);
-    transform: scale(.98);
+    transform: scale(.95);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -56,9 +54,7 @@
     width: 8px;
     height: 8px;
     fill: var(--color-surface-3);
-    stroke: var(--color-border-base);
+    stroke: var(--color-line);
     stroke-width: 1px;
   }
 }
-
-@layer utilities;

package/dist/tooltip/tooltip.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
 import styles from "./tooltip.module.css";
 
 //#region src/tooltip/tooltip.d.ts

package/dist/tooltip/tooltip.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.module.js","names":[],"sources":["../../src/tooltip/tooltip.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .positioner {\n    z-index: var(--z-tooltip);\n  }\n\n  .popup {\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-border-base);\n    border-radius: var(--radius-sm);\n    box-shadow: var(--shadow-sm);\n    padding: var(--space-1) var(--space-2);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-text-primary);\n    line-height: var(--line-height-normal);\n    max-width: 240px;\n    word-break: break-word;\n\n    transform-origin: var(--transform-origin);\n    transition:\n      opacity 125ms var(--easing-ease-out),\n      transform 125ms var(--easing-ease-out);\n  }\n\n  /* Skip animation when moving between tooltips quickly */\n  .popup[data-instant] {\n    transition-duration: 0ms;\n  }\n\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.98);\n    transition:\n      opacity 75ms var(--easing-ease-in),\n      transform 75ms var(--easing-ease-in);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popup {\n      transition: opacity 125ms var(--easing-ease-out);\n    }\n\n    .popup[data-ending-style] {\n      transition: opacity 75ms var(--easing-ease-in);\n    }\n\n    .popup[data-starting-style],\n    .popup[data-ending-style] {\n      transform: none;\n    }\n  }\n\n  .arrow {\n    width: 8px;\n    height: 8px;\n    fill: var(--color-surface-3);\n    stroke: var(--color-border-base);\n    stroke-width: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"tooltip.module.js","names":[],"sources":["../../src/tooltip/tooltip.module.css"],"sourcesContent":["@layer components {\n  .positioner {\n    z-index: var(--z-tooltip);\n  }\n  .popup {\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-sm);\n    box-shadow: var(--shadow-sm);\n    padding: var(--space-1) var(--space-2);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-primary);\n    line-height: var(--line-height-normal);\n    max-width: 240px;\n    word-break: break-word;\n    transform-origin: var(--transform-origin);\n    transition:\n      opacity 150ms var(--easing-ease-out),\n      transform 300ms var(--easing-spring);\n  }\n  /* Skip animation when moving between tooltips quickly */\n  .popup[data-instant] {\n    transition-duration: 0ms;\n  }\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.95);\n    transition:\n      opacity 75ms var(--easing-ease-in),\n      transform 75ms var(--easing-ease-in);\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .popup {\n      transition: opacity 125ms var(--easing-ease-out);\n    }\n    .popup[data-ending-style] {\n      transition: opacity 75ms var(--easing-ease-in);\n    }\n    .popup[data-starting-style],\n    .popup[data-ending-style] {\n      transform: none;\n    }\n  }\n  .arrow {\n    width: 8px;\n    height: 8px;\n    fill: var(--color-surface-3);\n    stroke: var(--color-line);\n    stroke-width: 1;\n  }\n}\n"],"mappings":";AAMA,IAAA,yBAAe;CAAC,SAAQ;CAAa,SAAU;CAAa,cAAA;CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brijbyte/agentic-ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": false,
   "repository": {
     "type": "git",
@@ -23,14 +23,26 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./package.json": "./package.json",
     "./styles": "./dist/index.css",
+    "./layer-order": "./dist/layer-order.css",
     "./tokens": "./dist/tokens.css",
     "./reset": "./dist/reset.css",
     "./tailwind-theme": "./dist/tailwind-theme.css",
+    "./alert-dialog": {
+      "import": "./dist/alert-dialog/index.js",
+      "types": "./dist/alert-dialog/index.d.ts"
+    },
+    "./context-menu": {
+      "import": "./dist/context-menu/index.js",
+      "types": "./dist/context-menu/index.d.ts"
+    },
     "./accordion": {
       "import": "./dist/accordion/index.js",
       "types": "./dist/accordion/index.d.ts"
     },
+    "./alert-dialog.css": "./dist/alert-dialog/alert-dialog.css",
+    "./context-menu.css": "./dist/context-menu/context-menu.css",
     "./accordion.css": "./dist/accordion/accordion.css",
     "./badge": {
       "import": "./dist/badge/index.js",
@@ -96,7 +108,12 @@
       "import": "./dist/separator/index.js",
       "types": "./dist/separator/index.d.ts"
     },
+    "./slider": {
+      "import": "./dist/slider/index.js",
+      "types": "./dist/slider/index.d.ts"
+    },
     "./separator.css": "./dist/separator/separator.css",
+    "./slider.css": "./dist/slider/slider.css",
     "./switch": {
       "import": "./dist/switch/index.js",
       "types": "./dist/switch/index.d.ts"

package/src/accordion/accordion.module.css

@@ -1,28 +1,22 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .root {
     display: flex;
     flex-direction: column;
     gap: 0;
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-lg);
     overflow: hidden;
   }
-
   .item {
-    border-bottom: var(--border-width-base) solid var(--color-border-subtle);
+    border-bottom: var(--border-width-base) solid var(--color-line-subtle);
   }
-
   .item:last-child {
     border-bottom: none;
   }
-
   .header {
     display: flex;
     align-items: center;
   }
-
   .trigger {
     flex: 1;
     display: flex;
@@ -33,7 +27,7 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     background: none;
     border: none;
     cursor: pointer;
@@ -44,46 +38,38 @@
       color var(--duration-fast) var(--easing-standard);
     user-select: none;
   }
-
   .trigger:hover {
-    background-color: var(--color-surface-hover);
+    background-color: var(--color-hover);
   }
-
   .trigger:focus-visible {
     box-shadow: inset var(--shadow-focus);
   }
-
   .trigger[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   .trigger-icon {
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     flex-shrink: 0;
     transition: transform var(--duration-normal) var(--easing-standard);
   }
-
   .trigger[data-panel-open] .trigger-icon {
     transform: rotate(180deg);
   }
-
   .panel {
     height: var(--accordion-panel-height);
     overflow: hidden;
     transition: height var(--duration-normal) var(--easing-standard);
   }
-
   .panel[data-starting-style],
   .panel[data-ending-style] {
     height: 0;
   }
-
   .panel-content {
     padding: var(--space-2) var(--space-4) var(--space-4);
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
   }
 }