@bettercms-ai/ui 0.6.1 → 0.7.1

package/dist/{Video-CZkWQ3Hm.d.ts → Video-Bl_XrTrM.d.ts}

@@ -2,10 +2,25 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { HeadingProps, TextProps, PortableTextDocument, ImageProps, ButtonProps, SpacerProps, ColumnsProps, ContentBlock, VideoProps } from '@bettercms-ai/types';
 import React from 'react';
 
+/**
+ * The kinds an ELEMENT may declare, pinned to the canonical union rather than spelled again.
+ *
+ * `BindingKind` covers both lanes; `url`, `number` and `array` belong to the ATTRIBUTE lane
+ * (`data-bcms-props`), where a kind travels beside the DOM attribute it writes. An element's own
+ * `data-bcms-kind` names how its CONTENT is edited, and there are three answers.
+ *
+ * Declared as a VALUE with `satisfies`, not as `Extract<BindingKind, …>`: `Extract` of a member
+ * that no longer exists is silently the empty set, so a rename over there would narrow this type
+ * instead of failing. `satisfies readonly BindingKind[]` fails on this line, which is the point —
+ * hand-listing is how this file came to disagree with `block-bindings.ts` about how many kinds
+ * exist in the first place.
+ */
+declare const ELEMENT_BINDING_KINDS: readonly ["text", "richtext", "image"];
+type ElementBindingKind = (typeof ELEMENT_BINDING_KINDS)[number];
 /** Preview-only attributes understood by the BetterCMS visual editor. */
 type BcmsBindingProps = {
     "data-bcms-field"?: string;
-    "data-bcms-kind"?: "text" | "richtext" | "image";
+    "data-bcms-kind"?: ElementBindingKind;
 };
 
 interface HeadingBlockProps extends HeadingProps, BcmsBindingProps {

package/dist/blocks.d.ts

@@ -1,4 +1,4 @@
-export { a as Button, C as Columns, H as Heading, I as Image, S as Spacer, T as Text, V as Video } from './Video-CZkWQ3Hm.js';
+export { a as Button, C as Columns, H as Heading, I as Image, S as Spacer, T as Text, V as Video } from './Video-Bl_XrTrM.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SectionProps, ContentBlock, NavbarProps, FooterProps, SliderProps, TabsProps, ComponentProps, FormProps } from '@bettercms-ai/types';
 import React from 'react';

package/dist/blocks.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,10 +65,71 @@ 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) {
   const trimmed = raw.trim();
+  if (trimmed.startsWith("#")) return /^#[^\s<>"'`]*$/.test(trimmed) ? trimmed : null;
   if (trimmed.startsWith("/") && !trimmed.startsWith("//")) return trimmed;
   try {
     return SAFE_HREF_SCHEMES.includes(new URL(trimmed).protocol) ? trimmed : null;
@@ -233,6 +300,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 +382,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 }),
       /**