omni-viewer-core 0.1.0

package/dist/viewers/json/index.d.ts

@@ -0,0 +1,25 @@
+import type { ClipboardService, FileSaveService, FileWritebackService, HostContext } from '../../host/index.js';
+import { type MountOptions, type ViewerHandle, type ViewerInput } from '../types.js';
+import type { ResourceLimits } from '../../parsers/types.js';
+export { createJsonController, type JsonController, type JsonViewState, type JsonAction, type JsonToolAction, type JsonSourceForm, type JsonViewMode } from './controller.js';
+export { jsonViewerCss } from './styles.js';
+/** Viewer metadata — single source for the registry codegen (DESIGN.md §7). */
+export declare const JSON_VIEWER_META: {
+    id: string;
+    displayNameKey: string;
+    extensions: string[];
+    priority: number;
+    requiredServices: readonly [];
+    optionalServices: readonly ["clipboard", "save", "writeback"];
+    inputOwnership: "borrows";
+};
+export type JsonViewerContext = HostContext & {
+    clipboard?: ClipboardService;
+    save?: FileSaveService;
+    writeback?: FileWritebackService;
+};
+export interface JsonMountOptions extends MountOptions {
+    limits?: ResourceLimits;
+    maxDepth?: number;
+}
+export declare function mountJsonViewer(input: ViewerInput, container: HTMLElement, ctx: JsonViewerContext, options?: JsonMountOptions): Promise<ViewerHandle>;

package/dist/viewers/json/index.js

@@ -0,0 +1,503 @@
+// JSON viewer — DOM renderer consuming JsonController (DESIGN.md §3-②).
+// CSP rules: no eval, no inline handlers, no innerHTML — all rendering goes
+// through createElement/textContent. Mount is async and renders inside a shadow
+// root by default (§6 reverse-contamination contract).
+//
+// Optional services: `clipboard`. Degraded mode (ADR 24): without it the copy
+// controls render disabled with an explanatory tooltip — never hidden.
+import { MountAbortedError, VIEWER_ROOT_CLASS } from '../types.js';
+import { tokenizeJson } from '../../parsers/json/index.js';
+import { parseCsv } from '../../parsers/csv/index.js';
+import { createJsonController } from './controller.js';
+import { jsonViewerCss } from './styles.js';
+export { createJsonController } from './controller.js';
+export { jsonViewerCss } from './styles.js';
+/** Viewer metadata — single source for the registry codegen (DESIGN.md §7). */
+export const JSON_VIEWER_META = {
+    id: 'json',
+    displayNameKey: 'json.treeView',
+    extensions: ['json'],
+    priority: 10,
+    requiredServices: [],
+    optionalServices: ['clipboard', 'save', 'writeback'],
+    inputOwnership: 'borrows'
+};
+/** Toolbox buttons: [label key suffix, action]. Routing per 부록 B-1. */
+const TOOLBOX = [
+    ['format', 'pretty'],
+    ['minify', 'minify'],
+    ['sort', 'sort-keys'],
+    ['validate', 'validate'],
+    ['escape', 'escape'],
+    ['unescape', 'unescape'],
+    ['base64Encode', 'base64-encode'],
+    ['base64Decode', 'base64-decode'],
+    ['toCsv', 'to-csv'],
+    ['toXml', 'to-xml'],
+    ['toYaml', 'to-yaml']
+];
+export async function mountJsonViewer(input, container, ctx, options = {}) {
+    if (options.signal?.aborted)
+        throw new MountAbortedError();
+    const controllerOptions = {};
+    if (options.limits !== undefined)
+        controllerOptions.limits = options.limits;
+    if (options.maxDepth !== undefined)
+        controllerOptions.maxDepth = options.maxDepth;
+    const controller = createJsonController(input.data, controllerOptions);
+    const isolation = options.styleIsolation ?? 'shadow';
+    let root;
+    if (isolation === 'shadow' && typeof container.attachShadow === 'function') {
+        root = container.shadowRoot ?? container.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = jsonViewerCss;
+        root.appendChild(style);
+    }
+    else {
+        container.classList.add(VIEWER_ROOT_CLASS, 'omni-viewer--json');
+        root = container;
+    }
+    const t = ctx.i18n.t.bind(ctx.i18n);
+    const clipboard = ctx.clipboard;
+    const save = ctx.save;
+    const writeback = ctx.writeback;
+    const disposers = [];
+    let editing = false;
+    let saveNotice = null;
+    const el = (tag, className, text) => {
+        const node = document.createElement(tag);
+        if (className)
+            node.className = className;
+        if (text !== undefined)
+            node.textContent = text;
+        return node;
+    };
+    const on = (target, type, handler) => {
+        target.addEventListener(type, handler);
+        disposers.push(() => target.removeEventListener(type, handler));
+    };
+    const copy = async (value) => {
+        if (!clipboard)
+            return;
+        try {
+            await clipboard.writeText(value);
+        }
+        catch (error) {
+            ctx.logger.log('error', `json copy failed: ${String(error)}`);
+        }
+    };
+    const jsonBytes = () => new TextEncoder().encode(controller.verbatimText());
+    const saveAsJson = async () => {
+        if (!save)
+            return;
+        const name = input.fileName.toLowerCase().endsWith('.json')
+            ? input.fileName
+            : `${input.fileName}.json`;
+        try {
+            await save.saveFile(name, jsonBytes(), 'application/json');
+            saveNotice = t('common.saved', { name });
+        }
+        catch (error) {
+            ctx.logger.log('error', `json save failed: ${String(error)}`);
+            saveNotice = t('common.saveFailed');
+        }
+        render(controller.state);
+    };
+    const saveToOriginal = async () => {
+        if (!writeback)
+            return;
+        try {
+            await writeback.write(jsonBytes());
+            saveNotice = t('common.savedToOriginal');
+        }
+        catch (error) {
+            ctx.logger.log('error', `json save failed: ${String(error)}`);
+            saveNotice = t('common.saveFailed');
+        }
+        render(controller.state);
+    };
+    // --- static frame ------------------------------------------------------
+    const frame = el('div', 'omni-json');
+    const toolbar = el('div', 'omni-json__toolbar');
+    const treeBtn = el('button', undefined, t('json.view.tree'));
+    treeBtn.type = 'button';
+    on(treeBtn, 'click', () => controller.dispatch({
+        type: 'set-view-mode',
+        mode: controller.state.viewMode === 'tree' ? 'source' : 'tree'
+    }));
+    const expandBtn = el('button', undefined, t('json.expandAll'));
+    expandBtn.type = 'button';
+    on(expandBtn, 'click', () => controller.dispatch({ type: 'expand-all' }));
+    const collapseBtn = el('button', undefined, t('json.collapseAll'));
+    collapseBtn.type = 'button';
+    on(collapseBtn, 'click', () => controller.dispatch({ type: 'collapse-all' }));
+    const formSelect = el('select');
+    for (const form of ['verbatim', 'pretty', 'minified']) {
+        const opt = el('option', undefined, t(`json.form.${form}`));
+        opt.value = form;
+        formSelect.appendChild(opt);
+    }
+    on(formSelect, 'change', () => controller.dispatch({
+        type: 'set-source-form',
+        form: formSelect.value
+    }));
+    const searchInput = el('input', 'omni-json__search');
+    searchInput.type = 'search';
+    searchInput.placeholder = t('json.search');
+    searchInput.setAttribute('aria-label', t('json.search'));
+    on(searchInput, 'input', () => controller.dispatch({ type: 'set-search', search: searchInput.value }));
+    const prevBtn = el('button', undefined, '‹');
+    prevBtn.type = 'button';
+    prevBtn.setAttribute('aria-label', t('json.prevMatch'));
+    on(prevBtn, 'click', () => controller.dispatch({ type: 'prev-match' }));
+    const nextBtn = el('button', undefined, '›');
+    nextBtn.type = 'button';
+    nextBtn.setAttribute('aria-label', t('json.nextMatch'));
+    on(nextBtn, 'click', () => controller.dispatch({ type: 'next-match' }));
+    const matchInfo = el('span', 'omni-json__matchinfo');
+    const toolButtons = [];
+    const toolbox = el('span', 'omni-json__tool-group');
+    TOOLBOX.forEach(([labelKey, action]) => {
+        const btn = el('button', undefined, t(`json.tool.${labelKey}`));
+        btn.type = 'button';
+        on(btn, 'click', () => controller.dispatch({ type: 'run-tool', action }));
+        toolButtons.push(btn);
+        toolbox.appendChild(btn);
+    });
+    const meta = el('span', 'omni-json__meta');
+    const saveActions = el('span', 'omni-json__save-actions');
+    const saveBtn = el('button', undefined, t('json.save'));
+    saveBtn.type = 'button';
+    if (writeback) {
+        on(saveBtn, 'click', () => void saveToOriginal());
+    }
+    else {
+        saveBtn.disabled = true;
+        saveBtn.title = t('common.noWriteback');
+    }
+    const saveAsBtn = el('button', undefined, t('json.saveAs'));
+    saveAsBtn.type = 'button';
+    if (save) {
+        on(saveAsBtn, 'click', () => void saveAsJson());
+    }
+    else {
+        saveAsBtn.disabled = true;
+        saveAsBtn.title = t('common.noFileSave');
+    }
+    saveActions.append(saveBtn, saveAsBtn);
+    toolbar.append(expandBtn, collapseBtn, formSelect, searchInput, prevBtn, nextBtn, matchInfo, saveActions, toolbox, meta);
+    const statusBar = el('div', 'omni-json__status');
+    const diagnosticsBar = el('div', 'omni-json__diagnostics');
+    const body = el('div', 'omni-json__body');
+    // Persistent editor (verbatim source) so edits keep caret/focus.
+    const editor = el('textarea', 'omni-json__editor');
+    editor.spellcheck = false;
+    on(editor, 'focus', () => {
+        editing = true;
+    });
+    on(editor, 'blur', () => {
+        editing = false;
+    });
+    on(editor, 'input', () => controller.dispatch({ type: 'edit-scratchpad', text: editor.value }));
+    // Source mode keeps the original text beside its highlighted preview.
+    // The editor stays mounted while typing so it retains its focus and caret.
+    const sourceWorkspace = el('div', 'omni-json__source-workspace');
+    const editorPanel = el('section', 'omni-json__pane omni-json__editor-pane');
+    const editorHeader = el('header', 'omni-json__pane-header');
+    editorHeader.append(el('strong', undefined, t('json.editor.title')), el('span', undefined, t('json.editor.description')));
+    const editorSurface = el('div', 'omni-json__editor-surface');
+    const editorHighlight = el('pre', 'omni-json__editor-highlight');
+    const editorCode = el('code');
+    editorHighlight.appendChild(editorCode);
+    on(editor, 'scroll', () => {
+        editorHighlight.scrollTop = editor.scrollTop;
+        editorHighlight.scrollLeft = editor.scrollLeft;
+    });
+    editorSurface.append(editorHighlight, editor);
+    editorPanel.append(editorHeader, editorSurface);
+    const previewPanel = el('section', 'omni-json__pane omni-json__preview-pane');
+    const previewHeader = el('header', 'omni-json__pane-header');
+    previewHeader.append(el('strong', undefined, t('json.preview.title')), el('span', undefined, t('json.preview.description')), treeBtn);
+    const preview = el('pre', 'omni-json__source');
+    const previewCode = el('code');
+    preview.appendChild(previewCode);
+    const previewContent = el('div', 'omni-json__preview-content');
+    previewContent.appendChild(preview);
+    previewPanel.append(previewHeader, previewContent);
+    sourceWorkspace.append(editorPanel, previewPanel);
+    // Result panel (converters).
+    const resultPanel = el('div', 'omni-json__result');
+    const resultTitle = el('div', 'omni-json__result-title');
+    const resultOutput = el('textarea', 'omni-json__result-output');
+    resultOutput.readOnly = true;
+    const resultMarkup = el('pre', 'omni-json__result-markup');
+    const resultMarkupCode = el('code');
+    resultMarkup.appendChild(resultMarkupCode);
+    const resultTableWrap = el('div', 'omni-json__result-table-wrap');
+    const resultTable = el('table', 'omni-json__result-table');
+    resultTableWrap.appendChild(resultTable);
+    const resultActions = el('div', 'omni-json__result-actions');
+    const copyResultBtn = el('button', undefined, t('json.result.copy'));
+    copyResultBtn.type = 'button';
+    if (clipboard) {
+        on(copyResultBtn, 'click', () => void copy(resultOutput.value));
+    }
+    else {
+        copyResultBtn.disabled = true;
+        copyResultBtn.title = t('common.noClipboard');
+    }
+    const closeResultBtn = el('button', undefined, t('json.result.close'));
+    closeResultBtn.type = 'button';
+    on(closeResultBtn, 'click', () => controller.dispatch({ type: 'dismiss-result' }));
+    resultActions.append(copyResultBtn, closeResultBtn);
+    resultPanel.append(resultTitle, resultOutput, resultMarkup, resultTableWrap, resultActions);
+    frame.append(toolbar, statusBar, diagnosticsBar, resultPanel, body);
+    root.appendChild(frame);
+    // --- tree rendering ----------------------------------------------------
+    function valueSpan(node) {
+        switch (node.kind) {
+            case 'string':
+                return el('span', 'omni-json__val-string', `"${node.value}"`);
+            case 'number':
+                return el('span', 'omni-json__val-number', node.rawNumber ?? '');
+            case 'boolean':
+                return el('span', 'omni-json__val-boolean', String(node.value));
+            case 'null':
+                return el('span', 'omni-json__val-null', 'null');
+            case 'array':
+                return el('span', 'omni-json__type', `[${node.children?.length ?? 0}]`);
+            case 'object':
+                return el('span', 'omni-json__type', `{${node.children?.length ?? 0}}`);
+        }
+    }
+    function renderNode(node, state, currentId) {
+        // Address by stable id, not path — duplicate keys share a path (P1b).
+        const id = controller.nodeId(node) ?? node.path;
+        const li = el('li');
+        const row = el('div', 'omni-json__row');
+        if (controller.matches.includes(id))
+            row.classList.add('is-matched');
+        if (id === currentId)
+            row.classList.add('is-current');
+        const container = node.kind === 'object' || node.kind === 'array';
+        const expanded = state.expanded.has(id);
+        if (container) {
+            // A real button carries native focus + Enter/Space activation (P2b).
+            const toggle = el('button', 'omni-json__toggle', expanded ? '▾' : '▸');
+            toggle.type = 'button';
+            toggle.setAttribute('aria-expanded', String(expanded));
+            toggle.setAttribute('aria-label', t(expanded ? 'json.collapseNode' : 'json.expandNode'));
+            toggle.addEventListener('click', () => controller.dispatch({ type: 'toggle-node', id }));
+            row.appendChild(toggle);
+        }
+        else {
+            row.appendChild(el('span', 'omni-json__toggle', ''));
+        }
+        row.appendChild(el('span', 'omni-json__key', node.key));
+        row.appendChild(el('span', 'omni-json__type', node.kind));
+        row.appendChild(valueSpan(node));
+        const actions = el('span', 'omni-json__node-actions');
+        const pathBtn = el('button', undefined, t('json.copyPath'));
+        pathBtn.type = 'button';
+        const valueBtn = el('button', undefined, t('json.copyValue'));
+        valueBtn.type = 'button';
+        if (clipboard) {
+            pathBtn.addEventListener('click', () => void copy(controller.nodePath(id)));
+            valueBtn.addEventListener('click', () => void copy(controller.nodeValue(id)));
+        }
+        else {
+            for (const b of [pathBtn, valueBtn]) {
+                b.disabled = true;
+                b.title = t('common.noClipboard');
+            }
+        }
+        actions.append(pathBtn, valueBtn);
+        row.appendChild(actions);
+        li.appendChild(row);
+        if (container && expanded && node.children && node.children.length) {
+            const ul = el('ul');
+            for (const child of node.children)
+                ul.appendChild(renderNode(child, state, currentId));
+            li.appendChild(ul);
+        }
+        return li;
+    }
+    function renderHighlightedJson(target, text, search = '') {
+        target.replaceChildren();
+        const query = search.trim().toLocaleLowerCase();
+        for (const tok of tokenizeJson(text)) {
+            const tokenClass = tok.kind === 'whitespace' || tok.kind === 'punct' ? '' : `jv-tok-${tok.kind}`;
+            if (!query || !tok.text.toLocaleLowerCase().includes(query)) {
+                if (tokenClass)
+                    target.appendChild(el('span', tokenClass, tok.text));
+                else
+                    target.appendChild(document.createTextNode(tok.text));
+                continue;
+            }
+            let cursor = 0;
+            const lowerText = tok.text.toLocaleLowerCase();
+            while (cursor < tok.text.length) {
+                const matchAt = lowerText.indexOf(query, cursor);
+                if (matchAt < 0) {
+                    const rest = tok.text.slice(cursor);
+                    if (tokenClass)
+                        target.appendChild(el('span', tokenClass, rest));
+                    else
+                        target.appendChild(document.createTextNode(rest));
+                    break;
+                }
+                if (matchAt > cursor) {
+                    const before = tok.text.slice(cursor, matchAt);
+                    if (tokenClass)
+                        target.appendChild(el('span', tokenClass, before));
+                    else
+                        target.appendChild(document.createTextNode(before));
+                }
+                target.appendChild(el('mark', tokenClass ? `${tokenClass} omni-json__search-hit` : 'omni-json__search-hit', tok.text.slice(matchAt, matchAt + query.length)));
+                cursor = matchAt + query.length;
+            }
+        }
+    }
+    function renderCsvResult(text) {
+        const { result } = parseCsv(text, { delimiter: ',', hasHeader: true });
+        resultTable.replaceChildren();
+        if (result.status === 'failed')
+            return;
+        const head = el('thead');
+        const headerRow = el('tr');
+        for (const header of result.document.headers)
+            headerRow.appendChild(el('th', undefined, header));
+        head.appendChild(headerRow);
+        const tableBody = el('tbody');
+        for (const row of result.document.rows) {
+            const tr = el('tr');
+            for (let index = 0; index < result.document.columnCount; index++) {
+                tr.appendChild(el('td', undefined, row[index] ?? ''));
+            }
+            tableBody.appendChild(tr);
+        }
+        resultTable.append(head, tableBody);
+    }
+    function renderMarkupResult(action, text) {
+        resultMarkupCode.replaceChildren();
+        if (action === 'to-xml') {
+            for (const token of text.match(/<[^>]+>|[^<]+/g) ?? []) {
+                const className = token.startsWith('<') ? 'omni-json__result-tag' : 'omni-json__result-value';
+                resultMarkupCode.appendChild(el('span', className, token));
+            }
+            return;
+        }
+        for (const line of text.split('\n')) {
+            const match = /^(\s*(?:-\s*)?[^:#\n]+:)(.*)$/.exec(line);
+            if (match) {
+                resultMarkupCode.append(el('span', 'omni-json__result-key', match[1]), el('span', 'omni-json__result-value', match[2]));
+            }
+            else {
+                resultMarkupCode.appendChild(document.createTextNode(line));
+            }
+            resultMarkupCode.appendChild(document.createTextNode('\n'));
+        }
+    }
+    function renderSource(state) {
+        if (!editing)
+            editor.value = controller.verbatimText();
+        renderHighlightedJson(editorCode, controller.verbatimText(), state.search);
+        if (body.firstChild !== sourceWorkspace)
+            body.replaceChildren(sourceWorkspace);
+    }
+    function render(state) {
+        treeBtn.setAttribute('aria-pressed', String(state.viewMode === 'tree'));
+        treeBtn.textContent = t(state.viewMode === 'tree' ? 'json.view.source' : 'json.view.tree');
+        const treeMode = state.viewMode === 'tree';
+        expandBtn.style.display = treeMode ? '' : 'none';
+        collapseBtn.style.display = treeMode ? '' : 'none';
+        formSelect.style.display = 'none';
+        if (formSelect.value !== state.sourceForm)
+            formSelect.value = state.sourceForm;
+        if (searchInput.value !== state.search)
+            searchInput.value = state.search;
+        matchInfo.textContent = state.search
+            ? state.matchCount
+                ? t('json.matchInfo', {
+                    current: state.currentMatch + 1,
+                    total: state.matchCount
+                })
+                : t('json.noMatches')
+            : '';
+        for (const btn of toolButtons)
+            btn.disabled = false;
+        meta.textContent = state.statistics
+            ? t('json.stats', {
+                total: state.statistics.total,
+                depth: state.statistics.maxDepth
+            })
+            : '';
+        const statusText = state.statusMessage
+            ? t(state.statusMessage.key, state.statusMessage.args)
+            : saveNotice ?? '';
+        statusBar.style.display = statusText ? '' : 'none';
+        statusBar.textContent = statusText;
+        diagnosticsBar.replaceChildren();
+        const hasNotices = state.diagnostics.length > 0 || state.failure !== null;
+        diagnosticsBar.style.display = hasNotices ? '' : 'none';
+        if (state.failure) {
+            diagnosticsBar.appendChild(el('div', 'omni-json__diag-error', t(state.failure.messageKey, state.failure.args)));
+        }
+        for (const diag of state.diagnostics) {
+            diagnosticsBar.appendChild(el('div', undefined, t(diag.messageKey, diag.args)));
+        }
+        renderSource(state);
+        if (treeMode && state.root) {
+            const ul = el('ul', 'omni-json__tree');
+            const currentId = state.currentMatch >= 0 ? controller.matches[state.currentMatch] : undefined;
+            ul.appendChild(renderNode(state.root, state, currentId));
+            previewContent.replaceChildren(ul);
+        }
+        else {
+            renderHighlightedJson(previewCode, controller.verbatimText(), state.search);
+            if (previewContent.firstChild !== preview)
+                previewContent.replaceChildren(preview);
+        }
+        if (state.toolResult) {
+            resultPanel.style.display = '';
+            resultTitle.textContent = state.toolResult.error
+                ? t(state.toolResult.error.key, state.toolResult.error.args)
+                : t(state.toolResult.titleKey);
+            resultOutput.value = state.toolResult.output;
+            const isCsv = state.toolResult.action === 'to-csv' && !state.toolResult.error;
+            const isMarkup = !state.toolResult.error
+                && (state.toolResult.action === 'to-xml' || state.toolResult.action === 'to-yaml');
+            resultOutput.style.display = isCsv || isMarkup ? 'none' : '';
+            resultMarkup.style.display = isMarkup ? '' : 'none';
+            resultTableWrap.style.display = isCsv ? '' : 'none';
+            if (isCsv)
+                renderCsvResult(state.toolResult.output);
+            if (isMarkup)
+                renderMarkupResult(state.toolResult.action, state.toolResult.output);
+            copyResultBtn.disabled = !clipboard || !!state.toolResult.error;
+        }
+        else {
+            resultPanel.style.display = 'none';
+        }
+    }
+    const unsubscribe = controller.subscribe(render);
+    render(controller.state);
+    if (options.signal?.aborted) {
+        cleanup();
+        throw new MountAbortedError();
+    }
+    function cleanup() {
+        unsubscribe();
+        for (const dispose of disposers)
+            dispose();
+        disposers.length = 0;
+        if (root instanceof ShadowRoot) {
+            root.replaceChildren();
+        }
+        else {
+            root.replaceChildren();
+            root.classList.remove(VIEWER_ROOT_CLASS, 'omni-viewer--json');
+        }
+    }
+    return { dispose: cleanup };
+}

package/dist/viewers/json/styles.d.ts

@@ -0,0 +1 @@
+export declare const jsonViewerCss = "\n/* Reverse-contamination guard (DESIGN.md \u00A76): neutralize host global element\n   styles in 'scoped' mode; harmless in shadow mode. Custom properties are\n   exempt from 'all', so --omni-* theme tokens still pierce. */\n.omni-viewer--json {\n    all: initial;\n}\n.omni-viewer--json :where(button, select, option, input, label, textarea,\n    pre, code, ul, li, span, div) {\n    all: revert;\n}\n\n:host, .omni-viewer--json {\n    display: block;\n    height: 100%;\n    box-sizing: border-box;\n    color: var(--omni-fg, #d4d4d4);\n    background: var(--omni-bg, #1e1e1e);\n    font-family: var(--omni-font, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);\n    font-size: var(--omni-font-size, 13px);\n}\n.omni-json {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    box-sizing: border-box;\n}\n.omni-json__toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n    padding: 6px;\n    border-bottom: 1px solid var(--omni-border, #333);\n}\n.omni-json__toolbar button,\n.omni-json__toolbar select {\n    background: var(--omni-button-bg, #2d2d2d);\n    color: inherit;\n    border: 1px solid var(--omni-border, #333);\n    border-radius: 3px;\n    padding: 3px 8px;\n    cursor: pointer;\n    font: inherit;\n}\n.omni-json__toolbar button[aria-pressed=\"true\"] {\n    background: var(--omni-accent, #0e639c);\n    color: #fff;\n}\n.omni-json__toolbar button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n.omni-json__tool-group {\n    margin-left: auto;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 6px;\n}\n.omni-json__save-actions {\n    display: inline-flex;\n    gap: 6px;\n}\n.omni-json__search {\n    background: var(--omni-input-bg, #3c3c3c);\n    color: inherit;\n    border: 1px solid var(--omni-border, #333);\n    border-radius: 3px;\n    padding: 3px 6px;\n    font: inherit;\n}\n.omni-json__meta,\n.omni-json__matchinfo,\n.omni-json__status {\n    color: var(--omni-fg-muted, #999);\n    padding: 0 6px;\n    white-space: nowrap;\n}\n.omni-json__status {\n    padding: 4px 8px;\n    border-bottom: 1px solid var(--omni-border, #333);\n}\n.omni-json__diagnostics {\n    padding: 4px 8px;\n    border-bottom: 1px solid var(--omni-border, #333);\n}\n.omni-json__diag-error {\n    color: var(--omni-error, #f48771);\n}\n.omni-json__body {\n    flex: 1 1 auto;\n    overflow: hidden;\n    padding: 12px;\n    min-height: 0;\n}\n.omni-json__source-workspace {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n    gap: 12px;\n    height: 100%;\n    min-height: 360px;\n}\n.omni-json__pane {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    border: 1px solid var(--omni-border, #333);\n    border-radius: 10px;\n    background: var(--omni-input-bg, #1e1e1e);\n}\n.omni-json__pane-header {\n    display: flex;\n    justify-content: space-between;\n    gap: 12px;\n    align-items: center;\n    padding: 12px 14px;\n    border-bottom: 1px solid var(--omni-border, #333);\n    font-family: var(--omni-font-mono, ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n    font-size: 1.05em;\n}\n.omni-json__pane-header span {\n    color: var(--omni-fg-muted, #999);\n    text-align: right;\n}\n.omni-json__pane-header button {\n    margin-left: auto;\n    background: var(--omni-button-bg, #2d2d2d);\n    color: inherit;\n    border: 1px solid var(--omni-border, #333);\n    border-radius: 3px;\n    padding: 3px 8px;\n    cursor: pointer;\n    font: inherit;\n}\n.omni-json__pane-header button[aria-pressed=\"true\"] {\n    background: var(--omni-accent, #0e639c);\n    color: #fff;\n}\n.omni-json__editor-surface,\n.omni-json__preview-content {\n    position: relative;\n    flex: 1 1 auto;\n    min-height: 0;\n}\n.omni-json__editor-surface {\n    overflow: hidden;\n}\n.omni-json__preview-content {\n    overflow: auto;\n}\n.omni-json__source {\n    margin: 0;\n    white-space: pre;\n    font-family: var(--omni-font-mono, ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n    overflow: auto;\n    padding: 28px;\n    flex: 1 1 auto;\n}\n.omni-json__editor {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    resize: none;\n    background: transparent;\n    color: transparent;\n    -webkit-text-fill-color: transparent;\n    caret-color: var(--omni-fg, #d4d4d4);\n    border: none;\n    outline: none;\n    padding: 28px;\n    font-family: var(--omni-font-mono, ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n    font-size: inherit;\n    line-height: 1.5;\n}\n.omni-json__editor-highlight {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    min-width: 100%;\n    margin: 0;\n    padding: 28px;\n    white-space: pre;\n    overflow: hidden;\n    pointer-events: none;\n    font-family: var(--omni-font-mono, ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n    font-size: inherit;\n    line-height: 1.5;\n}\n.omni-json__tree,\n.omni-json__tree ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    font-family: var(--omni-font-mono, ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n}\n.omni-json__tree ul {\n    padding-left: 16px;\n}\n.omni-json__row {\n    display: flex;\n    align-items: baseline;\n    gap: 6px;\n    padding: 1px 0;\n}\n.omni-json__row.is-matched {\n    background: var(--omni-match-bg, rgba(255, 214, 0, 0.25));\n}\n.omni-json__row.is-current {\n    outline: 1px solid var(--omni-accent, #0e639c);\n}\n.omni-json__toggle {\n    cursor: pointer;\n    width: 1.2em;\n    box-sizing: border-box;\n    user-select: none;\n    color: var(--omni-fg-muted, #999);\n    background: none;\n    border: none;\n    padding: 0;\n    font: inherit;\n    text-align: left;\n}\n.omni-json__toggle:focus-visible {\n    outline: 1px solid var(--omni-accent, #0e639c);\n}\n.omni-json__key { color: var(--omni-json-key, #9cdcfe); }\n.omni-json__type { color: var(--omni-fg-muted, #808080); font-size: 0.85em; }\n.omni-json__val-string { color: var(--omni-json-string, #ce9178); }\n.omni-json__val-number { color: var(--omni-json-number, #b5cea8); }\n.omni-json__val-boolean { color: var(--omni-json-boolean, #569cd6); }\n.omni-json__val-null { color: var(--omni-json-null, #569cd6); }\n/* Kept in layout (not display:none) so the copy buttons stay in the tab order\n   for keyboard users; revealed on hover or when a child is focused (P2b). */\n.omni-json__node-actions {\n    display: inline-flex;\n    gap: 2px;\n    opacity: 0;\n}\n.omni-json__row:hover .omni-json__node-actions,\n.omni-json__row:focus-within .omni-json__node-actions {\n    opacity: 1;\n}\n.omni-json__result {\n    border-top: 1px solid var(--omni-border, #333);\n    padding: 10px 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    min-height: 220px;\n    max-height: 40%;\n    overflow: hidden;\n}\n.omni-json__result-output {\n    width: 100%;\n    min-height: 120px;\n    box-sizing: border-box;\n    background: var(--omni-input-bg, #1e1e1e);\n    color: inherit;\n    border: 1px solid var(--omni-border, #333);\n    font-family: var(--omni-font-mono, ui-monospace, Menlo, monospace);\n    font-size: inherit;\n}\n.omni-json__result-markup {\n    width: 100%;\n    min-height: 120px;\n    box-sizing: border-box;\n    margin: 0;\n    padding: 8px;\n    overflow: auto;\n    background: var(--omni-input-bg, #1e1e1e);\n    border: 1px solid var(--omni-border, #333);\n    font-family: var(--omni-font-mono, ui-monospace, Menlo, monospace);\n    font-size: inherit;\n    white-space: pre-wrap;\n}\n.omni-json__result-tag { color: #569cd6; }\n.omni-json__result-key { color: #9cdcfe; }\n.omni-json__result-value { color: #ce9178; }\n.omni-json__result-table-wrap {\n    flex: 1 1 auto;\n    min-height: 160px;\n    overflow: auto;\n    border: 1px solid var(--omni-border, #333);\n}\n.omni-json__result-table {\n    border-collapse: collapse;\n    width: max-content;\n    min-width: 100%;\n    font-family: var(--omni-font-mono, ui-monospace, Menlo, monospace);\n}\n.omni-json__result-table th,\n.omni-json__result-table td {\n    padding: 6px 10px;\n    border-right: 1px solid var(--omni-border, #333);\n    border-bottom: 1px solid var(--omni-border, #333);\n    text-align: left;\n    white-space: pre-wrap;\n    vertical-align: top;\n}\n.omni-json__result-table th {\n    position: sticky;\n    top: 0;\n    background: var(--omni-button-bg, #2d2d2d);\n}\n.omni-json__result-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n.omni-json__result-actions button {\n    background: var(--omni-button-bg, #2d2d2d);\n    color: inherit;\n    border: 1px solid var(--omni-border, #333);\n    border-radius: 3px;\n    padding: 3px 8px;\n    cursor: pointer;\n    font: inherit;\n}\n.jv-tok-key { color: var(--omni-json-key, #9cdcfe); }\n.jv-tok-string { color: var(--omni-json-string, #ce9178); }\n.jv-tok-number { color: var(--omni-json-number, #b5cea8); }\n.jv-tok-bool { color: var(--omni-json-boolean, #569cd6); }\n.jv-tok-null { color: var(--omni-json-null, #569cd6); }\n.jv-tok-unknown { color: var(--omni-error, #f48771); }\n.omni-json__search-hit {\n    color: inherit;\n    background: var(--omni-match-bg, rgba(255, 214, 0, 0.35));\n    border-radius: 2px;\n    padding: 0;\n}\n@media (max-width: 760px) {\n    .omni-json__source-workspace {\n        grid-template-columns: 1fr;\n        height: auto;\n    }\n    .omni-json__pane {\n        min-height: 320px;\n    }\n}\n";