@oxvo/ai-live-assist 7.3.0

package/cjs/presentation.js

@@ -0,0 +1,483 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PresentationPlane = exports.parsePresentationIntent = void 0;
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const OPAQUE_ID = /^[A-Za-z0-9_.:-]{8,128}$/;
+const KINDS = new Set([
+    'pointer',
+    'spotlight',
+    'underline',
+    'circle',
+    'arrow',
+    'connector',
+    'sequence_marker',
+    'callout',
+    'clear',
+]);
+const INTENT_KEYS = new Set([
+    'presentationId',
+    'groupId',
+    'kind',
+    'targetId',
+    'secondaryTargetId',
+    'domRevision',
+    'message',
+    'emphasis',
+    'ttlMs',
+    'replaceGroup',
+]);
+const parsePresentationIntent = (input) => {
+    if (Object.keys(input).some((key) => !INTENT_KEYS.has(key)))
+        return null;
+    const kind = input.kind;
+    const emphasis = input.emphasis;
+    const presentationId = input.presentationId;
+    const groupId = input.groupId;
+    const targetId = input.targetId;
+    const secondaryTargetId = input.secondaryTargetId;
+    const message = input.message;
+    const domRevision = input.domRevision;
+    const ttlMs = input.ttlMs;
+    if (typeof presentationId !== 'string' ||
+        !OPAQUE_ID.test(presentationId) ||
+        !KINDS.has(kind) ||
+        (groupId !== null &&
+            (typeof groupId !== 'string' || !OPAQUE_ID.test(groupId))) ||
+        (targetId !== null &&
+            (typeof targetId !== 'string' || !OPAQUE_ID.test(targetId))) ||
+        (secondaryTargetId !== null &&
+            (typeof secondaryTargetId !== 'string' ||
+                !OPAQUE_ID.test(secondaryTargetId))) ||
+        (message !== null &&
+            (typeof message !== 'string' ||
+                message.length > 240 ||
+                /[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/u.test(message))) ||
+        !Number.isSafeInteger(domRevision) ||
+        domRevision < 0 ||
+        !Number.isSafeInteger(ttlMs) ||
+        ttlMs < 750 ||
+        ttlMs > 15000 ||
+        !['subtle', 'normal', 'strong'].includes(emphasis) ||
+        typeof input.replaceGroup !== 'boolean') {
+        return null;
+    }
+    if ((kind === 'clear' && (targetId !== null || secondaryTargetId !== null)) ||
+        (kind !== 'clear' && targetId === null) ||
+        (kind === 'connector' && secondaryTargetId === null) ||
+        (kind !== 'connector' && secondaryTargetId !== null) ||
+        (kind === 'callout' && (typeof message !== 'string' || !message.trim())) ||
+        (kind !== 'callout' && message !== null)) {
+        return null;
+    }
+    return {
+        presentationId,
+        groupId: groupId,
+        kind,
+        targetId: targetId,
+        secondaryTargetId: secondaryTargetId,
+        domRevision: domRevision,
+        message: message,
+        emphasis,
+        ttlMs: ttlMs,
+        replaceGroup: input.replaceGroup,
+    };
+};
+exports.parsePresentationIntent = parsePresentationIntent;
+const style = `
+  :host {
+    all: initial;
+    position: fixed;
+    inset: 0;
+    z-index: 2147483645;
+    pointer-events: none;
+    contain: strict;
+    --presentation-accent: #2563eb;
+  }
+  svg { width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+  .cue { opacity: 0; animation: cue-in 180ms ease-out forwards; }
+  .cue.suspended { opacity: .16; transition: opacity 120ms ease; }
+  .stroke { fill: none; stroke: var(--presentation-accent); stroke-width: 2.75; filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .16)); vector-effect: non-scaling-stroke; }
+  .spatial-trail { fill: none; stroke: color-mix(in srgb, var(--presentation-accent) 78%, white); stroke-width: 2.25; stroke-linecap: round; stroke-dasharray: 5 5; opacity: .86; filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .12)); vector-effect: non-scaling-stroke; }
+  .glass { fill: color-mix(in srgb, var(--presentation-accent) 16%, transparent); stroke: color-mix(in srgb, var(--presentation-accent) 88%, white); stroke-width: 2.25; filter: drop-shadow(0 3px 7px rgba(15, 23, 42, .14)); vector-effect: non-scaling-stroke; }
+  .pointer-core { fill: white; stroke: var(--presentation-accent); stroke-width: 2.25; filter: drop-shadow(0 5px 10px rgba(15, 23, 42, .25)); }
+  .pointer-mark { fill: var(--presentation-accent); font: 700 8px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
+  .callout-box { fill: rgba(255, 255, 255, .98); stroke: color-mix(in srgb, var(--presentation-accent) 72%, #d1d5db); stroke-width: 1.25; filter: drop-shadow(0 6px 14px rgba(15, 23, 42, .20)); }
+  .callout-text { fill: #17212b; font: 500 12px/1.35 system-ui, sans-serif; }
+  .sequence-text { fill: white; font: 700 11px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
+  @keyframes cue-in { to { opacity: 1; } }
+  @media (prefers-reduced-motion: reduce) {
+    .cue { animation: none; opacity: 1; }
+  }
+  @media (forced-colors: active) {
+    .stroke, .glass, .pointer-core { stroke: Highlight; }
+    .glass { fill: Canvas; }
+  }
+`;
+const svgElement = (name) => document.createElementNS(SVG_NAMESPACE, name);
+const setAttributes = (element, attributes) => {
+    for (const [name, value] of Object.entries(attributes)) {
+        element.setAttribute(name, String(value));
+    }
+};
+const overlapArea = (first, second) => Math.max(0, Math.min(first.right, second.right) - Math.max(first.left, second.left)) *
+    Math.max(0, Math.min(first.bottom, second.bottom) - Math.max(first.top, second.top));
+class PresentationPlane {
+    constructor(accent, maxActiveCues, reducedMotion, callbacks) {
+        this.maxActiveCues = maxActiveCues;
+        this.reducedMotion = reducedMotion;
+        this.callbacks = callbacks;
+        this.cues = new Map();
+        this.raf = null;
+        this.suspendedUntil = 0;
+        this.resumeTimer = null;
+        this.destroyed = false;
+        this.scheduleFrame = () => {
+            if (this.raf !== null || this.cues.size === 0 || document.hidden)
+                return;
+            this.raf = requestAnimationFrame(() => {
+                this.raf = null;
+                if (Date.now() < this.suspendedUntil)
+                    return;
+                for (const cue of this.cues.values())
+                    this.draw(cue);
+            });
+        };
+        this.onVisitorActivity = (event) => {
+            if (event.composedPath().some((target) => target instanceof HTMLElement &&
+                target.dataset.oxvoAiLiveAssistRoot === 'true')) {
+                return;
+            }
+            this.suspendedUntil = Date.now() + 750;
+            for (const cue of this.cues.values())
+                cue.group.classList.add('suspended');
+            if (this.resumeTimer)
+                clearTimeout(this.resumeTimer);
+            this.resumeTimer = setTimeout(() => {
+                this.resumeTimer = null;
+                for (const cue of this.cues.values())
+                    cue.group.classList.remove('suspended');
+                this.scheduleFrame();
+            }, 750);
+        };
+        this.onVisibilityChange = () => {
+            if (document.hidden) {
+                if (this.raf !== null)
+                    cancelAnimationFrame(this.raf);
+                this.raf = null;
+                return;
+            }
+            this.scheduleFrame();
+        };
+        this.host = document.createElement('div');
+        this.host.dataset.oxvoAiLiveAssistRoot = 'true';
+        this.host.setAttribute('aria-hidden', 'true');
+        const shadow = this.host.attachShadow({ mode: 'closed' });
+        const sheet = document.createElement('style');
+        sheet.textContent = style;
+        this.svg = svgElement('svg');
+        this.svg.setAttribute('aria-hidden', 'true');
+        shadow.append(sheet, this.svg);
+        this.host.style.setProperty('--presentation-accent', accent);
+        document.documentElement.append(this.host);
+        document.addEventListener('pointerdown', this.onVisitorActivity, true);
+        document.addEventListener('keydown', this.onVisitorActivity, true);
+        document.addEventListener('input', this.onVisitorActivity, true);
+        window.addEventListener('wheel', this.onVisitorActivity, { passive: true });
+        window.addEventListener('touchstart', this.onVisitorActivity, {
+            passive: true,
+            capture: true,
+        });
+        window.addEventListener('resize', this.scheduleFrame, { passive: true });
+        document.addEventListener('scroll', this.scheduleFrame, {
+            capture: true,
+            passive: true,
+        });
+        window.visualViewport?.addEventListener('resize', this.scheduleFrame, {
+            passive: true,
+        });
+        window.visualViewport?.addEventListener('scroll', this.scheduleFrame, {
+            passive: true,
+        });
+        document.addEventListener('visibilitychange', this.onVisibilityChange);
+    }
+    render(intent) {
+        if (intent.kind === 'clear') {
+            this.clear(intent.groupId ? 'group' : 'all', intent.groupId);
+            return this.result(intent, 'cleared', 'OK', null);
+        }
+        if (!OPAQUE_ID.test(intent.presentationId) ||
+            !intent.targetId ||
+            !OPAQUE_ID.test(intent.targetId) ||
+            intent.ttlMs < 750 ||
+            intent.ttlMs > 15000 ||
+            (intent.message?.length ?? 0) > 240) {
+            return this.result(intent, 'blocked', 'PRESENTATION_TARGET_BLOCKED', null);
+        }
+        if (this.callbacks.kindEnabled && !this.callbacks.kindEnabled(intent.kind)) {
+            return this.result(intent, 'unsupported', 'PRESENTATION_DISABLED', null);
+        }
+        if (Date.now() < this.suspendedUntil) {
+            return this.result(intent, 'blocked', 'VISITOR_ACTIVITY', null);
+        }
+        const target = this.callbacks.resolveTarget(intent.targetId, intent.domRevision);
+        const secondaryTarget = intent.secondaryTargetId
+            ? this.callbacks.resolveTarget(intent.secondaryTargetId, intent.domRevision)
+            : null;
+        if (!target || (intent.secondaryTargetId && !secondaryTarget)) {
+            return this.result(intent, 'stale', 'PRESENTATION_TARGET_STALE', target);
+        }
+        if (!target.safe || (secondaryTarget && !secondaryTarget.safe)) {
+            return this.result(intent, 'blocked', 'PRESENTATION_TARGET_BLOCKED', target);
+        }
+        if (intent.replaceGroup && intent.groupId)
+            this.clear('group', intent.groupId);
+        if (this.cues.has(intent.presentationId)) {
+            return this.result(intent, 'shown', 'OK', target);
+        }
+        while (this.cues.size >= Math.max(1, Math.min(5, this.maxActiveCues))) {
+            const oldest = this.cues.keys().next().value;
+            if (typeof oldest !== 'string')
+                break;
+            this.remove(oldest);
+        }
+        const group = svgElement('g');
+        group.classList.add('cue');
+        group.dataset.presentationId = intent.presentationId;
+        this.svg.append(group);
+        const timer = setTimeout(() => this.remove(intent.presentationId), intent.ttlMs);
+        const cue = { intent, group, target, secondaryTarget, timer };
+        this.cues.set(intent.presentationId, cue);
+        this.draw(cue);
+        this.emitVisibility();
+        this.scheduleFrame();
+        return this.result(intent, 'shown', this.reducedMotion ? 'REDUCED_MOTION_FALLBACK' : 'OK', target);
+    }
+    clear(reason, groupId = null) {
+        for (const [presentationId, cue] of this.cues) {
+            if (reason === 'group' && cue.intent.groupId !== groupId)
+                continue;
+            this.remove(presentationId);
+        }
+    }
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        this.clear('all');
+        if (this.raf !== null)
+            cancelAnimationFrame(this.raf);
+        if (this.resumeTimer)
+            clearTimeout(this.resumeTimer);
+        document.removeEventListener('pointerdown', this.onVisitorActivity, true);
+        document.removeEventListener('keydown', this.onVisitorActivity, true);
+        document.removeEventListener('input', this.onVisitorActivity, true);
+        window.removeEventListener('wheel', this.onVisitorActivity);
+        window.removeEventListener('touchstart', this.onVisitorActivity, true);
+        window.removeEventListener('resize', this.scheduleFrame);
+        document.removeEventListener('scroll', this.scheduleFrame, true);
+        window.visualViewport?.removeEventListener('resize', this.scheduleFrame);
+        window.visualViewport?.removeEventListener('scroll', this.scheduleFrame);
+        document.removeEventListener('visibilitychange', this.onVisibilityChange);
+        this.host.remove();
+    }
+    draw(cue) {
+        const current = this.callbacks.resolveTarget(cue.intent.targetId ?? '', cue.intent.domRevision);
+        if (!current?.safe) {
+            this.remove(cue.intent.presentationId);
+            return;
+        }
+        cue.target = current;
+        if (cue.intent.secondaryTargetId) {
+            const secondary = this.callbacks.resolveTarget(cue.intent.secondaryTargetId, cue.intent.domRevision);
+            if (!secondary?.safe) {
+                this.remove(cue.intent.presentationId);
+                return;
+            }
+            cue.secondaryTarget = secondary;
+        }
+        cue.group.replaceChildren();
+        const rect = cue.target.rect;
+        const padding = cue.intent.emphasis === 'strong' ? 10 : 7;
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        if (this.callbacks.spatialTrail &&
+            !this.reducedMotion &&
+            !['connector', 'sequence_marker'].includes(cue.intent.kind)) {
+            this.drawSpatialTrail(cue.group, centerX, centerY);
+        }
+        if (cue.intent.kind === 'pointer') {
+            const core = svgElement('circle');
+            core.classList.add('pointer-core');
+            setAttributes(core, { cx: rect.right + 9, cy: rect.top - 7, r: 11 });
+            const mark = svgElement('text');
+            mark.classList.add('pointer-mark');
+            setAttributes(mark, { x: rect.right + 9, y: rect.top - 7 });
+            mark.textContent = 'AI';
+            cue.group.append(core, mark);
+            return;
+        }
+        if (cue.intent.kind === 'spotlight' || cue.intent.kind === 'circle') {
+            const shape = svgElement('rect');
+            shape.classList.add(cue.intent.kind === 'spotlight' ? 'glass' : 'stroke');
+            setAttributes(shape, {
+                x: rect.left - padding,
+                y: rect.top - padding,
+                width: rect.width + padding * 2,
+                height: rect.height + padding * 2,
+                rx: Math.min(12, Math.max(4, rect.height / 4)),
+            });
+            cue.group.append(shape);
+            return;
+        }
+        if (cue.intent.kind === 'underline') {
+            const line = svgElement('path');
+            line.classList.add('stroke');
+            setAttributes(line, {
+                d: `M ${rect.left} ${rect.bottom + 5} Q ${centerX} ${rect.bottom + 8} ${rect.right} ${rect.bottom + 4}`,
+            });
+            cue.group.append(line);
+            return;
+        }
+        if (cue.intent.kind === 'arrow' || cue.intent.kind === 'connector') {
+            const secondary = cue.secondaryTarget?.rect;
+            const destinationX = secondary ? secondary.left + secondary.width / 2 : centerX;
+            const destinationY = secondary ? secondary.top + secondary.height / 2 : centerY;
+            const originX = secondary ? centerX : Math.max(16, rect.left - 42);
+            const originY = secondary ? centerY : Math.max(16, rect.top - 28);
+            const line = svgElement('path');
+            line.classList.add('stroke');
+            setAttributes(line, {
+                d: `M ${originX} ${originY} Q ${(originX + destinationX) / 2} ${Math.min(originY, destinationY) - 18} ${destinationX} ${destinationY}`,
+            });
+            cue.group.append(line);
+            return;
+        }
+        if (cue.intent.kind === 'sequence_marker') {
+            const marker = svgElement('circle');
+            marker.classList.add('glass');
+            marker.style.fill = 'var(--presentation-accent)';
+            setAttributes(marker, { cx: rect.left - 9, cy: centerY, r: 12 });
+            const label = svgElement('text');
+            label.classList.add('sequence-text');
+            setAttributes(label, { x: rect.left - 9, y: centerY });
+            const sequence = Array.from(this.cues.values())
+                .filter((candidate) => candidate.intent.kind === 'sequence_marker' &&
+                candidate.intent.groupId === cue.intent.groupId)
+                .findIndex((candidate) => candidate.intent.presentationId === cue.intent.presentationId);
+            label.textContent = String(Math.max(1, sequence + 1));
+            cue.group.append(marker, label);
+            return;
+        }
+        if (cue.intent.kind === 'callout') {
+            const text = (cue.intent.message ?? '').replace(/\s+/g, ' ').trim().slice(0, 120);
+            const availableWidth = Math.max(72, (window.visualViewport?.width ?? window.innerWidth) - 16);
+            const width = Math.min(260, availableWidth, Math.max(120, text.length * 6.2 + 20));
+            const placement = this.calloutPlacement(rect, width, 34);
+            const box = svgElement('rect');
+            box.classList.add('callout-box');
+            setAttributes(box, {
+                x: placement.left,
+                y: placement.top,
+                width,
+                height: 34,
+                rx: 7,
+            });
+            const label = svgElement('text');
+            label.classList.add('callout-text');
+            setAttributes(label, { x: placement.left + 10, y: placement.top + 21 });
+            const maximumCharacters = Math.max(8, Math.floor((width - 20) / 6.2));
+            label.textContent =
+                text.length > maximumCharacters
+                    ? `${text.slice(0, maximumCharacters - 3).trimEnd()}...`
+                    : text;
+            cue.group.append(box, label);
+        }
+    }
+    drawSpatialTrail(group, targetX, targetY) {
+        const launcher = this.callbacks.launcherRect?.();
+        if (!launcher || launcher.width < 1 || launcher.height < 1)
+            return;
+        const launcherX = launcher.left + launcher.width / 2;
+        const launcherY = launcher.top + launcher.height / 2;
+        const deltaX = launcherX - targetX;
+        const deltaY = launcherY - targetY;
+        const distance = Math.hypot(deltaX, deltaY);
+        if (distance < 24)
+            return;
+        const trailLength = Math.min(112, distance * 0.34);
+        const originX = targetX + (deltaX / distance) * trailLength;
+        const originY = targetY + (deltaY / distance) * trailLength;
+        const normalX = (-deltaY / distance) * Math.min(14, trailLength * 0.12);
+        const normalY = (deltaX / distance) * Math.min(14, trailLength * 0.12);
+        const trail = svgElement('path');
+        trail.classList.add('spatial-trail');
+        setAttributes(trail, {
+            d: `M ${originX} ${originY} Q ${(originX + targetX) / 2 + normalX} ${(originY + targetY) / 2 + normalY} ${targetX} ${targetY}`,
+        });
+        group.append(trail);
+    }
+    calloutPlacement(target, width, height) {
+        const visual = window.visualViewport;
+        const viewport = {
+            left: visual?.offsetLeft ?? 0,
+            top: visual?.offsetTop ?? 0,
+            right: (visual?.offsetLeft ?? 0) + (visual?.width ?? window.innerWidth),
+            bottom: (visual?.offsetTop ?? 0) + (visual?.height ?? window.innerHeight),
+        };
+        const centerX = target.left + target.width / 2;
+        const centerY = target.top + target.height / 2;
+        const rawCandidates = [
+            { left: centerX - width / 2, top: target.top - height - 12 },
+            { left: centerX - width / 2, top: target.bottom + 12 },
+            { left: target.right + 12, top: centerY - height / 2 },
+            { left: target.left - width - 12, top: centerY - height / 2 },
+        ];
+        const obstacles = [target, ...(this.callbacks.obstacleRects?.() ?? [])];
+        const candidates = rawCandidates.map((candidate, index) => {
+            const left = Math.max(viewport.left + 8, Math.min(viewport.right - width - 8, candidate.left));
+            const top = Math.max(viewport.top + 8, Math.min(viewport.bottom - height - 8, candidate.top));
+            const value = {
+                x: left,
+                y: top,
+                left,
+                top,
+                right: left + width,
+                bottom: top + height,
+                width,
+                height,
+                toJSON: () => ({}),
+            };
+            const overlap = obstacles.reduce((total, obstacle) => total + overlapArea(value, obstacle), 0);
+            return { value, score: overlap * 1000 + index };
+        });
+        return candidates.sort((first, second) => first.score - second.score)[0].value;
+    }
+    result(intent, status, reasonCode, target) {
+        return {
+            presentationId: intent.presentationId,
+            status,
+            reasonCode,
+            pageId: target?.pageId ?? this.callbacks.currentPage().pageId,
+            domRevision: intent.domRevision,
+            shownAt: status === 'shown' ? new Date().toISOString() : null,
+        };
+    }
+    remove(presentationId) {
+        const cue = this.cues.get(presentationId);
+        if (!cue)
+            return;
+        clearTimeout(cue.timer);
+        cue.group.remove();
+        this.cues.delete(presentationId);
+        if (this.cues.size === 0 && this.raf !== null) {
+            cancelAnimationFrame(this.raf);
+            this.raf = null;
+        }
+        this.emitVisibility();
+    }
+    emitVisibility() {
+        const first = this.cues.values().next().value;
+        this.callbacks.onVisibility(first?.target.pageId ?? 'page_unknown', first?.intent.domRevision ?? 0, [...this.cues.keys()]);
+    }
+}
+exports.PresentationPlane = PresentationPlane;

package/cjs/recordingPolicy.d.ts

@@ -0,0 +1,2 @@
+import type { App } from '@oxvo/browser';
+export declare const disableReplayRecording: (app: App) => void;

package/cjs/recordingPolicy.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.disableReplayRecording = void 0;
+const disabledApps = new WeakSet();
+const disableReplayRecording = (app) => {
+    if (disabledApps.has(app))
+        return;
+    disabledApps.add(app);
+    app.stop();
+    app.attachStartCallback(() => window.setTimeout(() => app.stop(), 0), true);
+};
+exports.disableReplayRecording = disableReplayRecording;

package/cjs/safeSvg.d.ts

@@ -0,0 +1 @@
+export declare const createSafeSvgIcon: (value: string | null | undefined, targetDocument?: Document) => SVGSVGElement | null;

package/cjs/safeSvg.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSafeSvgIcon = void 0;
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+const MAX_SVG_BYTES = 16384;
+const MAX_SVG_ELEMENTS = 64;
+const SAFE_TAGS = new Set([
+    "svg",
+    "g",
+    "path",
+    "circle",
+    "ellipse",
+    "line",
+    "polyline",
+    "polygon",
+    "rect",
+]);
+const SAFE_ATTRIBUTES = new Set([
+    "viewBox",
+    "d",
+    "x",
+    "y",
+    "x1",
+    "y1",
+    "x2",
+    "y2",
+    "cx",
+    "cy",
+    "r",
+    "rx",
+    "ry",
+    "width",
+    "height",
+    "points",
+    "transform",
+    "fill",
+    "stroke",
+    "stroke-width",
+    "stroke-linecap",
+    "stroke-linejoin",
+    "fill-rule",
+    "clip-rule",
+    "opacity",
+]);
+const IGNORED_ATTRIBUTES = new Set(["class", "aria-hidden", "focusable"]);
+const PATH_VALUE = /^[\s,0-9+\-.eEaAcChHlLmMqQsStTvVzZ]+$/;
+const NUMBER_LIST = /^[\s,0-9+\-.eE]+$/;
+const TRANSFORM_VALUE = /^(?:(?:matrix|translate|scale|rotate|skewX|skewY)\([\s,0-9+\-.eE]+\)\s*)+$/;
+const COLOR_VALUE = /^(?:none|currentColor|transparent|#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8}))$/i;
+const utf8ByteLength = (value) => {
+    let length = 0;
+    for (const character of value) {
+        const codePoint = character.codePointAt(0) ?? 0;
+        length +=
+            codePoint <= 0x7f
+                ? 1
+                : codePoint <= 0x7ff
+                    ? 2
+                    : codePoint <= 0xffff
+                        ? 3
+                        : 4;
+    }
+    return length;
+};
+const hasInvalidControlCharacter = (value) => Array.from(value).some((character) => {
+    const codePoint = character.codePointAt(0) ?? 0;
+    return (codePoint < 32 && codePoint !== 9 && codePoint !== 10 && codePoint !== 13);
+});
+const safeAttribute = (name, value) => {
+    if (value.length > 4096 || hasInvalidControlCharacter(value)) {
+        return false;
+    }
+    if (name === "d")
+        return value.length > 0 && PATH_VALUE.test(value);
+    if (name === "points")
+        return NUMBER_LIST.test(value);
+    if (name === "viewBox") {
+        const values = value
+            .trim()
+            .split(/[\s,]+/)
+            .map(Number);
+        return values.length === 4 && values.every(Number.isFinite);
+    }
+    if (name === "transform")
+        return TRANSFORM_VALUE.test(value.trim());
+    if (name === "fill" || name === "stroke")
+        return COLOR_VALUE.test(value);
+    if (name === "stroke-linecap")
+        return ["butt", "round", "square"].includes(value);
+    if (name === "stroke-linejoin")
+        return ["miter", "round", "bevel"].includes(value);
+    if (name === "fill-rule" || name === "clip-rule") {
+        return value === "nonzero" || value === "evenodd";
+    }
+    if (name === "opacity") {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) && parsed >= 0 && parsed <= 1;
+    }
+    return true;
+};
+const copyElement = (source, targetDocument, counter) => {
+    if (!SAFE_TAGS.has(source.localName) || counter.value >= MAX_SVG_ELEMENTS)
+        return null;
+    counter.value += 1;
+    const target = targetDocument.createElementNS(SVG_NAMESPACE, source.localName);
+    for (const attribute of Array.from(source.attributes)) {
+        if (attribute.name === "xmlns" && attribute.value === SVG_NAMESPACE) {
+            continue;
+        }
+        if (attribute.namespaceURI)
+            return null;
+        if (IGNORED_ATTRIBUTES.has(attribute.name))
+            continue;
+        if (!SAFE_ATTRIBUTES.has(attribute.name) ||
+            !safeAttribute(attribute.name, attribute.value.trim())) {
+            return null;
+        }
+        if (source.localName === "svg" &&
+            ["width", "height"].includes(attribute.name))
+            continue;
+        target.setAttribute(attribute.name, attribute.value.trim());
+    }
+    for (const child of Array.from(source.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim())
+            continue;
+        if (child.nodeType !== Node.ELEMENT_NODE)
+            return null;
+        const copied = copyElement(child, targetDocument, counter);
+        if (!copied)
+            return null;
+        target.append(copied);
+    }
+    return target;
+};
+const createSafeSvgIcon = (value, targetDocument = document) => {
+    const source = value?.trim();
+    if (!source || utf8ByteLength(source) > MAX_SVG_BYTES)
+        return null;
+    if (/<!doctype|<!entity|<\?xml-stylesheet/i.test(source))
+        return null;
+    const parsed = new DOMParser().parseFromString(source, "image/svg+xml");
+    if (parsed.querySelector("parsererror") ||
+        parsed.documentElement.localName !== "svg") {
+        return null;
+    }
+    const copied = copyElement(parsed.documentElement, targetDocument, {
+        value: 0,
+    });
+    if (!copied || copied.localName !== "svg")
+        return null;
+    if (!copied.hasAttribute("viewBox"))
+        copied.setAttribute("viewBox", "0 0 24 24");
+    copied.setAttribute("aria-hidden", "true");
+    copied.setAttribute("focusable", "false");
+    return copied;
+};
+exports.createSafeSvgIcon = createSafeSvgIcon;