@brokr/sdk 2.0.0 → 2.1.0

package/dist/react-styles.mjs

@@ -26,6 +26,44 @@ var TOKENS_CSS = `
   --brokr-font-size-lg: 1.125rem;
   --brokr-font-size-xl: 1.5rem;
   --brokr-font-size-2xl: clamp(2rem, 4vw, 3.5rem);
+
+  /* Z-index stacking order */
+  --brokr-z-chat-float: 4;
+  --brokr-z-drawer-backdrop: 49;
+  --brokr-z-drawer: 50;
+  --brokr-z-popover: 60;
+  --brokr-z-fab: 70;
+  --brokr-z-panel: 80;
+  --brokr-z-modal-backdrop: 90;
+  --brokr-z-dropdown: 95;
+  --brokr-z-notification: 9999;
+  --brokr-z-toast: 99999;
+
+  /* Transition durations */
+  --brokr-duration-fast: 100ms;
+  --brokr-duration-base: 150ms;
+  --brokr-duration-slow: 300ms;
+  --brokr-ease: ease;
+
+  /* Font weights */
+  --brokr-font-weight-normal: 400;
+  --brokr-font-weight-medium: 500;
+  --brokr-font-weight-semibold: 600;
+  --brokr-font-weight-bold: 700;
+
+  /* Line heights */
+  --brokr-leading-tight: 1.25;
+  --brokr-leading-snug: 1.4;
+  --brokr-leading-normal: 1.6;
+  --brokr-leading-relaxed: 1.7;
+
+  /* Font families */
+  --brokr-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+
+  /* Additional radii */
+  --brokr-radius-pill: 999px;
+  --brokr-radius-sm: 4px;
+
   color: var(--brokr-text-primary);
 }
 `;
@@ -305,7 +343,7 @@ var AUTH_CSS = `
 }
 
 .brokr-brand-logo {
-  border-radius: 14px;
+  border-radius: calc(var(--brokr-radius-card) + 6px);
   display: block;
   height: 40px;
   object-fit: contain;
@@ -419,7 +457,7 @@ var ACCOUNT_CSS = `
   right: 0;
   top: calc(100% + 2px);
   width: min(92vw, 320px);
-  z-index: 60;
+  z-index: var(--brokr-z-popover);
 }
 
 .brokr-popover[data-align="start"] {
@@ -934,7 +972,7 @@ var ACCOUNT_CSS = `
   inset: 0;
   padding: var(--brokr-space-6);
   position: fixed;
-  z-index: 90;
+  z-index: var(--brokr-z-modal-backdrop);
 }
 
 .brokr-modal-dialog {
@@ -1104,7 +1142,7 @@ var CHAT_CSS = `
   position: absolute;
   right: 0;
   top: 0;
-  z-index: 4;
+  z-index: var(--brokr-z-chat-float);
 }
 
 .brokr-ai-chat-topbar > * {
@@ -1286,7 +1324,7 @@ var CHAT_CSS = `
   padding: var(--brokr-space-4) 0 var(--brokr-space-5);
   position: absolute;
   right: 0;
-  z-index: 4;
+  z-index: var(--brokr-z-chat-float);
 }
 
 .brokr-ai-chat-textarea {
@@ -1400,7 +1438,7 @@ var CHAT_EXTRAS_CSS = `
   position: absolute;
   right: 0;
   top: calc(100% + 6px);
-  z-index: 100;
+  z-index: var(--brokr-z-dropdown);
 }
 
 .brokr-model-option {
@@ -1506,7 +1544,7 @@ var CHAT_EXTRAS_CSS = `
   position: absolute;
   right: 0;
   top: calc(100% + 4px);
-  z-index: 100;
+  z-index: var(--brokr-z-dropdown);
 }
 
 .brokr-ai-chat-thread-dropdown-item {
@@ -1619,7 +1657,7 @@ var CHAT_EXTRAS_CSS = `
   backdrop-filter: blur(4px);
   inset: 0;
   position: fixed;
-  z-index: 49;
+  z-index: var(--brokr-z-drawer-backdrop);
 }
 
 .brokr-ai-chat-drawer {
@@ -1637,7 +1675,7 @@ var CHAT_EXTRAS_CSS = `
   position: fixed;
   top: 0;
   width: 80vw;
-  z-index: 50;
+  z-index: var(--brokr-z-drawer);
 }
 
 .brokr-ai-chat-hamburger {
@@ -1696,7 +1734,7 @@ var COMPOSITES_CSS = `
   bottom: var(--brokr-space-6);
   position: fixed;
   right: var(--brokr-space-6);
-  z-index: 70;
+  z-index: var(--brokr-z-fab);
 }
 
 .brokr-chat-panel {
@@ -1712,7 +1750,7 @@ var COMPOSITES_CSS = `
   right: 0;
   top: 0;
   width: min(100vw, 420px);
-  z-index: 80;
+  z-index: var(--brokr-z-panel);
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
@@ -1972,7 +2010,7 @@ var MARKDOWN_CSS = `
   background: var(--brokr-subtle-fill-strong);
   border-radius: 4px;
   color: var(--brokr-primary);
-  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+  font-family: var(--brokr-font-mono);
   font-size: 0.85em;
   padding: 0.15em 0.4em;
 }
@@ -2051,7 +2089,7 @@ var MARKDOWN_CSS = `
 
 .brokr-md-codeblock-lang {
   color: var(--brokr-text-secondary);
-  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+  font-family: var(--brokr-font-mono);
   font-weight: 500;
   text-transform: lowercase;
 }
@@ -2078,7 +2116,7 @@ var MARKDOWN_CSS = `
 
 .brokr-md-codeblock-pre {
   color: var(--brokr-text-primary);
-  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+  font-family: var(--brokr-font-mono);
   font-size: 0.825em;
   line-height: 1.6;
   margin: 0;
@@ -2271,11 +2309,11 @@ var NOTIFICATIONS_CSS = `
 .brokr-toast-layer {
   box-sizing: border-box;
   position: fixed;
-  z-index: 99999;
+  z-index: var(--brokr-z-toast);
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 16px;
+  gap: var(--brokr-space-2);
+  padding: var(--brokr-space-4);
   pointer-events: none;
   max-width: 400px;
   width: 100%;
@@ -2297,16 +2335,16 @@ var NOTIFICATIONS_CSS = `
   pointer-events: auto;
   display: flex;
   align-items: flex-start;
-  gap: 10px;
-  padding: 12px 14px;
-  border-radius: 10px;
-  background: var(--brokr-toast-bg, #ffffff);
-  border: 1px solid var(--brokr-toast-border, #e4e4e7);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
+  gap: var(--brokr-space-3);
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+  border-radius: calc(var(--brokr-radius-card) + 2px);
+  background: var(--brokr-toast-bg);
+  border: 1px solid var(--brokr-toast-border);
+  box-shadow: var(--brokr-shadow-md);
   width: 100%;
   max-width: 380px;
-  animation: brokr-toast-enter-bottom 0.3s ease-out;
-  transition: opacity 0.3s ease, transform 0.3s ease;
+  animation: brokr-toast-enter-bottom var(--brokr-duration-slow) ease-out;
+  transition: opacity var(--brokr-duration-slow) var(--brokr-ease), transform var(--brokr-duration-slow) var(--brokr-ease);
 }
 
 /* Top positions: slide down from top */
@@ -2343,7 +2381,7 @@ var NOTIFICATIONS_CSS = `
   flex-shrink: 0;
   width: 8px;
   height: 8px;
-  border-radius: 50%;
+  border-radius: var(--brokr-radius-pill);
   margin-top: 5px;
   background: var(--brokr-text-secondary);
 }
@@ -2370,16 +2408,16 @@ var NOTIFICATIONS_CSS = `
 }
 
 .brokr-toast-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--brokr-toast-text, #0a0a0a);
-  line-height: 1.35;
+  font-size: var(--brokr-font-size-xs);
+  font-weight: var(--brokr-font-weight-semibold);
+  color: var(--brokr-toast-text);
+  line-height: var(--brokr-leading-snug);
 }
 
 .brokr-toast-message {
-  font-size: 12px;
-  color: var(--brokr-toast-text-secondary, #52525b);
-  line-height: 1.4;
+  font-size: var(--brokr-font-size-xs);
+  color: var(--brokr-toast-text-secondary);
+  line-height: var(--brokr-leading-snug);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -2395,17 +2433,17 @@ var NOTIFICATIONS_CSS = `
   height: 24px;
   border: none;
   background: transparent;
-  color: var(--brokr-toast-text-secondary, #52525b);
+  color: var(--brokr-toast-text-secondary);
   cursor: pointer;
-  border-radius: 6px;
+  border-radius: var(--brokr-radius-button);
   padding: 0;
   opacity: 0.5;
-  transition: opacity 0.15s, background 0.15s;
+  transition: opacity var(--brokr-duration-base) var(--brokr-ease), background var(--brokr-duration-base) var(--brokr-ease);
 }
 
 .brokr-toast-dismiss:hover {
   opacity: 1;
-  background: color-mix(in srgb, var(--brokr-toast-text, #0a0a0a) 8%, transparent);
+  background: color-mix(in srgb, var(--brokr-toast-text) 8%, transparent);
 }
 
 /* -------------------------------------------------------------------------
@@ -2429,15 +2467,15 @@ var NOTIFICATIONS_CSS = `
   background: transparent;
   color: var(--brokr-text-secondary);
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: var(--brokr-radius-button);
   padding: 0;
   position: relative;
-  transition: color 0.15s, background 0.15s;
+  transition: color var(--brokr-duration-base) var(--brokr-ease), background var(--brokr-duration-base) var(--brokr-ease);
 }
 
 .brokr-notif-bell:hover {
   color: var(--brokr-text-primary);
-  background: color-mix(in srgb, var(--brokr-text-primary) 6%, transparent);
+  background: var(--brokr-subtle-fill);
 }
 
 .brokr-notif-badge {
@@ -2446,12 +2484,12 @@ var NOTIFICATIONS_CSS = `
   right: 2px;
   min-width: 16px;
   height: 16px;
-  padding: 0 4px;
-  border-radius: 999px;
+  padding: 0 var(--brokr-space-1);
+  border-radius: var(--brokr-radius-pill);
   background: var(--brokr-error, #ef4444);
-  color: #fff;
+  color: var(--brokr-primary-contrast);
   font-size: 10px;
-  font-weight: 700;
+  font-weight: var(--brokr-font-weight-bold);
   line-height: 16px;
   text-align: center;
   pointer-events: none;
@@ -2469,14 +2507,14 @@ var NOTIFICATIONS_CSS = `
   width: 360px;
   max-height: 420px;
   background: var(--brokr-surface);
-  border: 1px solid var(--brokr-border);
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) + 4px);
+  box-shadow: var(--brokr-shadow-lg);
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  z-index: 9999;
-  animation: brokr-dropdown-enter 0.15s ease-out;
+  z-index: var(--brokr-z-notification);
+  animation: brokr-dropdown-enter var(--brokr-duration-base) ease-out;
 }
 
 @keyframes brokr-dropdown-enter {
@@ -2489,13 +2527,13 @@ var NOTIFICATIONS_CSS = `
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--brokr-border);
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+  border-bottom: 1px solid var(--brokr-muted-border);
 }
 
 .brokr-notif-dropdown-title {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: var(--brokr-font-size-xs);
+  font-weight: var(--brokr-font-weight-semibold);
   color: var(--brokr-text-primary);
 }
 
@@ -2504,12 +2542,12 @@ var NOTIFICATIONS_CSS = `
   border: none;
   background: transparent;
   color: var(--brokr-primary);
-  font-size: 12px;
-  font-weight: 500;
+  font-size: var(--brokr-font-size-xs);
+  font-weight: var(--brokr-font-weight-medium);
   cursor: pointer;
   padding: 2px 6px;
-  border-radius: 4px;
-  transition: background 0.15s;
+  border-radius: var(--brokr-radius-sm);
+  transition: background var(--brokr-duration-base) var(--brokr-ease);
 }
 
 .brokr-notif-mark-all:hover {
@@ -2533,14 +2571,14 @@ var NOTIFICATIONS_CSS = `
   box-sizing: border-box;
   display: flex;
   align-items: flex-start;
-  gap: 10px;
-  padding: 12px 16px;
+  gap: var(--brokr-space-3);
+  padding: var(--brokr-space-3) var(--brokr-space-4);
   border: none;
   background: transparent;
   cursor: pointer;
   text-align: left;
   width: 100%;
-  transition: background 0.15s;
+  transition: background var(--brokr-duration-base) var(--brokr-ease);
   border-bottom: 1px solid color-mix(in srgb, var(--brokr-border) 50%, transparent);
 }
 
@@ -2558,7 +2596,7 @@ var NOTIFICATIONS_CSS = `
   flex-shrink: 0;
   width: 8px;
   height: 8px;
-  border-radius: 50%;
+  border-radius: var(--brokr-radius-pill);
   margin-top: 4px;
   background: var(--brokr-text-secondary);
 }
@@ -2586,16 +2624,16 @@ var NOTIFICATIONS_CSS = `
 }
 
 .brokr-notif-item-title {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: var(--brokr-font-size-xs);
+  font-weight: var(--brokr-font-weight-semibold);
   color: var(--brokr-text-primary);
-  line-height: 1.35;
+  line-height: var(--brokr-leading-snug);
 }
 
 .brokr-notif-item-message {
-  font-size: 12px;
+  font-size: var(--brokr-font-size-xs);
   color: var(--brokr-text-secondary);
-  line-height: 1.4;
+  line-height: var(--brokr-leading-snug);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -2621,12 +2659,12 @@ var NOTIFICATIONS_CSS = `
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  padding: 40px 16px;
+  gap: var(--brokr-space-2);
+  padding: var(--brokr-space-10) var(--brokr-space-4);
 }
 
 .brokr-notif-empty-text {
-  font-size: 13px;
+  font-size: var(--brokr-font-size-xs);
   color: var(--brokr-text-secondary);
   opacity: 0.6;
 }
@@ -2641,8 +2679,8 @@ var NOTIFICATIONS_CSS = `
   max-width: 640px;
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--brokr-border);
-  border-radius: 12px;
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) + 4px);
   background: var(--brokr-surface);
   overflow: hidden;
 }
@@ -2652,13 +2690,13 @@ var NOTIFICATIONS_CSS = `
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--brokr-border);
+  padding: var(--brokr-space-4) var(--brokr-space-5);
+  border-bottom: 1px solid var(--brokr-muted-border);
 }
 
 .brokr-notif-list-title {
-  font-size: 16px;
-  font-weight: 600;
+  font-size: var(--brokr-font-size-md);
+  font-weight: var(--brokr-font-weight-semibold);
   color: var(--brokr-text-primary);
 }
 

package/dist/react-theme.js

@@ -4175,10 +4175,12 @@ function getBrokrRootStyle(theme) {
     ...theme.colors.error ? { ["--brokr-error"]: theme.colors.error } : {},
     ...theme.colors.success ? { ["--brokr-success"]: theme.colors.success } : {},
     ...theme.colors.warning ? { ["--brokr-warning"]: theme.colors.warning } : {},
-    ...theme.colors.toastBg ? { ["--brokr-toast-bg"]: theme.colors.toastBg } : {},
-    ...theme.colors.toastText ? { ["--brokr-toast-text"]: theme.colors.toastText } : {},
-    ...theme.colors.toastTextSecondary ? { ["--brokr-toast-text-secondary"]: theme.colors.toastTextSecondary } : {},
-    ...theme.colors.toastBorder ? { ["--brokr-toast-border"]: theme.colors.toastBorder } : {},
+    // Toast vars always emitted with smart defaults — toasts stay light in dark mode.
+    // Users can override via theme.colors.toastBg etc.
+    ["--brokr-toast-bg"]: theme.colors.toastBg ?? "#ffffff",
+    ["--brokr-toast-text"]: theme.colors.toastText ?? "#0a0a0a",
+    ["--brokr-toast-text-secondary"]: theme.colors.toastTextSecondary ?? "#52525b",
+    ["--brokr-toast-border"]: theme.colors.toastBorder ?? "#e4e4e7",
     ["--brokr-radius-card"]: `${theme.radii.card}px`,
     ["--brokr-radius-input"]: `${theme.radii.input}px`,
     ["--brokr-radius-button"]: `${theme.radii.button}px`

package/dist/react-theme.mjs

@@ -4152,10 +4152,12 @@ function getBrokrRootStyle(theme) {
     ...theme.colors.error ? { ["--brokr-error"]: theme.colors.error } : {},
     ...theme.colors.success ? { ["--brokr-success"]: theme.colors.success } : {},
     ...theme.colors.warning ? { ["--brokr-warning"]: theme.colors.warning } : {},
-    ...theme.colors.toastBg ? { ["--brokr-toast-bg"]: theme.colors.toastBg } : {},
-    ...theme.colors.toastText ? { ["--brokr-toast-text"]: theme.colors.toastText } : {},
-    ...theme.colors.toastTextSecondary ? { ["--brokr-toast-text-secondary"]: theme.colors.toastTextSecondary } : {},
-    ...theme.colors.toastBorder ? { ["--brokr-toast-border"]: theme.colors.toastBorder } : {},
+    // Toast vars always emitted with smart defaults — toasts stay light in dark mode.
+    // Users can override via theme.colors.toastBg etc.
+    ["--brokr-toast-bg"]: theme.colors.toastBg ?? "#ffffff",
+    ["--brokr-toast-text"]: theme.colors.toastText ?? "#0a0a0a",
+    ["--brokr-toast-text-secondary"]: theme.colors.toastTextSecondary ?? "#52525b",
+    ["--brokr-toast-border"]: theme.colors.toastBorder ?? "#e4e4e7",
     ["--brokr-radius-card"]: `${theme.radii.card}px`,
     ["--brokr-radius-input"]: `${theme.radii.input}px`,
     ["--brokr-radius-button"]: `${theme.radii.button}px`