@birdapi/velinstyle 0.8.0 → 0.9.0

package/cli/tokens-build.js

@@ -18,7 +18,9 @@ function varName(key) {
 function emitBlock(indent, obj) {
   if (!obj || typeof obj !== 'object') return [];
   const lines = [];
-  for (const [k, v] of Object.entries(obj)) {
+  const keys = Object.keys(obj).sort((a, b) => a.localeCompare(b));
+  for (const k of keys) {
+    const v = obj[k];
     if (typeof v === 'string') {
       lines.push(`${indent}${varName(k)}: ${v};`);
     }
@@ -62,6 +64,24 @@ export function buildTokensFromJson(filePath) {
     lines.push('  }');
   }
 
+  if (data.fonts && typeof data.fonts === 'object') {
+    lines.push('  :root {');
+    lines.push(...emitBlock('    ', data.fonts));
+    lines.push('  }');
+  }
+
+  if (data.motion && typeof data.motion === 'object') {
+    lines.push('  :root {');
+    lines.push(...emitBlock('    ', data.motion));
+    lines.push('  }');
+  }
+
+  if (data.zIndex && typeof data.zIndex === 'object') {
+    lines.push('  :root {');
+    lines.push(...emitBlock('    ', data.zIndex));
+    lines.push('  }');
+  }
+
   lines.push('}');
   return `${lines.join('\n')}\n`;
 }

package/cli/tokens-validate.js

@@ -0,0 +1,69 @@
+import { readFileSync, existsSync } from 'fs';
+
+const OKLCH_RE = /^oklch\(\s*[\d.]+%?\s+[\d.]+\s+[\d.]+(?:\s*\/\s*[\d.]+%?)?\s*\)$/i;
+
+export function validateTokensJson(filePath) {
+  if (!existsSync(filePath)) {
+    return { ok: false, errors: [`File not found: ${filePath}`] };
+  }
+  let data;
+  try {
+    data = JSON.parse(readFileSync(filePath, 'utf-8'));
+  } catch (e) {
+    return { ok: false, errors: [`Invalid JSON: ${e.message}`] };
+  }
+
+  const errors = [];
+  const tokens = data.tokens ?? data;
+
+  if (typeof tokens !== 'object' || tokens === null) {
+    return { ok: false, errors: ['Root must be an object'] };
+  }
+
+  const walk = (obj, path) => {
+    for (const [key, val] of Object.entries(obj)) {
+      if (key === 'themes' || key === 'displayP3' || key === 'fonts' || key === 'motion' || key === 'zIndex') continue;
+      if (typeof val === 'object' && val !== null) {
+        walk(val, `${path}.${key}`);
+        continue;
+      }
+      if (typeof val !== 'string') {
+        errors.push(`${path}.${key}: must be a string`);
+        continue;
+      }
+      if (key.includes('color') && val.startsWith('oklch') && !OKLCH_RE.test(val.trim())) {
+        errors.push(`${path}.${key}: invalid OKLCH syntax`);
+      }
+    }
+  };
+
+  walk(tokens, 'tokens');
+
+  if (data.themes && typeof data.themes === 'object') {
+    for (const name of Object.keys(data.themes)) {
+      if (!/^[a-z0-9-]+$/i.test(name)) {
+        errors.push(`themes.${name}: invalid theme name`);
+      }
+    }
+  }
+
+  if (data.fonts && typeof data.fonts === 'object') {
+    for (const [k, v] of Object.entries(data.fonts)) {
+      if (typeof v !== 'string') errors.push(`fonts.${k}: must be a string`);
+    }
+  }
+
+  if (data.motion && typeof data.motion === 'object') {
+    for (const [k, v] of Object.entries(data.motion)) {
+      if (typeof v !== 'string') errors.push(`motion.${k}: must be a string`);
+    }
+  }
+
+  if (data.zIndex && typeof data.zIndex === 'object') {
+    for (const [k, v] of Object.entries(data.zIndex)) {
+      if (typeof v !== 'string') errors.push(`zIndex.${k}: must be a string`);
+    }
+  }
+
+  return { ok: errors.length === 0, errors, data };
+}

package/components/a11y-entry.js

@@ -0,0 +1,42 @@
+/**
+ * Optional accessibility bootstrap for VelinStyle apps.
+ * @example
+ * import { initA11y } from '@birdapi/velinstyle/a11y';
+ * initA11y({ announcer: true, scrollPadding: true });
+ */
+
+import { getAnnouncer } from './a11y-utils.js';
+
+/**
+ * @param {{ announcer?: boolean, scrollPadding?: boolean, skipLink?: boolean }} [options]
+ */
+export function initA11y(options = {}) {
+  if (typeof document === 'undefined') return;
+
+  const {
+    announcer = true,
+    scrollPadding = true,
+    skipLink = false,
+  } = options;
+
+  if (announcer) getAnnouncer();
+
+  if (scrollPadding) {
+    const nav = document.querySelector('.velin-nav, .velin-doc-header, .site-nav, [data-velin-fixed-nav]');
+    if (nav) {
+      const h = nav.getBoundingClientRect().height;
+      document.documentElement.style.setProperty('--velin-nav-height', `${Math.ceil(h)}px`);
+      document.documentElement.classList.add('velin-scroll-pt-nav');
+    }
+  }
+
+  if (skipLink && !document.querySelector('.velin-skip-link') && document.getElementById('main')) {
+    const a = document.createElement('a');
+    a.href = '#main';
+    a.className = 'velin-skip-link';
+    a.textContent = 'Skip to main content';
+    document.body.prepend(a);
+  }
+}
+
+export { announce, getAnnouncer } from './a11y-utils.js';

package/components/a11y-utils.js

@@ -0,0 +1,71 @@
+/**
+ * Shared accessibility helpers for VelinStyle web components.
+ */
+
+let _announcer;
+
+export function getAnnouncer() {
+  if (typeof document === 'undefined') return null;
+  if (_announcer?.isConnected) return _announcer;
+  _announcer = document.querySelector('velin-announcer');
+  if (!_announcer) {
+    _announcer = document.createElement('velin-announcer');
+    document.body.appendChild(_announcer);
+  }
+  return _announcer;
+}
+
+/**
+ * @param {string} message
+ * @param {'polite' | 'assertive'} [priority]
+ */
+export function announce(message, priority = 'polite') {
+  const el = getAnnouncer();
+  if (!el || typeof el.announce !== 'function') return;
+  el.announce(message, { assertive: priority === 'assertive' });
+}
+
+/**
+ * @param {HTMLElement} trigger
+ * @param {HTMLElement | null} panel
+ */
+export function syncExpanded(trigger, panel) {
+  if (!trigger || !panel) return;
+  const open = trigger.getAttribute('aria-expanded') === 'true';
+  panel.hidden = !open;
+  if (panel.id) trigger.setAttribute('aria-controls', panel.id);
+}
+
+/**
+ * @param {HTMLElement} el
+ * @param {string} label
+ */
+export function ensureAriaLabel(el, label) {
+  if (!el || !label) return;
+  if (!el.getAttribute('aria-label')?.trim()) el.setAttribute('aria-label', label);
+}
+
+/**
+ * @param {() => void} fn
+ * @param {() => void} [fallback]
+ */
+export function respectReducedMotion(fn, fallback) {
+  const reduced = typeof matchMedia === 'function'
+    && matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (reduced && fallback) fallback();
+  else fn();
+}
+
+/**
+ * @param {string} [status] live|idle|error
+ */
+export function liveDotLabel(status) {
+  const map = {
+    live: 'Live',
+    idle: 'Idle',
+    error: 'Error',
+    offline: 'Offline',
+    connecting: 'Connecting',
+  };
+  return map[String(status || 'live').toLowerCase()] || status || 'Live';
+}

package/components/focus-manager.js

@@ -85,22 +85,59 @@ export function restoreFocus(element) {
   }
 }
 
-let _inertSiblings = [];
+/** @type {{ host: HTMLElement, siblings: Set<Element> }[]} */
+const _inertStack = [];
+let _overflowDepth = 0;
+let _savedOverflow = '';
+
+function activeInertElements() {
+  const out = new Set();
+  for (const layer of _inertStack) {
+    for (const el of layer.siblings) out.add(el);
+  }
+  return out;
+}
 
 export function setBackgroundInert(except) {
-  _inertSiblings = [];
+  const host = except instanceof HTMLElement ? except : null;
+  if (!host) return;
+
+  const siblings = new Set();
   for (const child of document.body.children) {
-    if (child === except || child.contains(except)) continue;
+    if (child === host || child.contains(host)) continue;
     if (!child.hasAttribute('inert')) {
       child.setAttribute('inert', '');
-      _inertSiblings.push(child);
+      siblings.add(child);
     }
   }
+
+  _inertStack.push({ host, siblings });
+
+  if (_overflowDepth === 0) {
+    _savedOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+  _overflowDepth += 1;
 }
 
-export function clearBackgroundInert() {
-  for (const el of _inertSiblings) {
-    el.removeAttribute('inert');
+export function clearBackgroundInert(except) {
+  let idx = -1;
+  if (except instanceof HTMLElement) {
+    idx = _inertStack.findLastIndex((layer) => layer.host === except);
+  } else if (_inertStack.length) {
+    idx = _inertStack.length - 1;
+  }
+  if (idx === -1) return;
+
+  const { siblings } = _inertStack.splice(idx, 1)[0];
+  const stillNeeded = activeInertElements();
+  for (const el of siblings) {
+    if (!stillNeeded.has(el)) el.removeAttribute('inert');
+  }
+
+  _overflowDepth = Math.max(0, _overflowDepth - 1);
+  if (_overflowDepth === 0) {
+    document.body.style.overflow = _savedOverflow;
+    _savedOverflow = '';
   }
-  _inertSiblings = [];
 }

package/components/index.js

@@ -12,9 +12,9 @@ export { default as VelinScrollTop } from './velin-scroll-top.js';
 export { default as VelinCarousel } from './velin-carousel.js';
 export { default as VelinCollapse } from './velin-collapse.js';
 export { default as VelinScrollspy } from './velin-scrollspy.js';
-export { default as VelinTooltipWC } from './velin-tooltip-wc.js';
+export { default as VelinTooltip, VelinTooltipWC } from './velin-tooltip.js';
 export { default as VelinLightbox } from './velin-lightbox.js';
-export { default as VelinStepperWC } from './velin-stepper-wc.js';
+export { default as VelinStepper, VelinStepperWC } from './velin-stepper.js';
 export { default as VelinDialog } from './velin-dialog.js';
 export { default as VelinCountdown } from './velin-countdown.js';
 export { default as VelinProgressRing } from './velin-progress-ring.js';
@@ -27,10 +27,28 @@ export { default as VelinRating } from './velin-rating.js';
 export { default as VelinMenubar } from './velin-menubar.js';
 export { default as VelinCommand } from './velin-command.js';
 export { default as VelinAnnouncer } from './velin-announcer.js';
+export { default as VelinEmail } from './velin-email.js';
+export { register, lazyDefine, whenDefined, bootFromDOM } from './runtime/index.js';
 export { default as VelinSparkline } from './velin-sparkline.js';
 export { default as VelinCounter } from './velin-counter.js';
 export { default as VelinLiveDot } from './velin-live-dot.js';
-export { initReveal } from './velin-reveal.js';
+export { default as VelinCodeBlock } from './velin-code-block.js';
+export { default as VelinSearch } from './velin-search.js';
+export { bindDeclarativeSearch } from './velin-search.js';
+export { initReveal, initMotion, velinMotion } from './velin-reveal.js';
+export { initA11y, announce, getAnnouncer } from './a11y-entry.js';
+export { velinSearch, createSearch, registerSearchProvider } from '../core/search/index.js';
+export { bootAttributes, registerAttribute, listRegisteredAttributes } from '../core/attributes/index.js';
+export {
+  velinSyntax,
+  highlightElement,
+  highlightAll,
+  initHighlight,
+  observeCodeBlocks,
+  registerLanguage,
+  lazyLoadLanguage,
+  renderTokens,
+} from '../core/highlight/index.js';
 export { flipReorder, filterList } from './velin-flip.js';
 export { escapeHTML, escapeHTMLAttribute, sanitizeURL, stripControlChars, createSafeHTML, getTrustedPolicy } from './sanitize.js';
 export { VelinHapticObserver, vibrate, applyHaptic, PATTERNS as HapticPatterns } from './velin-haptic.js';
@@ -41,12 +59,4 @@ import './velin-counter.js';
 import './velin-live-dot.js';
 import './velin-reveal.js';
 import './velin-flip.js';
-import { VelinHapticObserver } from './velin-haptic.js';
-if (typeof document !== 'undefined') {
-  const _hapticInit = () => { new VelinHapticObserver().start(document.body); };
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', _hapticInit);
-  } else {
-    _hapticInit();
-  }
-}
+import './velin-email.js';

package/components/runtime/component-loaders.js

@@ -0,0 +1,43 @@
+/**
+ * AUTO-GENERATED — run: node scripts/generate-component-loaders.mjs
+ */
+export const COMPONENT_LOADERS = {
+  'velin-accordion': () => import('../velin-accordion.js'),
+  'velin-announcer': () => import('../velin-announcer.js'),
+  'velin-bottom-nav': () => import('../velin-bottom-nav.js'),
+  'velin-carousel': () => import('../velin-carousel.js'),
+  'velin-code-block': () => import('../velin-code-block.js'),
+  'velin-collapse': () => import('../velin-collapse.js'),
+  'velin-combobox': () => import('../velin-combobox.js'),
+  'velin-command': () => import('../velin-command.js'),
+  'velin-copy': () => import('../velin-copy.js'),
+  'velin-countdown': () => import('../velin-countdown.js'),
+  'velin-counter': () => import('../velin-counter.js'),
+  'velin-dialog': () => import('../velin-dialog.js'),
+  'velin-drawer': () => import('../velin-drawer.js'),
+  'velin-dropdown': () => import('../velin-dropdown.js'),
+  'velin-email': () => import('../velin-email.js'),
+  'velin-icon': () => import('../velin-icon.js'),
+  'velin-lightbox': () => import('../velin-lightbox.js'),
+  'velin-live-dot': () => import('../velin-live-dot.js'),
+  'velin-menubar': () => import('../velin-menubar.js'),
+  'velin-modal': () => import('../velin-modal.js'),
+  'velin-persist': () => import('../velin-persist.js'),
+  'velin-popover': () => import('../velin-popover.js'),
+  'velin-progress-ring': () => import('../velin-progress-ring.js'),
+  'velin-rating': () => import('../velin-rating.js'),
+  'velin-scroll-top': () => import('../velin-scroll-top.js'),
+  'velin-scrollspy': () => import('../velin-scrollspy.js'),
+  'velin-search': () => import('../velin-search.js'),
+  'velin-secure-field': () => import('../velin-secure-field.js'),
+  'velin-segmented-control': () => import('../velin-segmented-control.js'),
+  'velin-sheet': () => import('../velin-sheet.js'),
+  'velin-sparkline': () => import('../velin-sparkline.js'),
+  'velin-stepper': () => import('../velin-stepper.js'),
+  'velin-stepper-wc': () => import('../velin-stepper.js'),
+  'velin-tabs': () => import('../velin-tabs.js'),
+  'velin-theme-toggle': () => import('../velin-theme-toggle.js'),
+  'velin-toast': () => import('../velin-toast.js'),
+  'velin-tooltip': () => import('../velin-tooltip.js'),
+  'velin-tooltip-wc': () => import('../velin-tooltip.js'),
+};

package/components/runtime/index.js

@@ -0,0 +1,77 @@
+/**
+ * VelinStyle runtime — register only the Web Components you need.
+ */
+import { COMPONENT_LOADERS } from './component-loaders.js';
+
+const registry = new Map();
+
+const VELIN_TAG_RE = /^velin-[a-z0-9-]+$/;
+
+export function whenDefined(tagName) {
+  if (typeof customElements === 'undefined') {
+    return Promise.reject(new Error('customElements not available'));
+  }
+  return customElements.whenDefined(tagName);
+}
+
+export async function lazyDefine(tagName) {
+  const loader = COMPONENT_LOADERS[tagName];
+  if (!loader) {
+    throw new Error(`Unknown Velin component: ${tagName}`);
+  }
+  if (registry.has(tagName)) return registry.get(tagName);
+  const p = loader().then((mod) => {
+    const Cls = mod.default;
+    if (Cls && !customElements.get(tagName)) {
+      customElements.define(tagName, Cls);
+    }
+    return Cls;
+  });
+  registry.set(tagName, p);
+  return p;
+}
+
+export async function register(tagNames) {
+  return Promise.all(tagNames.map((t) => lazyDefine(t)));
+}
+
+function collectTagsFromDOM(root) {
+  const tags = new Set();
+  root.querySelectorAll('[data-velin-component]').forEach((el) => {
+    const name = el.getAttribute('data-velin-component');
+    if (name) tags.add(name.startsWith('velin-') ? name : `velin-${name}`);
+  });
+  for (const el of root.querySelectorAll('*')) {
+    const tag = el.tagName?.toLowerCase();
+    if (tag && VELIN_TAG_RE.test(tag) && COMPONENT_LOADERS[tag]) {
+      tags.add(tag);
+    }
+  }
+  return tags;
+}
+
+/**
+ * @param {ParentNode} [root]
+ * @param {{ attributes?: boolean, highlight?: boolean, haptic?: boolean, tags?: string[] }} [options]
+ */
+export async function bootFromDOM(root = document, options = {}) {
+  const tags = options.tags?.length
+    ? new Set(options.tags)
+    : collectTagsFromDOM(root);
+  const wcPromise = register([...tags]);
+  if (options.attributes) {
+    const { bootAttributes } = await import('../../core/attributes/index.js');
+    await bootAttributes(root);
+  }
+  if (options.highlight) {
+    const { initHighlight } = await import('../../core/highlight/index.js');
+    initHighlight(root);
+  }
+  if (options.haptic) {
+    const { VelinHapticObserver } = await import('../velin-haptic.js');
+    new VelinHapticObserver().start(root instanceof Document ? root.body : root);
+  }
+  return wcPromise;
+}
+
+export { COMPONENT_LOADERS };

package/components/runtime-entry.js

@@ -0,0 +1,10 @@
+/**
+ * Tree-shakeable entry — no side-effect component registrations.
+ */
+export {
+  register,
+  lazyDefine,
+  whenDefined,
+  bootFromDOM,
+  COMPONENT_LOADERS,
+} from './runtime/index.js';

package/components/sanitize.js

@@ -1,54 +1,135 @@
-const ESCAPE_MAP = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
-const ESCAPE_RE = /[&<>"']/g;
-const CONTROL_RE = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g;
-
-const ALLOWED_URL_PROTOCOLS = new Set(['http:', 'https:', 'data:', 'mailto:', 'tel:']);
-const BLOCKED_DATA_MIME = /^data:text\/html/i;
-
-export function escapeHTML(str) {
-  if (typeof str !== 'string') return '';
-  return str.replace(ESCAPE_RE, (ch) => ESCAPE_MAP[ch]);
-}
-
-export function stripControlChars(str) {
-  if (typeof str !== 'string') return '';
-  return str.replace(CONTROL_RE, '');
-}
-
-export function escapeHTMLAttribute(str) {
-  return escapeHTML(stripControlChars(str));
-}
-
-export function sanitizeURL(url) {
-  if (typeof url !== 'string') return '';
-  const trimmed = url.trim();
-  if (/^\s*javascript:/i.test(trimmed) || /^\s*vbscript:/i.test(trimmed)) return '';
-  if (BLOCKED_DATA_MIME.test(trimmed)) return '';
-  try {
-    const parsed = new URL(trimmed, typeof location !== 'undefined' ? location.href : 'https://example.invalid/');
-    if (!ALLOWED_URL_PROTOCOLS.has(parsed.protocol)) return '';
-    if (parsed.protocol === 'data:' && BLOCKED_DATA_MIME.test(trimmed)) return '';
-    return trimmed;
-  } catch {
-    return '';
-  }
-}
-
-let _policy = null;
-
-export function getTrustedPolicy() {
-  if (_policy) return _policy;
-  if (typeof window !== 'undefined' && window.trustedTypes?.createPolicy) {
-    _policy = window.trustedTypes.createPolicy('velinstyle', {
-      createHTML: (input) => escapeHTML(input),
-    });
-  }
-  return _policy;
-}
-
-export function createSafeHTML(str) {
-  const policy = getTrustedPolicy();
-  const safe = escapeHTML(stripControlChars(str));
-  if (policy?.createHTML) return policy.createHTML(safe);
-  return safe;
-}
+const ESCAPE_MAP = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+const ESCAPE_RE = /[&<>"']/g;
+const CONTROL_RE = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g;
+
+const ALLOWED_URL_PROTOCOLS = new Set(['http:', 'https:', 'data:', 'mailto:', 'tel:']);
+const BLOCKED_DATA_MIME = /^data:(?:text\/html|image\/svg\+xml|application\/xml)/i;
+const ALLOWED_DATA_IMAGE = /^data:image\/(png|jpeg|jpg|gif|webp|avif);base64,/i;
+
+const SECURE_INPUT_TYPES = new Set(['text', 'password', 'email', 'search', 'tel', 'url', 'number']);
+
+export function escapeHTML(str) {
+  if (typeof str !== 'string') return '';
+  return str.replace(ESCAPE_RE, (ch) => ESCAPE_MAP[ch]);
+}
+
+export function stripControlChars(str) {
+  if (typeof str !== 'string') return '';
+  return str.replace(CONTROL_RE, '');
+}
+
+export function escapeHTMLAttribute(str) {
+  return escapeHTML(stripControlChars(str));
+}
+
+/**
+ * @param {string} url
+ * @param {string} [base]
+ */
+export function sanitizeURL(url, base) {
+  if (typeof url !== 'string') return '';
+  const trimmed = url.trim();
+  if (!trimmed) return '';
+  if (/^\s*javascript:/i.test(trimmed) || /^\s*vbscript:/i.test(trimmed)) return '';
+  if (BLOCKED_DATA_MIME.test(trimmed)) return '';
+  if (/^data:/i.test(trimmed) && !ALLOWED_DATA_IMAGE.test(trimmed)) return '';
+  try {
+    const parsed = new URL(trimmed, base || (typeof location !== 'undefined' ? location.href : 'https://example.invalid/'));
+    if (!ALLOWED_URL_PROTOCOLS.has(parsed.protocol)) return '';
+    if (parsed.protocol === 'data:' && !ALLOWED_DATA_IMAGE.test(parsed.href)) return '';
+    return parsed.href;
+  } catch {
+    if (trimmed.startsWith('#') || trimmed.startsWith('/')) return trimmed;
+    return '';
+  }
+}
+
+/**
+ * @param {string} url
+ * @param {string} [base]
+ */
+export function sanitizeSearchUrl(url, base) {
+  if (typeof url !== 'string') return '#';
+  const trimmed = url.trim();
+  if (!trimmed) return '#';
+  if (trimmed.startsWith('#')) return trimmed;
+  if (trimmed.startsWith('/') && !trimmed.startsWith('//')) return trimmed;
+  // Index paths like getting-started/foo.html — must stay relative (resolved at navigation).
+  if (!/^https?:\/\//i.test(trimmed)) {
+    if (/^\s*javascript:/i.test(trimmed) || /^\s*vbscript:/i.test(trimmed)) return '#';
+    return trimmed;
+  }
+  const safe = sanitizeURL(trimmed, base);
+  return safe || '#';
+}
+
+export function sanitizeInputType(type) {
+  const t = String(type || 'text').toLowerCase();
+  return SECURE_INPUT_TYPES.has(t) ? t : 'text';
+}
+
+let _purify = null;
+
+async function loadPurify() {
+  if (_purify) return _purify;
+  try {
+    const mod = await import('isomorphic-dompurify');
+    _purify = mod.default || mod;
+  } catch {
+    _purify = null;
+  }
+  return _purify;
+}
+
+const SVG_ALLOWED_TAGS = ['svg', 'g', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'ellipse', 'defs', 'use', 'symbol', 'title', 'desc', 'clipPath', 'mask', 'linearGradient', 'radialGradient', 'stop', 'pattern', 'text', 'tspan'];
+const SVG_ALLOWED_ATTR = ['viewBox', 'xmlns', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'd', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'width', 'height', 'x1', 'y1', 'x2', 'y2', 'points', 'transform', 'opacity', 'class', 'id', 'href', 'xlink:href', 'aria-hidden', 'aria-label', 'aria-labelledby', 'role', 'focusable', 'clip-path', 'mask', 'offset', 'stop-color', 'stop-opacity', 'gradientUnits', 'gradientTransform', 'spreadMethod', 'fx', 'fy', 'patternUnits', 'patternContentUnits', 'preserveAspectRatio'];
+
+/**
+ * @param {string} svgMarkup
+ */
+export async function sanitizeSVG(svgMarkup) {
+  if (typeof svgMarkup !== 'string') return '';
+  const DOMPurify = await loadPurify();
+  if (DOMPurify?.sanitize) {
+    return DOMPurify.sanitize(svgMarkup, {
+      USE_PROFILES: { svg: true, svgFilters: true },
+      ADD_TAGS: SVG_ALLOWED_TAGS,
+      ADD_ATTR: SVG_ALLOWED_ATTR,
+      FORBID_TAGS: ['script', 'foreignObject', 'iframe', 'object', 'embed'],
+      FORBID_ATTR: ['onload', 'onerror', 'onclick', 'onmouseover'],
+    });
+  }
+  return svgMarkup
+    .replace(/<script[\s\S]*?<\/script>/gi, '')
+    .replace(/\s+on\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+    .replace(/<foreignObject[\s\S]*?<\/foreignObject>/gi, '');
+}
+
+/**
+ * @param {string} html
+ */
+export async function sanitizeHTML(html) {
+  if (typeof html !== 'string') return '';
+  const DOMPurify = await loadPurify();
+  if (DOMPurify?.sanitize) return DOMPurify.sanitize(html, { USE_PROFILES: { html: true } });
+  return escapeHTML(html);
+}
+
+let _policy = null;
+
+export function getTrustedPolicy() {
+  if (_policy) return _policy;
+  if (typeof window !== 'undefined' && window.trustedTypes?.createPolicy) {
+    _policy = window.trustedTypes.createPolicy('velinstyle', {
+      createHTML: (input) => escapeHTML(input),
+    });
+  }
+  return _policy;
+}
+
+export function createSafeHTML(str) {
+  const policy = getTrustedPolicy();
+  const safe = escapeHTML(stripControlChars(str));
+  if (policy?.createHTML) return policy.createHTML(safe);
+  return safe;
+}