@manta-eu/react 0.2.0 → 0.2.1

package/src/components/planning/actioning-view-utils.ts

@@ -1,9 +1,35 @@
 import { GQLActionPlanState } from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
 import { match } from "ts-pattern";
-import { parseTimestampMs } from "./execution-section-model";
+
+export function parseTimestampMs(timestamp: string | null | undefined): number | null {
+  if (!timestamp) return null;
+  const value = new Date(timestamp).getTime();
+  return Number.isFinite(value) ? value : null;
+}
 
 export type ExecutionStatus = "idle" | "running" | "completed" | "failed" | "needs-approval";
 
+export type RunSurface = "completed-changes" | "run" | "starting-run" | "loading" | "none";
+
+export type DeriveRunSurfaceArgs = {
+  executionStatus: ExecutionStatus;
+  runIri: string | null;
+  hasCompletedChangesSlot: boolean;
+  isLoading: boolean;
+};
+
+export function deriveRunSurface(args: DeriveRunSurfaceArgs): RunSurface {
+  const { executionStatus, runIri, hasCompletedChangesSlot, isLoading } = args;
+
+  if (executionStatus === "completed" && hasCompletedChangesSlot) return "completed-changes";
+  if (isPresent(runIri)) return "run";
+  if (executionStatus === "running" || executionStatus === "needs-approval") return "starting-run";
+  if (isLoading) return "loading";
+
+  return "none";
+}
+
 export type DeriveExecutionStatusArgs = {
   provenance: {
     planErrorMessage: string | null;

package/src/components/tooltip/index.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import type { ComponentPropsWithoutRef, ElementRef } from "react";
-import { forwardRef } from "react";
+import type { ComponentPropsWithoutRef, ElementRef, ReactNode } from "react";
+import { forwardRef, useState } from "react";
 import { cn } from "#style";
 
 export const TooltipProvider = TooltipPrimitive.Provider;
@@ -43,3 +43,36 @@ export const TooltipContent = forwardRef<ElementRef<typeof TooltipPrimitive.Cont
   ),
 );
 TooltipContent.displayName = "TooltipContent";
+
+export type TruncateTooltipProps = { text: string; className: string; children?: ReactNode };
+
+export function TruncateTooltip(props: TruncateTooltipProps) {
+  const { text, className, children } = props;
+
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          className={className}
+          onMouseEnter={(event) => {
+            const element = event.currentTarget;
+            // Line height can round a single line 1px taller than its box, so only a real clamp counts.
+            setIsTruncated(
+              element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight + 1,
+            );
+          }}
+        >
+          {children ?? text}
+        </span>
+      </TooltipTrigger>
+
+      {isTruncated && (
+        <TooltipContent showArrow={false} className="max-h-64 max-w-sm overflow-y-auto break-words text-left">
+          <p className="typography-tiny">{text}</p>
+        </TooltipContent>
+      )}
+    </Tooltip>
+  );
+}

package/src/graph/entity-link.tsx

@@ -0,0 +1,20 @@
+import { type ComponentType, createContext, type ReactNode, useContext } from "react";
+
+export type EntityLinkProps = { iri: string; className?: string; children: ReactNode };
+
+export type EntityLinkComponent = ComponentType<EntityLinkProps>;
+
+// The host app supplies how an entity opens (its router and record route); without one, entities render unlinked.
+const EntityLinkContext = createContext<EntityLinkComponent | undefined>(undefined);
+
+export type EntityLinkProviderProps = { component: EntityLinkComponent; children: ReactNode };
+
+export function EntityLinkProvider(props: EntityLinkProviderProps) {
+  const { component, children } = props;
+
+  return <EntityLinkContext.Provider value={component}>{children}</EntityLinkContext.Provider>;
+}
+
+export function useEntityLink(): EntityLinkComponent | undefined {
+  return useContext(EntityLinkContext);
+}

package/src/graph/graph-list-utils.ts

@@ -87,6 +87,7 @@ export type NodePropertyChange = {
 
 export type NodePropertyPreview = {
   id: string;
+  predicate?: string;
   label: string;
   value: string;
   changeType?: PropertyChangeType;
@@ -162,6 +163,7 @@ export function selectPriorityPreviewFields(
 
       return {
         id: `${property.key}-${index}`,
+        predicate: property.iri,
         label: property.label ?? propertyLabelFromKey(property.key),
         value,
         rawValue: String(property.value),

package/src/graph/graph-model.ts

@@ -1,3 +1,4 @@
+import { isFullIri } from "@manta-eu/client/shared/rdf-namespaces";
 import { labelPredicateSuffixes } from "@manta-eu/rdf-lib/detail-view-types";
 import { expandPrefix, wellKnownPredicates } from "@manta-eu/rdf-lib/namespaces";
 import type { RdfGraph } from "../lib/rdf-helpers";
@@ -10,7 +11,7 @@ import {
 import { humanizePredicateName, type NodesAndEdges, type RDFEdge, shortenUri } from "./graph-utils";
 import { readVocabValue } from "./nodes/typed-node-helpers";
 import { mantaLightTheme } from "./themes";
-import type { LayoutDirection, NodeProperty, RDFNode } from "./types";
+import type { LayoutDirection, NodeProperty, NodeRelation, RDFNode } from "./types";
 
 const labelPredicate = wellKnownPredicates.label;
 const rdfType = wellKnownPredicates.type;
@@ -44,6 +45,7 @@ type NodeAccumulator = {
   label?: string;
   type?: string;
   data: Record<string, unknown>;
+  relations: NodeRelation[];
 };
 
 type GraphEdgeRecord = {
@@ -60,7 +62,7 @@ function createOrGetNodeAccumulator(
 ): NodeAccumulator {
   let node = nodeData.get(subjectId);
   if (!node) {
-    node = { data: {} };
+    node = { data: {}, relations: [] };
     nodeData.set(subjectId, node);
     connectionCounts.set(subjectId, 0);
   }
@@ -159,7 +161,7 @@ function buildNodesAndEdges(
   const allNodeIds = new Set(nodeData.keys());
   const hubThreshold = computeHubThreshold(connectionCounts);
 
-  const graphNodes: RDFNode[] = Array.from(nodeData).map(([id, { label, type, data }]) => {
+  const graphNodes: RDFNode[] = Array.from(nodeData).map(([id, { label, type, data, relations }]) => {
     const childIds = (parentChildMap.get(id) || []).filter((childId) => allNodeIds.has(childId));
     const parentId = childParentMap.get(id);
     const depth = nodeDepths.get(id) || 0;
@@ -193,6 +195,7 @@ function buildNodesAndEdges(
         isHub: connCount >= hubThreshold,
         jsonLd: { "@id": id, "@type": type, ...data },
         properties,
+        relations,
         childIds,
         parentId,
         isCollapsed: false,
@@ -334,11 +337,15 @@ export function rdfGraphToNodesAndEdges(
   const longNumericPattern = /\d{10,}/;
   const leafValueSchemes = ["http://", "https://", "s3://"];
 
+  // A stored file or web address is a value to render, not a neighbor (without `s3:`, a long digit run reads as a ref).
+  function isLeafValue(targetId: string): boolean {
+    const isNamespacedIri = targetId.includes("#") || targetId.includes("vocab");
+    return !isNamespacedIri && leafValueSchemes.some((scheme) => targetId.startsWith(scheme));
+  }
+
   function isEnumLikeRef(targetId: string): boolean {
     if (definedSubjects.has(targetId)) return false;
-    const isNamespacedIri = targetId.includes("#") || targetId.includes("vocab");
-    // A stored file is a value to render, not a neighbor: without `s3:` a key with a long digit run reads as a ref.
-    if (!isNamespacedIri && leafValueSchemes.some((scheme) => targetId.startsWith(scheme))) return true;
+    if (isLeafValue(targetId)) return true;
     const localName = targetId.split(/[#/]/).pop() ?? targetId;
     if (uuidPattern.test(localName) || longNumericPattern.test(localName)) return false;
     return true;
@@ -379,10 +386,12 @@ export function rdfGraphToNodesAndEdges(
 
           if (isEnumLikeRef(targetId)) {
             mergeNodeValue(node.data, predicate, targetId);
+            if (!isLeafValue(targetId) && isFullIri(targetId)) node.relations.push({ predicate, target: targetId });
             continue;
           }
 
           createOrGetNodeAccumulator(nodeData, connectionCounts, targetId);
+          if (isFullIri(targetId)) node.relations.push({ predicate, target: targetId });
           connectionCounts.set(subjectId, (connectionCounts.get(subjectId) || 0) + 1);
           connectionCounts.set(targetId, (connectionCounts.get(targetId) || 0) + 1);
 

package/src/graph/nodes/BrandAssetAnalysisView.tsx

@@ -13,6 +13,7 @@ import { useRedirectEndpoint } from "#hooks/use-redirect-endpoint";
 const filePredicate = `${namespaces.brand}file`;
 const mimePredicate = `${namespaces.nmo}contentMimeType`;
 const descriptionPredicate = `${namespaces.brand}assetDescription`;
+const listedElsewhere = [filePredicate, mimePredicate, descriptionPredicate];
 
 // The generated schema requires `m:file`, which only the planned request carries, so a lens read never matches.
 export const BrandAssetAnalysisView = memo(function BrandAssetAnalysisView(props: EntityViewProps) {
@@ -46,8 +47,9 @@ export const BrandAssetAnalysisView = memo(function BrandAssetAnalysisView(props
 
         <NodePropertyTable
           properties={data.properties}
+          relations={data.relations}
           jsonLd={data.jsonLd}
-          omitPredicates={[filePredicate, mimePredicate, descriptionPredicate]}
+          omitPredicates={listedElsewhere}
         />
       </BrandNodeBody>
     </EntityCardShell>

package/src/graph/nodes/BrandFontSuggestionView.tsx

@@ -23,6 +23,7 @@ import { useFontFace } from "#hooks/use-font-face";
 import { useRedirectEndpoint } from "#hooks/use-redirect-endpoint";
 
 const weightPredicate = `${namespaces.brand}hasSuggestedWeight`;
+const listedElsewhere = [weightPredicate];
 const specimenText = "Aa Bb Cc Qq Rr 0123456789 — The quick brown fox jumps over the lazy dog";
 
 function useSuggestedWeights(iris: string[]): SuggestedWeight[] {
@@ -118,7 +119,12 @@ export const BrandFontSuggestionView = memo(function BrandFontSuggestionView(pro
           </ul>
         )}
 
-        <NodePropertyTable properties={data.properties} jsonLd={data.jsonLd} omitPredicates={[weightPredicate]} />
+        <NodePropertyTable
+          properties={data.properties}
+          jsonLd={data.jsonLd}
+          relations={data.relations}
+          omitPredicates={listedElsewhere}
+        />
       </BrandNodeBody>
     </EntityCardShell>
   );

package/src/graph/nodes/BrandGuidelinesView.tsx

@@ -18,7 +18,7 @@ export const BrandGuidelinesView = memo(function BrandGuidelinesView(props: Enti
       onContextMenu={onContextMenu}
     >
       <BrandNodeBody>
-        <NodePropertyTable properties={data.properties} jsonLd={data.jsonLd} />
+        <NodePropertyTable properties={data.properties} jsonLd={data.jsonLd} relations={data.relations} />
       </BrandNodeBody>
     </EntityCardShell>
   );

package/src/graph/nodes/NodePropertyTable.tsx

@@ -1,15 +1,16 @@
-import { isPresent } from "@manta-eu/lib/present";
-import { Check, ChevronDown, ChevronRight, X } from "lucide-react";
-import { useMemo, useState } from "react";
-import { match, P } from "ts-pattern";
+import { useCallback, useMemo } from "react";
 import { shouldHidePreviewField } from "../graph-list-utils";
-import { ontologyTermIrisForProperties, withOntologyLabels } from "../ontology-labels";
-import { formatDisplayValue } from "../property-formatters";
-import type { NodeProperty } from "../types";
-import { classifyPropertyDisplay, type PropertyDisplay } from "./node-property-display";
-import { useOntologyTerms } from "#hooks/use-ontology-terms";
-import { formatPropertyLabel } from "#lib/iri-labels";
-import { cn } from "#style";
+import { AttributeList, useAttributeFacts } from "../special-nodes/AttributeList";
+import type { NodeProperty, NodeRelation } from "../types";
+
+export {
+  NodePropertyExpander,
+  NodePropertyList,
+  NodePropertyRow,
+  PropertyValue,
+  type NodePropertyExpanderProps,
+  type NodePropertyRowProps,
+} from "./node-property-row";
 
 export type NodePropertyTableProps = {
   properties: NodeProperty[];
@@ -17,145 +18,33 @@ export type NodePropertyTableProps = {
   jsonLd?: Record<string, unknown>;
   // Rendered above the table by the card itself, so the table skips them.
   omitPredicates?: readonly string[];
+  relations?: NodeRelation[];
 };
 
-function Tag(props: { children: string }) {
-  return (
-    <span className="rounded bg-faint px-1.5 py-[1px] typography-tiny text-default-foreground">{props.children}</span>
-  );
-}
-
-function PropertyValue(props: { display: PropertyDisplay }) {
-  return match(props.display)
-    .with({ kind: "tags" }, ({ values }) => (
-      <div className="flex flex-wrap gap-1">
-        {values.map((value) => (
-          <Tag key={value}>{value}</Tag>
-        ))}
-      </div>
-    ))
-    .with({ kind: "color" }, ({ hex }) => (
-      <span className="flex items-center gap-1.5">
-        <span
-          aria-hidden
-          className="size-3.5 shrink-0 rounded-sm border border-default-border"
-          style={{ backgroundColor: hex }}
-        />
-        <span className="tabular-nums">{hex}</span>
-      </span>
-    ))
-    .with({ kind: "ratio" }, ({ fraction, text }) => (
-      <span className="flex items-center gap-1.5">
-        <span aria-hidden className="h-1 w-12 shrink-0 overflow-hidden rounded-full bg-faint">
-          <span className="block h-full rounded-full bg-accent-foreground" style={{ width: `${fraction * 100}%` }} />
-        </span>
-        <span className="tabular-nums">{text}</span>
-      </span>
-    ))
-    .with({ kind: "number" }, ({ text }) => <span className="tabular-nums">{text}</span>)
-    .with({ kind: "boolean" }, ({ value }) =>
-      value ? (
-        <span className="flex items-center gap-1">
-          <Check aria-hidden className="size-3.5 shrink-0 text-success-foreground" />
-          true
-        </span>
-      ) : (
-        <span className="flex items-center gap-1">
-          <X aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
-          false
-        </span>
-      ),
-    )
-    .with(P.union({ kind: "prose" }, { kind: "text" }), ({ text }) => <span>{text}</span>)
-    .exhaustive();
-}
-
-type Row = { key: string; label: string; display: PropertyDisplay };
-
-function PropertyRow(props: { row: Row }) {
-  const { row } = props;
-
-  return (
-    <div className="-mx-1 grid grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-baseline gap-x-3 gap-y-1 rounded-md border-t border-muted-border/50 px-1 py-1.5 transition-colors first:border-t-0 hover:bg-muted/30">
-      <span className="typography-tiny min-w-0 break-words text-muted-foreground first-letter:uppercase">
-        {row.label}
-      </span>
-      <div
-        className={cn(
-          "typography-tiny min-w-0 break-words text-default-foreground",
-          // A long description reads better as its own full-width block under the label.
-          row.display.kind === "prose" && "col-span-2",
-        )}
-      >
-        <PropertyValue display={row.display} />
-      </div>
-    </div>
-  );
-}
+const noJsonLd: Record<string, unknown> = {};
 
-// Every property the node carries, laid out like the record-detail field list. Rule-derived
+// Every property the node carries, in the same attribute list the fallback card uses. Rule-derived
 // properties are included: they are real on the instance even though no shape declares them.
-// Short values keep the compact two-column rhythm; prose paragraphs collapse behind the same
-// "Show more" expander AttioNodeBody uses, so the card stays a summary until asked.
 export function NodePropertyTable(props: NodePropertyTableProps) {
-  const { properties, jsonLd, omitPredicates = [] } = props;
+  const { properties, jsonLd = noJsonLd, omitPredicates, relations } = props;
 
-  const [expanded, setExpanded] = useState(false);
-
-  const terms = useOntologyTerms(useMemo(() => ontologyTermIrisForProperties(properties), [properties]));
-
-  const rows = useMemo(() => {
-    const omitted = new Set(omitPredicates);
-
-    return withOntologyLabels(properties, terms)
-      .filter(
-        (property) =>
-          !omitted.has(property.iri ?? "") && !shouldHidePreviewField(property.label ?? "", property.iri ?? ""),
-      )
-      .map((property): Row => {
-        const label = property.label || formatPropertyLabel(property.iri ?? property.key);
-        const formatted = formatDisplayValue(property.value, {
-          predicate: property.iri,
-          predicateLabel: property.label,
-          valueScale: property.valueScale,
-        });
-
-        return {
-          key: property.iri ?? property.key,
-          label,
-          display: classifyPropertyDisplay({ label, formatted, raw: jsonLd?.[property.iri ?? ""] ?? property.value }),
-        };
-      });
-  }, [properties, terms, jsonLd, omitPredicates]);
-
-  const compactRows = rows.filter((row) => row.display.kind !== "prose");
-  const proseRows = rows.filter((row) => row.display.kind === "prose");
+  const include = useCallback(
+    (property: NodeProperty) =>
+      !(omitPredicates ?? []).includes(property.iri ?? "") &&
+      !shouldHidePreviewField(property.label ?? "", property.iri ?? ""),
+    [omitPredicates],
+  );
 
-  if (!isPresent(rows)) return null;
+  const visibleRelations = useMemo(
+    () =>
+      relations?.filter(
+        (relation) =>
+          !(omitPredicates ?? []).includes(relation.predicate) && !shouldHidePreviewField("", relation.predicate),
+      ),
+    [relations, omitPredicates],
+  );
 
-  return (
-    <div className="flex flex-col">
-      {compactRows.map((row) => (
-        <PropertyRow key={row.key} row={row} />
-      ))}
+  const { facts, previewCount } = useAttributeFacts({ properties, relations: visibleRelations, jsonLd, include });
 
-      {isPresent(proseRows) && (
-        <>
-          {expanded && proseRows.map((row) => <PropertyRow key={row.key} row={row} />)}
-          <button
-            type="button"
-            onClick={() => setExpanded((value) => !value)}
-            className="nodrag flex items-center gap-1 pt-1.5 typography-tiny-medium text-muted-foreground hover:text-default-foreground"
-          >
-            {expanded ? (
-              <ChevronDown size={11} className="shrink-0" />
-            ) : (
-              <ChevronRight size={11} className="shrink-0" />
-            )}
-            {expanded ? "Show less" : `Show ${proseRows.length} more`}
-          </button>
-        </>
-      )}
-    </div>
-  );
+  return <AttributeList facts={facts} previewCount={previewCount} showAll />;
 }

package/src/graph/nodes/node-property-row.tsx

@@ -0,0 +1,154 @@
+import { Check, ChevronDown, ChevronRight, type LucideIcon, X } from "lucide-react";
+import type { ReactNode } from "react";
+import { match, P } from "ts-pattern";
+import type { PropertyDisplay } from "./node-property-display";
+import { TruncateTooltip } from "#components/tooltip/index";
+import { cn } from "#style";
+
+function Tag(props: { children: string }) {
+  return (
+    <span className="rounded bg-faint px-1.5 py-[1px] typography-tiny text-default-foreground">{props.children}</span>
+  );
+}
+
+export function PropertyValue(props: { display: PropertyDisplay }) {
+  return match(props.display)
+    .with({ kind: "tags" }, ({ values }) => (
+      <div className="flex flex-wrap gap-1">
+        {values.map((value) => (
+          <Tag key={value}>{value}</Tag>
+        ))}
+      </div>
+    ))
+    .with({ kind: "color" }, ({ hex }) => (
+      <span className="flex items-center gap-1.5">
+        <span
+          aria-hidden
+          className="size-3.5 shrink-0 rounded-sm border border-default-border"
+          style={{ backgroundColor: hex }}
+        />
+        <span className="tabular-nums">{hex}</span>
+      </span>
+    ))
+    .with({ kind: "ratio" }, ({ fraction, text }) => (
+      <span className="flex items-center gap-1.5">
+        <span aria-hidden className="h-1 w-12 shrink-0 overflow-hidden rounded-full bg-faint">
+          <span className="block h-full rounded-full bg-accent-foreground" style={{ width: `${fraction * 100}%` }} />
+        </span>
+        <span className="tabular-nums">{text}</span>
+      </span>
+    ))
+    .with({ kind: "number" }, ({ text }) => <span className="tabular-nums">{text}</span>)
+    .with({ kind: "boolean" }, ({ value }) =>
+      value ? (
+        <span className="flex items-center gap-1">
+          <Check aria-hidden className="size-3.5 shrink-0 text-success-foreground" />
+          true
+        </span>
+      ) : (
+        <span className="flex items-center gap-1">
+          <X aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
+          false
+        </span>
+      ),
+    )
+    .with(P.union({ kind: "prose" }, { kind: "text" }), ({ text }) => <span>{text}</span>)
+    .exhaustive();
+}
+
+export function NodePropertyList(props: { children: ReactNode }) {
+  return <dl className="flex flex-col">{props.children}</dl>;
+}
+
+export type NodePropertyRowProps = {
+  label: string;
+  icon?: LucideIcon;
+  labelPrefix?: ReactNode;
+  children: ReactNode;
+  fullWidth?: boolean;
+  overflow?: "wrap" | "truncate" | "clamp";
+  valueTitle?: string;
+  divided?: boolean;
+  wideLabel?: boolean;
+  emphasized?: boolean;
+  valueClassName?: string;
+};
+
+// Render inside NodePropertyList so the dt/dd pairs sit in a dl.
+export function NodePropertyRow(props: NodePropertyRowProps) {
+  const {
+    label,
+    icon: Icon,
+    labelPrefix,
+    children,
+    fullWidth = false,
+    overflow = "wrap",
+    valueTitle,
+    divided = true,
+    wideLabel = false,
+    emphasized = false,
+    valueClassName,
+  } = props;
+
+  const clipped = overflow !== "wrap";
+  const spansRow = fullWidth || overflow === "clamp";
+
+  return (
+    <div
+      className={cn(
+        "grid items-baseline gap-x-3 gap-y-1",
+        // The wide label column grows with the card, never with the rows shown, so Show all never shifts it.
+        wideLabel ? "grid-cols-[minmax(8rem,40%)_minmax(0,1fr)]" : "grid-cols-[minmax(0,7rem)_minmax(0,1fr)]",
+        divided ? "border-t border-muted-border/50 py-1.5 first:border-t-0" : "py-1",
+      )}
+    >
+      <dt className={cn("flex min-w-0 items-baseline gap-1.5 text-muted-foreground", spansRow && "col-span-2")}>
+        {Icon && <Icon aria-hidden className="size-3 shrink-0 self-center" />}
+        {labelPrefix}
+        {overflow === "truncate" ? (
+          <TruncateTooltip text={label} className="typography-tiny min-w-0 truncate first-letter:uppercase" />
+        ) : (
+          <span className="typography-tiny min-w-0 break-words first-letter:uppercase">{label}</span>
+        )}
+      </dt>
+      <dd
+        className={cn(
+          emphasized ? "typography-tiny-medium" : "typography-tiny",
+          "min-w-0 text-default-foreground",
+          overflow === "wrap" && "break-words",
+          spansRow && "col-span-2",
+          valueClassName,
+        )}
+      >
+        {clipped && valueTitle !== undefined ? (
+          <TruncateTooltip
+            text={valueTitle}
+            className={cn("block min-w-0", overflow === "truncate" ? "truncate" : "line-clamp-4 break-words")}
+          >
+            {children}
+          </TruncateTooltip>
+        ) : (
+          children
+        )}
+      </dd>
+    </div>
+  );
+}
+
+export type NodePropertyExpanderProps = { expanded: boolean; collapsedLabel: string; onToggle: () => void };
+
+export function NodePropertyExpander(props: NodePropertyExpanderProps) {
+  const { expanded, collapsedLabel, onToggle } = props;
+
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-expanded={expanded}
+      className="nodrag flex items-center gap-1 pt-1.5 typography-tiny-medium text-muted-foreground hover:text-default-foreground"
+    >
+      {expanded ? <ChevronDown size={11} className="shrink-0" /> : <ChevronRight size={11} className="shrink-0" />}
+      {expanded ? "Show less" : collapsedLabel}
+    </button>
+  );
+}

package/src/graph/property-formatters.ts

@@ -135,6 +135,10 @@ function humanizeToken(value: string): string {
   return value;
 }
 
+export function isIsoDateTime(value: string): boolean {
+  return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value);
+}
+
 export function formatDisplayValue(
   value: string,
   options?: {
@@ -162,7 +166,7 @@ export function formatDisplayValue(
 
   if (combinedLabel.includes("currency")) return value;
 
-  if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value)) {
+  if (isIsoDateTime(value)) {
     const date = parseISO(value);
 
     if (isValid(date)) return format(date, "MMM d, yyyy");