@manta-eu/react 0.1.0

package/dist/graph/graph-layout.js

@@ -0,0 +1,226 @@
+import dagre from "@dagrejs/dagre";
+import { match } from "ts-pattern";
+import { getNodeCategory, NodeCategory, RelationshipType } from "./themes.js";
+const nodeWidth = 320;
+const nodeHeight = 200;
+const gridThreshold = 5;
+const gridGap = 60;
+const overlapPadding = 80;
+const targetCategoryToRelationship = {
+    [NodeCategory.Campaign]: RelationshipType.AdSetToCampaign,
+    [NodeCategory.AdSet]: RelationshipType.AdToAdSet,
+    [NodeCategory.Ad]: RelationshipType.CreativeToAd,
+    [NodeCategory.Creative]: RelationshipType.ProductToCreative,
+    [NodeCategory.Product]: RelationshipType.ProductToCreative,
+};
+export function detectRelationshipType(sourceType, targetType) {
+    const sourceCategory = getNodeCategory(sourceType);
+    const targetCategory = getNodeCategory(targetType);
+    return match([sourceCategory, targetCategory])
+        .with([NodeCategory.Prompt, NodeCategory.Creative], () => RelationshipType.PromptToCreative)
+        .with([NodeCategory.Product, NodeCategory.Creative], () => RelationshipType.ProductToCreative)
+        .with([NodeCategory.Creative, NodeCategory.Ad], () => RelationshipType.CreativeToAd)
+        .with([NodeCategory.Ad, NodeCategory.AdSet], () => RelationshipType.AdToAdSet)
+        .with([NodeCategory.AdSet, NodeCategory.Campaign], () => RelationshipType.AdSetToCampaign)
+        .otherwise(() => targetCategoryToRelationship[targetCategory] ??
+        targetCategoryToRelationship[sourceCategory] ??
+        RelationshipType.Generic);
+}
+export function getNodeDimensions(entityType) {
+    const category = getNodeCategory(entityType);
+    return match(category)
+        .with(NodeCategory.Ad, () => ({ width: 220, height: 480 }))
+        .with(NodeCategory.Creative, () => ({ width: 210, height: 340 }))
+        .with(NodeCategory.Product, () => ({ width: 120, height: 160 }))
+        .otherwise(() => ({ width: 320, height: 200 }));
+}
+export function applyDagreLayout(nodes, edges, direction = "LR", options) {
+    const g = new dagre.graphlib.Graph();
+    const layoutWidth = options?.nodeDimensions?.width ?? nodeWidth;
+    const layoutHeight = options?.nodeDimensions?.height ?? nodeHeight;
+    const ranksep = options?.ranksep ?? (nodes.length <= 5 ? 300 : nodes.length <= 10 ? 350 : 400);
+    const nodesep = options?.nodesep ?? (nodes.length <= 5 ? 80 : nodes.length <= 10 ? 150 : 200);
+    g.setGraph({
+        rankdir: direction,
+        nodesep,
+        ranksep,
+        edgesep: 80,
+        ranker: "network-simplex",
+        acyclicer: "greedy",
+        align: "UL",
+    });
+    g.setDefaultEdgeLabel(() => ({}));
+    for (const node of nodes) {
+        const dims = options?.nodeDimensions
+            ? { width: layoutWidth, height: layoutHeight }
+            : getNodeDimensions(node.data.type);
+        g.setNode(node.id, { width: dims.width, height: dims.height });
+    }
+    for (const edge of edges) {
+        g.setEdge(edge.source, edge.target);
+    }
+    dagre.layout(g);
+    const layoutedNodes = nodes.map((node) => {
+        const pos = g.node(node.id);
+        const dims = options?.nodeDimensions
+            ? { width: layoutWidth, height: layoutHeight }
+            : getNodeDimensions(node.data.type);
+        return {
+            ...node,
+            position: {
+                x: pos.x - dims.width / 2,
+                y: pos.y - dims.height / 2,
+            },
+        };
+    });
+    const gridResult = applyGridToFanOutRanks(layoutedNodes, direction);
+    return resolveNodeOverlaps(gridResult);
+}
+function applyGridToFanOutRanks(nodes, direction) {
+    const isLR = direction === "LR";
+    const rankTolerance = 50;
+    const rankGroups = new Map();
+    for (const node of nodes) {
+        const rankPos = isLR ? node.position.x : node.position.y;
+        const key = Math.round(rankPos / rankTolerance) * rankTolerance;
+        const group = rankGroups.get(key) ?? [];
+        group.push(node);
+        rankGroups.set(key, group);
+    }
+    const updatedPositions = new Map();
+    for (const [, group] of rankGroups) {
+        if (group.length <= gridThreshold)
+            continue;
+        const maxWidth = Math.max(...group.map((n) => getNodeDimensions(n.data.type).width));
+        const maxHeight = Math.max(...group.map((n) => getNodeDimensions(n.data.type).height));
+        const xCell = maxWidth + gridGap;
+        const yCell = maxHeight + gridGap;
+        let xCount;
+        let yCount;
+        const targetRows = 4;
+        if (isLR) {
+            yCount = Math.min(targetRows, group.length);
+            xCount = Math.ceil(group.length / yCount);
+        }
+        else {
+            xCount = Math.min(targetRows, group.length);
+            yCount = Math.ceil(group.length / xCount);
+        }
+        const xSpan = (xCount - 1) * xCell;
+        const ySpan = (yCount - 1) * yCell;
+        const xCenter = group.reduce((sum, n) => sum + n.position.x, 0) / group.length;
+        const yCenter = group.reduce((sum, n) => sum + n.position.y, 0) / group.length;
+        for (let i = 0; i < group.length; i++) {
+            const node = group[i];
+            if (!node)
+                continue;
+            let col;
+            let row;
+            if (isLR) {
+                col = i % xCount;
+                row = Math.floor(i / xCount);
+            }
+            else {
+                row = i % yCount;
+                col = Math.floor(i / yCount);
+            }
+            updatedPositions.set(node.id, {
+                x: xCenter + col * xCell - xSpan / 2,
+                y: yCenter + row * yCell - ySpan / 2,
+            });
+        }
+    }
+    if (updatedPositions.size === 0)
+        return nodes;
+    return nodes.map((node) => {
+        const newPos = updatedPositions.get(node.id);
+        if (!newPos)
+            return node;
+        return { ...node, position: newPos };
+    });
+}
+function resolveNodeOverlaps(nodes) {
+    if (nodes.length <= 1)
+        return nodes;
+    const positions = new Map(nodes.map((n) => [n.id, { x: n.position.x, y: n.position.y }]));
+    const maxIterations = 50;
+    for (let iter = 0; iter < maxIterations; iter++) {
+        let moved = false;
+        for (let i = 0; i < nodes.length; i++) {
+            for (let j = i + 1; j < nodes.length; j++) {
+                const idA = nodes[i]?.id;
+                const idB = nodes[j]?.id;
+                if (!idA || !idB)
+                    continue;
+                const posA = positions.get(idA);
+                const posB = positions.get(idB);
+                if (!posA || !posB)
+                    continue;
+                const dimsA = getNodeDimensions(nodes[i]?.data.type);
+                const dimsB = getNodeDimensions(nodes[j]?.data.type);
+                const minDistX = Math.max(dimsA.width, dimsB.width) + overlapPadding;
+                const minDistY = Math.max(dimsA.height, dimsB.height) + overlapPadding;
+                const dx = posB.x - posA.x;
+                const dy = posB.y - posA.y;
+                const overlapX = minDistX - Math.abs(dx);
+                const overlapY = minDistY - Math.abs(dy);
+                if (overlapX > 0 && overlapY > 0) {
+                    moved = true;
+                    if (overlapX < overlapY) {
+                        const push = overlapX / 2 + 1;
+                        if (dx >= 0) {
+                            posA.x -= push;
+                            posB.x += push;
+                        }
+                        else {
+                            posA.x += push;
+                            posB.x -= push;
+                        }
+                    }
+                    else {
+                        const push = overlapY / 2 + 1;
+                        if (dy >= 0) {
+                            posA.y -= push;
+                            posB.y += push;
+                        }
+                        else {
+                            posA.y += push;
+                            posB.y -= push;
+                        }
+                    }
+                }
+            }
+        }
+        if (!moved)
+            break;
+    }
+    return nodes.map((node) => ({
+        ...node,
+        position: positions.get(node.id) ?? node.position,
+    }));
+}
+export function computeEdgeSiblingIndices(edges) {
+    const targetGroups = new Map();
+    for (const edge of edges) {
+        const key = edge.target;
+        const group = targetGroups.get(key) ?? [];
+        group.push(edge);
+        targetGroups.set(key, group);
+    }
+    for (const group of targetGroups.values()) {
+        for (let i = 0; i < group.length; i++) {
+            const edge = group[i];
+            if (!edge?.data)
+                continue;
+            edge.data.edgeIndex = i;
+            edge.data.edgeSiblingCount = group.length;
+        }
+    }
+}
+export function computeHubThreshold(connectionCounts) {
+    const counts = Array.from(connectionCounts.values()).sort((a, b) => a - b);
+    if (counts.length < 3)
+        return Infinity;
+    const median = counts[Math.floor(counts.length / 2)] ?? 1;
+    return Math.max(median * 3, 6);
+}

package/dist/graph/graph-list-utils.d.ts

@@ -0,0 +1,52 @@
+import type { PropertyChangeType } from "../lib/iri-labels.js";
+import type { NodeProperty, RDFNode } from "./types.js";
+export declare const listPageSize = 25;
+export type FlattenedRow = {
+    node: RDFNode;
+    depth: number;
+};
+export declare function flattenVisibleRows(args: {
+    nodes: RDFNode[];
+    parentChildMap: Map<string, string[]>;
+    collapsedNodeIds: Set<string>;
+}): FlattenedRow[];
+export type NodePropertyChange = {
+    predicate: string;
+    predicateLabel?: string | null;
+    object: string;
+    objectLabel?: string | null;
+    beforeObject?: string | null;
+    beforeObjectLabel?: string | null;
+    changeType: PropertyChangeType;
+    valueScale?: number;
+};
+export type NodePropertyPreview = {
+    id: string;
+    label: string;
+    value: string;
+    changeType?: PropertyChangeType;
+    rawValue?: string;
+    currentValue?: string;
+    previousValue?: string | null;
+    currentRawValue?: string;
+    previousRawValue?: string | null;
+    isHighlighted?: boolean;
+};
+export type PreviewFieldHints = {
+    highlightPredicate?: string;
+    priorityPredicates?: string[];
+};
+export declare function normalizePredicateKey(value: string): string;
+export declare function isDisplayablePreviewKey(key: string): boolean;
+export type PriorityPreviewFieldsOptions = {
+    limit?: number;
+    keepUnmatched?: boolean;
+};
+export declare function selectPriorityPreviewFields(properties: NodeProperty[], hints: PreviewFieldHints, currencyCode?: string | null, options?: PriorityPreviewFieldsOptions): NodePropertyPreview[];
+export declare function previewFieldPriority(label: string, predicate: string): number;
+export declare function shouldHidePreviewField(label: string, predicate: string): boolean;
+export declare function getCurrencyCode(changes: NodePropertyChange[], properties: NodeProperty[]): string | null;
+export declare function buildPreviewFields(queryProperties: NodePropertyChange[], localProperties: NodeProperty[], currencyCode: string | null, localStatusValue?: string): NodePropertyPreview[];
+export declare function isStatusField(field: NodePropertyPreview): boolean;
+export declare function getStatusPillColor(value: string): string;
+//# sourceMappingURL=graph-list-utils.d.ts.map

package/dist/graph/graph-list-utils.d.ts.map

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

package/dist/graph/graph-list-utils.js

@@ -0,0 +1,328 @@
+import { getAllDescendants } from "./graph-utils.js";
+import { formatDisplayValue, normalizeCurrencyCode } from "./property-formatters.js";
+export const listPageSize = 25;
+const collator = new Intl.Collator();
+export function flattenVisibleRows(args) {
+    const { nodes, parentChildMap, collapsedNodeIds } = args;
+    const nodeMap = new Map(nodes.map((node) => [node.id, node]));
+    const labelById = new Map(nodes.map((node) => [node.id, node.data.label ?? ""]));
+    const byLabel = (left, right) => collator.compare(labelById.get(left) ?? "", labelById.get(right) ?? "");
+    const sortedNodeIds = nodes.map((node) => node.id).sort(byLabel);
+    const rows = [];
+    const visited = new Set();
+    function visit(nodeId, depth) {
+        if (visited.has(nodeId))
+            return;
+        const node = nodeMap.get(nodeId);
+        if (!node)
+            return;
+        visited.add(nodeId);
+        rows.push({ node, depth });
+        if (collapsedNodeIds.has(nodeId))
+            return;
+        for (const childId of [...(parentChildMap.get(nodeId) ?? [])].sort(byLabel)) {
+            visit(childId, depth + 1);
+        }
+    }
+    const rootIds = sortedNodeIds.filter((id) => {
+        const parentId = nodeMap.get(id)?.data.parentId;
+        return !parentId || !nodeMap.has(parentId);
+    });
+    for (const rootId of rootIds) {
+        visit(rootId, 0);
+    }
+    const hiddenByCollapse = new Set();
+    for (const collapsedId of collapsedNodeIds) {
+        for (const descendant of getAllDescendants(collapsedId, parentChildMap)) {
+            hiddenByCollapse.add(descendant);
+        }
+    }
+    for (const nodeId of sortedNodeIds) {
+        if (hiddenByCollapse.has(nodeId))
+            continue;
+        visit(nodeId, 0);
+    }
+    return rows;
+}
+const maxPreviewFields = 4;
+export function normalizePredicateKey(value) {
+    return (value.split(/[#/:]/).pop() ?? "").replace(/[^a-z0-9]/gi, "").toLowerCase();
+}
+export function isDisplayablePreviewKey(key) {
+    return !/label|name|image|url|identifier/i.test(key);
+}
+export function selectPriorityPreviewFields(properties, hints, currencyCode = null, options = {}) {
+    const { limit = maxPreviewFields, keepUnmatched = false } = options;
+    const highlight = hints.highlightPredicate ? normalizePredicateKey(hints.highlightPredicate) : undefined;
+    const rankByKey = new Map();
+    for (const [index, predicate] of (hints.priorityPredicates ?? []).entries()) {
+        const normalized = normalizePredicateKey(predicate);
+        if (!rankByKey.has(normalized)) {
+            rankByKey.set(normalized, index + 1);
+        }
+    }
+    const rankOf = (key) => {
+        const normalized = normalizePredicateKey(key);
+        if (highlight && normalized === highlight)
+            return 0;
+        return rankByKey.get(normalized) ?? Number.POSITIVE_INFINITY;
+    };
+    return properties
+        .filter((property) => isDisplayablePreviewKey(property.key))
+        .map((property, index) => ({ property, index, rank: rankOf(property.key) }))
+        .filter((entry) => keepUnmatched || Number.isFinite(entry.rank))
+        .sort((left, right) => left.rank - right.rank || left.index - right.index)
+        .slice(0, limit)
+        .map(({ property, index, rank }) => {
+        const value = formatDisplayValue(String(property.value), {
+            predicate: property.iri ?? property.key,
+            predicateLabel: property.key,
+            currencyCode,
+            valueScale: property.valueScale,
+        });
+        return {
+            id: `${property.key}-${index}`,
+            label: property.label ?? propertyLabelFromKey(property.key),
+            value,
+            rawValue: String(property.value),
+            currentValue: value,
+            previousValue: null,
+            currentRawValue: String(property.value),
+            previousRawValue: null,
+            isHighlighted: rank === 0,
+        };
+    });
+}
+function propertyLabelFromKey(key) {
+    return (key
+        .split(/[#/]/)
+        .pop()
+        ?.replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/_/g, " ")
+        .replace(/\b\w/g, (letter) => letter.toUpperCase()) ?? key);
+}
+export function previewFieldPriority(label, predicate) {
+    const combined = `${label} ${predicate}`.toLowerCase();
+    if (combined.includes("status"))
+        return 100;
+    if (combined.includes("daily budget"))
+        return 95;
+    if (combined.includes("budget"))
+        return 90;
+    if (combined.includes("wasted spend"))
+        return 88;
+    if (combined.includes("expected revenue"))
+        return 86;
+    if (combined.includes("revenue"))
+        return 84;
+    if (combined.includes("current roas"))
+        return 80;
+    if (combined.includes("roas"))
+        return 75;
+    if (combined.includes("archive reason"))
+        return 70;
+    if (combined.includes("objective"))
+        return 60;
+    if (combined.includes("spend"))
+        return 55;
+    if (combined.includes("return"))
+        return 50;
+    return 0;
+}
+export function shouldHidePreviewField(label, predicate) {
+    return /conversion specs|action shape|conversion id|action type/i.test(`${label} ${predicate}`);
+}
+function isStatusProperty(property) {
+    const combined = `${property.predicateLabel ?? ""} ${property.predicate}`.toLowerCase();
+    return combined.includes("status");
+}
+export function getCurrencyCode(changes, properties) {
+    const changedCurrency = changes.find((property) => {
+        const combined = `${property.predicateLabel ?? ""} ${property.predicate}`.toLowerCase();
+        return combined.includes("currency");
+    });
+    if (changedCurrency) {
+        return normalizeCurrencyCode(changedCurrency.objectLabel ?? changedCurrency.object);
+    }
+    const localCurrency = properties.find((property) => property.key.toLowerCase().includes("currency"));
+    return normalizeCurrencyCode(localCurrency?.value);
+}
+function buildChangedPreviewFields(changes, currencyCode) {
+    return changes
+        .filter((property) => property.changeType !== "UNCHANGED")
+        .map((property) => {
+        const label = property.predicateLabel || propertyLabelFromKey(property.predicate);
+        return { property, label, priority: previewFieldPriority(label, property.predicate) };
+    })
+        .filter((entry) => !shouldHidePreviewField(entry.label, entry.property.predicate))
+        .sort((left, right) => right.priority - left.priority || collator.compare(left.label, right.label))
+        .slice(0, maxPreviewFields)
+        .map(({ property, label }) => {
+        const currentValue = formatDisplayValue(property.objectLabel || property.object, {
+            predicate: property.predicate,
+            predicateLabel: property.predicateLabel,
+            currencyCode,
+            valueScale: property.valueScale,
+        });
+        const previousValue = property.changeType === "UPDATED" && property.beforeObject != null
+            ? formatDisplayValue(property.beforeObjectLabel || property.beforeObject, {
+                predicate: property.predicate,
+                predicateLabel: property.predicateLabel,
+                currencyCode,
+                valueScale: property.valueScale,
+            })
+            : null;
+        return {
+            id: `${property.predicate}-${property.object}`,
+            label,
+            value: previousValue ? `${previousValue} -> ${currentValue}` : currentValue,
+            changeType: property.changeType,
+            rawValue: property.objectLabel || property.object,
+            currentValue,
+            previousValue,
+            currentRawValue: property.objectLabel || property.object,
+            previousRawValue: property.beforeObjectLabel || property.beforeObject,
+        };
+    });
+}
+function buildFallbackPreviewFields(properties, currencyCode) {
+    const ranked = properties
+        .filter((property) => !/label|image|url/i.test(property.key) && !shouldHidePreviewField(property.key, property.key))
+        .map((property) => {
+        const label = property.label ?? propertyLabelFromKey(property.key);
+        return {
+            property,
+            label,
+            priority: previewFieldPriority(label, property.key),
+        };
+    })
+        .sort((left, right) => right.priority - left.priority || collator.compare(left.label, right.label))
+        .slice(0, maxPreviewFields);
+    return ranked.map(({ property, label }) => {
+        const value = formatDisplayValue(String(property.value), {
+            predicate: property.iri ?? property.key,
+            predicateLabel: property.key,
+            currencyCode,
+            valueScale: property.valueScale,
+        });
+        return {
+            id: `${property.key}-${property.value}`,
+            label,
+            value,
+            rawValue: String(property.value),
+            currentValue: value,
+            previousValue: null,
+            currentRawValue: String(property.value),
+            previousRawValue: null,
+        };
+    });
+}
+function buildFallbackPreviewFieldsFromQueryProperties(properties, currencyCode) {
+    const ranked = properties
+        .map((property) => {
+        const label = property.predicateLabel || propertyLabelFromKey(property.predicate);
+        return {
+            property,
+            label,
+            priority: previewFieldPriority(label, property.predicate),
+        };
+    })
+        .filter(({ label, property }) => !/image|url/i.test(`${label} ${property.predicate}`) && !shouldHidePreviewField(label, property.predicate))
+        .sort((left, right) => right.priority - left.priority || collator.compare(left.label, right.label))
+        .slice(0, maxPreviewFields);
+    return ranked.map(({ property, label }) => {
+        const currentValue = formatDisplayValue(property.objectLabel || property.object, {
+            predicate: property.predicate,
+            predicateLabel: property.predicateLabel,
+            currencyCode,
+            valueScale: property.valueScale,
+        });
+        return {
+            id: `${property.predicate}-${property.object}`,
+            label,
+            value: currentValue,
+            rawValue: property.objectLabel || property.object,
+            currentValue,
+            previousValue: null,
+            currentRawValue: property.objectLabel || property.object,
+            previousRawValue: null,
+        };
+    });
+}
+function buildStatusPreviewField(queryProperties, localStatusValue) {
+    const statusProperties = queryProperties.filter(isStatusProperty);
+    const updatedStatus = statusProperties.find((property) => property.changeType === "UPDATED");
+    if (updatedStatus) {
+        const previousValue = formatDisplayValue(updatedStatus.beforeObjectLabel || updatedStatus.beforeObject || "");
+        const currentValue = formatDisplayValue(updatedStatus.objectLabel || updatedStatus.object);
+        return {
+            id: `status-${updatedStatus.predicate}`,
+            label: "Status",
+            value: `${previousValue} -> ${currentValue}`,
+            changeType: updatedStatus.changeType,
+            rawValue: updatedStatus.objectLabel || updatedStatus.object,
+            currentValue,
+            previousValue,
+            currentRawValue: updatedStatus.objectLabel || updatedStatus.object,
+            previousRawValue: updatedStatus.beforeObjectLabel || updatedStatus.beforeObject,
+        };
+    }
+    if (!localStatusValue)
+        return null;
+    const effectiveStatus = statusProperties.find((property) => {
+        const label = (property.predicateLabel || propertyLabelFromKey(property.predicate)).toLowerCase();
+        return label === "effective status";
+    });
+    const sourceStatus = effectiveStatus ?? statusProperties[0];
+    if (!sourceStatus)
+        return null;
+    const currentStatus = formatDisplayValue(sourceStatus.objectLabel || sourceStatus.object);
+    const nextStatus = formatDisplayValue(localStatusValue);
+    if (currentStatus.toLowerCase() === nextStatus.toLowerCase()) {
+        return null;
+    }
+    return {
+        id: `status-${sourceStatus.predicate}`,
+        label: "Status",
+        value: `${currentStatus} -> ${nextStatus}`,
+        changeType: "UPDATED",
+        rawValue: localStatusValue,
+        currentValue: nextStatus,
+        previousValue: currentStatus,
+        currentRawValue: localStatusValue,
+        previousRawValue: sourceStatus.objectLabel || sourceStatus.object,
+    };
+}
+export function buildPreviewFields(queryProperties, localProperties, currencyCode, localStatusValue) {
+    const statusPreview = buildStatusPreviewField(queryProperties, localStatusValue);
+    const nonStatusQueryProperties = queryProperties.filter((property) => !isStatusProperty(property));
+    const changedPreview = buildChangedPreviewFields(nonStatusQueryProperties, currencyCode);
+    const fallbackPreview = nonStatusQueryProperties.length > 0
+        ? buildFallbackPreviewFieldsFromQueryProperties(nonStatusQueryProperties, currencyCode)
+        : buildFallbackPreviewFields(localProperties, currencyCode);
+    const merged = [];
+    const seenLabels = new Set();
+    for (const field of [statusPreview, ...changedPreview, ...fallbackPreview].filter(Boolean)) {
+        const key = field.label.toLowerCase();
+        if (seenLabels.has(key))
+            continue;
+        merged.push(field);
+        seenLabels.add(key);
+        if (merged.length >= maxPreviewFields)
+            break;
+    }
+    return merged;
+}
+export function isStatusField(field) {
+    return field.label.toLowerCase().includes("status");
+}
+export function getStatusPillColor(value) {
+    const v = value.toLowerCase();
+    if (["active", "enabled", "serving"].includes(v))
+        return "bg-success text-success-foreground";
+    if (["paused", "pending", "draft"].includes(v))
+        return "bg-warning text-warning-foreground";
+    if (["removed", "error", "deleted"].includes(v))
+        return "bg-error text-error-foreground";
+    return "bg-accent text-muted-foreground";
+}

package/dist/graph/graph-model.d.ts

@@ -0,0 +1,6 @@
+import type { RdfGraph } from "../lib/rdf-helpers.js";
+import { type NodesAndEdges } from "./graph-utils.js";
+import type { LayoutDirection } from "./types.js";
+export declare function rdfGraphToNodesAndEdges(graph: RdfGraph, granularity?: "subject" | "subject-object", direction?: LayoutDirection): NodesAndEdges;
+export declare function rdfGraphToSummaryNodesAndEdges(graph: RdfGraph, direction?: LayoutDirection): NodesAndEdges;
+//# sourceMappingURL=graph-model.d.ts.map

package/dist/graph/graph-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-model.d.ts","sourceRoot":"","sources":["../../src/graph/graph-model.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAOnD,OAAO,EAAyB,KAAK,aAAa,EAA4B,MAAM,eAAe,CAAC;AAGpG,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,SAAS,CAAC;AA0StE,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,QAAQ,EACf,WAAW,GAAE,SAAS,GAAG,gBAA4B,EACrD,SAAS,GAAE,eAAsB,GAChC,aAAa,CA2Ff;AAED,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,GAAE,eAAsB,GAAG,aAAa,CAkIhH"}