@miragon/pulse-widget-shell 0.0.0-bootstrap.0 → 0.21.0

package/dist/ui/host-document.test.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { LocaleProvider } from "@miragon/mcp-toolkit-ui";
+import { SERVED_FONTS_STYLE_ID } from "./declare-served-fonts.js";
+import { HostDocument } from "./host-document.js";
+import { viewTitleMode } from "./localized-app-view.js";
+import { BpmnZoomControls } from "./bpmn-zoom-controls.js";
+import { ShellHostProvider } from "./shell-host.js";
+const BASE = { connected: true, displayMode: "inline", availableDisplayModes: [] };
+function renderDocument(host) {
+    return render(_jsx(ShellHostProvider, { host: { ...BASE, ...host }, children: _jsx(HostDocument, { children: _jsx("p", { "data-testid": "content", children: "content" }) }) }));
+}
+const wrapper = () => screen.getByTestId("content").parentElement;
+afterEach(() => {
+    cleanup();
+    document.documentElement.removeAttribute("style");
+    document.body.removeAttribute("style");
+    document.getElementById("__mcp-host-fonts")?.remove();
+    document.getElementById(SERVED_FONTS_STYLE_ID)?.remove();
+    delete globalThis.__mcpUseViewConfig;
+});
+describe("HostDocument", () => {
+    it("lets an inline view size to its content — no box, no floor", () => {
+        renderDocument({});
+        expect(wrapper().style.display).toBe("contents");
+        expect(wrapper().style.maxHeight).toBe("");
+        expect(document.documentElement.style.height).toBe("");
+    });
+    it("scrolls inside the host's height budget instead of being clipped", () => {
+        renderDocument({ maxHeight: 320 });
+        expect(wrapper().style.maxHeight).toBe("320px");
+        expect(wrapper().style.overflowY).toBe("auto");
+    });
+    it("fills the viewport in fullscreen and PiP, and restores the document on exit", () => {
+        const { unmount } = renderDocument({ displayMode: "fullscreen", maxHeight: 320 });
+        expect(document.documentElement.style.height).toBe("100%");
+        expect(document.body.style.minHeight).toBe("100%");
+        expect(wrapper().style.display).toBe("flex");
+        unmount();
+        expect(document.documentElement.style.height).toBe("");
+        renderDocument({ displayMode: "pip" });
+        expect(document.body.style.height).toBe("100%");
+    });
+    it("applies the host's style variables to <html> and injects its font CSS once", () => {
+        renderDocument({
+            styleVariables: {
+                "--color-text-primary": "#f5f4ef",
+                "--font-sans": "HostSans",
+                "--font-mono": undefined,
+            },
+            fontCss: "@font-face { font-family: HostSans; src: local(Arial); }",
+        });
+        const style = document.documentElement.style;
+        expect(style.getPropertyValue("--color-text-primary")).toBe("#f5f4ef");
+        // The host's font moves into the fallback slot of the theme's font roles
+        // (the toolkit's adoptHostFontVariables): Geist stays first in the stack,
+        // then the host's font, then the system.
+        expect(style.getPropertyValue("--host-font-sans")).toBe("HostSans");
+        expect(style.getPropertyValue("--font-sans")).toBe("");
+        expect(style.getPropertyValue("--host-font-mono")).toBe("");
+        expect(style.getPropertyValue("--font-mono")).toBe("");
+        cleanup();
+        renderDocument({ fontCss: "@font-face { font-family: Other; src: local(Arial); }" });
+        expect(document.querySelectorAll("#__mcp-host-fonts")).toHaveLength(1);
+    });
+    it("declares Geist from the server that served the view, before the host's font", () => {
+        globalThis.__mcpUseViewConfig = { publicBase: "https://mcp.example.com/mcp/_mcp-use/public/" };
+        renderDocument({ fontCss: "@font-face { font-family: HostSans; src: local(Arial); }" });
+        const served = document.getElementById(SERVED_FONTS_STYLE_ID);
+        expect(served.textContent).toContain('url("https://mcp.example.com/fonts/geist-5.3.0/geist-latin-wght-normal.woff2")');
+        const styles = [...document.head.querySelectorAll("style")].map((style) => style.id);
+        expect(styles.indexOf(SERVED_FONTS_STYLE_ID)).toBeLessThan(styles.indexOf("__mcp-host-fonts"));
+    });
+    it("declares no face outside a served view document", () => {
+        renderDocument({});
+        expect(document.getElementById(SERVED_FONTS_STYLE_ID)).toBeNull();
+    });
+});
+describe("viewTitleMode (one title per view)", () => {
+    it("hides the toolbar title over a module's view, whose widget renders its own heading", () => {
+        for (const tool of [
+            "camunda7_show_process_list",
+            "camunda7_open_cockpit",
+            "analytics_show_dashboard",
+            "notes_show_list",
+        ]) {
+            expect(viewTitleMode(tool)).toBe("hide");
+        }
+    });
+    it("keeps it over a composed render-view and where the host does not name the tool", () => {
+        expect(viewTitleMode("render-view")).toBe("show");
+        expect(viewTitleMode(undefined)).toBe("show");
+    });
+});
+describe("BpmnZoomControls", () => {
+    const noop = () => { };
+    it("names its buttons in the active locale, overridable per prop", () => {
+        render(_jsx(LocaleProvider, { locale: "de", children: _jsx(BpmnZoomControls, { onZoomIn: noop, onZoomOut: noop, onFit: noop, labels: { fit: "Passend" } }) }));
+        expect(screen.getByRole("button", { name: "Vergrößern" })).toBeTruthy();
+        expect(screen.getByRole("button", { name: "Verkleinern" })).toBeTruthy();
+        expect(screen.getByRole("button", { name: "Passend" })).toBeTruthy();
+    });
+    it("sits top-right, clear of the bpmn.io logo bpmn-js pins bottom-right", () => {
+        render(_jsx(BpmnZoomControls, { onZoomIn: noop, onZoomOut: noop, onFit: noop }));
+        const bar = screen.getByRole("button", { name: "Zoom in" }).parentElement;
+        expect(bar.className).toContain("top-3");
+        expect(bar.className).not.toContain("bottom-");
+    });
+});
+//# sourceMappingURL=host-document.test.js.map

package/dist/ui/host-document.test.js.map

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

package/dist/ui/host-widgets.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import type { WidgetComponent } from "@miragon/mcp-toolkit-ui/app";
+export declare function HostWidgetsProvider({ widgets, children, }: {
+    widgets: Record<string, WidgetComponent>;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useHostWidgets(): Record<string, WidgetComponent>;
+//# sourceMappingURL=host-widgets.d.ts.map

package/dist/ui/host-widgets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"host-widgets.d.ts","sourceRoot":"","sources":["../../src/ui/host-widgets.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAYlE,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IACxC,QAAQ,EAAE,SAAS,CAAA;CACpB,+BAEA;AAED,wBAAgB,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAEhE"}

package/dist/ui/host-widgets.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+/**
+ * The host bundle's full widget registry, provided at the app root so
+ * composed views (the cockpit's settings tab) can render OTHER modules'
+ * section widgets by raw id without a module-to-module import — the UI half
+ * of the tier-2 cross-module pattern. Default is empty: a layout cell whose
+ * id resolves nowhere is dropped by the consumer, so a host that provides no
+ * registry degrades to "own widgets only" instead of erroring.
+ */
+const HostWidgetsContext = createContext({});
+export function HostWidgetsProvider({ widgets, children, }) {
+    return _jsx(HostWidgetsContext.Provider, { value: widgets, children: children });
+}
+export function useHostWidgets() {
+    return useContext(HostWidgetsContext);
+}
+//# sourceMappingURL=host-widgets.js.map

package/dist/ui/host-widgets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host-widgets.js","sourceRoot":"","sources":["../../src/ui/host-widgets.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AAGjE;;;;;;;GAOG;AACH,MAAM,kBAAkB,GAAG,aAAa,CAAkC,EAAE,CAAC,CAAA;AAE7E,MAAM,UAAU,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,GAIT;IACC,OAAO,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAAG,QAAQ,GAA+B,CAAA;AAC9F,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,OAAO,UAAU,CAAC,kBAAkB,CAAC,CAAA;AACvC,CAAC"}

package/dist/ui/humanize-key.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A record key as a header people read, in sentence case: camelCase,
+ * snake_case and kebab-case split into words, the words lower case, the
+ * first letter capital, acronyms kept — `totalIncidents` → "Total
+ * incidents", `process_definition_key` → "Process definition key",
+ * `processURLKey` → "Process URL key". A key that already reads as words
+ * stays as written ("Offene Incidents" keeps its German capitals); one
+ * without any letter or digit stays as it is.
+ */
+export declare function humanizeKey(key: string): string;
+//# sourceMappingURL=humanize-key.d.ts.map

package/dist/ui/humanize-key.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"humanize-key.d.ts","sourceRoot":"","sources":["../../src/ui/humanize-key.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAa/C"}

package/dist/ui/humanize-key.js

@@ -0,0 +1,26 @@
+/**
+ * A record key as a header people read, in sentence case: camelCase,
+ * snake_case and kebab-case split into words, the words lower case, the
+ * first letter capital, acronyms kept — `totalIncidents` → "Total
+ * incidents", `process_definition_key` → "Process definition key",
+ * `processURLKey` → "Process URL key". A key that already reads as words
+ * stays as written ("Offene Incidents" keeps its German capitals); one
+ * without any letter or digit stays as it is.
+ */
+export function humanizeKey(key) {
+    if (/\S\s+\S/.test(key))
+        return key.trim();
+    const words = key
+        // camelCase: "totalIncidents" → "total Incidents"
+        .replace(/([a-z\d])([A-Z])/g, "$1 $2")
+        // an acronym before a word: "URLKey" → "URL Key"
+        .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2")
+        .split(/[\s_-]+/)
+        .filter((word) => word.length > 0)
+        .map((word) => (/^[A-Z][A-Z\d]+$/.test(word) ? word : word.toLowerCase()));
+    if (words.length === 0)
+        return key;
+    const sentence = words.join(" ");
+    return sentence.charAt(0).toUpperCase() + sentence.slice(1);
+}
+//# sourceMappingURL=humanize-key.js.map

package/dist/ui/humanize-key.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"humanize-key.js","sourceRoot":"","sources":["../../src/ui/humanize-key.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,UAAU,WAAW,CAAC,GAAW;IACrC,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;QAAE,OAAO,GAAG,CAAC,IAAI,EAAE,CAAA;IAC1C,MAAM,KAAK,GAAG,GAAG;QACf,kDAAkD;SACjD,OAAO,CAAC,mBAAmB,EAAE,OAAO,CAAC;QACtC,iDAAiD;SAChD,OAAO,CAAC,uBAAuB,EAAE,OAAO,CAAC;SACzC,KAAK,CAAC,SAAS,CAAC;SAChB,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;SACjC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAA;IAC5E,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,GAAG,CAAA;IAClC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAChC,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;AAC7D,CAAC"}

package/dist/ui/humanize-key.test.d.ts

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

package/dist/ui/humanize-key.test.d.ts.map

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

package/dist/ui/humanize-key.test.js

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { humanizeKey } from "./humanize-key.js";
+/**
+ * A derived `shell:data-table` header is read by people: "Total incidents",
+ * never the record key `totalIncidents` (#322 U18, en sentence case).
+ */
+describe("humanizeKey", () => {
+    it.each([
+        ["totalIncidents", "Total incidents"],
+        ["processDefinitionKey", "Process definition key"],
+        ["process", "Process"],
+        ["running", "Running"],
+        ["process_definition_key", "Process definition key"],
+        ["incident-count", "Incident count"],
+        ["__private__key", "Private key"],
+        ["Total", "Total"],
+        ["TotalIncidents", "Total incidents"],
+        ["p95Latency", "P95 latency"],
+        ["latencyP95", "Latency P95"],
+        ["errorRate2h", "Error rate2h"],
+        ["processURLKey", "Process URL key"],
+        ["slaURL", "Sla URL"],
+        ["ID", "ID"],
+        ["id", "Id"],
+        ["pageX", "Page x"],
+        ["UPPER_CASE_KEY", "UPPER CASE KEY"],
+    ])("%s → %s", (key, header) => {
+        expect(humanizeKey(key)).toBe(header);
+    });
+    it("keeps a key that already reads as words, as written", () => {
+        expect(humanizeKey("Open incidents")).toBe("Open incidents");
+        expect(humanizeKey("Offene Incidents")).toBe("Offene Incidents");
+        expect(humanizeKey("  SLA breaches ")).toBe("SLA breaches");
+        expect(humanizeKey("Open  incidents")).toBe("Open  incidents");
+    });
+    it("keeps a key without any word in it", () => {
+        expect(humanizeKey("_")).toBe("_");
+        expect(humanizeKey("-")).toBe("-");
+        expect(humanizeKey(" ")).toBe(" ");
+    });
+});
+//# sourceMappingURL=humanize-key.test.js.map

package/dist/ui/humanize-key.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"humanize-key.test.js","sourceRoot":"","sources":["../../src/ui/humanize-key.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C;;;GAGG;AACH,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,IAAI,CAAC;QACN,CAAC,gBAAgB,EAAE,iBAAiB,CAAC;QACrC,CAAC,sBAAsB,EAAE,wBAAwB,CAAC;QAClD,CAAC,SAAS,EAAE,SAAS,CAAC;QACtB,CAAC,SAAS,EAAE,SAAS,CAAC;QACtB,CAAC,wBAAwB,EAAE,wBAAwB,CAAC;QACpD,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;QACpC,CAAC,gBAAgB,EAAE,aAAa,CAAC;QACjC,CAAC,OAAO,EAAE,OAAO,CAAC;QAClB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC;QACrC,CAAC,YAAY,EAAE,aAAa,CAAC;QAC7B,CAAC,YAAY,EAAE,aAAa,CAAC;QAC7B,CAAC,aAAa,EAAE,cAAc,CAAC;QAC/B,CAAC,eAAe,EAAE,iBAAiB,CAAC;QACpC,CAAC,QAAQ,EAAE,SAAS,CAAC;QACrB,CAAC,IAAI,EAAE,IAAI,CAAC;QACZ,CAAC,IAAI,EAAE,IAAI,CAAC;QACZ,CAAC,OAAO,EAAE,QAAQ,CAAC;QACnB,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;KACrC,CAAC,CAAC,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;QAC5B,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IACvC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;QAC7D,MAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAC5D,MAAM,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA;QAChE,MAAM,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QAC3D,MAAM,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;IAChE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAClC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAClC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACpC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/dist/ui/icon.d.ts

@@ -0,0 +1,37 @@
+import type { LucideIcon } from "lucide-react";
+export type { LucideIcon };
+/**
+ * Lucide stroke widths of the CI (modeler-tool-design §11, on the 24 grid),
+ * the same values the toolkit's `McpAppView` sets through `LucideProvider`
+ * (2.5 for everything it renders, 2 in its dense toolbar). One mechanism for
+ * the whole view: lucide-react's own `strokeWidth`, never a CSS rule (a
+ * `stroke-width` declaration beats the SVG attribute and would override the
+ * toolkit's dense bars).
+ */
+export declare const ICON_STROKE = 2.5;
+/** Stroke in dense bars and table rows (`Icon dense`). */
+export declare const DENSE_ICON_STROKE = 2;
+/**
+ * A Lucide function icon the way the CI draws it (modeler-tool-design §11):
+ * `currentColor`, 16 px in chrome, stroke {@link ICON_STROKE} in the 24 grid
+ * ({@link DENSE_ICON_STROKE} with `dense`, for tight bars and table rows).
+ * The stroke is set on the icon itself, so it holds wherever the widget
+ * renders — inside the toolkit's view (whose `LucideProvider` sets the same
+ * default for raw Lucide icons) or outside it.
+ *
+ * Decorative by default (`aria-hidden`): the button or text next to it names
+ * the action. Pass `label` only for a standalone icon that carries meaning on
+ * its own (a status icon without words). Tint it with `TONE_ICON[tone]`.
+ *
+ * Never draw an icon with a Unicode glyph or emoji: `scanGlyphs` from
+ * `@miragon/pulse-widget-shell/testing` fails the package that does.
+ */
+export declare function Icon({ icon: Glyph, size, dense, label, className, }: {
+    icon: LucideIcon;
+    size?: number;
+    dense?: boolean;
+    /** Accessible name for an icon that stands alone; omit when text names it. */
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=icon.d.ts.map

package/dist/ui/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/ui/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,YAAY,EAAE,UAAU,EAAE,CAAA;AAE1B;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,MAAM,CAAA;AAC9B,0DAA0D;AAC1D,eAAO,MAAM,iBAAiB,IAAI,CAAA;AAElC;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EAAE,KAAK,EACX,IAAS,EACT,KAAa,EACb,KAAK,EACL,SAAS,GACV,EAAE;IACD,IAAI,EAAE,UAAU,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,+BAYA"}

package/dist/ui/icon.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@miragon/mcp-toolkit-ui";
+/**
+ * Lucide stroke widths of the CI (modeler-tool-design §11, on the 24 grid),
+ * the same values the toolkit's `McpAppView` sets through `LucideProvider`
+ * (2.5 for everything it renders, 2 in its dense toolbar). One mechanism for
+ * the whole view: lucide-react's own `strokeWidth`, never a CSS rule (a
+ * `stroke-width` declaration beats the SVG attribute and would override the
+ * toolkit's dense bars).
+ */
+export const ICON_STROKE = 2.5;
+/** Stroke in dense bars and table rows (`Icon dense`). */
+export const DENSE_ICON_STROKE = 2;
+/**
+ * A Lucide function icon the way the CI draws it (modeler-tool-design §11):
+ * `currentColor`, 16 px in chrome, stroke {@link ICON_STROKE} in the 24 grid
+ * ({@link DENSE_ICON_STROKE} with `dense`, for tight bars and table rows).
+ * The stroke is set on the icon itself, so it holds wherever the widget
+ * renders — inside the toolkit's view (whose `LucideProvider` sets the same
+ * default for raw Lucide icons) or outside it.
+ *
+ * Decorative by default (`aria-hidden`): the button or text next to it names
+ * the action. Pass `label` only for a standalone icon that carries meaning on
+ * its own (a status icon without words). Tint it with `TONE_ICON[tone]`.
+ *
+ * Never draw an icon with a Unicode glyph or emoji: `scanGlyphs` from
+ * `@miragon/pulse-widget-shell/testing` fails the package that does.
+ */
+export function Icon({ icon: Glyph, size = 16, dense = false, label, className, }) {
+    return (_jsx(Glyph, { size: size, strokeWidth: dense ? DENSE_ICON_STROKE : ICON_STROKE, "aria-hidden": label ? undefined : true, "aria-label": label, role: label ? "img" : undefined, focusable: "false", className: cn("shrink-0", className) }));
+}
+//# sourceMappingURL=icon.js.map

package/dist/ui/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/ui/icon.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,yBAAyB,CAAA;AAI5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;AAC9B,0DAA0D;AAC1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAA;AAElC;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EAAE,KAAK,EACX,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,KAAK,EACb,KAAK,EACL,SAAS,GAQV;IACC,OAAO,CACL,KAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,iBACvC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,gBACzB,KAAK,EACjB,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC/B,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,GACpC,CACH,CAAA;AACH,CAAC"}

package/dist/ui/id-breaks.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Where a long id may wrap without breaking a word: after a separator
+ * (`Activity_|CheckBlacklist`, `73059b49-|c64b`) and between a lower- and an
+ * upper-case letter (`assess|Creditworthiness`, `miravelo|Leasing`). The
+ * segments joined give the id back unchanged.
+ */
+export declare function idBreakSegments(id: string): string[];
+/**
+ * An id that prefers to wrap where {@link idBreakSegments} allows (`<wbr>`):
+ * its text and what a copy takes stay the id (some screen readers pause at
+ * the breaks, "Activity_ Check Blacklist"). A segment wider than its column
+ * still wraps inside itself (the caller's `wrap-anywhere`).
+ */
+export declare function BreakableId({ id }: {
+    id: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=id-breaks.d.ts.map

package/dist/ui/id-breaks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-breaks.d.ts","sourceRoot":"","sources":["../../src/ui/id-breaks.tsx"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,CAapD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,+BAWjD"}

package/dist/ui/id-breaks.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from "react";
+/** After these an id may break: `Activity_Check`, `order-2026`, `order:3:d`, `a.b`, `a/b`. */
+const BREAK_AFTER = /[_\-.:/]/u;
+const LOWER = /\p{Ll}/u;
+const UPPER = /\p{Lu}/u;
+/**
+ * Where a long id may wrap without breaking a word: after a separator
+ * (`Activity_|CheckBlacklist`, `73059b49-|c64b`) and between a lower- and an
+ * upper-case letter (`assess|Creditworthiness`, `miravelo|Leasing`). The
+ * segments joined give the id back unchanged.
+ */
+export function idBreakSegments(id) {
+    const segments = [];
+    let start = 0;
+    for (let i = 1; i < id.length; i++) {
+        const before = id[i - 1];
+        const at = id[i];
+        if (BREAK_AFTER.test(before) || (LOWER.test(before) && UPPER.test(at))) {
+            segments.push(id.slice(start, i));
+            start = i;
+        }
+    }
+    segments.push(id.slice(start));
+    return segments;
+}
+/**
+ * An id that prefers to wrap where {@link idBreakSegments} allows (`<wbr>`):
+ * its text and what a copy takes stay the id (some screen readers pause at
+ * the breaks, "Activity_ Check Blacklist"). A segment wider than its column
+ * still wraps inside itself (the caller's `wrap-anywhere`).
+ */
+export function BreakableId({ id }) {
+    return (_jsx(_Fragment, { children: idBreakSegments(id).map((segment, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx("wbr", {}), segment] }, index))) }));
+}
+//# sourceMappingURL=id-breaks.js.map

package/dist/ui/id-breaks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-breaks.js","sourceRoot":"","sources":["../../src/ui/id-breaks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,8FAA8F;AAC9F,MAAM,WAAW,GAAG,WAAW,CAAA;AAC/B,MAAM,KAAK,GAAG,SAAS,CAAA;AACvB,MAAM,KAAK,GAAG,SAAS,CAAA;AAEvB;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,EAAU;IACxC,MAAM,QAAQ,GAAa,EAAE,CAAA;IAC7B,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACnC,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QACxB,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAA;QAChB,IAAI,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;YACvE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAA;YACjC,KAAK,GAAG,CAAC,CAAA;QACX,CAAC;IACH,CAAC;IACD,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAC9B,OAAO,QAAQ,CAAA;AACjB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,EAAE,EAAkB;IAChD,OAAO,CACL,4BACG,eAAe,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,MAAC,QAAQ,eACN,KAAK,GAAG,CAAC,IAAI,eAAO,EACpB,OAAO,KAFK,KAAK,CAGT,CACZ,CAAC,GACD,CACJ,CAAA;AACH,CAAC"}

package/dist/ui/id-breaks.test.d.ts

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

package/dist/ui/id-breaks.test.d.ts.map

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

package/dist/ui/id-breaks.test.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/react";
+import { BreakableId, idBreakSegments } from "./id-breaks.js";
+afterEach(() => cleanup());
+describe("idBreakSegments: where a long id may wrap", () => {
+    it("after a separator", () => {
+        expect(idBreakSegments("Activity_CheckBlacklist")).toEqual(["Activity_", "Check", "Blacklist"]);
+        expect(idBreakSegments("73059b49-c64b-11f1")).toEqual(["73059b49-", "c64b-", "11f1"]);
+        expect(idBreakSegments("order:3:d2")).toEqual(["order:", "3:", "d2"]);
+        expect(idBreakSegments("a.b/c")).toEqual(["a.", "b/", "c"]);
+    });
+    it("between a lower- and an upper-case letter, also beyond ASCII", () => {
+        expect(idBreakSegments("assessCreditworthiness")).toEqual(["assess", "Creditworthiness"]);
+        expect(idBreakSegments("prüfungÄnderung")).toEqual(["prüfung", "Änderung"]);
+    });
+    it("never inside a word, a run of capitals or digits", () => {
+        expect(idBreakSegments("invoice")).toEqual(["invoice"]);
+        expect(idBreakSegments("HTTPServer")).toEqual(["HTTPServer"]);
+        expect(idBreakSegments("v2Order")).toEqual(["v2Order"]);
+        expect(idBreakSegments("")).toEqual([""]);
+    });
+    it("gives the id back unchanged when joined", () => {
+        for (const id of ["Activity_CheckBlacklist", "miraveloLeasing", "a--b__c", "-x_"]) {
+            expect(idBreakSegments(id).join("")).toBe(id);
+        }
+    });
+});
+describe("BreakableId", () => {
+    it("keeps the id as its text and marks the breaks with <wbr>", () => {
+        const { container } = render(_jsx(BreakableId, { id: "Activity_CheckBlacklist" }));
+        expect(container.textContent).toBe("Activity_CheckBlacklist");
+        expect(container.innerHTML).toBe("Activity_<wbr>Check<wbr>Blacklist");
+    });
+});
+//# sourceMappingURL=id-breaks.test.js.map

package/dist/ui/id-breaks.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-breaks.test.js","sourceRoot":"","sources":["../../src/ui/id-breaks.test.tsx"],"names":[],"mappings":";AAAA,gCAAgC;AAChC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAE7D,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAA;AAE1B,QAAQ,CAAC,2CAA2C,EAAE,GAAG,EAAE;IACzD,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;QAC3B,MAAM,CAAC,eAAe,CAAC,yBAAyB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAA;QAC/F,MAAM,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;QACrF,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;QACrE,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAA;IAC7D,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8DAA8D,EAAE,GAAG,EAAE;QACtE,MAAM,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAA;QACzF,MAAM,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAA;IAC7E,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,kDAAkD,EAAE,GAAG,EAAE;QAC1D,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;QACvD,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAA;QAC7D,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;QACvD,MAAM,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAC3C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,yCAAyC,EAAE,GAAG,EAAE;QACjD,KAAK,MAAM,EAAE,IAAI,CAAC,yBAAyB,EAAE,iBAAiB,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;YAClF,MAAM,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QAC/C,CAAC;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;QAClE,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,WAAW,IAAC,EAAE,EAAC,yBAAyB,GAAG,CAAC,CAAA;QAC1E,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA;QAC7D,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAA;IACvE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

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

@@ -0,0 +1,29 @@
+/** Ids up to this length show whole; a longer one (a UUID) shows its first 8 characters. */
+export declare const ID_FULL_LENGTH = 12;
+/** The id as a row shows it: whole up to {@link ID_FULL_LENGTH}, else its head and "…". */
+export declare function shortId(value: string): string;
+/**
+ * Put `text` on the clipboard: the Clipboard API where the frame may use it
+ * (a host grants `clipboard-write`), else the selection copy. Resolves to
+ * whether it worked — a view says so either way, never silently.
+ */
+export declare function copyText(text: string): Promise<boolean>;
+/**
+ * A technical id (instance, job, incident …) the way a row shows it: Geist
+ * Mono, shortened when long ("5f0ce78e…", the whole id in `title` and for
+ * screen readers), with a copy button. The copy confirms with a toast ("ID
+ * kopiert") and the icon turning into a check. A frame without clipboard
+ * access says so in a toast instead of failing silently, and shows the whole
+ * id selected in a read-only field, ready to copy by hand.
+ */
+export declare function IdText({ value, className }: {
+    value: string;
+    className?: string;
+}): import("react").JSX.Element;
+/** A table cell holding one {@link IdText} — the id column of a list. */
+export declare function IdCell({ value, align, className, }: {
+    value: string;
+    align?: "left" | "right";
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=id-text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"id-text.d.ts","sourceRoot":"","sources":["../../src/ui/id-text.tsx"],"names":[],"mappings":"AAOA,4FAA4F;AAC5F,eAAO,MAAM,cAAc,KAAK,CAAA;AAGhC,2FAA2F;AAC3F,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE7C;AAqBD;;;;GAIG;AACH,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAU7D;AA0CD;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAuDjF;AAED,yEAAyE;AACzE,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,+BAMA"}

package/dist/ui/id-text.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn, FOCUS_RING, useLocale, useToast } from "@miragon/mcp-toolkit-ui";
+import { Check, Copy } from "lucide-react";
+import { Icon } from "./icon.js";
+import { kitLabels } from "./kit-labels.js";
+import { Td } from "./table.js";
+/** Ids up to this length show whole; a longer one (a UUID) shows its first 8 characters. */
+export const ID_FULL_LENGTH = 12;
+const ID_SHORT_LENGTH = 8;
+/** The id as a row shows it: whole up to {@link ID_FULL_LENGTH}, else its head and "…". */
+export function shortId(value) {
+    return value.length <= ID_FULL_LENGTH ? value : `${value.slice(0, ID_SHORT_LENGTH)}…`;
+}
+/** A hidden textarea and the selection copy: the path a sandboxed frame without the Clipboard API still has. */
+function selectionCopy(text) {
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    document.body.appendChild(area);
+    area.select();
+    let copied;
+    try {
+        copied = document.execCommand("copy");
+    }
+    catch {
+        copied = false;
+    }
+    area.remove();
+    return copied;
+}
+/**
+ * Put `text` on the clipboard: the Clipboard API where the frame may use it
+ * (a host grants `clipboard-write`), else the selection copy. Resolves to
+ * whether it worked — a view says so either way, never silently.
+ */
+export async function copyText(text) {
+    try {
+        if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+    }
+    catch {
+        // Denied in this frame: fall through to the selection copy.
+    }
+    return selectionCopy(text);
+}
+/**
+ * The whole id in a read-only field, focused and selected the moment it
+ * appears — what a failed copy leaves you, so "copy it yourself" works for a
+ * shortened id too. Leaving the field (or Escape) folds it back.
+ */
+function RevealedId({ value, label, onDone, }) {
+    const fieldRef = useRef(null);
+    useEffect(() => {
+        fieldRef.current?.focus();
+        fieldRef.current?.select();
+    }, []);
+    return (_jsx("input", { ref: fieldRef, readOnly: true, value: value, "aria-label": label, size: value.length, onFocus: (event) => event.currentTarget.select(), onBlur: () => onDone(false), onKeyDown: (event) => {
+            if (event.key === "Escape")
+                onDone(true);
+        }, className: cn("text-dense border-input bg-background text-foreground min-w-0 rounded-sm border px-1 font-mono", FOCUS_RING) }));
+}
+/**
+ * A technical id (instance, job, incident …) the way a row shows it: Geist
+ * Mono, shortened when long ("5f0ce78e…", the whole id in `title` and for
+ * screen readers), with a copy button. The copy confirms with a toast ("ID
+ * kopiert") and the icon turning into a check. A frame without clipboard
+ * access says so in a toast instead of failing silently, and shows the whole
+ * id selected in a read-only field, ready to copy by hand.
+ */
+export function IdText({ value, className }) {
+    const labels = kitLabels(useLocale());
+    const toast = useToast();
+    const [copied, setCopied] = useState(false);
+    const [revealed, setRevealed] = useState(false);
+    const buttonRef = useRef(null);
+    const short = shortId(value);
+    const copy = async () => {
+        if (await copyText(value)) {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+            toast.show({ tone: "success", title: labels.idCopied });
+        }
+        else {
+            setRevealed(true);
+            toast.show({ tone: "danger", title: labels.copyFailed, description: labels.copyFailedHint });
+        }
+    };
+    return (_jsxs("span", { className: cn("inline-flex max-w-full items-center gap-1", className), children: [revealed ? (_jsx(RevealedId, { value: value, label: labels.fullId, onDone: (refocus) => {
+                    setRevealed(false);
+                    if (refocus)
+                        buttonRef.current?.focus();
+                } })) : (_jsx("span", { className: "text-dense truncate font-mono", title: value, children: short === value ? (value) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: short }), _jsx("span", { className: "sr-only", children: value })] })) })), _jsx("button", { ref: buttonRef, type: "button", "aria-label": labels.copyId(short), title: labels.copyId(short), onClick: () => void copy(), className: cn("text-muted-foreground hover:text-foreground inline-flex size-6 shrink-0 items-center justify-center rounded-sm", FOCUS_RING), children: _jsx(Icon, { icon: copied ? Check : Copy, dense: true }) })] }));
+}
+/** A table cell holding one {@link IdText} — the id column of a list. */
+export function IdCell({ value, align, className, }) {
+    return (_jsx(Td, { align: align, className: cn("whitespace-nowrap", className), children: _jsx(IdText, { value: value }) }));
+}
+//# sourceMappingURL=id-text.js.map

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

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

package/dist/ui/id-text.test.d.ts

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

package/dist/ui/id-text.test.d.ts.map

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