@bettercms-ai/ui 0.6.1 → 0.7.0

package/dist/renderer.js

@@ -47,7 +47,13 @@ var PT_TYPES = {
    */
   table: "table",
   /** The annotation carrying a hyperlink's `href`. Spelled `link` because that is the spec's convention. */
-  link: "link"
+  link: "link",
+  /**
+   * The annotation carrying a site's OWN inline markup — `<span class>`, `<small>`, `<time
+   * datetime>`. Unprefixed, like `table`, because it describes HTML rather than a BetterCMS
+   * concept. See `styled.ts` for what it may hold and why the list is that short.
+   */
+  styled: "styled"
 };
 var BUILTIN_TABLE_KEY = "builtin:table";
 var STORABLE_BLOCK_TYPES = /* @__PURE__ */ new Set([
@@ -59,6 +65,66 @@ var STORABLE_BLOCK_TYPES = /* @__PURE__ */ new Set([
   PT_TYPES.mention
 ]);
 
+// ../richtext/src/styled.ts
+var STYLED_TAGS = ["span", "small", "sup", "sub", "kbd", "abbr", "time"];
+var TAG_SET = new Set(STYLED_TAGS);
+var isStyledTag = (tag) => typeof tag === "string" && TAG_SET.has(tag);
+var ATTR_NAMES = /* @__PURE__ */ new Set(["title", "datetime", "style", "aria-label"]);
+var DATA_ATTR = /^data-[a-z][a-z0-9-]*$/;
+var isStyledAttr = (name) => ATTR_NAMES.has(name) || DATA_ATTR.test(name) && !name.startsWith("data-bcms-");
+var STYLE_PROPS = /* @__PURE__ */ new Set([
+  "color",
+  "background-color",
+  "opacity",
+  "font",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-weight",
+  "font-variant",
+  "font-feature-settings",
+  "font-variation-settings",
+  "letter-spacing",
+  "line-height",
+  "word-spacing",
+  "white-space",
+  "word-break",
+  "text-align",
+  "text-decoration",
+  "text-decoration-color",
+  "text-decoration-line",
+  "text-decoration-style",
+  "text-transform",
+  "text-underline-offset",
+  "vertical-align"
+]);
+var STYLE_VALUE_BAN = /url\(|expression\(|@import|\\|\/\*|[<>]/i;
+function safeStyle(css) {
+  const kept = [];
+  for (const declaration of css.split(";")) {
+    const at = declaration.indexOf(":");
+    if (at < 0) continue;
+    const name = declaration.slice(0, at).trim().toLowerCase();
+    const value = declaration.slice(at + 1).trim();
+    if (!name || !value) continue;
+    if (!name.startsWith("--") && !STYLE_PROPS.has(name)) continue;
+    if (STYLE_VALUE_BAN.test(value)) continue;
+    kept.push(`${name}:${value}`);
+  }
+  return kept.length ? kept.join(";") : void 0;
+}
+function styledAttrEntries(attrs) {
+  if (!attrs || typeof attrs !== "object" || Array.isArray(attrs)) return [];
+  const out = [];
+  for (const [name, raw] of Object.entries(attrs)) {
+    if (!isStyledAttr(name) || typeof raw !== "string") continue;
+    const value = name === "style" ? safeStyle(raw) : raw;
+    if (value === void 0) continue;
+    out.push([name, value]);
+  }
+  return out;
+}
+
 // ../richtext/src/href.ts
 var SAFE_HREF_SCHEMES = ["http:", "https:", "mailto:", "tel:"];
 function safeHref(raw) {
@@ -233,6 +299,18 @@ function readStructuredContent(props) {
 // src/blocks/portableText.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var TOKEN = /^[a-z0-9-]+$/i;
+function styleObject(css) {
+  const out = {};
+  for (const declaration of css.split(";")) {
+    const at = declaration.indexOf(":");
+    if (at < 0) continue;
+    const name = declaration.slice(0, at).trim();
+    const value = declaration.slice(at + 1).trim();
+    if (!name || !value) continue;
+    out[name.startsWith("--") ? name : name.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = value;
+  }
+  return out;
+}
 function Bound({
   base,
   nodeKey,
@@ -303,6 +381,36 @@ function buildComponents() {
         const blank = v.target === "_blank";
         return /* @__PURE__ */ jsx2("a", { href, ...blank ? { target: "_blank", rel: "noopener noreferrer" } : {}, children });
       },
+      /**
+       * The site's own inline markup, rendered as itself — the React half of
+       * `portableTextToHtml`'s `styled` mark, and it has to stay the same shape: Astro and the
+       * editor canvas render through that serialiser while a Next site renders through this
+       * one, and two renderers of one value that disagree is the whole bug class.
+       *
+       * The tag is re-checked against `STYLED_TAGS` and the attribute bag re-filtered, because
+       * a markDef is DATA and arrives from imports, the Management API and AI writes. React
+       * escapes the values it writes; the allowlist is what keeps a `href` or an `onClick` out
+       * of the props entirely. An unrecognised tag renders its CHILDREN — the words are the
+       * author's, the wrapper is only the design.
+       */
+      [PT_TYPES.styled]: ({ value, children }) => {
+        const v = value ?? {};
+        const tag = typeof v.tag === "string" ? v.tag.toLowerCase() : "";
+        if (!isStyledTag(tag)) return /* @__PURE__ */ jsx2(Fragment, { children });
+        const Tag = tag;
+        const className = typeof v.className === "string" && v.className ? v.className : void 0;
+        const attrs = styledAttrEntries(v.attrs);
+        const style = attrs.find(([name]) => name === "style")?.[1];
+        return /* @__PURE__ */ jsx2(
+          Tag,
+          {
+            className,
+            ...Object.fromEntries(attrs.filter(([name]) => name !== "style")),
+            ...style ? { style: styleObject(style) } : {},
+            children
+          }
+        );
+      },
       highlight: ({ children }) => /* @__PURE__ */ jsx2("mark", { children }),
       "strike-through": ({ children }) => /* @__PURE__ */ jsx2("s", { children }),
       /**