@ethisyscore/plugin-ui 1.110.0 → 1.112.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethisyscore/plugin-ui",
-  "version": "1.110.0",
+  "version": "1.112.0",
   "description": "Plugin-UI umbrella SDK: client bridge + a11y/l10n primitives + brokered-MCP client (WI 4858).",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -27,6 +27,10 @@
       "import": "./dist/token/index.js",
       "require": "./dist/token/index.cjs"
     },
+    "./markdown": {
+      "types": "./dist/markdown/index.d.ts",
+      "import": "./dist/markdown/index.js"
+    },
     "./platform-react": {
       "types": "./dist/platform-react/index.d.ts",
       "import": "./dist/platform-react/index.js",
@@ -38,6 +42,7 @@
       "require": "./dist/tailwind-preset/index.cjs"
     },
     "./plugin-base.css": "./styles/plugin-base.css",
+    "./markdown.css": "./styles/markdown.css",
     "./icons": {
       "types": "./dist/icons/index.d.ts",
       "import": "./dist/icons/index.js",
@@ -99,7 +104,13 @@
   "dependencies": {
     "@ethisyscore/components-react": "^1.69.1",
     "@ethisyscore/core-utils": "^1.69.1",
-    "@ethisyscore/extension-runtime": "^1.69.1"
+    "@ethisyscore/extension-runtime": "^1.69.1",
+    "hast-util-sanitize": "^5.0.2",
+    "react-markdown": "^10.1.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "unified": "^11.0.5"
   },
   "peerDependencies": {
     "@mui/material": ">=5",

package/styles/markdown.css

@@ -0,0 +1,284 @@
+/*
+ * @ethisyscore/plugin-ui — typography for markdown rendered by `MarkdownView`.
+ *
+ * USAGE — THERE ARE TWO SANCTIONED IMPORT FORMS, ONE PER CONTEXT.
+ *
+ * In the HOST app, which owns the document, import it bare:
+ *
+ *     @import "@ethisyscore/plugin-ui/markdown.css";
+ *
+ * In a PLUGIN, import it into the auto-scoped layer, next to the base stylesheet:
+ *
+ *     @import "@ethisyscore/plugin-ui/plugin-base.css";
+ *     @import "@ethisyscore/plugin-ui/markdown.css" layer(utilities);
+ *
+ * WHY THE PLUGIN FORM DIFFERS, AND WHY A BARE IMPORT THERE FAILS THE BUILD. Every
+ * selector in this file targets a caller-applied class (`.ethisys-md`), not a plugin
+ * root — it has to, because the host app uses the same file and has no
+ * `.ehx-plugin-root`. A plugin's compiled CSS is injected into the HOST <head>, so
+ * the SDK's `ethisys-scope-plugin-css` guard rejects any selector that is not scoped
+ * to a plugin root, and a bare import here fails the build with 31 leaking selectors.
+ * `layer(utilities)` is the SDK's documented adoption path for a stylesheet a plugin
+ * wants to keep (see `vendor-css.mjs` in any plugin UI): the scoping pass prefixes
+ * every selector in that layer with
+ * `:where(.ehx-plugin-root, [data-ehx-plugin-portal])` at ZERO added specificity, so
+ * the rules ship scoped inside PLUGIN_CSS and the cascade inside the plugin surface
+ * is unchanged. Place the import BEFORE the Tailwind utilities import so a utility
+ * that ties on specificity still wins on source order.
+ *
+ * A vite-plugin test (`markdown-css-scope.test.ts`) asserts this very file passes the
+ * guard when adopted that way, so the two forms above cannot silently stop working.
+ *
+ * EITHER WAY, put the class on YOUR OWN wrapper — `MarkdownView` emits no element:
+ *
+ *     <Box className="ethisys-md">      <MarkdownView>{body}</MarkdownView></Box>
+ *     <Box className="ethisys-md ethisys-md--dense"> …chat bubble… </Box>
+ *
+ * WHY THIS SHIPS FROM THE SDK rather than from the host's global stylesheet, where
+ * its ancestor (`style/plugins/ds-markdown.css`) lived: a plugin whose bubble rhythm
+ * comes from host CSS cannot be deployed before the host that defines it, which makes
+ * every markdown change a cross-repo release dance. Shipping the styles alongside the
+ * component makes each plugin self-contained and the two deploys order-independent.
+ *
+ * Plain CSS, no `@apply` — matching `plugin-base.css`, so the file is valid wherever
+ * it is imported and does not depend on the consumer's Tailwind config being loaded.
+ * The literal sizes below are gogo's type scale (base 0.875rem/14px, NOT stock
+ * Tailwind's 1rem), carried over from the utilities the previous stylesheet used.
+ * Colour comes from the host design tokens by inheritance, as `plugin-base.css` does.
+ */
+
+/* --------------------------------------------------------------- */
+/* Document rhythm                                                  */
+/* --------------------------------------------------------------- */
+
+.ethisys-md {
+  font-family: var(--font-body), ui-sans-serif;
+  font-weight: 400;
+}
+
+.ethisys-md h1,
+.ethisys-md h2,
+.ethisys-md h3,
+.ethisys-md h4,
+.ethisys-md h5,
+.ethisys-md h6 {
+  font-family: var(--font-heading), ui-sans-serif;
+  font-weight: 700;
+}
+
+.ethisys-md h1 {
+  margin-top: 1.625rem;
+  margin-bottom: 0.875rem;
+  font-size: 1.625rem;
+}
+
+.ethisys-md h2 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  font-size: 1.5rem;
+}
+
+.ethisys-md h3 {
+  margin-top: 1.375rem;
+  margin-bottom: 0.625rem;
+  font-size: 1.375rem;
+}
+
+.ethisys-md h4 {
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+  font-size: 1.25rem;
+}
+
+.ethisys-md h5 {
+  margin-top: 1rem;
+  margin-bottom: 0.375rem;
+  font-size: 1.125rem;
+}
+
+.ethisys-md h6 {
+  margin-top: 0.875rem;
+  margin-bottom: 0.25rem;
+  font-size: 1rem;
+}
+
+.ethisys-md p {
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+.ethisys-md ul,
+.ethisys-md ol {
+  margin-bottom: 0.5rem;
+  list-style-position: inside;
+}
+
+.ethisys-md ul {
+  list-style-type: disc;
+}
+
+.ethisys-md ol {
+  list-style-type: decimal;
+}
+
+.ethisys-md li {
+  line-height: 1.5rem;
+}
+
+.ethisys-md pre {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  overflow-x: auto;
+  border-radius: var(--border-radius-sm);
+  padding: 0.5rem;
+  background-color: hsl(var(--grey-50));
+}
+
+.ethisys-md code {
+  border-radius: var(--border-radius-sm);
+  padding-inline: 0.25rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.8125rem;
+  background-color: hsl(var(--grey-50));
+}
+
+.ethisys-md pre code {
+  padding: 0;
+  background-color: transparent;
+}
+
+/* The placeholder left where an untrusted remote image was blocked. */
+.ethisys-md-blocked-image {
+  color: hsl(var(--text-secondary));
+  font-style: italic;
+}
+
+/* --------------------------------------------------------------- */
+/* Chat-bubble rhythm                                               */
+/* --------------------------------------------------------------- */
+/*
+ * Applied ALONGSIDE `.ethisys-md` on a message bubble's content wrapper. It tightens
+ * the paragraph and list margins for a dense layout, and carries VERBATIM the two
+ * width guards the previous stylesheet documented at length. Both are load-bearing on
+ * narrow surfaces (the chat dock popup is ~360px wide, and a bubble inside it is
+ * capped at 85% of that):
+ *
+ *  1. `min-width: 0` on the wrapper. Without it the wrapper's intrinsic min-width is
+ *     `auto` — equal to its widest atomic child. When the message is a short word with
+ *     no break opportunities (e.g. "asde") the wrapper refuses to shrink below the
+ *     paragraph's measured text width. In a flex parent that nominally allows shrink
+ *     the wrapper still wins and pushes the rightmost glyph past the bubble's rounded
+ *     corner — the "asde clips the right edge" bug, while "asd" sits inside the safe
+ *     zone by a pixel or two.
+ *
+ *  2. `overflow-wrap: anywhere` on paragraphs, code and links. Continuous strings
+ *     (URLs, code identifiers, joined-no-space text) break inside themselves when the
+ *     bubble cannot widen further, rather than punching through the right edge. The
+ *     gentler `anywhere` is preferred over `word-break: break-word`, which would split
+ *     short words even when the bubble has room.
+ *
+ * The `max-width: 100%` lines keep the bubble the owner of the width.
+ *
+ * DROPPED from the previous stylesheet, no longer needed: every `--dsr-*` / `--ds-*`
+ * variable, the `.ds-markdown-answer` wrapper overrides, and the
+ * `background-color: transparent` reset — all of which existed only to undo
+ * ds-markdown's opaque white root. `MarkdownView` emits no wrapper and no background.
+ */
+
+.ethisys-md--dense {
+  min-width: 0;
+  max-width: 100%;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.ethisys-md--dense p {
+  margin-bottom: 0;
+  max-width: 100%;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  overflow-wrap: anywhere;
+}
+
+.ethisys-md--dense p + p {
+  margin-top: 0.25rem;
+}
+
+.ethisys-md--dense ul,
+.ethisys-md--dense ol {
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+  margin-left: 0.5rem;
+  padding-left: 1.25rem;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+
+.ethisys-md--dense code {
+  overflow-wrap: anywhere;
+}
+
+.ethisys-md--dense pre {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.ethisys-md--dense a {
+  color: hsl(var(--primary));
+  text-decoration-line: underline;
+  overflow-wrap: anywhere;
+}
+
+/*
+ * Blockquotes and tables.
+ *
+ * These were missing from the first cut and browser smoke-testing caught it: a `>`
+ * quote rendered identically to a paragraph (no rule, no indent, body-coloured text,
+ * no `::before`), and GFM table cells had zero borders and zero padding, so a table
+ * read as unspaced columns. Markdown that produces no visible change is markdown the
+ * author has no reason to trust, so both are styled here rather than per-plugin.
+ */
+
+.ethisys-md blockquote {
+  margin: 0.5rem 0;
+  border-left: 3px solid hsl(var(--grey-100));
+  padding-left: 0.75rem;
+  /* --text-secondary, not a --grey-* step: the grey scale is surface tones
+     (--grey-400 is 79% lightness in light mode) and would be unreadable as text. */
+  color: hsl(var(--text-secondary));
+}
+
+/*
+ * `display: block` rather than a wrapper element: the table can then scroll on its own
+ * when it is wider than the surface, which keeps this a stylesheet-only fix and leaves
+ * MarkdownView's component map untouched. The trade-off is that the table stops
+ * stretching to fill its container — acceptable, and better than a chat or ticket
+ * layout being forced wide by one table.
+ */
+.ethisys-md table {
+  display: block;
+  overflow-x: auto;
+  max-width: 100%;
+  margin: 0.5rem 0;
+  border-collapse: collapse;
+}
+
+.ethisys-md th,
+.ethisys-md td {
+  border: 1px solid hsl(var(--grey-100));
+  padding: 0.25rem 0.5rem;
+  text-align: left;
+}
+
+.ethisys-md th {
+  font-weight: 600;
+  background-color: hsl(var(--grey-50));
+}
+
+.ethisys-md hr {
+  margin: 1rem 0;
+  border: 0;
+  border-top: 1px solid hsl(var(--grey-100));
+}

package/styles/plugin-base.css

@@ -61,6 +61,27 @@
   border-radius: var(--border-radius-3xl);
 }
 
+/* Form-field spacing standard — the plugin-side counterpart of the host's
+   `.form-fields` class. The FormStack (<form>) and FieldStack (<div>) primitives
+   from `@ethisyscore/plugin-ui/components/ui` wear this class to lay their fields
+   out in a 24px flex column, so a form gets the standard without having to be a
+   MUI Stack in a particular DOM position. Flex column (not block) so adjacent
+   field margins can't collapse; the child rule zeroes any control's own bottom
+   margin for parity with the host. Root-scoped so it never touches the host's
+   own `.form-fields`, and in `@layer components` so a plugin's Tailwind gap/mb
+   utilities still win. */
+@layer components {
+  .ehx-plugin-root .form-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .ehx-plugin-root .form-fields > .MuiFormControl-root {
+    margin-bottom: 0;
+  }
+}
+
 /* Portal container rendered by `PluginPortalScope` at the end of every plugin
    surface. MUI's portalling components (Modal/Popper and everything built on
    them) default to it, which keeps dialogs, menus, poppers and tooltips inside