@flanksource/clicky-ui 0.3.34 → 0.3.35

package/dist/data/ExecutionTree.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 export type ExecutionNode = {
     /** Stable unique key within the tree. */
     id: string;

package/dist/data/FilterPill.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { StaticIconComponent } from './Icon';
 export type FilterMode = "active" | "neutral" | "include" | "exclude";
 export type FilterPillProps = {

package/dist/data/FixtureEditor/RawFenceEditor.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 export type RawFenceEditorProps = {
     info: string;
     body: string;

package/dist/data/FixtureEditor/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { FormSize } from '../../components/json-schema-form-size';
 import { JsonSchemaObject } from '../../components/json-schema-form-types';
 import { SpecRuntimeEditorProps } from '../ai/SpecRuntimeEditor';

package/dist/data/Gauge.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { StaticIconComponent } from './Icon';
 export type GaugeTone = "neutral" | "success" | "warning" | "danger" | "info";
 export type GaugeVariant = "default" | "cell";

package/dist/data/GaugeHoverCard.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { HoverCardPlacement } from '../overlay/HoverCard';
 export interface GaugeHoverRow {
     /** Row label, e.g. "Current", "Min", "Capacity". */

package/dist/data/Icon.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, ReactElement, ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ElementType, ReactElement, ReactNode } from 'react';
 import { SizeToken } from '../lib/size';
 export type LabelIconSpec = string | ReactNode;
 export type IconStyle = "plain" | "badge";

package/dist/data/KeyValueList.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 export type KeyValueListItem = {
     key: string;
     label: ReactNode;

package/dist/data/MarkdownEditor.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { ClickyProps } from './Clicky';
 import { MarkdownEditorPreviewFormat, MarkdownEditorPreviewHeaders, MarkdownEditorPreviewRequest, MarkdownEditorPreviewResult } from './MarkdownEditor.model';
 export type MarkdownEditorProps = {

package/dist/data/MatrixTable.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 export type MatrixTableRow = {
     key: string;
     label: ReactNode;

package/dist/data/ObjectGraph.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { DropdownMenuItem } from '../overlay/DropdownMenu';
 import { ObjectGraphNode } from './object-graph-nodes';
 export type { ObjectGraphNode };

package/dist/data/ProgressBars.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { StaticIconComponent } from './Icon';
 export type ProgressBarsVariant = "default" | "cell";
 export type ProgressBarsOrientation = "horizontal" | "vertical";

package/dist/data/Properties.cjs

@@ -7,6 +7,7 @@ const utils = require("../lib/utils.cjs");
 const DropdownMenu = require("../overlay/DropdownMenu.cjs");
 const Icon = require("./Icon.cjs");
 const propertiesUtils = require("./properties-utils.cjs");
+const propertiesContext = require("./properties-context.cjs");
 const UiRows = require("../icons/components/UiRows.cjs");
 const UiListFlat = require("../icons/components/UiListFlat.cjs");
 const UiListDashes = require("../icons/components/UiListDashes.cjs");
@@ -55,14 +56,17 @@ function Properties({
   showDensityMenu = true,
   emptyMessage = "No properties"
 }) {
+  const parent = react.useContext(propertiesContext.PropertiesContext);
   const [densityOverride, setDensityOverride] = react.useState();
   react.useEffect(() => setDensityOverride(readStoredDensity(keyRef)), [keyRef]);
   const visible = items.filter((item) => !item.hidden);
   if (visible.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: emptyMessage });
   }
-  const activeDensity = densityOverride ?? density;
+  const activeDensity = (parent == null ? void 0 : parent.density) ?? densityOverride ?? density;
   const styles = DENSITY_CLASSES[activeDensity];
+  const columns = (parent == null ? void 0 : parent.columns) ?? gridTemplateColumns ?? styles.gridTemplateColumns;
+  const depth = (parent == null ? void 0 : parent.depth) ?? 0;
   const updateDensity = (next) => {
     setDensityOverride(next);
     writeStoredDensity(keyRef, next);
@@ -71,50 +75,97 @@ function Properties({
     "dl",
     {
       className: utils.cn(
-        "divide-y divide-border rounded-md border border-border bg-muted/20",
+        "grid gap-x-density-3 divide-y divide-border rounded-md border border-border bg-muted/20",
+        parent && "col-span-full rounded-none border-0 bg-transparent",
         className
       ),
+      style: { gridTemplateColumns: parent ? "subgrid" : columns },
       children: [
-        showDensityMenu ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end px-density-2 py-density-1", children: [
+        showDensityMenu && !parent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-full flex items-center justify-end px-density-2 py-density-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "sr-only", children: "Properties display options" }),
-          /* @__PURE__ */ jsxRuntime.jsx("dd", { children: /* @__PURE__ */ jsxRuntime.jsx(PropertiesDensityMenu, { density: activeDensity, onChange: updateDensity }) })
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { children: /* @__PURE__ */ jsxRuntime.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) : propertiesUtils.formatPropertyLabel(item.key);
           const ariaLabel = typeof renderedLabel === "string" ? renderedLabel : item.key;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: utils.cn("grid min-w-0 gap-density-3", styles.row, rowClassName),
-              style: { gridTemplateColumns: gridTemplateColumns ?? styles.gridTemplateColumns },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "dt",
-                  {
-                    "aria-label": ariaLabel,
-                    className: utils.cn("min-w-0 truncate", styles.label, labelClassName),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-density-1", children: [
-                        iconName ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: iconName, className: "text-xs shrink-0" }) : null,
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: renderedLabel })
-                      ] }),
-                      item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-[10px] font-normal text-muted-foreground/80", children: item.subtitle }) : null
-                    ]
-                  }
+          return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: utils.cn(
+                  "col-span-full grid min-w-0 grid-cols-subgrid gap-density-3",
+                  styles.row,
+                  rowClassName
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs("dd", { className: utils.cn("min-w-0 space-y-density-1", valueClassName), children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-start gap-density-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ActionList, { actions: prefixActions, item, className: "shrink-0 pt-0.5" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("min-w-0 max-w-full flex-1", styles.value), children: renderValue ? renderValue(item.key, item.value, item) : defaultRenderValue(item.value) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ActionList, { actions: suffixActions, item, className: "shrink-0 pt-0.5" })
-                  ] }),
-                  item.expandable && item.expanded && item.renderChildren ? item.renderChildren() : null
-                ] })
-              ]
-            },
-            item.key
-          );
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "dt",
+                    {
+                      "aria-label": ariaLabel,
+                      className: utils.cn("min-w-0 truncate", styles.label, labelClassName),
+                      style: { paddingInlineStart: depth * 16 },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-density-1", children: [
+                          iconName ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: iconName, className: "text-xs shrink-0" }) : null,
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: renderedLabel })
+                        ] }),
+                        item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-[10px] font-normal text-muted-foreground/80", children: item.subtitle }) : null
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("dd", { className: utils.cn("min-w-0 space-y-density-1", valueClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-start gap-density-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ActionList,
+                      {
+                        actions: prefixActions,
+                        item,
+                        className: "shrink-0 pt-0.5"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: utils.cn("min-w-0 max-w-full flex-1", styles.value),
+                        children: renderValue ? renderValue(item.key, item.value, item) : defaultRenderValue(item.value)
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ActionList,
+                      {
+                        actions: suffixActions,
+                        item,
+                        className: "shrink-0 pt-0.5"
+                      }
+                    )
+                  ] }) })
+                ]
+              }
+            ),
+            item.expandable && item.expanded && item.renderChildren ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-full grid grid-cols-subgrid", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("dt", { className: "sr-only", children: [
+                ariaLabel,
+                " properties"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "col-span-full grid min-w-0 grid-cols-subgrid", children: /* @__PURE__ */ jsxRuntime.jsx(
+                propertiesContext.PropertiesContext.Provider,
+                {
+                  value: {
+                    depth: depth + 1,
+                    columns,
+                    density: activeDensity
+                  },
+                  children: item.renderChildren()
+                }
+              ) })
+            ] }) : null
+          ] }, item.key);
         })
       ]
     }

package/dist/data/Properties.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Properties.cjs","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":["UiRows","UiListFlat","UiListDashes","useState","useEffect","jsx","jsxs","cn","formatPropertyLabel","Icon","DropdownMenu","IconButton","UiDotsVertical","UiCheck"],"mappings":"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"}
+{"version":3,"file":"Properties.cjs","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import {\n  Fragment,\n  useContext,\n  useEffect,\n  useState,\n  type ReactNode,\n} 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\";\nimport { PropertiesContext } from \"./properties-context\";\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 a child area spanning both columns, with nested labels indented. */\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?:\n    | string\n    | ((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 parent = useContext(PropertiesContext);\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 = parent?.density ?? densityOverride ?? density;\n  const styles = DENSITY_CLASSES[activeDensity];\n  const columns =\n    parent?.columns ?? gridTemplateColumns ?? styles.gridTemplateColumns;\n  const depth = parent?.depth ?? 0;\n\n  const updateDensity = (next: PropertiesDensity) => {\n    setDensityOverride(next);\n    writeStoredDensity(keyRef, next);\n  };\n\n  return (\n    <dl\n      className={cn(\n        \"grid gap-x-density-3 divide-y divide-border rounded-md border border-border bg-muted/20\",\n        parent && \"col-span-full rounded-none border-0 bg-transparent\",\n        className,\n      )}\n      style={{ gridTemplateColumns: parent ? \"subgrid\" : columns }}\n    >\n      {showDensityMenu && !parent ? (\n        <div className=\"col-span-full flex items-center justify-end px-density-2 py-density-1\">\n          <dt className=\"sr-only\">Properties display options</dt>\n          <dd>\n            <PropertiesDensityMenu\n              density={activeDensity}\n              onChange={updateDensity}\n            />\n          </dd>\n        </div>\n      ) : null}\n      {visible.map((item) => {\n        const iconName =\n          typeof labelIcon === \"function\"\n            ? labelIcon(item.key, item.value, item)\n            : labelIcon;\n        const renderedLabel = renderLabel\n          ? renderLabel(item.key, item.value, item)\n          : formatPropertyLabel(item.key);\n        const ariaLabel =\n          typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n        return (\n          <Fragment key={item.key}>\n            <div\n              className={cn(\n                \"col-span-full grid min-w-0 grid-cols-subgrid gap-density-3\",\n                styles.row,\n                rowClassName,\n              )}\n            >\n              <dt\n                aria-label={ariaLabel}\n                className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n                style={{ paddingInlineStart: depth * 16 }}\n              >\n                <div className=\"flex min-w-0 items-center gap-density-1\">\n                  {iconName ? (\n                    <Icon name={iconName} className=\"text-xs shrink-0\" />\n                  ) : 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\n                    actions={prefixActions}\n                    item={item}\n                    className=\"shrink-0 pt-0.5\"\n                  />\n                  <div\n                    className={cn(\"min-w-0 max-w-full flex-1\", styles.value)}\n                  >\n                    {renderValue\n                      ? renderValue(item.key, item.value, item)\n                      : defaultRenderValue(item.value)}\n                  </div>\n                  <ActionList\n                    actions={suffixActions}\n                    item={item}\n                    className=\"shrink-0 pt-0.5\"\n                  />\n                </div>\n              </dd>\n            </div>\n            {item.expandable && item.expanded && item.renderChildren ? (\n              <div className=\"col-span-full grid grid-cols-subgrid\">\n                <dt className=\"sr-only\">{ariaLabel} properties</dt>\n                <dd className=\"col-span-full grid min-w-0 grid-cols-subgrid\">\n                  <PropertiesContext.Provider\n                    value={{\n                      depth: depth + 1,\n                      columns,\n                      density: activeDensity,\n                    }}\n                  >\n                    {item.renderChildren()}\n                  </PropertiesContext.Provider>\n                </dd>\n              </div>\n            ) : null}\n          </Fragment>\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\"\n          ? { name: action.icon }\n          : { 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":["UiRows","UiListFlat","UiListDashes","useContext","PropertiesContext","useState","useEffect","jsx","jsxs","cn","formatPropertyLabel","Fragment","Icon","DropdownMenu","IconButton","UiDotsVertical","UiCheck"],"mappings":"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"}

package/dist/data/Properties.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { StaticIconComponent } from './Icon';
 export type PropertiesAction<V = unknown> = {
     /** Stable action id. */
@@ -23,7 +23,7 @@ export type PropertiesItem<V = unknown> = {
     subtitle?: ReactNode;
     /** Hide this row without removing it from the item array. */
     hidden?: boolean;
-    /** Enables an expandable child area below the row value. */
+    /** Enables a child area spanning both columns, with nested labels indented. */
     expandable?: boolean;
     /** Controlled expanded state. */
     expanded?: boolean;

package/dist/data/Properties.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Properties.d.ts","sourceRoot":"","sources":["../../src/data/Properties.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Properties.d.ts","sourceRoot":"","sources":["../../src/data/Properties.tsx"],"names":[],"mappings":"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"}

package/dist/data/Properties.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useContext, useState, useEffect, Fragment } 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 { PropertiesContext } from "./properties-context.js";
 import { UiRows } from "../icons/components/UiRows.js";
 import { UiListFlat } from "../icons/components/UiListFlat.js";
 import { UiListDashes } from "../icons/components/UiListDashes.js";
@@ -53,14 +54,17 @@ function Properties({
   showDensityMenu = true,
   emptyMessage = "No properties"
 }) {
+  const parent = useContext(PropertiesContext);
   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 activeDensity = densityOverride ?? density;
+  const activeDensity = (parent == null ? void 0 : parent.density) ?? densityOverride ?? density;
   const styles = DENSITY_CLASSES[activeDensity];
+  const columns = (parent == null ? void 0 : parent.columns) ?? gridTemplateColumns ?? styles.gridTemplateColumns;
+  const depth = (parent == null ? void 0 : parent.depth) ?? 0;
   const updateDensity = (next) => {
     setDensityOverride(next);
     writeStoredDensity(keyRef, next);
@@ -69,50 +73,97 @@ function Properties({
     "dl",
     {
       className: cn(
-        "divide-y divide-border rounded-md border border-border bg-muted/20",
+        "grid gap-x-density-3 divide-y divide-border rounded-md border border-border bg-muted/20",
+        parent && "col-span-full rounded-none border-0 bg-transparent",
         className
       ),
+      style: { gridTemplateColumns: parent ? "subgrid" : columns },
       children: [
-        showDensityMenu ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end px-density-2 py-density-1", children: [
+        showDensityMenu && !parent ? /* @__PURE__ */ jsxs("div", { className: "col-span-full 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 }) })
+          /* @__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
-                    ]
-                  }
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "col-span-full grid min-w-0 grid-cols-subgrid gap-density-3",
+                  styles.row,
+                  rowClassName
                 ),
-                /* @__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
-          );
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "dt",
+                    {
+                      "aria-label": ariaLabel,
+                      className: cn("min-w-0 truncate", styles.label, labelClassName),
+                      style: { paddingInlineStart: depth * 16 },
+                      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__ */ jsx("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 ? /* @__PURE__ */ jsxs("div", { className: "col-span-full grid grid-cols-subgrid", children: [
+              /* @__PURE__ */ jsxs("dt", { className: "sr-only", children: [
+                ariaLabel,
+                " properties"
+              ] }),
+              /* @__PURE__ */ jsx("dd", { className: "col-span-full grid min-w-0 grid-cols-subgrid", children: /* @__PURE__ */ jsx(
+                PropertiesContext.Provider,
+                {
+                  value: {
+                    depth: depth + 1,
+                    columns,
+                    density: activeDensity
+                  },
+                  children: item.renderChildren()
+                }
+              ) })
+            ] }) : null
+          ] }, item.key);
         })
       ]
     }