meno-core 1.0.52 → 1.0.53

package/lib/shared/friendlyError.ts

@@ -0,0 +1,121 @@
+/**
+ * Friendly error mapping.
+ *
+ * Turns a raw JavaScript error (the kind that leaks scary text like
+ * "Cannot read properties of null (reading 'length')") into plain-language
+ * copy suitable for non-technical users, while always preserving the original
+ * message in `raw` so developers can still copy the exact text for debugging.
+ *
+ * Pure and dependency-free so it can be imported from core/server (SSR error
+ * overlay), core/client (ErrorBoundary), and @meno/studio (the editor toast).
+ */
+
+export interface FriendlyError {
+  /** Short headline, e.g. "A section couldn't load its content". */
+  title: string;
+  /** Plain-language explanation of what went wrong. */
+  friendlyMessage: string;
+  /** Optional actionable suggestion. */
+  hint?: string;
+  /** Original error message — ALWAYS preserved for debugging / copy. */
+  raw: string;
+}
+
+/** Extract the raw message string from any thrown value. */
+function rawMessageOf(input: unknown): string {
+  if (input instanceof Error) return input.message;
+  if (typeof input === 'string') return input;
+  if (input && typeof input === 'object' && 'message' in input) {
+    const m = (input as { message: unknown }).message;
+    if (typeof m === 'string') return m;
+  }
+  return String(input);
+}
+
+interface Rule {
+  test: RegExp;
+  build: (m: RegExpMatchArray, raw: string) => Omit<FriendlyError, 'raw'>;
+}
+
+// Matched in order; first hit wins. Keep the most specific patterns first.
+const RULES: Rule[] = [
+  {
+    // Modern V8: "Cannot read properties of null (reading 'length')".
+    // Legacy V8: "Cannot read property 'length' of undefined".
+    test: /Cannot read propert(?:y|ies) (?:of (?:null|undefined)(?: \(reading '([^']+)'\))?|'([^']+)' of (?:null|undefined))/i,
+    build: (m) => {
+      const prop = m[1] || m[2];
+      const target = prop ? `(\`${prop}\`)` : '';
+      return {
+        title: "A section couldn't load its content",
+        friendlyMessage:
+          `Something this section expected ${target} wasn't available — ` +
+          `often a list or field that's empty or not connected yet.`,
+        hint: 'Check the data source or list binding for this section.',
+      };
+    },
+  },
+  {
+    test: /(\S+) is not a function/i,
+    build: (m) => ({
+      title: "A piece of code didn't run as expected",
+      friendlyMessage: `The site tried to use \`${m[1]}\` as a function, but it isn't one.`,
+      hint: "Check the component's custom JavaScript.",
+    }),
+  },
+  {
+    test: /(\S+) is not defined/i,
+    build: (m) => ({
+      title: 'A piece of code referenced something missing',
+      friendlyMessage: `\`${m[1]}\` was used but never defined.`,
+      hint: 'Check for a typo or a missing import in custom code.',
+    }),
+  },
+  {
+    test: /Failed to fetch|NetworkError|network request failed/i,
+    build: () => ({
+      title: "Couldn't reach the network",
+      friendlyMessage: 'A request to load data failed.',
+      hint: 'Check your connection or the endpoint URL.',
+    }),
+  },
+  {
+    test: /Cannot find module|Failed to resolve module|Failed to load module|Error loading dynamically imported module/i,
+    build: () => ({
+      title: "A required file couldn't be loaded",
+      friendlyMessage: 'An import or module reference couldn\'t be found.',
+      hint: 'Check the import path.',
+    }),
+  },
+  {
+    test: /Unexpected token|Unexpected end of (?:JSON|input)|in JSON at position|is not valid JSON/i,
+    build: () => ({
+      title: 'Some data was malformed',
+      friendlyMessage: "Content that should be valid JSON couldn't be parsed.",
+      hint: 'Check the JSON for a syntax error.',
+    }),
+  },
+];
+
+/**
+ * Convert any error-like value into a friendly, user-presentable shape.
+ * Unknown errors fall back to a reassuring generic message; `raw` always
+ * carries the original text.
+ */
+export function toFriendlyError(input: unknown): FriendlyError {
+  const raw = rawMessageOf(input);
+
+  for (const rule of RULES) {
+    const match = raw.match(rule.test);
+    if (match) {
+      return { ...rule.build(match, raw), raw };
+    }
+  }
+
+  return {
+    title: 'This section ran into a problem',
+    friendlyMessage:
+      'Something went wrong while rendering this part of the page. The rest of the page is fine.',
+    raw,
+  };
+}

package/lib/shared/hrefRefs.test.ts

@@ -0,0 +1,130 @@
+import { describe, test, expect } from 'bun:test';
+import { rewriteHrefRefs, countHrefRefs } from './hrefRefs';
+
+describe('rewriteHrefRefs', () => {
+  test('rewrites exact match on a link node', () => {
+    const node = { type: 'link', href: '/about', children: [] };
+    expect(rewriteHrefRefs(node, '/about', '/about-us')).toBe(true);
+    expect(node.href).toBe('/about-us');
+  });
+
+  test('rewrites prefix match with trailing slash (sub-path)', () => {
+    const node = { type: 'link', href: '/blog/post-1' };
+    expect(rewriteHrefRefs(node, '/blog', '/news')).toBe(true);
+    expect(node.href).toBe('/news/post-1');
+  });
+
+  test('rewrites prefix match with query string', () => {
+    const node = { type: 'link', href: '/about?ref=footer' };
+    expect(rewriteHrefRefs(node, '/about', '/about-us')).toBe(true);
+    expect(node.href).toBe('/about-us?ref=footer');
+  });
+
+  test('rewrites prefix match with hash fragment', () => {
+    const node = { type: 'link', href: '/about#team' };
+    expect(rewriteHrefRefs(node, '/about', '/about-us')).toBe(true);
+    expect(node.href).toBe('/about-us#team');
+  });
+
+  test('does not match unrelated paths that share a prefix substring', () => {
+    // "/about-us" must NOT match when rewriting "/about" → "/contact",
+    // because there's no path-segment boundary at the match point.
+    const node = { type: 'link', href: '/about-us' };
+    expect(rewriteHrefRefs(node, '/about', '/contact')).toBe(false);
+    expect(node.href).toBe('/about-us');
+  });
+
+  test('does not touch external URLs', () => {
+    const node = { type: 'link', href: 'https://example.com/about' };
+    expect(rewriteHrefRefs(node, '/about', '/about-us')).toBe(false);
+    expect(node.href).toBe('https://example.com/about');
+  });
+
+  test('skips non-string href values (LinkMapping)', () => {
+    const node = { type: 'link', href: { source: 'cms', field: 'url' } };
+    expect(rewriteHrefRefs(node, '/about', '/about-us')).toBe(false);
+    expect(node.href).toEqual({ source: 'cms', field: 'url' });
+  });
+
+  test('walks children arrays recursively', () => {
+    const tree = {
+      type: 'node',
+      tag: 'div',
+      children: [
+        { type: 'link', href: '/about' },
+        { type: 'node', tag: 'span', children: [{ type: 'link', href: '/about/team' }] },
+      ],
+    };
+    expect(rewriteHrefRefs(tree, '/about', '/about-us')).toBe(true);
+    expect(tree.children[0].href).toBe('/about-us');
+    expect((tree.children[1].children![0] as any).href).toBe('/about-us/team');
+  });
+
+  test('walks prop trees (component nodes with object props)', () => {
+    const tree = {
+      type: 'component',
+      component: 'Hero',
+      props: {
+        cta: { href: '/about', label: 'Learn more' },
+      },
+    };
+    expect(rewriteHrefRefs(tree, '/about', '/about-us')).toBe(true);
+    expect((tree as any).props.cta.href).toBe('/about-us');
+  });
+
+  test('returns false when no oldHref provided', () => {
+    const node = { type: 'link', href: '/about' };
+    expect(rewriteHrefRefs(node, '', '/anything')).toBe(false);
+    expect(rewriteHrefRefs(node, '/about', '/about')).toBe(false);
+  });
+
+  test('rewrites every matching href and reports true if any changed', () => {
+    const tree = {
+      type: 'node',
+      children: [
+        { type: 'link', href: '/about' },
+        { type: 'link', href: '/contact' },
+        { type: 'link', href: '/about?utm=x' },
+      ],
+    };
+    expect(rewriteHrefRefs(tree, '/about', '/about-us')).toBe(true);
+    expect((tree.children[0] as any).href).toBe('/about-us');
+    expect((tree.children[1] as any).href).toBe('/contact');
+    expect((tree.children[2] as any).href).toBe('/about-us?utm=x');
+  });
+
+  test('handles null / non-object inputs gracefully', () => {
+    expect(rewriteHrefRefs(null, '/a', '/b')).toBe(false);
+    expect(rewriteHrefRefs(undefined, '/a', '/b')).toBe(false);
+    expect(rewriteHrefRefs('string', '/a', '/b')).toBe(false);
+    expect(rewriteHrefRefs(42, '/a', '/b')).toBe(false);
+  });
+});
+
+describe('countHrefRefs', () => {
+  test('counts exact + prefix matches across nested nodes', () => {
+    const tree = {
+      type: 'node',
+      children: [
+        { type: 'link', href: '/about' },
+        { type: 'link', href: '/about/team' },
+        { type: 'link', href: '/about?ref=x' },
+        { type: 'link', href: '/about-us' }, // not a match
+        { type: 'link', href: '/contact' },
+      ],
+    };
+    expect(countHrefRefs(tree, '/about')).toBe(3);
+  });
+
+  test('does not mutate the input tree', () => {
+    const tree = { type: 'link', href: '/about', children: [] };
+    const snapshot = JSON.stringify(tree);
+    countHrefRefs(tree, '/about');
+    expect(JSON.stringify(tree)).toBe(snapshot);
+  });
+
+  test('returns 0 for empty href', () => {
+    const tree = { type: 'link', href: '/about' };
+    expect(countHrefRefs(tree, '')).toBe(0);
+  });
+});

package/lib/shared/hrefRefs.ts

@@ -0,0 +1,100 @@
+/**
+ * Href reference utilities — shared helpers for walking a node tree and
+ * rewriting `href` strings that point at an internal page.
+ *
+ * Used by the slug/page-rename flow on the server (cascade rewrite across
+ * pages + components) and unit-tested in isolation. Pure — no fs.
+ *
+ * Matching rules for a single href string `value` vs. `oldHref`:
+ *   - exact match: `value === oldHref`
+ *   - prefix match: `value` starts with `oldHref + "/"`, `oldHref + "?"`,
+ *     or `oldHref + "#"` (catches deep links, query strings, fragments)
+ *
+ * Non-string href values (e.g. LinkMapping objects on a link node) are
+ * skipped — those reference scopes/CMS items, not page slugs.
+ */
+
+function rewriteHref(value: string, oldHref: string, newHref: string): string | null {
+  if (value === oldHref) return newHref;
+  if (
+    value.startsWith(oldHref + '/') ||
+    value.startsWith(oldHref + '?') ||
+    value.startsWith(oldHref + '#')
+  ) {
+    return newHref + value.substring(oldHref.length);
+  }
+  return null;
+}
+
+/**
+ * Rewrite every `href: "<oldHref>"` (or `oldHref`-prefixed) string inside
+ * `node` to point at `newHref`. Returns true if any references were
+ * rewritten. Mutates `node` in place.
+ *
+ * Walks `children` recursively (array or single object) and any object-valued
+ * field on the node (covers component-prop-trees, nested structure, etc.).
+ */
+export function rewriteHrefRefs(
+  node: unknown,
+  oldHref: string,
+  newHref: string,
+): boolean {
+  if (!node || typeof node !== 'object') return false;
+  if (!oldHref || oldHref === newHref) return false;
+
+  let changed = false;
+  const n = node as Record<string, unknown>;
+
+  if (typeof n.href === 'string') {
+    const rewritten = rewriteHref(n.href, oldHref, newHref);
+    if (rewritten !== null) {
+      n.href = rewritten;
+      changed = true;
+    }
+  }
+
+  for (const key of Object.keys(n)) {
+    if (key === 'href') continue;
+    const v = n[key];
+    if (Array.isArray(v)) {
+      for (const item of v) {
+        if (item && typeof item === 'object') {
+          if (rewriteHrefRefs(item, oldHref, newHref)) changed = true;
+        }
+      }
+    } else if (v && typeof v === 'object') {
+      if (rewriteHrefRefs(v, oldHref, newHref)) changed = true;
+    }
+  }
+
+  return changed;
+}
+
+/**
+ * Count how many href references in `node` would be rewritten by
+ * rewriteHrefRefs(node, href, …). Does not mutate.
+ */
+export function countHrefRefs(node: unknown, href: string): number {
+  if (!node || typeof node !== 'object' || !href) return 0;
+
+  let count = 0;
+  const n = node as Record<string, unknown>;
+
+  if (typeof n.href === 'string' && rewriteHref(n.href, href, '__x__') !== null) {
+    count++;
+  }
+
+  for (const key of Object.keys(n)) {
+    if (key === 'href') continue;
+    const v = n[key];
+    if (Array.isArray(v)) {
+      for (const item of v) {
+        if (item && typeof item === 'object') count += countHrefRefs(item, href);
+      }
+    } else if (v && typeof v === 'object') {
+      count += countHrefRefs(v, href);
+    }
+  }
+
+  return count;
+}

package/lib/shared/index.ts

@@ -22,6 +22,7 @@ export * from './breakpoints';
 export * from './styleUtils';
 export * from './cssProperties';
 export * from './cssGeneration';
+export * from './viewportUnits';
 export * from './colorProperties';
 export * from './cssNamedColors';
 export * from './utilityClassMapper';
@@ -77,6 +78,14 @@ export {
   validateCollectionId,
   CMS_COLLECTION_ID_REGEX,
   CMSCollectionIdSchema,
+  // Comment validators
+  CommentSchema,
+  CommentStatusSchema,
+  CommentAnchorSchema,
+  CommentAuthorSchema,
+  CommentThreadEntrySchema,
+  CommentNodeIdentitySchema,
+  validateComment,
 } from './validation';
 
 // Utils
@@ -100,6 +109,10 @@ export * from './responsiveScaling';
 // Item template utilities (for CMS List)
 export * from './itemTemplateUtils';
 
+// Template-expression support predicate (mirrors expressionEvaluator's jsep grammar).
+// The meno-astro codec uses this to tell a modelable `{{binding}}` from arbitrary JS.
+export { isSupportedTemplateExpression } from './expressionEvaluator';
+
 // Path security utilities
 export * from './pathSecurity';
 
@@ -111,6 +124,7 @@ export * from './richtext';
 
 // Error handling
 export * from './errors';
+export * from './friendlyError';
 export { logRuntimeError, logNetworkError, setErrorHandler } from './errorLogger';
 
 // Global template context
@@ -130,3 +144,41 @@ export * from './cmsQueryParser';
 
 // Prop resolution utilities
 export { resolvePropsFromDefinition, isRichTextMarker, richTextMarkerToHtml } from './propResolver';
+
+// Component reference utilities (shared by rename API on server + editor sync on client)
+export * from './componentRefs';
+
+// Href reference utilities (shared by page-rename/slug-rename API cascade)
+export * from './hrefRefs';
+
+// Slug translation utilities (URL builder + slug index)
+export {
+  buildPageUrlForLocale,
+  buildSlugIndex,
+  findPageBySlug,
+  getLocaleLinks,
+  resolveSlugToPageId,
+  translatePath,
+} from './slugTranslator';
+export type { LocaleLink, SlugMap } from './slugTranslator';
+
+// Font CSS generation (pure: @font-face rules + preload tags from a fonts array).
+// Exposed on the barrel so non-SSR renderers — notably the meno-astro dialect
+// BaseLayout — can produce identical font CSS without the server-side config cache.
+export { fontFaceCss, fontPreloadLinks, extractFamilyName } from './fontCss';
+export type { FontConfig } from './fontCss';
+
+// Library tag generation (pure: merge/filter/collect + <link>/<script>/<style> tags
+// from a libraries config). Exposed on the barrel so the meno-astro dialect
+// (loadLibraries → BaseLayout) injects external JS/CSS libraries byte-identically to
+// meno-core's SSR (htmlGenerator), without the server-side config cache.
+export {
+  mergeLibraries,
+  collectComponentLibraries,
+  filterLibrariesByContext,
+  generateLibraryTags,
+  generateScriptTag,
+  generateStylesheetTag,
+  generateInlineStyleTag,
+} from './libraryLoader';
+export type { LibraryTags } from './libraryLoader';

package/lib/shared/inlineSvgStyleRules.test.ts

@@ -0,0 +1,108 @@
+import { describe, test, expect } from 'bun:test';
+import { inlineSvgStyleRules } from './inlineSvgStyleRules';
+
+describe('inlineSvgStyleRules', () => {
+  test('no-op when no <svg>', () => {
+    const html = '<div><style>.x { color: red }</style></div>';
+    expect(inlineSvgStyleRules(html)).toBe(html);
+  });
+
+  test('no-op when no <style>', () => {
+    const html = '<svg><path d="M0 0"/></svg>';
+    expect(inlineSvgStyleRules(html)).toBe(html);
+  });
+
+  test('Illustrator pattern: <defs><style>.cls-1{fill:currentColor;}</style></defs>', () => {
+    const input = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:currentColor;}</style></defs><path class="cls-1" d="M16 2L2 30h28L16 2z"/></svg>`;
+    const out = inlineSvgStyleRules(input);
+    expect(out).toContain('style="fill:currentColor"');
+    expect(out).toContain('class="cls-1"');
+    expect(out).not.toContain('<style>');
+    expect(out).not.toContain('<defs>');
+  });
+
+  test('multiple paths sharing the class get the style each', () => {
+    const input = `<svg><defs><style>.cls-1{fill:currentColor;}</style></defs><g><path class="cls-1" d="M0 0"/><path class="cls-1" d="M1 1"/></g></svg>`;
+    const out = inlineSvgStyleRules(input);
+    const count = (out.match(/style="fill:currentColor"/g) || []).length;
+    expect(count).toBe(2);
+  });
+
+  test('multiple classes', () => {
+    const input = `<svg><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#000;}</style></defs><path class="cls-1" d="M0 0"/><path class="cls-2" d="M1 1"/></svg>`;
+    const out = inlineSvgStyleRules(input);
+    expect(out).toContain('<path class="cls-1" d="M0 0" style="fill:#fff"');
+    expect(out).toContain('<path class="cls-2" d="M1 1" style="fill:#000"');
+    expect(out).not.toContain('<style>');
+  });
+
+  test('merges with existing style="" attribute on the element', () => {
+    const input = `<svg><defs><style>.cls-1{fill:currentColor;}</style></defs><path class="cls-1" style="opacity:0.5" d="M0 0"/></svg>`;
+    const out = inlineSvgStyleRules(input);
+    expect(out).toMatch(/style="opacity:0\.5;\s*fill:currentColor"/);
+  });
+
+  test('class with extra siblings in the class list still matches', () => {
+    const input = `<svg><defs><style>.cls-1{fill:red;}</style></defs><path class="other cls-1 more" d="M0 0"/></svg>`;
+    const out = inlineSvgStyleRules(input);
+    expect(out).toContain('style="fill:red"');
+    expect(out).toContain('class="other cls-1 more"');
+  });
+
+  test('multi-declaration rules', () => {
+    const input = `<svg><defs><style>.cls-1{fill:red;stroke:blue;stroke-width:2;}</style></defs><path class="cls-1" d="M0 0"/></svg>`;
+    const out = inlineSvgStyleRules(input);
+    expect(out).toContain('style="fill:red;stroke:blue;stroke-width:2"');
+  });
+
+  test('leaves unknown CSS untouched (media query)', () => {
+    const input = `<svg><defs><style>.cls-1{fill:red;}@media (prefers-color-scheme:dark){.cls-1{fill:blue;}}</style></defs><path class="cls-1" d="M0 0"/></svg>`;
+    const out = inlineSvgStyleRules(input);
+    // We bail rather than partially apply.
+    expect(out).toContain('<style>');
+    expect(out).toContain('@media');
+    expect(out).not.toContain('style="fill:red"');
+  });
+
+  test('leaves complex selectors untouched (descendant)', () => {
+    const input = `<svg><defs><style>g .cls-1{fill:red;}</style></defs><g><path class="cls-1" d="M0 0"/></g></svg>`;
+    const out = inlineSvgStyleRules(input);
+    expect(out).toContain('<style>');
+    expect(out).not.toContain('style="fill:red"');
+  });
+
+  test('CSS comments inside <style> are ignored', () => {
+    const input = `<svg><defs><style>/* generated by Illustrator */.cls-1{fill:currentColor;}</style></defs><path class="cls-1" d="M0 0"/></svg>`;
+    const out = inlineSvgStyleRules(input);
+    expect(out).toContain('style="fill:currentColor"');
+    expect(out).not.toContain('<style>');
+  });
+
+  test('multiple SVGs in the same string are processed independently', () => {
+    const a = `<svg><defs><style>.a{fill:red;}</style></defs><path class="a" d="M0 0"/></svg>`;
+    const b = `<svg><defs><style>.b{fill:blue;}</style></defs><path class="b" d="M1 1"/></svg>`;
+    const out = inlineSvgStyleRules(a + b);
+    expect(out).toContain('<path class="a" d="M0 0" style="fill:red"');
+    expect(out).toContain('<path class="b" d="M1 1" style="fill:blue"');
+  });
+
+  test('preserves outer wrappers/groups', () => {
+    const input = `<svg id="Layer_2"><defs><style>.cls-1{fill:currentColor;}</style></defs><g id="Layer_1-2"><g><path class="cls-1" d="M0 0"/></g></g></svg>`;
+    const out = inlineSvgStyleRules(input);
+    expect(out).toContain('<svg id="Layer_2">');
+    expect(out).toContain('<g id="Layer_1-2">');
+    expect(out).toContain('style="fill:currentColor"');
+  });
+
+  test('self-closing path syntax is supported', () => {
+    const input = `<svg><defs><style>.cls-1{fill:red;}</style></defs><path class="cls-1" d="M0 0"/></svg>`;
+    const out = inlineSvgStyleRules(input);
+    expect(out).toContain('style="fill:red"/>');
+  });
+
+  test('open-close path syntax is supported', () => {
+    const input = `<svg><defs><style>.cls-1{fill:red;}</style></defs><path class="cls-1" d="M0 0"></path></svg>`;
+    const out = inlineSvgStyleRules(input);
+    expect(out).toContain('style="fill:red"></path>');
+  });
+});

package/lib/shared/inlineSvgStyleRules.ts

@@ -0,0 +1,134 @@
+/**
+ * Inline simple SVG `<style>` rules as `style=""` attributes on matching
+ * elements. Works around a Chromium quirk where SVG `<style>` elements
+ * (re-)inserted via `innerHTML` (e.g. by the editor preview's HMR
+ * `smartUpdate` fallback at `ssr/htmlGenerator.ts:574`) parse cleanly but
+ * never register with the CSSOM, leaving class-scoped rules dead. Inline
+ * `style=""` is an attribute and renders regardless of CSSOM state.
+ *
+ * Only handles the Adobe Illustrator / Figma export pattern: a single class
+ * selector with simple `prop: val;` declarations. Anything more exotic
+ * (pseudo-classes, media queries, complex selectors, `@`-rules) is left in
+ * place untouched.
+ */
+
+// `.cls-1 { fill: currentColor; color: red }` — single class selector, body
+// of plain declarations.
+const RULE_RE = /\.([A-Za-z_][\w-]*)\s*\{\s*([^{}]*?)\s*\}/g;
+const COMMENT_RE = /\/\*[\s\S]*?\*\//g;
+
+function stripCssComments(css: string): string {
+  return css.replace(COMMENT_RE, '');
+}
+
+// True when `body` is the only content of the <style> after we strip out
+// the rules we matched. If anything else is left (an @media, a tag selector,
+// a compound selector), we bail and leave the <style> in place.
+function onlySimpleRules(cssAfterStrip: string): boolean {
+  return cssAfterStrip.replace(/\s+/g, '') === '';
+}
+
+function mergeIntoStyleAttr(existing: string, additions: string): string {
+  const cleanExisting = existing.trim().replace(/;$/, '');
+  const cleanAdditions = additions.trim().replace(/;$/, '');
+  if (!cleanExisting) return cleanAdditions;
+  if (!cleanAdditions) return cleanExisting;
+  return `${cleanExisting}; ${cleanAdditions}`;
+}
+
+function escapeForRegex(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Process one `<svg>...</svg>` block: find any `<style>` children, inline
+ * their simple class rules onto elements within the same SVG, and remove the
+ * `<style>` block (and the surrounding empty `<defs>` if that's all it held).
+ * Returns the rewritten block, or the original on bail.
+ */
+function rewriteSvgBlock(svgBlock: string): string {
+  const styleBlockRe = /<style\b[^>]*>([\s\S]*?)<\/style>/gi;
+
+  // Per-class merged declarations, in case multiple rules target the same class.
+  const classDeclarations = new Map<string, string>();
+  const styleBlocksHandled: string[] = [];
+
+  let m: RegExpExecArray | null;
+  while ((m = styleBlockRe.exec(svgBlock)) !== null) {
+    const fullStyleTag = m[0];
+    const rawContent = m[1];
+    // Strip CDATA wrapper if present (DOMPurify already unwraps it, but the
+    // pre-sanitize call path may see one).
+    const content = stripCssComments(
+      rawContent.replace(/^\s*<!\[CDATA\[/, '').replace(/\]\]>\s*$/, '')
+    );
+
+    // Pull out every simple `.cls { ... }` rule we can match.
+    const localClasses = new Map<string, string>();
+    let remaining = content;
+    let ruleMatch: RegExpExecArray | null;
+    const ruleRe = new RegExp(RULE_RE.source, 'g');
+    while ((ruleMatch = ruleRe.exec(content)) !== null) {
+      const className = ruleMatch[1];
+      const body = ruleMatch[2].trim().replace(/;\s*$/, '');
+      // Skip rules whose body contains a `{` — that means we mis-bracketed.
+      if (body.includes('{')) continue;
+      const prev = localClasses.get(className);
+      localClasses.set(className, prev ? mergeIntoStyleAttr(prev, body) : body);
+      remaining = remaining.replace(ruleMatch[0], '');
+    }
+
+    // If anything non-trivial is left in the <style> body, leave the block
+    // alone — we don't want to silently drop @media, tag selectors, etc.
+    if (!onlySimpleRules(remaining)) continue;
+    if (localClasses.size === 0) continue;
+
+    for (const [cls, decls] of localClasses) {
+      const prev = classDeclarations.get(cls);
+      classDeclarations.set(cls, prev ? mergeIntoStyleAttr(prev, decls) : decls);
+    }
+    styleBlocksHandled.push(fullStyleTag);
+  }
+
+  if (classDeclarations.size === 0) return svgBlock;
+
+  let out = svgBlock;
+
+  // Inline each class's declarations onto every matching element inside this
+  // SVG. Match opening tags (self-closing or not) that contain `class="…cls…"`.
+  for (const [className, decls] of classDeclarations) {
+    const elementRe = new RegExp(
+      `(<[A-Za-z][\\w-]*\\b[^>]*?\\sclass="[^"]*\\b${escapeForRegex(className)}\\b[^"]*"[^>]*?)(/?>)`,
+      'g'
+    );
+    out = out.replace(elementRe, (_full, openHead: string, closing: string) => {
+      const styleAttrMatch = openHead.match(/\sstyle="([^"]*)"/);
+      if (styleAttrMatch) {
+        const merged = mergeIntoStyleAttr(styleAttrMatch[1], decls);
+        return openHead.replace(/\sstyle="[^"]*"/, ` style="${merged}"`) + closing;
+      }
+      return `${openHead} style="${decls}"${closing}`;
+    });
+  }
+
+  // Drop the <style> blocks we consumed.
+  for (const block of styleBlocksHandled) {
+    out = out.replace(block, '');
+  }
+  // Tidy: collapse <defs> that we just emptied.
+  out = out.replace(/<defs>\s*<\/defs>/g, '');
+
+  return out;
+}
+
+/**
+ * Pre-process embed HTML so SVG `<style>` rules survive an `innerHTML`
+ * reparse in the editor preview iframe. Safe to call on any string — does
+ * nothing if no `<svg>` or no `<style>` is present.
+ */
+export function inlineSvgStyleRules(html: string): string {
+  if (!html) return html;
+  if (html.indexOf('<svg') === -1 || html.indexOf('<style') === -1) return html;
+
+  return html.replace(/<svg\b[^>]*>[\s\S]*?<\/svg>/gi, (svgBlock) => rewriteSvgBlock(svgBlock));
+}