@dbx-tools/ui 0.9.110 → 0.9.112

package/index.ts

@@ -3,7 +3,7 @@
 // Hand edits are overwritten on the next watch; this file is read-only.
 
 export const PACKAGE_IDENTIFIER = "@dbx-tools/ui";
-export const PACKAGE_VERSION = "0.9.110";
+export const PACKAGE_VERSION = "0.9.112";
 export * as authReactAuthClient from "./src/auth/react/auth-client.ts";
 export * as authReactAuthGate from "./src/auth/react/auth-gate.tsx";
 export * as authReactPasskeyManager from "./src/auth/react/passkey-manager.tsx";
@@ -16,8 +16,10 @@ export * as emailReactEmailCompose from "./src/email/react/email-compose.tsx";
 export * as emailReactFields from "./src/email/react/fields.ts";
 export * as reactAppkitUi from "./src/react/appkit-ui.ts";
 export * as reactBrandPicker from "./src/react/brand-picker.tsx";
+export * as reactHighlightedCode from "./src/react/highlighted-code.tsx";
 export * as reactRecordPreview from "./src/react/record-preview.tsx";
 export * as reactRecordPreviewData from "./src/react/record-preview-data.ts";
+export * as reactShikiPlugin from "./src/react/shiki-plugin.ts";
 export * as searchReactSearchBox from "./src/search/react/search-box.tsx";
 export * as searchReactSearchResults from "./src/search/react/search-results.tsx";
 export * as searchReactUseSearch from "./src/search/react/use-search.ts";
@@ -36,6 +38,7 @@ export type { EmailComposeProps } from "./src/email/react/email-compose.tsx";
 export { joinAddresses, parseAddresses, attachmentNames } from "./src/email/react/fields.ts";
 export type { EmailDraft } from "./src/email/react/fields.ts";
 export type { BrandPreset, BrandPickerProps } from "./src/react/brand-picker.tsx";
+export { JsonBlock } from "./src/react/highlighted-code.tsx";
 export type { RecordPreviewProps } from "./src/react/record-preview.tsx";
 export type { RecordPreviewRow } from "./src/react/record-preview-data.ts";
 export type { SearchBoxProps } from "./src/search/react/search-box.tsx";

package/package.json

@@ -30,12 +30,13 @@
   },
   "dependencies": {
     "@databricks/appkit-ui": "0.81.0",
-    "@dbx-tools/shared-auth": "^0.9.110",
-    "@dbx-tools/shared-core": "^0.9.110",
-    "@dbx-tools/shared-email": "^0.9.110",
-    "@dbx-tools/shared-email-template": "^0.9.110",
-    "@dbx-tools/shared-search": "^0.9.110",
+    "@dbx-tools/shared-auth": "^0.9.112",
+    "@dbx-tools/shared-core": "^0.9.112",
+    "@dbx-tools/shared-email": "^0.9.112",
+    "@dbx-tools/shared-email-template": "^0.9.112",
+    "@dbx-tools/shared-search": "^0.9.112",
     "lucide-react": "^0.554.0",
+    "shiki": "^3.0.0",
     "streamdown": "^2.5.0",
     "tailwindcss": "^4.3.2"
   },
@@ -43,7 +44,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.110",
+  "version": "0.9.112",
   "dbxToolsConfig": {
     "tags": [
       "ui"

package/src/react/_shiki-runtime.ts

@@ -0,0 +1,27 @@
+/**
+ * Fine-grained Shiki runtime containing only the supported UI languages.
+ *
+ * This module is itself dynamically imported, so its grammar, theme, and WASM
+ * dependencies remain off the network until a supported code block appears.
+ */
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+import bash from "shiki/langs/bash.mjs";
+import javascript from "shiki/langs/javascript.mjs";
+import json from "shiki/langs/json.mjs";
+import markdown from "shiki/langs/markdown.mjs";
+import python from "shiki/langs/python.mjs";
+import sql from "shiki/langs/sql.mjs";
+import typescript from "shiki/langs/typescript.mjs";
+import yaml from "shiki/langs/yaml.mjs";
+import githubDarkHighContrast from "shiki/themes/github-dark-high-contrast.mjs";
+import githubLightHighContrast from "shiki/themes/github-light-high-contrast.mjs";
+
+/** Create the shared highlighter with the exact configured language set. */
+export function createHighlighter() {
+  return createHighlighterCore({
+    themes: [githubLightHighContrast, githubDarkHighContrast],
+    langs: [sql, python, typescript, javascript, json, bash, yaml, markdown],
+    engine: createOnigurumaEngine(import("shiki/wasm")),
+  });
+}

package/src/react/highlighted-code.tsx

@@ -0,0 +1,52 @@
+/**
+ * Shared syntax-highlighted code surfaces for AppKit-oriented UI packages.
+ *
+ * @module
+ */
+
+import { useEffect, useState } from "react";
+
+import { cn } from "./appkit-ui.ts";
+import { highlightToHtml } from "./shiki-plugin.ts";
+
+export { createShikiPlugin, highlightToHtml } from "./shiki-plugin.ts";
+
+/** Resolve syntax-highlighted HTML while preserving plaintext during lazy load. */
+export function useHighlightedHtml(source: string, language: string): string | null {
+  const [highlighted, setHighlighted] = useState<{
+    source: string;
+    language: string;
+    html: string;
+  } | null>(null);
+  useEffect(() => {
+    let active = true;
+    void highlightToHtml(source, language).then((result) => {
+      if (active) setHighlighted({ source, language, html: result });
+    });
+    return () => {
+      active = false;
+    };
+  }, [language, source]);
+  return highlighted?.source === source && highlighted.language === language
+    ? highlighted.html
+    : null;
+}
+
+/** Render formatted JSON with the shared lazily loaded Shiki runtime. */
+export const JsonBlock = ({ json, className }: { json: string; className?: string }) => {
+  const html = useHighlightedHtml(json, "json");
+  return (
+    <pre
+      className={cn(
+        "max-w-full overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-relaxed",
+        className,
+      )}
+    >
+      {html === null ? (
+        <code>{json}</code>
+      ) : (
+        <code data-dbx-highlighted-code dangerouslySetInnerHTML={{ __html: html }} />
+      )}
+    </pre>
+  );
+};

package/src/react/index.ts

@@ -1,3 +1,4 @@
 export * from "./appkit-ui.ts";
 export * from "./brand-picker.tsx";
+export * from "./highlighted-code.tsx";
 export * from "./record-preview.tsx";

package/src/react/record-preview.tsx

@@ -6,7 +6,7 @@
  */
 
 import { BracesIcon, Table2Icon } from "lucide-react";
-import { useState } from "react";
+import { Fragment, useState } from "react";
 import { Streamdown } from "streamdown";
 
 import {
@@ -21,6 +21,7 @@ import {
   TooltipTrigger,
   cn,
 } from "./appkit-ui.ts";
+import { JsonBlock } from "./highlighted-code.tsx";
 import {
   formatRecordPreviewJson,
   looksLikeMarkdown,
@@ -41,7 +42,7 @@ export {
 const MARKDOWN_CELL_CLASSES =
   "min-w-0 max-w-full text-[11px] leading-snug [&_p]:my-0.5 [&_p]:leading-snug [&_ul]:my-0.5 [&_ol]:my-0.5 [&_li]:my-0 [&_h1]:my-1 [&_h1]:text-[11px] [&_h1]:font-semibold [&_h2]:my-1 [&_h2]:text-[11px] [&_h2]:font-semibold [&_h3]:my-1 [&_h3]:text-[11px] [&_h3]:font-semibold [&_pre]:my-1 [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-background/60 [&_pre]:p-1.5 [&_pre]:text-[10px] [&_code]:text-[10px]";
 
-const NESTED_DEPTH = 2;
+const NESTED_DEPTH = 4;
 
 /** Props for {@link RecordPreview}. */
 export interface RecordPreviewProps {
@@ -55,8 +56,14 @@ export interface RecordPreviewProps {
 export function RecordPreview({ value, className }: RecordPreviewProps) {
   const [raw, setRaw] = useState(false);
   const rows = recordPreviewRows(value);
+  const rawJson = formatRecordPreviewJson(value);
   return (
-    <div className={cn("relative min-w-0", className)}>
+    <div
+      className={cn(
+        "relative min-w-0 overflow-hidden [&_[data-slot=table-container]]:overflow-x-hidden",
+        className,
+      )}
+    >
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
@@ -73,13 +80,17 @@ export function RecordPreview({ value, className }: RecordPreviewProps) {
         </TooltipTrigger>
         <TooltipContent>{raw ? "Table" : "JSON"}</TooltipContent>
       </Tooltip>
-      {raw ? (
-        <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded bg-background/40 p-2 pr-8 font-mono text-[11px] leading-relaxed">
-          {formatRecordPreviewJson(value)}
-        </pre>
-      ) : (
-        <RecordTable rows={rows} depth={0} />
-      )}
+      <div className="max-h-[inherit] min-w-0 overflow-auto">
+        {raw ? (
+          <JsonBlock json={rawJson} className="rounded bg-background/40 p-2 pr-8 text-[11px]" />
+        ) : rows.length === 0 ? (
+          <pre className="whitespace-pre-wrap break-words rounded bg-background/40 p-2 pr-8 font-mono text-[11px] leading-relaxed">
+            {rawJson}
+          </pre>
+        ) : (
+          <RecordTable rows={rows} depth={0} />
+        )}
+      </div>
     </div>
   );
 }
@@ -87,23 +98,51 @@ export function RecordPreview({ value, className }: RecordPreviewProps) {
 function RecordTable({ rows, depth }: { rows: RecordPreviewRow[]; depth: number }) {
   if (rows.length === 0) return null;
   return (
-    <Table className="text-[11px]">
+    <Table className="table-fixed text-[11px]">
       <TableBody>
-        {rows.map((row) => (
-          <TableRow key={row.key} className="hover:bg-transparent">
-            <TableHead className="w-[8.5rem] align-top whitespace-nowrap px-2 py-1.5 font-medium text-muted-foreground">
-              {row.label}
-            </TableHead>
-            <TableCell className="align-top break-words px-2 py-1.5 pr-8">
-              <RecordValue value={row.value} depth={depth} />
-            </TableCell>
-          </TableRow>
-        ))}
+        {rows.map((row) => {
+          const nested = isNestedValue(row.value) && depth < NESTED_DEPTH;
+          return nested ? (
+            <Fragment key={row.key}>
+              <TableRow className="border-b-0 hover:bg-transparent">
+                <TableHead
+                  colSpan={2}
+                  className="h-auto whitespace-normal px-2 pb-1 pt-2 font-medium text-muted-foreground"
+                >
+                  {row.label}
+                </TableHead>
+              </TableRow>
+              <TableRow className="hover:bg-transparent">
+                <TableCell
+                  colSpan={2}
+                  className="min-w-0 whitespace-normal p-0 pb-1 pl-2 [overflow-wrap:anywhere]"
+                >
+                  <RecordValue value={row.value} depth={depth} />
+                </TableCell>
+              </TableRow>
+            </Fragment>
+          ) : (
+            <TableRow key={row.key} className="hover:bg-transparent">
+              <TableHead className="h-auto w-28 align-top whitespace-normal px-2 py-1.5 font-medium text-muted-foreground sm:w-[8.5rem]">
+                {row.label}
+              </TableHead>
+              <TableCell className="min-w-0 whitespace-normal px-2 py-1.5 pr-8 align-top [overflow-wrap:anywhere]">
+                <RecordValue value={row.value} depth={depth} />
+              </TableCell>
+            </TableRow>
+          );
+        })}
       </TableBody>
     </Table>
   );
 }
 
+function isNestedValue(value: unknown): boolean {
+  if (value == null || typeof value !== "object") return false;
+  if (!Array.isArray(value)) return true;
+  return value.some((item) => item != null && typeof item === "object");
+}
+
 function RecordValue({ value, depth }: { value: unknown; depth: number }) {
   if (value == null) {
     return <span className="text-muted-foreground">null</span>;
@@ -124,8 +163,23 @@ function RecordValue({ value, depth }: { value: unknown; depth: number }) {
   if (typeof value === "object" && !Array.isArray(value) && depth < NESTED_DEPTH) {
     return <RecordTable rows={recordPreviewRows(value)} depth={depth + 1} />;
   }
-  if (Array.isArray(value) && value.every((item) => item == null || typeof item !== "object")) {
-    return <span className="whitespace-pre-wrap break-words">{value.map(String).join(", ")}</span>;
+  if (Array.isArray(value)) {
+    if (value.every((item) => item == null || typeof item !== "object")) {
+      return (
+        <span className="whitespace-pre-wrap break-words">{value.map(String).join(", ")}</span>
+      );
+    }
+    if (depth < NESTED_DEPTH) {
+      return (
+        <div className="min-w-0 divide-y divide-border/60">
+          {value.map((item, index) => (
+            <div key={index} className="min-w-0 py-1 first:pt-0 last:pb-0">
+              <RecordValue value={item} depth={depth + 1} />
+            </div>
+          ))}
+        </div>
+      );
+    }
   }
   return (
     <pre className="whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed">

package/src/react/shiki-plugin.ts

@@ -0,0 +1,158 @@
+import { stringUtils } from "@dbx-tools/shared-core";
+import type { BundledLanguage, BundledTheme } from "shiki";
+import type { HighlighterCore } from "shiki/core";
+import type { CodeHighlighterPlugin } from "streamdown";
+
+// Streamdown 2.x ships syntax highlighting as an opt-in plugin and has
+// no shiki dependency of its own; without a `code` plugin every fenced
+// block renders as uncolored plaintext. This module provides a small
+// shiki-backed highlighter to wire in via `plugins={{ code }}`.
+
+/**
+ * Languages we highlight in the chat. SQL is the primary one (Genie
+ * query previews); the rest cover code the assistant might emit. Kept
+ * to a curated set so shiki only bundles these grammars.
+ */
+const LANGUAGES = [
+  "text",
+  "plaintext",
+  "txt",
+  "sql",
+  "python",
+  "typescript",
+  "javascript",
+  "json",
+  "bash",
+  "yaml",
+  "markdown",
+] as const;
+
+/** High-contrast theme pair used for every syntax surface. */
+const THEMES = [
+  "github-light-high-contrast",
+  "github-dark-high-contrast",
+] as const satisfies readonly [BundledTheme, BundledTheme];
+
+/** Languages we can tokenize, as a set for O(1) support checks. */
+const SUPPORTED = new Set<string>(LANGUAGES);
+
+let _highlighter: HighlighterCore | null = null;
+let _loading: Promise<HighlighterCore> | null = null;
+
+/** Lazily create the shared shiki highlighter (singleton, loaded once). */
+function loadHighlighter(): Promise<HighlighterCore> {
+  _loading ??= import("./_shiki-runtime.ts")
+    .then(({ createHighlighter }) => createHighlighter())
+    .then((highlighter) => {
+      _highlighter = highlighter;
+      return highlighter;
+    });
+  return _loading;
+}
+
+function splitThemeColor(
+  value: string | undefined,
+  darkVariable: "--shiki-dark" | "--shiki-dark-bg",
+): { light?: string; dark?: string } {
+  if (!value) return {};
+  const marker = `;${darkVariable}:`;
+  const index = value.indexOf(marker);
+  if (index < 0) return { light: value };
+  return {
+    light: value.slice(0, index),
+    dark: value.slice(index + marker.length),
+  };
+}
+
+/** Tokenize `code` with the active themes into Streamdown's result shape. */
+function highlightTokens(h: HighlighterCore, code: string, language: string) {
+  const { tokens, fg, bg, rootStyle } = h.codeToTokens(code, {
+    lang: language as BundledLanguage,
+    themes: { light: THEMES[0], dark: THEMES[1] },
+  });
+  const foreground = splitThemeColor(fg, "--shiki-dark");
+  const background = splitThemeColor(bg, "--shiki-dark-bg");
+  const darkStyles = [
+    foreground.dark ? `--shiki-dark:${foreground.dark}` : "",
+    background.dark ? `--shiki-dark-bg:${background.dark}` : "",
+  ]
+    .filter(Boolean)
+    .join(";");
+  return {
+    tokens,
+    fg: foreground.light,
+    bg: background.light,
+    rootStyle: [rootStyle, darkStyles].filter(Boolean).join(";"),
+  };
+}
+
+/** Escape HTML-significant characters (from the shared string utils). */
+const escapeHtml = stringUtils.escapeHtml;
+
+/**
+ * Highlight `code` into minimal inline HTML: one colored `<span>` per
+ * token, lines joined by real newlines, with no line-number gutter or
+ * per-line wrapper elements. Meant to drop straight into a
+ * `<pre><code>` so the rendered text stays cleanly selectable and
+ * copyable. Falls back to plain escaped text when the language isn't
+ * supported or shiki fails to parse the snippet.
+ */
+export async function highlightToHtml(code: string, language: string): Promise<string> {
+  if (!SUPPORTED.has(language)) return escapeHtml(code);
+  const h = await loadHighlighter();
+  try {
+    const { tokens } = highlightTokens(h, code, language);
+    return tokens
+      .map((line) =>
+        line
+          .map((token) => {
+            const light = token.htmlStyle?.color ?? token.color ?? "inherit";
+            const dark = token.htmlStyle?.["--shiki-dark"] ?? light;
+            const style = `--sdm-c:${light};--shiki-dark:${dark}`;
+            return `<span style="${escapeHtml(style)}">${escapeHtml(token.content)}</span>`;
+          })
+          .join(""),
+      )
+      .join("\n");
+  } catch {
+    return escapeHtml(code);
+  }
+}
+
+/**
+ * shiki-backed code highlighter plugin for Streamdown. The highlighter
+ * loads asynchronously: the first call for any block returns `null`
+ * and resolves through the `callback` once shiki is ready, after which
+ * results are synchronous. Unsupported languages return `null` so the
+ * block stays plaintext rather than throwing.
+ */
+export function createShikiPlugin(): CodeHighlighterPlugin {
+  const isSupported = (language: string): boolean => SUPPORTED.has(language);
+
+  return {
+    name: "shiki",
+    type: "code-highlighter",
+    getSupportedLanguages: () => [...LANGUAGES],
+    getThemes: () => [...THEMES],
+    supportsLanguage: (language) => isSupported(language),
+    highlight: (options, callback) => {
+      if (!isSupported(options.language)) return null;
+      const language = options.language;
+      if (_highlighter) {
+        try {
+          return highlightTokens(_highlighter, options.code, language);
+        } catch {
+          return null;
+        }
+      }
+      void loadHighlighter().then((h) => {
+        try {
+          callback?.(highlightTokens(h, options.code, language));
+        } catch {
+          // Parse failure for this block - leave it as plaintext.
+        }
+      });
+      return null;
+    },
+  };
+}