@brokr/sdk 2.1.0 → 2.1.2

package/dist/react-styles.js

@@ -120,7 +120,7 @@ var RESET_CSS = `
 .brokr-root *::-webkit-scrollbar-thumb {
   background: color-mix(in srgb, var(--brokr-text-primary) 16%, transparent);
   border: 3px solid transparent;
-  border-radius: 999px;
+  border-radius: var(--brokr-radius-pill);
   background-clip: padding-box;
 }
 
@@ -158,11 +158,11 @@ var PRIMITIVES_CSS = `
   gap: var(--brokr-space-2);
   font: inherit;
   font-size: var(--brokr-font-size-sm);
-  font-weight: 600;
+  font-weight: var(--brokr-font-weight-semibold);
   min-height: 44px;
   padding: 0 var(--brokr-space-4);
   text-decoration: none;
-  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, opacity 150ms ease;
+  transition: background-color var(--brokr-duration-base) var(--brokr-ease), border-color var(--brokr-duration-base) var(--brokr-ease), transform var(--brokr-duration-base) var(--brokr-ease), opacity var(--brokr-duration-base) var(--brokr-ease);
 }
 
 .brokr-button:hover,
@@ -209,7 +209,7 @@ var PRIMITIVES_CSS = `
   font-size: var(--brokr-font-size-sm);
   min-height: 44px;
   padding: 0.825rem 0.95rem;
-  transition: border-color 150ms ease, background-color 150ms ease;
+  transition: border-color var(--brokr-duration-base) var(--brokr-ease), background-color var(--brokr-duration-base) var(--brokr-ease);
 }
 
 .brokr-input::placeholder,
@@ -238,7 +238,7 @@ var PRIMITIVES_CSS = `
   color: var(--brokr-text-secondary);
   display: block;
   font-size: var(--brokr-font-size-xs);
-  font-weight: 600;
+  font-weight: var(--brokr-font-weight-semibold);
   letter-spacing: 0.02em;
   margin-bottom: var(--brokr-space-2);
   text-transform: uppercase;
@@ -247,7 +247,7 @@ var PRIMITIVES_CSS = `
 .brokr-title {
   color: var(--brokr-text-primary);
   font-size: var(--brokr-font-size-xl);
-  font-weight: 700;
+  font-weight: var(--brokr-font-weight-bold);
   letter-spacing: -0.03em;
   margin: 0;
 }
@@ -255,7 +255,7 @@ var PRIMITIVES_CSS = `
 .brokr-heading {
   color: var(--brokr-text-primary);
   font-size: var(--brokr-font-size-2xl);
-  font-weight: 700;
+  font-weight: var(--brokr-font-weight-bold);
   letter-spacing: -0.04em;
   line-height: 1;
   margin: 0;
@@ -282,11 +282,11 @@ var PRIMITIVES_CSS = `
 .brokr-badge {
   align-items: center;
   border: 1px solid var(--brokr-muted-border);
-  border-radius: 999px;
+  border-radius: var(--brokr-radius-pill);
   color: var(--brokr-text-secondary);
   display: inline-flex;
   font-size: var(--brokr-font-size-xs);
-  font-weight: 700;
+  font-weight: var(--brokr-font-weight-bold);
   gap: var(--brokr-space-1);
   letter-spacing: 0.06em;
   min-height: 28px;
@@ -388,7 +388,7 @@ var AUTH_CSS = `
 .brokr-brand-name {
   color: var(--brokr-text-primary);
   font-size: var(--brokr-font-size-sm);
-  font-weight: 700;
+  font-weight: var(--brokr-font-weight-bold);
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
@@ -451,7 +451,7 @@ var ACCOUNT_CSS = `
 }
 
 .brokr-account-trigger[data-display="avatar"] {
-  border-radius: 999px;
+  border-radius: var(--brokr-radius-pill);
   gap: 0;
   justify-content: center;
   min-width: 44px;
@@ -462,10 +462,10 @@ var ACCOUNT_CSS = `
 .brokr-avatar-lg {
   align-items: center;
   background: var(--brokr-subtle-fill-strong);
-  border-radius: 999px;
+  border-radius: var(--brokr-radius-pill);
   color: var(--brokr-text-primary);
   display: inline-flex;
-  font-weight: 700;
+  font-weight: var(--brokr-font-weight-bold);
   justify-content: center;
   overflow: hidden;
 }
@@ -552,7 +552,7 @@ var ACCOUNT_CSS = `
   inset: 0;
   opacity: 0;
   position: absolute;
-  transition: opacity 150ms ease;
+  transition: opacity var(--brokr-duration-base) var(--brokr-ease);
 }
 
 .brokr-profile-photo:hover .brokr-profile-photo-overlay,
@@ -594,7 +594,7 @@ var ACCOUNT_CSS = `
 .brokr-account-sidebar-kicker {
   color: var(--brokr-text-secondary);
   font-size: 0.68rem;
-  font-weight: 700;
+  font-weight: var(--brokr-font-weight-bold);
   letter-spacing: 0.12em;
   line-height: 1;
   opacity: 0.8;
@@ -619,7 +619,7 @@ var ACCOUNT_CSS = `
   display: inline-flex;
   font: inherit;
   font-size: var(--brokr-font-size-sm);
-  font-weight: 600;
+  font-weight: var(--brokr-font-weight-semibold);
   gap: 0.7rem;
   justify-content: flex-start;
   line-height: 1;
@@ -764,11 +764,11 @@ var ACCOUNT_CSS = `
   align-items: center;
   background: color-mix(in srgb, var(--brokr-text-primary) 6%, transparent);
   border: 1px solid var(--brokr-muted-border);
-  border-radius: 999px;
+  border-radius: var(--brokr-radius-pill);
   color: var(--brokr-text-secondary);
   display: inline-flex;
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: var(--brokr-font-weight-semibold);
   gap: 0.35rem;
   min-height: 28px;
   padding: 0 0.7rem;
@@ -801,14 +801,14 @@ var ACCOUNT_CSS = `
 .brokr-account-summary-copy strong {
   color: var(--brokr-text-primary);
   font-size: 1.05rem;
-  font-weight: 600;
+  font-weight: var(--brokr-font-weight-semibold);
   letter-spacing: -0.02em;
 }
 
 .brokr-account-summary-kicker {
   color: var(--brokr-text-secondary);
   font-size: 0.72rem;
-  font-weight: 700;
+  font-weight: var(--brokr-font-weight-bold);
   letter-spacing: 0.12em;
   text-transform: uppercase;
 }
@@ -817,7 +817,7 @@ var ACCOUNT_CSS = `
   align-items: center;
   background: color-mix(in srgb, var(--brokr-text-primary) 6%, transparent);
   border: 1px solid var(--brokr-muted-border);
-  border-radius: 10px;
+  border-radius: calc(var(--brokr-radius-card) + 2px);
   color: var(--brokr-text-secondary);
   display: inline-flex;
   height: 40px;
@@ -854,7 +854,7 @@ var ACCOUNT_CSS = `
 .brokr-account-session-info strong {
   color: var(--brokr-text-primary);
   font-size: var(--brokr-font-size-sm);
-  font-weight: 600;
+  font-weight: var(--brokr-font-weight-semibold);
 }
 
 .brokr-account-session-detail,
@@ -877,11 +877,11 @@ var ACCOUNT_CSS = `
   cursor: pointer;
   font: inherit;
   font-size: 0.8125rem;
-  font-weight: 600;
+  font-weight: var(--brokr-font-weight-semibold);
   min-height: 34px;
   padding: 0 0.7rem;
   text-decoration: none;
-  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
+  transition: color var(--brokr-duration-base) var(--brokr-ease), background-color var(--brokr-duration-base) var(--brokr-ease), border-color var(--brokr-duration-base) var(--brokr-ease);
 }
 
 .brokr-account-link-button:hover {
@@ -942,7 +942,7 @@ var ACCOUNT_CSS = `
 .brokr-account-menu-copy strong {
   color: var(--brokr-text-primary);
   font-size: 0.95rem;
-  font-weight: 600;
+  font-weight: var(--brokr-font-weight-semibold);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -974,7 +974,7 @@ var ACCOUNT_CSS = `
   display: inline-flex;
   font: inherit;
   font-size: var(--brokr-font-size-sm);
-  font-weight: 600;
+  font-weight: var(--brokr-font-weight-semibold);
   gap: 0.65rem;
   justify-content: flex-start;
   min-height: 38px;
@@ -1067,91 +1067,165 @@ var CHAT_CSS = `
 }
 
 .brokr-ai-chat-sidebar {
+  align-content: start;
+  background: transparent;
   border-right: 1px solid var(--brokr-muted-border);
   display: grid;
-  gap: var(--brokr-space-4);
-  padding: var(--brokr-space-4);
-  align-content: start;
-  overflow-y: auto;
+  gap: var(--brokr-space-3);
   height: 100%;
   max-height: 100%;
   min-height: 0;
+  overflow-y: auto;
+  padding: var(--brokr-space-3);
+}
+
+.brokr-ai-chat-sidebar-skeleton {
+  display: grid;
+  gap: var(--brokr-space-2);
+  padding: 0 var(--brokr-space-3);
+}
+
+.brokr-ai-chat-sidebar-new-chat {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: var(--brokr-radius-button);
+  color: var(--brokr-text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--brokr-font-size-sm);
+  font-weight: var(--brokr-font-weight-medium);
+  gap: var(--brokr-space-2);
+  justify-content: flex-start;
+  min-height: 44px;
+  padding: 0 var(--brokr-space-3);
+  text-align: left;
+  transition:
+    background-color var(--brokr-duration-base) var(--brokr-ease),
+    color var(--brokr-duration-base) var(--brokr-ease),
+    border-color var(--brokr-duration-base) var(--brokr-ease);
+  width: 100%;
+}
+
+.brokr-ai-chat-sidebar-new-chat:hover {
+  background: var(--brokr-subtle-fill);
+  border-color: color-mix(in srgb, var(--brokr-text-primary) 15%, var(--brokr-border));
+  color: var(--brokr-text-primary);
+}
+
+.brokr-ai-chat-sidebar-groups {
+  display: grid;
+  gap: var(--brokr-space-4);
+}
+
+.brokr-ai-chat-sidebar-group {
+  display: grid;
+  gap: var(--brokr-space-2);
+}
+
+.brokr-ai-chat-sidebar-kicker {
+  color: var(--brokr-text-secondary);
+  font-size: var(--brokr-font-size-xs);
+  font-weight: var(--brokr-font-weight-semibold);
+  opacity: 0.7;
+  padding: 0 var(--brokr-space-3);
+  text-transform: uppercase;
 }
 
 .brokr-ai-chat-sidebar-empty {
+  align-items: center;
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: var(--brokr-radius-card);
   display: flex;
   flex: 1;
-  align-items: center;
   justify-content: center;
-  padding: var(--brokr-space-6) var(--brokr-space-4);
+  padding: var(--brokr-space-5) var(--brokr-space-4);
 }
 
 .brokr-ai-chat-sidebar-empty-text {
   color: var(--brokr-text-secondary);
   font-size: var(--brokr-font-size-xs);
-  line-height: 1.5;
+  line-height: var(--brokr-leading-normal);
   text-align: center;
   opacity: 0.6;
 }
 
 .brokr-ai-chat-sidebar-button {
   align-items: center;
-  background: transparent;
-  border: none;
+  appearance: none;
+  background: var(--brokr-subtle-fill);
+  border: 1px solid var(--brokr-muted-border);
   border-radius: var(--brokr-radius-button);
   color: var(--brokr-text-secondary);
   cursor: pointer;
   display: inline-flex;
   font: inherit;
   font-size: var(--brokr-font-size-xs);
-  font-weight: 500;
+  font-weight: var(--brokr-font-weight-medium);
   gap: var(--brokr-space-2);
-  justify-content: flex-start;
-  padding: 0.5rem 0.65rem;
-  padding-bottom: 0.65rem;
-  margin-bottom: var(--brokr-space-2);
-  border-bottom: 1px solid var(--brokr-muted-border);
-  border-radius: 0;
-  transition: color 120ms ease;
-  width: 100%;
+  justify-content: center;
+  min-height: 36px;
+  padding: 0 var(--brokr-space-3);
+  transition:
+    color var(--brokr-duration-base) var(--brokr-ease),
+    background-color var(--brokr-duration-base) var(--brokr-ease);
 }
 
 .brokr-ai-chat-sidebar-button:hover {
+  background: var(--brokr-subtle-fill-strong);
   color: var(--brokr-text-primary);
 }
 
 .brokr-ai-chat-conversations {
   display: grid;
-  gap: 2px;
+  gap: var(--brokr-space-1);
 }
 
 .brokr-ai-chat-conversation {
   appearance: none;
+  align-items: center;
   background: transparent;
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--brokr-radius-button);
   color: var(--brokr-text-secondary);
   cursor: pointer;
+  display: inline-flex;
   font: inherit;
   font-size: var(--brokr-font-size-xs);
-  font-weight: 400;
+  font-weight: var(--brokr-font-weight-medium);
+  gap: var(--brokr-space-2);
+  min-height: calc(var(--brokr-space-8) + var(--brokr-space-1));
   overflow: hidden;
-  padding: 0.5rem 0.65rem;
+  padding: 0 var(--brokr-space-3);
   text-align: left;
-  text-overflow: ellipsis;
-  transition: color 120ms ease, background 120ms ease;
-  white-space: nowrap;
+  transition:
+    color var(--brokr-duration-base) var(--brokr-ease),
+    background-color var(--brokr-duration-base) var(--brokr-ease),
+    border-color var(--brokr-duration-base) var(--brokr-ease);
+  width: 100%;
 }
 
 .brokr-ai-chat-conversation:hover {
+  border-color: color-mix(in srgb, var(--brokr-text-primary) 9%, transparent);
   color: var(--brokr-text-primary);
   background: var(--brokr-subtle-fill);
 }
 
 .brokr-ai-chat-conversation[data-active="true"] {
+  border-color: color-mix(in srgb, var(--brokr-text-primary) 12%, transparent);
   color: var(--brokr-text-primary);
-  background: var(--brokr-subtle-fill);
-  font-weight: 500;
+  background: var(--brokr-subtle-fill-strong);
+  font-weight: var(--brokr-font-weight-semibold);
+}
+
+.brokr-ai-chat-conversation-label {
+  flex: 1;
+  line-height: var(--brokr-leading-snug);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .brokr-ai-chat-stage {
@@ -1203,7 +1277,7 @@ var CHAT_CSS = `
 .brokr-ai-chat-title-loading span {
   animation: brokrTypingBounce 1.2s ease-in-out infinite;
   background: color-mix(in srgb, var(--brokr-text-primary) 50%, transparent);
-  border-radius: 999px;
+  border-radius: var(--brokr-radius-pill);
   display: inline-block;
   height: 0.28rem;
   width: 0.28rem;
@@ -1412,7 +1486,7 @@ var CHAT_CSS = `
 .brokr-ai-chat-typing span {
   animation: brokrTypingBounce 1.2s ease-in-out infinite;
   background: color-mix(in srgb, var(--brokr-text-primary) 70%, transparent);
-  border-radius: 999px;
+  border-radius: var(--brokr-radius-pill);
   display: inline-block;
   height: 0.42rem;
   width: 0.42rem;
@@ -1447,11 +1521,11 @@ var CHAT_EXTRAS_CSS = `
   display: inline-flex;
   font: inherit;
   font-size: var(--brokr-font-size-sm);
-  font-weight: 600;
+  font-weight: var(--brokr-font-weight-semibold);
   gap: var(--brokr-space-2);
   min-height: 36px;
   padding: 0 0.75rem;
-  transition: background-color 120ms ease;
+  transition: background-color var(--brokr-duration-base) var(--brokr-ease);
   white-space: nowrap;
 }
 
@@ -1490,7 +1564,7 @@ var CHAT_EXTRAS_CSS = `
   gap: var(--brokr-space-2);
   padding: 0.5rem 0.75rem;
   text-align: left;
-  transition: background-color 100ms ease;
+  transition: background-color var(--brokr-duration-fast) var(--brokr-ease);
   width: 100%;
 }
 
@@ -1512,7 +1586,7 @@ var CHAT_EXTRAS_CSS = `
 }
 
 .brokr-model-dot {
-  border-radius: 999px;
+  border-radius: var(--brokr-radius-pill);
   display: inline-block;
   flex-shrink: 0;
   height: 8px;
@@ -1596,7 +1670,7 @@ var CHAT_EXTRAS_CSS = `
   gap: var(--brokr-space-2);
   padding: 0.5rem 0.75rem;
   text-align: left;
-  transition: background-color 100ms ease;
+  transition: background-color var(--brokr-duration-fast) var(--brokr-ease);
   width: 100%;
 }
 
@@ -1638,7 +1712,7 @@ var CHAT_EXTRAS_CSS = `
   position: absolute;
   right: 0;
   top: -4px;
-  transition: opacity 120ms ease, background-color 120ms ease;
+  transition: opacity var(--brokr-duration-base) var(--brokr-ease), background-color var(--brokr-duration-base) var(--brokr-ease);
   width: 26px;
 }
 
@@ -1749,8 +1823,9 @@ var CHAT_EXTRAS_CSS = `
   color: var(--brokr-text-primary);
   font: inherit;
   font-size: var(--brokr-font-size-xs);
+  min-height: calc(var(--brokr-space-8) + var(--brokr-space-1));
   outline: none;
-  padding: 0.5rem 0.65rem;
+  padding: 0 var(--brokr-space-3);
   width: 100%;
 }
 
@@ -1772,6 +1847,44 @@ var COMPOSITES_CSS = `
   z-index: var(--brokr-z-fab);
 }
 
+.brokr-chat-fab-trigger {
+  align-items: center;
+  appearance: none;
+  background: var(--brokr-bg);
+  border: 1px solid color-mix(in srgb, var(--brokr-border) 85%, transparent);
+  border-radius: var(--brokr-radius-pill);
+  box-shadow:
+    0 10px 24px color-mix(in srgb, var(--brokr-text-primary) 14%, transparent),
+    0 0 16px color-mix(in srgb, var(--brokr-text-primary) 10%, transparent);
+  color: var(--brokr-text-primary);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  height: 56px;
+  justify-content: center;
+  min-height: 56px;
+  padding: 0;
+  transition:
+    transform var(--brokr-duration-base) var(--brokr-ease),
+    box-shadow var(--brokr-duration-base) var(--brokr-ease),
+    border-color var(--brokr-duration-base) var(--brokr-ease);
+  width: 56px;
+}
+
+.brokr-chat-fab-trigger:hover {
+  border-color: color-mix(in srgb, var(--brokr-text-primary) 20%, var(--brokr-border));
+  transform: translateY(-1px);
+}
+
+.brokr-chat-fab-trigger:active {
+  transform: translateY(0);
+}
+
+.brokr-chat-fab-trigger:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--brokr-primary) 60%, transparent);
+  outline-offset: 2px;
+}
+
 .brokr-chat-panel {
   display: grid;
   gap: var(--brokr-space-4);
@@ -1821,23 +1934,6 @@ var COMPOSITES_CSS = `
   padding: var(--brokr-space-2);
 }
 
-.brokr-chat-starters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--brokr-space-2);
-}
-
-.brokr-chat-starter {
-  background: var(--brokr-subtle-fill);
-  border: 1px solid var(--brokr-muted-border);
-  border-radius: 999px;
-  color: var(--brokr-text-primary);
-  cursor: pointer;
-  font: inherit;
-  min-height: 36px;
-  padding: 0 0.9rem;
-}
-
 .brokr-chat-bubble[data-role="user"] {
   background: color-mix(in srgb, var(--brokr-primary) 10%, var(--brokr-surface));
   justify-self: end;
@@ -1901,7 +1997,7 @@ var COMPOSITES_CSS = `
   min-height: 220px;
   padding: var(--brokr-space-6);
   text-align: center;
-  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
+  transition: border-color var(--brokr-duration-base) var(--brokr-ease), background-color var(--brokr-duration-base) var(--brokr-ease), transform var(--brokr-duration-base) var(--brokr-ease);
 }
 
 .brokr-upload-dropzone[data-drag="true"] {
@@ -1922,13 +2018,23 @@ var COMPOSITES_CSS = `
 // src/react/css/gates.ts
 var GATES_CSS = `
 .brokr-plan-card {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: var(--brokr-space-5);
   min-height: 100%;
   padding: var(--brokr-space-6);
   position: relative;
 }
 
+.brokr-plan-card > .brokr-feature-list {
+  flex: 1;
+}
+
+.brokr-plan-card > .brokr-button,
+.brokr-plan-card > .brokr-button-secondary {
+  flex-shrink: 0;
+}
+
 .brokr-plan-card[data-highlight="true"] {
   background: color-mix(in srgb, var(--brokr-surface) 86%, var(--brokr-bg));
   transform: translateY(-2px);
@@ -1942,7 +2048,7 @@ var GATES_CSS = `
 
 .brokr-plan-value {
   font-size: clamp(2rem, 4vw, 3rem);
-  font-weight: 700;
+  font-weight: var(--brokr-font-weight-bold);
   letter-spacing: -0.05em;
   line-height: 1;
 }
@@ -1965,7 +2071,7 @@ var GATES_CSS = `
 
 .brokr-feature-bullet {
   background: var(--brokr-text-primary);
-  border-radius: 999px;
+  border-radius: var(--brokr-radius-pill);
   height: 6px;
   margin-top: 0.45rem;
   opacity: 0.75;
@@ -1985,7 +2091,7 @@ var GATES_CSS = `
 
 .brokr-meter-bar {
   background: var(--brokr-subtle-fill);
-  border-radius: 999px;
+  border-radius: var(--brokr-radius-pill);
   height: 8px;
   overflow: hidden;
   width: 100%;
@@ -1995,7 +2101,7 @@ var GATES_CSS = `
   background: var(--brokr-primary);
   border-radius: inherit;
   height: 100%;
-  transition: width 150ms ease;
+  transition: width var(--brokr-duration-base) var(--brokr-ease);
 }
 `;
 
@@ -2010,7 +2116,7 @@ var SKELETON_CSS = `
     color-mix(in srgb, var(--brokr-text-primary) 5%, transparent) 100%
   );
   background-size: 200% 100%;
-  border-radius: 999px;
+  border-radius: var(--brokr-radius-pill);
   min-height: 16px;
 }
 `;
@@ -2034,16 +2140,20 @@ var MARKDOWN_CSS = `
 
 .brokr-md strong {
   color: var(--brokr-text-primary);
-  font-weight: 600;
+  font-weight: var(--brokr-font-weight-semibold);
 }
 
 .brokr-md em {
   font-style: italic;
 }
 
+.brokr-md del {
+  opacity: 0.85;
+}
+
 .brokr-md-inline-code {
   background: var(--brokr-subtle-fill-strong);
-  border-radius: 4px;
+  border-radius: var(--brokr-radius-sm);
   color: var(--brokr-primary);
   font-family: var(--brokr-font-mono);
   font-size: 0.85em;
@@ -2062,7 +2172,7 @@ var MARKDOWN_CSS = `
 
 .brokr-md-heading {
   color: var(--brokr-text-primary);
-  font-weight: 600;
+  font-weight: var(--brokr-font-weight-semibold);
   line-height: 1.3;
   margin: 1.2em 0 0.5em;
 }
@@ -2085,7 +2195,6 @@ var MARKDOWN_CSS = `
 }
 
 .brokr-md-list {
-  list-style: none;
   margin: 0.5em 0;
   padding: 0 0 0 1.2em;
 }
@@ -2093,16 +2202,85 @@ var MARKDOWN_CSS = `
 .brokr-md-list li {
   line-height: 1.7;
   margin-bottom: 0.25em;
+}
+
+.brokr-md-list-unordered {
+  list-style: none;
+}
+
+.brokr-md-list-unordered li {
   position: relative;
 }
 
-.brokr-md-list li::before {
+.brokr-md-list-unordered li::before {
   content: '\u2022';
   color: var(--brokr-text-secondary);
   left: -1em;
   position: absolute;
 }
 
+.brokr-md-list-ordered {
+  list-style: decimal;
+  padding-left: 1.35em;
+}
+
+.brokr-md-list-ordered li::marker {
+  color: var(--brokr-text-secondary);
+}
+
+.brokr-md-quote {
+  border-left: 1px solid var(--brokr-muted-border);
+  color: var(--brokr-text-secondary);
+  margin: 0.8em 0;
+  padding: 0 0 0 0.9em;
+}
+
+.brokr-md-quote-line {
+  line-height: 1.7;
+  margin: 0 0 0.4em;
+}
+
+.brokr-md-quote-line:last-child {
+  margin-bottom: 0;
+}
+
+.brokr-md-table-wrap {
+  margin: 0.9em 0;
+  overflow-x: auto;
+}
+
+.brokr-md-table {
+  border-collapse: collapse;
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: var(--brokr-radius-card);
+  min-width: 100%;
+  width: max-content;
+}
+
+.brokr-md-table th,
+.brokr-md-table td {
+  border-bottom: 1px solid var(--brokr-muted-border);
+  font-size: var(--brokr-font-size-sm);
+  line-height: var(--brokr-leading-snug);
+  padding: var(--brokr-space-2) var(--brokr-space-3);
+  text-align: left;
+  vertical-align: top;
+}
+
+.brokr-md-table th {
+  background: var(--brokr-subtle-fill);
+  color: var(--brokr-text-primary);
+  font-weight: var(--brokr-font-weight-semibold);
+}
+
+.brokr-md-table td {
+  color: var(--brokr-text-secondary);
+}
+
+.brokr-md-table tr:last-child td {
+  border-bottom: none;
+}
+
 /* \u2500\u2500\u2500 Code blocks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .brokr-md-codeblock {
@@ -2125,7 +2303,7 @@ var MARKDOWN_CSS = `
 .brokr-md-codeblock-lang {
   color: var(--brokr-text-secondary);
   font-family: var(--brokr-font-mono);
-  font-weight: 500;
+  font-weight: var(--brokr-font-weight-medium);
   text-transform: lowercase;
 }
 
@@ -2141,7 +2319,7 @@ var MARKDOWN_CSS = `
   gap: 0.35em;
   padding: 0.15em 0.4em;
   border-radius: var(--brokr-radius-button);
-  transition: color 120ms ease, background 120ms ease;
+  transition: color var(--brokr-duration-base) var(--brokr-ease), background var(--brokr-duration-base) var(--brokr-ease);
 }
 
 .brokr-md-codeblock-copy:hover {
@@ -2277,7 +2455,8 @@ var RESPONSIVE_CSS = `
   }
 
   .brokr-ai-chat-model-select,
-  .brokr-ai-chat-sidebar-button {
+  .brokr-ai-chat-sidebar-button,
+  .brokr-ai-chat-sidebar-new-chat {
     width: 100%;
   }
 
@@ -2742,8 +2921,274 @@ var NOTIFICATIONS_CSS = `
 }
 `;
 
+// src/react/css/data-table.ts
+var DATA_TABLE_CSS = `
+.brokr-dt-wrap {
+  border: 1px solid var(--brokr-muted-border);
+  border-radius: calc(var(--brokr-radius-card) + 2px);
+  overflow: hidden;
+}
+
+.brokr-dt-scroll {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--brokr-text-primary) 12%, transparent) transparent;
+}
+
+.brokr-dt {
+  border-collapse: collapse;
+  min-width: 100%;
+  width: 100%;
+}
+
+.brokr-dt-th {
+  background: var(--brokr-subtle-fill);
+  border-bottom: 1px solid var(--brokr-muted-border);
+  color: var(--brokr-text-secondary);
+  font-size: var(--brokr-font-size-xs);
+  font-weight: var(--brokr-font-weight-semibold);
+  letter-spacing: 0.03em;
+  line-height: var(--brokr-leading-snug);
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.brokr-dt-th--sortable {
+  padding: 0;
+}
+
+.brokr-dt-sort-btn {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  gap: var(--brokr-space-1);
+  letter-spacing: inherit;
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+  text-transform: inherit;
+  width: 100%;
+}
+
+.brokr-dt-sort-btn:hover {
+  color: var(--brokr-text-primary);
+}
+
+.brokr-dt-td {
+  border-bottom: 1px solid color-mix(in srgb, var(--brokr-border) 40%, transparent);
+  color: var(--brokr-text-primary);
+  font-size: var(--brokr-font-size-sm);
+  line-height: var(--brokr-leading-snug);
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+  vertical-align: middle;
+}
+
+.brokr-dt-row:last-child .brokr-dt-td {
+  border-bottom: none;
+}
+
+.brokr-dt-row--clickable {
+  cursor: pointer;
+  transition: background-color var(--brokr-duration-fast) var(--brokr-ease);
+}
+
+.brokr-dt-row--clickable:hover {
+  background: var(--brokr-subtle-fill);
+}
+
+.brokr-dt-empty {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 120px;
+  padding: var(--brokr-space-8);
+}
+
+.brokr-dt-pagination {
+  align-items: center;
+  border-top: 1px solid var(--brokr-muted-border);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--brokr-space-3) var(--brokr-space-4);
+}
+
+.brokr-dt-pagination-info {
+  color: var(--brokr-text-secondary);
+  font-size: var(--brokr-font-size-xs);
+}
+
+.brokr-dt-pagination-btns {
+  align-items: center;
+  display: flex;
+  gap: var(--brokr-space-2);
+}
+
+.brokr-dt-page-btn {
+  min-height: 32px;
+  min-width: 32px;
+  padding: 0;
+}
+
+.brokr-dt-page-label {
+  color: var(--brokr-text-secondary);
+  font-size: var(--brokr-font-size-xs);
+  min-width: 48px;
+  text-align: center;
+}
+`;
+
+// src/react/css/stats-grid.ts
+var STATS_GRID_CSS = `
+.brokr-stats-grid {
+  display: grid;
+  gap: var(--brokr-space-4);
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.brokr-metric-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--brokr-space-2);
+  padding: var(--brokr-space-5);
+}
+
+.brokr-metric-label {
+  color: var(--brokr-text-secondary);
+  font-size: var(--brokr-font-size-xs);
+  font-weight: var(--brokr-font-weight-medium);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.brokr-metric-row {
+  align-items: baseline;
+  display: flex;
+  gap: var(--brokr-space-2);
+}
+
+.brokr-metric-value {
+  color: var(--brokr-text-primary);
+  font-size: var(--brokr-font-size-xl);
+  font-weight: var(--brokr-font-weight-bold);
+  letter-spacing: -0.03em;
+  line-height: 1;
+}
+
+.brokr-metric-trend {
+  font-size: var(--brokr-font-size-xs);
+  font-weight: var(--brokr-font-weight-semibold);
+  line-height: 1;
+}
+
+.brokr-metric-trend--up {
+  color: var(--brokr-success, #22c55e);
+}
+
+.brokr-metric-trend--down {
+  color: var(--brokr-error, #ef4444);
+}
+
+.brokr-metric-sparkline {
+  height: 24px;
+  margin-top: var(--brokr-space-1);
+  width: 100%;
+}
+`;
+
+// src/react/css/activity-feed.ts
+var ACTIVITY_FEED_CSS = `
+.brokr-feed {
+  display: flex;
+  flex-direction: column;
+}
+
+.brokr-feed-item {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--brokr-space-3);
+  padding: var(--brokr-space-3) 0;
+  position: relative;
+}
+
+.brokr-feed-item + .brokr-feed-item {
+  border-top: 1px solid color-mix(in srgb, var(--brokr-border) 40%, transparent);
+}
+
+.brokr-feed-dot {
+  background: var(--brokr-text-secondary);
+  border-radius: var(--brokr-radius-pill);
+  flex-shrink: 0;
+  height: 8px;
+  margin-top: 5px;
+  width: 8px;
+}
+
+.brokr-feed-dot--success { background: var(--brokr-success, #22c55e); }
+.brokr-feed-dot--error { background: var(--brokr-error, #ef4444); }
+.brokr-feed-dot--warning { background: var(--brokr-warning, #f59e0b); }
+.brokr-feed-dot--default { background: var(--brokr-primary); }
+
+.brokr-feed-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.brokr-feed-title {
+  color: var(--brokr-text-primary);
+  font-size: var(--brokr-font-size-sm);
+  font-weight: var(--brokr-font-weight-medium);
+  line-height: var(--brokr-leading-snug);
+}
+
+.brokr-feed-message {
+  color: var(--brokr-text-secondary);
+  display: -webkit-box;
+  font-size: var(--brokr-font-size-xs);
+  line-height: var(--brokr-leading-snug);
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.brokr-feed-time {
+  color: var(--brokr-text-secondary);
+  flex-shrink: 0;
+  font-size: 11px;
+  margin-top: 2px;
+  opacity: 0.6;
+  white-space: nowrap;
+}
+
+.brokr-feed-empty {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 80px;
+  padding: var(--brokr-space-6);
+}
+`;
+
+// src/react/css/usage-grid.ts
+var USAGE_GRID_CSS = `
+.brokr-usage-grid {
+  display: grid;
+  gap: var(--brokr-space-4);
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+`;
+
 // src/react/css/index.ts
-var BROKR_GLOBAL_CSS = TOKENS_CSS + RESET_CSS + PRIMITIVES_CSS + AUTH_CSS + GATES_CSS + ACCOUNT_CSS + COMPOSITES_CSS + CHAT_CSS + SKELETON_CSS + ANIMATIONS_CSS + CHAT_EXTRAS_CSS + MARKDOWN_CSS + RESPONSIVE_CSS + NOTIFICATIONS_CSS;
+var BROKR_GLOBAL_CSS = TOKENS_CSS + RESET_CSS + PRIMITIVES_CSS + AUTH_CSS + GATES_CSS + ACCOUNT_CSS + COMPOSITES_CSS + CHAT_CSS + SKELETON_CSS + ANIMATIONS_CSS + CHAT_EXTRAS_CSS + MARKDOWN_CSS + RESPONSIVE_CSS + NOTIFICATIONS_CSS + DATA_TABLE_CSS + STATS_GRID_CSS + ACTIVITY_FEED_CSS + USAGE_GRID_CSS;
 
 // src/react/styles-entry.tsx
 function BrokrStyles() {