@ciridae/ui 1.0.1 → 1.0.3

package/dist/styled-system/styles.css

@@ -944,6 +944,10 @@
     --chart-muted: var(--colors-fg\.muted);
 }
 
+  .\--chart-cursor_token\(colors\.bg\.hover\) {
+    --chart-cursor: var(--colors-bg\.hover);
+}
+
   .\--row-gap-inline_token\(spacing\.layout\.pageGap\) {
     --row-gap-inline: var(--spacing-layout\.page-gap);
 }
@@ -1516,6 +1520,10 @@
     padding-inline: var(--spacing-panel\.default);
 }
 
+  .place-items_center {
+    place-items: center;
+}
+
   .bd-t_1px_solid_token\(colors\.border\.control\) {
     border-top: 1px solid var(--colors-border\.control);
 }
@@ -1552,10 +1560,6 @@
     overscroll-behavior: contain;
 }
 
-  .place-items_center {
-    place-items: center;
-}
-
   .bdr_inherit {
     border-radius: inherit;
 }
@@ -2160,6 +2164,10 @@
     font-size: var(--font-sizes-heading\.section);
 }
 
+  .ff_numeric {
+    font-family: var(--fonts-numeric);
+}
+
   .bx-sh_card {
     box-shadow: var(--shadows-card);
 }
@@ -2200,10 +2208,6 @@
     padding-inline-end: var(--spacing-control\.icon-inline);
 }
 
-  .d_none {
-    display: none;
-}
-
   .lh_body {
     line-height: var(--line-heights-body);
 }
@@ -2212,6 +2216,22 @@
     align-self: center;
 }
 
+  .ov-a_none {
+    overflow-anchor: none;
+}
+
+  .pos_sticky {
+    position: sticky;
+}
+
+  .z_1 {
+    z-index: 1;
+}
+
+  .pointer-events_none {
+    pointer-events: none;
+}
+
   .rg_control\.trackInset {
     row-gap: var(--spacing-control\.track-inset);
 }
@@ -2345,6 +2365,18 @@
     padding-inline-end: var(--spacing-control\.icon-gap);
 }
 
+  .grid-tc_minmax\(0\,_1fr\)_auto {
+    grid-template-columns: minmax(0, 1fr) auto;
+}
+
+  .ai_end {
+    align-items: end;
+}
+
+  .ff_mono {
+    font-family: var(--fonts-mono);
+}
+
   .d_inline-grid {
     display: inline-grid;
 }
@@ -2357,10 +2389,6 @@
     inset-inline-end: -1px;
 }
 
-  .ff_mono {
-    font-family: var(--fonts-mono);
-}
-
   .white-space_pre {
     white-space: pre;
 }
@@ -2397,14 +2425,6 @@
     align-self: stretch;
 }
 
-  .pos_sticky {
-    position: sticky;
-}
-
-  .z_1 {
-    z-index: 1;
-}
-
   .inset-s_0 {
     inset-inline-start: var(--spacing-0);
 }
@@ -2477,10 +2497,6 @@
     z-index: var(--z-index-drawer);
 }
 
-  .pointer-events_none {
-    pointer-events: none;
-}
-
   .fs_heading\.page {
     font-size: var(--font-sizes-heading\.page);
 }
@@ -2592,10 +2608,6 @@
     user-select: none;
 }
 
-  .grid-tc_minmax\(0\,_1fr\)_auto {
-    grid-template-columns: minmax(0, 1fr) auto;
-}
-
   .pbs_control\.iconGap {
     padding-block-start: var(--spacing-control\.icon-gap);
 }
@@ -2689,10 +2701,6 @@
     transform: translateY(-50%);
 }
 
-  .ff_numeric {
-    font-family: var(--fonts-numeric);
-}
-
   .fs_log\.body {
     font-size: var(--font-sizes-log\.body);
 }
@@ -2785,6 +2793,10 @@
     grid-template-columns: var(--sizes-overlay\.menu) minmax(0, 1fr);
 }
 
+  .d_none {
+    display: none;
+}
+
   .ps_control\.inline {
     padding-inline-start: var(--spacing-control\.inline);
 }
@@ -3018,6 +3030,10 @@
     grid-template-columns: minmax(0, 1fr) 88px;
 }
 
+  .grid-tc_repeat\(auto-fit\,_minmax\(min\(100\%\,_320px\)\,_1fr\)\) {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
+}
+
   .grid-tc_minmax\(0\,_1fr\)_360px {
     grid-template-columns: minmax(0, 1fr) 360px;
 }
@@ -3034,10 +3050,6 @@
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-  .ai_end {
-    align-items: end;
-}
-
   .grid-tr_minmax\(0\,_1fr\)_auto {
     grid-template-rows: minmax(0, 1fr) auto;
 }
@@ -3246,6 +3258,10 @@
     width: var(--spacing-panel\.compact);
 }
 
+  .h_100\% {
+    height: 100%;
+}
+
   .max-w_chat\.thread {
     max-width: var(--sizes-chat\.thread);
 }
@@ -3278,6 +3294,18 @@
     max-width: 85%;
 }
 
+  .bottom_layout\.controlGap {
+    bottom: var(--spacing-layout\.control-gap);
+}
+
+  .h_0 {
+    height: var(--sizes-0);
+}
+
+  .mt_calc\(token\(spacing\.layout\.tightGap\)_\*_-1\) {
+    margin-top: calc(var(--spacing-layout\.tight-gap) * -1);
+}
+
   .min-h_100\% {
     min-height: 100%;
 }
@@ -3358,10 +3386,6 @@
     width: var(--sizes-0);
 }
 
-  .h_100\% {
-    height: 100%;
-}
-
   .bottom_-1px {
     bottom: -1px;
 }
@@ -4160,11 +4184,15 @@
     --stage-received: #5B56EE;
 }
 
-  .\[\&_p\,_\&_ul\]\:m_none p,.\[\&_p\,_\&_ul\]\:m_none ul {
+  .\[\&_\:is\(p\,_ul\,_ol\,_pre\,_table\,_blockquote\,_h1\,_h2\,_h3\,_h4\,_h5\,_h6\,_hr\)\]\:m_none :is(p, ul, ol, pre, table, blockquote, h1, h2, h3, h4, h5, h6, hr) {
     margin: var(--spacing-none);
 }
 
-  .\[\&_\>_\:is\(a\,_button\,_span\)\]\:bd_0 > :is(a, button, span) {
+  .\[\&_pre\]\:bg_bg\.raised pre {
+    background: var(--colors-bg\.raised);
+}
+
+  .\[\&_hr\]\:bd_0 hr,.\[\&_\>_\:is\(a\,_button\,_span\)\]\:bd_0 > :is(a, button, span) {
     border: 0;
 }
 
@@ -4508,6 +4536,42 @@
     background: var(--colors-bg\.panel);
 }
 
+  .\[\&_pre\]\:py_control\.compactBlock pre {
+    padding-block: var(--spacing-control\.compact-block);
+}
+
+  .\[\&_pre\]\:px_control\.compactInline pre {
+    padding-inline: var(--spacing-control\.compact-inline);
+}
+
+  .\[\&_pre\]\:bdr_keycap pre {
+    border-radius: var(--radii-keycap);
+}
+
+  .\[\&_blockquote\]\:gap_control\.iconGap blockquote {
+    gap: var(--spacing-control\.icon-gap);
+}
+
+  .\[\&_blockquote\]\:bd-s_2px_solid_token\(colors\.border\.control\) blockquote {
+    border-inline-start: 2px solid var(--colors-border\.control);
+}
+
+  .\[\&_hr\]\:bd-t_1px_solid_token\(colors\.border\.control\) hr {
+    border-top: 1px solid var(--colors-border\.control);
+}
+
+  .\[\&_\:is\(th\,_td\)\]\:py_control\.trackInset :is(th, td) {
+    padding-block: var(--spacing-control\.track-inset);
+}
+
+  .\[\&_\:is\(th\,_td\)\]\:px_control\.compactBlock :is(th, td) {
+    padding-inline: var(--spacing-control\.compact-block);
+}
+
+  .\[\&_\:is\(th\,_td\)\]\:bd-b_1px_solid_token\(colors\.border\.control\) :is(th, td) {
+    border-bottom: 1px solid var(--colors-border\.control);
+}
+
   .\[\&_a\:not\(\[data-mention\]\)\]\:td_underline a:not([data-mention]) {
     text-decoration: underline;
 }
@@ -4584,7 +4648,7 @@
     border-color: var(--colors-border\.mark);
 }
 
-  .\[\&_\.recharts-surface\]\:ov_visible .recharts-surface {
+  .\[\&_\.ts-chart-host\]\:ov_visible .ts-chart-host {
     overflow: visible;
 }
 
@@ -5068,10 +5132,26 @@
     overflow: hidden;
 }
 
-  .\[\&_ul\]\:ps_layout\.clusterGap ul {
+  .\[\&_p\]\:white-space_pre-line p {
+    white-space: pre-line;
+}
+
+  .\[\&_\:is\(h1\,_h2\,_h3\,_h4\,_h5\,_h6\)\]\:fs_inherit :is(h1, h2, h3, h4, h5, h6) {
+    font-size: inherit;
+}
+
+  .\[\&_\:is\(h1\,_h2\,_h3\,_h4\,_h5\,_h6\)\]\:fw_semibold :is(h1, h2, h3, h4, h5, h6) {
+    font-weight: var(--font-weights-semibold);
+}
+
+  .\[\&_\:is\(ul\,_ol\)\]\:ps_layout\.clusterGap :is(ul, ol) {
     padding-inline-start: var(--spacing-layout\.cluster-gap);
 }
 
+  .\[\&_li_\>_\:is\(ul\,_ol\)\]\:mbs_control\.trackInset li > :is(ul, ol),.\[\&_li_\+_li\]\:mbs_control\.trackInset li + li {
+    margin-block-start: var(--spacing-control\.track-inset);
+}
+
   .\[\&_code\]\:ff_mono code {
     font-family: var(--fonts-mono);
 }
@@ -5080,6 +5160,54 @@
     font-size: var(--font-sizes-code);
 }
 
+  .\[\&_pre\]\:white-space_pre pre {
+    white-space: pre;
+}
+
+  .\[\&_pre\]\:ov-wrap_normal pre {
+    overflow-wrap: normal;
+}
+
+  .\[\&_blockquote\]\:d_grid blockquote {
+    display: grid;
+}
+
+  .\[\&_blockquote\]\:ps_control\.compactInline blockquote {
+    padding-inline-start: var(--spacing-control\.compact-inline);
+}
+
+  .\[\&_blockquote\]\:c_fg\.muted blockquote {
+    color: var(--colors-fg\.muted);
+}
+
+  .\[\&_table\]\:d_block table {
+    display: block;
+}
+
+  .\[\&_table\]\:bd-cl_collapse table {
+    border-collapse: collapse;
+}
+
+  .\[\&_table\]\:fv-num_tabular-nums table {
+    font-variant-numeric: tabular-nums;
+}
+
+  .\[\&_\:is\(th\,_td\)\]\:ta_start :is(th, td) {
+    text-align: start;
+}
+
+  .\[\&_\:is\(th\,_td\)\]\:va_top :is(th, td) {
+    vertical-align: top;
+}
+
+  .\[\&_\:is\(th\,_td\)\]\:ov-wrap_normal :is(th, td) {
+    overflow-wrap: normal;
+}
+
+  .\[\&_th\]\:fw_medium th {
+    font-weight: var(--font-weights-medium);
+}
+
   .\[\&_a\:not\(\[data-mention\]\)\]\:c_inherit a:not([data-mention]) {
     color: inherit;
 }
@@ -5300,18 +5428,6 @@
     cursor: default;
 }
 
-  .\[\&_\.recharts-cartesian-axis-tick-value\]\:fill_fg\.muted .recharts-cartesian-axis-tick-value {
-    fill: var(--colors-fg\.muted);
-}
-
-  .\[\&_\.recharts-cartesian-axis-tick-value\]\:ff_numeric .recharts-cartesian-axis-tick-value {
-    font-family: var(--fonts-numeric);
-}
-
-  .\[\&_\.recharts-cartesian-axis-tick-value\]\:fs_caption .recharts-cartesian-axis-tick-value {
-    font-size: var(--font-sizes-caption);
-}
-
   .\[\&_\>_\[data-value\]\]\:ms_auto > [data-value] {
     margin-inline-start: auto;
 }
@@ -5418,6 +5534,14 @@
     color: var(--colors-accent\.red);
 }
 
+  .\[\&_\>_\*\]\:pointer-events_auto > * {
+    pointer-events: auto;
+}
+
+  .\[\&_\>_\*\]\:bx-sh_card > * {
+    box-shadow: var(--shadows-card);
+}
+
   [data-side=assistant] > .\[\[data-side\=assistant\]_\>_\&\]\:ms_calc\(token\(sizes\.avatar\.small\)_\+_token\(spacing\.control\.iconGap\)\) {
     margin-inline-start: calc(var(--sizes-avatar\.small) + var(--spacing-control\.icon-gap));
 }
@@ -6011,6 +6135,10 @@
     font-weight: var(--font-weights-medium);
 }
 
+  .\[\&_\>_button\]\:flex-sh_0 > button {
+    flex-shrink: 0;
+}
+
   .\[\&\[data-disabled\]\]\:cursor_not-allowed[data-disabled] {
     cursor: not-allowed;
 }
@@ -6717,6 +6845,18 @@
     text-overflow: ellipsis;
 }
 
+  .\[\&_pre\]\:ov-x_auto pre {
+    overflow-x: auto;
+}
+
+  .\[\&_table\]\:max-w_100\% table {
+    max-width: 100%;
+}
+
+  .\[\&_table\]\:ov-x_auto table {
+    overflow-x: auto;
+}
+
   .\[\&_\>_\[data-label\]\]\:min-w_0 > [data-label] {
     min-width: var(--sizes-0);
 }
@@ -6989,6 +7129,10 @@
     height: auto;
 }
 
+  .\[\&_\>_\:not\(button\)\]\:min-w_0 > :not(button) {
+    min-width: var(--sizes-0);
+}
+
   .\[\&_svg\]\:w_icon\.small svg {
     width: icon.small;
 }
@@ -8350,6 +8494,9 @@
 }
     .notPhone\:bd-s_1px_solid_token\(colors\.border\.card\) {
       border-inline-start: 1px solid var(--colors-border\.card);
+}
+    .notPhone\:py_calc\(\(token\(sizes\.shell\.header\)_-_token\(sizes\.control\.default\)\)_\/_2_\+_1px\) {
+      padding-block: calc((var(--sizes-shell\.header) - var(--sizes-control\.default)) / 2 + 1px);
 }
     .notPhone\:grid-tr_minmax\(0\,_1fr\) {
       grid-template-rows: minmax(0, 1fr);
@@ -8359,9 +8506,6 @@
 }
     .notPhone\:ov-y_visible {
       overflow-y: visible;
-}
-    .notPhone\:pt_calc\(\(token\(sizes\.shell\.header\)_-_token\(sizes\.control\.default\)\)_\/_2_\+_1px\) {
-      padding-top: calc((var(--sizes-shell\.header) - var(--sizes-control\.default)) / 2 + 1px);
 }
 }
 

package/dist/theme/tokens.js

@@ -160,14 +160,23 @@ export function themeVariables(theme, colorTheme) {
     const tokens = deriveThemeTokens(theme);
     const themed = (value) => (colorTheme === "light" ? value._light : value.base);
     const variables = {};
-    for (const [name, value] of Object.entries(tokens.colors))
-        variables[tokenVariable("colors", name)] = themed(value);
-    for (const [name, value] of Object.entries(tokens.gradients))
-        variables[tokenVariable("gradients", name)] = themed(value);
-    for (const [name, value] of Object.entries(tokens.shadows))
-        variables[tokenVariable("shadows", name)] = themed(value);
-    for (const [name, value] of Object.entries(tokens.fonts))
-        variables[tokenVariable("fonts", name)] = value;
+    // Only what the theme sets, so a palette alone keeps the built faces and fonts alone keep the
+    // built colors.
+    if (theme.palette !== undefined) {
+        for (const [name, value] of Object.entries(tokens.colors))
+            variables[tokenVariable("colors", name)] = themed(value);
+        for (const [name, value] of Object.entries(tokens.gradients))
+            variables[tokenVariable("gradients", name)] = themed(value);
+        for (const [name, value] of Object.entries(tokens.shadows))
+            variables[tokenVariable("shadows", name)] = themed(value);
+    }
+    // Display falls back to sans, so setting sans sets both.
+    if (theme.fonts?.display ?? theme.fonts?.sans)
+        variables[tokenVariable("fonts", "display")] = tokens.fonts.display;
+    if (theme.fonts?.sans)
+        variables[tokenVariable("fonts", "sans")] = tokens.fonts.sans;
+    if (theme.fonts?.mono)
+        variables[tokenVariable("fonts", "mono")] = tokens.fonts.mono;
     return variables;
 }
 /* A dot in a variable name is escaped in stylesheet text, as Panda writes `--colors-bg\.canvas`. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "1.0.1",
+	"version": "1.0.3",
 	"type": "module",
 	"repository": {
 		"type": "git",
@@ -94,6 +94,14 @@
 			"types": "./dist/components/document-viewer.d.ts",
 			"default": "./dist/components/document-viewer.js"
 		},
+		"./app-frame": {
+			"types": "./dist/components/app-frame.d.ts",
+			"default": "./dist/components/app-frame.js"
+		},
+		"./feedback-operator": {
+			"types": "./dist/feedback/operator-controller.d.ts",
+			"default": "./dist/feedback/operator-controller.js"
+		},
 		"./lightbox": {
 			"types": "./dist/components/lightbox.d.ts",
 			"default": "./dist/components/lightbox.js"
@@ -473,6 +481,10 @@
 		"./format-money": {
 			"types": "./dist/format/money.d.ts",
 			"default": "./dist/format/money.js"
+		},
+		"./ciridae-app": {
+			"types": "./dist/app/index.d.ts",
+			"default": "./dist/app/index.js"
 		}
 	},
 	"imports": {
@@ -487,22 +499,39 @@
 		"@types/react": ">=19",
 		"date-fns": "^4",
 		"react": ">=19",
-		"react-dom": ">=19"
+		"react-dom": ">=19",
+		"@ciridae/auth": ">=0.3.0",
+		"@ciridae/telemetry": ">=0.3.1",
+		"@sentry/react": ">=10",
+		"react-router-dom": ">=7"
 	},
 	"peerDependenciesMeta": {
 		"@types/react": {
 			"optional": true
+		},
+		"@ciridae/auth": {
+			"optional": true
+		},
+		"@ciridae/telemetry": {
+			"optional": true
+		},
+		"@sentry/react": {
+			"optional": true
+		},
+		"react-router-dom": {
+			"optional": true
 		}
 	},
 	"dependencies": {
 		"@base-ui/react": "1.6.0",
 		"@phosphor-icons/react": "2.1.10",
+		"@tanstack/charts": "1.1.0",
+		"@tanstack/markdown": "1.0.0",
 		"@tanstack/react-hotkeys": "0.17.0",
 		"@tanstack/react-pacer": "0.24.1",
 		"@tanstack/react-table": "9.2.4",
 		"@tanstack/react-virtual": "3.14.23",
 		"cmdk": "1.1.1",
-		"recharts": "^3.9.2",
 		"sonner": "2.0.8",
 		"zod": "^4.4.3"
 	},