@script-it/json-views-react 0.1.0-beta.1

package/dist/browser-device.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+export type JsonViewsDevice = 'mobile' | 'desktop';
+type BrowserIdentity = {
+    userAgent: string;
+    userAgentData?: {
+        mobile: boolean;
+    };
+};
+/**
+ * Use browser identity rather than width or touch support so resizing an embed
+ * doesn't switch interaction models. iPad desktop mode intentionally stays desktop;
+ * hosts that need a different policy can override it with JsonViewsDeviceProvider.
+ */
+export declare function detectBrowserDevice(browser?: BrowserIdentity): JsonViewsDevice;
+/** Optional host override, useful for previews; all viewer surfaces and portals share it. */
+export declare function JsonViewsDeviceProvider({ device, children }: {
+    device?: JsonViewsDevice;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useJsonViewsDevice(): JsonViewsDevice;
+export {};

package/dist/browser-device.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+/**
+ * Use browser identity rather than width or touch support so resizing an embed
+ * doesn't switch interaction models. iPad desktop mode intentionally stays desktop;
+ * hosts that need a different policy can override it with JsonViewsDeviceProvider.
+ */
+export function detectBrowserDevice(browser) {
+    if (!browser)
+        return 'desktop';
+    const mobile = browser.userAgentData?.mobile
+        ?? /Android|iPhone|iPad|iPod|Mobile/i.test(browser.userAgent);
+    return mobile ? 'mobile' : 'desktop';
+}
+const DeviceContext = createContext(undefined);
+/** Optional host override, useful for previews; all viewer surfaces and portals share it. */
+export function JsonViewsDeviceProvider({ device, children }) {
+    return _jsx(DeviceContext.Provider, { value: device, children: children });
+}
+export function useJsonViewsDevice() {
+    return useContext(DeviceContext) ?? detectBrowserDevice(typeof navigator === 'undefined' ? undefined : navigator);
+}

package/dist/file-content-edit-state.d.ts

@@ -0,0 +1,10 @@
+import type { JsonDocumentSave } from '@script-it/json-views-core';
+/** Capabilities and controlled state supplied by an editable file host. */
+export interface FileContentEditState {
+    isEditing: boolean;
+    editContent: string;
+    onEditChange: (content: string) => void;
+    isSaving?: boolean;
+    /** Persists a renderer-generated version of the complete file. */
+    onCommitContent?: JsonDocumentSave;
+}

package/dist/file-content-edit-state.js

@@ -0,0 +1 @@
+export {};

package/dist/file-content-view.d.ts

@@ -0,0 +1,8 @@
+import { type FileContentData } from './lib/file-data.js';
+import type { FileContentEditState } from './file-content-edit-state.js';
+export declare function FileContentView({ data, edit, fillHeight, path, }: {
+    data: FileContentData;
+    edit?: FileContentEditState;
+    fillHeight?: boolean;
+    path: string;
+}): import("react").JSX.Element;

package/dist/file-content-view.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CSVContent, JSONContent } from './json/json-content.js';
+import { fileDataToText } from './lib/file-data.js';
+export function FileContentView({ data, edit, fillHeight, path, }) {
+    const props = { content: fileDataToText(data), edit, fillHeight, path };
+    return /\.csv$/i.test(path) || data.mimeType === 'text/csv' ? _jsx(CSVContent, { ...props }) : _jsx(JSONContent, { ...props });
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { CSVContent, JSONContent, StructuredDataContent, type CSVContentProps, type JSONContentProps, type JsonViewClearBehavior, type MetadataPersistence, type MetadataPersistenceRequest, type ObjectRootConversionRequest, type StructuredDataContentProps, } from './json/json-content.js';
+export { JsonViewer, type JsonViewJsonEditing } from './json/json-view.js';
+export { JsonViewsProvider, JsonViewWidgetRegistry, createDefaultWidgetRegistry, useJsonViewsRegistries, type JsonViewEditWidget, type JsonViewEditWidgetProps, type JsonViewDisplayWidget, type JsonViewDisplayWidgetProps, type JsonViewWidgetDefinition, type JsonViewWidgetRegistration, type JsonViewsRegistryValue, } from './widget-registry.js';
+export { DateValueDisplay, DateValueEditor } from './widgets/date-picker-widget.js';
+export { InlineFeedbackAction } from './primitives/inline-feedback-action.js';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from './primitives/dropdown-menu.js';
+export type { FileContentEditState } from './file-content-edit-state.js';
+export type { JsonViewSchemaExternalWidgetProps, JsonViewSchemaExternalWidgetRenderer, } from './json/schema-value.js';
+export { JsonViewsSurface, type JsonViewsTheme } from './surface.js';
+export type { JsonViewsGeneralPresentationState, JsonViewsNavigationPresentationState, JsonViewsPresentationState, JsonViewsTablePresentationState, } from './viewer-state.js';
+export { JsonViewsDeviceProvider, useJsonViewsDevice, type JsonViewsDevice } from './browser-device.js';

package/dist/index.js

@@ -0,0 +1,8 @@
+export { CSVContent, JSONContent, StructuredDataContent, } from './json/json-content.js';
+export { JsonViewer } from './json/json-view.js';
+export { JsonViewsProvider, JsonViewWidgetRegistry, createDefaultWidgetRegistry, useJsonViewsRegistries, } from './widget-registry.js';
+export { DateValueDisplay, DateValueEditor } from './widgets/date-picker-widget.js';
+export { InlineFeedbackAction } from './primitives/inline-feedback-action.js';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from './primitives/dropdown-menu.js';
+export { JsonViewsSurface } from './surface.js';
+export { JsonViewsDeviceProvider, useJsonViewsDevice } from './browser-device.js';

package/dist/json/copy-json.d.ts

@@ -0,0 +1,15 @@
+import type { ValuePath } from '@script-it/json-views-core';
+type SourceLiteralLookup = (path?: ValuePath | null) => string | undefined;
+/** A filename-qualified URI reference whose fragment is an RFC 6901 JSON Pointer. */
+export declare function jsonPathReference(fileName: string, path: ValuePath): string;
+export declare function jsonRowsReferenceText(fileName: string, rows: readonly {
+    sourcePath: ValuePath;
+}[]): string;
+/** Pretty JSON for one record while retaining unsafe number tokens from source. */
+export declare function jsonRecordCopyText(value: unknown, sourcePath: ValuePath, sourceLiteral: SourceLiteralLookup): string;
+/** Selected rows are always copied as an array, in their visible table order. */
+export declare function jsonRowsCopyText(rows: readonly {
+    value: unknown;
+    sourcePath: ValuePath;
+}[], sourceLiteral: SourceLiteralLookup): string;
+export {};

package/dist/json/copy-json.js

@@ -0,0 +1,52 @@
+function jsonPointerToken(segment) {
+    return encodeURIComponent(String(segment).replace(/~/g, '~0').replace(/\//g, '~1'));
+}
+/** A filename-qualified URI reference whose fragment is an RFC 6901 JSON Pointer. */
+export function jsonPathReference(fileName, path) {
+    const safeFileName = encodeURIComponent(fileName || 'document.json');
+    return `${safeFileName}#${path.map((segment) => `/${jsonPointerToken(segment)}`).join('')}`;
+}
+export function jsonRowsReferenceText(fileName, rows) {
+    return JSON.stringify(rows.map((row) => jsonPathReference(fileName, row.sourcePath)));
+}
+function serializeJsonValue(value, sourcePath, sourceLiteral, depth) {
+    if (value === null)
+        return 'null';
+    if (typeof value === 'string' || typeof value === 'boolean')
+        return JSON.stringify(value);
+    if (typeof value === 'number') {
+        const literal = sourceLiteral(sourcePath);
+        if (literal !== undefined)
+            return literal;
+        if (!Number.isFinite(value))
+            throw new TypeError('This record contains a number that cannot be copied as JSON');
+        return Object.is(value, -0) ? '-0' : String(value);
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0)
+            return '[]';
+        const childIndent = '  '.repeat(depth + 1);
+        const closingIndent = '  '.repeat(depth);
+        return `[\n${value.map((item, index) => `${childIndent}${serializeJsonValue(item, [...sourcePath, index], sourceLiteral, depth + 1)}`).join(',\n')}\n${closingIndent}]`;
+    }
+    if (typeof value === 'object') {
+        const entries = Object.entries(value)
+            .filter(([, item]) => item !== undefined);
+        if (entries.length === 0)
+            return '{}';
+        const childIndent = '  '.repeat(depth + 1);
+        const closingIndent = '  '.repeat(depth);
+        return `{\n${entries.map(([key, item]) => `${childIndent}${JSON.stringify(key)}: ${serializeJsonValue(item, [...sourcePath, key], sourceLiteral, depth + 1)}`).join(',\n')}\n${closingIndent}}`;
+    }
+    throw new TypeError(`Cannot copy a ${typeof value} value as JSON`);
+}
+/** Pretty JSON for one record while retaining unsafe number tokens from source. */
+export function jsonRecordCopyText(value, sourcePath, sourceLiteral) {
+    return serializeJsonValue(value, sourcePath, sourceLiteral, 0);
+}
+/** Selected rows are always copied as an array, in their visible table order. */
+export function jsonRowsCopyText(rows, sourceLiteral) {
+    if (rows.length === 0)
+        return '[]';
+    return `[\n${rows.map((row) => `  ${serializeJsonValue(row.value, row.sourcePath, sourceLiteral, 1)}`).join(',\n')}\n]`;
+}

package/dist/json/html-preview.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export declare function HtmlPreview({ source, title }: {
+    source: string;
+    title: string;
+}): ReactNode;

package/dist/json/html-preview.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const PREVIEW_CSP = `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data:; font-src data:; style-src 'unsafe-inline'">`;
+function isolatedHtml(source) {
+    if (/<head\b[^>]*>/i.test(source))
+        return source.replace(/<head\b[^>]*>/i, (head) => `${head}${PREVIEW_CSP}`);
+    if (/<html\b[^>]*>/i.test(source))
+        return source.replace(/<html\b[^>]*>/i, (html) => `${html}<head>${PREVIEW_CSP}</head>`);
+    return `${PREVIEW_CSP}${source}`;
+}
+export function HtmlPreview({ source, title }) {
+    return _jsx("iframe", { "data-id": "jsonView-html-preview", title: `${title} HTML preview`, sandbox: "", referrerPolicy: "no-referrer", srcDoc: isolatedHtml(source), className: "h-[min(65vh,720px)] min-h-80 w-full rounded-md border border-border bg-white" });
+}

package/dist/json/html-view/native-control.d.ts

@@ -0,0 +1,44 @@
+import type { ValuePath } from '@script-it/json-views-core';
+import type { JsonViewJsonEditing } from '../view-types.js';
+export declare function NativeHtmlControl({ tag, props, path, value, editing, report }: {
+    tag: string;
+    props: Record<string, unknown>;
+    path: ValuePath;
+    value: unknown;
+    editing?: JsonViewJsonEditing;
+    report: (message: string) => void;
+}): import("react").ReactElement<{
+    onFocus: () => void;
+    onPointerDown: () => void;
+    onChange: (event: {
+        target: HTMLInputElement;
+    }) => void;
+    onBlur: () => void;
+    onPointerUp: () => void;
+    onKeyUp: () => void;
+    onKeyDown: (event: {
+        key: string;
+        ctrlKey: boolean;
+        metaKey: boolean;
+        preventDefault: () => void;
+    }) => void;
+    checked: boolean;
+    disabled: boolean;
+} | {
+    onFocus: () => void;
+    onPointerDown: () => void;
+    onChange: (event: {
+        target: HTMLInputElement;
+    }) => void;
+    onBlur: () => void;
+    onPointerUp: () => void;
+    onKeyUp: () => void;
+    onKeyDown: (event: {
+        key: string;
+        ctrlKey: boolean;
+        metaKey: boolean;
+        preventDefault: () => void;
+    }) => void;
+    value: string;
+    disabled: boolean;
+}, string | import("react").JSXElementConstructor<any>>;

package/dist/json/html-view/native-control.js

@@ -0,0 +1,96 @@
+import { createElement, useContext, useEffect, useRef, useState } from 'react';
+import { EditBaseContext } from '../../structured-data/edit-base.js';
+export function NativeHtmlControl({ tag, props, path, value, editing, report }) {
+    const base = useContext(EditBaseContext);
+    const [draft, setDraft] = useState(value == null ? '' : String(value));
+    const [active, setActive] = useState(false);
+    const [savingThisControl, setSavingThisControl] = useState(false);
+    const original = useRef({ base, path });
+    const pending = useRef(false), changed = useRef(false), draftRef = useRef(draft);
+    const type = props.type ?? 'text';
+    useEffect(() => { if (!active) {
+        const next = value == null ? '' : String(value);
+        setDraft(next);
+        draftRef.current = next;
+    } }, [value, active]);
+    const start = () => { if (!active) {
+        original.current = { base, path: [...path] };
+        setActive(true);
+    } };
+    const cancel = () => { changed.current = false; setActive(false); draftRef.current = value == null ? '' : String(value); setDraft(draftRef.current); };
+    const commit = async (candidate) => {
+        if (!editing || pending.current || (!changed.current && candidate === undefined))
+            return;
+        if (editing.saving) {
+            report('Wait for the current save to finish');
+            return;
+        }
+        if (original.current.base !== base || JSON.stringify(original.current.path) !== JSON.stringify(path)) {
+            report('This document changed outside this editor. Cancel and reopen it before saving.');
+            return;
+        }
+        let next = candidate ?? draftRef.current;
+        if (type === 'number' || type === 'range') {
+            if (String(next).trim() === '' || !Number.isFinite(Number(next))) {
+                report('Enter a finite number');
+                return;
+            }
+            next = Number(next);
+            if (props.min !== undefined && Number(next) < Number(props.min) || props.max !== undefined && Number(next) > Number(props.max)) {
+                report('Value is outside the control limits');
+                return;
+            }
+        }
+        if (type === 'checkbox' && typeof value !== 'boolean' || (type === 'number' || type === 'range') && typeof value !== 'number' || (type === 'text' || tag === 'textarea') && typeof value !== 'string') {
+            report('Control type does not match the JSON value');
+            return;
+        }
+        pending.current = true;
+        setSavingThisControl(true);
+        try {
+            await editing.replace(original.current.path, next);
+            changed.current = false;
+            setActive(false);
+            report('');
+        }
+        catch (error) {
+            report(error instanceof Error ? error.message : 'Could not save');
+            changed.current = true;
+        }
+        finally {
+            pending.current = false;
+            setSavingThisControl(false);
+        }
+    };
+    return createElement(tag, {
+        ...props, disabled: !editing || savingThisControl || editing.canReplace?.(path) === false,
+        ...(type === 'checkbox' ? { checked: value === true } : { value: draft }),
+        onFocus: start, onPointerDown: start,
+        onChange: (event) => {
+            if (type === 'checkbox') {
+                original.current = { base, path: [...path] };
+                void commit(event.target.checked);
+                return;
+            }
+            changed.current = true;
+            draftRef.current = event.target.value;
+            setDraft(event.target.value);
+        },
+        onBlur: () => { void commit(); },
+        onPointerUp: () => { if (type === 'range')
+            void commit(); },
+        onKeyUp: () => { if (type === 'range')
+            void commit(); },
+        onKeyDown: (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                cancel();
+                report('');
+            }
+            if (event.key === 'Enter' && (tag !== 'textarea' || event.ctrlKey || event.metaKey)) {
+                event.preventDefault();
+                void commit();
+            }
+        },
+    });
+}

package/dist/json/html-view/settings.d.ts

@@ -0,0 +1,2 @@
+import type { JsonViewViewSettings } from '../view-settings.js';
+export declare function HtmlViewSettings({ rawView, onSave, onPreview, onDelete, onDuplicate, disabled, saveUnavailableReason }: Parameters<typeof JsonViewViewSettings>[0]): import("react").JSX.Element;

package/dist/json/html-view/settings.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Copy, Settings2, Trash2 } from 'lucide-react';
+import { useJsonViewsPortalContainer } from '../../surface.js';
+import { useAnchoredPosition } from '../../lib/use-anchored-position.js';
+import { useDismiss } from '../../lib/use-dismiss.js';
+const ICON_BUTTON_CLASS = 'grid h-7 w-7 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 active:scale-[0.97]';
+const TEXTAREA_CLASS = 'h-32 w-full resize-y rounded-md border border-input bg-background p-2 font-mono text-xs text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring';
+function EditorSection({ children, summary, title }) {
+    return _jsxs("details", { className: "group border-t border-border", children: [_jsxs("summary", { className: "flex min-h-10 cursor-pointer list-none items-center gap-2 rounded-md px-1 text-xs hover:bg-accent", children: [_jsx("span", { className: "w-20 shrink-0 font-medium text-foreground", children: title }), _jsx("span", { className: "min-w-0 flex-1 truncate text-right text-muted-foreground", children: summary }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-150 group-open:rotate-180" })] }), _jsx("div", { className: "px-1 pb-3 pt-1", children: children })] });
+}
+export function HtmlViewSettings({ rawView, onSave, onPreview, onDelete, onDuplicate, disabled, saveUnavailableReason }) {
+    const [open, setOpen] = useState(false), [draft, setDraft] = useState(rawView), [base, setBase] = useState(JSON.stringify(rawView)), [saving, setSaving] = useState(false), [error, setError] = useState(''), [confirmDelete, setConfirmDelete] = useState(false);
+    const anchor = useRef(null), content = useRef(null), portal = useJsonViewsPortalContainer();
+    const position = useAnchoredPosition(open, anchor, content, 'bottom', 'end');
+    const close = () => { onPreview?.(undefined); setOpen(false); setConfirmDelete(false); };
+    useDismiss({ enabled: open && !saving, onDismiss: close, insideRefs: [anchor, content] });
+    const apply = async () => {
+        if (base !== JSON.stringify(rawView)) {
+            setError('View settings changed outside this editor. Cancel and reopen before applying.');
+            return;
+        }
+        if (!String(draft.name ?? '').trim() || !String(draft.html ?? '').trim()) {
+            setError('Name and HTML are required');
+            return;
+        }
+        setSaving(true);
+        setError('');
+        try {
+            await onSave(draft);
+            close();
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : 'Could not save');
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const runAction = async (action) => {
+        if (!action)
+            return;
+        setSaving(true);
+        setError('');
+        try {
+            await action();
+            close();
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : 'Could not update this view');
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return _jsxs(_Fragment, { children: [_jsx("button", { ref: anchor, type: "button", "aria-label": "View options", disabled: disabled, className: ICON_BUTTON_CLASS, onClick: () => { setDraft(rawView); setBase(JSON.stringify(rawView)); setError(''); setConfirmDelete(false); setOpen(true); }, children: _jsx(Settings2, { className: "h-3.5 w-3.5" }) }), open && portal && createPortal(_jsxs("section", { ref: content, "aria-label": "HTML view options", "data-id": "view-settings", "data-anchored-popup": true, style: position, className: "z-[100] w-[min(26rem,calc(100vw-2rem))] overflow-y-auto rounded-lg border border-border bg-card p-2 text-xs text-foreground shadow-lg [transform-origin:top_right]", children: [_jsx("header", { className: "flex min-h-10 items-center gap-2 px-1 pb-2", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h3", { className: "font-medium", children: "View options" }), _jsxs("div", { className: "mt-1 flex min-w-0 items-center gap-0.5", children: [_jsx("input", { "aria-label": "View name", className: "h-7 min-w-0 flex-1 rounded-sm bg-transparent px-1 text-xs text-muted-foreground outline-none hover:bg-accent focus-visible:bg-background focus-visible:ring-1 focus-visible:ring-ring", value: String(draft.name ?? ''), onChange: event => setDraft({ ...draft, name: event.target.value }) }), onDuplicate && _jsx("button", { type: "button", "aria-label": "Duplicate view", title: "Duplicate view", disabled: saving, className: ICON_BUTTON_CLASS, onClick: () => { void runAction(onDuplicate); }, children: _jsx(Copy, { className: "h-3.5 w-3.5" }) }), onDelete && _jsx("button", { type: "button", "aria-label": "Delete view", title: "Delete view", disabled: saving, className: `${ICON_BUTTON_CLASS} text-destructive hover:bg-destructive/10 hover:text-destructive`, onClick: () => setConfirmDelete(true), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })] }) }), confirmDelete && onDelete && _jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-md bg-destructive/10 px-2 py-2 text-destructive", children: [_jsx("span", { className: "min-w-0 flex-1", children: "Delete this view?" }), _jsx("button", { type: "button", className: "rounded-md px-2 py-1 hover:bg-accent", onClick: () => setConfirmDelete(false), children: "Cancel" }), _jsx("button", { type: "button", "data-id": "jsonView-confirm-delete-view", disabled: saving, className: "rounded-md bg-destructive px-2 py-1 text-destructive-foreground disabled:opacity-50", onClick: () => { void runAction(onDelete); }, children: "Delete" })] }), _jsx(EditorSection, { title: "HTML", summary: "Template", children: _jsx("textarea", { "aria-label": "View HTML", spellCheck: false, className: TEXTAREA_CLASS, value: String(draft.html ?? ''), onChange: event => setDraft({ ...draft, html: event.target.value }) }) }), _jsx(EditorSection, { title: "CSS", summary: String(draft.css ?? '').trim() ? 'Custom styles' : 'None', children: _jsx("textarea", { "aria-label": "View CSS", spellCheck: false, className: TEXTAREA_CLASS, value: String(draft.css ?? ''), onChange: event => setDraft({ ...draft, css: event.target.value }) }) }), (error || saveUnavailableReason) && _jsx("p", { role: "alert", className: "px-1 py-2 text-destructive", children: error || saveUnavailableReason }), _jsxs("footer", { className: "flex justify-end gap-1 border-t border-border px-1 pt-2", children: [_jsx("button", { type: "button", className: "h-8 rounded-md px-3 text-xs text-muted-foreground hover:bg-accent hover:text-foreground", onClick: () => onPreview?.(draft), disabled: saving, children: "Preview" }), _jsx("button", { type: "button", className: "h-8 rounded-md px-3 text-xs text-muted-foreground hover:bg-accent hover:text-foreground", onClick: close, disabled: saving, children: "Cancel" }), _jsx("button", { type: "button", "data-id": "jsonView-save-view", className: "h-8 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50", onClick: () => { void apply(); }, disabled: saving || disabled || Boolean(saveUnavailableReason), children: saving ? 'Saving…' : 'Save view' })] })] }), portal)] });
+}

package/dist/json/html-view/template.d.ts

@@ -0,0 +1,12 @@
+export interface HtmlTemplateNode {
+    tag?: string;
+    text?: string;
+    attrs: Record<string, string>;
+    children: HtmlTemplateNode[];
+    id: string;
+}
+export declare const boundAttributes: Set<string>;
+export declare function parseHtmlTemplate(doc: Document, html: string): {
+    nodes: HtmlTemplateNode[];
+    warnings: string[];
+};

package/dist/json/html-view/template.js

@@ -0,0 +1,55 @@
+const tags = new Set('main article section header footer nav aside div span h1 h2 h3 h4 h5 h6 p strong em b i small label ul ol li dl dt dd table caption thead tbody tfoot tr td th br hr input textarea progress meter button svg g path circle ellipse rect line polyline polygon text tspan title desc img jv-value jv-field jv-repeat'.split(' '));
+const dangerous = new Set('script iframe object embed base meta link form foreignobject animate animatemotion animatetransform set style'.split(' '));
+export const boundAttributes = new Set('title aria-label aria-valuenow aria-valuetext x y cx cy x1 x2 y1 y2 width height r rx ry fill stroke opacity'.split(' '));
+const attributes = new Set('id class title role type min max step placeholder rows cols maxlength disabled readonly tabindex for value checked max low high optimum width height viewBox preserveAspectRatio d x y cx cy x1 x2 y1 y2 r rx ry points fill stroke stroke-width opacity text-anchor font-size font-family alt bind source as key'.toLowerCase().split(' '));
+export function parseHtmlTemplate(doc, html) {
+    const template = doc.createElement('template');
+    // Template contents are inert; parsed only in the CSP-restricted frame document.
+    template.innerHTML = html;
+    const warnings = [];
+    let count = 0;
+    const visit = (node, depth) => {
+        if (++count > 5000 || depth > 64)
+            throw new Error('HTML template exceeds 5,000 nodes or 64 nesting levels');
+        const id = String(count);
+        if (node.nodeType === 3)
+            return [{ text: node.textContent ?? '', attrs: {}, children: [], id }];
+        if (node.nodeType !== 1)
+            return [];
+        const element = node, tag = element.localName.toLowerCase();
+        if (dangerous.has(tag)) {
+            warnings.push(`Removed unsafe element: ${tag}`);
+            return [];
+        }
+        const children = () => Array.from(node.childNodes).flatMap(child => visit(child, depth + 1));
+        if (!tags.has(tag)) {
+            warnings.push(`Unsupported element: ${tag}`);
+            return children();
+        }
+        const attrs = {};
+        for (const attr of Array.from(element.attributes)) {
+            const name = attr.name.toLowerCase(), value = attr.value;
+            if (name === 'src' && tag === 'img' && /^data:image\/(png|jpeg|gif|webp);base64,[A-Za-z0-9+/=]+$/.test(value) && value.length <= 256 * 1024) {
+                attrs.src = value;
+                continue;
+            }
+            if (name.startsWith('jv-attr-') && boundAttributes.has(name.slice(8)) || name === 'jv-bind' || name === 'jv-value' || attributes.has(name) || /^aria-[a-z-]+$/.test(name)) {
+                if ((name === 'fill' || name === 'stroke') && /url\s*\(/i.test(value)) {
+                    warnings.push(`Removed URL attribute: ${name}`);
+                    continue;
+                }
+                attrs[name] = value;
+            }
+            else
+                warnings.push(`Removed unsupported attribute: ${name}`);
+        }
+        if (tag === 'input' && !['text', 'number', 'range', 'checkbox'].includes(attrs.type ?? 'text')) {
+            warnings.push('Supported inputs: text, number, range, checkbox');
+            return [];
+        }
+        if (/\<jv-(field|value|repeat)\b[^>]*\/\s*>/i.test(html))
+            throw new Error('Use explicit closing tags for jv-field, jv-value and jv-repeat');
+        return [{ tag, attrs, children: children(), id }];
+    };
+    return { nodes: Array.from(template.content.childNodes).flatMap(node => visit(node, 0)), warnings: [...new Set(warnings)] };
+}

package/dist/json/html-view.d.ts

@@ -0,0 +1,9 @@
+import { type CompiledJsonViewMetadata, type CompiledJsonViewView, type ValuePath } from '@script-it/json-views-core';
+import type { JsonViewJsonEditing } from './view-types.js';
+export declare function HtmlView({ compiled, view, editing, fillHeight, onCurrentPathChange }: {
+    compiled: CompiledJsonViewMetadata;
+    view: CompiledJsonViewView;
+    editing?: JsonViewJsonEditing;
+    fillHeight?: boolean;
+    onCurrentPathChange?: (path: ValuePath) => void;
+}): import("react").JSX.Element;