@manta-eu/react 0.1.0

package/dist/graph/nodes/MetaAdSetView.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MetaAdSetWithCurrencySchema } from "@manta-eu/ldo";
+import { meta } from "@manta-eu/ldo/namespaces";
+import { Disc2, Globe, Infinity as InfinityIcon, Megaphone, PersonStanding, UserCog, Users, WalletMinimal, } from "lucide-react";
+import { memo } from "react";
+import { OpenInPlatformLink } from "../OpenInPlatformLink.js";
+import { formatTermCurrency } from "../property-formatters.js";
+import { EntityCardShell } from "./EntityCardShell.js";
+import { readEntityIri } from "./typed-node-helpers.js";
+import { useEntity } from "#hooks/use-entity";
+import { useOntologyTerm } from "#hooks/use-ontology-terms";
+const META_BRAND_COLOR = "#1877F2";
+function getProp(properties, ...keys) {
+    for (const key of keys) {
+        const match = properties.find((p) => p.key.toLowerCase().replace(/[^a-z0-9]/g, "") === key.toLowerCase().replace(/[^a-z0-9]/g, ""));
+        if (match)
+            return match.value;
+    }
+    return undefined;
+}
+export const MetaAdSetView = memo(function MetaAdSetView(props) {
+    const { data, selected = false, ringColor, onContextMenu } = props;
+    const iri = readEntityIri(data.jsonLd);
+    const { data: typed } = useEntity({ schema: MetaAdSetWithCurrencySchema, iri });
+    const currency = typed?.currency;
+    const optimizationGoal = typed?.optimizationGoal?.toString();
+    const dailyBudgetTerm = useOntologyTerm(meta.dailyBudget);
+    const dailyBudget = formatTermCurrency(typed?.dailyBudget, dailyBudgetTerm, currency);
+    const audience = getProp(data.properties, "audience_name", "audience_type", "audience");
+    const location = getProp(data.properties, "location", "country", "geo_targeting");
+    const gender = getProp(data.properties, "gender");
+    const ageMin = getProp(data.properties, "age_min", "ageMin");
+    const ageMax = getProp(data.properties, "age_max", "ageMax");
+    const genderAge = [gender, ageMin && ageMax ? `${ageMin}–${ageMax}` : undefined].filter(Boolean).join(" ");
+    const adCount = getProp(data.properties, "ad_count", "adCount");
+    const rows = [];
+    if (audience)
+        rows.push({ Icon: Users, text: audience });
+    if (location)
+        rows.push({ Icon: Globe, text: location });
+    if (genderAge)
+        rows.push({ Icon: PersonStanding, text: genderAge });
+    if (optimizationGoal)
+        rows.push({ Icon: UserCog, text: optimizationGoal });
+    if (dailyBudget)
+        rows.push({ Icon: WalletMinimal, text: `${dailyBudget} / day` });
+    if (adCount)
+        rows.push({ Icon: Megaphone, text: adCount });
+    return (_jsx(EntityCardShell, { icon: Disc2, label: `Ad Set: ${data.label}`, selected: selected, ringColor: ringColor, onContextMenu: onContextMenu, children: _jsxs("div", { className: "bg-muted rounded-md px-2.5 py-2 flex min-w-45 flex-col gap-1.25", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.25", children: [_jsx(InfinityIcon, { size: 11, className: "shrink-0", style: { color: META_BRAND_COLOR } }), _jsx("span", { className: "typography-tiny text-default-foreground whitespace-nowrap", children: "Meta" })] }), _jsx(OpenInPlatformLink, { iri: iri, schema: MetaAdSetWithCurrencySchema })] }), rows.map((r, idx) => (_jsxs("div", { className: "flex items-center gap-1.25", children: [_jsx(r.Icon, { size: 11, className: "text-muted-foreground shrink-0" }), _jsx("span", { className: "typography-tiny text-default-foreground whitespace-nowrap", children: r.text })] }, idx)))] }) }));
+});

package/dist/graph/nodes/MetaAdView.d.ts

@@ -0,0 +1,3 @@
+import type { EntityViewProps } from "../types.js";
+export declare const MetaAdView: import("react").NamedExoticComponent<EntityViewProps>;
+//# sourceMappingURL=MetaAdView.d.ts.map

package/dist/graph/nodes/MetaAdView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaAdView.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/MetaAdView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAKhD,eAAO,MAAM,UAAU,uDAmCrB,CAAC"}

package/dist/graph/nodes/MetaAdView.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MetaAdSchema } from "@manta-eu/ldo";
+import { memo } from "react";
+import { AdMockupCard, AdMockupHeader } from "./AdMockupCard.js";
+import { readEntityIri } from "./typed-node-helpers.js";
+import { useMetaAdPreviewModel } from "#ad-preview/use-meta-ad-preview";
+export const MetaAdView = memo(function MetaAdView(props) {
+    const { data, selected = false, ringColor, onContextMenu } = props;
+    const iri = readEntityIri(data.jsonLd);
+    const { adLabel, assetLists, callToAction, assetUrl, isError, isLoading } = useMetaAdPreviewModel(iri);
+    const firstBody = assetLists.find((list) => list.kind === "body")?.values[0];
+    if (isError || isLoading) {
+        return (_jsxs("div", { className: "w-fit flex flex-col items-start gap-1", onContextMenu: onContextMenu, children: [_jsx(AdMockupHeader, { label: data.label, iri: iri, schema: MetaAdSchema }), isError ? (_jsx("p", { className: "typography-tiny text-muted-foreground", children: "Couldn't load this ad." })) : (_jsx("div", { className: "w-72 aspect-2/3 rounded-[10px] bg-muted" }))] }));
+    }
+    return (_jsx(AdMockupCard, { label: data.label, brandName: adLabel ?? data.label, imageUrl: assetUrl, description: firstBody, ctaLabel: callToAction ?? "Shop Now", selected: selected, ringColor: ringColor, onContextMenu: onContextMenu, iri: iri, schema: MetaAdSchema }));
+});

package/dist/graph/nodes/MetaCampaignView.d.ts

@@ -0,0 +1,3 @@
+import type { EntityViewProps } from "../types.js";
+export declare const MetaCampaignView: import("react").NamedExoticComponent<EntityViewProps>;
+//# sourceMappingURL=MetaCampaignView.d.ts.map

package/dist/graph/nodes/MetaCampaignView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaCampaignView.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/MetaCampaignView.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AA0BhD,eAAO,MAAM,gBAAgB,uDAwF3B,CAAC"}

package/dist/graph/nodes/MetaCampaignView.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MetaCampaignWithCurrencySchema } from "@manta-eu/ldo";
+import { meta } from "@manta-eu/ldo/namespaces";
+import { CalendarArrowUp, Goal, Infinity as InfinityIcon, RefreshCw, Target, Wallet, } from "lucide-react";
+import { isNotNil } from "ramda";
+import { memo } from "react";
+import { OpenInPlatformLink } from "../OpenInPlatformLink.js";
+import { formatTermCurrency } from "../property-formatters.js";
+import { EntityCardShell } from "./EntityCardShell.js";
+import { formatBidStrategy, formatDate, getBuyingTypeDescriptor, getObjectiveDescriptor, metaBlue, statusColors, statusKey, statusLabel, } from "./meta-campaign-utils.js";
+import { readEntityIri } from "./typed-node-helpers.js";
+import { useEntity } from "#hooks/use-entity";
+import { useOntologyTerm } from "#hooks/use-ontology-terms";
+import { formatRelativeUpdated } from "#lib/format-date";
+function row(Icon, text) {
+    return {
+        icon: _jsx(Icon, { size: 11, className: "text-muted-foreground shrink-0" }),
+        text,
+    };
+}
+export const MetaCampaignView = memo(function MetaCampaignView(props) {
+    const { data, selected = false, ringColor, onContextMenu } = props;
+    const iri = readEntityIri(data.jsonLd);
+    const { data: typed } = useEntity({ schema: MetaCampaignWithCurrencySchema, iri });
+    const currency = typed?.currency;
+    const status = statusKey(typed?.status?.toString());
+    const statusDisplay = statusLabel(typed?.status?.toString());
+    const effectiveStatus = statusKey(typed?.effectiveStatus?.toString());
+    const effectiveStatusDisplay = statusLabel(typed?.effectiveStatus?.toString());
+    const statusColor = statusColors[status ?? ""] ?? "#6b7280";
+    const objective = getObjectiveDescriptor(typed?.objective?.toString());
+    const buyingType = getBuyingTypeDescriptor(typed?.buyingType?.toString());
+    const startDate = formatDate(typed?.startTime);
+    const endDate = formatDate(typed?.stopTime);
+    const dateRange = startDate && endDate ? `${startDate} → ${endDate}` : startDate ? `from ${startDate}` : endDate;
+    const bidStrategy = formatBidStrategy(typed?.bidStrategy?.toString());
+    const dailyTerm = useOntologyTerm(meta.dailyBudget);
+    const lifetimeTerm = useOntologyTerm(meta.lifetimeBudget);
+    const daily = typed?.dailyBudget && typed.dailyBudget > 0 ? typed.dailyBudget : undefined;
+    const lifetime = typed?.lifetimeBudget && typed.lifetimeBudget > 0 ? typed.lifetimeBudget : undefined;
+    const amount = daily !== undefined
+        ? formatTermCurrency(daily, dailyTerm, currency)
+        : formatTermCurrency(lifetime, lifetimeTerm, currency);
+    const budget = amount ? `${amount}${daily !== undefined ? " / day" : " lifetime"}` : undefined;
+    const updated = formatRelativeUpdated(typed?.dateModified);
+    const DateIcon = startDate && endDate ? RefreshCw : CalendarArrowUp;
+    const rows = [
+        objective ? row(objective.Icon, objective.label) : undefined,
+        buyingType ? row(buyingType.Icon, buyingType.label) : undefined,
+        bidStrategy ? row(Target, bidStrategy) : undefined,
+        dateRange ? row(DateIcon, dateRange) : undefined,
+        budget ? row(Wallet, budget) : undefined,
+    ].filter(isNotNil);
+    const displayName = typed?.label?.toString() ?? data.label;
+    return (_jsx(EntityCardShell, { icon: Goal, label: `Campaign: ${displayName}`, labelMaxWidth: "max-w-65", selected: selected, ringColor: ringColor, onContextMenu: onContextMenu, children: _jsxs("div", { className: "bg-muted rounded-md px-2.5 py-2 flex min-w-55 flex-col gap-1.25", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.25", children: [_jsx(InfinityIcon, { size: 11, className: "shrink-0", style: { color: metaBlue } }), _jsx("span", { className: "typography-tiny-semibold text-default-foreground whitespace-nowrap", children: "Meta Ads" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [statusDisplay && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "size-1.75 rounded-full shrink-0", style: { backgroundColor: statusColor } }), _jsxs("span", { className: "typography-tiny whitespace-nowrap", style: { color: statusColor }, children: [statusDisplay, effectiveStatusDisplay && effectiveStatus !== status ? ` · ${effectiveStatusDisplay}` : ""] })] })), _jsx(OpenInPlatformLink, { iri: iri, schema: MetaCampaignWithCurrencySchema })] })] }), rows.map((r, idx) => (_jsxs("div", { className: "flex items-center gap-1.25", children: [r.icon, _jsx("span", { className: "typography-tiny text-default-foreground whitespace-nowrap", children: r.text })] }, idx))), updated && (_jsx("div", { className: "flex items-center justify-end pt-0.5", children: _jsxs("span", { className: "typography-tiny text-muted-foreground whitespace-nowrap", children: ["Updated ", updated] }) }))] }) }));
+});

package/dist/graph/nodes/MetaInsightView.d.ts

@@ -0,0 +1,3 @@
+import type { EntityViewProps } from "../types.js";
+export declare const MetaInsightView: import("react").NamedExoticComponent<EntityViewProps>;
+//# sourceMappingURL=MetaInsightView.d.ts.map

package/dist/graph/nodes/MetaInsightView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaInsightView.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/MetaInsightView.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAUhD,eAAO,MAAM,eAAe,uDAoD1B,CAAC"}

package/dist/graph/nodes/MetaInsightView.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MetaInsightWithCurrencySchema } from "@manta-eu/ldo";
+import { meta } from "@manta-eu/ldo/namespaces";
+import { isPresent } from "@manta-eu/lib/present";
+import { ChartNoAxesColumn, Infinity as InfinityIcon } from "lucide-react";
+import { memo } from "react";
+import { formatNumber, formatPercentValue, formatTermCurrency } from "../property-formatters.js";
+import { EntityCardShell } from "./EntityCardShell.js";
+import { InsightNodeBody } from "./insight-shared.js";
+import { metaBlue } from "./meta-campaign-utils.js";
+import { MetricGrid, metric } from "./MetricGrid.js";
+import { readEntityIri } from "./typed-node-helpers.js";
+import { useEntity } from "#hooks/use-entity";
+import { useOntologyTerm } from "#hooks/use-ontology-terms";
+import { formatGraphDate } from "#lib/format-date";
+export const MetaInsightView = memo(function MetaInsightView(props) {
+    const { data, selected = false, ringColor, onContextMenu } = props;
+    const iri = readEntityIri(data.jsonLd);
+    const { data: typed } = useEntity({ schema: MetaInsightWithCurrencySchema, iri });
+    const currency = typed?.account?.currency;
+    const spendTerm = useOntologyTerm(meta.spendMicros);
+    const cpcTerm = useOntologyTerm(meta.cpcMicros);
+    const cpmTerm = useOntologyTerm(meta.cpmMicros);
+    const cppTerm = useOntologyTerm(meta.cppMicros);
+    const start = formatGraphDate(typed?.dateStart);
+    const stop = formatGraphDate(typed?.dateStop);
+    const period = isPresent(start) && isPresent(stop) ? (start === stop ? start : `${start} – ${stop}`) : (start ?? stop);
+    // Meta's ctr is already percent-scaled; formatPercent's rescaling heuristic would inflate sub-1% values 100x.
+    const glanceMetrics = [
+        metric("Impressions", formatNumber(typed?.impressions)),
+        metric("Clicks", formatNumber(typed?.clicks)),
+        metric("Spend", formatTermCurrency(typed?.spendMicros, spendTerm, currency)),
+        metric("CTR", isPresent(typed?.ctr) ? formatPercentValue(typed.ctr) : undefined),
+    ].filter((m) => isPresent(m));
+    const moreMetrics = [
+        metric("Reach", formatNumber(typed?.reach)),
+        metric("Frequency", formatNumber(typed?.frequency)),
+        metric("Unique clicks", formatNumber(typed?.uniqueClicks)),
+        metric("Link clicks", formatNumber(typed?.inlineLinkClicks)),
+        metric("Unique CTR", isPresent(typed?.uniqueCtr) ? formatPercentValue(typed.uniqueCtr) : undefined),
+        metric("CPC", formatTermCurrency(typed?.cpcMicros, cpcTerm, currency)),
+        metric("CPM", formatTermCurrency(typed?.cpmMicros, cpmTerm, currency)),
+        metric("CPP", formatTermCurrency(typed?.cppMicros, cppTerm, currency)),
+    ].filter((m) => isPresent(m));
+    return (_jsx(EntityCardShell, { icon: ChartNoAxesColumn, label: `Insight: ${period ?? data.label}`, labelMaxWidth: "max-w-80", selected: selected, ringColor: ringColor, onContextMenu: onContextMenu, children: _jsx(InsightNodeBody, { brandIcon: InfinityIcon, brandColor: metaBlue, brandLabel: "Meta Ads", children: (glanceMetrics.length > 0 || moreMetrics.length > 0) && (_jsx(MetricGrid, { metrics: glanceMetrics, moreMetrics: moreMetrics })) }) }));
+});

package/dist/graph/nodes/MetricGrid.d.ts

@@ -0,0 +1,12 @@
+export type Metric = {
+    label: string;
+    value: string;
+};
+export declare function metric(label: string, value: string | undefined): Metric | undefined;
+type MetricGridProps = {
+    metrics: Metric[];
+    moreMetrics?: Metric[];
+};
+export declare function MetricGrid(props: MetricGridProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MetricGrid.d.ts.map

package/dist/graph/nodes/MetricGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricGrid.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/MetricGrid.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAEnF;AAED,KAAK,eAAe,GAAG;IAAE,OAAO,EAAE,MAAM,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAGrE,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA8BhD"}

package/dist/graph/nodes/MetricGrid.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useState } from "react";
+export function metric(label, value) {
+    return isPresent(value) ? { label, value } : undefined;
+}
+// Mirrors NodePropertyTable's row grid so metric cards read like the record-detail field list.
+export function MetricGrid(props) {
+    const { metrics, moreMetrics = [] } = props;
+    const [expanded, setExpanded] = useState(false);
+    const visible = expanded ? [...metrics, ...moreMetrics] : metrics;
+    return (_jsxs("div", { className: "flex flex-col", children: [visible.map((m) => (_jsxs("div", { className: "grid grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-baseline gap-x-3 border-t border-muted-border/50 py-1.5 first:border-t-0 first:pt-0", children: [_jsx("span", { className: "typography-tiny min-w-0 break-words text-muted-foreground", children: m.label }), _jsx("span", { className: "typography-tiny min-w-0 break-words tabular-nums text-default-foreground", children: m.value })] }, m.label))), moreMetrics.length > 0 && (_jsxs("button", { type: "button", onClick: () => setExpanded((v) => !v), className: "nodrag flex items-center gap-1 pt-1.5 typography-tiny-medium text-muted-foreground hover:text-default-foreground", children: [expanded ? _jsx(ChevronDown, { size: 11, className: "shrink-0" }) : _jsx(ChevronRight, { size: 11, className: "shrink-0" }), expanded ? "Show less" : "Show more"] }))] }));
+}

package/dist/graph/nodes/NodePropertyTable.d.ts

@@ -0,0 +1,8 @@
+import type { NodeProperty } from "../types.js";
+export type NodePropertyTableProps = {
+    properties: NodeProperty[];
+    jsonLd?: Record<string, unknown>;
+    omitPredicates?: readonly string[];
+};
+export declare function NodePropertyTable(props: NodePropertyTableProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=NodePropertyTable.d.ts.map

package/dist/graph/nodes/NodePropertyTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodePropertyTable.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/NodePropertyTable.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAM7C,MAAM,MAAM,sBAAsB,GAAG;IACnC,UAAU,EAAE,YAAY,EAAE,CAAC;IAE3B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEjC,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACpC,CAAC;AAgFF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,kDA6D9D"}

package/dist/graph/nodes/NodePropertyTable.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { shouldHidePreviewField } from "../graph-list-utils.js";
+import { ontologyTermIrisForProperties, withOntologyLabels } from "../ontology-labels.js";
+import { formatDisplayValue } from "../property-formatters.js";
+import { classifyPropertyDisplay } from "./node-property-display.js";
+import { useOntologyTerms } from "#hooks/use-ontology-terms";
+import { formatPropertyLabel } from "#lib/iri-labels";
+import { cn } from "#style";
+function Tag(props) {
+    return (_jsx("span", { className: "rounded bg-faint px-1.5 py-[1px] typography-tiny text-default-foreground", children: props.children }));
+}
+function PropertyValue(props) {
+    return match(props.display)
+        .with({ kind: "tags" }, ({ values }) => (_jsx("div", { className: "flex flex-wrap gap-1", children: values.map((value) => (_jsx(Tag, { children: value }, value))) })))
+        .with({ kind: "color" }, ({ hex }) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": true, className: "size-3.5 shrink-0 rounded-sm border border-default-border", style: { backgroundColor: hex } }), _jsx("span", { className: "tabular-nums", children: hex })] })))
+        .with({ kind: "ratio" }, ({ fraction, text }) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": true, className: "h-1 w-12 shrink-0 overflow-hidden rounded-full bg-faint", children: _jsx("span", { className: "block h-full rounded-full bg-accent-foreground", style: { width: `${fraction * 100}%` } }) }), _jsx("span", { className: "tabular-nums", children: text })] })))
+        .with({ kind: "number" }, ({ text }) => _jsx("span", { className: "tabular-nums", children: text }))
+        .with({ kind: "boolean" }, ({ value }) => value ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Check, { "aria-hidden": true, className: "size-3.5 shrink-0 text-success-foreground" }), "true"] })) : (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(X, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" }), "false"] })))
+        .with(P.union({ kind: "prose" }, { kind: "text" }), ({ text }) => _jsx("span", { children: text }))
+        .exhaustive();
+}
+function PropertyRow(props) {
+    const { row } = props;
+    return (_jsxs("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", children: [_jsx("span", { className: "typography-tiny min-w-0 break-words text-muted-foreground first-letter:uppercase", children: row.label }), _jsx("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"), children: _jsx(PropertyValue, { display: row.display }) })] }));
+}
+// Every property the node carries, laid out like the record-detail field list. 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) {
+    const { properties, jsonLd, omitPredicates = [] } = 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) => {
+            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");
+    if (!isPresent(rows))
+        return null;
+    return (_jsxs("div", { className: "flex flex-col", children: [compactRows.map((row) => (_jsx(PropertyRow, { row: row }, row.key))), isPresent(proseRows) && (_jsxs(_Fragment, { children: [expanded && proseRows.map((row) => _jsx(PropertyRow, { row: row }, row.key)), _jsxs("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", children: [expanded ? (_jsx(ChevronDown, { size: 11, className: "shrink-0" })) : (_jsx(ChevronRight, { size: 11, className: "shrink-0" })), expanded ? "Show less" : `Show ${proseRows.length} more`] })] }))] }));
+}

package/dist/graph/nodes/RenderedTemplateView.d.ts

@@ -0,0 +1,3 @@
+import type { EntityViewProps } from "../types.js";
+export declare const RenderedTemplateView: import("react").NamedExoticComponent<EntityViewProps>;
+//# sourceMappingURL=RenderedTemplateView.d.ts.map

package/dist/graph/nodes/RenderedTemplateView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderedTemplateView.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/RenderedTemplateView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAShD,eAAO,MAAM,oBAAoB,uDAgC/B,CAAC"}

package/dist/graph/nodes/RenderedTemplateView.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { FileText } from "lucide-react";
+import { memo } from "react";
+import { EntityCardShell } from "./EntityCardShell.js";
+import { readSchemaOrgString, readVocabString } from "./typed-node-helpers.js";
+import { formatRelativeUpdated } from "#lib/format-date";
+import { PreRenderedMessage } from "#templates/PreRenderedMessage";
+const previewClassName = "w-[320px] max-w-full max-h-45 overflow-y-auto bg-muted border border-muted-border/50 px-3 py-2 rounded-md";
+export const RenderedTemplateView = memo(function RenderedTemplateView(props) {
+    const { data, selected, ringColor, onContextMenu } = props;
+    const jsonLd = data.jsonLd;
+    const text = readSchemaOrgString(jsonLd, "text");
+    const contentType = readVocabString(jsonLd, "contentType");
+    const dateCreated = readSchemaOrgString(jsonLd, "dateCreated");
+    const renderedAgo = formatRelativeUpdated(dateCreated);
+    return (_jsx(EntityCardShell, { icon: FileText, label: `Rendered template: ${data.label}`, labelMaxWidth: "max-w-65", selected: selected, ringColor: ringColor, onContextMenu: onContextMenu, children: _jsxs("div", { className: "flex flex-col gap-[6px]", children: [isPresent(text) ? (_jsx(PreRenderedMessage, { body: text, contentType: contentType, className: previewClassName })) : (_jsx("div", { className: previewClassName, children: _jsx("span", { className: "typography-tiny text-muted-foreground italic", children: "Not rendered yet" }) })), isPresent(renderedAgo) && (_jsxs("span", { className: "typography-tiny text-muted-foreground px-1", children: ["Rendered ", renderedAgo] }))] }) }));
+});

package/dist/graph/nodes/SchemaActionView.d.ts

@@ -0,0 +1,3 @@
+import type { EntityViewProps } from "../types.js";
+export declare const SchemaActionView: import("react").NamedExoticComponent<EntityViewProps>;
+//# sourceMappingURL=SchemaActionView.d.ts.map

package/dist/graph/nodes/SchemaActionView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SchemaActionView.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/SchemaActionView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAKhD,eAAO,MAAM,gBAAgB,uDA2B3B,CAAC"}

package/dist/graph/nodes/SchemaActionView.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SchemaActionSchema } from "@manta-eu/ldo";
+import { MessageSquareText } from "lucide-react";
+import { memo } from "react";
+import { EntityCardShell } from "./EntityCardShell.js";
+import { readEntityIri } from "./typed-node-helpers.js";
+import { useEntity } from "#hooks/use-entity";
+export const SchemaActionView = memo(function SchemaActionView(props) {
+    const { data, selected = false, ringColor, onContextMenu } = props;
+    const iri = readEntityIri(data.jsonLd);
+    const { data: typed } = useEntity({ schema: SchemaActionSchema, iri });
+    const promptText = typed?.description?.toString();
+    return (_jsx(EntityCardShell, { icon: MessageSquareText, label: "Prompt", labelMaxWidth: "max-w-55", selected: selected, ringColor: ringColor, onContextMenu: onContextMenu, children: _jsxs("div", { className: "bg-muted rounded-md px-2.5 py-2 flex w-55 flex-col gap-2", children: [_jsx("span", { className: "typography-tiny text-muted-foreground whitespace-nowrap", children: data.label }), promptText && (_jsx("p", { className: "typography-tiny text-default-foreground leading-[1.4] line-clamp-5", title: promptText, children: promptText }))] }) }));
+});

package/dist/graph/nodes/ShopifyShopView.d.ts

@@ -0,0 +1,3 @@
+import type { EntityViewProps } from "../types.js";
+export declare const ShopifyShopView: import("react").NamedExoticComponent<EntityViewProps>;
+//# sourceMappingURL=ShopifyShopView.d.ts.map

package/dist/graph/nodes/ShopifyShopView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShopifyShopView.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/ShopifyShopView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGhD,eAAO,MAAM,eAAe,uDAE1B,CAAC"}

package/dist/graph/nodes/ShopifyShopView.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Store } from "lucide-react";
+import { memo } from "react";
+import { ConnectedAccountCard } from "./ConnectedAccountCard.js";
+export const ShopifyShopView = memo(function ShopifyShopView(props) {
+    return _jsx(ConnectedAccountCard, { icon: Store, noun: "Shop", accent: "#95BF47", ...props });
+});

package/dist/graph/nodes/SlackChannelView.d.ts

@@ -0,0 +1,3 @@
+import type { EntityViewProps } from "../types.js";
+export declare const SlackChannelView: import("react").NamedExoticComponent<EntityViewProps>;
+//# sourceMappingURL=SlackChannelView.d.ts.map

package/dist/graph/nodes/SlackChannelView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackChannelView.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/SlackChannelView.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAShD,eAAO,MAAM,gBAAgB,uDA0D3B,CAAC"}

package/dist/graph/nodes/SlackChannelView.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SlackChannelSchema } from "@manta-eu/ldo";
+import { humanCount } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { CalendarPlus, Hash, MessageSquareText, Slack, Users } from "lucide-react";
+import { memo } from "react";
+import { CardRows, row } from "./card-rows.js";
+import { EntityCardShell } from "./EntityCardShell.js";
+import { slackAubergine } from "./slack-shared.js";
+import { ToneBadge } from "./tone-badge.js";
+import { readEntityIri } from "./typed-node-helpers.js";
+import { useEntity } from "#hooks/use-entity";
+import { formatGraphDate, formatRelativeUpdated } from "#lib/format-date";
+export const SlackChannelView = memo(function SlackChannelView(props) {
+    const { data, selected = false, ringColor, onContextMenu } = props;
+    const iri = readEntityIri(data.jsonLd);
+    const { data: typed } = useEntity({ schema: SlackChannelSchema, iri });
+    const name = typed?.name ?? data.label;
+    const purpose = typed?.purpose;
+    const topic = typed?.topic;
+    const memberCount = typed?.numMembers;
+    const createdAt = formatGraphDate(typed?.dateCreated);
+    const updated = formatRelativeUpdated(typed?.updatedAt);
+    const isExternallyShared = typed?.isExtShared === true;
+    const rows = [
+        typeof memberCount === "number" ? row(Users, humanCount(memberCount, "member")) : undefined,
+        isPresent(topic) ? row(MessageSquareText, topic) : undefined,
+        isPresent(createdAt) ? row(CalendarPlus, `Created ${createdAt}`) : undefined,
+    ].filter((r) => isPresent(r));
+    return (_jsx(EntityCardShell, { icon: Hash, label: `Channel: ${name}`, labelMaxWidth: "max-w-80", selected: selected, ringColor: ringColor, onContextMenu: onContextMenu, children: _jsxs("div", { className: "bg-muted rounded-md px-2.5 py-2 flex min-w-55 max-w-90 flex-col gap-1.25", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.25", children: [_jsx(Slack, { size: 11, className: "shrink-0", style: { color: slackAubergine } }), _jsx("span", { className: "typography-tiny-semibold text-default-foreground whitespace-nowrap", children: "Slack" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [isExternallyShared && _jsx(ToneBadge, { tone: "caution", children: "External" }), typed?.isPrivate === true && _jsx(ToneBadge, { tone: "neutral", children: "Private" }), typed?.isArchived === true && _jsx(ToneBadge, { tone: "negative", children: "Archived" })] })] }), isPresent(purpose) && (_jsx("span", { className: "typography-tiny text-default-foreground line-clamp-2", title: purpose, children: purpose })), _jsx(CardRows, { rows: rows }), isPresent(updated) && (_jsx("div", { className: "flex items-center justify-end pt-0.5", children: _jsxs("span", { className: "typography-tiny text-muted-foreground whitespace-nowrap", children: ["Updated ", updated] }) }))] }) }));
+});

package/dist/graph/nodes/SlackMessageView.d.ts

@@ -0,0 +1,3 @@
+import type { EntityViewProps } from "../types.js";
+export declare const SlackMessageView: import("react").NamedExoticComponent<EntityViewProps>;
+//# sourceMappingURL=SlackMessageView.d.ts.map

package/dist/graph/nodes/SlackMessageView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackMessageView.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/SlackMessageView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGhD,eAAO,MAAM,gBAAgB,uDAiB3B,CAAC"}

package/dist/graph/nodes/SlackMessageView.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slack } from "lucide-react";
+import { memo } from "react";
+import { EntityCardShell } from "./EntityCardShell.js";
+export const SlackMessageView = memo(function SlackMessageView(props) {
+    const { selected, ringColor, onContextMenu } = props;
+    return (_jsx(EntityCardShell, { icon: Slack, label: "Slack message", labelMaxWidth: "max-w-80", selected: selected, ringColor: ringColor, onContextMenu: onContextMenu, children: _jsx("div", { className: "w-[260px] bg-muted rounded-[6px] px-[10px] py-[8px]", children: _jsx("span", { className: "typography-tiny text-muted-foreground italic", children: "Sends the report to Slack on execution" }) }) }));
+});

package/dist/graph/nodes/SlackUserView.d.ts

@@ -0,0 +1,3 @@
+import type { EntityViewProps } from "../types.js";
+export declare const SlackUserView: import("react").NamedExoticComponent<EntityViewProps>;
+//# sourceMappingURL=SlackUserView.d.ts.map

package/dist/graph/nodes/SlackUserView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackUserView.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/SlackUserView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAQhD,eAAO,MAAM,aAAa,uDA2CxB,CAAC"}

package/dist/graph/nodes/SlackUserView.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SlackUserSchema } from "@manta-eu/ldo";
+import { isPresent } from "@manta-eu/lib/present";
+import { AtSign, Briefcase, Clock, Slack } from "lucide-react";
+import { memo } from "react";
+import { CardRows, row } from "./card-rows.js";
+import { EntityCardShell } from "./EntityCardShell.js";
+import { slackAubergine } from "./slack-shared.js";
+import { ToneBadge } from "./tone-badge.js";
+import { readEntityIri } from "./typed-node-helpers.js";
+import { useEntity } from "#hooks/use-entity";
+export const SlackUserView = memo(function SlackUserView(props) {
+    const { data, selected = false, ringColor, onContextMenu } = props;
+    const iri = readEntityIri(data.jsonLd);
+    const { data: typed } = useEntity({ schema: SlackUserSchema, iri });
+    const displayName = typed?.displayName ?? typed?.name ?? data.label;
+    const userName = typed?.userName;
+    const jobTitle = typed?.title;
+    const timezone = typed?.tzLabel ?? typed?.tz;
+    const rows = [
+        isPresent(userName) ? row(AtSign, userName) : undefined,
+        isPresent(jobTitle) ? row(Briefcase, jobTitle) : undefined,
+        isPresent(timezone) ? row(Clock, timezone) : undefined,
+    ].filter((r) => isPresent(r));
+    return (_jsx(EntityCardShell, { icon: Slack, label: `Member: ${displayName}`, labelMaxWidth: "max-w-80", selected: selected, ringColor: ringColor, onContextMenu: onContextMenu, children: _jsxs("div", { className: "bg-muted rounded-md px-2.5 py-2 flex min-w-55 max-w-90 flex-col gap-1.25", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.25", children: [_jsx(Slack, { size: 11, className: "shrink-0", style: { color: slackAubergine } }), _jsx("span", { className: "typography-tiny-semibold text-default-foreground whitespace-nowrap", children: "Slack" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [typed?.isBot === true && _jsx(ToneBadge, { tone: "neutral", children: "Bot" }), typed?.isAdmin === true && _jsx(ToneBadge, { tone: "caution", children: "Admin" }), typed?.deleted === true && _jsx(ToneBadge, { tone: "negative", children: "Deactivated" })] })] }), _jsx(CardRows, { rows: rows })] }) }));
+});

package/dist/graph/nodes/SlackWorkspaceView.d.ts

@@ -0,0 +1,3 @@
+import type { EntityViewProps } from "../types.js";
+export declare const SlackWorkspaceView: import("react").NamedExoticComponent<EntityViewProps>;
+//# sourceMappingURL=SlackWorkspaceView.d.ts.map

package/dist/graph/nodes/SlackWorkspaceView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlackWorkspaceView.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/SlackWorkspaceView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD,eAAO,MAAM,kBAAkB,uDAE7B,CAAC"}

package/dist/graph/nodes/SlackWorkspaceView.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slack } from "lucide-react";
+import { memo } from "react";
+import { ConnectedAccountCard } from "./ConnectedAccountCard.js";
+import { slackAubergine } from "./slack-shared.js";
+export const SlackWorkspaceView = memo(function SlackWorkspaceView(props) {
+    return _jsx(ConnectedAccountCard, { icon: Slack, noun: "Workspace", accent: slackAubergine, ...props });
+});

package/dist/graph/nodes/attio-shared.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+export declare const attioPurple = "#7c3aed";
+type AttioNodeBodyProps = {
+    right?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+    more?: ReactNode;
+};
+export declare const AttioNodeBody: import("react").NamedExoticComponent<AttioNodeBodyProps>;
+export {};
+//# sourceMappingURL=attio-shared.d.ts.map

package/dist/graph/nodes/attio-shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attio-shared.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/attio-shared.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,aAAa,0DAmCxB,CAAC"}

package/dist/graph/nodes/attio-shared.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, Waypoints } from "lucide-react";
+import { memo, useState } from "react";
+import { cn } from "#style";
+export const attioPurple = "#7c3aed";
+export const AttioNodeBody = memo(function AttioNodeBody(props) {
+    const { right, className, children, more } = props;
+    const [expanded, setExpanded] = useState(false);
+    return (_jsxs("div", { className: cn("bg-muted rounded-md px-3 py-2.5 flex min-w-60 max-w-90 flex-col gap-2", className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.25", children: [_jsx(Waypoints, { size: 11, className: "shrink-0", style: { color: attioPurple } }), _jsx("span", { className: "typography-tiny-semibold text-default-foreground whitespace-nowrap", children: "Attio" })] }), right] }), children, more && (_jsxs(_Fragment, { children: [expanded && _jsx("div", { className: "flex flex-col gap-1.25", children: more }), _jsxs("button", { type: "button", onClick: () => setExpanded((v) => !v), className: "nodrag flex items-center gap-1 typography-tiny-medium text-muted-foreground hover:text-default-foreground", children: [expanded ? (_jsx(ChevronDown, { size: 11, className: "shrink-0" })) : (_jsx(ChevronRight, { size: 11, className: "shrink-0" })), expanded ? "Show less" : "Show more"] })] }))] }));
+});

package/dist/graph/nodes/brand-shared.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+export declare const brandAmber = "#d97706";
+declare const toneByStatus: {
+    readonly approved: "positive";
+    readonly accepted: "positive";
+    readonly pass: "positive";
+    readonly "on-guidelines": "positive";
+    readonly draft: "neutral";
+    readonly "not-checkable": "neutral";
+    readonly info: "neutral";
+    readonly superseded: "neutral";
+    readonly "insufficient-data": "caution";
+    readonly deviation: "caution";
+    readonly minor: "caution";
+    readonly rejected: "negative";
+    readonly violation: "negative";
+    readonly "off-guidelines": "negative";
+    readonly blocker: "negative";
+    readonly major: "negative";
+};
+export type BrandStatus = keyof typeof toneByStatus;
+export declare const brandStatusValues: BrandStatus[];
+export type BrandStatusBadgeProps = {
+    status?: string;
+    className?: string;
+};
+export declare function BrandStatusBadge(props: BrandStatusBadgeProps): import("react/jsx-runtime").JSX.Element | null;
+type BrandNodeBodyProps = {
+    right?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+};
+export declare function BrandNodeBody(props: BrandNodeBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare function assetImageUrl(file: string | undefined, mimeType: string | undefined, endpoint: string): string | undefined;
+export declare function useAssetFileName(file: string | undefined): string | undefined;
+export {};
+//# sourceMappingURL=brand-shared.d.ts.map

package/dist/graph/nodes/brand-shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-shared.d.ts","sourceRoot":"","sources":["../../../src/graph/nodes/brand-shared.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,eAAO,MAAM,UAAU,YAAY,CAAC;AAGpC,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;CAiB4B,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AAEpD,eAAO,MAAM,iBAAiB,EAAgC,WAAW,EAAE,CAAC;AAE5E,MAAM,MAAM,qBAAqB,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,kDAU5D;AAED,KAAK,kBAAkB,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAE1F,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAgBtD;AAKD,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,QAAQ,EAAE,MAAM,GACf,MAAM,GAAG,SAAS,CAOpB;AAGD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAI7E"}