@manta-eu/react 0.1.10 → 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/table-skeleton/index.tsx

@@ -9,14 +9,19 @@ export type TableSkeletonProps = {
   renderRow: (rowIndex: number) => ReactNode;
   withWrapper?: boolean;
   className?: string;
+  headerClassName?: string;
+  rowClassName?: string;
 };
 
 export function TableSkeleton(props: TableSkeletonProps) {
   const { gridColsClassName, headerColumnCount, rows = 8, renderRow, withWrapper = true, className } = props;
+  const { headerClassName, rowClassName } = props;
 
   const content = (
     <>
-      <div className={cn("grid gap-3 border-b border-muted-border bg-faint px-4 py-3", gridColsClassName)}>
+      <div
+        className={cn("grid gap-3 border-b border-muted-border bg-faint px-4 py-3", gridColsClassName, headerClassName)}
+      >
         {Array.from({ length: headerColumnCount }, (_, index) => (
           <Skeleton key={`table-skeleton-header-${index}`} className="h-4 w-2/3 rounded-md" />
         ))}
@@ -27,6 +32,7 @@ export function TableSkeleton(props: TableSkeletonProps) {
           className={cn(
             "grid items-center gap-3 border-b border-muted-border px-4 py-4 last:border-b-0",
             gridColsClassName,
+            rowClassName,
           )}
         >
           {renderRow(rowIndex)}

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/createNodeRouter.tsx

@@ -12,7 +12,7 @@ import { AttioNoteView } from "./nodes/AttioNoteView";
 import { AttioTaskView } from "./nodes/AttioTaskView";
 import { BrandAssetAnalysisActionView } from "./nodes/BrandAssetAnalysisActionView";
 import { BrandAssetAnalysisView } from "./nodes/BrandAssetAnalysisView";
-import { BrandFontFamilyView } from "./nodes/BrandFontFamilyView";
+import { BrandFontSuggestionView } from "./nodes/BrandFontSuggestionView";
 import { BrandGuidelinesView } from "./nodes/BrandGuidelinesView";
 import { CoresignalCompanyView } from "./nodes/CoresignalCompanyView";
 import { CoresignalEmployeeView } from "./nodes/CoresignalEmployeeView";
@@ -123,7 +123,7 @@ const typedNodeEntries: ReadonlyArray<readonly [IRI, EntityView]> = [
   // Asserted by a Datalog rule, not by a node shape, so codegen emits no class term for it.
   [expandPrefix("brand:AssetAnalysis"), BrandAssetAnalysisView],
   [brand.BrandGuidelines, BrandGuidelinesView],
-  [brand.FontFamily, BrandFontFamilyView],
+  [brand.FontSuggestion, BrandFontSuggestionView],
 ];
 
 export const typedEntityTypeIris: ReadonlySet<IRI> = new Set(typedNodeEntries.map(([type]) => type as IRI));
@@ -135,7 +135,7 @@ export const diffSubsumingViewIris: ReadonlySet<IRI> = new Set([
   expandPrefix("brand:AssetAnalysisShape"),
   expandPrefix("brand:AssetAnalysis"),
   brand.BrandGuidelines,
-  brand.FontFamily,
+  brand.FontSuggestion,
 ]);
 
 export const typedActionShapeIris: ReadonlySet<IRI> = new Set(actionShapeNodeEntries.map(([iri]) => iri));

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/{BrandFontFamilyView.tsx → BrandFontSuggestionView.tsx}

@@ -1,4 +1,4 @@
-import { BrandFontFileSchema } from "@manta-eu/ldo";
+import { BrandFontFileSchema, BrandSuggestedWeightSchema } from "@manta-eu/ldo";
 import { redirectPath } from "@manta-eu/ldo/redirect-queries";
 import { isPresent } from "@manta-eu/lib/present";
 import { namespaces } from "@manta-eu/rdf-lib/namespaces";
@@ -8,11 +8,13 @@ import type { EntityViewProps } from "../types";
 import {
   fontFaceDescriptors,
   preferredFontFile,
+  sortedWeights,
   specimenWeight,
+  weightLabel,
   type StoredFontFile,
+  type SuggestedWeight,
 } from "./brand-font";
 import { BrandNodeBody, BrandStatusBadge } from "./brand-shared";
-import { BrandFontUploadButton } from "./BrandFontUploadButton";
 import { EntityCardShell } from "./EntityCardShell";
 import { NodePropertyTable } from "./NodePropertyTable";
 import { readBrandString, toIriArray } from "./typed-node-helpers";
@@ -20,11 +22,27 @@ import { useEntitiesByIris } from "#hooks/use-entity";
 import { useFontFace } from "#hooks/use-font-face";
 import { useRedirectEndpoint } from "#hooks/use-redirect-endpoint";
 
-const statusPredicate = `${namespaces.brand}entryStatus`;
-const availabilityPredicate = `${namespaces.brand}fontAvailability`;
-const fontFilePredicate = `${namespaces.brand}fontFile`;
+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[] {
+  const { data } = useEntitiesByIris({ schema: BrandSuggestedWeightSchema, iris });
+
+  return (data ?? []).flatMap((weight) =>
+    weight
+      ? [
+          {
+            weight: weight.fontWeight,
+            style: weight.fontStyle,
+            availability: weight.fontAvailability,
+            coveringFiles: weight.coveringFile ?? [],
+          },
+        ]
+      : [],
+  );
+}
+
 function useStoredFontFiles(iris: string[]): StoredFontFile[] {
   const { data } = useEntitiesByIris({ schema: BrandFontFileSchema, iris });
 
@@ -69,47 +87,43 @@ function FontSpecimen(props: FontSpecimenProps) {
   );
 }
 
-export const BrandFontFamilyView = memo(function BrandFontFamilyView(props: EntityViewProps) {
+export const BrandFontSuggestionView = memo(function BrandFontSuggestionView(props: EntityViewProps) {
   const { data, selected = false, ringColor, onContextMenu } = props;
 
   const family = readBrandString(data.jsonLd, "family") ?? data.label;
-  const status = readBrandString(data.jsonLd, "entryStatus");
-  const availability = readBrandString(data.jsonLd, "fontAvailability");
-  const fileIris = toIriArray(data.jsonLd[fontFilePredicate] ?? data.jsonLd["brand:fontFile"]);
-  const file = preferredFontFile(useStoredFontFiles(fileIris));
+  const weights = sortedWeights(
+    useSuggestedWeights(toIriArray(data.jsonLd[weightPredicate] ?? data.jsonLd["brand:hasSuggestedWeight"])),
+  );
+  const file = preferredFontFile(useStoredFontFiles([...new Set(weights.flatMap((weight) => weight.coveringFiles))]));
 
   return (
     <EntityCardShell
       icon={Type}
-      label={`Font Family: ${family}`}
+      label={`Font Suggestion: ${family}`}
       labelMaxWidth="max-w-140"
       selected={selected}
       ringColor={ringColor}
       onContextMenu={onContextMenu}
     >
-      <BrandNodeBody
-        right={
-          <div className="flex items-center gap-1">
-            <BrandStatusBadge status={availability} />
-            <BrandStatusBadge status={status} />
-          </div>
-        }
-      >
+      <BrandNodeBody>
         {isPresent(file) && <FontSpecimen file={file} />}
 
-        {isPresent(availability) && availability !== "available" && (
-          <div className="flex items-center justify-between gap-2">
-            {availability === "needs-upload" && (
-              <span className="typography-tiny text-muted-foreground">No font file found for this family.</span>
-            )}
-            <BrandFontUploadButton family={family} />
-          </div>
+        {isPresent(weights) && (
+          <ul className="flex flex-col gap-1">
+            {weights.map((weight) => (
+              <li key={weightLabel(weight)} className="flex items-center justify-between gap-2">
+                <span className="typography-tiny text-default-foreground">{weightLabel(weight)}</span>
+                <BrandStatusBadge status={weight.availability} />
+              </li>
+            ))}
+          </ul>
         )}
 
         <NodePropertyTable
           properties={data.properties}
           jsonLd={data.jsonLd}
-          omitPredicates={[statusPredicate, availabilityPredicate]}
+          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/brand-font.ts

@@ -27,3 +27,20 @@ export function fontFaceDescriptors(file: StoredFontFile): FontFaceDescriptors {
 export function specimenWeight(file: StoredFontFile): number {
   return Math.min(Math.max(400, file.weightMin), file.weightMax);
 }
+
+export type SuggestedWeight = {
+  weight: number;
+  style: "normal" | "italic";
+  availability: "available" | "looking-up" | "needs-upload";
+  coveringFiles: readonly string[];
+};
+
+export function sortedWeights<W extends Pick<SuggestedWeight, "weight" | "style">>(weights: readonly W[]): W[] {
+  return [...weights].sort(
+    (a, b) => a.weight - b.weight || Number(a.style === "italic") - Number(b.style === "italic"),
+  );
+}
+
+export function weightLabel(weight: Pick<SuggestedWeight, "weight" | "style">): string {
+  return weight.style === "italic" ? `${weight.weight} italic` : `${weight.weight}`;
+}

package/src/graph/nodes/brand-shared.tsx

@@ -11,14 +11,11 @@ import { cn } from "#style";
 
 export const brandAmber = "#d97706";
 
-// Every `sh:in` value on the brand status paths in kgc/shacl/shapes/brand.ttl; an unlisted one means a shape moved on.
+// Every `sh:in` value of brand:fontAvailability in kgc/shacl/shapes/brand-font-suggestion.ttl.
 const toneByStatus = {
-  accepted: "positive",
   available: "positive",
-  draft: "neutral",
   "looking-up": "neutral",
   "needs-upload": "caution",
-  rejected: "negative",
 } as const satisfies Record<string, BadgeTone>;
 
 export type BrandStatus = keyof typeof toneByStatus;