@manta-eu/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Manta AI AS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,87 @@
+# @manta-eu/react
+
+Shared React components and design system styles for Marketer apps.
+
+## Installation
+
+Install in your project:
+
+```bash
+pnpm add @manta-eu/react
+```
+
+### 1. Add base styles to your global CSS
+
+In your app’s main stylesheet (e.g. `src/styles.css`), import Tailwind and the package styles:
+
+```css
+@import "tailwindcss";
+
+/* Marketer components – design tokens, base styles, utilities */
+@import "@manta-eu/react/globals.css";
+```
+
+### 2. Include the package in Tailwind’s content (purge)
+
+So Tailwind keeps classes used by `@manta-eu/react` in the build, add `@source` in the same global CSS file, pointing at the package (adjust the path if your `node_modules` layout differs, e.g. in a monorepo):
+
+```css
+@source "../node_modules/@manta-eu/react/";
+```
+
+If the package is hoisted (e.g. at the repo root), the path might be `../../node_modules/@manta-eu/react/`.
+
+### 3. Override the font variable
+
+The design system expects `--font-roobertpro` to be set to your actual font. Override it in your global CSS, for example in `@theme` and/or `:root`:
+
+```css
+@theme {
+  --font-roobertpro: "RoobertPro", sans-serif;
+}
+
+:root {
+  --font-roobertpro: "RoobertPro", sans-serif;
+}
+```
+
+Use your real font family name (and fallbacks) if it differs from `RoobertPro`.
+
+## Usage
+
+Import components and use the design system:
+
+```tsx
+import { Button } from "@manta-eu/react/button";
+import "@manta-eu/react/globals.css";
+
+export function App() {
+  return <Button label="Click me" variant="primary" />;
+}
+```
+
+Your app must use Tailwind 4 and process the package CSS (e.g. PostCSS with `@tailwindcss/postcss`) so the design tokens and utilities in `globals.css` apply.
+
+## Themes
+
+Three themes are included: **standard** (default), **manta** (light), and **manta-dark**. Switch at runtime by setting a data attribute on `<html>`:
+
+```tsx
+document.documentElement.dataset.theme = "manta";
+```
+
+Or use a React context/component that sets `data-theme` on the document root. Theme files live in `src/themes/` (standard.css, manta.css, manta-dark.css).
+
+## Development
+
+```bash
+pnpm storybook
+```
+
+Runs Storybook on port 6007.
+
+## Exports
+
+- `@manta-eu/react/button` – Button component
+- `@manta-eu/react/style` – `cn()` utility
+- `@manta-eu/react/globals.css` – Design system stylesheet

package/dist/action-plan-changes/ActionPlanChangesTable.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+import { type ChangeNode } from "./build-change-tree.js";
+import { type ChangeRowRenderer } from "./createChangeRowRenderer.js";
+export type ChangeTableViewProps = {
+    tree: ChangeNode[];
+    rowRenderer?: ChangeRowRenderer;
+    isLoading?: boolean;
+    emptyFallback?: ReactNode;
+};
+export declare function ChangeTableView(props: ChangeTableViewProps): import("react/jsx-runtime").JSX.Element;
+export type ActionPlanChangesTableProps = {
+    planGraphIri: string;
+    rowRenderer?: ChangeRowRenderer;
+    emptyFallback?: ReactNode;
+};
+export declare function ActionPlanChangesTable(props: ActionPlanChangesTableProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ActionPlanChangesTable.d.ts.map

package/dist/action-plan-changes/ActionPlanChangesTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionPlanChangesTable.d.ts","sourceRoot":"","sources":["../../src/action-plan-changes/ActionPlanChangesTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAmB,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAA4B,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAmB7F,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CA2D1D;AAED,MAAM,MAAM,2BAA2B,GAAG;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAMxE"}

package/dist/action-plan-changes/ActionPlanChangesTable.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { getCoreRowModel, getExpandedRowModel, useReactTable } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { useActionPlanEntityMetrics } from "../hooks/use-action-plan-entity-metrics.js";
+import { buildChangeTree } from "./build-change-tree.js";
+import { defaultChangeRowRenderer } from "./createChangeRowRenderer.js";
+import { Loader } from "#components/loader/index";
+import { DataTable } from "#components/table/index";
+import { TooltipProvider } from "#components/tooltip/index";
+const changeColumns = [
+    { id: "integration", header: "", cell: () => null },
+    { id: "name", header: "Name", cell: () => null },
+    { id: "previous", header: "Previous", cell: () => null },
+    { id: "new", header: "New", cell: () => null },
+    { id: "why", header: "", cell: () => null },
+];
+const whyCellStyle = {
+    position: "sticky",
+    zIndex: 20,
+    right: 0,
+};
+export function ChangeTableView(props) {
+    const { tree, rowRenderer = defaultChangeRowRenderer, isLoading = false, emptyFallback } = props;
+    const table = useReactTable({
+        data: tree,
+        columns: changeColumns,
+        getRowId: (node) => node.id,
+        getSubRows: (node) => node.children,
+        getCoreRowModel: getCoreRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        getRowCanExpand: (row) => row.subRows.length > 0,
+    });
+    const columnCount = changeColumns.length;
+    const renderRow = useMemo(() => {
+        return function renderChangeRow(row) {
+            const RowComponent = rowRenderer.getRowComponent(row.original);
+            return (_jsx(RowComponent, { node: row.original, depth: row.depth, canExpand: row.getCanExpand(), isExpanded: row.getIsExpanded(), onToggleExpand: row.getToggleExpandedHandler(), columnCount: columnCount, whyCellStyle: whyCellStyle }, row.id));
+        };
+    }, [rowRenderer, columnCount]);
+    if (isLoading) {
+        return (_jsx("div", { className: "flex items-center justify-center py-10", children: _jsx(Loader, { className: "size-5" }) }));
+    }
+    if (!isPresent(tree)) {
+        if (isPresent(emptyFallback)) {
+            return _jsx(_Fragment, { children: emptyFallback });
+        }
+        return (_jsx("div", { className: "rounded-xl border border-muted-border bg-card px-4 py-6 typography-small text-muted-foreground", children: "No recommended changes in this plan." }));
+    }
+    return (_jsx(TooltipProvider, { children: _jsx("div", { className: "overflow-hidden rounded-xl border border-muted-border bg-card", children: _jsx(DataTable, { table: table, renderRow: renderRow }) }) }));
+}
+export function ActionPlanChangesTable(props) {
+    const { planGraphIri, rowRenderer, emptyFallback } = props;
+    const { data, isLoading } = useActionPlanEntityMetrics({ planGraphIri, enabled: !!planGraphIri });
+    const tree = useMemo(() => buildChangeTree(data?.entities ?? []), [data?.entities]);
+    return _jsx(ChangeTableView, { tree: tree, rowRenderer: rowRenderer, isLoading: isLoading, emptyFallback: emptyFallback });
+}

package/dist/action-plan-changes/build-change-tree.d.ts

@@ -0,0 +1,39 @@
+import type { IRI } from "@manta-eu/rdf-lib/namespaces";
+import type { PlanEntityMetric } from "../hooks/use-action-plan-entity-metrics.js";
+import { type ActionPlanIntegration } from "../lib/action-plan-detail.js";
+import { type EntityChange } from "./derive-entity-change.js";
+export type ChangeLevel = PlanEntityMetric["level"] | "FIELD";
+export type FieldEdit = {
+    field: string;
+    label: string;
+    previous: string | null;
+    next: string | null;
+    reason?: string | null;
+};
+export type ChangeRollup = {
+    pauseCount: number;
+    scaleCount: number;
+    editCount: number;
+    wastedSpendTotal: number | null;
+};
+export type ChangeNode = {
+    id: string;
+    level: ChangeLevel;
+    typeIri: string;
+    label: string;
+    integration: ActionPlanIntegration | null;
+    change: EntityChange;
+    metrics: {
+        wastedSpend: number | null;
+        currentRoas: number | null;
+    };
+    synthetic: boolean;
+    rollup: ChangeRollup;
+    children: ChangeNode[];
+};
+export type BuildChangeTreeOptions = {
+    fieldEditsBySubject?: Record<string, FieldEdit[]>;
+};
+export declare function integrationForTypeIri(typeIri: IRI | string): ActionPlanIntegration | null;
+export declare function buildChangeTree(entities: PlanEntityMetric[], options?: BuildChangeTreeOptions): ChangeNode[];
+//# sourceMappingURL=build-change-tree.d.ts.map

package/dist/action-plan-changes/build-change-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-change-tree.d.ts","sourceRoot":"","sources":["../../src/action-plan-changes/build-change-tree.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAqB,KAAK,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC1F,OAAO,EAAsB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE/E,MAAM,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAC1C,MAAM,EAAE,YAAY,CAAC;IACrB,OAAO,EAAE;QAAE,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IACpE,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,UAAU,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;CACnD,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,GAAG,qBAAqB,GAAG,IAAI,CAEzF;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,gBAAgB,EAAE,EAAE,OAAO,GAAE,sBAA2B,GAAG,UAAU,EAAE,CAoEhH"}

package/dist/action-plan-changes/build-change-tree.js

@@ -0,0 +1,125 @@
+import { integrationForIri } from "../lib/action-plan-detail.js";
+import { deriveEntityChange } from "./derive-entity-change.js";
+export function integrationForTypeIri(typeIri) {
+    return integrationForIri(typeIri);
+}
+export function buildChangeTree(entities, options = {}) {
+    const { fieldEditsBySubject = {} } = options;
+    const nodes = new Map();
+    const childIds = new Set();
+    function getOrCreate(id, level, label) {
+        const existing = nodes.get(id);
+        if (existing)
+            return existing;
+        const node = {
+            id,
+            level,
+            typeIri: "",
+            label: label && label.length > 0 ? label : id,
+            integration: null,
+            change: { kind: "UNKNOWN" },
+            metrics: { wastedSpend: null, currentRoas: null },
+            synthetic: true,
+            rollup: emptyRollup(),
+            children: [],
+        };
+        nodes.set(id, node);
+        return node;
+    }
+    function link(parent, child) {
+        if (parent.id === child.id || childIds.has(child.id))
+            return;
+        parent.children.push(child);
+        childIds.add(child.id);
+    }
+    for (const entity of entities) {
+        const node = getOrCreate(entity.subject, entity.level, entity.label);
+        node.synthetic = false;
+        node.level = entity.level;
+        node.typeIri = entity.typeIri;
+        node.integration = integrationForIri(entity.typeIri);
+        if (entity.label && entity.label.length > 0)
+            node.label = entity.label;
+        node.change = deriveEntityChange(entity);
+        node.metrics = { wastedSpend: entity.wastedSpend, currentRoas: entity.currentRoas };
+        const fieldEdits = fieldEditsBySubject[entity.subject];
+        if (fieldEdits) {
+            for (const edit of fieldEdits) {
+                node.children.push(makeFieldEditNode(node.id, node.integration, edit));
+            }
+        }
+    }
+    for (const entity of entities) {
+        const self = nodes.get(entity.subject);
+        if (!self)
+            continue;
+        const campaign = entity.campaignIri ? getOrCreate(entity.campaignIri, "CAMPAIGN", entity.campaignLabel) : null;
+        const adset = entity.adsetIri ? getOrCreate(entity.adsetIri, "AD_SET", entity.adsetLabel) : null;
+        if (campaign && adset)
+            link(campaign, adset);
+        if (entity.level === "AD") {
+            if (adset)
+                link(adset, self);
+            else if (campaign)
+                link(campaign, self);
+        }
+        else if (entity.level === "AD_SET" && campaign) {
+            link(campaign, self);
+        }
+    }
+    const roots = Array.from(nodes.values()).filter((node) => !childIds.has(node.id));
+    for (const root of roots)
+        computeRollup(root);
+    return roots;
+}
+function emptyRollup() {
+    return { pauseCount: 0, scaleCount: 0, editCount: 0, wastedSpendTotal: null };
+}
+function makeFieldEditNode(parentId, integration, edit) {
+    return {
+        id: `${parentId}#${edit.field}`,
+        level: "FIELD",
+        typeIri: "",
+        label: edit.label,
+        integration,
+        change: {
+            kind: "FIELD_EDIT",
+            field: edit.field,
+            previous: edit.previous,
+            next: edit.next,
+            reason: edit.reason ?? null,
+        },
+        metrics: { wastedSpend: null, currentRoas: null },
+        synthetic: false,
+        rollup: emptyRollup(),
+        children: [],
+    };
+}
+function computeRollup(node) {
+    let pauseCount = 0;
+    let scaleCount = 0;
+    let editCount = 0;
+    let wastedSpendTotal = null;
+    for (const child of node.children) {
+        if (child.change.kind === "PAUSE")
+            pauseCount += 1;
+        if (child.change.kind === "BUDGET_SCALE")
+            scaleCount += 1;
+        if (child.change.kind === "FIELD_EDIT")
+            editCount += 1;
+        if (child.metrics.wastedSpend != null) {
+            wastedSpendTotal = (wastedSpendTotal ?? 0) + child.metrics.wastedSpend;
+        }
+        const childRollup = computeRollup(child);
+        pauseCount += childRollup.pauseCount;
+        scaleCount += childRollup.scaleCount;
+        editCount += childRollup.editCount;
+        if (childRollup.wastedSpendTotal != null) {
+            wastedSpendTotal = (wastedSpendTotal ?? 0) + childRollup.wastedSpendTotal;
+        }
+        if (node.integration == null && child.integration != null)
+            node.integration = child.integration;
+    }
+    node.rollup = { pauseCount, scaleCount, editCount, wastedSpendTotal };
+    return node.rollup;
+}

package/dist/action-plan-changes/change-cells.d.ts

@@ -0,0 +1,24 @@
+import type { ChangeNode, ChangeRollup } from "./build-change-tree.js";
+import { type EntityChange } from "./derive-entity-change.js";
+export declare function EntityTypeIcon(props: {
+    level: ChangeNode["level"];
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PreviousValueCell(props: {
+    change: EntityChange;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function NewValueCell(props: {
+    change: EntityChange;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function WhyAffordance(props: {
+    change: EntityChange;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChangeRollupBadge(props: {
+    rollup: ChangeRollup;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function StatusPill(props: {
+    value: string;
+    muted?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function statusPillColorClass(value: string): string;
+//# sourceMappingURL=change-cells.d.ts.map

package/dist/action-plan-changes/change-cells.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"change-cells.d.ts","sourceRoot":"","sources":["../../src/action-plan-changes/change-cells.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAe,UAAU,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAYzE,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAGvF;AAyBD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,YAAY,CAAA;CAAE,2CAShE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,YAAY,CAAA;CAAE,2CAS3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,YAAY,CAAA;CAAE,kDAkB5D;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,YAAY,CAAA;CAAE,kDAahE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,2CAWnE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAM1D"}

package/dist/action-plan-changes/change-cells.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HelpCircle, Image as ImageIcon, LayoutGrid, Megaphone, Pencil } from "lucide-react";
+import { match } from "ts-pattern";
+import { changeReason } from "./derive-entity-change.js";
+import { Badge } from "#components/badge/index";
+import { Tooltip, TooltipContent, TooltipTrigger } from "#components/tooltip/index";
+import { cn } from "#style";
+const levelIcon = {
+    CAMPAIGN: Megaphone,
+    AD_SET: LayoutGrid,
+    AD: ImageIcon,
+    FIELD: Pencil,
+};
+export function EntityTypeIcon(props) {
+    const Icon = levelIcon[props.level];
+    return _jsx(Icon, { className: cn("size-4 shrink-0 text-muted-foreground", props.className) });
+}
+function formatMoney(value) {
+    return `$${Math.round(value).toLocaleString()}`;
+}
+function TextValue(props) {
+    if (!props.value)
+        return _jsx("span", { className: "typography-small text-muted-foreground", children: "\u2014" });
+    return (_jsx("span", { className: cn("block max-w-[240px] truncate typography-small", props.emphasize ? "text-default-foreground" : "text-muted-foreground"), title: props.value, children: props.value }));
+}
+function EmptyValue() {
+    return _jsx("span", { className: "typography-small text-muted-foreground", children: "\u2014" });
+}
+export function PreviousValueCell(props) {
+    return match(props.change)
+        .with({ kind: "PAUSE" }, () => _jsx(StatusPill, { value: "Active", muted: true }))
+        .with({ kind: "BUDGET_SCALE" }, (change) => (_jsx("span", { className: "typography-small text-muted-foreground tabular-nums", children: formatMoney(change.previous) })))
+        .with({ kind: "FIELD_EDIT" }, (change) => _jsx(TextValue, { value: change.previous }))
+        .with({ kind: "UNKNOWN" }, () => _jsx(EmptyValue, {}))
+        .exhaustive();
+}
+export function NewValueCell(props) {
+    return match(props.change)
+        .with({ kind: "PAUSE" }, () => _jsx(StatusPill, { value: "Paused" }))
+        .with({ kind: "BUDGET_SCALE" }, (change) => (_jsx(BudgetPill, { value: change.next, isIncrease: change.next > change.previous })))
+        .with({ kind: "FIELD_EDIT" }, (change) => _jsx(TextValue, { value: change.next, emphasize: true }))
+        .with({ kind: "UNKNOWN" }, () => _jsx(EmptyValue, {}))
+        .exhaustive();
+}
+export function WhyAffordance(props) {
+    const reason = changeReason(props.change);
+    if (!reason)
+        return null;
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Why this change", className: "text-muted-foreground/60 transition-colors hover:text-muted-foreground", children: _jsx(HelpCircle, { className: "size-4" }) }) }), _jsx(TooltipContent, { className: "max-w-xs whitespace-normal text-left", children: reason })] }));
+}
+export function ChangeRollupBadge(props) {
+    const { rollup } = props;
+    const parts = [];
+    if (rollup.scaleCount > 0)
+        parts.push(`${rollup.scaleCount} budget`);
+    if (rollup.pauseCount > 0)
+        parts.push(`${rollup.pauseCount} paused`);
+    if (rollup.editCount > 0)
+        parts.push(`${rollup.editCount} ${rollup.editCount === 1 ? "edit" : "edits"}`);
+    if (parts.length === 0)
+        return null;
+    return (_jsx(Badge, { variant: "secondary", size: "sm", className: "ml-1 shrink-0", children: parts.join(" · ") }));
+}
+export function StatusPill(props) {
+    return (_jsx("span", { className: cn("rounded-[5px] px-1.5 py-0.5 text-[11px] font-mono leading-4 whitespace-nowrap", props.muted ? "bg-accent text-muted-foreground" : statusPillColorClass(props.value)), children: props.value }));
+}
+export function statusPillColorClass(value) {
+    return match(value.toLowerCase())
+        .with("active", "enabled", "serving", () => "bg-success text-success-foreground")
+        .with("paused", "pending", "draft", () => "bg-warning text-warning-foreground")
+        .with("removed", "error", "deleted", () => "bg-error text-error-foreground")
+        .otherwise(() => "bg-accent text-muted-foreground");
+}
+function BudgetPill(props) {
+    return (_jsx("span", { className: cn("rounded-[5px] px-1.5 py-0.5 text-[11px] font-mono leading-4 tabular-nums", props.isIncrease ? "bg-success text-success-foreground" : "bg-error text-error-foreground"), children: formatMoney(props.value) }));
+}

package/dist/action-plan-changes/createChangeRowRenderer.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentType, CSSProperties } from "react";
+import type { ChangeNode } from "./build-change-tree.js";
+export type ChangeRowProps = {
+    node: ChangeNode;
+    depth: number;
+    canExpand: boolean;
+    isExpanded: boolean;
+    onToggleExpand: () => void;
+    columnCount: number;
+    whyCellStyle?: CSSProperties;
+};
+export type ChangeRowComponent = ComponentType<ChangeRowProps>;
+export type CreateChangeRowRendererOptions = {
+    fallback: ChangeRowComponent;
+    overrides?: Record<string, ChangeRowComponent>;
+};
+export type ChangeRowRenderer = {
+    getRowComponent: (node: ChangeNode) => ChangeRowComponent;
+};
+export declare function createChangeRowRenderer(options: CreateChangeRowRendererOptions): ChangeRowRenderer;
+export declare function DefaultChangeRow(props: ChangeRowProps): import("react/jsx-runtime").JSX.Element;
+export declare const defaultChangeRowRenderer: ChangeRowRenderer;
+//# sourceMappingURL=createChangeRowRenderer.d.ts.map

package/dist/action-plan-changes/createChangeRowRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createChangeRowRenderer.d.ts","sourceRoot":"","sources":["../../src/action-plan-changes/createChangeRowRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAYtD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;AAE/D,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,eAAe,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,kBAAkB,CAAC;CAC3D,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,8BAA8B,GAAG,iBAAiB,CAOlG;AAgBD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,2CAqCrD;AAED,eAAO,MAAM,wBAAwB,mBAA0D,CAAC"}

package/dist/action-plan-changes/createChangeRowRenderer.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { ChangeRollupBadge, EntityTypeIcon, NewValueCell, PreviousValueCell, WhyAffordance } from "./change-cells.js";
+import { ChannelIcon } from "#components/channel-icon/index";
+import { TableCell, TableRow } from "#components/table/index";
+const integrationChannel = {
+    META: "META",
+    GOOGLE: "GOOGLE_ADS",
+    SHOPIFY: "SHOPIFY",
+    SNAPCHAT: "SNAPCHAT",
+};
+export function createChangeRowRenderer(options) {
+    const { fallback, overrides = {} } = options;
+    return {
+        getRowComponent(node) {
+            return overrides[node.typeIri] ?? fallback;
+        },
+    };
+}
+function ExpandToggle(props) {
+    if (!props.canExpand)
+        return _jsx("span", { className: "inline-block size-4 shrink-0" });
+    return (_jsx("button", { type: "button", onClick: props.onToggleExpand, "aria-label": props.isExpanded ? "Collapse" : "Expand", className: "shrink-0 text-muted-foreground transition-colors hover:text-default-foreground", children: props.isExpanded ? _jsx(ChevronDown, { className: "size-4" }) : _jsx(ChevronRight, { className: "size-4" }) }));
+}
+export function DefaultChangeRow(props) {
+    const { node, depth, canExpand, isExpanded, onToggleExpand, whyCellStyle } = props;
+    const isRoot = depth === 0;
+    return (_jsxs(TableRow, { className: isRoot ? "border-muted-border bg-faint hover:bg-faint" : "group border-muted-border", children: [_jsx(TableCell, { className: "w-10", children: node.integration ? (_jsx(ChannelIcon, { channel: integrationChannel[node.integration], iconClassName: "size-4" })) : null }), _jsx(TableCell, { children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", style: { paddingLeft: depth * 16 }, children: [_jsx(ExpandToggle, { canExpand: canExpand, isExpanded: isExpanded, onToggleExpand: onToggleExpand }), _jsx(EntityTypeIcon, { level: node.level }), _jsx("span", { className: `${isRoot ? "typography-small-medium" : "typography-small"} text-default-foreground truncate`, children: node.label }), node.rollup.editCount > 0 || isRoot ? _jsx(ChangeRollupBadge, { rollup: node.rollup }) : null] }) }), _jsx(TableCell, { children: _jsx(PreviousValueCell, { change: node.change }) }), _jsx(TableCell, { children: _jsx(NewValueCell, { change: node.change }) }), _jsx(TableCell, { className: `w-10 text-center group-hover:bg-muted ${isRoot ? "bg-faint" : "bg-card"}`, style: whyCellStyle, children: _jsx(WhyAffordance, { change: node.change }) })] }));
+}
+export const defaultChangeRowRenderer = createChangeRowRenderer({ fallback: DefaultChangeRow });

package/dist/action-plan-changes/derive-entity-change.d.ts

@@ -0,0 +1,22 @@
+import type { PlanEntityMetric } from "../hooks/use-action-plan-entity-metrics.js";
+export type EntityChange = {
+    kind: "PAUSE";
+    reason: string | null;
+} | {
+    kind: "BUDGET_SCALE";
+    previous: number;
+    next: number;
+    factor: number | null;
+    reason: string | null;
+} | {
+    kind: "FIELD_EDIT";
+    field: string;
+    previous: string | null;
+    next: string | null;
+    reason: string | null;
+} | {
+    kind: "UNKNOWN";
+};
+export declare function deriveEntityChange(metric: PlanEntityMetric): EntityChange;
+export declare function changeReason(change: EntityChange): string | null;
+//# sourceMappingURL=derive-entity-change.d.ts.map

package/dist/action-plan-changes/derive-entity-change.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"derive-entity-change.d.ts","sourceRoot":"","sources":["../../src/action-plan-changes/derive-entity-change.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAEhF,MAAM,MAAM,YAAY,GACpB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,GACtG;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,GAC1G;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAExB,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,gBAAgB,GAAG,YAAY,CAgBzE;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI,CAEhE"}

package/dist/action-plan-changes/derive-entity-change.js

@@ -0,0 +1,18 @@
+export function deriveEntityChange(metric) {
+    if (metric.pauseReason != null) {
+        return { kind: "PAUSE", reason: metric.pauseReason };
+    }
+    if (metric.previousDailyBudget != null && metric.dailyBudget != null) {
+        return {
+            kind: "BUDGET_SCALE",
+            previous: metric.previousDailyBudget,
+            next: metric.dailyBudget,
+            factor: metric.budgetIncreaseFactor,
+            reason: metric.scaleReason,
+        };
+    }
+    return { kind: "UNKNOWN" };
+}
+export function changeReason(change) {
+    return change.kind === "UNKNOWN" ? null : change.reason;
+}

package/dist/action-plan-changes/index.d.ts

@@ -0,0 +1,6 @@
+export { ActionPlanChangesTable, type ActionPlanChangesTableProps, ChangeTableView, type ChangeTableViewProps, } from "./ActionPlanChangesTable.js";
+export { createChangeRowRenderer, defaultChangeRowRenderer, DefaultChangeRow, type ChangeRowProps, type ChangeRowComponent, type ChangeRowRenderer, type CreateChangeRowRendererOptions, } from "./createChangeRowRenderer.js";
+export { buildChangeTree, integrationForTypeIri, type ChangeNode, type ChangeRollup, type ChangeLevel, type FieldEdit, type BuildChangeTreeOptions, } from "./build-change-tree.js";
+export { deriveEntityChange, changeReason, type EntityChange } from "./derive-entity-change.js";
+export { EntityTypeIcon, PreviousValueCell, NewValueCell, WhyAffordance, ChangeRollupBadge, StatusPill, statusPillColorClass, } from "./change-cells.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/action-plan-changes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/action-plan-changes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,EAChC,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,uBAAuB,EACvB,wBAAwB,EACxB,gBAAgB,EAChB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,8BAA8B,GACpC,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,eAAe,EACf,qBAAqB,EACrB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,sBAAsB,GAC5B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC7F,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,oBAAoB,GACrB,MAAM,gBAAgB,CAAC"}

package/dist/action-plan-changes/index.js

@@ -0,0 +1,5 @@
+export { ActionPlanChangesTable, ChangeTableView, } from "./ActionPlanChangesTable.js";
+export { createChangeRowRenderer, defaultChangeRowRenderer, DefaultChangeRow, } from "./createChangeRowRenderer.js";
+export { buildChangeTree, integrationForTypeIri, } from "./build-change-tree.js";
+export { deriveEntityChange, changeReason } from "./derive-entity-change.js";
+export { EntityTypeIcon, PreviousValueCell, NewValueCell, WhyAffordance, ChangeRollupBadge, StatusPill, statusPillColorClass, } from "./change-cells.js";

package/dist/action-shapes/catalog.d.ts

@@ -0,0 +1,4 @@
+import type { ActionShapeSpec } from "./types.js";
+export declare const supportedActionShapes: ReadonlyArray<ActionShapeSpec>;
+export declare function getActionShapeSpec(iri: string | undefined): ActionShapeSpec | undefined;
+//# sourceMappingURL=catalog.d.ts.map

package/dist/action-shapes/catalog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../../src/action-shapes/catalog.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,eAAe,CAAyB,CAAC;AAI3F,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,eAAe,GAAG,SAAS,CAGvF"}

package/dist/action-shapes/catalog.generated.d.ts

@@ -0,0 +1,3 @@
+import type { ActionShapeSpec } from "./types.js";
+export declare const generatedActionShapes: ReadonlyArray<ActionShapeSpec>;
+//# sourceMappingURL=catalog.generated.d.ts.map

package/dist/action-shapes/catalog.generated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog.generated.d.ts","sourceRoot":"","sources":["../../src/action-shapes/catalog.generated.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAK/C,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,eAAe,CA8ChE,CAAC"}