@petrarca/sonnet-ui 0.4.0 → 0.4.1

package/dist/index.js

@@ -3007,14 +3007,222 @@ function PaginationFooter({
   ] });
 }
 
+// src/PropertyList/PropertyList.tsx
+import { copyTextToClipboard } from "@petrarca/sonnet-core";
+
+// src/PropertyList/PropertyValue.tsx
+import { useState as useState3 } from "react";
+import { JSONTree } from "react-json-tree";
+import { jsx as jsx29, jsxs as jsxs9 } from "react/jsx-runtime";
+var DEFAULT_CLAMP_CHARS = 180;
+var tokenTheme = {
+  scheme: "sonnet",
+  base00: "transparent",
+  base01: "hsl(var(--muted))",
+  base02: "hsl(var(--border))",
+  base03: "hsl(var(--muted-foreground))",
+  base04: "hsl(var(--muted-foreground))",
+  base05: "hsl(var(--foreground))",
+  base06: "hsl(var(--foreground))",
+  base07: "hsl(var(--foreground))",
+  base08: "hsl(var(--destructive))",
+  base09: "hsl(var(--primary))",
+  base0A: "hsl(var(--primary))",
+  base0B: "hsl(var(--primary))",
+  base0C: "hsl(var(--primary))",
+  base0D: "hsl(var(--primary))",
+  base0E: "hsl(var(--primary))",
+  base0F: "hsl(var(--muted-foreground))"
+};
+function isObjectLike(v) {
+  return typeof v === "object" && v !== null;
+}
+function JsonValue({ value }) {
+  const [open, setOpen] = useState3(false);
+  const summary = Array.isArray(value) ? `[${value.length} item${value.length === 1 ? "" : "s"}]` : `{${Object.keys(value).length} key${Object.keys(value).length === 1 ? "" : "s"}}`;
+  if (!open) {
+    return /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen(true);
+        },
+        className: "text-sm font-mono text-muted-foreground hover:text-foreground",
+        children: [
+          summary,
+          " ",
+          /* @__PURE__ */ jsx29("span", { className: "text-xs", children: "\u2014 show" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs9("div", { className: "text-xs font-mono", children: [
+    /* @__PURE__ */ jsx29(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen(false);
+        },
+        className: "mb-1 text-xs text-muted-foreground hover:text-foreground",
+        children: "hide"
+      }
+    ),
+    /* @__PURE__ */ jsx29("div", { className: "max-h-64 overflow-auto rounded border border-border bg-muted/30 px-2 py-1", children: /* @__PURE__ */ jsx29(
+      JSONTree,
+      {
+        data: value,
+        theme: tokenTheme,
+        invertTheme: false,
+        shouldExpandNodeInitially: () => true,
+        hideRoot: true
+      }
+    ) })
+  ] });
+}
+function LongTextValue({ text }) {
+  const [open, setOpen] = useState3(false);
+  if (!open) {
+    return /* @__PURE__ */ jsxs9("span", { className: "break-words", children: [
+      /* @__PURE__ */ jsx29("span", { className: "line-clamp-3 align-bottom", children: text }),
+      /* @__PURE__ */ jsx29(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            setOpen(true);
+          },
+          className: "text-xs text-muted-foreground hover:text-foreground",
+          children: "Show more"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9("span", { className: "break-words", children: [
+    /* @__PURE__ */ jsx29("span", { className: "block max-h-64 overflow-auto whitespace-pre-wrap rounded border border-border bg-muted/30 px-2 py-1", children: text }),
+    /* @__PURE__ */ jsx29(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen(false);
+        },
+        className: "text-xs text-muted-foreground hover:text-foreground",
+        children: "Show less"
+      }
+    )
+  ] });
+}
+function renderFromSchema(value, schema, className) {
+  const cellName = schema["x-ui-cell"] ?? inferCellRenderer(schema.type, schema.format);
+  if (cellName === "json") {
+    const parsed = typeof value === "string" ? safeParse(value) : value;
+    return isObjectLike(parsed) ? /* @__PURE__ */ jsx29(JsonValue, { value: parsed }) : null;
+  }
+  if (cellName && cellName !== "text") {
+    const Renderer = CELL_RENDERERS[cellName];
+    if (Renderer) {
+      return /* @__PURE__ */ jsx29("span", { className, children: /* @__PURE__ */ jsx29(
+        Renderer,
+        {
+          value,
+          row: {},
+          options: schema["x-ui-cell-options"] ?? {}
+        }
+      ) });
+    }
+  }
+  return null;
+}
+function renderObjectLike(value, className) {
+  if (Array.isArray(value) && value.every((v) => !isObjectLike(v))) {
+    return /* @__PURE__ */ jsx29("span", { className: `break-words ${className ?? ""}`, children: value.map(String).join(", ") });
+  }
+  return /* @__PURE__ */ jsx29(JsonValue, { value });
+}
+function renderString(value, className, clampChars) {
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx29("span", { className, children: value ? "true" : "false" });
+  }
+  const str = String(value);
+  if (str.length > clampChars || str.includes("\n")) {
+    return /* @__PURE__ */ jsx29("span", { className, children: /* @__PURE__ */ jsx29(LongTextValue, { text: str }) });
+  }
+  return /* @__PURE__ */ jsx29("span", { className: `break-words ${className ?? ""}`, children: str });
+}
+function renderFromValue(value, className, clampChars) {
+  if (value == null) {
+    return /* @__PURE__ */ jsx29("span", { className: `text-muted-foreground ${className ?? ""}`, children: "\u2014" });
+  }
+  if (isObjectLike(value)) return renderObjectLike(value, className);
+  return renderString(value, className, clampChars);
+}
+function PropertyValue({
+  value,
+  schema,
+  className,
+  clampChars = DEFAULT_CLAMP_CHARS
+}) {
+  const fromSchema = schema ? renderFromSchema(value, schema, className) : null;
+  return fromSchema ?? renderFromValue(value, className, clampChars);
+}
+function safeParse(s) {
+  try {
+    return JSON.parse(s);
+  } catch {
+    return void 0;
+  }
+}
+
+// src/PropertyList/PropertyList.tsx
+import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
+function PropertyList({
+  properties,
+  propertySchemas,
+  showHeader = false,
+  copyable = true,
+  emptyLabel = "No properties",
+  className
+}) {
+  const entries = Object.entries(properties ?? {});
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx30("p", { className: "text-sm text-muted-foreground italic", children: emptyLabel });
+  }
+  return /* @__PURE__ */ jsxs10("ul", { className: `list-none ${className ?? ""}`, children: [
+    showHeader && /* @__PURE__ */ jsx30("li", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1", children: "Properties" }),
+    entries.map(([key, value]) => /* @__PURE__ */ jsxs10("li", { className: "mb-2 leading-tight", children: [
+      /* @__PURE__ */ jsx30(
+        "p",
+        {
+          className: `text-xs text-muted-foreground uppercase tracking-wide ${copyable ? "cursor-pointer hover:text-foreground" : ""}`,
+          onClick: copyable ? () => copyTextToClipboard(stringForCopy(value)) : void 0,
+          title: copyable ? "Click to copy value" : void 0,
+          children: key
+        }
+      ),
+      /* @__PURE__ */ jsx30("div", { className: "text-sm text-foreground", children: /* @__PURE__ */ jsx30(PropertyValue, { value, schema: propertySchemas?.[key] }) })
+    ] }, key))
+  ] });
+}
+function stringForCopy(value) {
+  if (value == null) return "";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
 // src/EntitySelect/EntitySelect.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 import { Check as Check4, ChevronsUpDown, Loader2 } from "lucide-react";
 import { cn as cn27 } from "@petrarca/sonnet-core";
 import {
   useEntityOptions
 } from "@petrarca/sonnet-core/hooks";
-import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
 function emptyStateMessage({
   mode,
   search,
@@ -3032,8 +3240,8 @@ function emptyStateMessage({
   return emptyMessage;
 }
 function useHasSearched(submit) {
-  const [hasSearched, setHasSearched] = React25.useState(false);
-  const wrappedSubmit = React25.useCallback(() => {
+  const [hasSearched, setHasSearched] = React26.useState(false);
+  const wrappedSubmit = React26.useCallback(() => {
     setHasSearched(true);
     submit();
   }, [submit]);
@@ -3056,19 +3264,19 @@ function EntitySelectLabel({
   description
 }) {
   const hasLabel = label !== void 0 && label !== false;
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-    hasLabel && /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    hasLabel && /* @__PURE__ */ jsxs11(
       "label",
       {
         htmlFor: id,
         className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
         children: [
           label,
-          required && /* @__PURE__ */ jsx29("span", { className: "ml-1 text-destructive", children: "*" })
+          required && /* @__PURE__ */ jsx31("span", { className: "ml-1 text-destructive", children: "*" })
         ]
       }
     ),
-    description && /* @__PURE__ */ jsx29("p", { className: "text-sm text-muted-foreground", children: description })
+    description && /* @__PURE__ */ jsx31("p", { className: "text-sm text-muted-foreground", children: description })
   ] });
 }
 function EntitySelectDropdown({
@@ -3085,8 +3293,8 @@ function EntitySelectDropdown({
   value,
   handleSelect
 }) {
-  return /* @__PURE__ */ jsxs9(Command, { shouldFilter: false, children: [
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs11(Command, { shouldFilter: false, children: [
+    /* @__PURE__ */ jsx31(
       CommandInput,
       {
         placeholder: searchPlaceholder,
@@ -3100,8 +3308,8 @@ function EntitySelectDropdown({
         } : void 0
       }
     ),
-    /* @__PURE__ */ jsxs9(CommandList, { children: [
-      /* @__PURE__ */ jsx29(CommandEmpty, { children: emptyStateMessage({
+    /* @__PURE__ */ jsxs11(CommandList, { children: [
+      /* @__PURE__ */ jsx31(CommandEmpty, { children: emptyStateMessage({
         mode,
         search,
         minChars,
@@ -3109,13 +3317,13 @@ function EntitySelectDropdown({
         hasSearched,
         emptyMessage
       }) }),
-      /* @__PURE__ */ jsx29(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs9(
+      /* @__PURE__ */ jsx31(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs11(
         CommandItem,
         {
           value: option.value,
           onSelect: handleSelect,
           children: [
-            /* @__PURE__ */ jsx29(
+            /* @__PURE__ */ jsx31(
               Check4,
               {
                 className: cn27(
@@ -3155,8 +3363,8 @@ function EntitySelect(props) {
     emptyMessage,
     disabled
   } = resolveEntitySelectDefaults(props);
-  const [open, setOpen] = React25.useState(false);
-  const [selectedLabel, setSelectedLabel] = React25.useState(null);
+  const [open, setOpen] = React26.useState(false);
+  const [selectedLabel, setSelectedLabel] = React26.useState(null);
   const {
     options,
     isLoading,
@@ -3165,7 +3373,7 @@ function EntitySelect(props) {
     submit: rawSubmit
   } = useEntityOptions({ fetcher, queryKey, mode, minChars });
   const [hasSearched, submit] = useHasSearched(rawSubmit);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (!value) {
       setSelectedLabel(null);
       return;
@@ -3175,7 +3383,7 @@ function EntitySelect(props) {
       setSelectedLabel(found.label);
     }
   }, [value, options]);
-  const handleSelect = React25.useCallback(
+  const handleSelect = React26.useCallback(
     (selectedValue) => {
       const opt = options.find((o) => o.value === selectedValue);
       if (opt) setSelectedLabel(opt.label);
@@ -3188,7 +3396,7 @@ function EntitySelect(props) {
     },
     [options, value, onChange, onChangeOption, setSearch]
   );
-  const handleOpenChange = React25.useCallback(
+  const handleOpenChange = React26.useCallback(
     (newOpen) => {
       setOpen(newOpen);
       if (!newOpen) {
@@ -3198,8 +3406,8 @@ function EntitySelect(props) {
     },
     [onBlur, setSearch]
   );
-  return /* @__PURE__ */ jsxs9("div", { className: cn27("space-y-2", className), children: [
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs11("div", { className: cn27("space-y-2", className), children: [
+    /* @__PURE__ */ jsx31(
       EntitySelectLabel,
       {
         id,
@@ -3208,8 +3416,8 @@ function EntitySelect(props) {
         description
       }
     ),
-    /* @__PURE__ */ jsxs9(Popover, { open, onOpenChange: handleOpenChange, children: [
-      /* @__PURE__ */ jsx29(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs11(Popover, { open, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx31(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(
         Button,
         {
           id,
@@ -3223,20 +3431,20 @@ function EntitySelect(props) {
           ),
           disabled,
           children: [
-            /* @__PURE__ */ jsx29("span", { className: "truncate", children: selectedLabel ?? placeholder }),
-            /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
-              isLoading && /* @__PURE__ */ jsx29(Loader2, { className: "h-4 w-4 animate-spin opacity-50" }),
-              /* @__PURE__ */ jsx29(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+            /* @__PURE__ */ jsx31("span", { className: "truncate", children: selectedLabel ?? placeholder }),
+            /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1", children: [
+              isLoading && /* @__PURE__ */ jsx31(Loader2, { className: "h-4 w-4 animate-spin opacity-50" }),
+              /* @__PURE__ */ jsx31(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
             ] })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx31(
         PopoverContent,
         {
           className: "w-[--radix-popover-trigger-width] p-0",
           align: "start",
-          children: /* @__PURE__ */ jsx29(
+          children: /* @__PURE__ */ jsx31(
             EntitySelectDropdown,
             {
               searchPlaceholder,
@@ -3256,7 +3464,7 @@ function EntitySelect(props) {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx29("p", { className: "text-sm font-medium text-destructive", children: error })
+    error && /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium text-destructive", children: error })
   ] });
 }
 
@@ -3279,11 +3487,11 @@ import {
   useImperativeHandle,
   useMemo as useMemo3,
   useRef as useRef5,
-  useState as useState4
+  useState as useState5
 } from "react";
 import { ChevronRight as ChevronRight3 } from "lucide-react";
 import { cn as cn28 } from "@petrarca/sonnet-core";
-import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
 function flatten(nodes, expandedIds, depth = 0, parentId = null, result = []) {
   for (const node of nodes) {
     result.push({ node, depth, parentId });
@@ -3300,12 +3508,12 @@ function ToggleIcon({
   isExpanded
 }) {
   if (!hasChildren) {
-    return /* @__PURE__ */ jsx30("span", { className: "block w-1.5 h-1.5 rounded-full bg-border mx-auto" });
+    return /* @__PURE__ */ jsx32("span", { className: "block w-1.5 h-1.5 rounded-full bg-border mx-auto" });
   }
   if (isLoading) {
-    return /* @__PURE__ */ jsx30("span", { className: "block w-3 h-3 rounded-full border-2 border-muted-foreground/40 border-t-foreground animate-spin" });
+    return /* @__PURE__ */ jsx32("span", { className: "block w-3 h-3 rounded-full border-2 border-muted-foreground/40 border-t-foreground animate-spin" });
   }
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     ChevronRight3,
     {
       className: cn28(
@@ -3354,7 +3562,7 @@ function NodeRow({
     },
     [node.id, onSelectionChange]
   );
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12(
     "li",
     {
       id: `${treeId}-node-${node.id}`,
@@ -3373,13 +3581,13 @@ function NodeRow({
       style: { paddingLeft: depth * indentPx + 8 },
       onClick: handleClick,
       children: [
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx32(
           "span",
           {
             className: "shrink-0 flex items-center justify-center w-4 h-4",
             onClick: handleToggle,
             "aria-hidden": true,
-            children: /* @__PURE__ */ jsx30(
+            children: /* @__PURE__ */ jsx32(
               ToggleIcon,
               {
                 hasChildren: node.hasChildren,
@@ -3389,7 +3597,7 @@ function NodeRow({
             )
           }
         ),
-        onSelectionChange && isSelectable && /* @__PURE__ */ jsx30(
+        onSelectionChange && isSelectable && /* @__PURE__ */ jsx32(
           "input",
           {
             type: "checkbox",
@@ -3401,8 +3609,8 @@ function NodeRow({
             tabIndex: -1
           }
         ),
-        /* @__PURE__ */ jsx30("span", { className: "flex-1 min-w-0", children: renderNode(node, depth) }),
-        node.isError && /* @__PURE__ */ jsx30("span", { className: "shrink-0 text-xs text-destructive", "aria-live": "polite", children: "Failed to load" })
+        /* @__PURE__ */ jsx32("span", { className: "flex-1 min-w-0", children: renderNode(node, depth) }),
+        node.isError && /* @__PURE__ */ jsx32("span", { className: "shrink-0 text-xs text-destructive", "aria-live": "polite", children: "Failed to load" })
       ]
     }
   );
@@ -3422,9 +3630,9 @@ function TreeViewInner({
   className
 }, ref) {
   const treeId = useId2();
-  const [focusedId, setFocusedId] = useState4(null);
+  const [focusedId, setFocusedId] = useState5(null);
   const listRef = useRef5(null);
-  const [constrainedParent, setConstrainedParent] = useState4(UNCONSTRAINED);
+  const [constrainedParent, setConstrainedParent] = useState5(UNCONSTRAINED);
   const selectionSize = selectedIds?.size ?? 0;
   useEffect5(() => {
     if (selectionSize === 0) setConstrainedParent(UNCONSTRAINED);
@@ -3578,7 +3786,7 @@ function TreeViewInner({
     ]
   );
   if (nodes.length === 0) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx32(
       "div",
       {
         className: cn28(
@@ -3589,7 +3797,7 @@ function TreeViewInner({
       }
     );
   }
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     "ul",
     {
       ref: listRef,
@@ -3597,7 +3805,7 @@ function TreeViewInner({
       "aria-label": "Tree",
       className: cn28("outline-none", className),
       onKeyDown: handleKeyDown,
-      children: flatNodes.map((flat) => /* @__PURE__ */ jsx30(
+      children: flatNodes.map((flat) => /* @__PURE__ */ jsx32(
         NodeRow,
         {
           flat,
@@ -3622,23 +3830,23 @@ function TreeViewInner({
 var TreeView = forwardRef19(TreeViewInner);
 
 // src/EntityTree/EntityTree.tsx
-import { jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
 function buildCellRow(resolved, activeNodeIdRef, onNodeEdit, localRenderers) {
   return function renderCells(node) {
     const isActive = node.id === activeNodeIdRef.current;
-    return /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-4 min-w-0 w-full group/row", children: [
+    return /* @__PURE__ */ jsxs13("span", { className: "flex items-center gap-4 min-w-0 w-full group/row", children: [
       resolved.map((col) => {
         const Renderer = resolveCellRenderer2(
           col.cellRenderer,
           localRenderers
         );
         const value = node.data[col.key];
-        return /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsx33(
           "span",
           {
             className: "shrink-0",
             style: col.width !== void 0 ? { width: col.width } : void 0,
-            children: /* @__PURE__ */ jsx31(
+            children: /* @__PURE__ */ jsx33(
               Renderer,
               {
                 value,
@@ -3650,7 +3858,7 @@ function buildCellRow(resolved, activeNodeIdRef, onNodeEdit, localRenderers) {
           col.key
         );
       }),
-      onNodeEdit && /* @__PURE__ */ jsx31("span", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx31(
+      onNodeEdit && /* @__PURE__ */ jsx33("span", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx33(
         "button",
         {
           type: "button",
@@ -3663,7 +3871,7 @@ function buildCellRow(resolved, activeNodeIdRef, onNodeEdit, localRenderers) {
             "p-1 rounded hover:bg-background text-muted-foreground hover:text-foreground transition-colors",
             isActive ? "opacity-100" : "opacity-0 group-hover/row:opacity-100"
           ),
-          children: /* @__PURE__ */ jsx31(Pencil, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ jsx33(Pencil, { className: "h-3.5 w-3.5" })
         }
       ) })
     ] });
@@ -3686,7 +3894,7 @@ function renderTreeStatus({
   className
 }) {
   if (isLoading && nodes.length === 0) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx33(
       "div",
       {
         className: cn29(
@@ -3698,7 +3906,7 @@ function renderTreeStatus({
     );
   }
   if (isError) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx33(
       "div",
       {
         className: cn29("py-8 text-center text-sm text-destructive", className),
@@ -3707,7 +3915,7 @@ function renderTreeStatus({
     );
   }
   if (!isLoading && nodes.length === 0) {
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs13(
       "div",
       {
         className: cn29(
@@ -3802,7 +4010,7 @@ function EntityTreeInner(props, ref) {
     className
   });
   if (statusView) return statusView;
-  return /* @__PURE__ */ jsx31("div", { className: cn29("rounded-lg border", className), children: /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33("div", { className: cn29("rounded-lg border", className), children: /* @__PURE__ */ jsx33(
     TreeView,
     {
       ref: treeRef,
@@ -3824,14 +4032,14 @@ function EntityTreeInner(props, ref) {
 var EntityTree = forwardRef20(EntityTreeInner);
 
 // src/SearchInput/SearchInput.tsx
-import React30, { useMemo as useMemo6, useRef as useRef9, useState as useState7, useEffect as useEffect9 } from "react";
+import React31, { useMemo as useMemo6, useRef as useRef9, useState as useState8, useEffect as useEffect9 } from "react";
 import { Search as Search2, X as X3, ChevronDown } from "lucide-react";
 import { cn as cn31 } from "@petrarca/sonnet-core";
 import { getFieldTitle as getFieldTitle2 } from "@petrarca/sonnet-core/schema";
 import { isEmptyFilterExpr } from "@petrarca/sonnet-core/search";
 
 // src/SearchInput/useSearchInput.ts
-import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef7, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
 import { collectTerms } from "@petrarca/sonnet-core/search";
 
 // src/SearchInput/schemaAdapter.ts
@@ -3915,11 +4123,11 @@ function useSearchInput({
     const terms = collectTerms(value);
     return terms.length === 1 && terms[0].key === "search" ? terms[0].value : "";
   })() : "";
-  const [inputValue, setInputValue] = useState5(initialInput);
-  const [pendingFacet, setPendingFacet] = useState5(
+  const [inputValue, setInputValue] = useState6(initialInput);
+  const [pendingFacet, setPendingFacet] = useState6(
     null
   );
-  const [draftTerms, setDraftTerms] = useState5(
+  const [draftTerms, setDraftTerms] = useState6(
     () => isFaceted ? collectTerms(value) : []
   );
   const valueTerms = useMemo5(
@@ -4134,7 +4342,7 @@ function useSearchInput({
 
 // src/SearchInput/widgets/TextSearchWidget.tsx
 import { useRef as useRef8, useEffect as useEffect7 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function TextSearchWidget({
   value,
   onChange,
@@ -4147,7 +4355,7 @@ function TextSearchWidget({
   useEffect7(() => {
     if (autoFocus) inputRef.current?.focus();
   }, [autoFocus]);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     Input,
     {
       ref: inputRef,
@@ -4173,9 +4381,9 @@ function TextSearchWidget({
 }
 
 // src/SearchInput/widgets/EnumSearchWidget.tsx
-import { useEffect as useEffect8, useState as useState6 } from "react";
+import { useEffect as useEffect8, useState as useState7 } from "react";
 import { cn as cn30 } from "@petrarca/sonnet-core";
-import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
 function EnumSearchWidget({
   property,
   options: widgetOptions,
@@ -4184,9 +4392,9 @@ function EnumSearchWidget({
   placeholder,
   autoFocus
 }) {
-  const [open, setOpen] = useState6(false);
-  const [search, setSearch] = useState6("");
-  const [highlightedIndex, setHighlightedIndex] = useState6(0);
+  const [open, setOpen] = useState7(false);
+  const [search, setSearch] = useState7("");
+  const [highlightedIndex, setHighlightedIndex] = useState7(0);
   const enumValues = property.enum ?? [];
   const enumNames = widgetOptions.enumNames ?? {};
   const items = enumValues.map((val) => ({
@@ -4239,8 +4447,8 @@ function EnumSearchWidget({
       return;
     }
   }
-  return /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs14(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx35(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(
       "button",
       {
         type: "button",
@@ -4249,14 +4457,14 @@ function EnumSearchWidget({
         children: placeholder ?? "Select..."
       }
     ) }),
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsxs14(
       PopoverContent,
       {
         className: "w-48 p-1",
         align: "start",
         onOpenAutoFocus: (e) => e.preventDefault(),
         children: [
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx35(
             "input",
             {
               autoFocus: true,
@@ -4267,9 +4475,9 @@ function EnumSearchWidget({
               className: "w-full px-2 py-1.5 text-sm bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground"
             }
           ),
-          /* @__PURE__ */ jsxs12("div", { children: [
-            filtered.length === 0 && /* @__PURE__ */ jsx33("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "No matches" }),
-            filtered.map((item, i) => /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsxs14("div", { children: [
+            filtered.length === 0 && /* @__PURE__ */ jsx35("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "No matches" }),
+            filtered.map((item, i) => /* @__PURE__ */ jsx35(
               "button",
               {
                 type: "button",
@@ -4312,7 +4520,7 @@ var DEFAULT_SEARCH_WIDGETS = {
 };
 
 // src/SearchInput/SearchInput.tsx
-import { Fragment as Fragment3, jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
 function resolveSearchDefaults(props) {
   return {
     mode: props.mode ?? "explicit",
@@ -4332,8 +4540,8 @@ function FacetPicker({
   acceptFacet,
   inputRef
 }) {
-  return /* @__PURE__ */ jsxs13(Popover, { open: pickerVisible, onOpenChange: setPickerOpen, modal: false, children: [
-    /* @__PURE__ */ jsx34(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs15(Popover, { open: pickerVisible, onOpenChange: setPickerOpen, modal: false, children: [
+    /* @__PURE__ */ jsx36(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx36(
       "button",
       {
         type: "button",
@@ -4344,17 +4552,17 @@ function FacetPicker({
           setPickerOpen((o) => !o);
           inputRef.current?.focus();
         },
-        children: /* @__PURE__ */ jsx34(ChevronDown, { className: "h-3 w-3" })
+        children: /* @__PURE__ */ jsx36(ChevronDown, { className: "h-3 w-3" })
       }
     ) }),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx36(
       PopoverContent,
       {
         className: cn31("w-44 p-1", !hasFacetsToShow && "hidden"),
         align: "start",
         onOpenAutoFocus: (e) => e.preventDefault(),
         onFocusOutside: (e) => e.preventDefault(),
-        children: filteredFacets.map((facet, i) => /* @__PURE__ */ jsx34(
+        children: filteredFacets.map((facet, i) => /* @__PURE__ */ jsx36(
           "button",
           {
             type: "button",
@@ -4392,7 +4600,7 @@ function ValueEntry({
   onInputFocus
 }) {
   if (pendingFacet && PendingWidget) {
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx36(
       PendingWidget,
       {
         property: pendingFacet.property,
@@ -4414,7 +4622,7 @@ function ValueEntry({
       }
     );
   }
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     Input,
     {
       ref: inputRef,
@@ -4483,10 +4691,10 @@ function ActiveChips({
   schema,
   onRemove
 }) {
-  return /* @__PURE__ */ jsx34(Fragment3, { children: terms.map((term, i) => {
+  return /* @__PURE__ */ jsx36(Fragment3, { children: terms.map((term, i) => {
     const property = schema?.properties?.[term.key];
     const label = property ? getFieldTitle2(term.key, property) : term.key;
-    return /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsx36(
       FilterChip,
       {
         label: `${label}: ${term.value}`,
@@ -4510,8 +4718,8 @@ function SearchActions({
   onClear,
   onCommit
 }) {
-  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
-    !isEmpty && /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs15(Fragment3, { children: [
+    !isEmpty && /* @__PURE__ */ jsx36(
       "button",
       {
         type: "button",
@@ -4521,10 +4729,10 @@ function SearchActions({
         },
         className: "text-muted-foreground hover:text-foreground transition-colors shrink-0",
         "aria-label": "Clear search",
-        children: /* @__PURE__ */ jsx34(X3, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx36(X3, { className: "h-4 w-4" })
       }
     ),
-    showSearchButton && mode === "explicit" && /* @__PURE__ */ jsx34(
+    showSearchButton && mode === "explicit" && /* @__PURE__ */ jsx36(
       Button,
       {
         type: "button",
@@ -4556,9 +4764,9 @@ function SearchInput(props) {
   const { mode, debounceMs, minChars, showSearchButton, disabled } = resolveSearchDefaults(props);
   const inputRef = useRef9(null);
   const containerRef = useRef9(null);
-  const [pickerOpen, setPickerOpen] = useState7(false);
-  const [highlightedIndex, setHighlightedIndex] = useState7(-1);
-  const [pickerNavigated, setPickerNavigated] = useState7(false);
+  const [pickerOpen, setPickerOpen] = useState8(false);
+  const [highlightedIndex, setHighlightedIndex] = useState8(-1);
+  const [pickerNavigated, setPickerNavigated] = useState8(false);
   useEffect9(() => {
     if (!pickerOpen) return;
     function handleMouseDown(e) {
@@ -4609,7 +4817,7 @@ function SearchInput(props) {
   const showFacetControls = isFaceted && !pendingFacet;
   const pickerVisible = showFacetControls && pickerOpen;
   const hasFacetsToShow = pickerVisible && filteredFacets.length > 0;
-  const acceptFacet = React30.useCallback(
+  const acceptFacet = React31.useCallback(
     (facet) => {
       selectFacet(facet);
       setPickerOpen(false);
@@ -4633,7 +4841,7 @@ function SearchInput(props) {
     acceptFacet,
     handleKeyDown
   };
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       ref: containerRef,
@@ -4650,8 +4858,8 @@ function SearchInput(props) {
         }
       },
       children: [
-        /* @__PURE__ */ jsx34(Search2, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
-        isFaceted && /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(Search2, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+        isFaceted && /* @__PURE__ */ jsx36(
           ActiveChips,
           {
             terms: activeTerms,
@@ -4659,12 +4867,12 @@ function SearchInput(props) {
             onRemove: handleRemoveTerm
           }
         ),
-        pendingFacet && /* @__PURE__ */ jsxs13("span", { className: "inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground", children: [
+        pendingFacet && /* @__PURE__ */ jsxs15("span", { className: "inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground", children: [
           pendingFacet.label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1 flex-1 min-w-[120px]", children: [
-          showFacetControls && /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1 flex-1 min-w-[120px]", children: [
+          showFacetControls && /* @__PURE__ */ jsx36(
             FacetPicker,
             {
               pickerVisible,
@@ -4677,7 +4885,7 @@ function SearchInput(props) {
               inputRef
             }
           ),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx36(
             ValueEntry,
             {
               pendingFacet,
@@ -4701,7 +4909,7 @@ function SearchInput(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           SearchActions,
           {
             isEmpty,
@@ -4716,14 +4924,14 @@ function SearchInput(props) {
   );
 }
 function FilterChip({ label, onRemove }) {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     Badge,
     {
       variant: "secondary",
       className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full",
       children: [
         label,
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           "button",
           {
             type: "button",
@@ -4733,7 +4941,7 @@ function FilterChip({ label, onRemove }) {
             },
             className: "ml-0.5 hover:text-destructive transition-colors",
             "aria-label": `Remove filter ${label}`,
-            children: /* @__PURE__ */ jsx34(X3, { className: "h-3 w-3" })
+            children: /* @__PURE__ */ jsx36(X3, { className: "h-3 w-3" })
           }
         )
       ]
@@ -4743,9 +4951,9 @@ function FilterChip({ label, onRemove }) {
 
 // src/Clipboard/ClipboardButton.tsx
 import { Copy } from "lucide-react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function ClipboardButton({ hasItems, onClick }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx37(
     Button,
     {
       variant: "ghost",
@@ -4756,7 +4964,7 @@ function ClipboardButton({ hasItems, onClick }) {
         opacity: hasItems ? 1 : 0.4,
         cursor: hasItems ? "pointer" : "not-allowed"
       },
-      children: /* @__PURE__ */ jsx35(Copy, { size: 16 })
+      children: /* @__PURE__ */ jsx37(Copy, { size: 16 })
     }
   );
 }
@@ -4764,13 +4972,13 @@ var ClipboardButton_default = ClipboardButton;
 
 // src/Clipboard/ClipboardItem.tsx
 import { X as X4, Plus } from "lucide-react";
-import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 function ClipboardItemComponent({ item, onAddItem, onRemove }) {
   const handleAddClick = (e) => {
     const keepInClipboard = e.shiftKey;
     onAddItem(item, keepInClipboard);
   };
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       className: "p-3 rounded mb-2",
@@ -4778,17 +4986,17 @@ function ClipboardItemComponent({ item, onAddItem, onRemove }) {
         borderLeft: `4px solid ${item.color}`,
         backgroundColor: "#f8f9fa"
       },
-      children: /* @__PURE__ */ jsxs14(SimpleGroup, { justify: "space-between", wrap: "nowrap", align: "flex-start", children: [
-        /* @__PURE__ */ jsxs14("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
-          /* @__PURE__ */ jsx36("p", { className: "text-sm font-semibold truncate", children: item.label }),
-          /* @__PURE__ */ jsx36("p", { className: "text-xs text-muted-foreground truncate", children: item.displayName }),
-          /* @__PURE__ */ jsxs14("p", { className: "text-xs text-muted-foreground font-mono", children: [
+      children: /* @__PURE__ */ jsxs16(SimpleGroup, { justify: "space-between", wrap: "nowrap", align: "flex-start", children: [
+        /* @__PURE__ */ jsxs16("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsx38("p", { className: "text-sm font-semibold truncate", children: item.label }),
+          /* @__PURE__ */ jsx38("p", { className: "text-xs text-muted-foreground truncate", children: item.displayName }),
+          /* @__PURE__ */ jsxs16("p", { className: "text-xs text-muted-foreground font-mono", children: [
             "#",
             item.entityId
           ] })
         ] }),
-        /* @__PURE__ */ jsxs14(SimpleGroup, { gap: 4, wrap: "nowrap", style: { flexShrink: 0 }, children: [
-          /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs16(SimpleGroup, { gap: 4, wrap: "nowrap", style: { flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsxs16(
             Button,
             {
               size: "sm",
@@ -4796,19 +5004,19 @@ function ClipboardItemComponent({ item, onAddItem, onRemove }) {
               onClick: handleAddClick,
               title: "Click to add and remove from clipboard, Shift+Click to keep in clipboard",
               children: [
-                /* @__PURE__ */ jsx36(Plus, { size: 16 }),
+                /* @__PURE__ */ jsx38(Plus, { size: 16 }),
                 "Add"
               ]
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx38(
             Button,
             {
               size: "sm",
               variant: "ghost",
               onClick: () => onRemove(item.id),
               title: "Remove from clipboard",
-              children: /* @__PURE__ */ jsx36(X4, { size: 16 })
+              children: /* @__PURE__ */ jsx38(X4, { size: 16 })
             }
           )
         ] })
@@ -4906,16 +5114,16 @@ var useClipboard = create()(
 var clipboardStore_default = useClipboard;
 
 // src/Clipboard/ClipboardMenu.tsx
-import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
 function ClipboardMenu({ onAddItem }) {
   const { items, removeItem, clear } = clipboardStore_default();
   if (items.length === 0) {
-    return /* @__PURE__ */ jsxs15("div", { style: { padding: "16px", textAlign: "center", width: "300px" }, children: [
-      /* @__PURE__ */ jsx37("p", { className: "text-sm text-muted-foreground", children: "No items in clipboard" }),
-      /* @__PURE__ */ jsx37("p", { className: "text-xs text-muted-foreground mt-1", children: 'Right-click a node and select "Copy"' })
+    return /* @__PURE__ */ jsxs17("div", { style: { padding: "16px", textAlign: "center", width: "300px" }, children: [
+      /* @__PURE__ */ jsx39("p", { className: "text-sm text-muted-foreground", children: "No items in clipboard" }),
+      /* @__PURE__ */ jsx39("p", { className: "text-xs text-muted-foreground mt-1", children: 'Right-click a node and select "Copy"' })
     ] });
   }
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       style: {
@@ -4926,7 +5134,7 @@ function ClipboardMenu({ onAddItem }) {
         maxHeight: "500px"
       },
       children: [
-        /* @__PURE__ */ jsx37(ScrollArea, { className: "flex-1 p-3 min-h-0", children: /* @__PURE__ */ jsx37(SimpleStack, { gap: 0, children: items.map((item) => /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx39(ScrollArea, { className: "flex-1 p-3 min-h-0", children: /* @__PURE__ */ jsx39(SimpleStack, { gap: 0, children: items.map((item) => /* @__PURE__ */ jsx39(
           ClipboardItem_default,
           {
             item,
@@ -4935,8 +5143,8 @@ function ClipboardMenu({ onAddItem }) {
           },
           item.id
         )) }) }),
-        /* @__PURE__ */ jsx37(Separator2, {}),
-        /* @__PURE__ */ jsx37("div", { style: { padding: "8px 12px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsx39(Separator2, {}),
+        /* @__PURE__ */ jsx39("div", { style: { padding: "8px 12px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs17(
           Button,
           {
             className: "w-full",
@@ -4944,7 +5152,7 @@ function ClipboardMenu({ onAddItem }) {
             size: "sm",
             onClick: clear,
             children: [
-              /* @__PURE__ */ jsx37(Trash2, { size: 16 }),
+              /* @__PURE__ */ jsx39(Trash2, { size: 16 }),
               "Clear All (",
               items.length,
               ")"
@@ -5027,6 +5235,8 @@ export {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  PropertyList,
+  PropertyValue,
   ResizeHandle,
   ScrollArea,
   ScrollBar,