efficient-shell 0.0.0-stage → 4.126.2

package/dist/markdown/index.d.ts

@@ -0,0 +1,118 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Components } from 'react-markdown';
+export { Components as MarkdownComponents } from 'react-markdown';
+import remarkBreaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+
+/**
+ * The full Markdown renderer — CommonMark + GFM, behind its own subpath.
+ *
+ * ## Why this is not in the UI kit
+ *
+ * `react-os-shell/ui` promises to import nothing but React, and two checks
+ * hold that line: `tests/uiEntryIsPeerFree.test.ts` walks the source graph and
+ * `scripts/verify-dist.mjs` walks the built one (only the second catches a peer
+ * arriving through a shared chunk). That promise is what lets the till, which
+ * has no `@heroicons/react` installed at all, take the kit.
+ *
+ * The kit's `Markdown` was written under that constraint — a regex renderer,
+ * because a regex was all it could afford. It is still there, still correct for
+ * what it covers, and still what `HelpCenter` falls back to. But a regex cannot
+ * nest, so it cannot grow tables inside list items, task lists, footnotes, or
+ * anything else with structure, and the day arrived when a body needed more.
+ *
+ * So: a second entry, with a real parser, whose peers are OPTIONAL. A consumer
+ * that never imports `react-os-shell/markdown` never installs react-markdown
+ * and never pays a byte for it — the same bargain `react-os-shell/markup`
+ * already strikes from the other direction. The package's `dependencies` stay
+ * empty, which is the promise underneath all of the others.
+ *
+ * ## What is deliberately NOT here
+ *
+ * - **Syntax highlighting.** Shiki and Prism each cost more than this whole
+ *   package. Code blocks are monospace with their own horizontal scroll, and
+ *   the info string is carried through as `data-language` so a host that wants
+ *   highlighting can add it without a fork.
+ * - **`rehype-raw`.** Adding it would re-open raw HTML, and raw HTML in a body
+ *   a customer typed is an XSS surface. The dialect below closes it instead.
+ * - **A sanitiser.** Not needed, and worth stating so nobody adds one out of
+ *   caution: no raw HTML is parsed, and react-markdown's default `urlTransform`
+ *   neutralises `javascript:` URLs. There is no HTML string anywhere in this
+ *   pipeline to sanitise — the output is React elements throughout.
+ * - **MDX.** The input is a string a person or a service wrote, not a module.
+ */
+/**
+ * Four constructs disabled, each because a body that predates markdown would
+ * otherwise render surprisingly. Every one of these was found in stored copy,
+ * not imagined:
+ *
+ * - `codeIndented` — a pasted, quoted email is indented four spaces and would
+ *   become a code block.
+ * - `htmlFlow` / `htmlText` — `<John>` and `<script>` must render as the text
+ *   they are. react-markdown DROPS raw-HTML nodes silently, so without this a
+ *   name in angle brackets simply disappears from the message.
+ * - `setextUnderline` — `Title` followed by `----` is a horizontal rule under a
+ *   line of text far more often than it is a heading.
+ *
+ * Fenced ``` blocks and `<https://…>` autolinks are untouched.
+ */
+declare function remarkDialect(this: unknown): void;
+/**
+ * The plugin lists, exported for a host assembling its own pipeline.
+ *
+ * `note` carries `remark-breaks`; `article` does not, and the difference is
+ * about who wrote the text. A note is typed into a box, where pressing Return
+ * means a line break. An article is authored markdown whose source is hard
+ * wrapped at ~78 columns, where a single newline is a soft wrap and honouring
+ * it would shred every paragraph.
+ */
+declare const MARKDOWN_PLUGINS: {
+    readonly note: readonly [typeof remarkGfm, typeof remarkBreaks, typeof remarkDialect];
+    readonly article: readonly [typeof remarkGfm, typeof remarkDialect];
+};
+type MarkdownVariant = 'note' | 'article';
+interface MarkdownProps {
+    /** The markdown source. */
+    children: string;
+    /**
+     * `note` (default) — typed copy inside a card: capped headings, single
+     * newlines honoured as line breaks, tight blocks.
+     * `article` — authored documentation: full heading scale, soft wraps, callout
+     * blockquotes, screenshot placeholders, a capped measure.
+     */
+    variant?: MarkdownVariant;
+    /**
+     * Collapse to ~6 text lines with a fade. The "Show more" control belongs to
+     * the caller; this only clamps. The fade appears only when the clamped
+     * content actually OVERFLOWS, measured after layout — a note that is long in
+     * characters but short on screen would otherwise get a fade under nothing.
+     *
+     * Needs `react-os-shell/ui.css` for `.rosmd-clamp` / `.rosmd-fade`.
+     */
+    clamp?: boolean;
+    /**
+     * Rewrite a relative image `src` before it is fetched. Article bodies
+     * reference screenshots by a repo-relative path that only the host knows how
+     * to serve.
+     */
+    resolveImageSrc?: (src: string) => string;
+    /** Override individual element renderers. Merged over the variant's set. */
+    components?: Partial<Components>;
+    className?: string;
+}
+/**
+ * Render markdown as React elements.
+ *
+ * No HTML string is produced at any point, and no raw HTML is parsed, so there
+ * is nothing here to sanitise — see the note at the top of this file before
+ * reaching for DOMPurify.
+ */
+declare function Markdown({ children, variant, clamp, resolveImageSrc, components, className, }: MarkdownProps): react_jsx_runtime.JSX.Element;
+declare const MemoMarkdown: react.MemoExoticComponent<typeof Markdown>;
+
+/** Re-exported so a host can render a placeholder in its own layout. */
+type MarkdownNode = ReactNode;
+
+export { MARKDOWN_PLUGINS, MemoMarkdown as Markdown, type MarkdownNode, type MarkdownProps, type MarkdownVariant, MemoMarkdown as default };

package/dist/markdown/index.js

@@ -0,0 +1,184 @@
+import { memo, useRef, useState, useLayoutEffect, useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkBreaks from 'remark-breaks';
+import remarkGfm from 'remark-gfm';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/markdown/index.tsx
+function remarkDialect() {
+  const data = this.data();
+  (data.micromarkExtensions ??= []).push({
+    disable: { null: ["codeIndented", "htmlFlow", "htmlText", "setextUnderline"] }
+  });
+}
+var MARKDOWN_PLUGINS = {
+  note: [remarkGfm, remarkBreaks, remarkDialect],
+  article: [remarkGfm, remarkDialect]
+};
+var linkRenderer = ({ node: _n, ...props }) => /* @__PURE__ */ jsx("a", { ...props, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline break-all" });
+var codeRenderer = ({ node: _n, ...props }) => /* @__PURE__ */ jsx("code", { className: "rounded bg-gray-200 px-1 py-0.5 font-mono text-[0.85em] text-gray-800", ...props });
+var preRenderer = (extra) => ({ node: _n, ...props }) => /* @__PURE__ */ jsx(
+  "pre",
+  {
+    className: `${extra} overflow-x-auto rounded-lg border border-gray-200 bg-gray-50 font-mono text-xs [&>code]:bg-transparent [&>code]:p-0 [&>code]:[font-size:inherit]`,
+    ...props
+  }
+);
+var tableRenderers = {
+  th: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("th", { className: "border border-gray-200 bg-gray-50 px-2 py-1 text-left font-semibold text-gray-700", ...props }),
+  td: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("td", { className: "border border-gray-200 px-2 py-1 align-top", ...props })
+};
+var NOTE_COMPONENTS = {
+  a: linkRenderer,
+  h1: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900", ...props }),
+  h2: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-gray-900", ...props }),
+  h3: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", ...props }),
+  h4: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-gray-700", ...props }),
+  h5: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h5", { className: "text-sm font-semibold text-gray-700", ...props }),
+  h6: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h6", { className: "text-sm font-semibold text-gray-700", ...props }),
+  ul: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("ul", { className: "list-disc pl-5", ...props }),
+  ol: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("ol", { className: "list-decimal pl-5", ...props }),
+  code: codeRenderer,
+  pre: preRenderer("p-2"),
+  blockquote: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("blockquote", { className: "border-l-2 border-gray-300 pl-2.5 text-gray-600", ...props }),
+  hr: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("hr", { className: "border-gray-200", ...props }),
+  table: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx("table", { className: "text-xs border-collapse", ...props }) }),
+  ...tableRenderers,
+  img: ({ node: _n, alt, ...props }) => /* @__PURE__ */ jsx("img", { ...props, alt: alt ?? "", loading: "lazy", className: "max-w-full max-h-64 rounded-lg border border-gray-200" })
+};
+function noteComponents(resolveImageSrc) {
+  if (!resolveImageSrc) return NOTE_COMPONENTS;
+  return {
+    ...NOTE_COMPONENTS,
+    img: ({ node: _n, src, alt, ...props }) => {
+      const raw = typeof src === "string" ? src : void 0;
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          ...props,
+          src: raw ? resolveImageSrc(raw) : raw,
+          alt: alt ?? "",
+          loading: "lazy",
+          className: "max-w-full max-h-64 rounded-lg border border-gray-200"
+        }
+      );
+    }
+  };
+}
+function ArticleImage({ src, alt }) {
+  const [failed, setFailed] = useState(false);
+  const label = (alt ?? "").replace(/^screenshot:\s*/i, "");
+  if (!src || failed) {
+    return /* @__PURE__ */ jsxs("span", { className: "my-3 flex items-start gap-2 rounded-lg border border-dashed border-gray-300 bg-gray-50 px-3 py-2.5", children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "mt-0.5 h-4 w-4 shrink-0 text-gray-400",
+          viewBox: "0 0 20 20",
+          fill: "currentColor",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("path", { d: "M3 6a1.5 1.5 0 0 1 1.5-1.5h1.1l.4-.9a1 1 0 0 1 .9-.6h6.2a1 1 0 0 1 .9.6l.4.9h1.1A1.5 1.5 0 0 1 18 6v8.5A1.5 1.5 0 0 1 16.5 16h-13A1.5 1.5 0 0 1 2 14.5V6Zm7.5 1.5a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5Z" })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: label || "Screenshot" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: alt ?? "",
+      loading: "lazy",
+      onError: () => setFailed(true),
+      className: "my-3 block max-w-full rounded-lg border border-gray-200"
+    }
+  );
+}
+function articleComponents(resolveImageSrc) {
+  return {
+    a: linkRenderer,
+    h1: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h1", { className: "mt-6 mb-3 text-xl font-semibold text-gray-900 first:mt-0", ...props }),
+    h2: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h2", { className: "mt-6 mb-2.5 border-b border-gray-200 pb-1.5 text-lg font-semibold text-gray-900 first:mt-0", ...props }),
+    h3: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h3", { className: "mt-5 mb-2 text-base font-semibold text-gray-900 first:mt-0", ...props }),
+    h4: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h4", { className: "mt-4 mb-1.5 text-sm font-semibold text-gray-900 first:mt-0", ...props }),
+    h5: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h5", { className: "mt-4 mb-1.5 text-sm font-semibold text-gray-700 first:mt-0", ...props }),
+    h6: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h6", { className: "mt-4 mb-1.5 text-sm font-semibold text-gray-700 first:mt-0", ...props }),
+    p: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("p", { className: "my-2.5 leading-relaxed", ...props }),
+    ul: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("ul", { className: "my-2.5 list-disc space-y-1 pl-5", ...props }),
+    ol: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("ol", { className: "my-2.5 list-decimal space-y-1 pl-5", ...props }),
+    // A numbered walkthrough has multi-paragraph steps (text, then a
+    // screenshot); paragraphs inside an item stay tighter than the gap between
+    // items, or the numbering stops reading as a sequence.
+    li: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("li", { className: "leading-relaxed [&>p]:my-1", ...props }),
+    code: codeRenderer,
+    pre: preRenderer("my-3 p-3"),
+    blockquote: ({ node: _n, ...props }) => /* @__PURE__ */ jsx(
+      "blockquote",
+      {
+        className: "my-3 rounded-r-lg border-l-4 border-blue-400/60 bg-blue-50 px-3 py-2 text-gray-700 [&>p]:my-1",
+        ...props
+      }
+    ),
+    hr: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("hr", { className: "my-4 border-gray-200", ...props }),
+    table: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-3 overflow-x-auto", children: /* @__PURE__ */ jsx("table", { className: "border-collapse text-sm", ...props }) }),
+    ...tableRenderers,
+    img: ({ node: _n, src, alt }) => {
+      const raw = typeof src === "string" ? src : void 0;
+      return /* @__PURE__ */ jsx(ArticleImage, { src: raw && resolveImageSrc ? resolveImageSrc(raw) : raw, alt });
+    }
+  };
+}
+function Markdown({
+  children,
+  variant = "note",
+  clamp = false,
+  resolveImageSrc,
+  components,
+  className = ""
+}) {
+  const ref = useRef(null);
+  const [overflowing, setOverflowing] = useState(false);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!clamp || !el) {
+      setOverflowing(false);
+      return;
+    }
+    const check = () => setOverflowing(el.scrollHeight > el.clientHeight + 1);
+    check();
+    const ro = new ResizeObserver(check);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [clamp, children]);
+  const resolved = useMemo(
+    () => ({
+      ...variant === "article" ? articleComponents(resolveImageSrc) : noteComponents(resolveImageSrc),
+      ...components
+    }),
+    [variant, resolveImageSrc, components]
+  );
+  const named = ` ${className} `;
+  const ink = /\stext-(?:[a-z]+-\d{2,3}(?:\/\d+)?|black|white|inherit)\s/.test(named) ? "" : "text-gray-800";
+  const size = /\stext-(?:xs|sm|base|lg|[2-9]?xl|\[[^\]]+\])\s/.test(named) ? "" : "text-sm";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: [
+        variant === "article" ? "max-w-3xl break-words" : "break-words space-y-1.5",
+        size,
+        ink,
+        clamp ? "rosmd-clamp" : "",
+        clamp && overflowing ? "rosmd-fade" : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: MARKDOWN_PLUGINS[variant], components: resolved, children })
+    }
+  );
+}
+var MemoMarkdown = memo(Markdown);
+var markdown_default = MemoMarkdown;
+
+export { MARKDOWN_PLUGINS, MemoMarkdown as Markdown, markdown_default as default };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/markdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/markdown/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { memo, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport ReactMarkdown, { type Components } from 'react-markdown';\nimport remarkBreaks from 'remark-breaks';\nimport remarkGfm from 'remark-gfm';\n\n/**\n * The full Markdown renderer — CommonMark + GFM, behind its own subpath.\n *\n * ## Why this is not in the UI kit\n *\n * `react-os-shell/ui` promises to import nothing but React, and two checks\n * hold that line: `tests/uiEntryIsPeerFree.test.ts` walks the source graph and\n * `scripts/verify-dist.mjs` walks the built one (only the second catches a peer\n * arriving through a shared chunk). That promise is what lets the till, which\n * has no `@heroicons/react` installed at all, take the kit.\n *\n * The kit's `Markdown` was written under that constraint — a regex renderer,\n * because a regex was all it could afford. It is still there, still correct for\n * what it covers, and still what `HelpCenter` falls back to. But a regex cannot\n * nest, so it cannot grow tables inside list items, task lists, footnotes, or\n * anything else with structure, and the day arrived when a body needed more.\n *\n * So: a second entry, with a real parser, whose peers are OPTIONAL. A consumer\n * that never imports `react-os-shell/markdown` never installs react-markdown\n * and never pays a byte for it — the same bargain `react-os-shell/markup`\n * already strikes from the other direction. The package's `dependencies` stay\n * empty, which is the promise underneath all of the others.\n *\n * ## What is deliberately NOT here\n *\n * - **Syntax highlighting.** Shiki and Prism each cost more than this whole\n *   package. Code blocks are monospace with their own horizontal scroll, and\n *   the info string is carried through as `data-language` so a host that wants\n *   highlighting can add it without a fork.\n * - **`rehype-raw`.** Adding it would re-open raw HTML, and raw HTML in a body\n *   a customer typed is an XSS surface. The dialect below closes it instead.\n * - **A sanitiser.** Not needed, and worth stating so nobody adds one out of\n *   caution: no raw HTML is parsed, and react-markdown's default `urlTransform`\n *   neutralises `javascript:` URLs. There is no HTML string anywhere in this\n *   pipeline to sanitise — the output is React elements throughout.\n * - **MDX.** The input is a string a person or a service wrote, not a module.\n */\n\n// ── Dialect ────────────────────────────────────────────────────────────────\n\n/**\n * Four constructs disabled, each because a body that predates markdown would\n * otherwise render surprisingly. Every one of these was found in stored copy,\n * not imagined:\n *\n * - `codeIndented` — a pasted, quoted email is indented four spaces and would\n *   become a code block.\n * - `htmlFlow` / `htmlText` — `<John>` and `<script>` must render as the text\n *   they are. react-markdown DROPS raw-HTML nodes silently, so without this a\n *   name in angle brackets simply disappears from the message.\n * - `setextUnderline` — `Title` followed by `----` is a horizontal rule under a\n *   line of text far more often than it is a heading.\n *\n * Fenced ``` blocks and `<https://…>` autolinks are untouched.\n */\nfunction remarkDialect(this: unknown) {\n  const data = (this as { data: () => { micromarkExtensions?: unknown[] } }).data();\n  (data.micromarkExtensions ??= []).push({\n    disable: { null: ['codeIndented', 'htmlFlow', 'htmlText', 'setextUnderline'] },\n  });\n}\n\n/**\n * The plugin lists, exported for a host assembling its own pipeline.\n *\n * `note` carries `remark-breaks`; `article` does not, and the difference is\n * about who wrote the text. A note is typed into a box, where pressing Return\n * means a line break. An article is authored markdown whose source is hard\n * wrapped at ~78 columns, where a single newline is a soft wrap and honouring\n * it would shred every paragraph.\n */\nexport const MARKDOWN_PLUGINS = {\n  note: [remarkGfm, remarkBreaks, remarkDialect],\n  article: [remarkGfm, remarkDialect],\n} as const;\n\n// ── Shared element renderers ───────────────────────────────────────────────\n\n/**\n * Colours here are utility classes that `ui.css` REMAPS under\n * `[data-theme=\"dark\"]` — this package's dark mode is not a Tailwind variant.\n * Two consequences worth carrying in your head when editing this file:\n *\n * 1. A class with no remap stays light-on-light. `tests/markdown.test.tsx`\n *    fails the build rather than let one through.\n * 2. `bg-gray-200`, never `bg-gray-100`, for anything drawn ON a panel:\n *    `bg-gray-100` remaps to `--surface`, and so does `bg-white`, so a chip\n *    using it is the exact colour of the surface behind it. It was invisible\n *    in dark mode in the kit renderer for a year.\n */\nconst linkRenderer: Components['a'] = ({ node: _n, ...props }) => (\n  <a {...props} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-blue-600 hover:underline break-all\" />\n);\n\nconst codeRenderer: Components['code'] = ({ node: _n, ...props }) => (\n  <code className=\"rounded bg-gray-200 px-1 py-0.5 font-mono text-[0.85em] text-gray-800\" {...props} />\n);\n\n/**\n * `pre` un-chips the `code` inside it: one `code` renderer serves both inline\n * spans and block content, so the block case has to undo the chip's own\n * background, padding and size.\n */\nconst preRenderer = (extra: string): Components['pre'] =>\n  ({ node: _n, ...props }) => (\n    <pre\n      className={\n        `${extra} overflow-x-auto rounded-lg border border-gray-200 bg-gray-50 font-mono text-xs ` +\n        '[&>code]:bg-transparent [&>code]:p-0 [&>code]:[font-size:inherit]'\n      }\n      {...props}\n    />\n  );\n\nconst tableRenderers: Pick<Components, 'th' | 'td'> = {\n  th: ({ node: _n, ...props }) => (\n    <th className=\"border border-gray-200 bg-gray-50 px-2 py-1 text-left font-semibold text-gray-700\" {...props} />\n  ),\n  td: ({ node: _n, ...props }) => <td className=\"border border-gray-200 px-2 py-1 align-top\" {...props} />,\n};\n\n// ── variant: note ──────────────────────────────────────────────────────────\n\n/**\n * Timeline cards, message bodies, bug-report descriptions — anything a person\n * or a service TYPED, shown inside a card that has other things in it.\n *\n * Headings cap one step above body text. An author writing `# heading` in a\n * note means emphasis, not a document outline, and a 30px line inside a\n * timeline card reads as a rendering fault.\n */\nconst NOTE_COMPONENTS: Components = {\n  a: linkRenderer,\n  h1: ({ node: _n, ...props }) => <h1 className=\"text-base font-semibold text-gray-900\" {...props} />,\n  h2: ({ node: _n, ...props }) => <h2 className=\"text-sm font-semibold text-gray-900\" {...props} />,\n  h3: ({ node: _n, ...props }) => <h3 className=\"text-sm font-semibold text-gray-700\" {...props} />,\n  h4: ({ node: _n, ...props }) => <h4 className=\"text-sm font-semibold text-gray-700\" {...props} />,\n  h5: ({ node: _n, ...props }) => <h5 className=\"text-sm font-semibold text-gray-700\" {...props} />,\n  h6: ({ node: _n, ...props }) => <h6 className=\"text-sm font-semibold text-gray-700\" {...props} />,\n  ul: ({ node: _n, ...props }) => <ul className=\"list-disc pl-5\" {...props} />,\n  ol: ({ node: _n, ...props }) => <ol className=\"list-decimal pl-5\" {...props} />,\n  code: codeRenderer,\n  pre: preRenderer('p-2'),\n  blockquote: ({ node: _n, ...props }) => (\n    <blockquote className=\"border-l-2 border-gray-300 pl-2.5 text-gray-600\" {...props} />\n  ),\n  hr: ({ node: _n, ...props }) => <hr className=\"border-gray-200\" {...props} />,\n  table: ({ node: _n, ...props }) => (\n    <div className=\"overflow-x-auto\">\n      <table className=\"text-xs border-collapse\" {...props} />\n    </div>\n  ),\n  ...tableRenderers,\n  img: ({ node: _n, alt, ...props }) => (\n    <img {...props} alt={alt ?? ''} loading=\"lazy\" className=\"max-w-full max-h-64 rounded-lg border border-gray-200\" />\n  ),\n};\n\n/** The note variant's set, with `resolveImageSrc` wired the same way the\n *  article's is — a resolver that silently applied to one variant and not the\n *  other was a broken image with no signal. */\nfunction noteComponents(resolveImageSrc?: (src: string) => string): Components {\n  if (!resolveImageSrc) return NOTE_COMPONENTS;\n  return {\n    ...NOTE_COMPONENTS,\n    img: ({ node: _n, src, alt, ...props }) => {\n      const raw = typeof src === 'string' ? src : undefined;\n      return (\n        <img\n          {...props}\n          src={raw ? resolveImageSrc(raw) : raw}\n          alt={alt ?? ''}\n          loading=\"lazy\"\n          className=\"max-w-full max-h-64 rounded-lg border border-gray-200\"\n        />\n      );\n    },\n  };\n}\n\n// ── variant: article ───────────────────────────────────────────────────────\n\n/**\n * A screenshot that has not been uploaded yet shows a labelled box rather than\n * a broken-image icon: most seeded article screenshots do not exist, and a\n * broken icon per step reads as a bug where the box reads as intent.\n *\n * Spans, not divs — react-markdown puts a lone image inside a `<p>`.\n */\nfunction ArticleImage({ src, alt }: { src?: string; alt?: string }) {\n  const [failed, setFailed] = useState(false);\n  const label = (alt ?? '').replace(/^screenshot:\\s*/i, '');\n  if (!src || failed) {\n    return (\n      <span className=\"my-3 flex items-start gap-2 rounded-lg border border-dashed border-gray-300 bg-gray-50 px-3 py-2.5\">\n        <svg\n          className=\"mt-0.5 h-4 w-4 shrink-0 text-gray-400\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M3 6a1.5 1.5 0 0 1 1.5-1.5h1.1l.4-.9a1 1 0 0 1 .9-.6h6.2a1 1 0 0 1 .9.6l.4.9h1.1A1.5 1.5 0 0 1 18 6v8.5A1.5 1.5 0 0 1 16.5 16h-13A1.5 1.5 0 0 1 2 14.5V6Zm7.5 1.5a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5Z\" />\n        </svg>\n        <span className=\"text-xs text-gray-500\">{label || 'Screenshot'}</span>\n      </span>\n    );\n  }\n  return (\n    <img\n      src={src}\n      alt={alt ?? ''}\n      loading=\"lazy\"\n      onError={() => setFailed(true)}\n      className=\"my-3 block max-w-full rounded-lg border border-gray-200\"\n    />\n  );\n}\n\n/**\n * Help articles and other authored documentation: full heading scale, airier\n * blocks, `>` styled as a callout rather than an email-quote bar, and a capped\n * measure so a wide window does not produce 200-character lines.\n */\nfunction articleComponents(resolveImageSrc?: (src: string) => string): Components {\n  return {\n    a: linkRenderer,\n    h1: ({ node: _n, ...props }) => (\n      <h1 className=\"mt-6 mb-3 text-xl font-semibold text-gray-900 first:mt-0\" {...props} />\n    ),\n    h2: ({ node: _n, ...props }) => (\n      <h2 className=\"mt-6 mb-2.5 border-b border-gray-200 pb-1.5 text-lg font-semibold text-gray-900 first:mt-0\" {...props} />\n    ),\n    h3: ({ node: _n, ...props }) => (\n      <h3 className=\"mt-5 mb-2 text-base font-semibold text-gray-900 first:mt-0\" {...props} />\n    ),\n    h4: ({ node: _n, ...props }) => (\n      <h4 className=\"mt-4 mb-1.5 text-sm font-semibold text-gray-900 first:mt-0\" {...props} />\n    ),\n    h5: ({ node: _n, ...props }) => (\n      <h5 className=\"mt-4 mb-1.5 text-sm font-semibold text-gray-700 first:mt-0\" {...props} />\n    ),\n    h6: ({ node: _n, ...props }) => (\n      <h6 className=\"mt-4 mb-1.5 text-sm font-semibold text-gray-700 first:mt-0\" {...props} />\n    ),\n    p: ({ node: _n, ...props }) => <p className=\"my-2.5 leading-relaxed\" {...props} />,\n    ul: ({ node: _n, ...props }) => <ul className=\"my-2.5 list-disc space-y-1 pl-5\" {...props} />,\n    ol: ({ node: _n, ...props }) => <ol className=\"my-2.5 list-decimal space-y-1 pl-5\" {...props} />,\n    // A numbered walkthrough has multi-paragraph steps (text, then a\n    // screenshot); paragraphs inside an item stay tighter than the gap between\n    // items, or the numbering stops reading as a sequence.\n    li: ({ node: _n, ...props }) => <li className=\"leading-relaxed [&>p]:my-1\" {...props} />,\n    code: codeRenderer,\n    pre: preRenderer('my-3 p-3'),\n    blockquote: ({ node: _n, ...props }) => (\n      <blockquote\n        className=\"my-3 rounded-r-lg border-l-4 border-blue-400/60 bg-blue-50 px-3 py-2 text-gray-700 [&>p]:my-1\"\n        {...props}\n      />\n    ),\n    hr: ({ node: _n, ...props }) => <hr className=\"my-4 border-gray-200\" {...props} />,\n    table: ({ node: _n, ...props }) => (\n      <div className=\"my-3 overflow-x-auto\">\n        <table className=\"border-collapse text-sm\" {...props} />\n      </div>\n    ),\n    ...tableRenderers,\n    img: ({ node: _n, src, alt }) => {\n      const raw = typeof src === 'string' ? src : undefined;\n      return <ArticleImage src={raw && resolveImageSrc ? resolveImageSrc(raw) : raw} alt={alt} />;\n    },\n  };\n}\n\n// ── Component ──────────────────────────────────────────────────────────────\n\nexport type MarkdownVariant = 'note' | 'article';\n\nexport interface MarkdownProps {\n  /** The markdown source. */\n  children: string;\n  /**\n   * `note` (default) — typed copy inside a card: capped headings, single\n   * newlines honoured as line breaks, tight blocks.\n   * `article` — authored documentation: full heading scale, soft wraps, callout\n   * blockquotes, screenshot placeholders, a capped measure.\n   */\n  variant?: MarkdownVariant;\n  /**\n   * Collapse to ~6 text lines with a fade. The \"Show more\" control belongs to\n   * the caller; this only clamps. The fade appears only when the clamped\n   * content actually OVERFLOWS, measured after layout — a note that is long in\n   * characters but short on screen would otherwise get a fade under nothing.\n   *\n   * Needs `react-os-shell/ui.css` for `.rosmd-clamp` / `.rosmd-fade`.\n   */\n  clamp?: boolean;\n  /**\n   * Rewrite a relative image `src` before it is fetched. Article bodies\n   * reference screenshots by a repo-relative path that only the host knows how\n   * to serve.\n   */\n  resolveImageSrc?: (src: string) => string;\n  /** Override individual element renderers. Merged over the variant's set. */\n  components?: Partial<Components>;\n  className?: string;\n}\n\n/**\n * Render markdown as React elements.\n *\n * No HTML string is produced at any point, and no raw HTML is parsed, so there\n * is nothing here to sanitise — see the note at the top of this file before\n * reaching for DOMPurify.\n */\nfunction Markdown({\n  children,\n  variant = 'note',\n  clamp = false,\n  resolveImageSrc,\n  components,\n  className = '',\n}: MarkdownProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [overflowing, setOverflowing] = useState(false);\n\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!clamp || !el) {\n      setOverflowing(false);\n      return;\n    }\n    const check = () => setOverflowing(el.scrollHeight > el.clientHeight + 1);\n    check();\n    // A ResizeObserver rather than a one-off measure: the same note reflows\n    // when its window is resized, and a fade that was correct at mount is\n    // wrong the moment it is.\n    const ro = new ResizeObserver(check);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [clamp, children]);\n\n  const resolved = useMemo<Components>(\n    () => ({\n      ...(variant === 'article' ? articleComponents(resolveImageSrc) : noteComponents(resolveImageSrc)),\n      ...components,\n    }),\n    [variant, resolveImageSrc, components],\n  );\n\n  // `className` wins over the variant's own ink and type size.\n  //\n  // Both are ordinary utilities on the same element, so the one that wins is\n  // decided by the order Tailwind emits them, not by the order they appear in\n  // the attribute — a host asking for `text-green-900` on a green panel would\n  // be gambling. The alternative is an important utility at every call site,\n  // and the two syntaxes for that (v3's `!text-green-900`, v4's\n  // `text-green-900!`) are each silently INERT in the other version, which is\n  // a bad thing to ask a caller to get right for a colour.\n  //\n  // So: a host that names one simply gets it.\n  const named = ` ${className} `;\n  const ink = /\\stext-(?:[a-z]+-\\d{2,3}(?:\\/\\d+)?|black|white|inherit)\\s/.test(named)\n    ? ''\n    : 'text-gray-800';\n  const size = /\\stext-(?:xs|sm|base|lg|[2-9]?xl|\\[[^\\]]+\\])\\s/.test(named) ? '' : 'text-sm';\n\n  return (\n    <div\n      ref={ref}\n      className={[\n        variant === 'article' ? 'max-w-3xl break-words' : 'break-words space-y-1.5',\n        size,\n        ink,\n        clamp ? 'rosmd-clamp' : '',\n        clamp && overflowing ? 'rosmd-fade' : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <ReactMarkdown remarkPlugins={MARKDOWN_PLUGINS[variant] as never} components={resolved}>\n        {children}\n      </ReactMarkdown>\n    </div>\n  );\n}\n\nconst MemoMarkdown = memo(Markdown);\n\nexport { MemoMarkdown as Markdown };\nexport default MemoMarkdown;\n\nexport type { Components as MarkdownComponents } from 'react-markdown';\n\n/** Re-exported so a host can render a placeholder in its own layout. */\nexport type MarkdownNode = ReactNode;\n"]}

package/dist/markup/index.d.ts

@@ -0,0 +1,235 @@
+/**
+ * The editorial markup rule — ONE grammar, shared by every product that lets a
+ * human type formatted copy into a plain text box.
+ *
+ * Why this lives in react-os-shell, and why behind its own subpath:
+ * the rule is consumed by the admin portal (agent messages + the campaign
+ * designer) AND by the public storefront, which has ten dependencies in total
+ * and cannot afford the shell's peer graph (a 3D viewer, a PDF renderer, a DXF
+ * viewer, an xlsx parser, a Word converter). So this module is deliberately
+ * FRAMEWORK-FREE: no React, no JSX, no DOM, no imports at all. `react-os-shell/markup`
+ * therefore adds a few hundred bytes of first-party code to a bundle and nothing
+ * else — see the subpath's own tsup entry.
+ *
+ * It is also the ONE subpath whose `exports` entry carries a `default`
+ * condition alongside `import`, and that is deliberate rather than untidy. The
+ * root and `./apps` are React component entries; a bundler resolves them and
+ * nothing else has any business to. This module is consumed by build scripts
+ * too — the storefront's media-manifest generator reaches it through its Puck
+ * config — and those run under `tsx`, which resolves through Node's CJS
+ * loader. With only `types` and `import` declared, that resolution fails with
+ * ERR_PACKAGE_PATH_NOT_EXPORTED, which reads like a missing file rather than a
+ * missing condition. A module this portable should answer to any resolver.
+ *
+ * WHAT IS SHARED IS THE RULE, NOT THE RENDERING. Each product renders the token
+ * list its own way, because it must: the web uses CSS classes bound to theme
+ * tokens, email must inline every style (mail clients drop classes). Two
+ * renderers, one grammar, one writer ({@link applyMark}) — so a toolbar button
+ * and a parser can never disagree about what a delimiter means.
+ *
+ * ## The delimiters
+ *
+ * Standard markdown, in every product:
+ *
+ *   **phrase**   bold
+ *   _phrase_     italic
+ *   ~~phrase~~   strikethrough
+ *   ==phrase==   highlight — the brand accent colour, applied to a selection
+ *
+ * Plus a per-product LEGACY set ({@link STOREFRONT_MARKUP} /
+ * {@link CAMPAIGN_MARKUP}) that keeps already-published copy rendering exactly
+ * as it does today. Those legacy rules are the only part of this grammar that is
+ * meant to be deleted: once stored content has been converted, drop the rule
+ * from the product's rule list and nothing else changes.
+ *
+ * ## Two deliberate delimiter choices
+ *
+ * 1. ITALIC IS `_phrase_`, NOT `*phrase*`. In the storefront and the campaign
+ *    designer a single asterisk already means the ACCENT colour, on 704 live
+ *    instances. Standard markdown says italic. Both cannot be true, so the
+ *    asterisk keeps its existing meaning and italic takes markdown's OTHER
+ *    italic marker. Nothing published moves.
+ * 2. `_` NEVER FIRES INSIDE A WORD. Without that guard, a mail merge line
+ *    holding `{{first_name}}` and `{{last_name}}` would italicise everything
+ *    between the two underscores. The guard is CommonMark's own rule for `_`
+ *    (an intraword underscore is literal) and it is checked with plain character
+ *    tests rather than a lookbehind, because a lookbehind is a parse error on
+ *    Safari below 16.4 and this code ships to a public storefront.
+ *
+ * ## One KNOWN divergence from the standard named above
+ *
+ * `__phrase__` IS ITALIC HERE. CommonMark reads a doubled underscore as STRONG;
+ * this grammar has a single `_` rule, so the outer pair matches, the inner
+ * underscores are ordinary characters, and `__all__` comes back as `_all_`.
+ *
+ * Left alone deliberately, and recorded rather than fixed. A census of stored
+ * copy found 14 rows in this shape and every one of them is the literal link
+ * key `__all__`, which no renderer is handed — so nothing published is being
+ * mis-drawn today. Adding a `__` rule to buy CommonMark parity would change how
+ * a stored `_` pair parses for the benefit of no existing string, and this
+ * module's promise is that the grammar grows while nothing published moves.
+ * Bold is `**phrase**` in every product; that is the form the toolbar writes
+ * and the form to reach for. Pinned by a test, so it stays a decision rather
+ * than becoming a discovery.
+ */
+/** A style a toolbar button can apply. The first five are inline marks; the
+ *  last four are the composer-only affordances (a link and the three line
+ *  prefixes), which only a renderer that draws block content can honour. */
+type MarkStyle = 'bold' | 'italic' | 'strike' | 'code' | 'highlight' | 'link' | 'bullet' | 'number' | 'quote';
+/** What a parsed run MEANS. `accent` is the storefront/campaign brand colour —
+ *  the legacy `*phrase*` — and `highlight` is its standard-markdown successor;
+ *  both resolve to the same paint, which is what makes converting stored copy
+ *  from one to the other invisible. */
+type InlineKind = 'text' | 'bold' | 'italic' | 'strike' | 'code' | 'highlight' | 'accent';
+interface WrapResult {
+    text: string;
+    /** Where the caret should land — inside the new marks, or after them. */
+    selectionStart: number;
+    selectionEnd: number;
+}
+/**
+ * Apply a style to `text[start:end]`, returning the new text and where the
+ * selection should sit. Toggling is deliberate: pressing Bold on already-bold
+ * text unwraps it, so the shortcut behaves like every other editor.
+ *
+ * Unwrapping only ever recognises the style's OWN fence. An italic button that
+ * also unwrapped `*phrase*` would silently strip an accent run in the storefront
+ * and the campaign designer, where the asterisk means colour, not slant.
+ */
+declare function applyMark(text: string, start: number, end: number, style: MarkStyle): WrapResult;
+/** One toolbar button. `label` is a text glyph for hosts that draw type
+ *  (the message composer); hosts with an icon set map `style` to their own.
+ *  `shortcut` is the bare key the host combines with its platform modifier. */
+interface MarkupTool {
+    style: MarkStyle;
+    label: string;
+    title: string;
+    shortcut?: string;
+}
+/** Every button, in the order a writer reaches for them. */
+declare const MARKUP_TOOLS: readonly MarkupTool[];
+/** The tools a host shows, resolved to descriptors in {@link MARKUP_TOOLS}
+ *  order. Keeps a host from hand-rebuilding a descriptor (and drifting on a
+ *  tooltip) just to pick a subset. */
+declare function markupTools(styles: readonly MarkStyle[]): MarkupTool[];
+/**
+ * One delimited run. `open`/`close` are literal strings; a run's inner text may
+ * never contain the first character of `close`, which is what keeps this
+ * equivalent to the "asterisk, run of non-asterisks, asterisk" regexes the
+ * products used before — the same leftmost match, the same single close
+ * candidate, so today's stored copy parses exactly as it always has.
+ */
+interface InlineRule {
+    readonly open: string;
+    readonly close: string;
+    readonly kind: Exclude<InlineKind, 'text'>;
+    /** CommonMark's `_` rule: neither delimiter may touch a word character, so
+     *  `snake_case` and `{{first_name}}` stay literal. */
+    readonly wordBoundary?: boolean;
+    /**
+     * Characters that may not FOLLOW the close. A run whose closing delimiter
+     * butts up against one of these does not fire, and both delimiters stay
+     * literal.
+     *
+     * Two legacy rules need it, for the same reason: a delimiter that is also
+     * ordinary punctuation will otherwise claim text that was never markup. `#`
+     * must not pair across rank markers ("Ranked #1 and #2"), and `[` must not
+     * claim the label of a markdown link ("[terms](https://…)"), where the URL
+     * would be stranded outside the run and printed to the reader.
+     *
+     * A character SET rather than a flag per case, so the next collision is one
+     * more rule field and no new branch in {@link tokenizeInline}.
+     */
+    readonly notBefore?: string;
+}
+/**
+ * The standard-markdown marks, shared by every product.
+ *
+ * `**` and `*` cannot collide even though they share a prefix: a `*` followed
+ * immediately by another `*` is an EMPTY accent run, which no rule matches, so
+ * at any one position exactly one of the two can fire. Order between them is
+ * therefore not observable — which is worth stating, because the obvious
+ * assumption ("longest delimiter must be listed first") would make a future
+ * reader think this array's order is load-bearing when the empty-run rule is
+ * what actually does the work.
+ */
+declare const STANDARD_MARKUP: readonly InlineRule[];
+/**
+ * The buttons a COPY FIELD offers — a storefront section's copy box and a
+ * campaign block's copy box show exactly these, so a merchant meets one toolbar
+ * wherever they type.
+ *
+ * DERIVED, not listed. A copy field renders inline runs only — no lists, no
+ * block quote, no anchor — so the set it may advertise is precisely the tools
+ * whose output this grammar parses back. Writing that as a literal list was the
+ * bug's hiding place: the list and the grammar were two hand-maintained facts
+ * that agreed by luck, and nothing failed when a tool wrote a delimiter the
+ * parser read as something else. Now a style with no rule cannot appear here,
+ * whatever anyone types into the array.
+ *
+ * It resolves to bold, italic, strike and highlight. `code` is the one that
+ * surprises: it is an inline mark and it has a fence, but no rule reads a
+ * backtick, so a copy field would print `` `word` `` verbatim — and a button
+ * whose output the renderer draws as literal text is worse than no button.
+ *
+ * Declared here, below the rules, because it now depends on them.
+ */
+declare const COPY_FIELD_TOOLS: readonly MarkStyle[];
+/**
+ * The storefront's rule set: standard markdown plus the ONE legacy run it has
+ * published — `*phrase*` in the theme accent. Delete that last entry once
+ * stored copy has been converted to `==phrase==`; both kinds already paint the
+ * same, so the deletion is invisible.
+ */
+declare const STOREFRONT_MARKUP: readonly InlineRule[];
+/**
+ * The campaign designer's rule set: standard markdown plus its three legacy
+ * runs — `#phrase#` bold, `*phrase*` accent, `[phrase]` italic. The bold guard
+ * is the one the email parser already carried: a `#` followed by a digit does
+ * not close a run, so "Ranked #1 and #2" is literal while "Save #20%#" bolds.
+ *
+ * The italic guard exists because `[phrase]` collides with the one piece of
+ * markdown syntax every writer already knows. Without it, "Read [our
+ * terms](https://…) first" italicises the label AND prints the bare URL to the
+ * reader — the words come back wearing a mark nobody chose. It is not a
+ * toolbar problem: a merchant typing an ordinary link into a copy box hits it,
+ * which is why the guard is on the RULE and not on which buttons a field
+ * offers. `[phrase]` on its own is untouched, so every published line still
+ * reads exactly as it did.
+ */
+declare const CAMPAIGN_MARKUP: readonly InlineRule[];
+/** A parsed run. `text` is the inner text with the delimiters removed, so a
+ *  caller that only wants words ({@link stripInline}) joins the texts and a
+ *  caller that paints ({@link InlineKind}) switches on the kind. */
+interface InlineToken {
+    kind: InlineKind;
+    text: string;
+}
+/**
+ * Split authored text into its runs.
+ *
+ * The returned tokens ALTERNATE, starting and ending with a `text` token that
+ * may be empty — exactly the shape `String.split` with one capture group
+ * produced in the parsers this replaces. That contract is load-bearing, not
+ * cosmetic: the storefront wraps every segment (including the empty ones) in a
+ * `<span>`, so preserving the empty tokens is what keeps a published page's
+ * markup byte-for-byte identical.
+ *
+ * A lone delimiter with no partner stays literal — the products' copy contains
+ * real stray asterisks, and swallowing one would silently eat a word.
+ */
+declare function tokenizeInline(value: string, rules: readonly InlineRule[]): InlineToken[];
+/**
+ * The plain words of an authored string — every paired run unwrapped to its
+ * inner text, every unpaired delimiter left alone.
+ *
+ * This is the ONLY correct way to fill an `alt`, an `aria-label` or a
+ * structured-data field from authored copy. Deleting a delimiter character by
+ * hand — "replace every asterisk with nothing" — breaks the moment the grammar
+ * grows a marker, and it disagrees with the renderer about a stray asterisk,
+ * which matters: search engines expect structured data to match the text a
+ * visitor actually sees.
+ */
+declare function stripInline(value: string, rules: readonly InlineRule[]): string;
+
+export { CAMPAIGN_MARKUP, COPY_FIELD_TOOLS, type InlineKind, type InlineRule, type InlineToken, MARKUP_TOOLS, type MarkStyle, type MarkupTool, STANDARD_MARKUP, STOREFRONT_MARKUP, type WrapResult, applyMark, markupTools, stripInline, tokenizeInline };