@dbx-tools/ui 0.9.79 → 0.9.95

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.79";
+export const PACKAGE_VERSION = "0.9.95";
 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,6 +16,8 @@ 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 reactRecordPreview from "./src/react/record-preview.tsx";
+export * as reactRecordPreviewData from "./src/react/record-preview-data.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";
@@ -34,6 +36,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 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";
 export type { SearchResultsProps } from "./src/search/react/search-results.tsx";
 export type { UseSearchOptions, UseSearchState } from "./src/search/react/use-search.ts";

package/package.json

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

package/src/react/index.ts

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

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

@@ -0,0 +1,78 @@
+/**
+ * Flatten unknown JSON into labeled rows for {@link RecordPreview}.
+ *
+ * @module
+ */
+
+import { stringUtils } from "@dbx-tools/shared-core";
+
+/** One field shown in the table view of {@link RecordPreview}. */
+export interface RecordPreviewRow {
+  /** Original object key, or `value` for a non-object payload. */
+  key: string;
+  /** Title-cased label from {@link stringUtils.toLabel}. */
+  label: string;
+  /** Raw field value, including nested objects and arrays. */
+  value: unknown;
+}
+
+/** Walk a JSON value into humanized key/value rows. */
+export function recordPreviewRows(value: unknown): RecordPreviewRow[] {
+  if (value == null) return [];
+  if (typeof value !== "object" || Array.isArray(value)) {
+    return [{ key: "value", label: "Value", value }];
+  }
+  return Object.entries(value as Record<string, unknown>).map(([key, nested]) => ({
+    key,
+    label: stringUtils.toLabel(key),
+    value: nested,
+  }));
+}
+
+/** Pretty-print JSON for the raw view; strings stay as authored. */
+export function formatRecordPreviewJson(value: unknown): string {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+
+/** YAML document fence at the start of a markdown file (`---` ... `---`). */
+const FRONTMATTER = /^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/;
+
+/**
+ * Structural markdown markers: ATX headings, fences, quotes, lists, and
+ * `[text](url)` links. Requires a space after `#` so paths and hex colors
+ * are not treated as headings.
+ */
+const MARKDOWN_MARKERS = [
+  /^#{1,6}\s+\S/m,
+  /^```/m,
+  /^>\s+\S/m,
+  /^\d+\.\s+\S/m,
+  /^[-*+]\s+\S/m,
+  /\[[^\]]+\]\([^)\s]+\)/,
+] as const;
+
+/** True when a string looks like markdown rather than a plain label or path. */
+export function looksLikeMarkdown(value: string): boolean {
+  const text = value.trim();
+  if (text.length < 8) return false;
+  if (FRONTMATTER.test(text)) return true;
+  return MARKDOWN_MARKERS.some((pattern) => pattern.test(text));
+}
+
+/**
+ * Rewrite leading YAML frontmatter as a fenced `yaml` block so Streamdown
+ * does not turn the `---` fences into horizontal rules.
+ */
+export function markdownForPreview(value: string): string {
+  const trimmed = value.trimStart();
+  const match = FRONTMATTER.exec(trimmed);
+  if (!match) return value;
+  const yaml = match[1]?.trimEnd() ?? "";
+  const rest = trimmed.slice(match[0].length);
+  return `\`\`\`yaml\n${yaml}\n\`\`\`\n\n${rest}`;
+}

package/src/react/record-preview.tsx

@@ -0,0 +1,135 @@
+/**
+ * Humanized key/value table for arbitrary JSON, with an icon toggle to
+ * the raw document.
+ *
+ * @module
+ */
+
+import { BracesIcon, Table2Icon } from "lucide-react";
+import { useState } from "react";
+import { Streamdown } from "streamdown";
+
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  cn,
+} from "./appkit-ui.ts";
+import {
+  formatRecordPreviewJson,
+  looksLikeMarkdown,
+  markdownForPreview,
+  recordPreviewRows,
+  type RecordPreviewRow,
+} from "./record-preview-data.ts";
+
+export type { RecordPreviewRow } from "./record-preview-data.ts";
+export {
+  formatRecordPreviewJson,
+  looksLikeMarkdown,
+  markdownForPreview,
+  recordPreviewRows,
+} from "./record-preview-data.ts";
+
+/** Compact Streamdown in a table cell: match 11px rows, keep lists tight. */
+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;
+
+/** Props for {@link RecordPreview}. */
+export interface RecordPreviewProps {
+  /** JSON-shaped value to display. */
+  value: unknown;
+  /** Extra classes on the outer frame. */
+  className?: string;
+}
+
+/** Compact labeled table of a JSON object, with a JSON/raw icon toggle. */
+export function RecordPreview({ value, className }: RecordPreviewProps) {
+  const [raw, setRaw] = useState(false);
+  const rows = recordPreviewRows(value);
+  return (
+    <div className={cn("relative min-w-0", 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>
+      {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>
+  );
+}
+
+function RecordTable({ rows, depth }: { rows: RecordPreviewRow[]; depth: number }) {
+  if (rows.length === 0) return null;
+  return (
+    <Table className="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>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+function RecordValue({ value, depth }: { value: unknown; depth: number }) {
+  if (value == null) {
+    return <span className="text-muted-foreground">null</span>;
+  }
+  if (typeof value === "boolean" || typeof value === "number") {
+    return <span className="tabular-nums">{String(value)}</span>;
+  }
+  if (typeof value === "string") {
+    if (looksLikeMarkdown(value)) {
+      return (
+        <div className={MARKDOWN_CELL_CLASSES}>
+          <Streamdown controls={false}>{markdownForPreview(value)}</Streamdown>
+        </div>
+      );
+    }
+    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) && value.every((item) => item == null || typeof item !== "object")) {
+    return <span className="whitespace-pre-wrap break-words">{value.map(String).join(", ")}</span>;
+  }
+  return (
+    <pre className="whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed">
+      {formatRecordPreviewJson(value)}
+    </pre>
+  );
+}