@stackone/malachite 2.21.0 → 2.23.0

package/dist/components/CodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.js","sources":["../../src/components/CodeBlock.tsx"],"sourcesContent":["import JsonView from '@uiw/react-json-view';\nimport React from 'react';\nimport CopyIcon from './CustomIcons/CopyIcon';\nimport { type DiffDisplayRow, type DiffRowType, diffHunks } from './codeBlockDiff';\nimport { CodeLine, type CodeLineDecoration } from './codeBlockLine';\nimport { FOCUS_RING } from './focusRing';\n\nconst CodeBlockHighlighter = React.lazy(() => import('./CodeBlockHighlighter'));\n\nexport interface CodeBlockProps {\n    /** The code content to display */\n    code?: string;\n    /** JSON object to display as formatted JSON */\n    json?: object;\n    /** Show line numbers */\n    showLineNumbers?: boolean;\n    /** Custom class name */\n    className?: string;\n    /** Custom styles */\n    style?: React.CSSProperties;\n    /** Height of the code block */\n    height?: string | number;\n    /** Enable copy functionality */\n    enableCopy?: boolean;\n    /** Wrap long lines instead of scrolling horizontally */\n    wrapLines?: boolean;\n    /**\n     * Highlight the code with this language's grammar. `cedar` is a grammar this library\n     * ships itself (`prismCedar.ts`), since Prism and refractor carry none; widen the union\n     * as further grammars are registered in CodeBlockHighlighter.\n     */\n    language?: 'yaml' | 'cedar';\n    /** How much of a `json` tree starts collapsed: `true` all of it, a number below that depth. */\n    collapsed?: boolean | number;\n    /**\n     * Renders the change between two texts rather than one text, and takes precedence over\n     * `code` and `json`. Only the changed lines are shown, with `context` unchanged ones either\n     * side, so a small edit to a long document reads as a few hunks instead of the whole thing.\n     */\n    diff?: {\n        before: string;\n        after: string;\n        /** Unchanged lines kept either side of each change. Three by convention. */\n        context?: number;\n        /**\n         * Swaps the `+`/`-` gutter and tinted rows for the palette a mock specified for\n         * AI-authored changes: star, minus-sign and middle-dot markers, and a struck-through\n         * removal. Omit to keep the neutral markers; there is no default consumer for the\n         * assistant look yet.\n         */\n        origin?: 'assistant';\n    };\n}\n\nconst DIFF_BACKGROUNDS: Record<DiffRowType, string | undefined> = {\n    added: 'var(--malachite-codeblock-diff-added-background)',\n    removed: 'var(--malachite-codeblock-diff-removed-background)',\n    context: undefined,\n};\n\nconst DIFF_MARKERS: Record<DiffRowType, string | undefined> = {\n    added: '+',\n    removed: '-',\n    context: undefined,\n};\n\n// The assistant palette also marks context rows, which the neutral one leaves bare.\nconst ASSISTANT_DIFF_BACKGROUNDS: Record<DiffRowType, string | undefined> = {\n    added: 'var(--malachite-codeblock-diff-assistant-background)',\n    removed: 'var(--malachite-codeblock-diff-assistant-removed-background)',\n    context: undefined,\n};\n\nconst ASSISTANT_DIFF_MARKERS: Record<DiffRowType, string> = {\n    added: '\\u2726',\n    // U+2212 minus sign, not a hyphen: the mock is explicit about which glyph.\n    removed: '\\u2212',\n    context: '\\u00b7',\n};\n\nconst ASSISTANT_DIFF_MARKER_COLORS: Record<DiffRowType, string> = {\n    added: 'var(--malachite-codeblock-diff-assistant-foreground)',\n    removed: 'var(--malachite-codeblock-diff-removed-foreground)',\n    context: 'var(--malachite-codeblock-diff-context-foreground)',\n};\n\nconst unchangedRun = (count: number): string =>\n    `\\u22ef ${count} unchanged ${count === 1 ? 'line' : 'lines'}`;\n\nconst diffDecoration = (\n    row: DiffDisplayRow,\n    showLineNumbers: boolean,\n    origin?: 'assistant',\n): CodeLineDecoration => {\n    const assistant = origin === 'assistant';\n\n    return {\n        background: assistant ? ASSISTANT_DIFF_BACKGROUNDS[row.type] : DIFF_BACKGROUNDS[row.type],\n        marker: assistant ? ASSISTANT_DIFF_MARKERS[row.type] : DIFF_MARKERS[row.type],\n        markerColor: assistant ? ASSISTANT_DIFF_MARKER_COLORS[row.type] : undefined,\n        // Reserved on unchanged rows too, so the code column does not step in and out.\n        reserveMarker: true,\n        // Context rows read as de-emphasised, not just unmarked, in the assistant palette.\n        textColor:\n            assistant && row.type === 'context'\n                ? 'var(--malachite-codeblock-diff-context-text)'\n                : undefined,\n        strikethrough: assistant && row.type === 'removed',\n        separatorAbove: row.skippedAbove === undefined ? undefined : unchangedRun(row.skippedAbove),\n        // A removed line has no number in the after-text, so it keeps the one it had before.\n        lineNumber: showLineNumbers ? (row.afterNumber ?? row.beforeNumber) : undefined,\n    };\n};\n\nconst CodeBlock: React.FC<CodeBlockProps> = ({\n    code,\n    json,\n    showLineNumbers = true,\n    className = '',\n    style = {},\n    height,\n    enableCopy = true,\n    wrapLines = false,\n    language,\n    collapsed = false,\n    diff,\n}) => {\n    const diffRows = diff ? diffHunks(diff.before, diff.after, diff.context) : null;\n    const diffText = diffRows?.map((row) => row.text).join('\\n') ?? '';\n\n    /**\n     * What the button puts on the clipboard, in the same form the block is showing. A JSON\n     * block is pretty-printed rather than handed over minified: the reader is copying what\n     * they can see. `undefined` means there is nothing to copy and no button to offer.\n     */\n    const copyText = (): string | undefined => {\n        if (diffRows) {\n            return diffText;\n        }\n\n        // An empty block has nothing to copy, so it offers no button — `!== undefined` would\n        // hand back the empty string and put a dead control on it.\n        if (code) {\n            return code;\n        }\n\n        if (json !== undefined) {\n            try {\n                return JSON.stringify(json, null, 2);\n            } catch {\n                // A cycle or a BigInt: no honest text to copy, so offer no button.\n                return undefined;\n            }\n        }\n\n        return undefined;\n    };\n\n    const textToCopy = copyText();\n\n    // `?.` no-ops when the clipboard API is absent (insecure context); `.catch` swallows a rejection.\n    const handleCopy = () => {\n        if (textToCopy === undefined) {\n            return;\n        }\n\n        navigator.clipboard?.writeText(textToCopy)?.catch(() => undefined);\n    };\n\n    // Declared once and rendered by both the JSON branch and the code branch below, so the\n    // two tabs of one document do not disagree about whether it can be copied.\n    const copyButton = enableCopy && textToCopy !== undefined && (\n        <button\n            type=\"button\"\n            aria-label=\"Copy\"\n            onClick={handleCopy}\n            className={`absolute top-2 right-2 z-10 flex items-center justify-center rounded-md border border-solid border-[var(--malachite-codeblock-border)] bg-[var(--malachite-codeblock-background)] p-1.5 transition-colors hover:bg-[var(--malachite-codeblock-border)] ${FOCUS_RING}`}\n            style={{ color: 'var(--malachite-codeblock-line-number)' }}\n        >\n            <CopyIcon size={14} />\n        </button>\n    );\n\n    // If JSON is provided, use JsonView component\n    if (json && !diffRows) {\n        return (\n            <div\n                className={`relative border rounded-lg overflow-hidden ${className}`}\n                style={{\n                    backgroundColor: 'var(--malachite-codeblock-background)',\n                    borderColor: 'var(--malachite-codeblock-border)',\n                    height,\n                    ...style,\n                }}\n            >\n                {copyButton}\n                <JsonView\n                    value={json}\n                    style={\n                        {\n                            backgroundColor: 'var(--malachite-codeblock-background)',\n                            color: 'var(--malachite-codeblock-foreground)',\n                            fontSize: '14px',\n                            fontFamily: 'var(--malachite-font-mono, monospace)',\n                            padding: '16px',\n                            lineHeight: '1.5',\n                            textAlign: 'left',\n                            '--w-rjv-color': 'var(--malachite-codeblock-foreground)',\n                            '--w-rjv-key-string': 'var(--malachite-codeblock-keyword)',\n                            '--w-rjv-background-color': 'var(--malachite-codeblock-background)',\n                            '--w-rjv-line-color': 'var(--malachite-codeblock-border)',\n                            '--w-rjv-arrow-color': 'var(--malachite-codeblock-line-number)',\n                            '--w-rjv-edit-color': 'var(--malachite-codeblock-keyword)',\n                            '--w-rjv-info-color': 'var(--malachite-codeblock-line-number)',\n                            '--w-rjv-update-color': 'var(--malachite-codeblock-keyword)',\n                            '--w-rjv-copied-color': 'var(--malachite-codeblock-string)',\n                            '--w-rjv-copied-success-color': 'var(--malachite-codeblock-string)',\n                            '--w-rjv-curlybraces-color': 'var(--malachite-codeblock-foreground)',\n                            '--w-rjv-colon-color': 'var(--malachite-codeblock-foreground)',\n                            '--w-rjv-brackets-color': 'var(--malachite-codeblock-foreground)',\n                            '--w-rjv-quotes-color': 'var(--malachite-codeblock-string)',\n                            '--w-rjv-quotes-string-color': 'var(--malachite-codeblock-string)',\n                            '--w-rjv-type-string-color': 'var(--malachite-codeblock-string)',\n                            '--w-rjv-type-int-color': 'var(--malachite-codeblock-number)',\n                            '--w-rjv-type-float-color': 'var(--malachite-codeblock-number)',\n                            '--w-rjv-type-bigint-color': 'var(--malachite-codeblock-number)',\n                            '--w-rjv-type-boolean-color': 'var(--malachite-codeblock-keyword)',\n                            '--w-rjv-type-date-color': 'var(--malachite-codeblock-string)',\n                            '--w-rjv-type-url-color': 'var(--malachite-codeblock-keyword)',\n                            '--w-rjv-type-null-color': 'var(--malachite-codeblock-comment)',\n                            '--w-rjv-type-nan-color': 'var(--malachite-codeblock-comment)',\n                            '--w-rjv-type-undefined-color': 'var(--malachite-codeblock-comment)',\n                        } as React.CSSProperties\n                    }\n                    displayDataTypes={false}\n                    enableClipboard={enableCopy}\n                    collapsed={collapsed}\n                    displayObjectSize={false}\n                />\n            </div>\n        );\n    }\n\n    // Reserve clearance so a wide first line never sits under the floating copy button.\n    const copyClearance = enableCopy && (!!code || !!diffRows);\n\n    const renderPlainLines = (\n        text: string,\n        decorate?: (index: number) => CodeLineDecoration | undefined,\n    ) => {\n        const lines = text.split('\\n');\n\n        return (\n            <div\n                className=\"p-4 overflow-auto text-left\"\n                style={{ paddingRight: copyClearance ? 44 : undefined }}\n            >\n                {/* As wide as the widest line, floored at the view, so rows filling it end level. */}\n                <div style={{ width: 'max-content', minWidth: '100%' }}>\n                    {lines.map((line, index) => {\n                        const decoration = decorate?.(index);\n\n                        return (\n                            <CodeLine\n                                key={index}\n                                line={line}\n                                lineNumber={\n                                    decoration?.lineNumber ??\n                                    (showLineNumbers ? index + 1 : undefined)\n                                }\n                                wrap={wrapLines}\n                                decoration={decoration}\n                            >\n                                {line}\n                            </CodeLine>\n                        );\n                    })}\n                </div>\n            </div>\n        );\n    };\n\n    const renderPlainCode = () => (code ? renderPlainLines(code) : null);\n\n    const renderDiff = (rows: DiffDisplayRow[]) => {\n        if (rows.length === 0) {\n            return (\n                <div\n                    className=\"p-4 text-left\"\n                    style={{ color: 'var(--malachite-codeblock-comment)' }}\n                >\n                    No changes\n                </div>\n            );\n        }\n\n        const decorate = (index: number) => {\n            const row = rows[index];\n\n            return row ? diffDecoration(row, showLineNumbers, diff?.origin) : undefined;\n        };\n\n        if (language) {\n            return (\n                <React.Suspense fallback={renderPlainLines(diffText, decorate)}>\n                    {/*\n                     * The whole merged text goes to the highlighter in one piece, so a hunk\n                     * is tokenised in the company of its neighbours rather than on its own.\n                     * Prism still cannot see the lines the hunks left out, so a construct\n                     * spanning an omitted run can highlight oddly — the reason `context`\n                     * defaults to a few lines rather than none.\n                     */}\n                    <CodeBlockHighlighter\n                        code={diffText}\n                        language={language}\n                        showLineNumbers={showLineNumbers}\n                        wrapLines={wrapLines}\n                        copyClearance={copyClearance}\n                        decorate={decorate}\n                    />\n                </React.Suspense>\n            );\n        }\n\n        return renderPlainLines(diffText, decorate);\n    };\n\n    // For code strings, create a simple syntax-highlighted view\n    const renderCodeContent = () => {\n        if (!code) {\n            return null;\n        }\n\n        if (language) {\n            return (\n                <React.Suspense fallback={renderPlainCode()}>\n                    <CodeBlockHighlighter\n                        code={code}\n                        language={language}\n                        showLineNumbers={showLineNumbers}\n                        wrapLines={wrapLines}\n                        copyClearance={copyClearance}\n                    />\n                </React.Suspense>\n            );\n        }\n\n        return renderPlainCode();\n    };\n\n    return (\n        <div\n            className={`relative border rounded-lg overflow-hidden ${className}`}\n            style={{\n                backgroundColor: 'var(--malachite-codeblock-background)',\n                borderColor: 'var(--malachite-codeblock-border)',\n                height,\n                ...style,\n            }}\n        >\n            {copyButton}\n            {diffRows ? renderDiff(diffRows) : renderCodeContent()}\n        </div>\n    );\n};\n\nexport default CodeBlock;\n"],"names":["CodeBlockHighlighter","React","DIFF_BACKGROUNDS","DIFF_MARKERS","ASSISTANT_DIFF_BACKGROUNDS","ASSISTANT_DIFF_MARKERS","ASSISTANT_DIFF_MARKER_COLORS","unchangedRun","count","diffDecoration","row","showLineNumbers","origin","assistant","CodeBlock","code","json","className","style","height","enableCopy","wrapLines","language","collapsed","diff","diffRows","diffHunks","diffText","textToCopy","copyButton","jsx","_b","_a","FOCUS_RING","CopyIcon","jsxs","JsonView","copyClearance","renderPlainLines","text","decorate","lines","line","index","decoration","CodeLine","renderPlainCode","renderDiff","rows","renderCodeContent"],"mappings":"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"}

package/dist/components/CodeBlockHighlighter.js

@@ -0,0 +1,103 @@
+import { jsx as n } from "react/jsx-runtime";
+import { PrismLight as m, createElement as y } from "react-syntax-highlighter";
+import w from "react-syntax-highlighter/dist/esm/languages/prism/yaml";
+import f from "./prismCedar.js";
+import { CodeLine as L } from "./codeBlockLine.js";
+import { CODE_FONT as t } from "./codeBlockStyles.js";
+let s = !1;
+const R = () => {
+  s || (s = !0, m.registerLanguage("yaml", w), m.registerLanguage("cedar", f));
+}, E = {
+  'code[class*="language-"]': t,
+  'pre[class*="language-"]': t,
+  comment: { color: "var(--malachite-codeblock-comment)" },
+  prolog: { color: "var(--malachite-codeblock-comment)" },
+  cdata: { color: "var(--malachite-codeblock-comment)" },
+  punctuation: { color: "var(--malachite-codeblock-foreground)" },
+  key: { color: "var(--malachite-codeblock-keyword)" },
+  atrule: { color: "var(--malachite-codeblock-keyword)" },
+  "attr-name": { color: "var(--malachite-codeblock-keyword)" },
+  directive: { color: "var(--malachite-codeblock-keyword)" },
+  keyword: { color: "var(--malachite-codeblock-keyword)" },
+  property: { color: "var(--malachite-codeblock-keyword)" },
+  boolean: { color: "var(--malachite-codeblock-keyword)" },
+  important: { color: "var(--malachite-codeblock-keyword)" },
+  null: { color: "var(--malachite-codeblock-keyword)" },
+  tag: { color: "var(--malachite-codeblock-keyword)" },
+  anchor: { color: "var(--malachite-codeblock-keyword)" },
+  alias: { color: "var(--malachite-codeblock-keyword)" },
+  // Cedar's entity paths (`StackOne::Action`) are types, which is what this token is for.
+  "class-name": { color: "var(--malachite-codeblock-type)" },
+  // The scope variables. Given the one remaining distinct hue so they read as language
+  // rather than as another blue keyword.
+  builtin: { color: "var(--malachite-codeblock-number)" },
+  operator: { color: "var(--malachite-codeblock-line-number)" },
+  string: { color: "var(--malachite-codeblock-string)" },
+  scalar: { color: "var(--malachite-codeblock-string)" },
+  char: { color: "var(--malachite-codeblock-string)" },
+  url: { color: "var(--malachite-codeblock-string)" },
+  number: { color: "var(--malachite-codeblock-number)" },
+  datetime: { color: "var(--malachite-codeblock-number)" }
+}, d = (o) => {
+  if (o.type === "text")
+    return typeof o.value == "string" && o.value.endsWith(`
+`) ? { ...o, value: o.value.slice(0, -1) } : o;
+  const e = o.children;
+  if (!(e != null && e.length))
+    return o;
+  const c = e[e.length - 1], a = d(c);
+  return a === c ? o : { ...o, children: [...e.slice(0, -1), a] };
+}, _ = ({
+  code: o,
+  language: e,
+  showLineNumbers: c = !0,
+  wrapLines: a = !1,
+  copyClearance: k = !1,
+  decorate: i
+}) => {
+  R();
+  const h = o.split(`
+`);
+  return /* @__PURE__ */ n(
+    m,
+    {
+      language: e,
+      style: E,
+      wrapLines: !0,
+      renderer: ({ rows: u, stylesheet: g, useInlineStyles: b }) => u.map((v, r) => {
+        const l = i == null ? void 0 : i(r), p = (l == null ? void 0 : l.lineNumber) ?? (c ? r + 1 : void 0);
+        return /* @__PURE__ */ n(
+          L,
+          {
+            line: h[r] ?? "",
+            lineNumber: p,
+            wrap: a,
+            decoration: l,
+            children: y({
+              node: d(v),
+              stylesheet: g,
+              useInlineStyles: b,
+              key: `code-line-${r}`
+            })
+          },
+          r
+        );
+      }),
+      customStyle: {
+        ...t,
+        margin: 0,
+        padding: "16px",
+        paddingRight: k ? "44px" : "16px",
+        overflow: "auto"
+      },
+      codeTagProps: {
+        style: { ...t, display: "block", width: "max-content", minWidth: "100%" }
+      },
+      children: o
+    }
+  );
+};
+export {
+  _ as default
+};
+//# sourceMappingURL=CodeBlockHighlighter.js.map

package/dist/components/CodeBlockHighlighter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlockHighlighter.js","sources":["../../src/components/CodeBlockHighlighter.tsx"],"sourcesContent":["import type React from 'react';\nimport { PrismLight, createElement } from 'react-syntax-highlighter';\nimport yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';\nimport cedar from './prismCedar';\nimport { CodeLine, type CodeLineDecoration } from './codeBlockLine';\nimport { CODE_FONT } from './codeBlockStyles';\n\n// Registered on first render rather than at import. A bare top-level call is an import-time\n// side effect, which `sideEffects: false` in package.json tells a bundler it may drop; the\n// same reason the font faces go in through ensureInterFontFace and not a top-level call.\nlet languagesRegistered = false;\n\nconst ensureLanguagesRegistered = (): void => {\n    if (languagesRegistered) {\n        return;\n    }\n    languagesRegistered = true;\n    PrismLight.registerLanguage('yaml', yaml);\n    PrismLight.registerLanguage('cedar', cedar);\n};\n\n// Prism token colors bound to the codeblock theme tokens so highlighting follows the theme.\nconst PRISM_MALACHITE_THEME: { [key: string]: React.CSSProperties } = {\n    'code[class*=\"language-\"]': CODE_FONT,\n    'pre[class*=\"language-\"]': CODE_FONT,\n    comment: { color: 'var(--malachite-codeblock-comment)' },\n    prolog: { color: 'var(--malachite-codeblock-comment)' },\n    cdata: { color: 'var(--malachite-codeblock-comment)' },\n    punctuation: { color: 'var(--malachite-codeblock-foreground)' },\n    key: { color: 'var(--malachite-codeblock-keyword)' },\n    atrule: { color: 'var(--malachite-codeblock-keyword)' },\n    'attr-name': { color: 'var(--malachite-codeblock-keyword)' },\n    directive: { color: 'var(--malachite-codeblock-keyword)' },\n    keyword: { color: 'var(--malachite-codeblock-keyword)' },\n    property: { color: 'var(--malachite-codeblock-keyword)' },\n    boolean: { color: 'var(--malachite-codeblock-keyword)' },\n    important: { color: 'var(--malachite-codeblock-keyword)' },\n    null: { color: 'var(--malachite-codeblock-keyword)' },\n    tag: { color: 'var(--malachite-codeblock-keyword)' },\n    anchor: { color: 'var(--malachite-codeblock-keyword)' },\n    alias: { color: 'var(--malachite-codeblock-keyword)' },\n    // Cedar's entity paths (`StackOne::Action`) are types, which is what this token is for.\n    'class-name': { color: 'var(--malachite-codeblock-type)' },\n    // The scope variables. Given the one remaining distinct hue so they read as language\n    // rather than as another blue keyword.\n    builtin: { color: 'var(--malachite-codeblock-number)' },\n    operator: { color: 'var(--malachite-codeblock-line-number)' },\n    string: { color: 'var(--malachite-codeblock-string)' },\n    scalar: { color: 'var(--malachite-codeblock-string)' },\n    char: { color: 'var(--malachite-codeblock-string)' },\n    url: { color: 'var(--malachite-codeblock-string)' },\n    number: { color: 'var(--malachite-codeblock-number)' },\n    datetime: { color: 'var(--malachite-codeblock-number)' },\n};\n\ntype SyntaxNode = {\n    type: 'text' | 'element';\n    value?: string | number;\n    children?: SyntaxNode[];\n};\n\n/** Local, not the ambient `rendererProps`: that global leaks out of DefinitelyTyped by accident. */\ntype RowRendererProps = {\n    rows: SyntaxNode[];\n    stylesheet: { [key: string]: React.CSSProperties };\n    useInlineStyles: boolean;\n};\n\n/** Prism keeps the source newline on each row's last token; `CodeLine` supplies the break now. */\nconst withoutTrailingNewline = <T extends SyntaxNode>(node: T): T => {\n    if (node.type === 'text') {\n        return typeof node.value === 'string' && node.value.endsWith('\\n')\n            ? { ...node, value: node.value.slice(0, -1) }\n            : node;\n    }\n    const children = node.children;\n    if (!children?.length) {\n        return node;\n    }\n    const last = children[children.length - 1];\n    const trimmed = withoutTrailingNewline(last);\n    return trimmed === last ? node : { ...node, children: [...children.slice(0, -1), trimmed] };\n};\n\nexport interface CodeBlockHighlighterProps {\n    code: string;\n    language: 'yaml' | 'cedar';\n    showLineNumbers?: boolean;\n    wrapLines?: boolean;\n    /** Right padding reserving space for the floating copy button. */\n    copyClearance?: boolean;\n    /**\n     * Per-line markup, by index into `code`. How a diff tints its rows and numbers them from\n     * the text each line actually came from.\n     */\n    decorate?: (index: number) => CodeLineDecoration | undefined;\n}\n\nconst CodeBlockHighlighter: React.FC<CodeBlockHighlighterProps> = ({\n    code,\n    language,\n    showLineNumbers = true,\n    wrapLines = false,\n    copyClearance = false,\n    decorate,\n}) => {\n    ensureLanguagesRegistered();\n\n    const lines = code.split('\\n');\n\n    // We lay rows out ourselves rather than passing `showLineNumbers`/`wrapLongLines` down:\n    // that mode makes every line a flex container, so the Prism token spans become flex items\n    // and the line shreds into out-of-order fragments.\n    const renderRows = ({ rows, stylesheet, useInlineStyles }: RowRendererProps) =>\n        rows.map((row, index) => {\n            const decoration = decorate?.(index);\n            // A decoration's own number wins: in a diff the row's position in the merged\n            // text is not its line number in either of the texts it came from.\n            const lineNumber = decoration?.lineNumber ?? (showLineNumbers ? index + 1 : undefined);\n\n            return (\n            <CodeLine\n                key={index}\n                line={lines[index] ?? ''}\n                lineNumber={lineNumber}\n                wrap={wrapLines}\n                decoration={decoration}\n            >\n                {createElement({\n                    node: withoutTrailingNewline(row),\n                    stylesheet,\n                    useInlineStyles,\n                    key: `code-line-${index}`,\n                })}\n            </CodeLine>\n            );\n        });\n\n    return (\n        <PrismLight\n            language={language}\n            style={PRISM_MALACHITE_THEME}\n            wrapLines\n            renderer={renderRows}\n            customStyle={{\n                ...CODE_FONT,\n                margin: 0,\n                padding: '16px',\n                paddingRight: copyClearance ? '44px' : '16px',\n                overflow: 'auto',\n            }}\n            // The `code` element is the rows' wrapper here, so it takes the sizing the plain\n            // path puts on a div of its own.\n            codeTagProps={{\n                style: { ...CODE_FONT, display: 'block', width: 'max-content', minWidth: '100%' },\n            }}\n        >\n            {code}\n        </PrismLight>\n    );\n};\n\nexport default CodeBlockHighlighter;\n"],"names":["languagesRegistered","ensureLanguagesRegistered","PrismLight","yaml","cedar","PRISM_MALACHITE_THEME","CODE_FONT","withoutTrailingNewline","node","children","last","trimmed","CodeBlockHighlighter","code","language","showLineNumbers","wrapLines","copyClearance","decorate","lines","jsx","rows","stylesheet","useInlineStyles","row","index","decoration","lineNumber","CodeLine","createElement"],"mappings":"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"}

package/dist/components/CollapsibleSection.js

@@ -0,0 +1,40 @@
+import { jsx as e, jsxs as t, Fragment as m } from "react/jsx-runtime";
+import { Accordion as x } from "./Accordion.js";
+const h = ({
+  title: n,
+  subtitle: a,
+  defaultExpanded: r = !1,
+  isExpanded: i,
+  onToggle: l,
+  className: s,
+  children: c
+}) => /* @__PURE__ */ e(
+  x,
+  {
+    variant: "sunken",
+    defaultExpanded: r,
+    isExpanded: i,
+    onToggle: l,
+    className: s,
+    header: /* @__PURE__ */ t("span", { className: "flex min-w-0 flex-1 items-center gap-[6px] text-[13px] leading-none", children: [
+      /* @__PURE__ */ e("span", { className: "shrink-0 font-medium text-[var(--malachite-text-primary)]", children: n }),
+      a ? /* @__PURE__ */ t(m, { children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "shrink-0 text-[var(--malachite-text-placeholder)]",
+            children: "-"
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate tracking-[0.13px] text-[var(--malachite-text-primary)]", children: a })
+      ] }) : null
+    ] }),
+    children: c
+  }
+);
+export {
+  h as CollapsibleSection,
+  h as default
+};
+//# sourceMappingURL=CollapsibleSection.js.map

package/dist/components/CollapsibleSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleSection.js","sources":["../../src/components/CollapsibleSection.tsx"],"sourcesContent":["import React from 'react';\nimport Accordion from './Accordion';\n\nexport interface CollapsibleSectionProps {\n    title: string;\n    subtitle?: string;\n    defaultExpanded?: boolean;\n    isExpanded?: boolean;\n    onToggle?: (expanded: boolean) => void;\n    className?: string;\n    children: React.ReactNode;\n}\n\nconst CollapsibleSection: React.FC<CollapsibleSectionProps> = ({\n    title,\n    subtitle,\n    defaultExpanded = false,\n    isExpanded,\n    onToggle,\n    className,\n    children,\n}) => (\n    <Accordion\n        variant=\"sunken\"\n        defaultExpanded={defaultExpanded}\n        isExpanded={isExpanded}\n        onToggle={onToggle}\n        className={className}\n        header={\n            <span className=\"flex min-w-0 flex-1 items-center gap-[6px] text-[13px] leading-none\">\n                <span className=\"shrink-0 font-medium text-[var(--malachite-text-primary)]\">\n                    {title}\n                </span>\n                {subtitle ? (\n                    <>\n                        <span\n                            aria-hidden=\"true\"\n                            className=\"shrink-0 text-[var(--malachite-text-placeholder)]\"\n                        >\n                            -\n                        </span>\n                        <span className=\"min-w-0 flex-1 truncate tracking-[0.13px] text-[var(--malachite-text-primary)]\">\n                            {subtitle}\n                        </span>\n                    </>\n                ) : null}\n            </span>\n        }\n    >\n        {children}\n    </Accordion>\n);\n\nexport default CollapsibleSection;\nexport { CollapsibleSection };\n"],"names":["CollapsibleSection","title","subtitle","defaultExpanded","isExpanded","onToggle","className","children","jsx","Accordion","jsxs","Fragment"],"mappings":";;AAaA,MAAMA,IAAwD,CAAC;AAAA,EAC3D,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACJ,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,SAAQ;AAAA,IACR,iBAAAN;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QACI,gBAAAI,EAAC,QAAA,EAAK,WAAU,uEACZ,UAAA;AAAA,MAAA,gBAAAF,EAAC,QAAA,EAAK,WAAU,6DACX,UAAAP,GACL;AAAA,MACCC,IACG,gBAAAQ,EAAAC,GAAA,EACI,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,eAAY;AAAA,YACZ,WAAU;AAAA,YACb,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD,gBAAAA,EAAC,QAAA,EAAK,WAAU,kFACX,UAAAN,EAAA,CACL;AAAA,MAAA,EAAA,CACJ,IACA;AAAA,IAAA,GACR;AAAA,IAGH,UAAAK;AAAA,EAAA;AACL;"}

package/dist/components/Confetti.js

@@ -0,0 +1,56 @@
+import { jsx as h } from "react/jsx-runtime";
+import { useRef as g, useEffect as v } from "react";
+const x = [
+  "var(--malachite-success-background)",
+  "var(--malachite-text-success)",
+  "var(--malachite-tag-primary-foreground)",
+  "var(--malachite-warning-background)",
+  "var(--malachite-error-background)"
+], u = "\0", w = () => typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia("(prefers-reduced-motion: reduce)").matches, b = ({
+  count: r = 150,
+  colors: l = x,
+  className: p = ""
+}) => {
+  const o = g(null), n = l.join(u);
+  return v(() => {
+    const a = o.current;
+    if (!a || w()) return;
+    const s = n.split(u), m = Array.from({ length: r }, (c, e) => {
+      const t = document.createElement("div"), i = 10 + e * 7 % 10;
+      t.style.cssText = `position:absolute;top:-5%;left:${e * 37 % 100}%;width:${i}px;height:${Math.round(i * 0.5)}px;background:${s[e % s.length]};border-radius:2px;`, a.appendChild(t);
+      const d = (e * 53 % 100 - 50) * 4, f = 360 + e * 47 % 720;
+      return t.animate(
+        [
+          { transform: "translate(0, 0) rotate(0deg)", opacity: 1 },
+          {
+            transform: `translate(${d}px, 105vh) rotate(${f}deg)`,
+            opacity: 1,
+            offset: 0.9
+          },
+          { transform: `translate(${d}px, 110vh) rotate(${f}deg)`, opacity: 0 }
+        ],
+        {
+          duration: 2600 + e * 17 % 1600,
+          delay: e * 11 % 500,
+          easing: "cubic-bezier(0.2, 0.6, 0.4, 1)",
+          fill: "forwards"
+        }
+      ), t;
+    });
+    return () => {
+      for (const c of m) c.remove();
+    };
+  }, [r, n]), /* @__PURE__ */ h(
+    "div",
+    {
+      ref: o,
+      "aria-hidden": !0,
+      className: `pointer-events-none fixed inset-0 overflow-hidden z-50 ${p}`
+    }
+  );
+};
+export {
+  b as Confetti,
+  b as default
+};
+//# sourceMappingURL=Confetti.js.map

package/dist/components/Confetti.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti.js","sources":["../../src/components/Confetti.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\n// Theme tokens so the confetti adapts to light/dark. CSS vars work here because the\n// pieces are appended into the component's own (themed) DOM subtree.\nconst DEFAULT_COLORS = [\n    'var(--malachite-success-background)',\n    'var(--malachite-text-success)',\n    'var(--malachite-tag-primary-foreground)',\n    'var(--malachite-warning-background)',\n    'var(--malachite-error-background)',\n];\n\n/** Joins the palette into a content key; NUL cannot occur in a CSS colour value. */\nconst COLORS_KEY_SEPARATOR = '\\u0000';\n\n/**\n * `window.matchMedia` is absent under SSR and in older test environments. When it cannot\n * be consulted, assume reduced motion — skipping a decorative burst is the safe default.\n */\nconst prefersReducedMotion = (): boolean => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n        return true;\n    }\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n};\n\nexport interface ConfettiProps {\n    /** Number of confetti pieces. */\n    count?: number;\n    /** Colors cycled across the pieces. */\n    colors?: string[];\n    className?: string;\n}\n\n// Dependency-free confetti burst via the Web Animations API. Uses WAAPI (not Tailwind\n// transform utilities) so it works inside the shadow DOM, and respects\n// prefers-reduced-motion. Fires once on mount.\nconst Confetti: React.FC<ConfettiProps> = ({\n    count = 150,\n    colors = DEFAULT_COLORS,\n    className = '',\n}) => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    // Keyed on the palette's contents, not the array's identity: an inline\n    // `colors={['red', 'blue']}` is a new array every render and would re-fire the burst.\n    const colorsKey = colors.join(COLORS_KEY_SEPARATOR);\n\n    useEffect(() => {\n        const container = ref.current;\n        if (!container) return;\n        if (prefersReducedMotion()) return;\n\n        const palette = colorsKey.split(COLORS_KEY_SEPARATOR);\n\n        const pieces = Array.from({ length: count }, (_, i) => {\n            const piece = document.createElement('div');\n            const size = 10 + ((i * 7) % 10);\n            piece.style.cssText = `position:absolute;top:-5%;left:${(i * 37) % 100}%;width:${size}px;height:${Math.round(size * 0.5)}px;background:${palette[i % palette.length]};border-radius:2px;`;\n            container.appendChild(piece);\n\n            const xDrift = (((i * 53) % 100) - 50) * 4;\n            const rotation = 360 + ((i * 47) % 720);\n            piece.animate(\n                [\n                    { transform: 'translate(0, 0) rotate(0deg)', opacity: 1 },\n                    {\n                        transform: `translate(${xDrift}px, 105vh) rotate(${rotation}deg)`,\n                        opacity: 1,\n                        offset: 0.9,\n                    },\n                    { transform: `translate(${xDrift}px, 110vh) rotate(${rotation}deg)`, opacity: 0 },\n                ],\n                {\n                    duration: 2600 + ((i * 17) % 1600),\n                    delay: (i * 11) % 500,\n                    easing: 'cubic-bezier(0.2, 0.6, 0.4, 1)',\n                    fill: 'forwards',\n                },\n            );\n            return piece;\n        });\n\n        return () => {\n            for (const piece of pieces) piece.remove();\n        };\n    }, [count, colorsKey]);\n\n    return (\n        <div\n            ref={ref}\n            aria-hidden\n            className={`pointer-events-none fixed inset-0 overflow-hidden z-50 ${className}`}\n        />\n    );\n};\n\nexport default Confetti;\nexport { Confetti };\n"],"names":["DEFAULT_COLORS","COLORS_KEY_SEPARATOR","prefersReducedMotion","Confetti","count","colors","className","ref","useRef","colorsKey","useEffect","container","palette","pieces","_","i","piece","size","xDrift","rotation","jsx"],"mappings":";;AAIA,MAAMA,IAAiB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAGMC,IAAuB,MAMvBC,IAAuB,MACrB,OAAO,SAAW,OAAe,OAAO,OAAO,cAAe,aACvD,KAEJ,OAAO,WAAW,kCAAkC,EAAE,SAc3DC,IAAoC,CAAC;AAAA,EACvC,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAASL;AAAA,EACT,WAAAM,IAAY;AAChB,MAAM;AACF,QAAMC,IAAMC,EAAuB,IAAI,GAIjCC,IAAYJ,EAAO,KAAKJ,CAAoB;AAElD,SAAAS,EAAU,MAAM;AACZ,UAAMC,IAAYJ,EAAI;AAEtB,QADI,CAACI,KACDT,IAAwB;AAE5B,UAAMU,IAAUH,EAAU,MAAMR,CAAoB,GAE9CY,IAAS,MAAM,KAAK,EAAE,QAAQT,EAAA,GAAS,CAACU,GAAGC,MAAM;AACnD,YAAMC,IAAQ,SAAS,cAAc,KAAK,GACpCC,IAAO,KAAOF,IAAI,IAAK;AAC7B,MAAAC,EAAM,MAAM,UAAU,kCAAmCD,IAAI,KAAM,GAAG,WAAWE,CAAI,aAAa,KAAK,MAAMA,IAAO,GAAG,CAAC,iBAAiBL,EAAQG,IAAIH,EAAQ,MAAM,CAAC,uBACpKD,EAAU,YAAYK,CAAK;AAE3B,YAAME,KAAYH,IAAI,KAAM,MAAO,MAAM,GACnCI,IAAW,MAAQJ,IAAI,KAAM;AACnC,aAAAC,EAAM;AAAA,QACF;AAAA,UACI,EAAE,WAAW,gCAAgC,SAAS,EAAA;AAAA,UACtD;AAAA,YACI,WAAW,aAAaE,CAAM,qBAAqBC,CAAQ;AAAA,YAC3D,SAAS;AAAA,YACT,QAAQ;AAAA,UAAA;AAAA,UAEZ,EAAE,WAAW,aAAaD,CAAM,qBAAqBC,CAAQ,QAAQ,SAAS,EAAA;AAAA,QAAE;AAAA,QAEpF;AAAA,UACI,UAAU,OAASJ,IAAI,KAAM;AAAA,UAC7B,OAAQA,IAAI,KAAM;AAAA,UAClB,QAAQ;AAAA,UACR,MAAM;AAAA,QAAA;AAAA,MACV,GAEGC;AAAA,IACX,CAAC;AAED,WAAO,MAAM;AACT,iBAAWA,KAASH,EAAQ,CAAAG,EAAM,OAAA;AAAA,IACtC;AAAA,EACJ,GAAG,CAACZ,GAAOK,CAAS,CAAC,GAGjB,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAb;AAAA,MACA,eAAW;AAAA,MACX,WAAW,0DAA0DD,CAAS;AAAA,IAAA;AAAA,EAAA;AAG1F;"}

package/dist/components/ConfirmationDialog.js

@@ -0,0 +1,234 @@
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import { useState as k, useId as I, useEffect as Y } from "react";
+import { Alert as H } from "./Alert.js";
+import { Button as z } from "./Button.js";
+import Z from "./CustomIcons/CheckCircleFilled.js";
+import J from "./CustomIcons/CheckIcon.js";
+import P from "./CustomIcons/CopyIcon.js";
+import Q from "./CustomIcons/ErrorCircleFilled.js";
+import U from "./CustomIcons/InfoCircleFilled.js";
+import X from "./CustomIcons/WarningCircleFilled.js";
+import { FieldMessage as ee } from "./FieldMessage.js";
+import { Modal as te } from "./Modal.js";
+import { Typography as S } from "./Typography/index.js";
+import { CONFIRMATION_DIALOG_VARIANTS as ie } from "./confirmationDialogVariants.js";
+import oe from "./Input/Input.js";
+const v = 12, re = 1200, C = (e) => e.replace(/\s+/g, " "), ae = (e, t) => {
+  const r = e.trim();
+  if (!(!t || r === "" || r === t) && C(r).toLowerCase() === C(t).toLowerCase())
+    return C(r) === C(t) ? "The spacing has to match exactly." : "This is case-sensitive.";
+}, le = "Could not copy. Enter the phrase manually.", se = (e, t) => {
+  const r = typeof e == "object" && e !== null ? e : void 0;
+  return r ? { parts: r, text: [r.prefix, t, r.suffix].filter(Boolean).join(" ") } : { text: typeof e == "string" ? e : `Type ${t} to confirm` };
+}, ne = (e, t) => e === "copied" ? `${t} copied to clipboard` : "", ce = (e, t, r, u) => {
+  var o;
+  const f = `${t}|${e}`, [a, l] = k({ key: f, generation: 0, outcome: "idle" });
+  a.key !== f && l((c) => ({
+    key: f,
+    generation: c.generation + 1,
+    outcome: "idle"
+  })), Y(() => {
+    if (a.outcome !== "copied")
+      return;
+    const c = setTimeout(
+      () => l((d) => ({ ...d, outcome: "idle" })),
+      re
+    );
+    return () => clearTimeout(c);
+  }, [a.outcome]);
+  const s = typeof navigator < "u" && !!((o = navigator.clipboard) != null && o.writeText), n = async () => {
+    if (!e || !s)
+      return;
+    const c = a.generation, d = (y) => l(
+      (m) => m.generation === c ? { ...m, outcome: y } : m
+    );
+    try {
+      await navigator.clipboard.writeText(e);
+    } catch {
+      d("failed");
+      return;
+    }
+    d("copied"), queueMicrotask(() => u == null ? void 0 : u(e));
+  };
+  return { outcome: a.outcome, canCopy: s && !r, copy: () => void n() };
+}, L = ({ children: e }) => /* @__PURE__ */ i(S.Text, { size: "xsmall", color: "primary", fontWeight: "semi-bold", children: e }), de = ({
+  phrase: e,
+  parts: t,
+  plainLabel: r,
+  placeholder: u,
+  value: f,
+  onChange: a,
+  disabled: l,
+  copyLabel: s,
+  copyOutcome: n,
+  canCopy: o,
+  onCopy: c,
+  nearMissMessage: d
+}) => {
+  const y = I(), m = I(), b = I(), g = [d, n === "failed" ? le : void 0].filter(Boolean).join(" ") || void 0, p = t ? [y, t.suffix ? m : void 0].filter(Boolean).join(" ") : void 0;
+  return /* @__PURE__ */ x("div", { className: "flex flex-col gap-[6px]", children: [
+    t ? /* @__PURE__ */ x("div", { className: "flex flex-wrap items-center gap-[6px] px-2", children: [
+      /* @__PURE__ */ x("span", { id: y, children: [
+        /* @__PURE__ */ i(L, { children: t.prefix }),
+        " ",
+        /* @__PURE__ */ i(S.CodeText, { variant: "inline", size: "small", children: e })
+      ] }),
+      /* @__PURE__ */ i(
+        z,
+        {
+          variant: "ghost",
+          size: "small",
+          iconOnly: !0,
+          "aria-label": `${s} ${e}`,
+          icon: n === "copied" ? /* @__PURE__ */ i(J, { size: 13 }) : /* @__PURE__ */ i(P, { size: 13 }),
+          onClick: c,
+          disabled: !o
+        }
+      ),
+      t.suffix ? /* @__PURE__ */ i("span", { id: m, children: /* @__PURE__ */ i(L, { children: t.suffix }) }) : null
+    ] }) : null,
+    /* @__PURE__ */ i(
+      oe,
+      {
+        name: "confirmation-phrase",
+        size: "large",
+        value: f,
+        onChange: a,
+        label: t ? void 0 : r,
+        "aria-labelledby": p,
+        placeholder: u,
+        requiredIndicator: "none",
+        error: !!d,
+        "aria-describedby": g ? b : void 0,
+        disabled: l
+      }
+    ),
+    /* @__PURE__ */ i(ee, { id: b, message: g }),
+    t ? /* @__PURE__ */ i("span", { role: "status", className: "sr-only", children: ne(n, e) }) : null
+  ] });
+}, pe = {
+  default: /* @__PURE__ */ i(U, { size: v }),
+  warning: /* @__PURE__ */ i(X, { size: v }),
+  destructive: /* @__PURE__ */ i(Q, { size: v }),
+  success: /* @__PURE__ */ i(Z, { size: v })
+}, Ne = ({
+  open: e,
+  onClose: t,
+  onConfirm: r,
+  title: u,
+  titleAdornment: f,
+  badgeIcon: a,
+  description: l,
+  variant: s = "default",
+  callout: n,
+  confirmPhrase: o,
+  confirmPhraseLabel: c,
+  confirmPhraseCopyLabel: d = "Copy",
+  onPhraseCopied: y,
+  confirmPhrasePlaceholder: m,
+  confirmLabel: b = "Confirm",
+  cancelLabel: g = "Cancel",
+  loading: p = !1,
+  tip: _,
+  size: j = "medium",
+  "aria-label": D,
+  "aria-labelledby": M,
+  children: O
+}) => {
+  const [T, A] = k(""), N = I(), h = ie[s], [F, B] = k({ open: e, confirmPhrase: o });
+  (F.open !== e || F.confirmPhrase !== o) && (B({ open: e, confirmPhrase: o }), e && A(""));
+  const { parts: $, text: w } = se(
+    c,
+    o
+  ), {
+    outcome: G,
+    canCopy: R,
+    copy: V
+  } = ce(o, e, p, y), E = !o || T.trim() === o, q = ae(T, o), K = p || !E, W = /* @__PURE__ */ x("div", { className: "flex w-full flex-wrap items-center justify-end gap-[8px]", children: [
+    /* @__PURE__ */ i(z, { variant: "outline", size: "small", onClick: t, disabled: p, children: g }),
+    /* @__PURE__ */ i(
+      z,
+      {
+        variant: h.confirmVariant,
+        size: "small",
+        onClick: r,
+        disabled: K,
+        loading: p,
+        tooltip: !p && !E ? w : void 0,
+        children: b
+      }
+    )
+  ] });
+  return /* @__PURE__ */ x(
+    te,
+    {
+      open: e,
+      onClose: t,
+      title: u,
+      size: j,
+      footer: W,
+      busy: p,
+      role: s === "destructive" ? "alertdialog" : "dialog",
+      "aria-label": D,
+      "aria-labelledby": M,
+      "aria-describedby": l ? N : void 0,
+      closeOnOverlayClick: s !== "destructive" && !o,
+      headerDivider: !0,
+      titleAdornment: f,
+      bodyPadding: !1,
+      tray: { tone: h.tray, caption: _ },
+      icon: /* @__PURE__ */ i(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "confirmation-badge flex size-[18px] shrink-0 items-center justify-center rounded-[7px] text-[var(--malachite-card-background)]",
+          style: { backgroundColor: h.badge },
+          children: a ?? pe[s]
+        }
+      ),
+      children: [
+        n ? /* @__PURE__ */ i("div", { className: "border-0 border-b border-solid border-[var(--malachite-card-subtle-divider,var(--malachite-card-border))] p-[10px]", children: /* @__PURE__ */ i(
+          H,
+          {
+            type: n.type ?? h.calloutType,
+            message: n.message,
+            hasMargin: !1
+          }
+        ) }) : null,
+        /* @__PURE__ */ x("div", { className: "flex flex-col gap-[12px] p-[28px]", children: [
+          l ? /* @__PURE__ */ i(
+            "div",
+            {
+              id: N,
+              className: "text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]",
+              children: l
+            }
+          ) : null,
+          O,
+          o ? /* @__PURE__ */ i(
+            de,
+            {
+              phrase: o,
+              parts: $,
+              plainLabel: w,
+              placeholder: m,
+              value: T,
+              onChange: A,
+              disabled: p,
+              copyLabel: d,
+              copyOutcome: G,
+              canCopy: R,
+              onCopy: V,
+              nearMissMessage: q
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+};
+export {
+  Ne as ConfirmationDialog,
+  Ne as default
+};
+//# sourceMappingURL=ConfirmationDialog.js.map

package/dist/components/ConfirmationDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationDialog.js","sources":["../../src/components/ConfirmationDialog.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useId, useState } from 'react';\nimport Alert, { type AlertType } from './Alert';\nimport Button from './Button';\nimport CheckCircleFilled from './CustomIcons/CheckCircleFilled';\nimport CheckIcon from './CustomIcons/CheckIcon';\nimport CopyIcon from './CustomIcons/CopyIcon';\nimport ErrorCircleFilled from './CustomIcons/ErrorCircleFilled';\nimport InfoCircleFilled from './CustomIcons/InfoCircleFilled';\nimport WarningCircleFilled from './CustomIcons/WarningCircleFilled';\nimport FieldMessage from './FieldMessage';\nimport { Input } from './Input';\nimport Modal, { type ModalSize } from './Modal';\nimport Typography from './Typography';\nimport {\n    CONFIRMATION_DIALOG_VARIANTS,\n    type ConfirmationDialogVariant,\n} from './confirmationDialogVariants';\n\n/** Kept beside the component: an icon is a node, not a value the variant table can hold. */\nconst BADGE_GLYPH_SIZE = 12;\n\nconst COPIED_FEEDBACK_MS = 1200;\n\nconst collapseSpaces = (value: string) => value.replace(/\\s+/g, ' ');\n\nconst nearMissAgainst = (typedPhrase: string, confirmPhrase?: string): string | undefined => {\n    const typed = typedPhrase.trim();\n    if (!confirmPhrase || typed === '' || typed === confirmPhrase) {\n        return undefined;\n    }\n    if (collapseSpaces(typed).toLowerCase() !== collapseSpaces(confirmPhrase).toLowerCase()) {\n        return undefined;\n    }\n    return collapseSpaces(typed) === collapseSpaces(confirmPhrase)\n        ? 'The spacing has to match exactly.'\n        : 'This is case-sensitive.';\n};\n\ntype PhraseLabel = string | { prefix: string; suffix?: string };\n\ntype CopyOutcome = 'idle' | 'copied' | 'failed';\n\nconst COPY_FAILED_MESSAGE = 'Could not copy. Enter the phrase manually.';\n\nconst resolvePhraseLabel = (\n    label: PhraseLabel | undefined,\n    phrase?: string,\n): { parts?: { prefix: string; suffix?: string }; text: string } => {\n    const parts = typeof label === 'object' && label !== null ? label : undefined;\n    if (parts) {\n        return { parts, text: [parts.prefix, phrase, parts.suffix].filter(Boolean).join(' ') };\n    }\n    return { text: typeof label === 'string' ? label : `Type ${phrase} to confirm` };\n};\n\nconst copyStatusFor = (outcome: CopyOutcome, phrase: string): string =>\n    outcome === 'copied' ? `${phrase} copied to clipboard` : '';\n\nconst usePhraseCopy = (\n    phrase: string | undefined,\n    open: boolean,\n    disabled: boolean,\n    onCopied?: (phrase: string) => void,\n): { outcome: CopyOutcome; canCopy: boolean; copy: () => void } => {\n    const decisionKey = `${open}|${phrase}`;\n    const [state, setState] = useState<{\n        key: string;\n        generation: number;\n        outcome: CopyOutcome;\n    }>({ key: decisionKey, generation: 0, outcome: 'idle' });\n    if (state.key !== decisionKey) {\n        setState((previous) => ({\n            key: decisionKey,\n            generation: previous.generation + 1,\n            outcome: 'idle',\n        }));\n    }\n\n    useEffect(() => {\n        if (state.outcome !== 'copied') {\n            return;\n        }\n        const timer = setTimeout(\n            () => setState((previous) => ({ ...previous, outcome: 'idle' })),\n            COPIED_FEEDBACK_MS,\n        );\n        return () => clearTimeout(timer);\n    }, [state.outcome]);\n\n    const canCopy = typeof navigator !== 'undefined' && !!navigator.clipboard?.writeText;\n\n    const run = async () => {\n        if (!phrase || !canCopy) {\n            return;\n        }\n        const generation = state.generation;\n        const settle = (outcome: CopyOutcome) =>\n            setState((previous) =>\n                previous.generation === generation ? { ...previous, outcome } : previous,\n            );\n        try {\n            await navigator.clipboard.writeText(phrase);\n        } catch {\n            settle('failed');\n            return;\n        }\n        settle('copied');\n        queueMicrotask(() => onCopied?.(phrase));\n    };\n\n    return { outcome: state.outcome, canCopy: canCopy && !disabled, copy: () => void run() };\n};\n\nconst LabelText: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <Typography.Text size=\"xsmall\" color=\"primary\" fontWeight=\"semi-bold\">\n        {children}\n    </Typography.Text>\n);\n\ninterface PhraseFieldProps {\n    phrase: string;\n    parts?: { prefix: string; suffix?: string };\n    plainLabel: string;\n    placeholder?: string;\n    value: string;\n    onChange: (value: string) => void;\n    disabled: boolean;\n    copyLabel: string;\n    copyOutcome: CopyOutcome;\n    canCopy: boolean;\n    onCopy: () => void;\n    nearMissMessage?: string;\n}\n\nconst PhraseField: React.FC<PhraseFieldProps> = ({\n    phrase,\n    parts,\n    plainLabel,\n    placeholder,\n    value,\n    onChange,\n    disabled,\n    copyLabel,\n    copyOutcome,\n    canCopy,\n    onCopy,\n    nearMissMessage,\n}) => {\n    const beforeId = useId();\n    const afterId = useId();\n    const messageId = useId();\n    const message =\n        [nearMissMessage, copyOutcome === 'failed' ? COPY_FAILED_MESSAGE : undefined]\n            .filter(Boolean)\n            .join(' ') || undefined;\n    const labelledBy = parts\n        ? [beforeId, parts.suffix ? afterId : undefined].filter(Boolean).join(' ')\n        : undefined;\n\n    return (\n        <div className=\"flex flex-col gap-[6px]\">\n            {parts ? (\n                <div className=\"flex flex-wrap items-center gap-[6px] px-2\">\n                    <span id={beforeId}>\n                        <LabelText>{parts.prefix}</LabelText>{' '}\n                        <Typography.CodeText variant=\"inline\" size=\"small\">\n                            {phrase}\n                        </Typography.CodeText>\n                    </span>\n                    <Button\n                        variant=\"ghost\"\n                        size=\"small\"\n                        iconOnly\n                        aria-label={`${copyLabel} ${phrase}`}\n                        icon={\n                            copyOutcome === 'copied' ? (\n                                <CheckIcon size={13} />\n                            ) : (\n                                <CopyIcon size={13} />\n                            )\n                        }\n                        onClick={onCopy}\n                        disabled={!canCopy}\n                    />\n                    {parts.suffix ? (\n                        <span id={afterId}>\n                            <LabelText>{parts.suffix}</LabelText>\n                        </span>\n                    ) : null}\n                </div>\n            ) : null}\n            <Input\n                name=\"confirmation-phrase\"\n                size=\"large\"\n                value={value}\n                onChange={onChange}\n                label={parts ? undefined : plainLabel}\n                aria-labelledby={labelledBy}\n                placeholder={placeholder}\n                requiredIndicator=\"none\"\n                error={!!nearMissMessage}\n                aria-describedby={message ? messageId : undefined}\n                disabled={disabled}\n            />\n            <FieldMessage id={messageId} message={message} />\n            {parts ? (\n                <span role=\"status\" className=\"sr-only\">\n                    {copyStatusFor(copyOutcome, phrase)}\n                </span>\n            ) : null}\n        </div>\n    );\n};\n\nconst VARIANT_ICON: Record<ConfirmationDialogVariant, React.ReactNode> = {\n    default: <InfoCircleFilled size={BADGE_GLYPH_SIZE} />,\n    warning: <WarningCircleFilled size={BADGE_GLYPH_SIZE} />,\n    destructive: <ErrorCircleFilled size={BADGE_GLYPH_SIZE} />,\n    success: <CheckCircleFilled size={BADGE_GLYPH_SIZE} />,\n};\n\nexport interface ConfirmationDialogProps {\n    open: boolean;\n    /** Dismiss handler — cancel, close button, ESC or scrim. `loading` suppresses every\n     *  route except ESC, which always reaches this so a keyboard user is never stranded. */\n    onClose: () => void;\n    /** Runs when the confirm action is taken. Closing is left to the consumer. */\n    onConfirm: () => void;\n    title: React.ReactNode;\n    titleAdornment?: React.ReactNode;\n    badgeIcon?: React.ReactNode;\n    /** The sentence saying what is about to happen. */\n    description?: React.ReactNode;\n    variant?: ConfirmationDialogVariant;\n    /** Coloured callout below the body. Defaults to the variant's own type. */\n    callout?: { type?: AlertType; message: string };\n    /**\n     * Requires this exact phrase to be typed before the confirm action enables — for a\n     * consequence severe enough that a single click should not be able to cause it.\n     */\n    confirmPhrase?: string;\n    /** Label above the type-to-confirm field. `{ prefix, suffix }` makes the phrase copyable. */\n    confirmPhraseLabel?: PhraseLabel;\n    /** Names the copy control, e.g. `Copy profile name`. Default: `Copy`. */\n    confirmPhraseCopyLabel?: string;\n    /** Runs after the phrase reaches the clipboard, with what was copied. */\n    onPhraseCopied?: (phrase: string) => void;\n    confirmPhrasePlaceholder?: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    /**\n     * Disables the actions, spins the confirm button and suppresses the pointer dismissal\n     * routes — but never ESC, which always reaches `onClose`.\n     */\n    loading?: boolean;\n    tip?: { label?: string; message: string };\n    size?: ModalSize;\n    /** Accessible dialog name; required when `title` isn't a plain string. */\n    'aria-label'?: string;\n    /** ID of a visible element naming the dialog (alternative to `aria-label`). */\n    'aria-labelledby'?: string;\n    /** Extra body content between the description and the callout, e.g. an entity chip. */\n    children?: React.ReactNode;\n}\n\nconst ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({\n    open,\n    onClose,\n    onConfirm,\n    title,\n    titleAdornment,\n    badgeIcon,\n    description,\n    variant = 'default',\n    callout,\n    confirmPhrase,\n    confirmPhraseLabel,\n    confirmPhraseCopyLabel = 'Copy',\n    onPhraseCopied,\n    confirmPhrasePlaceholder,\n    confirmLabel = 'Confirm',\n    cancelLabel = 'Cancel',\n    loading = false,\n    tip,\n    size = 'medium',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    children,\n}) => {\n    const [typedPhrase, setTypedPhrase] = useState('');\n    const descriptionId = useId();\n    const base = CONFIRMATION_DIALOG_VARIANTS[variant];\n\n    // On open, not close: the dialog outlives `open` by its exit transition, so resetting on\n    // close empties the field in front of the user. Adjusted during render rather than from an\n    // effect, or a reopen paints the previous answer once with confirm already enabled.\n    const [answeredFor, setAnsweredFor] = useState({ open, confirmPhrase });\n    if (answeredFor.open !== open || answeredFor.confirmPhrase !== confirmPhrase) {\n        setAnsweredFor({ open, confirmPhrase });\n        if (open) {\n            setTypedPhrase('');\n        }\n    }\n\n    const { parts: phraseParts, text: phraseLabel } = resolvePhraseLabel(\n        confirmPhraseLabel,\n        confirmPhrase,\n    );\n    const {\n        outcome: copyOutcome,\n        canCopy: canCopyPhrase,\n        copy: handleCopyPhrase,\n    } = usePhraseCopy(confirmPhrase, open, loading, onPhraseCopied);\n    // Trimmed because copying an entity name commonly picks up a trailing space; the gate is\n    // still exact, and deliberately case-sensitive.\n    const phraseSatisfied = !confirmPhrase || typedPhrase.trim() === confirmPhrase;\n    const nearMissMessage = nearMissAgainst(typedPhrase, confirmPhrase);\n    const confirmDisabled = loading || !phraseSatisfied;\n\n    const footer = (\n        <div className=\"flex w-full flex-wrap items-center justify-end gap-[8px]\">\n            <Button variant=\"outline\" size=\"small\" onClick={onClose} disabled={loading}>\n                {cancelLabel}\n            </Button>\n            <Button\n                variant={base.confirmVariant}\n                size=\"small\"\n                onClick={onConfirm}\n                disabled={confirmDisabled}\n                loading={loading}\n                // A disabled control emits no hover, so the tooltip explains the gate from the\n                // wrapper Button renders for exactly this case.\n                tooltip={!loading && !phraseSatisfied ? phraseLabel : undefined}\n            >\n                {confirmLabel}\n            </Button>\n        </div>\n    );\n\n    return (\n        <Modal\n            open={open}\n            onClose={onClose}\n            title={title}\n            size={size}\n            footer={footer}\n            busy={loading}\n            // A consequential choice is an alertdialog: it asks assistive tech to announce the\n            // body, which is where the consequence is written.\n            role={variant === 'destructive' ? 'alertdialog' : 'dialog'}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-describedby={description ? descriptionId : undefined}\n            // A choice this deliberate should not be undone by a stray click, and a scrim\n            // click must not discard a phrase the customer has already typed.\n            closeOnOverlayClick={variant !== 'destructive' && !confirmPhrase}\n            headerDivider\n            titleAdornment={titleAdornment}\n            bodyPadding={false}\n            tray={{ tone: base.tray, caption: tip }}\n            icon={\n                <span\n                    aria-hidden=\"true\"\n                    className=\"confirmation-badge flex size-[18px] shrink-0 items-center justify-center rounded-[7px] text-[var(--malachite-card-background)]\"\n                    style={{ backgroundColor: base.badge }}\n                >\n                    {badgeIcon ?? VARIANT_ICON[variant]}\n                </span>\n            }\n        >\n            {callout ? (\n                <div className=\"border-0 border-b border-solid border-[var(--malachite-card-subtle-divider,var(--malachite-card-border))] p-[10px]\">\n                    <Alert\n                        type={callout.type ?? base.calloutType}\n                        message={callout.message}\n                        hasMargin={false}\n                    />\n                </div>\n            ) : null}\n            <div className=\"flex flex-col gap-[12px] p-[28px]\">\n                {description ? (\n                    <div\n                        id={descriptionId}\n                        className=\"text-[13px] leading-[1.6] text-[var(--malachite-text-secondary)]\"\n                    >\n                        {description}\n                    </div>\n                ) : null}\n                {children}\n                {confirmPhrase ? (\n                    <PhraseField\n                        phrase={confirmPhrase}\n                        parts={phraseParts}\n                        plainLabel={phraseLabel}\n                        placeholder={confirmPhrasePlaceholder}\n                        value={typedPhrase}\n                        onChange={setTypedPhrase}\n                        disabled={loading}\n                        copyLabel={confirmPhraseCopyLabel}\n                        copyOutcome={copyOutcome}\n                        canCopy={canCopyPhrase}\n                        onCopy={handleCopyPhrase}\n                        nearMissMessage={nearMissMessage}\n                    />\n                ) : null}\n            </div>\n        </Modal>\n    );\n};\n\nexport default ConfirmationDialog;\nexport { ConfirmationDialog };\nexport type { ConfirmationDialogVariant };\n"],"names":["BADGE_GLYPH_SIZE","COPIED_FEEDBACK_MS","collapseSpaces","value","nearMissAgainst","typedPhrase","confirmPhrase","typed","COPY_FAILED_MESSAGE","resolvePhraseLabel","label","phrase","parts","copyStatusFor","outcome","usePhraseCopy","open","disabled","onCopied","decisionKey","state","setState","useState","previous","useEffect","timer","canCopy","_a","run","generation","settle","LabelText","children","jsx","Typography","PhraseField","plainLabel","placeholder","onChange","copyLabel","copyOutcome","onCopy","nearMissMessage","beforeId","useId","afterId","messageId","message","labelledBy","jsxs","Button","CheckIcon","CopyIcon","Input","FieldMessage","VARIANT_ICON","InfoCircleFilled","WarningCircleFilled","ErrorCircleFilled","CheckCircleFilled","ConfirmationDialog","onClose","onConfirm","title","titleAdornment","badgeIcon","description","variant","callout","confirmPhraseLabel","confirmPhraseCopyLabel","onPhraseCopied","confirmPhrasePlaceholder","confirmLabel","cancelLabel","loading","tip","size","ariaLabel","ariaLabelledBy","setTypedPhrase","descriptionId","base","CONFIRMATION_DIALOG_VARIANTS","answeredFor","setAnsweredFor","phraseParts","phraseLabel","canCopyPhrase","handleCopyPhrase","phraseSatisfied","confirmDisabled","footer","Modal","Alert"],"mappings":"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"}

package/dist/components/ConnectionHeader.js

@@ -0,0 +1,47 @@
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+const t = (e) => ({
+  backgroundColor: e.background ?? "var(--malachite-card-dimmed-background)",
+  color: e.background ? "#fff" : "var(--malachite-text-primary)"
+}), i = ({ from: e, to: a, className: c = "" }) => {
+  const s = !!(e.label || a.label);
+  return /* @__PURE__ */ r("div", { className: `flex flex-col items-center gap-[12px] ${c}`, children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: [
+      /* @__PURE__ */ l(
+        "div",
+        {
+          className: "flex items-center justify-center size-[40px] rounded-[13px] mr-[-8px] z-[2]",
+          style: {
+            ...t(e),
+            transform: "rotate(-12deg)",
+            boxShadow: "0px 4px 4px 0px rgba(0,0,0,0.15)"
+          },
+          "aria-label": e.label,
+          children: e.icon
+        }
+      ),
+      /* @__PURE__ */ l(
+        "div",
+        {
+          className: "flex items-center justify-center size-[40px] rounded-[13px] border-[1.5px] border-solid border-[var(--malachite-card-background)] z-[1]",
+          style: {
+            ...t(a),
+            transform: "rotate(12deg)",
+            boxShadow: "0px 4px 4px 0px rgba(0,0,0,0.15)"
+          },
+          "aria-label": a.label,
+          children: a.icon
+        }
+      )
+    ] }),
+    s && /* @__PURE__ */ r("div", { className: "flex items-center gap-[8px] text-[13px] font-medium text-[var(--malachite-text-secondary)]", children: [
+      e.label && /* @__PURE__ */ l("span", { children: e.label }),
+      e.label && a.label && /* @__PURE__ */ l("span", { className: "text-[var(--malachite-text-placeholder)]", children: "→" }),
+      a.label && /* @__PURE__ */ l("span", { children: a.label })
+    ] })
+  ] });
+};
+export {
+  i as ConnectionHeader,
+  i as default
+};
+//# sourceMappingURL=ConnectionHeader.js.map