@miragon/pulse-widget-shell 0.0.0-stage → 0.22.0

package/dist/ui/list-table.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useId } from "react";
+import { Button, cn, MICRO_LABEL, useLocale } from "@miragon/mcp-toolkit-ui";
+import { Maximize2 } from "lucide-react";
+import { formatNumber } from "./format.js";
+import { Icon } from "./icon.js";
+import { useInlineBudget, useRowsBudgeted } from "./inline-budget.js";
+import { useInlineRows } from "./inline-fit.js";
+import { kitLabels } from "./kit-labels.js";
+import { Th } from "./table.js";
+/**
+ * The scroll region's focus ring, drawn INSIDE its box: the region usually
+ * fills a card or a bordered wrapper edge to edge, often one that clips its
+ * overflow, so the toolkit's outset `FOCUS_RING` (a box-shadow 2 px off the
+ * element) is cut away there and keyboard focus turns invisible (WCAG
+ * 2.4.7). Neither the region's own inset shadow (`FOCUS_RING_INSET`) nor its
+ * own outline would do: the header and row fills paint over the one, and the
+ * pinned action column (a positioned cell) over both. So the ring is a
+ * sibling laid over the region's box, above the pinned column, that shows
+ * while the region (the `peer`) has keyboard focus: same `--focus` role and
+ * 2 px as the kit's ring, an outline pulled inward, which stays visible in
+ * forced-colours mode.
+ */
+export const REGION_FOCUS_RING = "peer-focus-visible:outline-2 peer-focus-visible:outline-solid peer-focus-visible:outline-focus peer-focus-visible:-outline-offset-2";
+/** Above the pinned column's `z-index: 1` (see {@link listTableCss}). */
+const RING_LAYER = "pointer-events-none absolute inset-0 z-[2] rounded-sm";
+/**
+ * Container widths below which a `hideBelow` column is hidden — the region's
+ * OWN width (a container query), so a table in a narrow split column hides
+ * like one in a narrow host. `sm` 40rem (640 px), `md` 48rem (768 px: hidden
+ * in a 760 px inline view, shown in fullscreen), `lg` 64rem (1024 px).
+ */
+export const COLUMN_BREAKPOINTS = { sm: "40rem", md: "48rem", lg: "64rem" };
+/** Where each group sits: its position in the group row and the columns it covers. */
+function groupLayout(columns, groups) {
+    let first = 0;
+    const layout = groups.map((group, index) => {
+        const span = group.span ?? 1;
+        if (!Number.isInteger(span) || span < 1) {
+            throw new Error(`ListTable: group ${index + 1} spans ${span} columns; a span is 1 or more`);
+        }
+        const entry = { position: index + 1, first, span };
+        first += span;
+        return entry;
+    });
+    if (first !== columns.length) {
+        throw new Error(`ListTable: the groups cover ${first} columns, the table has ${columns.length}; cover each column once`);
+    }
+    for (const { first: start, span } of layout) {
+        if (span === 1)
+            continue;
+        const hidden = columns.slice(start, start + span).findIndex((c) => c.hideBelow);
+        if (hidden >= 0) {
+            throw new Error(`ListTable: column ${start + hidden + 1} hides, but sits under a group of ${span}; a column under a group of several never hides`);
+        }
+    }
+    return layout;
+}
+/** `display: none` below the breakpoint, a table cell from it on. */
+function hideRules(cell, below) {
+    const width = COLUMN_BREAKPOINTS[below];
+    return [
+        `${cell} { display: none; }`,
+        `@container (min-width: ${width}) { ${cell} { display: table-cell; } }`,
+    ];
+}
+/**
+ * The scoped rules of one table: hidden columns per container width and the
+ * pinned action column. Rows are hand-composed, so the rules address cell
+ * POSITIONS (`tr > :nth-child(n)`) — one cell per column, as every list
+ * renders them — and a row cannot drift from its header. The group row (if
+ * any) is addressed by its own positions: a group of one follows its column.
+ */
+export function listTableCss(scope, columns, groups) {
+    const at = `[data-list-table="${scope}"]`;
+    const rows = groups ? `${at} tr:not([data-list-table-groups])` : `${at} tr`;
+    const groupRow = `${at} tr[data-list-table-groups]`;
+    const layout = groups ? groupLayout(columns, groups) : [];
+    /** The group-row cell over column `index` when it heads that column alone. */
+    const ownGroupCell = (index) => {
+        const group = layout.find((g) => g.first === index && g.span === 1);
+        return group ? `${groupRow} > :nth-child(${group.position})` : undefined;
+    };
+    const rules = [];
+    columns.forEach((column, index) => {
+        const cells = [`${rows} > :nth-child(${index + 1})`, ownGroupCell(index)].filter((cell) => cell !== undefined);
+        if (column.hideBelow) {
+            for (const cell of cells)
+                rules.push(...hideRules(cell, column.hideBelow));
+        }
+        if (column.sticky && index === columns.length - 1) {
+            if (groups && !ownGroupCell(index)) {
+                throw new Error("ListTable: the pinned last column needs a group of its own");
+            }
+            // The pinned cell paints its ROW's background (`inherit`), so a row's
+            // hover, selection or dimming covers it too. Rows get the surface as a
+            // default of zero specificity (`:where`): a row's own class wins, and
+            // a table on another surface sets `--list-table-surface`.
+            rules.push(`:where(${at} tbody tr) { background-color: var(--list-table-surface, var(--card)); }`, `:where(${at} thead tr) { background-color: var(--muted); }`, ...cells.map((cell) => `${cell} { position: sticky; right: 0; z-index: 1; background-color: inherit; }`));
+        }
+    });
+    return rules.join("\n");
+}
+/**
+ * The group row: a head per group, an empty cell over a column in none. A
+ * head is a column header (`scope="col"`) spanning its columns: the HTML
+ * table model assigns it to every cell below the columns it spans.
+ * `scope="colgroup"` would need a `<colgroup>` element to anchor it, and the
+ * table has none (a `<col>` element also keeps a hidden column in the table
+ * model).
+ */
+function GroupRow({ groups }) {
+    return (_jsx("tr", { "data-list-table-groups": "", children: groups.map((group, index) => group.label === undefined ? (_jsx("td", { colSpan: group.span ?? 1, className: "border-border border-t" }, index)) : (_jsx("th", { scope: "col", colSpan: group.span ?? 1, className: cn("border-border text-foreground border-t border-l px-4 pt-2.5 pb-1 text-center", MICRO_LABEL), children: group.label }, index))) }));
+}
+/**
+ * The cockpit table FRAME — the scroll region, the `<table>`/`<thead>` and
+ * the `Th` header row every list used to hand-copy. Rows stay hand-composed
+ * `<tr>` + `Td` per widget, because the cells are where lists legitimately
+ * differ (badges, inline mutations, AI hand-offs). Pair with
+ * {@link TableEmptyState} instead of rendering an empty frame.
+ *
+ * The table never widens the document: it scrolls sideways inside a named,
+ * keyboard-reachable region (`role="region"`, `tabIndex=0`, WCAG 1.4.10 and
+ * 2.1.1), its row actions can stay pinned at the right edge (`sticky` on the
+ * last column), and columns a reader can do without hide in a narrow region
+ * (`hideBelow`). Dense table text: 14 px (`text-dense`, the product exception
+ * of the type scale), heads 13 px semibold.
+ *
+ * Inline in a chat (#396) it shows the head of its rows, as many as fit the
+ * view's height budget (`useInlineRows`, measured on the rendered view), and
+ * a last row says how many there are and offers the rest: fullscreen where
+ * the host offers it, else the next rows in place. A paged list fits its rows
+ * as one list (`PagedRows`): a table inside one is never capped twice, it
+ * hands its body to the paged list's fit instead.
+ */
+export function ListTable({ columns, groups, ariaLabel, className, children, }) {
+    const scope = useId();
+    const css = listTableCss(scope, columns, groups);
+    const budget = useInlineBudget();
+    const paged = useRowsBudgeted();
+    const rows = Children.toArray(children);
+    const own = useInlineRows(rows.length, { enabled: paged === null });
+    const cap = paged ? null : own.cap;
+    const capped = cap !== null && rows.length > cap;
+    const showMore = budget.expand ?? (() => own.reveal(own.step));
+    return (_jsxs("div", { className: "relative w-full min-w-0", children: [_jsxs("div", { role: "region", "aria-label": ariaLabel, 
+                // A scrollable region must be reachable by keyboard to scroll it.
+                tabIndex: 0, "data-list-table": scope, className: "peer @container w-full min-w-0 overflow-x-auto rounded-sm focus-visible:outline-hidden", children: [css && _jsx("style", { children: css }), _jsxs("table", { className: cn("text-dense w-full border-collapse", className), "aria-label": ariaLabel, children: [_jsxs("thead", { className: "bg-muted", children: [groups && _jsx(GroupRow, { groups: groups }), _jsx("tr", { children: columns.map((column, index) => (_jsx(Th, { align: column.align, plain: column.plain, sort: column.sort, className: column.className, children: column.label }, index))) })] }), _jsx("tbody", { ref: paged ? paged.attachRows : own.attachRows, children: capped ? rows.slice(0, cap) : rows }), capped && (_jsx(MoreRows, { colSpan: columns.length, shown: cap, total: rows.length, fullscreen: budget.expand !== null, onShowMore: showMore }))] })] }), _jsx("span", { "aria-hidden": "true", "data-list-table-ring": "", className: cn(RING_LAYER, REGION_FOCUS_RING) })] }));
+}
+/**
+ * The last row of an inline table with more rows than its budget: how many
+ * it shows, and the way to the rest. A footer of its own (`<tfoot>`), so the
+ * position rules of the body rows never address it; its one cell spans every
+ * column and always shows (`display` set on the cell beats a hidden column's
+ * rule).
+ */
+function MoreRows({ colSpan, shown, total, fullscreen, onShowMore, }) {
+    const labels = kitLabels(useLocale());
+    return (_jsx("tfoot", { children: _jsx("tr", { "data-list-table-more": "", children: _jsx("td", { colSpan: colSpan, style: { display: "table-cell" }, className: "border-border border-t px-4 py-2", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-small", "aria-live": "polite", children: labels.rowsShown({ shown: formatNumber(shown), total: formatNumber(total) }) }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onShowMore, children: [fullscreen && _jsx(Icon, { icon: Maximize2, dense: true }), fullscreen ? labels.showAll : labels.showMore] })] }) }) }) }));
+}
+//# sourceMappingURL=list-table.js.map

package/dist/ui/list-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-table.js","sourceRoot":"","sources":["../../src/ui/list-table.tsx"],"names":[],"mappings":"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"}

package/dist/ui/list-table.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=list-table.test.d.ts.map

package/dist/ui/list-table.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-table.test.d.ts","sourceRoot":"","sources":["../../src/ui/list-table.test.tsx"],"names":[],"mappings":""}

package/dist/ui/list-table.test.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { COLUMN_BREAKPOINTS, ListTable, listTableCss, REGION_FOCUS_RING, } from "./list-table.js";
+import { Td } from "./table.js";
+afterEach(cleanup);
+const COLUMNS = [
+    { label: "Activity" },
+    { label: "Process", hideBelow: "sm" },
+    { label: "Created", align: "right", hideBelow: "md" },
+    { plain: true, sticky: true },
+];
+function Jobs() {
+    return (_jsx(ListTable, { ariaLabel: "Failed jobs", columns: COLUMNS, children: _jsxs("tr", { children: [_jsx(Td, { children: "Send invoice" }), _jsx(Td, { children: "invoice" }), _jsx(Td, { align: "right", children: "10:00" }), _jsx(Td, { align: "right", children: _jsx("button", { type: "button", children: "Retry" }) })] }) }));
+}
+describe("ListTable: the table never widens the document (U2, WCAG 1.4.10)", () => {
+    it("scrolls inside a named region a keyboard can reach", () => {
+        render(_jsx(Jobs, {}));
+        const region = screen.getByRole("region", { name: "Failed jobs" });
+        expect(region.getAttribute("tabindex")).toBe("0");
+        expect(region.className).toContain("overflow-x-auto");
+        // A container: the column priorities read the REGION's width.
+        expect(region.className).toContain("@container");
+        expect(region.className).toContain("min-w-0");
+        expect(region.contains(screen.getByRole("table", { name: "Failed jobs" }))).toBe(true);
+    });
+    it("draws its focus ring inside its own box, where no clipping wrapper can cut it", () => {
+        render(_jsx(Jobs, {}));
+        const region = screen.getByRole("region");
+        const regionClasses = region.className.split(/\s+/);
+        // The region is the peer and draws no ring of its own: the toolkit's
+        // outset ring is cut away by the `overflow-hidden` cards it fills edge
+        // to edge (shell:data-table, history), and the pinned column covers an
+        // outline of the region itself.
+        expect(regionClasses).toContain("peer");
+        expect(regionClasses.some((c) => c.includes("ring"))).toBe(false);
+        // The ring: the region's next sibling, over its box, inside its edge,
+        // above the pinned column, never in the accessibility tree or a click's way.
+        const ring = region.nextElementSibling;
+        expect(ring.hasAttribute("data-list-table-ring")).toBe(true);
+        expect(ring.getAttribute("aria-hidden")).toBe("true");
+        const ringClasses = ring.className.split(/\s+/);
+        for (const name of REGION_FOCUS_RING.split(" "))
+            expect(ringClasses).toContain(name);
+        expect(ringClasses).toEqual(expect.arrayContaining([
+            "peer-focus-visible:-outline-offset-2",
+            "absolute",
+            "inset-0",
+            "z-[2]",
+            "pointer-events-none",
+        ]));
+        // Its frame does not scroll, so the ring stays put while the table does.
+        expect(region.parentElement.className.split(/\s+/)).toContain("relative");
+        expect(region.parentElement.className).not.toContain("overflow");
+    });
+    it("sets the rows in the dense table step, the heads in the 13 px caption", () => {
+        render(_jsx(Jobs, {}));
+        expect(screen.getByRole("table").className).toContain("text-dense");
+        const head = screen.getByRole("columnheader", { name: "Activity" });
+        expect(head.className).toContain("text-small");
+        expect(head.className).toContain("font-semibold");
+        expect(screen.getByRole("cell", { name: "Send invoice" }).className).toContain("text-dense");
+    });
+    it("hides low-priority columns and pins the actions through rules scoped to this table", () => {
+        const { container } = render(_jsx(Jobs, {}));
+        const region = screen.getByRole("region");
+        const scope = region.getAttribute("data-list-table");
+        const css = container.querySelector("style")?.textContent ?? "";
+        expect(css).toBe(listTableCss(scope, COLUMNS));
+        const at = `[data-list-table="${scope}"]`;
+        expect(css).toContain(`${at} tr > :nth-child(2) { display: none; }`);
+        expect(css).toContain(`@container (min-width: ${COLUMN_BREAKPOINTS.sm}) { ${at} tr > :nth-child(2) { display: table-cell; } }`);
+        expect(css).toContain(`@container (min-width: 48rem) { ${at} tr > :nth-child(3)`);
+        // The pinned cell paints its row's background, so a hovered, selected or
+        // dimmed row covers it too; the rows' default surface has no specificity,
+        // so a row's own class wins.
+        expect(css).toContain(`${at} tr > :nth-child(4) { position: sticky; right: 0; z-index: 1; background-color: inherit; }`);
+        expect(css).toContain(`:where(${at} tbody tr) { background-color: var(--list-table-surface, var(--card)); }`);
+        expect(css).toContain(`:where(${at} thead tr) { background-color: var(--muted); }`);
+    });
+    it("scopes each table on its own", () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Jobs, {}), _jsx(Jobs, {})] }));
+        const [a, b] = screen.getAllByRole("region");
+        expect(a.getAttribute("data-list-table")).not.toBe(b.getAttribute("data-list-table"));
+    });
+    it("renders no stylesheet for a table without priorities or pinned actions", () => {
+        const { container } = render(_jsx(ListTable, { ariaLabel: "Plain", columns: [{ label: "A" }, { label: "B" }], children: _jsxs("tr", { children: [_jsx(Td, { children: "a" }), _jsx(Td, { children: "b" })] }) }));
+        expect(container.querySelector("style")).toBeNull();
+    });
+});
+describe("listTableCss", () => {
+    it("pins only the LAST column, the row actions", () => {
+        const css = listTableCss("s", [{ label: "A", sticky: true }, { label: "B" }]);
+        expect(css).toBe("");
+    });
+    it("maps each breakpoint to its container width", () => {
+        for (const [name, width] of Object.entries(COLUMN_BREAKPOINTS)) {
+            const css = listTableCss("s", [
+                { label: "A", hideBelow: name },
+            ]);
+            expect(css).toContain(`@container (min-width: ${width})`);
+        }
+        expect(COLUMN_BREAKPOINTS).toEqual({ sm: "40rem", md: "48rem", lg: "64rem" });
+    });
+});
+const GROUPED = [
+    { label: "Engine" },
+    { label: "Running", align: "right" },
+    { label: "Incidents", align: "right" },
+    { label: "Executable", align: "right" },
+    { label: "Definitions", align: "right", hideBelow: "md" },
+    { plain: true, sticky: true },
+];
+describe("ListTable: column groups (a head over adjacent columns)", () => {
+    function Grouped() {
+        return (_jsx(ListTable, { ariaLabel: "Engines", columns: GROUPED, groups: [{}, { label: "Load", span: 2 }, { label: "Backlog" }, {}, {}], children: _jsxs("tr", { children: [_jsx(Td, { children: "prod" }), _jsx(Td, { align: "right", children: "1" }), _jsx(Td, { align: "right", children: "2" }), _jsx(Td, { align: "right", children: "3" }), _jsx(Td, { align: "right", children: "4" }), _jsx(Td, { align: "right", children: _jsx("button", { type: "button", children: "Compare" }) })] }) }));
+    }
+    it("heads the groups in a row above the column heads, each over its columns", () => {
+        render(_jsx(Grouped, {}));
+        const rows = screen.getByRole("table").querySelectorAll("thead tr");
+        expect(rows).toHaveLength(2);
+        const groupRow = rows[0];
+        expect(groupRow.hasAttribute("data-list-table-groups")).toBe(true);
+        const load = screen.getByRole("columnheader", { name: "Load" });
+        // A column header over the columns it spans: `colgroup` needs a
+        // `<colgroup>` element to anchor it, which the table does not have.
+        expect(load.getAttribute("scope")).toBe("col");
+        expect(load.getAttribute("colspan")).toBe("2");
+        expect(screen.getByRole("table").querySelector("colgroup, [scope='colgroup']")).toBeNull();
+        expect(screen.getByRole("columnheader", { name: "Backlog" }).getAttribute("colspan")).toBe("1");
+        // A column in no group gets an empty cell, not an empty header.
+        expect(groupRow.querySelectorAll("td")).toHaveLength(3);
+    });
+    it("keeps the column rules off the group row and lets a group of one follow its column", () => {
+        const { container } = render(_jsx(Grouped, {}));
+        const scope = screen.getByRole("region").getAttribute("data-list-table");
+        const at = `[data-list-table="${scope}"]`;
+        const css = container.querySelector("style")?.textContent ?? "";
+        expect(css).toContain(`${at} tr:not([data-list-table-groups]) > :nth-child(5) { display: none; }`);
+        // "Definitions" is column 5 and the group row's 4th cell.
+        expect(css).toContain(`${at} tr[data-list-table-groups] > :nth-child(4) { display: none; }`);
+        expect(css).toContain(`${at} tr[data-list-table-groups] > :nth-child(5) { position: sticky; right: 0; z-index: 1; background-color: inherit; }`);
+    });
+    it("refuses groups that do not cover each column once, or a hidden column in a span", () => {
+        expect(() => listTableCss("s", GROUPED, [{ span: 2 }])).toThrow(/cover 2 columns.*has 6/);
+        expect(() => listTableCss("s", GROUPED, [{ span: 0 }, { span: 6 }])).toThrow(/spans 0/);
+        expect(() => listTableCss("s", GROUPED, [{}, {}, {}, { label: "Mixed", span: 2 }, {}])).toThrow(/column 5 hides, but sits under a group of 2/);
+        const shown = GROUPED.map((column) => ({ ...column, hideBelow: undefined }));
+        expect(() => listTableCss("s", shown, [{}, {}, {}, {}, { label: "End", span: 2 }])).toThrow(/pinned last column needs a group of its own/);
+    });
+});
+describe("ListTable: the sorted column", () => {
+    it("says the order in aria-sort and with a direction arrow", () => {
+        render(_jsx(ListTable, { ariaLabel: "Activities", columns: [
+                { label: "Activity" },
+                { label: "Total time", align: "right", sort: "descending" },
+                { label: "Name", sort: "ascending" },
+            ], children: _jsxs("tr", { children: [_jsx(Td, { children: "a" }), _jsx(Td, { align: "right", children: "1" }), _jsx(Td, { children: "n" })] }) }));
+        const total = screen.getByRole("columnheader", { name: "Total time" });
+        expect(total.getAttribute("aria-sort")).toBe("descending");
+        expect(total.querySelector("svg")?.getAttribute("class")).toContain("lucide-arrow-down");
+        expect(total.querySelector("span")?.className).toContain("flex-row-reverse");
+        const name = screen.getByRole("columnheader", { name: "Name" });
+        expect(name.querySelector("svg")?.getAttribute("class")).toContain("lucide-arrow-up");
+        expect(screen.getByRole("columnheader", { name: "Activity" }).hasAttribute("aria-sort")).toBe(false);
+    });
+});
+//# sourceMappingURL=list-table.test.js.map

package/dist/ui/list-table.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-table.test.js","sourceRoot":"","sources":["../../src/ui/list-table.test.tsx"],"names":[],"mappings":"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"}

package/dist/ui/localized-app-view.d.ts

@@ -0,0 +1,40 @@
+import { McpAppView, type DescribeViewError, type ViewTitleMode } from "@miragon/mcp-toolkit-ui/app";
+import { type ComponentProps } from "react";
+import { type ErrorKind, type ErrorSource } from "./describe-error.js";
+/**
+ * Whether the toolkit's toolbar shows the view title, so a view has ONE
+ * title: a module's own view (`<module>_show_*`, `camunda7_open_cockpit`)
+ * renders its widget's heading (`WidgetHeader`, the cockpit's navigation),
+ * so the toolbar hides the title there; a composed `render-view` keeps it.
+ * A host that does not name the rendering tool keeps the title too.
+ */
+export declare function viewTitleMode(toolName: string | undefined): ViewTitleMode;
+/**
+ * Whether a failure's next step needs no Retry button: check the engine or
+ * Prometheus, ask whoever runs the server, ask in the chat. Every other kit
+ * hint says "try again" (or "go back to the list"), which a view can only
+ * keep where it offers Retry. Pinned against the words themselves, in both
+ * languages, next to the describer's test.
+ */
+export declare function hintNeedsNoRetry(kind: ErrorKind, source: ErrorSource["type"]): boolean;
+/**
+ * The view's failed rendering call in the kit's words ({@link describeError}):
+ * "Die Engine prod ist nicht erreichbar (HTTP 503)", the raw reason staying
+ * under the toolkit's "Details". The view offers Retry only where the host
+ * named the originating tool, and its own hint knows which ("Ask in the chat
+ * to open this view again" without): the kit's next step replaces it only
+ * where it promises no retry ("Prüf, ob die Engine läuft …",
+ * {@link hintNeedsNoRetry}). A reason the kit cannot classify — and a result
+ * the chat did not pass on — keeps the toolkit's own words.
+ */
+export declare function viewErrorDescriber(locale: string | undefined): DescribeViewError;
+/**
+ * The toolkit's McpAppView as every composed-server view mounts it. Its chrome
+ * (loading, error and cancelled states, toolbar buttons) speaks the locale the
+ * ProfileGate provides through the toolkit's own en/de catalog, the
+ * Fullscreen toggle renders only where the host offers fullscreen, and Lucide
+ * icons draw at the CI stroke (all toolkit 2.7). What stays here is the title
+ * policy ({@link viewTitleMode}) and the error words ({@link viewErrorDescriber}).
+ */
+export declare function LocalizedAppView(props: Omit<ComponentProps<typeof McpAppView>, "titleMode" | "describeError">): import("react").JSX.Element;
+//# sourceMappingURL=localized-app-view.d.ts.map

package/dist/ui/localized-app-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"localized-app-view.d.ts","sourceRoot":"","sources":["../../src/ui/localized-app-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAA;AACpG,OAAO,EAAW,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAgC,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAUpG;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,aAAa,CAEzE;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,OAAO,CAGtF;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,CAShF;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,WAAW,GAAG,eAAe,CAAC,+BAM9E"}

package/dist/ui/localized-app-view.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLocale } from "@miragon/mcp-toolkit-ui";
+import { McpAppView } from "@miragon/mcp-toolkit-ui/app";
+import { useMemo } from "react";
+import { classifyError, describeError } from "./describe-error.js";
+import { useShellHost } from "./shell-host.js";
+/**
+ * The toolkit's framework view tool: a layout composed at call time (by the
+ * model or a saved dashboard), whose widgets carry no heading of their own
+ * (`shell:kpi-grid`, `shell:data-table`) — the view title is its one heading.
+ */
+const COMPOSED_VIEW_TOOLS = new Set(["render-view"]);
+/**
+ * Whether the toolkit's toolbar shows the view title, so a view has ONE
+ * title: a module's own view (`<module>_show_*`, `camunda7_open_cockpit`)
+ * renders its widget's heading (`WidgetHeader`, the cockpit's navigation),
+ * so the toolbar hides the title there; a composed `render-view` keeps it.
+ * A host that does not name the rendering tool keeps the title too.
+ */
+export function viewTitleMode(toolName) {
+    return toolName === undefined || COMPOSED_VIEW_TOOLS.has(toolName) ? "show" : "hide";
+}
+/**
+ * Whether a failure's next step needs no Retry button: check the engine or
+ * Prometheus, ask whoever runs the server, ask in the chat. Every other kit
+ * hint says "try again" (or "go back to the list"), which a view can only
+ * keep where it offers Retry. Pinned against the words themselves, in both
+ * languages, next to the describer's test.
+ */
+export function hintNeedsNoRetry(kind, source) {
+    if (kind === "unreachable")
+        return source !== "unknown";
+    return kind === "notOnServer" || kind === "unauthorized" || kind === "forbidden";
+}
+/**
+ * The view's failed rendering call in the kit's words ({@link describeError}):
+ * "Die Engine prod ist nicht erreichbar (HTTP 503)", the raw reason staying
+ * under the toolkit's "Details". The view offers Retry only where the host
+ * named the originating tool, and its own hint knows which ("Ask in the chat
+ * to open this view again" without): the kit's next step replaces it only
+ * where it promises no retry ("Prüf, ob die Engine läuft …",
+ * {@link hintNeedsNoRetry}). A reason the kit cannot classify — and a result
+ * the chat did not pass on — keeps the toolkit's own words.
+ */
+export function viewErrorDescriber(locale) {
+    return (reason, info) => {
+        if (info?.kind === "blocked" || !reason)
+            return undefined;
+        const described = describeError(reason, locale);
+        if (described.kind === "unknown")
+            return undefined;
+        return hintNeedsNoRetry(described.kind, classifyError(reason).source.type)
+            ? { title: described.title, description: described.hint }
+            : { title: described.title };
+    };
+}
+/**
+ * The toolkit's McpAppView as every composed-server view mounts it. Its chrome
+ * (loading, error and cancelled states, toolbar buttons) speaks the locale the
+ * ProfileGate provides through the toolkit's own en/de catalog, the
+ * Fullscreen toggle renders only where the host offers fullscreen, and Lucide
+ * icons draw at the CI stroke (all toolkit 2.7). What stays here is the title
+ * policy ({@link viewTitleMode}) and the error words ({@link viewErrorDescriber}).
+ */
+export function LocalizedAppView(props) {
+    const { toolName } = useShellHost();
+    const locale = useLocale();
+    const describe = useMemo(() => viewErrorDescriber(locale), [locale]);
+    return _jsx(McpAppView, { ...props, titleMode: viewTitleMode(toolName), describeError: describe });
+}
+//# sourceMappingURL=localized-app-view.js.map

package/dist/ui/localized-app-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"localized-app-view.js","sourceRoot":"","sources":["../../src/ui/localized-app-view.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAE,UAAU,EAA8C,MAAM,6BAA6B,CAAA;AACpG,OAAO,EAAE,OAAO,EAAuB,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAoC,MAAM,qBAAqB,CAAA;AACpG,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C;;;;GAIG;AACH,MAAM,mBAAmB,GAAwB,IAAI,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAA;AAEzE;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,QAA4B;IACxD,OAAO,QAAQ,KAAK,SAAS,IAAI,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;AACtF,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,IAAe,EAAE,MAA2B;IAC3E,IAAI,IAAI,KAAK,aAAa;QAAE,OAAO,MAAM,KAAK,SAAS,CAAA;IACvD,OAAO,IAAI,KAAK,aAAa,IAAI,IAAI,KAAK,cAAc,IAAI,IAAI,KAAK,WAAW,CAAA;AAClF,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,kBAAkB,CAAC,MAA0B;IAC3D,OAAO,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;QACtB,IAAI,IAAI,EAAE,IAAI,KAAK,SAAS,IAAI,CAAC,MAAM;YAAE,OAAO,SAAS,CAAA;QACzD,MAAM,SAAS,GAAG,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QAC/C,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS;YAAE,OAAO,SAAS,CAAA;QAClD,OAAO,gBAAgB,CAAC,SAAS,CAAC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;YACxE,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,IAAI,EAAE;YACzD,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAA;IAChC,CAAC,CAAA;AACH,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAA6E;IAE7E,MAAM,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAE,CAAA;IACnC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IACpE,OAAO,KAAC,UAAU,OAAK,KAAK,EAAE,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,QAAQ,GAAI,CAAA;AAC/F,CAAC"}

package/dist/ui/log-text.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Above this length a log/error text renders as an expandable disclosure
+ * instead of a plain line. THE single truncation policy for engine error
+ * messages — widgets previously cut at 50/60/160 chars each with their own
+ * markup.
+ */
+export declare const LOG_TEXT_PREVIEW = 160;
+/**
+ * The ONE frame for unbounded secondary text — an expanded log line, a stack
+ * trace, a variable value (#396): at most 320 px tall, scrolling inside. Text
+ * like this has no natural place to cut, so it scrolls; primary lists never
+ * do (they show the head of their rows, `useInlineBudget`).
+ */
+export declare const TEXT_BLOCK_FRAME = "max-h-80 overflow-auto";
+/**
+ * Canonical rendering for untrusted log-ish text (incident messages, exception
+ * traces): muted mono, em-dash when empty, single truncated line that expands
+ * to a bordered scrollable <pre> when longer than {@link LOG_TEXT_PREVIEW}.
+ */
+export declare function LogText({ text, className, }: {
+    text: string | null | undefined;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=log-text.d.ts.map

package/dist/ui/log-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-text.d.ts","sourceRoot":"","sources":["../../src/ui/log-text.tsx"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,MAAM,CAAA;AAEnC;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,2BAA2B,CAAA;AAExD;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,SAAS,GACV,EAAE;IACD,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,+BAwBA"}

package/dist/ui/log-text.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@miragon/mcp-toolkit-ui";
+import { truncate } from "./format.js";
+/**
+ * Above this length a log/error text renders as an expandable disclosure
+ * instead of a plain line. THE single truncation policy for engine error
+ * messages — widgets previously cut at 50/60/160 chars each with their own
+ * markup.
+ */
+export const LOG_TEXT_PREVIEW = 160;
+/**
+ * The ONE frame for unbounded secondary text — an expanded log line, a stack
+ * trace, a variable value (#396): at most 320 px tall, scrolling inside. Text
+ * like this has no natural place to cut, so it scrolls; primary lists never
+ * do (they show the head of their rows, `useInlineBudget`).
+ */
+export const TEXT_BLOCK_FRAME = "max-h-80 overflow-auto";
+/**
+ * Canonical rendering for untrusted log-ish text (incident messages, exception
+ * traces): muted mono, em-dash when empty, single truncated line that expands
+ * to a bordered scrollable <pre> when longer than {@link LOG_TEXT_PREVIEW}.
+ */
+export function LogText({ text, className, }) {
+    if (!text)
+        return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+    if (text.length <= LOG_TEXT_PREVIEW) {
+        return (_jsx("p", { className: cn("text-muted-foreground text-small font-mono break-words", className), children: text }));
+    }
+    return (_jsxs("details", { className: className, children: [_jsx("summary", { className: "text-muted-foreground text-small w-full cursor-pointer truncate rounded-sm font-mono", children: truncate(text, LOG_TEXT_PREVIEW) }), _jsx("pre", { className: cn("bg-muted border-border text-small mt-1 rounded-sm border p-2 font-mono whitespace-pre-wrap", TEXT_BLOCK_FRAME), children: text })] }));
+}
+//# sourceMappingURL=log-text.js.map

package/dist/ui/log-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-text.js","sourceRoot":"","sources":["../../src/ui/log-text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;AAEnC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,wBAAwB,CAAA;AAExD;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,EACJ,SAAS,GAIV;IACC,IAAI,CAAC,IAAI;QAAE,OAAO,eAAM,SAAS,EAAC,uBAAuB,uBAAS,CAAA;IAClE,IAAI,IAAI,CAAC,MAAM,IAAI,gBAAgB,EAAE,CAAC;QACpC,OAAO,CACL,YAAG,SAAS,EAAE,EAAE,CAAC,wDAAwD,EAAE,SAAS,CAAC,YAClF,IAAI,GACH,CACL,CAAA;IACH,CAAC;IACD,OAAO,CACL,mBAAS,SAAS,EAAE,SAAS,aAC3B,kBAAS,SAAS,EAAC,sFAAsF,YACtG,QAAQ,CAAC,IAAI,EAAE,gBAAgB,CAAC,GACzB,EACV,cACE,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,gBAAgB,CACjB,YAEA,IAAI,GACD,IACE,CACX,CAAA;AACH,CAAC"}

package/dist/ui/menu-item.d.ts

@@ -0,0 +1,12 @@
+/**
+ * One entry of an action menu (CI §8 "Menüs / Dropdowns"): an entry on the
+ * small radius in the dense text step, its icon in front, the blue-soft
+ * hover (`--accent`; in dark the lifted surface) and no button chrome of its
+ * own: the menu's card is the surface. The focused entry takes the same tint
+ * plus a ring drawn inside it, so a neighbouring entry never covers it.
+ *
+ * It goes with `role="menuitem"` and `tabIndex={-1}`: the menu moves the
+ * focus between its entries with the arrow keys, not with Tab.
+ */
+export declare const MENU_ITEM: string;
+//# sourceMappingURL=menu-item.d.ts.map

package/dist/ui/menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/ui/menu-item.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,QAKrB,CAAA"}

package/dist/ui/menu-item.js

@@ -0,0 +1,13 @@
+import { cn, FOCUS_RING_INSET } from "@miragon/mcp-toolkit-ui";
+/**
+ * One entry of an action menu (CI §8 "Menüs / Dropdowns"): an entry on the
+ * small radius in the dense text step, its icon in front, the blue-soft
+ * hover (`--accent`; in dark the lifted surface) and no button chrome of its
+ * own: the menu's card is the surface. The focused entry takes the same tint
+ * plus a ring drawn inside it, so a neighbouring entry never covers it.
+ *
+ * It goes with `role="menuitem"` and `tabIndex={-1}`: the menu moves the
+ * focus between its entries with the arrow keys, not with Tab.
+ */
+export const MENU_ITEM = cn("text-foreground text-dense flex w-full items-center gap-2 rounded-sm px-2.5 py-1.5 text-start font-medium whitespace-nowrap transition-colors", "hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground", "disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0", FOCUS_RING_INSET);
+//# sourceMappingURL=menu-item.js.map

package/dist/ui/menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../src/ui/menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE9D;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,EAAE,CACzB,+IAA+I,EAC/I,2GAA2G,EAC3G,mEAAmE,EACnE,gBAAgB,CACjB,CAAA"}