@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/chat-math.css

@@ -0,0 +1,70 @@
+/* ==========================================================================
+   Chat math (@digithings-ai/ui) — KaTeX layout + the token palette over it.
+   ==========================================================================
+
+   Split out of chat-core.css deliberately. The @import below pulls KaTeX's
+   own stylesheet, which drags in 60 font files — about 1 MB of assets. While
+   it lived in chat-core.css, every app importing that sheet paid for it:
+   dashboard shipped 1.03 MB of KaTeX fonts and 407 `.katex` selectors inside an
+   11 MB static export while declaring no katex dependency and rendering no
+   math at all, and the design reference did the same.
+
+   So import this sheet ONLY from an app that actually renders math — today
+   digichat and digithings-web, both of which render <DigiChatSession> and so
+   reach remark-math/rehype-katex. An app that only uses <ChatMarkdown>'s
+   children path (dashboard, via SafeMarkdown) must not import it.
+
+   Import it AFTER chat-core.css: the `.chat-md .katex` rules below are the
+   token palette laid over KaTeX's metric-accurate layout, and @import is only
+   legal before other rules, so it has to head its own file.
+
+   katex is a dependency of @digithings-ai/ui and hoists to the workspace root,
+   so the bare specifier resolves from every consumer.
+   ========================================================================== */
+@import "katex/dist/katex.min.css";
+
+/* ── math (KaTeX) ─────────────────────────────────────────────────────────
+   The imported katex sheet lays glyphs out; everything visible here is a
+   token, so `$e^{i\pi}$` converts with [data-theme] like any other ink. */
+
+.chat-md .katex {
+  color: var(--ink);
+  font-size: 1.04em;
+}
+
+/* Display math is a block of its own — scrolls inside its box rather than
+   widening the turn (a long derivation must not stretch the transcript). */
+.chat-md .katex-display {
+  margin: 0.9rem 0;
+  padding: 0.15rem 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.chat-md .katex .mord,
+.chat-md .katex .mrel,
+.chat-md .katex .mbin,
+.chat-md .katex .mopen,
+.chat-md .katex .mclose,
+.chat-md .katex .mpunct {
+  color: inherit;
+}
+
+/* Rules (fraction bars, \overline, \sqrt) default to currentColor in katex —
+   pin them to ink so they never inherit a muted container colour. */
+.chat-md .katex .frac-line,
+.chat-md .katex .overline .overline-line,
+.chat-md .katex .underline .underline-line,
+.chat-md .katex .hline,
+.chat-md .katex .rule {
+  border-color: var(--ink);
+  background: var(--ink);
+}
+
+/* Unparseable TeX: KaTeX keeps the source, we tint it with the negative token
+   (ChatMarkdownSource passes errorColor: var(--down) for the same reason). */
+.chat-md .katex-error {
+  color: var(--down);
+  font-family: var(--font-mono);
+  font-size: 0.82em;
+}

package/src/styles/chat-skin-palette.css

@@ -0,0 +1,138 @@
+/*
+ * Skin-agnostic product palette (`/` commands, `@` tools, and the panes they
+ * open) for every skin that is not digichat. SkinPaletteBridge marks the
+ * thread composer form with [data-skin-palette-composer] and portals the
+ * popovers into it.
+ *
+ * Colours come only from the shared shadcn tokens (--popover, --border,
+ * --muted-foreground; light at :root, dark under .dark), so the
+ * palette follows each skin's light/dark theme without per-skin rules. The
+ * digichat surface tokens the popover and panes read (--ink, --bg, --hair, …)
+ * are pointed at those shared tokens on the palette elements only. The
+ * doubled classes outrank the digichat stylesheet when both are loaded.
+ */
+
+[data-skin-palette-composer] {
+  position: relative;
+}
+
+[data-skin-palette-composer] :is(.skin-palette, .dc-composer-menu) {
+  --ink: var(--popover-foreground, CanvasText);
+  --ink-mute: var(--muted-foreground, GrayText);
+  --bg: var(--popover, Canvas);
+  --surface: var(--popover, Canvas);
+  --surface-2: var(--popover, Canvas);
+  --term-bg: var(--popover, Canvas);
+  --hair: var(--border, color-mix(in oklab, CanvasText 15%, transparent));
+}
+
+[data-skin-palette-composer] :is(.skin-palette, .dc-composer-menu):is(.skin-palette, .dc-composer-menu) {
+  margin-bottom: 0.375rem;
+  border: 1px solid var(--hair);
+  border-radius: 0.75rem;
+  background: var(--bg);
+  color: var(--ink);
+  box-shadow:
+    0 8px 24px -8px rgb(0 0 0 / 0.18),
+    0 2px 6px -2px rgb(0 0 0 / 0.08);
+  font-family: inherit;
+  text-align: start;
+}
+
+/* One row style for the slash palette and every composer menu page (theme,
+   view, density, language, models...): same inset, radius, padding. */
+[data-skin-palette-composer] .skin-palette.skin-palette [data-slot="composer-trigger-popover-item"],
+[data-skin-palette-composer] .skin-palette.skin-palette [role="option"],
+[data-skin-palette-composer] .dc-composer-menu.dc-composer-menu [data-slot="composer-menu-row"] {
+  margin-inline: 0.25rem;
+  width: calc(100% - 0.5rem);
+  border-radius: 0.5rem;
+  padding: 0.375rem 0.625rem;
+  color: var(--ink);
+  background: transparent;
+}
+
+/* A neutral wash mixed from the popover's own colours. --accent is not used:
+   brand accent themes repoint it to a saturated colour. */
+[data-skin-palette-composer] .skin-palette.skin-palette [data-highlighted],
+[data-skin-palette-composer] .dc-composer-menu [data-cursor="true"],
+[data-skin-palette-composer] .dc-composer-menu.dc-composer-menu [data-slot="composer-menu-row"][data-cursor="true"] {
+  background: color-mix(in oklab, var(--ink) 9%, var(--bg));
+  color: var(--ink);
+  outline: none;
+}
+
+[data-skin-palette-composer] .skin-palette.skin-palette :is([data-slot="palette-value"], [data-slot="palette-detail"]),
+[data-skin-palette-composer] .skin-palette.skin-palette .text-ink-mute {
+  color: var(--ink-mute);
+}
+
+/* Pane scroll indicator (the digichat stylesheet only loads with that skin). */
+[data-skin-palette-composer] .dc-composer-menu .dc-composer-menu-scroll {
+  position: absolute;
+  top: 0;
+  right: 2px;
+  bottom: 0;
+  width: 6px;
+  pointer-events: none;
+}
+
+[data-skin-palette-composer] .dc-composer-menu .dc-composer-menu-thumb {
+  position: absolute;
+  right: 0;
+  width: 6px;
+  border-radius: 3px;
+  background: color-mix(in oklab, var(--ink-mute) 32%, transparent);
+  pointer-events: auto;
+}
+
+/*
+ * `/density` for skins that are not digichat. The digichat thread has its own
+ * density tokens; here the scope's [data-skin-density] respaces the messages
+ * the stock assistant-ui markup renders ([data-message-id]). "default" changes
+ * nothing.
+ */
+[data-skin-density="compact"] [data-message-id] {
+  line-height: 1.45;
+}
+[data-skin-density="compact"] [data-message-id] :is(p, ul, ol, pre, blockquote) {
+  margin-block: 0.35em;
+}
+[data-skin-density="compact"] [data-slot="aui_message-group"],
+[data-skin-density="compact"] :has(> [data-message-id] + [data-message-id]) {
+  row-gap: 0.75rem;
+}
+[data-skin-density="airy"] [data-message-id] {
+  line-height: 1.85;
+}
+[data-skin-density="airy"] [data-message-id] :is(p, ul, ol, pre, blockquote) {
+  margin-block: 1em;
+}
+[data-skin-density="airy"] [data-slot="aui_message-group"],
+[data-skin-density="airy"] :has(> [data-message-id] + [data-message-id]) {
+  row-gap: 2.5rem;
+}
+
+/*
+ * `/scrollbar` for skins that are not digichat. The digichat thread keys its
+ * bars on its own root; here the scope's [data-skin-scrollbars] reaches the
+ * skin's scroll surfaces: the thread viewport (base marks it with
+ * data-slot; the clone skins only carry Tailwind overflow utilities) and any
+ * scrolling block inside it.
+ *   always — a thin visible bar in a reserved gutter.
+ *   auto   — no bar and no gutter (the content still scrolls).
+ */
+[data-skin-scrollbars="always"]
+  :is([data-slot="aui_thread-viewport"], .overflow-y-scroll, .overflow-y-auto, .overflow-auto) {
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklab, currentColor 38%, transparent) transparent;
+}
+[data-skin-scrollbars="auto"]
+  :is([data-slot="aui_thread-viewport"], .overflow-y-scroll, .overflow-y-auto, .overflow-auto) {
+  /* The composer sits inside the viewport, so a hover or focus reveal would
+     show the bar nearly all the time; auto hides it and wheel, touch and
+     keyboard scrolling still work. */
+  scrollbar-gutter: auto;
+  scrollbar-width: none;
+}

package/src/styles/chat-stock-menu.css

@@ -0,0 +1,37 @@
+/*
+ * Stock skin "…" menu and its side panels (expo-react-native,
+ * webpage-assistant, product-page-assistant).
+ *
+ * The menu's classes ask for `bg-surface-2`. chat-aui.css emits that utility
+ * only inside the stock thread and its marked portals; this menu is portaled
+ * unmarked and paints its own fill from `--surface-2` below. These rules stay unlayered so the
+ * panel keeps its border, shadow and row highlight whichever sheet loads first. The menu is portaled to <body>, so
+ * it reads the page-level tokens, which follow the light/dark theme.
+ *
+ * Selector is the stock menu's own class pair, so other skins' menus
+ * (base: bg-popover; digichat: its own rules) are untouched. The radius is
+ * assistant-ui's own (rounded-xl panel, rounded-lg rows) and lives on the
+ * classes in thread.aui.tsx. The row highlight is a tint of the text colour:
+ * --muted is too close to --surface-2 in light mode to show.
+ */
+.aui-action-bar-more-content.bg-surface-2 {
+  border-color: var(--hair, var(--border));
+  background-color: var(--surface-2, var(--popover, Canvas));
+  color: var(--ink, var(--popover-foreground, CanvasText));
+  box-shadow:
+    0 8px 24px -8px rgb(0 0 0 / 0.18),
+    0 2px 6px -2px rgb(0 0 0 / 0.08);
+}
+
+.aui-action-bar-more-content.bg-surface-2
+  .aui-action-bar-more-item:is(:hover, :focus-visible, [data-highlighted], [data-state="open"]) {
+  background-color: color-mix(in oklab, var(--ink, CanvasText) 8%, transparent);
+}
+
+/* Keyboard focus: a visible ring on the focused row (the tint alone is under
+   3:1 against the panel). --ink-soft on the panel measures 5.53:1 in light
+   and 6.61:1 in dark. */
+.aui-action-bar-more-content.bg-surface-2 .aui-action-bar-more-item:focus-visible {
+  outline: 2px solid var(--ink-soft, var(--ink, CanvasText));
+  outline-offset: -2px;
+}

package/src/styles/chat-widgets.css

@@ -0,0 +1,190 @@
+/* ==========================================================================
+   @digithings-ai/ui — chat activity-widget CSS (components/chat/*, #1418).
+   The digichat activity grammar promoted from the chatbot reference family:
+   collapsible tool-call blocks (ChatToolCall), the thinking/reasoning
+   disclosure (ChatThinking), and the framed-embed widget grammar
+   (ChatWidgetFrame / ChatWidgetButton). Import AFTER the token bridge, in the
+   app's globals.css:
+     @import "tailwindcss";
+     @import "@digithings-ai/design/tokens.css";
+     @import "@digithings-ai/ui/styles/web-theme.css";
+     @import "@digithings-ai/ui/styles/chat-widgets.css";
+     @source "<path-to>/packages/ui/src/components/chat";
+   The @source line is load-bearing (path relative to the app's globals.css):
+   the components carry token-backed utilities, and Tailwind does not scan
+   package sources on its own.
+
+   Utilities in the components carry layout/spacing/color/type. This file
+   holds only what must stay CSS: thinking caret/dot art, the aria-expanded
+   rotate combinators, color-mix rails and hover states, and the pulse/reveal
+   keyframes (all off under reduced motion).
+   ========================================================================== */
+
+/* ── collapsible tool-call block (ChatToolCall) ─────────────────────── */
+
+.tc {
+  /* component sizing tokens (chat-widgets) */
+  --tc-rail-w: 2px;
+  --tc-pad-inline: 0.75rem;
+  --tc-caret-size: 0.55rem;
+  border-inline-start: var(--tc-rail-w) solid color-mix(in srgb, var(--accent) 40%, var(--term-hair));
+  /* Space between the chain rail and the tool name — lives here (not a
+     Tailwind ps-*) so it still applies when the utility isn't regenerated. */
+  padding-inline-start: var(--tc-pad-inline);
+}
+
+.tc--err {
+  border-inline-start-color: color-mix(in srgb, var(--danger) 55%, var(--term-hair));
+}
+
+.tc-dump {
+  /* Own root token: the dump is not required to sit inside .tc. */
+  --tc-dump-max-h: 8.5rem;
+  max-height: var(--tc-dump-max-h);
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+.tc-caret {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--tc-caret-size);
+  height: var(--tc-caret-size);
+  color: var(--term-mute, var(--ink-mute));
+  transform: none;
+  transform-origin: 50% 50%;
+}
+
+.tc-caret [data-slot="dot-matrix"] {
+  width: var(--tc-caret-size);
+  height: var(--tc-caret-size);
+}
+
+.tc-caret.open,
+button.tc-head[aria-expanded="true"] .tc-caret {
+  transform: rotate(90deg);
+}
+
+.tc-run {
+  color: var(--term-mute, var(--ink-mute));
+}
+
+/* ── thinking / reasoning disclosure (ChatThinking) ─────────────────── */
+
+.think-chip {
+  --think-caret-size: 0.55rem;
+  background: transparent;
+  transition: color 0.2s var(--ease);
+}
+
+.think-chip:hover {
+  color: var(--ink-soft);
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--hair));
+}
+
+.think-caret {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--think-caret-size);
+  height: var(--think-caret-size);
+  margin-inline-start: auto;
+  transform: none;
+  transform-origin: 50% 50%;
+}
+
+.think-caret [data-slot="dot-matrix"] {
+  width: var(--think-caret-size);
+  height: var(--think-caret-size);
+}
+
+.think-chip.open .think-caret {
+  transform: rotate(90deg);
+}
+
+.think-dot {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--accent);
+}
+
+.think-steps {
+  /* own tokens: the list is a sibling of .think-chip, not a descendant */
+  --think-rail-w: 2px;
+  --think-bullet-size: 6px;
+  --think-bullet-inset: -1.62rem;
+  border-inline-start: var(--think-rail-w) solid color-mix(in srgb, var(--accent) 30%, var(--hair));
+}
+
+.think-steps li {
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
+}
+
+.think-steps li::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: var(--think-bullet-inset);
+  top: var(--space-2, 0.5rem);
+  width: var(--think-bullet-size);
+  height: var(--think-bullet-size);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent) 55%, var(--hair));
+}
+
+.think-steps.in li {
+  opacity: 1;
+  transform: none;
+}
+
+/* ── widget-frame action buttons (ChatWidgetButton) ─────────────────── */
+
+.cw-btn {
+  transition:
+    border-color var(--dur-tap, 120ms) var(--ease),
+    background var(--dur-tap, 120ms) var(--ease);
+}
+
+.cw-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.cw-btn--primary {
+  color: var(--bg);
+}
+
+.cw-btn--ghost:hover {
+  border-color: color-mix(in srgb, var(--accent) 50%, var(--hair));
+}
+
+.cw-btn--danger {
+  border-color: color-mix(in srgb, var(--danger) 40%, var(--hair));
+}
+
+.cw-btn--danger:hover {
+  background: color-mix(in srgb, var(--danger) 10%, transparent);
+}
+
+/* ── reduced motion ─────────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .think-caret,
+  .tc-caret {
+    transition: none;
+  }
+  .tc-run,
+  .think-dot.is-live {
+    animation: none;
+  }
+  .think-steps li {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}