@petrarca/sonnet-ui 0.4.1 → 0.4.2

package/dist/index.d.ts

@@ -655,22 +655,29 @@ interface EntityTableProps<TRow extends RowData> {
 declare function EntityTable<TRow extends RowData>(props: EntityTableProps<TRow>): React__default.ReactElement;
 
 /**
- * PropertyList — read-only display of a record's properties as a stacked list.
+ * PropertyList — read-only display of a record's properties.
  *
- * Layout matches the established graph node/edge cards: an uppercase muted key
- * label above each value, values rendered by {@link PropertyValue}. Optional
- * per-property schema refines value rendering (schema is NOT required).
+ * Two layout modes:
+ * - `"inline"` (default) — horizontal two-column grid, key left / value right.
+ * - `"stacked"` — key label above each value.
+ *
+ * Values rendered by {@link PropertyValue}. Optional per-property schema
+ * refines value rendering (schema is NOT required).
  *
  * Shared by the graph view's node/edge cards and the table inspector so all
  * property displays look identical.
  */
 
+/** Layout mode for the property list. */
+type PropertyListLayout = "inline" | "stacked";
 interface PropertyListProps {
     /** Property name -> value. */
     properties: Record<string, unknown>;
     /** Optional property name -> schema, to refine value rendering. */
     propertySchemas?: Record<string, JsonSchemaProperty>;
-    /** Show a "PROPERTIES" section header. Default false. */
+    /** Layout mode. Default "inline" (horizontal key-value grid). */
+    layout?: PropertyListLayout;
+    /** Show a "Properties" section header. Default false. */
     showHeader?: boolean;
     /** Click value to copy it to the clipboard. Default true. */
     copyable?: boolean;
@@ -678,7 +685,7 @@ interface PropertyListProps {
     emptyLabel?: string;
     className?: string;
 }
-declare function PropertyList({ properties, propertySchemas, showHeader, copyable, emptyLabel, className, }: PropertyListProps): React__default.ReactElement;
+declare function PropertyList({ properties, propertySchemas, layout, showHeader, copyable, emptyLabel, className, }: PropertyListProps): React__default.ReactElement;
 
 /**
  * PropertyValue — read-only, type-aware rendering of a single property value.
@@ -1080,4 +1087,4 @@ type Props = {
  */
 declare function ClipboardMenu({ onAddItem }: Props): react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, CELL_RENDERERS, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CellRenderer, type CellRendererProps, Checkbox, ClipboardButton, ClipboardItemComponent as ClipboardItem, ClipboardMenu, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntitySelect, type EntitySelectProps, EntityTable, type EntityTableProps, EntityTree, type EntityTreeHandle, type EntityTreeProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Popover, PopoverContent, PopoverTrigger, PropertyList, type PropertyListProps, PropertyValue, type PropertyValueProps, ResizeHandle, type ResizeHandleProps, type ResolvedColumn, type RowAction, ScrollArea, ScrollBar, SearchInput, type SearchMode, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetTitle, SheetTrigger, SimpleGroup, SimpleStack, SimpleTooltip, Skeleton, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, type StepperProps, StepperSeparator, StepperTitle, StepperTrigger, type TableUiSchema, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewHandle, type TreeViewProps, badgeVariants, buttonVariants, createRenderer, useStore as useStepper };
+export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, CELL_RENDERERS, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CellRenderer, type CellRendererProps, Checkbox, ClipboardButton, ClipboardItemComponent as ClipboardItem, ClipboardMenu, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntitySelect, type EntitySelectProps, EntityTable, type EntityTableProps, EntityTree, type EntityTreeHandle, type EntityTreeProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Popover, PopoverContent, PopoverTrigger, PropertyList, type PropertyListLayout, type PropertyListProps, PropertyValue, type PropertyValueProps, ResizeHandle, type ResizeHandleProps, type ResolvedColumn, type RowAction, ScrollArea, ScrollBar, SearchInput, type SearchMode, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetTitle, SheetTrigger, SimpleGroup, SimpleStack, SimpleTooltip, Skeleton, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, type StepperProps, StepperSeparator, StepperTitle, StepperTrigger, type TableUiSchema, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewHandle, type TreeViewProps, badgeVariants, buttonVariants, createRenderer, useStore as useStepper };

package/dist/index.js

@@ -3008,6 +3008,7 @@ function PaginationFooter({
 }
 
 // src/PropertyList/PropertyList.tsx
+import React26 from "react";
 import { copyTextToClipboard } from "@petrarca/sonnet-core";
 
 // src/PropertyList/PropertyValue.tsx
@@ -3184,6 +3185,7 @@ import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
 function PropertyList({
   properties,
   propertySchemas,
+  layout = "inline",
   showHeader = false,
   copyable = true,
   emptyLabel = "No properties",
@@ -3193,20 +3195,27 @@ function PropertyList({
   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))
+  const header = showHeader && /* @__PURE__ */ jsx30("p", { className: "text-[11px] text-muted-foreground mb-1.5", children: "Properties" });
+  const dtClass = `text-[11px] text-muted-foreground ${copyable ? "cursor-pointer hover:text-foreground" : ""}`;
+  const dtProps = (value) => copyable ? {
+    onClick: () => copyTextToClipboard(stringForCopy(value)),
+    title: "Click to copy value"
+  } : {};
+  if (layout === "stacked") {
+    return /* @__PURE__ */ jsxs10("div", { className, children: [
+      header,
+      /* @__PURE__ */ jsx30("dl", { className: "space-y-1", children: entries.map(([key, value]) => /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx30("dt", { className: dtClass, ...dtProps(value), children: key }),
+        /* @__PURE__ */ jsx30("dd", { className: "text-sm text-foreground font-medium break-words", children: /* @__PURE__ */ jsx30(PropertyValue, { value, schema: propertySchemas?.[key] }) })
+      ] }, key)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs10("div", { className, children: [
+    header,
+    /* @__PURE__ */ jsx30("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 items-baseline", children: entries.map(([key, value]) => /* @__PURE__ */ jsxs10(React26.Fragment, { children: [
+      /* @__PURE__ */ jsx30("dt", { className: `${dtClass} whitespace-nowrap`, ...dtProps(value), children: key }),
+      /* @__PURE__ */ jsx30("dd", { className: "text-sm text-foreground min-w-0 break-words", children: /* @__PURE__ */ jsx30(PropertyValue, { value, schema: propertySchemas?.[key] }) })
+    ] }, key)) })
   ] });
 }
 function stringForCopy(value) {
@@ -3216,7 +3225,7 @@ function stringForCopy(value) {
 }
 
 // src/EntitySelect/EntitySelect.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { Check as Check4, ChevronsUpDown, Loader2 } from "lucide-react";
 import { cn as cn27 } from "@petrarca/sonnet-core";
 import {
@@ -3240,8 +3249,8 @@ function emptyStateMessage({
   return emptyMessage;
 }
 function useHasSearched(submit) {
-  const [hasSearched, setHasSearched] = React26.useState(false);
-  const wrappedSubmit = React26.useCallback(() => {
+  const [hasSearched, setHasSearched] = React27.useState(false);
+  const wrappedSubmit = React27.useCallback(() => {
     setHasSearched(true);
     submit();
   }, [submit]);
@@ -3363,8 +3372,8 @@ function EntitySelect(props) {
     emptyMessage,
     disabled
   } = resolveEntitySelectDefaults(props);
-  const [open, setOpen] = React26.useState(false);
-  const [selectedLabel, setSelectedLabel] = React26.useState(null);
+  const [open, setOpen] = React27.useState(false);
+  const [selectedLabel, setSelectedLabel] = React27.useState(null);
   const {
     options,
     isLoading,
@@ -3373,7 +3382,7 @@ function EntitySelect(props) {
     submit: rawSubmit
   } = useEntityOptions({ fetcher, queryKey, mode, minChars });
   const [hasSearched, submit] = useHasSearched(rawSubmit);
-  React26.useEffect(() => {
+  React27.useEffect(() => {
     if (!value) {
       setSelectedLabel(null);
       return;
@@ -3383,7 +3392,7 @@ function EntitySelect(props) {
       setSelectedLabel(found.label);
     }
   }, [value, options]);
-  const handleSelect = React26.useCallback(
+  const handleSelect = React27.useCallback(
     (selectedValue) => {
       const opt = options.find((o) => o.value === selectedValue);
       if (opt) setSelectedLabel(opt.label);
@@ -3396,7 +3405,7 @@ function EntitySelect(props) {
     },
     [options, value, onChange, onChangeOption, setSearch]
   );
-  const handleOpenChange = React26.useCallback(
+  const handleOpenChange = React27.useCallback(
     (newOpen) => {
       setOpen(newOpen);
       if (!newOpen) {
@@ -4032,7 +4041,7 @@ function EntityTreeInner(props, ref) {
 var EntityTree = forwardRef20(EntityTreeInner);
 
 // src/SearchInput/SearchInput.tsx
-import React31, { useMemo as useMemo6, useRef as useRef9, useState as useState8, useEffect as useEffect9 } from "react";
+import React32, { 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";
@@ -4817,7 +4826,7 @@ function SearchInput(props) {
   const showFacetControls = isFaceted && !pendingFacet;
   const pickerVisible = showFacetControls && pickerOpen;
   const hasFacetsToShow = pickerVisible && filteredFacets.length > 0;
-  const acceptFacet = React31.useCallback(
+  const acceptFacet = React32.useCallback(
     (facet) => {
       selectFacet(facet);
       setPickerOpen(false);