@flanksource/clicky-ui 0.3.9 → 0.3.11

package/dist/data/Properties.js

@@ -1,19 +1,39 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { IconButton } from "../components/IconButton.js";
 import { cn } from "../lib/utils.js";
+import { DropdownMenu } from "../overlay/DropdownMenu.js";
 import { Icon } from "./Icon.js";
 import { formatPropertyLabel } from "./properties-utils.js";
+import { UiRows } from "../icons/components/UiRows.js";
+import { UiListFlat } from "../icons/components/UiListFlat.js";
+import { UiListDashes } from "../icons/components/UiListDashes.js";
+import { UiCheck } from "../icons/components/UiCheck.js";
+import { UiDotsVertical } from "../icons/components/UiDotsVertical.js";
+const PROPERTIES_DENSITY_STORAGE_PREFIX = "clicky-ui-properties";
+const PROPERTIES_DENSITY_OPTIONS = [
+  { value: "compact", label: "Compact", icon: UiRows },
+  { value: "comfortable", label: "Comfortable", icon: UiListFlat },
+  { value: "spacious", label: "Spacious", icon: UiListDashes }
+];
 const DENSITY_CLASSES = {
+  spacious: {
+    row: "px-density-4 py-density-3",
+    label: "text-sm font-medium text-muted-foreground",
+    value: "text-base text-foreground",
+    gridTemplateColumns: "minmax(12rem, 20rem) minmax(0, 1fr)"
+  },
   comfortable: {
     row: "px-density-3 py-density-2",
     label: "text-xs font-medium text-muted-foreground",
     value: "text-sm text-foreground",
-    gridCols: "grid-cols-[minmax(7rem,12rem)_minmax(0,1fr)]"
+    gridTemplateColumns: "minmax(7rem, 12rem) minmax(0, 1fr)"
   },
   compact: {
     row: "px-density-2 py-density-1.5",
     label: "font-mono text-[11px] text-muted-foreground",
     value: "text-xs text-foreground",
-    gridCols: "grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)]"
+    gridTemplateColumns: "minmax(8rem, 14rem) minmax(0, 1fr)"
   }
 };
 function Properties({
@@ -25,62 +45,162 @@ function Properties({
   suffixActions,
   className,
   rowClassName,
+  gridTemplateColumns,
   labelClassName,
   valueClassName,
   density = "comfortable",
+  keyRef,
+  showDensityMenu = true,
   emptyMessage = "No properties"
 }) {
+  const [densityOverride, setDensityOverride] = useState();
+  useEffect(() => setDensityOverride(readStoredDensity(keyRef)), [keyRef]);
   const visible = items.filter((item) => !item.hidden);
   if (visible.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: emptyMessage });
   }
-  const styles = DENSITY_CLASSES[density];
-  return /* @__PURE__ */ jsx(
+  const activeDensity = densityOverride ?? density;
+  const styles = DENSITY_CLASSES[activeDensity];
+  const updateDensity = (next) => {
+    setDensityOverride(next);
+    writeStoredDensity(keyRef, next);
+  };
+  return /* @__PURE__ */ jsxs(
     "dl",
     {
       className: cn(
         "divide-y divide-border rounded-md border border-border bg-muted/20",
         className
       ),
-      children: visible.map((item) => {
-        const iconName = typeof labelIcon === "function" ? labelIcon(item.key, item.value, item) : labelIcon;
-        const renderedLabel = renderLabel ? renderLabel(item.key, item.value, item) : formatPropertyLabel(item.key);
-        const ariaLabel = typeof renderedLabel === "string" ? renderedLabel : item.key;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn("grid min-w-0 gap-density-3", styles.gridCols, styles.row, rowClassName),
-            children: [
-              /* @__PURE__ */ jsxs(
-                "dt",
-                {
-                  "aria-label": ariaLabel,
-                  className: cn("min-w-0 truncate", styles.label, labelClassName),
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-density-1", children: [
-                      iconName ? /* @__PURE__ */ jsx(Icon, { name: iconName, className: "text-xs shrink-0" }) : null,
-                      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: renderedLabel })
-                    ] }),
-                    item.subtitle ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[10px] font-normal text-muted-foreground/80", children: item.subtitle }) : null
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs("dd", { className: cn("min-w-0 space-y-density-1", valueClassName), children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-density-1", children: [
-                  /* @__PURE__ */ jsx(ActionList, { actions: prefixActions, item, className: "shrink-0 pt-0.5" }),
-                  /* @__PURE__ */ jsx("div", { className: cn("min-w-0 max-w-full", styles.value), children: renderValue ? renderValue(item.key, item.value, item) : defaultRenderValue(item.value) }),
-                  /* @__PURE__ */ jsx(ActionList, { actions: suffixActions, item, className: "shrink-0 pt-0.5" })
-                ] }),
-                item.expandable && item.expanded && item.renderChildren ? item.renderChildren() : null
-              ] })
-            ]
-          },
-          item.key
-        );
-      })
+      children: [
+        showDensityMenu ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end px-density-2 py-density-1", children: [
+          /* @__PURE__ */ jsx("dt", { className: "sr-only", children: "Properties display options" }),
+          /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(PropertiesDensityMenu, { density: activeDensity, onChange: updateDensity }) })
+        ] }) : null,
+        visible.map((item) => {
+          const iconName = typeof labelIcon === "function" ? labelIcon(item.key, item.value, item) : labelIcon;
+          const renderedLabel = renderLabel ? renderLabel(item.key, item.value, item) : formatPropertyLabel(item.key);
+          const ariaLabel = typeof renderedLabel === "string" ? renderedLabel : item.key;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("grid min-w-0 gap-density-3", styles.row, rowClassName),
+              style: { gridTemplateColumns: gridTemplateColumns ?? styles.gridTemplateColumns },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "dt",
+                  {
+                    "aria-label": ariaLabel,
+                    className: cn("min-w-0 truncate", styles.label, labelClassName),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-density-1", children: [
+                        iconName ? /* @__PURE__ */ jsx(Icon, { name: iconName, className: "text-xs shrink-0" }) : null,
+                        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: renderedLabel })
+                      ] }),
+                      item.subtitle ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[10px] font-normal text-muted-foreground/80", children: item.subtitle }) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("dd", { className: cn("min-w-0 space-y-density-1", valueClassName), children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-density-1", children: [
+                    /* @__PURE__ */ jsx(ActionList, { actions: prefixActions, item, className: "shrink-0 pt-0.5" }),
+                    /* @__PURE__ */ jsx("div", { className: cn("min-w-0 max-w-full flex-1", styles.value), children: renderValue ? renderValue(item.key, item.value, item) : defaultRenderValue(item.value) }),
+                    /* @__PURE__ */ jsx(ActionList, { actions: suffixActions, item, className: "shrink-0 pt-0.5" })
+                  ] }),
+                  item.expandable && item.expanded && item.renderChildren ? item.renderChildren() : null
+                ] })
+              ]
+            },
+            item.key
+          );
+        })
+      ]
+    }
+  );
+}
+function PropertiesDensityMenu({
+  density,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      align: "right",
+      menuLabel: "Properties options",
+      trigger: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: UiDotsVertical,
+          label: "Properties options",
+          className: "h-6 w-6"
+        }
+      ),
+      children: (closeMenu) => /* @__PURE__ */ jsxs("div", { className: "min-w-44 py-1 text-popover-foreground", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-xs font-medium text-muted-foreground", children: "Density" }),
+        PROPERTIES_DENSITY_OPTIONS.map((option) => {
+          const active = density === option.value;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": active,
+              className: densityMenuItemClassName(active),
+              onClick: () => {
+                onChange(option.value);
+                closeMenu();
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: option.icon,
+                    className: "text-sm text-muted-foreground"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+                active ? /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+              ]
+            },
+            option.value
+          );
+        })
+      ] })
     }
   );
 }
+function densityMenuItemClassName(active) {
+  return cn(
+    "flex w-full items-center gap-2 px-2 py-1.5 text-left text-sm",
+    "hover:bg-accent focus:bg-accent focus:outline-none",
+    active && "bg-accent/60"
+  );
+}
+function readStoredDensity(keyRef) {
+  const storageKey = propertiesDensityStorageKey(keyRef);
+  if (!storageKey || typeof window === "undefined") return void 0;
+  try {
+    const value = window.localStorage.getItem(storageKey);
+    return isPropertiesDensity(value) ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStoredDensity(keyRef, density) {
+  const storageKey = propertiesDensityStorageKey(keyRef);
+  if (!storageKey || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(storageKey, density);
+  } catch {
+  }
+}
+function propertiesDensityStorageKey(keyRef) {
+  const normalized = keyRef == null ? void 0 : keyRef.trim();
+  return normalized ? `${PROPERTIES_DENSITY_STORAGE_PREFIX}:${normalized}:density` : void 0;
+}
+function isPropertiesDensity(value) {
+  return value === "compact" || value === "comfortable" || value === "spacious";
+}
 function ActionList({
   actions,
   item,

package/dist/data/Properties.js.map

@@ -1 +1 @@
-{"version":3,"file":"Properties.js","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\n\nexport type PropertiesAction<V = unknown> = {\n  /** Stable action id. */\n  id: string;\n  /** Iconify name or imported icon component. */\n  icon: string | StaticIconComponent;\n  /** Accessible label and tooltip for this row action. */\n  label: (key: string, value: V, item: PropertiesItem<V>) => string;\n  /** Return false to hide the action for a specific row. */\n  visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Return true to disable the action for a specific row. */\n  disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Called when the row action is clicked. */\n  onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n  /** Stable property key. Also used as the default label. */\n  key: string;\n  /** Property value passed to renderers and actions. */\n  value: V;\n  /** Secondary text shown below the label. */\n  subtitle?: ReactNode;\n  /** Hide this row without removing it from the item array. */\n  hidden?: boolean;\n  /** Enables an expandable child area below the row value. */\n  expandable?: boolean;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Called when an expandable row is toggled. */\n  onToggle?: (next: boolean) => void;\n  /** Child content rendered when the row is expanded. */\n  renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\";\n\nexport type PropertiesProps<V = unknown> = {\n  /** Property rows to render. Hidden items are filtered out. */\n  items: PropertiesItem<V>[];\n  /** Custom label renderer. */\n  renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Custom value renderer. */\n  renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Static icon name or function that returns an icon name per row. */\n  labelIcon?: string | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n  /** Actions rendered before the value. */\n  prefixActions?: PropertiesAction<V>[];\n  /** Actions rendered after the value. */\n  suffixActions?: PropertiesAction<V>[];\n  /** Classes applied to the list root. */\n  className?: string;\n  /** Classes applied to each row. */\n  rowClassName?: string;\n  /** Classes applied to each label cell. */\n  labelClassName?: string;\n  /** Classes applied to each value cell. */\n  valueClassName?: string;\n  /** Row density preset. */\n  density?: PropertiesDensity;\n  /** Empty-state content when no rows are visible. */\n  emptyMessage?: ReactNode;\n};\n\nconst DENSITY_CLASSES: Record<\n  PropertiesDensity,\n  { row: string; label: string; value: string; gridCols: string }\n> = {\n  comfortable: {\n    row: \"px-density-3 py-density-2\",\n    label: \"text-xs font-medium text-muted-foreground\",\n    value: \"text-sm text-foreground\",\n    gridCols: \"grid-cols-[minmax(7rem,12rem)_minmax(0,1fr)]\",\n  },\n  compact: {\n    row: \"px-density-2 py-density-1.5\",\n    label: \"font-mono text-[11px] text-muted-foreground\",\n    value: \"text-xs text-foreground\",\n    gridCols: \"grid-cols-[minmax(8rem,14rem)_minmax(0,1fr)]\",\n  },\n};\n\nexport function Properties<V = unknown>({\n  items,\n  renderLabel,\n  renderValue,\n  labelIcon,\n  prefixActions,\n  suffixActions,\n  className,\n  rowClassName,\n  labelClassName,\n  valueClassName,\n  density = \"comfortable\",\n  emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n  const visible = items.filter((item) => !item.hidden);\n\n  if (visible.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const styles = DENSITY_CLASSES[density];\n\n  return (\n    <dl\n      className={cn(\n        \"divide-y divide-border rounded-md border border-border bg-muted/20\",\n        className,\n      )}\n    >\n      {visible.map((item) => {\n        const iconName =\n          typeof labelIcon === \"function\" ? labelIcon(item.key, item.value, item) : labelIcon;\n        const renderedLabel = renderLabel\n          ? renderLabel(item.key, item.value, item)\n          : formatPropertyLabel(item.key);\n        const ariaLabel = typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n        return (\n          <div\n            key={item.key}\n            className={cn(\"grid min-w-0 gap-density-3\", styles.gridCols, styles.row, rowClassName)}\n          >\n            <dt\n              aria-label={ariaLabel}\n              className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n            >\n              <div className=\"flex min-w-0 items-center gap-density-1\">\n                {iconName ? <Icon name={iconName} className=\"text-xs shrink-0\" /> : null}\n                <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n              </div>\n              {item.subtitle ? (\n                <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n                  {item.subtitle}\n                </div>\n              ) : null}\n            </dt>\n            <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n              <div className=\"flex min-w-0 items-start gap-density-1\">\n                <ActionList actions={prefixActions} item={item} className=\"shrink-0 pt-0.5\" />\n                <div className={cn(\"min-w-0 max-w-full\", styles.value)}>\n                  {renderValue\n                    ? renderValue(item.key, item.value, item)\n                    : defaultRenderValue(item.value)}\n                </div>\n                <ActionList actions={suffixActions} item={item} className=\"shrink-0 pt-0.5\" />\n              </div>\n              {item.expandable && item.expanded && item.renderChildren\n                ? item.renderChildren()\n                : null}\n            </dd>\n          </div>\n        );\n      })}\n    </dl>\n  );\n}\n\nfunction ActionList<V>({\n  actions,\n  item,\n  className,\n}: {\n  actions: PropertiesAction<V>[] | undefined;\n  item: PropertiesItem<V>;\n  className?: string;\n}) {\n  if (!actions || actions.length === 0) return null;\n  const rendered = actions.filter(\n    (action) => !action.visible || action.visible(item.key, item.value, item),\n  );\n  if (rendered.length === 0) return null;\n  return (\n    <span className={cn(\"inline-flex items-center\", className)}>\n      {rendered.map((action) => (\n        <PropertiesActionButton key={action.id} action={action} item={item} />\n      ))}\n    </span>\n  );\n}\n\nfunction PropertiesActionButton<V>({\n  action,\n  item,\n}: {\n  action: PropertiesAction<V>;\n  item: PropertiesItem<V>;\n}) {\n  const label = action.label(item.key, item.value, item);\n  const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n      )}\n      onClick={(event) => {\n        event.stopPropagation();\n        action.onClick(item.key, item.value, item);\n      }}\n    >\n      <Icon\n        {...(typeof action.icon === \"string\" ? { name: action.icon } : { icon: action.icon })}\n        className=\"text-xs\"\n      />\n    </button>\n  );\n}\n\nfunction defaultRenderValue(value: unknown): ReactNode {\n  if (value === null || value === undefined) {\n    return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n  }\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"number\" || typeof value === \"boolean\") {\n    return <span className=\"font-mono\">{String(value)}</span>;\n  }\n  try {\n    return (\n      <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed\">\n        {JSON.stringify(value, null, 2)}\n      </pre>\n    );\n  } catch {\n    return String(value);\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Properties.js","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { IconButton } from \"../components/IconButton\";\nimport {\n  UiCheck,\n  UiDotsVertical,\n  UiListDashes,\n  UiListFlat,\n  UiRows,\n} from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\n\nexport type PropertiesAction<V = unknown> = {\n  /** Stable action id. */\n  id: string;\n  /** Iconify name or imported icon component. */\n  icon: string | StaticIconComponent;\n  /** Accessible label and tooltip for this row action. */\n  label: (key: string, value: V, item: PropertiesItem<V>) => string;\n  /** Return false to hide the action for a specific row. */\n  visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Return true to disable the action for a specific row. */\n  disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Called when the row action is clicked. */\n  onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n  /** Stable property key. Also used as the default label. */\n  key: string;\n  /** Property value passed to renderers and actions. */\n  value: V;\n  /** Secondary text shown below the label. */\n  subtitle?: ReactNode;\n  /** Hide this row without removing it from the item array. */\n  hidden?: boolean;\n  /** Enables an expandable child area below the row value. */\n  expandable?: boolean;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Called when an expandable row is toggled. */\n  onToggle?: (next: boolean) => void;\n  /** Child content rendered when the row is expanded. */\n  renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\" | \"spacious\";\n\nexport type PropertiesProps<V = unknown> = {\n  /** Property rows to render. Hidden items are filtered out. */\n  items: PropertiesItem<V>[];\n  /** Custom label renderer. */\n  renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Custom value renderer. */\n  renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Static icon name or function that returns an icon name per row. */\n  labelIcon?: string | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n  /** Actions rendered before the value. */\n  prefixActions?: PropertiesAction<V>[];\n  /** Actions rendered after the value. */\n  suffixActions?: PropertiesAction<V>[];\n  /** Classes applied to the list root. */\n  className?: string;\n  /** Classes applied to each row. */\n  rowClassName?: string;\n  /** CSS grid columns applied to each row. Defaults to the selected density preset. */\n  gridTemplateColumns?: string;\n  /** Classes applied to each label cell. */\n  labelClassName?: string;\n  /** Classes applied to each value cell. */\n  valueClassName?: string;\n  /** Row density preset. */\n  density?: PropertiesDensity;\n  /** Stable reference used to persist this instance's density preference. */\n  keyRef?: string;\n  /** Show the display-options menu. */\n  showDensityMenu?: boolean;\n  /** Empty-state content when no rows are visible. */\n  emptyMessage?: ReactNode;\n};\n\nconst PROPERTIES_DENSITY_STORAGE_PREFIX = \"clicky-ui-properties\";\n\nconst PROPERTIES_DENSITY_OPTIONS: Array<{\n  value: PropertiesDensity;\n  label: string;\n  icon: StaticIconComponent;\n}> = [\n  { value: \"compact\", label: \"Compact\", icon: UiRows },\n  { value: \"comfortable\", label: \"Comfortable\", icon: UiListFlat },\n  { value: \"spacious\", label: \"Spacious\", icon: UiListDashes },\n];\n\nconst DENSITY_CLASSES: Record<\n  PropertiesDensity,\n  { row: string; label: string; value: string; gridTemplateColumns: string }\n> = {\n  spacious: {\n    row: \"px-density-4 py-density-3\",\n    label: \"text-sm font-medium text-muted-foreground\",\n    value: \"text-base text-foreground\",\n    gridTemplateColumns: \"minmax(12rem, 20rem) minmax(0, 1fr)\",\n  },\n  comfortable: {\n    row: \"px-density-3 py-density-2\",\n    label: \"text-xs font-medium text-muted-foreground\",\n    value: \"text-sm text-foreground\",\n    gridTemplateColumns: \"minmax(7rem, 12rem) minmax(0, 1fr)\",\n  },\n  compact: {\n    row: \"px-density-2 py-density-1.5\",\n    label: \"font-mono text-[11px] text-muted-foreground\",\n    value: \"text-xs text-foreground\",\n    gridTemplateColumns: \"minmax(8rem, 14rem) minmax(0, 1fr)\",\n  },\n};\n\nexport function Properties<V = unknown>({\n  items,\n  renderLabel,\n  renderValue,\n  labelIcon,\n  prefixActions,\n  suffixActions,\n  className,\n  rowClassName,\n  gridTemplateColumns,\n  labelClassName,\n  valueClassName,\n  density = \"comfortable\",\n  keyRef,\n  showDensityMenu = true,\n  emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n  const [densityOverride, setDensityOverride] = useState<PropertiesDensity>();\n  useEffect(() => setDensityOverride(readStoredDensity(keyRef)), [keyRef]);\n\n  const visible = items.filter((item) => !item.hidden);\n\n  if (visible.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const activeDensity = densityOverride ?? density;\n  const styles = DENSITY_CLASSES[activeDensity];\n\n  const updateDensity = (next: PropertiesDensity) => {\n    setDensityOverride(next);\n    writeStoredDensity(keyRef, next);\n  };\n\n  return (\n    <dl\n      className={cn(\n        \"divide-y divide-border rounded-md border border-border bg-muted/20\",\n        className,\n      )}\n    >\n      {showDensityMenu ? (\n        <div className=\"flex items-center justify-end px-density-2 py-density-1\">\n          <dt className=\"sr-only\">Properties display options</dt>\n          <dd>\n            <PropertiesDensityMenu density={activeDensity} onChange={updateDensity} />\n          </dd>\n        </div>\n      ) : null}\n      {visible.map((item) => {\n        const iconName =\n          typeof labelIcon === \"function\" ? labelIcon(item.key, item.value, item) : labelIcon;\n        const renderedLabel = renderLabel\n          ? renderLabel(item.key, item.value, item)\n          : formatPropertyLabel(item.key);\n        const ariaLabel = typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n        return (\n          <div\n            key={item.key}\n            className={cn(\"grid min-w-0 gap-density-3\", styles.row, rowClassName)}\n            style={{ gridTemplateColumns: gridTemplateColumns ?? styles.gridTemplateColumns }}\n          >\n            <dt\n              aria-label={ariaLabel}\n              className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n            >\n              <div className=\"flex min-w-0 items-center gap-density-1\">\n                {iconName ? <Icon name={iconName} className=\"text-xs shrink-0\" /> : null}\n                <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n              </div>\n              {item.subtitle ? (\n                <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n                  {item.subtitle}\n                </div>\n              ) : null}\n            </dt>\n            <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n              <div className=\"flex min-w-0 items-start gap-density-1\">\n                <ActionList actions={prefixActions} item={item} className=\"shrink-0 pt-0.5\" />\n                <div className={cn(\"min-w-0 max-w-full flex-1\", styles.value)}>\n                  {renderValue\n                    ? renderValue(item.key, item.value, item)\n                    : defaultRenderValue(item.value)}\n                </div>\n                <ActionList actions={suffixActions} item={item} className=\"shrink-0 pt-0.5\" />\n              </div>\n              {item.expandable && item.expanded && item.renderChildren\n                ? item.renderChildren()\n                : null}\n            </dd>\n          </div>\n        );\n      })}\n    </dl>\n  );\n}\n\nfunction PropertiesDensityMenu({\n  density,\n  onChange,\n}: {\n  density: PropertiesDensity;\n  onChange: (density: PropertiesDensity) => void;\n}) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Properties options\"\n      trigger={\n        <IconButton\n          icon={UiDotsVertical}\n          label=\"Properties options\"\n          className=\"h-6 w-6\"\n        />\n      }\n    >\n      {(closeMenu) => (\n        <div className=\"min-w-44 py-1 text-popover-foreground\">\n          <div className=\"px-2 py-1 text-xs font-medium text-muted-foreground\">\n            Density\n          </div>\n          {PROPERTIES_DENSITY_OPTIONS.map((option) => {\n            const active = density === option.value;\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={active}\n                className={densityMenuItemClassName(active)}\n                onClick={() => {\n                  onChange(option.value);\n                  closeMenu();\n                }}\n              >\n                <Icon\n                  icon={option.icon}\n                  className=\"text-sm text-muted-foreground\"\n                />\n                <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n                {active ? (\n                  <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n                ) : (\n                  <span className=\"inline-block h-4 w-4\" aria-hidden />\n                )}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction densityMenuItemClassName(active: boolean): string {\n  return cn(\n    \"flex w-full items-center gap-2 px-2 py-1.5 text-left text-sm\",\n    \"hover:bg-accent focus:bg-accent focus:outline-none\",\n    active && \"bg-accent/60\",\n  );\n}\n\nfunction readStoredDensity(\n  keyRef: string | undefined,\n): PropertiesDensity | undefined {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return undefined;\n\n  try {\n    const value = window.localStorage.getItem(storageKey);\n    return isPropertiesDensity(value) ? value : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredDensity(\n  keyRef: string | undefined,\n  density: PropertiesDensity,\n): void {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return;\n\n  try {\n    window.localStorage.setItem(storageKey, density);\n  } catch {\n    // Display preferences are best-effort when browser storage is unavailable.\n  }\n}\n\nfunction propertiesDensityStorageKey(\n  keyRef: string | undefined,\n): string | undefined {\n  const normalized = keyRef?.trim();\n  return normalized\n    ? `${PROPERTIES_DENSITY_STORAGE_PREFIX}:${normalized}:density`\n    : undefined;\n}\n\nfunction isPropertiesDensity(value: unknown): value is PropertiesDensity {\n  return value === \"compact\" || value === \"comfortable\" || value === \"spacious\";\n}\n\nfunction ActionList<V>({\n  actions,\n  item,\n  className,\n}: {\n  actions: PropertiesAction<V>[] | undefined;\n  item: PropertiesItem<V>;\n  className?: string;\n}) {\n  if (!actions || actions.length === 0) return null;\n  const rendered = actions.filter(\n    (action) => !action.visible || action.visible(item.key, item.value, item),\n  );\n  if (rendered.length === 0) return null;\n  return (\n    <span className={cn(\"inline-flex items-center\", className)}>\n      {rendered.map((action) => (\n        <PropertiesActionButton key={action.id} action={action} item={item} />\n      ))}\n    </span>\n  );\n}\n\nfunction PropertiesActionButton<V>({\n  action,\n  item,\n}: {\n  action: PropertiesAction<V>;\n  item: PropertiesItem<V>;\n}) {\n  const label = action.label(item.key, item.value, item);\n  const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n      )}\n      onClick={(event) => {\n        event.stopPropagation();\n        action.onClick(item.key, item.value, item);\n      }}\n    >\n      <Icon\n        {...(typeof action.icon === \"string\" ? { name: action.icon } : { icon: action.icon })}\n        className=\"text-xs\"\n      />\n    </button>\n  );\n}\n\nfunction defaultRenderValue(value: unknown): ReactNode {\n  if (value === null || value === undefined) {\n    return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n  }\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"number\" || typeof value === \"boolean\") {\n    return <span className=\"font-mono\">{String(value)}</span>;\n  }\n  try {\n    return (\n      <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed\">\n        {JSON.stringify(value, null, 2)}\n      </pre>\n    );\n  } catch {\n    return String(value);\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/data/SchemaViewer.cjs

@@ -63,7 +63,7 @@ const BADGE_TONE = {
 function SchemaViewerRow({ node }) {
   const tone = node.badge ? BADGE_TONE[node.badge] : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full min-w-0 items-center gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate font-mono", children: node.label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 whitespace-nowrap font-mono", children: node.label }),
     node.badge && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {

package/dist/data/SchemaViewer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SchemaViewer.cjs","sources":["../../src/data/SchemaViewer.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { rehydrateRefs } from \"../components/json-schema-form-refs\";\nimport type { JsonSchemaObject } from \"../components/json-schema-form-types\";\nimport { cn } from \"../lib/utils\";\nimport { CodeBlock } from \"./CodeBlock\";\nimport { Tree } from \"./Tree\";\nimport {\n  buildSchemaTree,\n  type SchemaViewerFieldMeta,\n  type SchemaViewerNode,\n} from \"./schema-viewer-model\";\n\nexport interface SchemaViewerProps {\n  schema: JsonSchemaObject;\n  /** Pre-scoped tree roots, for dialogs that want to show a single schema branch. */\n  roots?: SchemaViewerNode[];\n  /** Custom tree builder. Defaults to buildSchemaTree. */\n  buildTree?: (schema: JsonSchemaObject) => SchemaViewerNode[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  toolbarClassName?: string;\n  /** Root depth opened by default. Defaults to 1, matching the platform tree. */\n  defaultOpenDepth?: number;\n  /** Override the expanded detail panel for annotated fields. */\n  renderDetail?: (meta: SchemaViewerFieldMeta) => ReactNode;\n}\n\nfunction isDetailOnly(node: SchemaViewerNode): boolean {\n  const [child] = node.children ?? [];\n  return node.children?.length === 1 && Boolean(child?.detail);\n}\n\nexport function SchemaViewer({\n  schema,\n  roots: scopedRoots,\n  buildTree = buildSchemaTree,\n  className,\n  empty = <p className=\"p-3 text-sm text-muted-foreground\">This schema has no fields.</p>,\n  showControls,\n  toolbarClassName,\n  defaultOpenDepth = 1,\n  renderDetail,\n}: SchemaViewerProps) {\n  const roots = useMemo(\n    () => scopedRoots ?? buildTree(rehydrateRefs(schema)),\n    [buildTree, scopedRoots, schema],\n  );\n\n  return (\n    <Tree<SchemaViewerNode>\n      className={cn(\"text-sm\", className)}\n      roots={roots}\n      getKey={(node) => node.key}\n      getChildren={(node) => node.children}\n      isSecondary={(node) => Boolean(node.detail)}\n      getSearchText={(node) =>\n        node.detail ? \"\" : `${node.label} ${node.badge ?? \"\"} ${node.platformType ?? \"\"} ${node.ascode ?? \"\"}`\n      }\n      defaultOpen={(node, depth) => depth < defaultOpenDepth && !isDetailOnly(node)}\n      rowClass={(node, selected) =>\n        node.detail\n          ? \"cursor-default\"\n          : selected\n            ? \"bg-primary/10 border-l-2 border-primary\"\n            : \"hover:bg-accent\"\n      }\n      renderRow={({ node }) =>\n        node.detail ? (\n          <div className=\"min-w-0 flex-1\">\n            {renderDetail ? renderDetail(node.detail) : <SchemaFieldMetaPanel meta={node.detail} />}\n          </div>\n        ) : (\n          <SchemaViewerRow node={node} />\n        )\n      }\n      empty={empty}\n      {...(showControls !== undefined ? { showControls } : {})}\n      {...(toolbarClassName !== undefined ? { toolbarClassName } : {})}\n    />\n  );\n}\n\nconst BADGE_TONE: Record<string, string> = {\n  branch: \"bg-violet-100 text-violet-700 dark:bg-violet-950/50 dark:text-violet-200\",\n  group: \"bg-violet-100 text-violet-700 dark:bg-violet-950/50 dark:text-violet-200\",\n  activity: \"bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-200\",\n  clientType: \"bg-sky-100 text-sky-700 dark:bg-sky-950/50 dark:text-sky-200\",\n  clientTypes: \"bg-sky-100 text-sky-700 dark:bg-sky-950/50 dark:text-sky-200\",\n  fields: \"bg-amber-100 text-amber-700 dark:bg-amber-950/50 dark:text-amber-200\",\n  object: \"bg-muted text-muted-foreground\",\n  array: \"bg-muted text-muted-foreground\",\n  string: \"bg-muted text-muted-foreground\",\n  number: \"bg-muted text-muted-foreground\",\n  integer: \"bg-muted text-muted-foreground\",\n  boolean: \"bg-muted text-muted-foreground\",\n  const: \"bg-muted text-muted-foreground\",\n};\n\nexport function SchemaViewerRow({ node }: { node: SchemaViewerNode }) {\n  const tone = node.badge ? BADGE_TONE[node.badge] : undefined;\n  return (\n    <span className=\"flex w-full min-w-0 items-center gap-2\">\n      <span className=\"min-w-0 truncate font-mono\">{node.label}</span>\n      {node.badge && (\n        <span\n          className={cn(\n            \"shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium\",\n            tone ?? \"bg-muted text-muted-foreground\",\n          )}\n        >\n          {node.badge}\n        </span>\n      )}\n      {node.count !== undefined && (\n        <span className=\"shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] tabular-nums text-muted-foreground\">\n          {node.count}\n        </span>\n      )}\n      {node.platformType && (\n        <span className=\"shrink-0 rounded bg-indigo-50 px-1.5 py-0.5 text-[10px] text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-200\">\n          {node.platformType}\n        </span>\n      )}\n      {node.ascode && (\n        <span className=\"shrink-0 rounded bg-rose-50 px-1.5 py-0.5 text-[10px] text-rose-700 dark:bg-rose-950/50 dark:text-rose-200\">\n          code: {node.ascode}\n        </span>\n      )}\n      {node.description && (\n        <span className=\"min-w-0 truncate text-xs text-muted-foreground\">{node.description}</span>\n      )}\n    </span>\n  );\n}\n\nexport interface SchemaFieldMetaPanelProps {\n  meta: SchemaViewerFieldMeta;\n}\n\nconst ENUM_LIMIT = 12;\nconst PLATFORM_TYPE_LABEL = [\"OI\", \"PA type\"].join(\"\");\n\nexport function SchemaFieldMetaPanel({ meta }: SchemaFieldMetaPanelProps) {\n  const enums = meta.enumValues ?? [];\n  const shown = enums.slice(0, ENUM_LIMIT);\n  const hidden = enums.length - shown.length;\n  const loc = meta.location;\n\n  return (\n    <div className=\"my-1 space-y-2 rounded-md border border-border bg-muted/30 p-2 text-xs\">\n      <dl className=\"grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5\">\n        <Row label={PLATFORM_TYPE_LABEL} value={meta.platformType} />\n        <Row label=\"AsCode\" value={meta.ascode} />\n        <Row label=\"Format\" value={meta.format} />\n        <Row label=\"Layout\" value={meta.layout} />\n        <Row label=\"Client ref\" value={meta.clientRef ? \"yes\" : undefined} />\n        {meta.annotations?.map((annotation) => (\n          <Row key={annotation.key} label={annotation.key} value={annotation.value} />\n        ))}\n      </dl>\n\n      {meta.description && <p className=\"text-muted-foreground\">{meta.description}</p>}\n\n      {enums.length > 0 && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Enum ({enums.length})</p>\n          <ul className=\"max-h-48 space-y-0.5 overflow-auto\">\n            {shown.map((entry) => (\n              <li key={entry.value}>\n                <span className=\"font-mono\">{entry.value}</span>\n                {entry.label && <span className=\"text-muted-foreground\"> - {entry.label}</span>}\n              </li>\n            ))}\n          </ul>\n          {hidden > 0 && <p className=\"text-muted-foreground\">+{hidden} more</p>}\n        </div>\n      )}\n\n      {meta.query && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Query</p>\n          <div className=\"max-h-64 overflow-auto\">\n            <CodeBlock language=\"sql\" source={meta.query} />\n          </div>\n        </div>\n      )}\n\n      {loc && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Source location</p>\n          <p className=\"break-all font-mono\">{formatLocation(loc.path, loc.startLine, loc.endLine)}</p>\n        </div>\n      )}\n\n      {meta.source && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Source</p>\n          <div className=\"max-h-64 overflow-auto\">\n            <CodeBlock language=\"xml\" source={meta.source} />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Row({ label, value }: { label: string; value: ReactNode }): ReactNode {\n  if (value === undefined || value === null) return null;\n  return (\n    <>\n      <dt className=\"text-muted-foreground\">{label}</dt>\n      <dd className=\"break-all font-mono\">{value}</dd>\n    </>\n  );\n}\n\nfunction formatLocation(path: string, startLine?: number, endLine?: number): string {\n  if (startLine === undefined) return path;\n  if (endLine === undefined || endLine === startLine) return `${path}:${startLine}`;\n  return `${path}:${startLine}-${endLine}`;\n}\n"],"names":["buildSchemaTree","jsx","useMemo","rehydrateRefs","Tree","cn","jsxs","CodeBlock","Fragment"],"mappings":"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"}
+{"version":3,"file":"SchemaViewer.cjs","sources":["../../src/data/SchemaViewer.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { rehydrateRefs } from \"../components/json-schema-form-refs\";\nimport type { JsonSchemaObject } from \"../components/json-schema-form-types\";\nimport { cn } from \"../lib/utils\";\nimport { CodeBlock } from \"./CodeBlock\";\nimport { Tree } from \"./Tree\";\nimport {\n  buildSchemaTree,\n  type SchemaViewerFieldMeta,\n  type SchemaViewerNode,\n} from \"./schema-viewer-model\";\n\nexport interface SchemaViewerProps {\n  schema: JsonSchemaObject;\n  /** Pre-scoped tree roots, for dialogs that want to show a single schema branch. */\n  roots?: SchemaViewerNode[];\n  /** Custom tree builder. Defaults to buildSchemaTree. */\n  buildTree?: (schema: JsonSchemaObject) => SchemaViewerNode[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  toolbarClassName?: string;\n  /** Root depth opened by default. Defaults to 1, matching the platform tree. */\n  defaultOpenDepth?: number;\n  /** Override the expanded detail panel for annotated fields. */\n  renderDetail?: (meta: SchemaViewerFieldMeta) => ReactNode;\n}\n\nfunction isDetailOnly(node: SchemaViewerNode): boolean {\n  const [child] = node.children ?? [];\n  return node.children?.length === 1 && Boolean(child?.detail);\n}\n\nexport function SchemaViewer({\n  schema,\n  roots: scopedRoots,\n  buildTree = buildSchemaTree,\n  className,\n  empty = <p className=\"p-3 text-sm text-muted-foreground\">This schema has no fields.</p>,\n  showControls,\n  toolbarClassName,\n  defaultOpenDepth = 1,\n  renderDetail,\n}: SchemaViewerProps) {\n  const roots = useMemo(\n    () => scopedRoots ?? buildTree(rehydrateRefs(schema)),\n    [buildTree, scopedRoots, schema],\n  );\n\n  return (\n    <Tree<SchemaViewerNode>\n      className={cn(\"text-sm\", className)}\n      roots={roots}\n      getKey={(node) => node.key}\n      getChildren={(node) => node.children}\n      isSecondary={(node) => Boolean(node.detail)}\n      getSearchText={(node) =>\n        node.detail ? \"\" : `${node.label} ${node.badge ?? \"\"} ${node.platformType ?? \"\"} ${node.ascode ?? \"\"}`\n      }\n      defaultOpen={(node, depth) => depth < defaultOpenDepth && !isDetailOnly(node)}\n      rowClass={(node, selected) =>\n        node.detail\n          ? \"cursor-default\"\n          : selected\n            ? \"bg-primary/10 border-l-2 border-primary\"\n            : \"hover:bg-accent\"\n      }\n      renderRow={({ node }) =>\n        node.detail ? (\n          <div className=\"min-w-0 flex-1\">\n            {renderDetail ? renderDetail(node.detail) : <SchemaFieldMetaPanel meta={node.detail} />}\n          </div>\n        ) : (\n          <SchemaViewerRow node={node} />\n        )\n      }\n      empty={empty}\n      {...(showControls !== undefined ? { showControls } : {})}\n      {...(toolbarClassName !== undefined ? { toolbarClassName } : {})}\n    />\n  );\n}\n\nconst BADGE_TONE: Record<string, string> = {\n  branch: \"bg-violet-100 text-violet-700 dark:bg-violet-950/50 dark:text-violet-200\",\n  group: \"bg-violet-100 text-violet-700 dark:bg-violet-950/50 dark:text-violet-200\",\n  activity: \"bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-200\",\n  clientType: \"bg-sky-100 text-sky-700 dark:bg-sky-950/50 dark:text-sky-200\",\n  clientTypes: \"bg-sky-100 text-sky-700 dark:bg-sky-950/50 dark:text-sky-200\",\n  fields: \"bg-amber-100 text-amber-700 dark:bg-amber-950/50 dark:text-amber-200\",\n  object: \"bg-muted text-muted-foreground\",\n  array: \"bg-muted text-muted-foreground\",\n  string: \"bg-muted text-muted-foreground\",\n  number: \"bg-muted text-muted-foreground\",\n  integer: \"bg-muted text-muted-foreground\",\n  boolean: \"bg-muted text-muted-foreground\",\n  const: \"bg-muted text-muted-foreground\",\n};\n\nexport function SchemaViewerRow({ node }: { node: SchemaViewerNode }) {\n  const tone = node.badge ? BADGE_TONE[node.badge] : undefined;\n  return (\n    <span className=\"flex w-full min-w-0 items-center gap-2\">\n      <span className=\"shrink-0 whitespace-nowrap font-mono\">{node.label}</span>\n      {node.badge && (\n        <span\n          className={cn(\n            \"shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium\",\n            tone ?? \"bg-muted text-muted-foreground\",\n          )}\n        >\n          {node.badge}\n        </span>\n      )}\n      {node.count !== undefined && (\n        <span className=\"shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] tabular-nums text-muted-foreground\">\n          {node.count}\n        </span>\n      )}\n      {node.platformType && (\n        <span className=\"shrink-0 rounded bg-indigo-50 px-1.5 py-0.5 text-[10px] text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-200\">\n          {node.platformType}\n        </span>\n      )}\n      {node.ascode && (\n        <span className=\"shrink-0 rounded bg-rose-50 px-1.5 py-0.5 text-[10px] text-rose-700 dark:bg-rose-950/50 dark:text-rose-200\">\n          code: {node.ascode}\n        </span>\n      )}\n      {node.description && (\n        <span className=\"min-w-0 truncate text-xs text-muted-foreground\">{node.description}</span>\n      )}\n    </span>\n  );\n}\n\nexport interface SchemaFieldMetaPanelProps {\n  meta: SchemaViewerFieldMeta;\n}\n\nconst ENUM_LIMIT = 12;\nconst PLATFORM_TYPE_LABEL = [\"OI\", \"PA type\"].join(\"\");\n\nexport function SchemaFieldMetaPanel({ meta }: SchemaFieldMetaPanelProps) {\n  const enums = meta.enumValues ?? [];\n  const shown = enums.slice(0, ENUM_LIMIT);\n  const hidden = enums.length - shown.length;\n  const loc = meta.location;\n\n  return (\n    <div className=\"my-1 space-y-2 rounded-md border border-border bg-muted/30 p-2 text-xs\">\n      <dl className=\"grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5\">\n        <Row label={PLATFORM_TYPE_LABEL} value={meta.platformType} />\n        <Row label=\"AsCode\" value={meta.ascode} />\n        <Row label=\"Format\" value={meta.format} />\n        <Row label=\"Layout\" value={meta.layout} />\n        <Row label=\"Client ref\" value={meta.clientRef ? \"yes\" : undefined} />\n        {meta.annotations?.map((annotation) => (\n          <Row key={annotation.key} label={annotation.key} value={annotation.value} />\n        ))}\n      </dl>\n\n      {meta.description && <p className=\"text-muted-foreground\">{meta.description}</p>}\n\n      {enums.length > 0 && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Enum ({enums.length})</p>\n          <ul className=\"max-h-48 space-y-0.5 overflow-auto\">\n            {shown.map((entry) => (\n              <li key={entry.value}>\n                <span className=\"font-mono\">{entry.value}</span>\n                {entry.label && <span className=\"text-muted-foreground\"> - {entry.label}</span>}\n              </li>\n            ))}\n          </ul>\n          {hidden > 0 && <p className=\"text-muted-foreground\">+{hidden} more</p>}\n        </div>\n      )}\n\n      {meta.query && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Query</p>\n          <div className=\"max-h-64 overflow-auto\">\n            <CodeBlock language=\"sql\" source={meta.query} />\n          </div>\n        </div>\n      )}\n\n      {loc && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Source location</p>\n          <p className=\"break-all font-mono\">{formatLocation(loc.path, loc.startLine, loc.endLine)}</p>\n        </div>\n      )}\n\n      {meta.source && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Source</p>\n          <div className=\"max-h-64 overflow-auto\">\n            <CodeBlock language=\"xml\" source={meta.source} />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Row({ label, value }: { label: string; value: ReactNode }): ReactNode {\n  if (value === undefined || value === null) return null;\n  return (\n    <>\n      <dt className=\"text-muted-foreground\">{label}</dt>\n      <dd className=\"break-all font-mono\">{value}</dd>\n    </>\n  );\n}\n\nfunction formatLocation(path: string, startLine?: number, endLine?: number): string {\n  if (startLine === undefined) return path;\n  if (endLine === undefined || endLine === startLine) return `${path}:${startLine}`;\n  return `${path}:${startLine}-${endLine}`;\n}\n"],"names":["buildSchemaTree","jsx","useMemo","rehydrateRefs","Tree","cn","jsxs","CodeBlock","Fragment"],"mappings":"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"}

package/dist/data/SchemaViewer.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { rehydrateRefs } from "../components/json-schema-form-refs.js";
 import { cn } from "../lib/utils.js";
@@ -61,7 +61,7 @@ const BADGE_TONE = {
 function SchemaViewerRow({ node }) {
   const tone = node.badge ? BADGE_TONE[node.badge] : void 0;
   return /* @__PURE__ */ jsxs("span", { className: "flex w-full min-w-0 items-center gap-2", children: [
-    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono", children: node.label }),
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 whitespace-nowrap font-mono", children: node.label }),
     node.badge && /* @__PURE__ */ jsx(
       "span",
       {

package/dist/data/SchemaViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SchemaViewer.js","sources":["../../src/data/SchemaViewer.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { rehydrateRefs } from \"../components/json-schema-form-refs\";\nimport type { JsonSchemaObject } from \"../components/json-schema-form-types\";\nimport { cn } from \"../lib/utils\";\nimport { CodeBlock } from \"./CodeBlock\";\nimport { Tree } from \"./Tree\";\nimport {\n  buildSchemaTree,\n  type SchemaViewerFieldMeta,\n  type SchemaViewerNode,\n} from \"./schema-viewer-model\";\n\nexport interface SchemaViewerProps {\n  schema: JsonSchemaObject;\n  /** Pre-scoped tree roots, for dialogs that want to show a single schema branch. */\n  roots?: SchemaViewerNode[];\n  /** Custom tree builder. Defaults to buildSchemaTree. */\n  buildTree?: (schema: JsonSchemaObject) => SchemaViewerNode[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  toolbarClassName?: string;\n  /** Root depth opened by default. Defaults to 1, matching the platform tree. */\n  defaultOpenDepth?: number;\n  /** Override the expanded detail panel for annotated fields. */\n  renderDetail?: (meta: SchemaViewerFieldMeta) => ReactNode;\n}\n\nfunction isDetailOnly(node: SchemaViewerNode): boolean {\n  const [child] = node.children ?? [];\n  return node.children?.length === 1 && Boolean(child?.detail);\n}\n\nexport function SchemaViewer({\n  schema,\n  roots: scopedRoots,\n  buildTree = buildSchemaTree,\n  className,\n  empty = <p className=\"p-3 text-sm text-muted-foreground\">This schema has no fields.</p>,\n  showControls,\n  toolbarClassName,\n  defaultOpenDepth = 1,\n  renderDetail,\n}: SchemaViewerProps) {\n  const roots = useMemo(\n    () => scopedRoots ?? buildTree(rehydrateRefs(schema)),\n    [buildTree, scopedRoots, schema],\n  );\n\n  return (\n    <Tree<SchemaViewerNode>\n      className={cn(\"text-sm\", className)}\n      roots={roots}\n      getKey={(node) => node.key}\n      getChildren={(node) => node.children}\n      isSecondary={(node) => Boolean(node.detail)}\n      getSearchText={(node) =>\n        node.detail ? \"\" : `${node.label} ${node.badge ?? \"\"} ${node.platformType ?? \"\"} ${node.ascode ?? \"\"}`\n      }\n      defaultOpen={(node, depth) => depth < defaultOpenDepth && !isDetailOnly(node)}\n      rowClass={(node, selected) =>\n        node.detail\n          ? \"cursor-default\"\n          : selected\n            ? \"bg-primary/10 border-l-2 border-primary\"\n            : \"hover:bg-accent\"\n      }\n      renderRow={({ node }) =>\n        node.detail ? (\n          <div className=\"min-w-0 flex-1\">\n            {renderDetail ? renderDetail(node.detail) : <SchemaFieldMetaPanel meta={node.detail} />}\n          </div>\n        ) : (\n          <SchemaViewerRow node={node} />\n        )\n      }\n      empty={empty}\n      {...(showControls !== undefined ? { showControls } : {})}\n      {...(toolbarClassName !== undefined ? { toolbarClassName } : {})}\n    />\n  );\n}\n\nconst BADGE_TONE: Record<string, string> = {\n  branch: \"bg-violet-100 text-violet-700 dark:bg-violet-950/50 dark:text-violet-200\",\n  group: \"bg-violet-100 text-violet-700 dark:bg-violet-950/50 dark:text-violet-200\",\n  activity: \"bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-200\",\n  clientType: \"bg-sky-100 text-sky-700 dark:bg-sky-950/50 dark:text-sky-200\",\n  clientTypes: \"bg-sky-100 text-sky-700 dark:bg-sky-950/50 dark:text-sky-200\",\n  fields: \"bg-amber-100 text-amber-700 dark:bg-amber-950/50 dark:text-amber-200\",\n  object: \"bg-muted text-muted-foreground\",\n  array: \"bg-muted text-muted-foreground\",\n  string: \"bg-muted text-muted-foreground\",\n  number: \"bg-muted text-muted-foreground\",\n  integer: \"bg-muted text-muted-foreground\",\n  boolean: \"bg-muted text-muted-foreground\",\n  const: \"bg-muted text-muted-foreground\",\n};\n\nexport function SchemaViewerRow({ node }: { node: SchemaViewerNode }) {\n  const tone = node.badge ? BADGE_TONE[node.badge] : undefined;\n  return (\n    <span className=\"flex w-full min-w-0 items-center gap-2\">\n      <span className=\"min-w-0 truncate font-mono\">{node.label}</span>\n      {node.badge && (\n        <span\n          className={cn(\n            \"shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium\",\n            tone ?? \"bg-muted text-muted-foreground\",\n          )}\n        >\n          {node.badge}\n        </span>\n      )}\n      {node.count !== undefined && (\n        <span className=\"shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] tabular-nums text-muted-foreground\">\n          {node.count}\n        </span>\n      )}\n      {node.platformType && (\n        <span className=\"shrink-0 rounded bg-indigo-50 px-1.5 py-0.5 text-[10px] text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-200\">\n          {node.platformType}\n        </span>\n      )}\n      {node.ascode && (\n        <span className=\"shrink-0 rounded bg-rose-50 px-1.5 py-0.5 text-[10px] text-rose-700 dark:bg-rose-950/50 dark:text-rose-200\">\n          code: {node.ascode}\n        </span>\n      )}\n      {node.description && (\n        <span className=\"min-w-0 truncate text-xs text-muted-foreground\">{node.description}</span>\n      )}\n    </span>\n  );\n}\n\nexport interface SchemaFieldMetaPanelProps {\n  meta: SchemaViewerFieldMeta;\n}\n\nconst ENUM_LIMIT = 12;\nconst PLATFORM_TYPE_LABEL = [\"OI\", \"PA type\"].join(\"\");\n\nexport function SchemaFieldMetaPanel({ meta }: SchemaFieldMetaPanelProps) {\n  const enums = meta.enumValues ?? [];\n  const shown = enums.slice(0, ENUM_LIMIT);\n  const hidden = enums.length - shown.length;\n  const loc = meta.location;\n\n  return (\n    <div className=\"my-1 space-y-2 rounded-md border border-border bg-muted/30 p-2 text-xs\">\n      <dl className=\"grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5\">\n        <Row label={PLATFORM_TYPE_LABEL} value={meta.platformType} />\n        <Row label=\"AsCode\" value={meta.ascode} />\n        <Row label=\"Format\" value={meta.format} />\n        <Row label=\"Layout\" value={meta.layout} />\n        <Row label=\"Client ref\" value={meta.clientRef ? \"yes\" : undefined} />\n        {meta.annotations?.map((annotation) => (\n          <Row key={annotation.key} label={annotation.key} value={annotation.value} />\n        ))}\n      </dl>\n\n      {meta.description && <p className=\"text-muted-foreground\">{meta.description}</p>}\n\n      {enums.length > 0 && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Enum ({enums.length})</p>\n          <ul className=\"max-h-48 space-y-0.5 overflow-auto\">\n            {shown.map((entry) => (\n              <li key={entry.value}>\n                <span className=\"font-mono\">{entry.value}</span>\n                {entry.label && <span className=\"text-muted-foreground\"> - {entry.label}</span>}\n              </li>\n            ))}\n          </ul>\n          {hidden > 0 && <p className=\"text-muted-foreground\">+{hidden} more</p>}\n        </div>\n      )}\n\n      {meta.query && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Query</p>\n          <div className=\"max-h-64 overflow-auto\">\n            <CodeBlock language=\"sql\" source={meta.query} />\n          </div>\n        </div>\n      )}\n\n      {loc && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Source location</p>\n          <p className=\"break-all font-mono\">{formatLocation(loc.path, loc.startLine, loc.endLine)}</p>\n        </div>\n      )}\n\n      {meta.source && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Source</p>\n          <div className=\"max-h-64 overflow-auto\">\n            <CodeBlock language=\"xml\" source={meta.source} />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Row({ label, value }: { label: string; value: ReactNode }): ReactNode {\n  if (value === undefined || value === null) return null;\n  return (\n    <>\n      <dt className=\"text-muted-foreground\">{label}</dt>\n      <dd className=\"break-all font-mono\">{value}</dd>\n    </>\n  );\n}\n\nfunction formatLocation(path: string, startLine?: number, endLine?: number): string {\n  if (startLine === undefined) return path;\n  if (endLine === undefined || endLine === startLine) return `${path}:${startLine}`;\n  return `${path}:${startLine}-${endLine}`;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SchemaViewer.js","sources":["../../src/data/SchemaViewer.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { rehydrateRefs } from \"../components/json-schema-form-refs\";\nimport type { JsonSchemaObject } from \"../components/json-schema-form-types\";\nimport { cn } from \"../lib/utils\";\nimport { CodeBlock } from \"./CodeBlock\";\nimport { Tree } from \"./Tree\";\nimport {\n  buildSchemaTree,\n  type SchemaViewerFieldMeta,\n  type SchemaViewerNode,\n} from \"./schema-viewer-model\";\n\nexport interface SchemaViewerProps {\n  schema: JsonSchemaObject;\n  /** Pre-scoped tree roots, for dialogs that want to show a single schema branch. */\n  roots?: SchemaViewerNode[];\n  /** Custom tree builder. Defaults to buildSchemaTree. */\n  buildTree?: (schema: JsonSchemaObject) => SchemaViewerNode[];\n  className?: string;\n  empty?: ReactNode;\n  showControls?: boolean;\n  toolbarClassName?: string;\n  /** Root depth opened by default. Defaults to 1, matching the platform tree. */\n  defaultOpenDepth?: number;\n  /** Override the expanded detail panel for annotated fields. */\n  renderDetail?: (meta: SchemaViewerFieldMeta) => ReactNode;\n}\n\nfunction isDetailOnly(node: SchemaViewerNode): boolean {\n  const [child] = node.children ?? [];\n  return node.children?.length === 1 && Boolean(child?.detail);\n}\n\nexport function SchemaViewer({\n  schema,\n  roots: scopedRoots,\n  buildTree = buildSchemaTree,\n  className,\n  empty = <p className=\"p-3 text-sm text-muted-foreground\">This schema has no fields.</p>,\n  showControls,\n  toolbarClassName,\n  defaultOpenDepth = 1,\n  renderDetail,\n}: SchemaViewerProps) {\n  const roots = useMemo(\n    () => scopedRoots ?? buildTree(rehydrateRefs(schema)),\n    [buildTree, scopedRoots, schema],\n  );\n\n  return (\n    <Tree<SchemaViewerNode>\n      className={cn(\"text-sm\", className)}\n      roots={roots}\n      getKey={(node) => node.key}\n      getChildren={(node) => node.children}\n      isSecondary={(node) => Boolean(node.detail)}\n      getSearchText={(node) =>\n        node.detail ? \"\" : `${node.label} ${node.badge ?? \"\"} ${node.platformType ?? \"\"} ${node.ascode ?? \"\"}`\n      }\n      defaultOpen={(node, depth) => depth < defaultOpenDepth && !isDetailOnly(node)}\n      rowClass={(node, selected) =>\n        node.detail\n          ? \"cursor-default\"\n          : selected\n            ? \"bg-primary/10 border-l-2 border-primary\"\n            : \"hover:bg-accent\"\n      }\n      renderRow={({ node }) =>\n        node.detail ? (\n          <div className=\"min-w-0 flex-1\">\n            {renderDetail ? renderDetail(node.detail) : <SchemaFieldMetaPanel meta={node.detail} />}\n          </div>\n        ) : (\n          <SchemaViewerRow node={node} />\n        )\n      }\n      empty={empty}\n      {...(showControls !== undefined ? { showControls } : {})}\n      {...(toolbarClassName !== undefined ? { toolbarClassName } : {})}\n    />\n  );\n}\n\nconst BADGE_TONE: Record<string, string> = {\n  branch: \"bg-violet-100 text-violet-700 dark:bg-violet-950/50 dark:text-violet-200\",\n  group: \"bg-violet-100 text-violet-700 dark:bg-violet-950/50 dark:text-violet-200\",\n  activity: \"bg-emerald-100 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-200\",\n  clientType: \"bg-sky-100 text-sky-700 dark:bg-sky-950/50 dark:text-sky-200\",\n  clientTypes: \"bg-sky-100 text-sky-700 dark:bg-sky-950/50 dark:text-sky-200\",\n  fields: \"bg-amber-100 text-amber-700 dark:bg-amber-950/50 dark:text-amber-200\",\n  object: \"bg-muted text-muted-foreground\",\n  array: \"bg-muted text-muted-foreground\",\n  string: \"bg-muted text-muted-foreground\",\n  number: \"bg-muted text-muted-foreground\",\n  integer: \"bg-muted text-muted-foreground\",\n  boolean: \"bg-muted text-muted-foreground\",\n  const: \"bg-muted text-muted-foreground\",\n};\n\nexport function SchemaViewerRow({ node }: { node: SchemaViewerNode }) {\n  const tone = node.badge ? BADGE_TONE[node.badge] : undefined;\n  return (\n    <span className=\"flex w-full min-w-0 items-center gap-2\">\n      <span className=\"shrink-0 whitespace-nowrap font-mono\">{node.label}</span>\n      {node.badge && (\n        <span\n          className={cn(\n            \"shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium\",\n            tone ?? \"bg-muted text-muted-foreground\",\n          )}\n        >\n          {node.badge}\n        </span>\n      )}\n      {node.count !== undefined && (\n        <span className=\"shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] tabular-nums text-muted-foreground\">\n          {node.count}\n        </span>\n      )}\n      {node.platformType && (\n        <span className=\"shrink-0 rounded bg-indigo-50 px-1.5 py-0.5 text-[10px] text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-200\">\n          {node.platformType}\n        </span>\n      )}\n      {node.ascode && (\n        <span className=\"shrink-0 rounded bg-rose-50 px-1.5 py-0.5 text-[10px] text-rose-700 dark:bg-rose-950/50 dark:text-rose-200\">\n          code: {node.ascode}\n        </span>\n      )}\n      {node.description && (\n        <span className=\"min-w-0 truncate text-xs text-muted-foreground\">{node.description}</span>\n      )}\n    </span>\n  );\n}\n\nexport interface SchemaFieldMetaPanelProps {\n  meta: SchemaViewerFieldMeta;\n}\n\nconst ENUM_LIMIT = 12;\nconst PLATFORM_TYPE_LABEL = [\"OI\", \"PA type\"].join(\"\");\n\nexport function SchemaFieldMetaPanel({ meta }: SchemaFieldMetaPanelProps) {\n  const enums = meta.enumValues ?? [];\n  const shown = enums.slice(0, ENUM_LIMIT);\n  const hidden = enums.length - shown.length;\n  const loc = meta.location;\n\n  return (\n    <div className=\"my-1 space-y-2 rounded-md border border-border bg-muted/30 p-2 text-xs\">\n      <dl className=\"grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5\">\n        <Row label={PLATFORM_TYPE_LABEL} value={meta.platformType} />\n        <Row label=\"AsCode\" value={meta.ascode} />\n        <Row label=\"Format\" value={meta.format} />\n        <Row label=\"Layout\" value={meta.layout} />\n        <Row label=\"Client ref\" value={meta.clientRef ? \"yes\" : undefined} />\n        {meta.annotations?.map((annotation) => (\n          <Row key={annotation.key} label={annotation.key} value={annotation.value} />\n        ))}\n      </dl>\n\n      {meta.description && <p className=\"text-muted-foreground\">{meta.description}</p>}\n\n      {enums.length > 0 && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Enum ({enums.length})</p>\n          <ul className=\"max-h-48 space-y-0.5 overflow-auto\">\n            {shown.map((entry) => (\n              <li key={entry.value}>\n                <span className=\"font-mono\">{entry.value}</span>\n                {entry.label && <span className=\"text-muted-foreground\"> - {entry.label}</span>}\n              </li>\n            ))}\n          </ul>\n          {hidden > 0 && <p className=\"text-muted-foreground\">+{hidden} more</p>}\n        </div>\n      )}\n\n      {meta.query && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Query</p>\n          <div className=\"max-h-64 overflow-auto\">\n            <CodeBlock language=\"sql\" source={meta.query} />\n          </div>\n        </div>\n      )}\n\n      {loc && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Source location</p>\n          <p className=\"break-all font-mono\">{formatLocation(loc.path, loc.startLine, loc.endLine)}</p>\n        </div>\n      )}\n\n      {meta.source && (\n        <div className=\"space-y-0.5\">\n          <p className=\"font-medium text-muted-foreground\">Source</p>\n          <div className=\"max-h-64 overflow-auto\">\n            <CodeBlock language=\"xml\" source={meta.source} />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Row({ label, value }: { label: string; value: ReactNode }): ReactNode {\n  if (value === undefined || value === null) return null;\n  return (\n    <>\n      <dt className=\"text-muted-foreground\">{label}</dt>\n      <dd className=\"break-all font-mono\">{value}</dd>\n    </>\n  );\n}\n\nfunction formatLocation(path: string, startLine?: number, endLine?: number): string {\n  if (startLine === undefined) return path;\n  if (endLine === undefined || endLine === startLine) return `${path}:${startLine}`;\n  return `${path}:${startLine}-${endLine}`;\n}\n"],"names":[],"mappings":"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"}