@dbx-tools/ui 0.9.112 → 0.9.117

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.112";
+export const PACKAGE_VERSION = "0.9.117";
 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";
@@ -38,7 +38,8 @@ 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 { HighlightedCodeBlock, JsonBlock } from "./src/react/highlighted-code.tsx";
+export type { DetectedCodeLanguage } 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,11 +30,11 @@
   },
   "dependencies": {
     "@databricks/appkit-ui": "0.81.0",
-    "@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",
+    "@dbx-tools/shared-auth": "^0.9.117",
+    "@dbx-tools/shared-core": "^0.9.117",
+    "@dbx-tools/shared-email": "^0.9.117",
+    "@dbx-tools/shared-email-template": "^0.9.117",
+    "@dbx-tools/shared-search": "^0.9.117",
     "lucide-react": "^0.554.0",
     "shiki": "^3.0.0",
     "streamdown": "^2.5.0",
@@ -44,7 +44,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.112",
+  "version": "0.9.117",
   "dbxToolsConfig": {
     "tags": [
       "ui"
@@ -54,6 +54,7 @@
   "exports": {
     "./react": "./src/react/index.ts",
     "./styles.css": "./src/styles.css",
+    "./*": "./src/*/index.ts",
     "./branding/react": "./src/branding/react/index.ts",
     "./branding/browser": "./src/branding/browser.ts",
     "./branding/assets": "./src/branding/generated/assets.ts",

package/src/branding/generated/index.ts

@@ -0,0 +1,6 @@
+// GENERATED by projen watch - DO NOT EDIT.
+// Regenerated from the exporting modules in ./src.
+// Hand edits are overwritten on the next watch; this file is read-only.
+
+export * as assets from "./assets.ts";
+export { dbxToolsAssetSvg, dbxToolsAssetDataUrls } from "./assets.ts";

package/src/branding/index.ts

@@ -0,0 +1,8 @@
+// GENERATED by projen watch - DO NOT EDIT.
+// Regenerated from the exporting modules in ./src.
+// Hand edits are overwritten on the next watch; this file is read-only.
+
+export * as browser from "./browser.ts";
+export * as generated from "./generated/index.ts";
+export { resolveBrandAsset } from "./browser.ts";
+export type { BrandAssetResolver, ApplyBrandContextOptions } from "./browser.ts";

package/src/react/highlighted-code.tsx

@@ -4,6 +4,7 @@
  * @module
  */
 
+import { json } from "@dbx-tools/shared-core";
 import { useEffect, useState } from "react";
 
 import { cn } from "./appkit-ui.ts";
@@ -11,6 +12,30 @@ import { highlightToHtml } from "./shiki-plugin.ts";
 
 export { createShikiPlugin, highlightToHtml } from "./shiki-plugin.ts";
 
+/** Code languages detected automatically in free-form text fields. */
+export type DetectedCodeLanguage = "sql" | "python" | "typescript" | "bash" | "json";
+
+/** Detect a supported code language from a complete free-form text value. */
+export function detectCodeLanguage(source: string): DetectedCodeLanguage | undefined {
+  const trimmed = source.trim();
+  if (/^(?:select|with|insert|update|delete|merge|create|alter)\b/i.test(trimmed)) return "sql";
+  if (/^(?:from\s+\S+\s+import|import\s+\S+|def\s+\w+|class\s+\w+):?/m.test(trimmed)) {
+    return "python";
+  }
+  if (/^(?:const|let|var|interface|type|export|import)\b/m.test(trimmed)) return "typescript";
+  if (/^(?:#!.*\b(?:ba|z|k)?sh\b|(?:cd|ls|cat|grep|find|bun|npm|pnpm|yarn)\s)/m.test(trimmed)) {
+    return "bash";
+  }
+  if (
+    (trimmed.startsWith("{") || trimmed.startsWith("[")) &&
+    trimmed.length > 1 &&
+    json.parse(trimmed) !== undefined
+  ) {
+    return "json";
+  }
+  return undefined;
+}
+
 /** Resolve syntax-highlighted HTML while preserving plaintext during lazy load. */
 export function useHighlightedHtml(source: string, language: string): string | null {
   const [highlighted, setHighlighted] = useState<{
@@ -32,21 +57,35 @@ export function useHighlightedHtml(source: string, language: string): string | n
     : 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");
+/** Render code with the shared lazily loaded Shiki runtime. */
+export const HighlightedCodeBlock = ({
+  source,
+  language,
+  className,
+}: {
+  source: string;
+  language: string;
+  className?: string;
+}) => {
+  const html = useHighlightedHtml(source, language);
   return (
     <pre
+      data-language={language}
       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>{source}</code>
       ) : (
         <code data-dbx-highlighted-code dangerouslySetInnerHTML={{ __html: html }} />
       )}
     </pre>
   );
 };
+
+/** Render formatted JSON with the shared lazily loaded Shiki runtime. */
+export const JsonBlock = ({ json, className }: { json: string; className?: string }) => (
+  <HighlightedCodeBlock source={json} language="json" className={className} />
+);

package/src/react/record-preview-data.ts

@@ -4,7 +4,7 @@
  * @module
  */
 
-import { stringUtils } from "@dbx-tools/shared-core";
+import { json, object as objectUtils, stringUtils } from "@dbx-tools/shared-core";
 
 /** One field shown in the table view of {@link RecordPreview}. */
 export interface RecordPreviewRow {
@@ -39,6 +39,18 @@ export function formatRecordPreviewJson(value: unknown): string {
   }
 }
 
+/** Parse a string whose complete value is a serialized JSON object or array. */
+export function parseNestedJsonText(
+  value: unknown,
+): Record<string, unknown> | unknown[] | undefined {
+  if (typeof value !== "string") return undefined;
+  const trimmed = value.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return undefined;
+  const parsed = json.parse(trimmed);
+  if (Array.isArray(parsed)) return parsed;
+  return objectUtils.isRecord(parsed) ? parsed : undefined;
+}
+
 /** YAML document fence at the start of a markdown file (`---` ... `---`). */
 const FRONTMATTER = /^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/;
 

package/src/react/record-preview.tsx

@@ -21,11 +21,12 @@ import {
   TooltipTrigger,
   cn,
 } from "./appkit-ui.ts";
-import { JsonBlock } from "./highlighted-code.tsx";
+import { detectCodeLanguage, HighlightedCodeBlock, JsonBlock } from "./highlighted-code.tsx";
 import {
   formatRecordPreviewJson,
   looksLikeMarkdown,
   markdownForPreview,
+  parseNestedJsonText,
   recordPreviewRows,
   type RecordPreviewRow,
 } from "./record-preview-data.ts";
@@ -35,6 +36,7 @@ export {
   formatRecordPreviewJson,
   looksLikeMarkdown,
   markdownForPreview,
+  parseNestedJsonText,
   recordPreviewRows,
 } from "./record-preview-data.ts";
 
@@ -42,7 +44,8 @@ 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 = 4;
+const MAX_NESTED_DEPTH = 12;
+const MAX_INDENT_DEPTH = 4;
 
 /** Props for {@link RecordPreview}. */
 export interface RecordPreviewProps {
@@ -60,87 +63,274 @@ export function RecordPreview({ value, className }: RecordPreviewProps) {
   return (
     <div
       className={cn(
-        "relative min-w-0 overflow-hidden [&_[data-slot=table-container]]:overflow-x-hidden",
+        "relative min-w-0 [&_[data-slot=table-container]]:overflow-x-hidden",
         className,
       )}
     >
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
-            aria-pressed={raw}
-            aria-label={raw ? "Show table" : "Show JSON"}
-            className="absolute right-1 top-1 z-10 size-6"
-            onClick={() => setRaw((current) => !current)}
-          >
-            {raw ? <Table2Icon className="size-3" /> : <BracesIcon className="size-3" />}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{raw ? "Table" : "JSON"}</TooltipContent>
-      </Tooltip>
-      <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 className="sticky top-1 z-10 float-right mr-1 h-0">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              aria-pressed={raw}
+              aria-label={raw ? "Show table" : "Show JSON"}
+              className="size-6 bg-background/85 backdrop-blur-sm"
+              onClick={() => setRaw((current) => !current)}
+            >
+              {raw ? <Table2Icon className="size-3" /> : <BracesIcon className="size-3" />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{raw ? "Table" : "JSON"}</TooltipContent>
+        </Tooltip>
       </div>
+      {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} />
+      )}
     </div>
   );
 }
 
-function RecordTable({ rows, depth }: { rows: RecordPreviewRow[]; depth: number }) {
+function RecordTable({ rows }: { rows: RecordPreviewRow[] }) {
   if (rows.length === 0) return null;
   return (
-    <Table className="table-fixed text-[11px]">
-      <TableBody>
-        {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>
+    <div className="min-w-0 px-2 pb-2">
+      <Table className="table-fixed text-[11px]">
+        <TableBody>
+          {rows.map((row) => (
+            <RecordRow key={row.key} row={row} depth={0} path={row.key} />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+function RecordRow({
+  row,
+  depth,
+  path,
+  divided,
+}: {
+  row: RecordPreviewRow;
+  depth: number;
+  path: string;
+  divided?: boolean;
+}) {
+  const nested = nestedRecordValue(row.value);
+  if (!nested) {
+    return <FieldRow row={row} depth={depth} divided={divided} />;
+  }
+  return (
+    <Fragment>
+      <SectionRow
+        label={row.label}
+        depth={depth}
+        divided={divided}
+        parsedFromText={nested.parsedFromText}
+      />
+      <NestedRows value={nested.value} depth={depth + 1} path={path} />
+    </Fragment>
   );
 }
 
-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 FieldRow({
+  row,
+  depth,
+  divided,
+}: {
+  row: RecordPreviewRow;
+  depth: number;
+  divided?: boolean;
+}) {
+  return (
+    <TableRow className={cn("hover:bg-transparent", divided && "border-t-2 border-border/50")}>
+      <TableCell
+        colSpan={2}
+        className="min-w-0 whitespace-normal px-0 py-1.5 pr-8 align-top [overflow-wrap:anywhere]"
+        style={{ paddingLeft: rowIndent(depth) }}
+      >
+        <div className="grid min-w-0 gap-0.5 sm:grid-cols-[8.5rem_minmax(0,1fr)] sm:gap-2">
+          <div className="text-[10px] font-medium leading-snug text-muted-foreground sm:text-[11px]">
+            {row.label}
+          </div>
+          <div className="min-w-0">
+            <RecordValue value={row.value} depth={depth} />
+          </div>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function SectionRow({
+  label,
+  depth,
+  divided,
+  parsedFromText,
+}: {
+  label: string;
+  depth: number;
+  divided?: boolean;
+  parsedFromText: boolean;
+}) {
+  return (
+    <TableRow
+      className={cn("border-b-0 hover:bg-transparent", divided && "border-t-2 border-border/50")}
+    >
+      <TableHead
+        colSpan={2}
+        className="h-auto px-0 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wide text-foreground/85"
+        style={{ paddingLeft: rowIndent(depth) }}
+      >
+        <span className="inline-flex items-center gap-1">
+          {label}
+          {parsedFromText ? (
+            <BracesIcon
+              className="size-3 text-muted-foreground"
+              aria-label="JSON parsed from text"
+            />
+          ) : null}
+        </span>
+      </TableHead>
+    </TableRow>
+  );
+}
+
+function NestedRows({ value, depth, path }: { value: unknown; depth: number; path: string }) {
+  if (depth > MAX_NESTED_DEPTH) {
+    return <ValueRow value={value} depth={depth} />;
+  }
+  if (Array.isArray(value)) {
+    return (
+      <Fragment>
+        {value.map((item, index) => (
+          <ArrayItemRows
+            key={`${path}.${index}`}
+            value={item}
+            depth={depth}
+            path={`${path}.${index}`}
+            divided={index > 0}
+          />
+        ))}
+      </Fragment>
+    );
+  }
+  if (value != null && typeof value === "object") {
+    const rows = recordPreviewRows(value);
+    if (rows.length === 0) return <ValueRow value={value} depth={depth} />;
+    return (
+      <Fragment>
+        {rows.map((row) => (
+          <RecordRow
+            key={`${path}.${row.key}`}
+            row={row}
+            depth={depth}
+            path={`${path}.${row.key}`}
+          />
+        ))}
+      </Fragment>
+    );
+  }
+  return <ValueRow value={value} depth={depth} />;
+}
+
+function ArrayItemRows({
+  value,
+  depth,
+  path,
+  divided,
+}: {
+  value: unknown;
+  depth: number;
+  path: string;
+  divided: boolean;
+}) {
+  const nested = nestedRecordValue(value);
+  if (nested?.parsedFromText) {
+    return (
+      <Fragment>
+        <NestedTextMarkerRow depth={depth} divided={divided} />
+        <NestedRows value={nested.value} depth={depth + 1} path={path} />
+      </Fragment>
+    );
+  }
+  if (value != null && typeof value === "object") {
+    const rows = recordPreviewRows(value);
+    if (rows.length === 0) return <ValueRow value={value} depth={depth} divided={divided} />;
+    return (
+      <Fragment>
+        {rows.map((row, index) => (
+          <RecordRow
+            key={`${path}.${row.key}`}
+            row={row}
+            depth={depth}
+            path={`${path}.${row.key}`}
+            divided={divided && index === 0}
+          />
+        ))}
+      </Fragment>
+    );
+  }
+  return <ValueRow value={value} depth={depth} divided={divided} />;
+}
+
+function NestedTextMarkerRow({ depth, divided }: { depth: number; divided: boolean }) {
+  return (
+    <TableRow className={cn("border-b-0 hover:bg-transparent", divided && "border-t-2")}>
+      <TableHead
+        colSpan={2}
+        className="h-auto px-0 pb-0.5 pt-2 text-muted-foreground"
+        style={{ paddingLeft: rowIndent(depth) }}
+      >
+        <BracesIcon className="size-3" aria-label="JSON parsed from text" />
+      </TableHead>
+    </TableRow>
+  );
+}
+
+function ValueRow({ value, depth, divided }: { value: unknown; depth: number; divided?: boolean }) {
+  return (
+    <TableRow className={cn("hover:bg-transparent", divided && "border-t-2 border-border/50")}>
+      <TableCell
+        colSpan={2}
+        className="min-w-0 whitespace-normal px-0 py-1.5 pr-8 align-top [overflow-wrap:anywhere]"
+        style={{ paddingLeft: rowIndent(depth) }}
+      >
+        <RecordValue value={value} depth={depth} />
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function rowIndent(depth: number): string {
+  return `${Math.min(depth, MAX_INDENT_DEPTH) * 0.9}rem`;
+}
+
+function nestedRecordValue(
+  value: unknown,
+): { value: Record<string, unknown> | unknown[]; parsedFromText: boolean } | undefined {
+  const parsed = parseNestedJsonText(value);
+  if (parsed) return { value: parsed, parsedFromText: true };
+  if (value == null || typeof value !== "object") return undefined;
+  if (Array.isArray(value)) {
+    const hasNestedValue = value.some(
+      (item) =>
+        (item != null && typeof item === "object") || parseNestedJsonText(item) !== undefined,
+    );
+    if (!hasNestedValue) return undefined;
+  }
+  return {
+    value: value as Record<string, unknown> | unknown[],
+    parsedFromText: false,
+  };
 }
 
 function RecordValue({ value, depth }: { value: unknown; depth: number }) {
@@ -151,6 +341,16 @@ function RecordValue({ value, depth }: { value: unknown; depth: number }) {
     return <span className="tabular-nums">{String(value)}</span>;
   }
   if (typeof value === "string") {
+    const language = detectCodeLanguage(value);
+    if (language === "sql") {
+      return (
+        <HighlightedCodeBlock
+          source={value}
+          language={language}
+          className="rounded bg-background/60 p-1.5 text-[10px]"
+        />
+      );
+    }
     if (looksLikeMarkdown(value)) {
       return (
         <div className={MARKDOWN_CELL_CLASSES}>
@@ -160,16 +360,13 @@ function RecordValue({ value, depth }: { value: unknown; depth: number }) {
     }
     return <span className="whitespace-pre-wrap break-words">{value}</span>;
   }
-  if (typeof value === "object" && !Array.isArray(value) && depth < NESTED_DEPTH) {
-    return <RecordTable rows={recordPreviewRows(value)} depth={depth + 1} />;
-  }
   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) {
+    if (depth < MAX_NESTED_DEPTH) {
       return (
         <div className="min-w-0 divide-y divide-border/60">
           {value.map((item, index) => (