@astralui/core 0.1.0

package/dist/styles.css

@@ -0,0 +1,584 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+/* ===== src/styles/tokens.css ===== */
+/* Default UI font (override --astral-font-family to use your own; or self-host Inter). */
+
+
+/* ============================================================================
+   AstralUI theme tokens - the --astral-* design variables. Every Astral token
+   (au-*, etc.) resolves through these + light-dark(), which is why `color-scheme`
+   is set per scheme here.
+
+   :root carries the scheme-independent palette + the DARK semantic defaults
+   (AstralUI defaults to dark). The [data-astral-scheme="light"] block overrides
+   only the ~12 vars that differ in light mode. Per-org brand/surface overrides
+   are layered on top at runtime by <AstralThemeProvider>.
+   ============================================================================ */
+
+/* ── Base reset (so AstralUI works standalone, no external reset needed) ── */
+*, *::before, *::after { box-sizing: border-box; }
+html { font-size: 16px; -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0;
+  font-family: var(--astral-font-family);
+  font-size: 16px;
+  line-height: 1.55;
+  background: var(--astral-color-body);
+  color: var(--astral-color-text);
+  -webkit-font-smoothing: antialiased;
+}
+h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
+button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; }
+
+:root {
+  color-scheme: dark;
+
+  --astral-font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
+  --astral-radius-md: calc(0.5rem * 1);
+
+  --astral-color-black: #000;
+  --astral-color-white: #fff;
+
+  /* palette shades - identical in both schemes */
+  --astral-color-blue-4: #4dabf7;
+  --astral-color-blue-5: #339af0;
+  --astral-color-blue-6: #228be6;
+  --astral-color-blue-7: #1c7ed6;
+  --astral-color-cyan-6: #15aabf;
+  --astral-color-cyan-8: #0c8599;
+  --astral-color-grape-6: #be4bdb;
+  --astral-color-grape-7: #ae3ec9;
+  --astral-color-indigo-6: #4c6ef5;
+  --astral-color-gray-0: #f8f9fa;
+  --astral-color-gray-1: #f1f3f5;
+  --astral-color-gray-2: #e9ecef;
+  --astral-color-gray-3: #dee2e6;
+  --astral-color-gray-4: #ced4da;
+  --astral-color-gray-5: #adb5bd;
+  --astral-color-gray-6: #868e96;
+  --astral-color-gray-7: #495057;
+  --astral-color-green-5: #51cf66;
+  --astral-color-green-6: #40c057;
+  --astral-color-green-7: #37b24d;
+  --astral-color-green-8: #2f9e44;
+  --astral-color-green-9: #2b8a3e;
+  --astral-color-orange-5: #ff922b;
+  --astral-color-orange-6: #fd7e14;
+  --astral-color-orange-7: #f76707;
+  --astral-color-orange-9: #d9480f;
+  --astral-color-red-5: #ff6b6b;
+  --astral-color-red-6: #fa5252;
+  --astral-color-red-7: #f03e3e;
+  --astral-color-red-8: #e03131;
+  --astral-color-teal-5: #20c997;
+  --astral-color-teal-6: #12b886;
+  --astral-color-teal-7: #0ca678;
+  --astral-color-teal-8: #099268;
+  --astral-color-violet-0: #f3f0ff;
+  --astral-color-violet-1: #e5dbff;
+  --astral-color-violet-2: #d0bfff;
+  --astral-color-violet-3: #b197fc;
+  --astral-color-violet-4: #9775fa;
+  --astral-color-violet-5: #845ef7;
+  --astral-color-violet-6: #7950f2;
+  --astral-color-violet-7: #7048e8;
+  --astral-color-violet-8: #6741d9;
+  --astral-color-violet-9: #5f3dc4;
+  --astral-color-yellow-5: #fcc419;
+  --astral-color-yellow-6: #fab005;
+  --astral-color-yellow-7: #f59f00;
+  --astral-color-yellow-8: #f08c00;
+  --astral-color-dark-0: #f4f4f5;
+  --astral-color-dark-1: #d4d4d8;
+  --astral-color-dark-2: #a1a1aa;
+  --astral-color-dark-3: #71717a;
+  --astral-color-dark-4: #3f3f46;
+  --astral-color-dark-5: #27272a;
+  --astral-color-dark-6: #1c1c20;
+  --astral-color-dark-7: #141417;
+  --astral-color-dark-8: #0e0e11;
+  --astral-color-dark-9: #09090b;
+
+  /* semantic / primary - DARK defaults */
+  --astral-color-text: #f4f4f5;
+  --astral-color-body: #141417;
+  --astral-color-dimmed: #a1a1aa;
+  --astral-color-default-border: #3f3f46;
+  --astral-color-default-hover: #27272a;
+  --astral-primary-color-filled: #6741d9;
+  --astral-primary-color-filled-hover: #5f3dc4;
+  --astral-primary-color-light: rgba(121, 80, 242, 0.15);
+  --astral-primary-color-light-hover: rgba(121, 80, 242, 0.2);
+  --astral-primary-color-light-color: #b197fc;
+  --astral-color-yellow-light: rgba(250, 176, 5, 0.15);
+  --astral-color-yellow-light-color: #ffe066;
+}
+
+/* LIGHT overrides - only the vars that differ from the dark defaults above */
+[data-astral-scheme="light"] {
+  color-scheme: light;
+
+  --astral-color-text: #000;
+  --astral-color-body: #fff;
+  --astral-color-dimmed: #868e96;
+  --astral-color-default-border: #ced4da;
+  --astral-color-default-hover: #f8f9fa;
+  --astral-primary-color-filled: #7950f2;
+  --astral-primary-color-filled-hover: #7048e8;
+  --astral-primary-color-light: rgba(121, 80, 242, 0.1);
+  --astral-primary-color-light-hover: rgba(121, 80, 242, 0.12);
+  --astral-primary-color-light-color: #7950f2;
+  --astral-color-yellow-light: rgba(250, 176, 5, 0.1);
+  --astral-color-yellow-light-color: #fab005;
+}
+
+
+/* ===== src/styles/utilities.css ===== */
+/* ============ AstralUI utilities + component primitives ============
+   Scoped under :root. Theme-aware via the --astral-* tokens + light-dark().
+   Set a brand color inline as --au-ic to tint accents (hero tile, highlights). */
+
+:root{
+  --au-panel: var(--astral-app-card, light-dark(#ffffff, #16161b));
+  --au-surface-2: light-dark(var(--astral-color-gray-1), #1d1d24);
+  --au-line: var(--astral-color-default-border);
+  --au-text: var(--astral-color-text);
+  --au-dim: light-dark(var(--astral-color-gray-7), #a6a6b3);
+  --au-faint: light-dark(var(--astral-color-gray-6), #6f6f7d);
+  --au-brand: var(--astral-primary-color-filled);
+  --au-brand-text: light-dark(var(--astral-color-violet-7), var(--astral-color-violet-3));
+  --au-green: light-dark(#16a34a, #34d399);
+  --au-amber: light-dark(#d97706, #fbbf24);
+  --au-red: light-dark(#dc2626, #f87171);
+  --au-blue: light-dark(#2563eb, #60a5fa);
+  --au-ic: var(--astral-primary-color-filled);
+  --au-radius:16px;
+  --au-shadow: light-dark(0 1px 2px rgba(16,16,24,.06), 0 1px 2px rgba(0,0,0,.4)),
+               light-dark(0 8px 22px rgba(16,16,24,.05), 0 8px 24px rgba(0,0,0,.22));
+  font-family: var(--astral-font-family);
+  /* full-width: fill the content area (viewport minus the sidebar), not centered.
+     Inside the Clay modal/drawer this wrapper is constrained by the overlay anyway. */
+}
+:root .num{ font-variant-numeric:tabular-nums; }
+
+/* ---------- back link ---------- */
+.au-back{ display:inline-flex; align-items:center; gap:7px; color:var(--au-faint); font-size:12.5px; font-weight:600; text-decoration:none; margin-bottom:14px; transition:color .15s; }
+.au-back:hover{ color:var(--au-text); }
+.au-back svg{ width:15px; height:15px; }
+
+/* ---------- hero ---------- */
+.au-hero{ position:relative; overflow:hidden; background:var(--au-panel); border:1px solid var(--au-line); border-radius:var(--au-radius); box-shadow:var(--au-shadow); padding:20px 22px; display:flex; align-items:center; gap:17px; }
+.au-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--au-ic) 13%, transparent), transparent 70%); }
+.au-hero > *{ position:relative; }
+.au-tile{ width:56px; height:56px; border-radius:14px; display:grid; place-items:center; flex:0 0 auto; background:color-mix(in srgb, var(--au-ic) 18%, transparent); color:var(--au-ic); }
+.au-tile svg{ width:28px; height:28px; }
+.au-hmain{ flex:1; min-width:0; }
+.au-hmain h1{ margin:0; font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--au-text); }
+.au-hdesc{ margin-top:4px; font-size:12.5px; color:var(--au-dim); line-height:1.5; }
+.au-hright{ display:flex; align-items:center; gap:12px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
+
+/* ---------- status pill ---------- */
+.au-status{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; border-radius:999px; padding:5px 12px; white-space:nowrap; }
+.au-status .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
+.au-status.on{ color:var(--au-green); background:color-mix(in srgb, var(--au-green) 14%, transparent); }
+.au-status.on .dot{ background:var(--au-green); box-shadow:0 0 7px var(--au-green); }
+.au-status.paused{ color:var(--au-amber); background:color-mix(in srgb, var(--au-amber) 14%, transparent); }
+.au-status.paused .dot{ background:var(--au-amber); }
+.au-status.off{ color:var(--au-faint); background:var(--au-surface-2); border:1px solid var(--au-line); }
+.au-status.off .dot{ background:var(--au-faint); }
+
+/* ---------- buttons ---------- */
+.au-btn{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:600; border-radius:10px; padding:9px 15px; cursor:pointer; border:1px solid var(--au-line); background:var(--au-surface-2); color:var(--au-dim); text-decoration:none; transition:color .15s, border-color .15s, filter .15s; white-space:nowrap; }
+.au-btn:hover{ color:var(--au-text); border-color:color-mix(in srgb, var(--au-brand) 45%, transparent); }
+.au-btn:disabled{ opacity:.5; cursor:not-allowed; }
+.au-btn svg{ width:15px; height:15px; flex:0 0 auto; }
+.au-btn.primary{ background:var(--au-brand); border-color:var(--au-brand); color:#fff; }
+.au-btn.primary:hover{ filter:brightness(1.08); color:#fff; border-color:var(--au-brand); }
+.au-btn.sm{ font-size:12px; padding:7px 12px; }
+.au-ico{ width:36px; height:36px; border-radius:9px; display:grid; place-items:center; border:1px solid var(--au-line); background:var(--au-surface-2); color:var(--au-faint); cursor:pointer; flex:0 0 auto; transition:color .15s, border-color .15s; }
+.au-ico:hover{ color:var(--au-red); border-color:color-mix(in srgb, var(--au-red) 40%, transparent); }
+.au-ico.sm{ width:34px; height:34px; }
+.au-ico svg{ width:16px; height:16px; }
+
+/* ---------- alerts ---------- */
+.au-alert{ display:flex; align-items:flex-start; gap:11px; margin-top:14px; padding:13px 15px; border-radius:12px; font-size:12.5px; line-height:1.5; color:var(--au-text); background:color-mix(in srgb, var(--au-green) 10%, transparent); border:1px solid color-mix(in srgb, var(--au-green) 30%, transparent); }
+.au-alert svg{ width:17px; height:17px; flex:0 0 auto; color:var(--au-green); margin-top:1px; }
+.au-alert.info{ background:color-mix(in srgb, var(--au-blue) 10%, transparent); border-color:color-mix(in srgb, var(--au-blue) 28%, transparent); }
+.au-alert.info svg{ color:var(--au-blue); }
+.au-alert.warn{ background:color-mix(in srgb, var(--au-amber) 11%, transparent); border-color:color-mix(in srgb, var(--au-amber) 30%, transparent); }
+.au-alert.warn svg{ color:var(--au-amber); }
+.au-alert.error{ background:color-mix(in srgb, var(--au-red) 10%, transparent); border-color:color-mix(in srgb, var(--au-red) 30%, transparent); }
+.au-alert.error svg{ color:var(--au-red); }
+.au-alert.col{ flex-direction:column; gap:9px; }
+
+/* ---------- button color variants (used in the Clay drawer) ---------- */
+.au-btn.danger{ color:var(--au-red); border-color:color-mix(in srgb, var(--au-red) 36%, transparent); background:color-mix(in srgb, var(--au-red) 12%, transparent); }
+.au-btn.danger:hover{ color:var(--au-red); border-color:color-mix(in srgb, var(--au-red) 55%, transparent); filter:brightness(1.05); }
+.au-btn.ok{ color:var(--au-green); border-color:color-mix(in srgb, var(--au-green) 38%, transparent); background:color-mix(in srgb, var(--au-green) 12%, transparent); }
+.au-btn.ok:hover{ color:var(--au-green); filter:brightness(1.05); }
+.au-btn.solidred{ color:#fff; background:var(--au-red); border-color:var(--au-red); }
+.au-btn.solidred:hover{ filter:brightness(1.06); color:#fff; }
+.au-btn.orange{ color:#fff; background:#EF8E2E; border-color:#EF8E2E; }
+.au-btn.orange:hover{ filter:brightness(1.05); color:#fff; }
+.au-btn.orange svg{ color:#fff; }
+.au-btn.green{ color:#fff; background:var(--au-green); border-color:var(--au-green); }
+.au-btn.green:hover{ filter:brightness(1.06); color:#fff; }
+.au-btn.green svg{ color:#fff; }
+.au-kbd{ font-family:inherit; font-size:11px; font-weight:700; padding:1px 6px; border-radius:5px;
+  background:var(--au-surface-2); border:1px solid var(--au-line); color:var(--au-text); }
+.au-ck{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--au-line); background:var(--au-surface-2);
+  display:inline-grid; place-items:center; flex:0 0 auto; transition:background .12s, border-color .12s; }
+.au-ck.on{ background:var(--au-brand); border-color:var(--au-brand); }
+.au-ck svg{ width:11px; height:11px; color:#fff; display:block; }
+.au-tag{ font-size:10.5px; font-weight:700; border-radius:6px; padding:2px 7px; color:var(--au-faint); background:var(--au-surface-2); white-space:nowrap; }
+.au-tag.prem{ color:var(--au-amber, #d97706); background:color-mix(in srgb, var(--au-amber, #d97706) 14%, transparent); }
+.au-tablewrap{ border:1px solid var(--au-line); border-radius:11px; overflow:auto; }
+.au-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
+.au-table thead th{ text-align:left; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
+  color:var(--au-faint); padding:8px 10px; border-bottom:1px solid var(--au-line);
+  background:color-mix(in srgb, var(--au-surface-2) 55%, transparent); }
+.au-table tbody td{ padding:8px 10px; border-bottom:1px solid var(--au-line); color:var(--au-text); vertical-align:middle; }
+.au-table tbody tr:last-child td{ border-bottom:0; }
+.au-table tbody tr:hover td{ background:var(--au-surface-2); }
+.au-alert{ display:flex; align-items:flex-start; gap:9px; padding:10px 12px; border-radius:10px; font-size:12px; color:var(--au-text); line-height:1.5; }
+.au-alert svg{ flex:0 0 auto; margin-top:1px; }
+.au-alert.warn{ color:var(--au-amber, #d97706); background:color-mix(in srgb, var(--au-amber, #d97706) 10%, transparent); border:1px solid color-mix(in srgb, var(--au-amber, #d97706) 34%, var(--au-line)); }
+.au-alert.err{ color:var(--au-red); background:color-mix(in srgb, var(--au-red) 9%, transparent); border:1px solid color-mix(in srgb, var(--au-red) 34%, var(--au-line)); }
+.au-alert.brand{ color:var(--au-brand-text); background:color-mix(in srgb, var(--au-brand) 9%, transparent); border:1px solid color-mix(in srgb, var(--au-brand) 32%, var(--au-line)); }
+.au-alert .t{ font-weight:700; margin-bottom:2px; }
+.au-card{ border:1px solid var(--au-line); border-radius:12px; padding:13px 15px; background:color-mix(in srgb, var(--au-surface-2) 32%, transparent); }
+.au-card-h{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--au-faint); margin-bottom:9px; }
+.au-mpill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; border-radius:999px; padding:4px 11px; width:fit-content; }
+.au-day{ width:22px; height:22px; border-radius:6px; display:inline-grid; place-items:center; font-size:10px; font-weight:700;
+  background:var(--au-surface-2); color:var(--au-faint); }
+.au-day.on{ background:var(--au-brand); color:#fff; }
+.au-divider{ height:1px; background:var(--au-line); border:0; margin:2px 0; }
+.au-tcard{ border:1px solid var(--au-line); border-radius:12px; padding:14px; background:var(--au-surface-2);
+  cursor:pointer; transition:border-color .12s, filter .12s; }
+.au-tcard:hover{ border-color:color-mix(in srgb, var(--au-brand) 45%, var(--au-line)); filter:brightness(1.02); }
+.au-seg{ display:flex; gap:4px; padding:3px; background:var(--au-surface-2); border:1px solid var(--au-line); border-radius:10px; }
+.au-seg button{ flex:1; background:none; border:0; border-radius:7px; padding:7px 10px; font:inherit; font-size:12.5px; font-weight:600;
+  color:var(--au-dim); cursor:pointer; transition:background .12s, color .12s; }
+.au-seg button.on{ background:var(--au-panel); color:var(--au-text); box-shadow:0 1px 2px rgba(0,0,0,.12); }
+.au-suggest{ font-size:11px; font-weight:600; border-radius:6px; padding:2px 8px; cursor:pointer; font-family:inherit;
+  color:var(--au-blue, #3b82f6); background:color-mix(in srgb, var(--au-blue, #3b82f6) 10%, transparent);
+  border:1px solid color-mix(in srgb, var(--au-blue, #3b82f6) 34%, var(--au-line)); }
+.au-suggest:hover{ filter:brightness(1.05); }
+.au-check{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
+.au-check .cl{ font-size:13px; color:var(--au-text); display:block; }
+.au-check .cd{ font-size:11.5px; color:var(--au-faint); display:block; margin-top:1px; }
+
+/* ---------- modal / drawer form layout ---------- */
+.clay-form{ display:flex; flex-direction:column; gap:14px; }
+.clay-actions{ display:flex; justify-content:flex-end; gap:9px; margin-top:4px; }
+.clay-link{ font:inherit; font-size:12.5px; font-weight:600; color:var(--au-brand-text); cursor:pointer; background:none; border:0; padding:0; text-align:left; width:fit-content; }
+.clay-link:hover{ text-decoration:underline; }
+.clay-stats{ display:flex; gap:28px; }
+.clay-stat .l{ font-size:11px; color:var(--au-faint); }
+.clay-stat .v{ font-size:15px; font-weight:700; color:var(--au-text); margin-top:2px; font-variant-numeric:tabular-nums; }
+.clay-tokrow{ display:flex; align-items:center; gap:9px; }
+.clay-meta{ font-size:12px; color:var(--au-faint); }
+.clay-meta b{ color:var(--au-dim); font-weight:600; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
+.clay-errs-title{ font-size:12.5px; font-weight:700; color:var(--au-text); margin-bottom:4px; }
+.clay-err{ padding:10px 0; border-top:1px solid var(--au-line); }
+.clay-err:first-of-type{ border-top:0; }
+.clay-err .top{ display:flex; gap:10px; align-items:center; font-size:11.5px; color:var(--au-dim); }
+.clay-err .top .st{ font-weight:700; color:var(--au-amber); }
+.clay-err .reason{ font-size:12px; color:var(--au-text); margin-top:3px; }
+.clay-err .code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; color:var(--au-faint); margin-top:1px; }
+
+/* ---------- custom text input / textarea (Astral) ---------- */
+.au-field-label .req{ color:var(--au-red); }
+
+/* inline field error */
+.au-field-err{ color:var(--au-red); font-size:11.5px; margin-top:5px; }
+
+/* ---------- 6-box code input ---------- */
+.au-pin{ display:flex; gap:8px; }
+.au-pin-box{ width:44px; height:50px; min-width:0; flex:1; max-width:52px; text-align:center; font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--au-text); background:var(--au-surface-2); border:1px solid var(--au-line); border-radius:11px; outline:none; transition:border-color .15s, box-shadow .15s; }
+.au-pin-box:focus{ border-color:color-mix(in srgb, var(--au-brand) 55%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--au-brand) 18%, transparent); }
+.au-textarea{ width:100%; background:var(--au-surface-2); border:1px solid var(--au-line); border-radius:10px; padding:10px 13px; font:inherit; font-size:13px; color:var(--au-text); outline:none; resize:vertical; min-height:64px; line-height:1.5; }
+.au-textarea:focus{ border-color:color-mix(in srgb, var(--au-brand) 50%, transparent); }
+.au-textarea::placeholder{ color:var(--au-faint); }
+
+/* ---------- Astral modal ---------- */
+.au-modal-overlay{ position:fixed; inset:0; z-index:300; background:rgba(8,8,12,.55); backdrop-filter:blur(2px); display:grid; place-items:center; padding:20px; }
+.au-modal-panel{ width:100%; background:var(--au-panel); border:1px solid var(--au-line); border-radius:var(--au-radius); box-shadow:0 24px 60px rgba(0,0,0,.45); max-height:calc(100dvh - 40px); overflow-y:auto; }
+.au-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px 0; }
+.au-modal-title{ font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--au-text); }
+.au-modal-x{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; border:0; background:transparent; color:var(--au-faint); cursor:pointer; flex:0 0 auto; }
+.au-modal-x:hover{ background:var(--au-surface-2); color:var(--au-text); }
+.au-modal-x svg{ width:18px; height:18px; }
+.au-modal-body{ padding:16px 20px 20px; font-size:13px; }
+
+/* ---------- Astral drawer ---------- */
+.au-drawer-overlay{ position:fixed; inset:0; z-index:300; background:rgba(8,8,12,.5); display:flex; justify-content:flex-end; }
+.au-drawer-panel{ height:100%; background:var(--au-panel); border-left:1px solid var(--au-line); box-shadow:-12px 0 40px rgba(0,0,0,.4); display:flex; flex-direction:column; max-width:100vw; }
+.au-drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 20px; border-bottom:1px solid var(--au-line); flex:0 0 auto; }
+.au-drawer-title{ font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--au-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.au-drawer-body{ padding:18px 20px; overflow-y:auto; flex:1; font-size:13px; }
+
+/* ---------- Astral select ---------- */
+.au-select{ position:relative; }
+.au-select-trigger{ width:100%; cursor:pointer; justify-content:space-between; text-align:left; font:inherit; font-size:13px; color:var(--au-text); }
+.au-select-trigger:disabled{ opacity:.55; cursor:not-allowed; }
+.au-select-trigger > span:first-child{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.au-select-trigger .ph{ color:var(--au-faint); }
+.au-select-caret{ color:var(--au-faint); flex:0 0 auto; }
+/* portaled to body + fixed-positioned (left/top|bottom/width/max-height set inline)
+   so it floats above the modal instead of being clipped by its overflow. */
+.au-select-menu{ position:fixed; z-index:320; background:var(--au-panel); border:1px solid var(--au-line); border-radius:11px; box-shadow:0 14px 34px rgba(0,0,0,.4); padding:5px; overflow-y:auto; }
+.au-select-search{ width:100%; background:var(--au-surface-2); border:1px solid var(--au-line); border-radius:8px; padding:8px 11px; font:inherit; font-size:12.5px; color:var(--au-text); outline:none; margin-bottom:5px; }
+.au-select-search:focus{ border-color:color-mix(in srgb, var(--au-brand) 50%, transparent); }
+.au-select-opt{ display:block; width:100%; text-align:left; border:0; background:transparent; font:inherit; font-size:13px; color:var(--au-dim); padding:8px 10px; border-radius:8px; cursor:pointer; }
+.au-select-opt:hover{ background:var(--au-surface-2); color:var(--au-text); }
+.au-select-opt.on{ color:var(--au-brand-text); font-weight:600; }
+.au-select-opt.au-select-create{ color:var(--au-brand-text); font-weight:600; }
+.au-select-empty{ padding:10px; font-size:12px; color:var(--au-faint); text-align:center; }
+.au-select-clear{ cursor:pointer; }
+.au-select-clear:hover{ color:var(--au-text); }
+
+/* ---------- Astral action menu (AstralMenu) ---------- */
+.au-menu-anchor{ display:inline-flex; }
+.au-menu{ position:fixed; z-index:320; background:var(--au-panel); border:1px solid var(--au-line); border-radius:11px; box-shadow:0 14px 34px rgba(0,0,0,.4); padding:6px; overflow-y:auto; }
+.au-menu-item{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:0; background:transparent; font:inherit; font-size:13px; font-weight:500; color:var(--au-dim); padding:9px 10px; border-radius:8px; cursor:pointer; }
+.au-menu-item:hover{ background:var(--au-surface-2); color:var(--au-text); }
+.au-menu-item:disabled{ opacity:.5; cursor:not-allowed; }
+.au-menu-item.danger{ color:var(--au-red); }
+.au-menu-item.danger:hover{ background:color-mix(in srgb, var(--au-red) 12%, transparent); color:var(--au-red); }
+.au-menu-ic{ display:grid; place-items:center; flex:0 0 auto; color:var(--au-faint); }
+.au-menu-item:hover .au-menu-ic{ color:inherit; }
+.au-menu-item.danger .au-menu-ic{ color:inherit; }
+.au-menu-ic svg{ width:16px; height:16px; display:block; }
+.au-menu-label{ flex:1; min-width:0; }
+.au-menu-divider{ height:1px; background:var(--au-line); margin:5px 4px; }
+
+/* ---------- generic spinner (available wherever AstralOverlay/Astral modals load) ---------- */
+.au-spinner{ width:18px; height:18px; border-radius:50%; border:2px solid var(--au-line); border-top-color:var(--au-brand); animation:au-spin .7s linear infinite; display:inline-block; box-sizing:border-box; flex:0 0 auto; }
+@keyframes au-spin{ to{ transform:rotate(360deg); } }
+
+/* ---------- access strip (webhook pages) ---------- */
+.au-access{ display:flex; align-items:center; gap:11px; margin-top:14px; padding:11px 14px; background:var(--au-surface-2); border:1px solid var(--au-line); border-radius:12px; }
+.au-lg{ width:30px; height:30px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center; font-weight:800; font-size:11px; color:#fff; background:linear-gradient(135deg, var(--astral-color-violet-6), var(--astral-color-violet-4)); overflow:hidden; }
+.au-lg img{ width:100%; height:100%; object-fit:cover; }
+.au-access .au-ax{ flex:1; min-width:0; font-size:12.5px; color:var(--au-text); }
+.au-access .au-ax b{ font-weight:650; }
+.au-access .au-ax .s{ color:var(--au-faint); }
+.au-access .au-chip{ font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--au-brand-text); background:color-mix(in srgb, var(--au-brand) 16%, transparent); border-radius:6px; padding:3px 8px; white-space:nowrap; }
+.au-access .au-chip.muted{ color:var(--au-faint); background:var(--au-panel); border:1px solid var(--au-line); }
+
+/* ---------- panel ---------- */
+.au-panel{ background:var(--au-panel); border:1px solid var(--au-line); border-radius:var(--au-radius); box-shadow:var(--au-shadow); padding:18px 20px; margin-top:16px; }
+.au-phead{ display:flex; align-items:center; gap:11px; margin-bottom:15px; }
+.au-pic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb, var(--au-brand) 15%, transparent); color:var(--au-brand-text); flex:0 0 auto; }
+.au-pic svg{ width:17px; height:17px; }
+.au-pt{ flex:1; min-width:0; }
+.au-pt .t{ font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--au-text); }
+.au-pt .h{ font-size:12px; color:var(--au-faint); margin-top:2px; }
+.au-pt .h b{ color:var(--au-dim); font-weight:600; }
+.au-badge-ok{ font-size:10.5px; font-weight:700; color:var(--au-green); background:color-mix(in srgb, var(--au-green) 14%, transparent); border-radius:999px; padding:3px 9px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
+.au-badge-ok .dot{ width:6px; height:6px; border-radius:50%; background:var(--au-green); }
+
+/* ---------- webhook field ---------- */
+.au-field-label{ font-size:11.5px; font-weight:600; color:var(--au-dim); margin-bottom:7px; }
+.au-input{ display:flex; align-items:center; gap:9px; background:var(--au-surface-2); border:1px solid var(--au-line); border-radius:10px; padding:10px 13px; transition:border-color .15s; }
+.au-input:focus-within{ border-color:color-mix(in srgb, var(--au-brand) 50%, transparent); }
+.au-input input{ flex:1; min-width:0; border:0; background:transparent; color:var(--au-text); font:inherit; font-size:13px; outline:none; }
+.au-input input::placeholder{ color:var(--au-faint); letter-spacing:0; }
+.au-input input:disabled{ cursor:not-allowed; }
+.au-input .au-eye{ color:var(--au-faint); cursor:pointer; display:grid; place-items:center; flex:0 0 auto; background:none; border:0; padding:0; }
+.au-input .au-eye:hover{ color:var(--au-text); }
+.au-input .au-eye svg{ width:16px; height:16px; display:block; }
+.au-actions{ display:flex; align-items:center; gap:9px; margin-top:14px; flex-wrap:wrap; }
+.au-note{ font-size:11.5px; color:var(--au-faint); margin-top:10px; line-height:1.5; }
+
+/* ---------- master toggle ---------- */
+.au-toggle{ position:relative; width:38px; height:22px; border-radius:999px; background:var(--au-surface-2); border:1px solid var(--au-line); cursor:pointer; flex:0 0 auto; transition:background .15s, border-color .15s; padding:0; }
+.au-toggle.on{ background:var(--au-brand); border-color:var(--au-brand); }
+.au-toggle:disabled{ opacity:.5; cursor:not-allowed; }
+.au-toggle i{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--au-faint); transition:left .15s, background .15s; }
+.au-toggle.on i{ left:18px; background:#fff; }
+
+/* ---------- drive-file picker row ---------- */
+.au-drive-row{ transition:background .12s; }
+.au-drive-row:hover{ background:var(--au-surface-2); }
+
+/* ---------- skeleton shimmer ---------- */
+.au-skel{ border-radius:10px; background:linear-gradient(90deg, var(--au-surface-2) 25%, var(--au-line) 37%, var(--au-surface-2) 63%); background-size:400% 100%; animation:au-shimmer 1.4s ease infinite; }
+@keyframes au-shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }
+
+/* ---------- notification tiles ---------- */
+.au-ntf-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:9px; }
+.au-ntf{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:11px; border:1px solid var(--au-line); background:var(--au-surface-2); cursor:pointer; transition:border-color .15s, background .15s, opacity .15s; text-align:left; font:inherit; }
+.au-ntf:hover{ border-color:color-mix(in srgb, var(--au-brand) 35%, transparent); }
+.au-ntf.on{ border-color:color-mix(in srgb, var(--au-brand) 50%, transparent); background:color-mix(in srgb, var(--au-brand) 9%, transparent); }
+.au-ntf.dim{ opacity:.45; }
+.au-ntf:disabled{ cursor:default; }
+.au-nic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; background:var(--au-panel); color:var(--au-faint); border:1px solid var(--au-line); }
+.au-ntf.on .au-nic{ color:var(--au-brand-text); background:color-mix(in srgb, var(--au-brand) 16%, transparent); border-color:transparent; }
+.au-nic svg{ width:15px; height:15px; }
+.au-nl{ flex:1; min-width:0; font-size:12.5px; font-weight:550; color:var(--au-dim); }
+.au-ntf.on .au-nl{ color:var(--au-text); font-weight:600; }
+.au-chk{ color:var(--au-brand-text); opacity:0; flex:0 0 auto; display:grid; place-items:center; }
+.au-ntf.on .au-chk{ opacity:1; }
+.au-chk svg{ width:15px; height:15px; display:block; }
+.au-savebar{ display:flex; justify-content:flex-end; margin-top:15px; }
+
+/* ---------- capability cards (OAuth) ---------- */
+.au-cap-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:13px; margin-top:16px; }
+.au-cap{ background:var(--au-panel); border:1px solid var(--au-line); border-radius:var(--au-radius); box-shadow:var(--au-shadow); padding:16px 17px; }
+.au-cap .c-top{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
+.au-cap .c-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; }
+.au-cap .c-ic svg{ width:17px; height:17px; }
+.au-cap .c-nm{ font-size:13.5px; font-weight:700; color:var(--au-text); }
+.au-cap .c-desc{ font-size:12px; color:var(--au-dim); line-height:1.5; }
+.au-cap .c-foot{ display:flex; align-items:center; gap:9px; margin-top:12px; }
+.au-code{ flex:1; min-width:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:var(--au-dim); background:var(--au-surface-2); border:1px solid var(--au-line); border-radius:8px; padding:7px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+
+/* ---------- account rows (OAuth) ---------- */
+.au-secpanel{ margin-top:16px; }
+.au-sec-title{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; color:var(--au-text); display:flex; align-items:center; gap:9px; margin:0 2px 11px; }
+.au-sec-title .c{ font-size:10px; font-weight:700; color:var(--au-brand-text); background:color-mix(in srgb, var(--au-brand) 16%, transparent); border-radius:999px; padding:1px 7px; }
+.au-acct{ display:flex; align-items:center; gap:14px; padding:13px 15px; border-radius:12px; background:var(--au-panel); border:1px solid var(--au-line); box-shadow:var(--au-shadow); }
+.au-acct + .au-acct{ margin-top:10px; }
+.au-av{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; background:color-mix(in srgb, var(--au-ic) 18%, transparent); color:var(--au-ic); }
+.au-av svg{ width:20px; height:20px; }
+.au-amain{ flex:1; min-width:0; }
+.au-anm{ font-size:13.5px; font-weight:650; color:var(--au-text); display:flex; align-items:center; gap:9px; min-width:0; }
+.au-anm .nm-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.au-anm .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
+.au-anm .dot.live{ background:var(--au-green); box-shadow:0 0 7px var(--au-green); }
+.au-anm .dot.idle{ background:var(--au-faint); }
+.au-asub{ font-size:11.5px; color:var(--au-faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.au-atags{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
+.au-ttag{ font-size:10px; font-weight:600; border-radius:5px; padding:2px 7px; display:inline-flex; align-items:center; gap:4px; }
+.au-ttag svg{ width:10px; height:10px; }
+.au-ttag.sheets{ color:var(--au-green); background:color-mix(in srgb, var(--au-green) 14%, transparent); }
+.au-ttag.drive{ color:var(--au-blue); background:color-mix(in srgb, var(--au-blue) 14%, transparent); }
+.au-aact{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
+
+/* ---------- Clay table ---------- */
+.au-tbl{ background:var(--au-panel); border:1px solid var(--au-line); border-radius:var(--au-radius); box-shadow:var(--au-shadow); padding:7px 8px; margin-top:16px; }
+.au-grow{ display:grid; grid-template-columns:1.5fr 1.2fr 0.9fr 0.6fr auto 36px; align-items:center; gap:14px; }
+.au-thead{ padding:11px 14px 9px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--au-faint); }
+.au-thead .r{ text-align:right; }
+.au-trow{ padding:13px 14px; border-radius:12px; cursor:pointer; transition:background .12s; border:0; background:transparent; font:inherit; text-align:left; width:100%; color:inherit; }
+.au-trow:hover{ background:var(--au-surface-2); }
+.au-trow + .au-trow{ box-shadow:inset 0 1px 0 var(--au-line); }
+.au-trow:hover{ box-shadow:none; }
+.au-cname{ font-size:13.5px; font-weight:650; color:var(--au-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.au-csub{ font-size:11px; color:var(--au-faint); margin-top:2px; }
+.au-clist{ font-size:12.5px; color:var(--au-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.au-clist.muted{ color:var(--au-faint); font-style:italic; }
+.au-cwhen{ font-size:12.5px; color:var(--au-dim); }
+.au-cwhen.never{ color:var(--au-faint); }
+.au-ctotal{ font-size:12.5px; font-weight:600; color:var(--au-text); text-align:right; }
+.au-ctotal.zero{ color:var(--au-faint); font-weight:500; }
+.au-pill{ font-size:11px; font-weight:700; border-radius:999px; padding:3px 10px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; justify-self:start; }
+.au-pill .dot{ width:6px; height:6px; border-radius:50%; }
+.au-pill.on{ color:var(--au-green); background:color-mix(in srgb, var(--au-green) 14%, transparent); }
+.au-pill.on .dot{ background:var(--au-green); }
+.au-pill.idle{ color:var(--au-faint); background:var(--au-surface-2); border:1px solid var(--au-line); }
+.au-pill.warn{ color:var(--au-amber); background:color-mix(in srgb, var(--au-amber) 14%, transparent); }
+.au-gear{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--au-faint); }
+.au-trow:hover .au-gear{ color:var(--au-text); }
+.au-gear svg{ width:16px; height:16px; }
+
+/* ---------- empty state ---------- */
+.au-empty{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:34px 18px; color:var(--au-faint); font-size:13px; background:var(--au-panel); border:1px dashed var(--au-line); border-radius:var(--au-radius); margin-top:16px; }
+.au-empty .e-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:color-mix(in srgb, var(--au-ic) 16%, transparent); color:var(--au-ic); }
+.au-empty .e-ic svg{ width:22px; height:22px; }
+.au-empty .e-t{ font-size:14px; font-weight:650; color:var(--au-text); }
+
+/* ---------- responsive ---------- */
+@media (max-width:680px){
+  .au-hero{ flex-wrap:wrap; }
+  .au-hright{ width:100%; justify-content:flex-start; }
+  .au-grow{ grid-template-columns:1.4fr auto 36px; }
+  .au-grow .col-list, .au-grow .col-when, .au-grow .col-total{ display:none; }
+}
+
+
+/* ===== src/styles/toast.css ===== */
+/* Astral toast host. Bottom-right stack, newest at the bottom (nearest the
+   corner). Theme-aware via the --astral-* tokens. */
+
+.au-toast-host{
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 10000; /* above AstralModal/AstralMenu portals */
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 360px;
+  max-width: calc(100vw - 32px);
+  pointer-events: none;
+  font-family: var(--astral-font-family);
+}
+
+@keyframes au-toast-in{
+  from{ opacity: 0; transform: translateX(16px) scale(.98); }
+  to{ opacity: 1; transform: translateX(0) scale(1); }
+}
+
+.au-toast{
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+  padding: 12px 13px;
+  border-radius: 12px;
+  border: 1px solid var(--astral-color-default-border);
+  border-left: 3px solid var(--au-toast-accent, var(--astral-color-default-border));
+  background: light-dark(#ffffff, var(--astral-color-dark-6));
+  box-shadow: light-dark(0 6px 22px rgba(16,16,24,.12), 0 8px 26px rgba(0,0,0,.45));
+  color: var(--astral-color-text);
+  animation: au-toast-in .18s ease;
+}
+
+.au-toast-lead{
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+  color: var(--au-toast-accent, var(--astral-color-dimmed));
+  background: color-mix(in srgb, var(--au-toast-accent, var(--astral-color-default-border)) 16%, transparent);
+}
+.au-toast-lead svg{ width: 16px; height: 16px; display: block; }
+
+.au-toast-body{ flex: 1; min-width: 0; padding-top: 1px; }
+.au-toast-title{ font-size: 13px; font-weight: 700; color: var(--astral-color-text); margin-bottom: 2px; line-height: 1.35; }
+.au-toast-msg{ font-size: 12.5px; line-height: 1.45; color: var(--astral-color-dimmed); word-break: break-word; }
+.au-toast-title + .au-toast-msg{ color: var(--astral-color-dimmed); }
+/* when there's no title, the message is the primary line */
+.au-toast-body > .au-toast-msg:only-child{ color: var(--astral-color-text); font-weight: 500; }
+
+.au-toast-x{
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border: 0;
+  background: none;
+  border-radius: 6px;
+  color: var(--astral-color-dimmed);
+  cursor: pointer;
+  transition: color .12s, background .12s;
+}
+.au-toast-x:hover{ color: var(--astral-color-text); background: var(--astral-color-default-hover); }
+.au-toast-x svg{ width: 14px; height: 14px; display: block; }
+
+@keyframes au-toast-spin{ to{ transform: rotate(360deg); } }
+.au-toast-spin{
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
+  border-top-color: currentColor;
+  animation: au-toast-spin .6s linear infinite;
+  display: block;
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@astralui/core",
+  "version": "0.1.0",
+  "description": "AstralUI - a self-contained, dependency-free React design system: theme engine (light/dark + per-brand theming), design tokens, and components (Modal, Drawer, Select, Menu, Toast, DateInput, PinInput, Spinner).",
+  "license": "MIT",
+  "author": "Unbounded Technologies",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/build-css.mjs",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "design-system",
+    "ui",
+    "components",
+    "theme",
+    "dark-mode",
+    "astralui"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@tabler/icons-react": ">=3"
+  },
+  "dependencies": {
+    "chroma-js": "^3.2.0"
+  },
+  "devDependencies": {
+    "@tabler/icons-react": "^3.0.0",
+    "@types/chroma-js": "^3.1.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}