@visual-json/vue 0.3.0

package/README.md

@@ -0,0 +1,222 @@
+# @visual-json/vue
+
+Vue 3 UI components for [visual-json](https://github.com/vercel-labs/visual-json) — the visual JSON editor. Schema-aware, embeddable, extensible.
+
+Tree view, form view, diff view, search, breadcrumbs, and more — all themeable via CSS custom properties.
+
+## Install
+
+```bash
+npm install @visual-json/vue @visual-json/core
+```
+
+**Peer dependency:** Vue 3.3 or later.
+
+## Quick start
+
+`JsonEditor` is the batteries-included component — it bundles a tree sidebar, form editor, search bar, and keyboard navigation.
+
+```vue
+<script setup>
+import { ref } from "vue";
+import { JsonEditor } from "@visual-json/vue";
+
+const value = ref({ hello: "world" });
+</script>
+
+<template>
+  <JsonEditor :value="value" @change="value = $event" />
+</template>
+```
+
+### Props
+
+<table>
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>value</code></td>
+      <td><code>JsonValue</code></td>
+      <td>Controlled JSON value</td>
+    </tr>
+    <tr>
+      <td><code>defaultValue</code></td>
+      <td><code>JsonValue</code></td>
+      <td>Uncontrolled initial value</td>
+    </tr>
+    <tr>
+      <td><code>schema</code></td>
+      <td><code>JsonSchema | null</code></td>
+      <td>Optional JSON Schema for validation and hints</td>
+    </tr>
+    <tr>
+      <td><code>readOnly</code></td>
+      <td><code>boolean</code></td>
+      <td>Disable editing</td>
+    </tr>
+    <tr>
+      <td><code>sidebarOpen</code></td>
+      <td><code>boolean</code></td>
+      <td>Show/hide tree sidebar</td>
+    </tr>
+    <tr>
+      <td><code>treeShowValues</code></td>
+      <td><code>boolean</code></td>
+      <td>Display values in tree nodes</td>
+    </tr>
+    <tr>
+      <td><code>treeShowCounts</code></td>
+      <td><code>boolean</code></td>
+      <td>Display child counts in tree nodes</td>
+    </tr>
+    <tr>
+      <td><code>editorShowDescriptions</code></td>
+      <td><code>boolean</code></td>
+      <td>Show schema descriptions in the form</td>
+    </tr>
+    <tr>
+      <td><code>editorShowCounts</code></td>
+      <td><code>boolean</code></td>
+      <td>Show child counts in the form</td>
+    </tr>
+    <tr>
+      <td><code>height</code> / <code>width</code></td>
+      <td><code>string | number</code></td>
+      <td>Container dimensions</td>
+    </tr>
+    <tr>
+      <td><code>style</code></td>
+      <td><code>Record&lt;string, string&gt;</code></td>
+      <td>CSS custom property overrides</td>
+    </tr>
+  </tbody>
+</table>
+
+### Events
+
+<table>
+  <thead>
+    <tr>
+      <th>Event</th>
+      <th>Payload</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>change</code></td>
+      <td><code>JsonValue</code></td>
+      <td>Emitted when the data changes</td>
+    </tr>
+  </tbody>
+</table>
+
+## Composable API
+
+For full control, use the lower-level primitives:
+
+```vue
+<script setup>
+import { VisualJson, TreeView, FormView, SearchBar } from "@visual-json/vue";
+</script>
+
+<template>
+  <VisualJson :value="json" @change="onJsonChange">
+    <SearchBar />
+    <TreeView />
+    <FormView />
+  </VisualJson>
+</template>
+```
+
+### Components
+
+<table>
+  <thead>
+    <tr>
+      <th>Component</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>VisualJson</code></td>
+      <td>Provider — manages tree state, history, and search via <code>provide/inject</code></td>
+    </tr>
+    <tr>
+      <td><code>TreeView</code></td>
+      <td>Collapsible tree with drag-and-drop, keyboard nav, and context menu</td>
+    </tr>
+    <tr>
+      <td><code>FormView</code></td>
+      <td>Inline key/value editor with schema-aware inputs</td>
+    </tr>
+    <tr>
+      <td><code>DiffView</code></td>
+      <td>Side-by-side structural diff between two JSON values</td>
+    </tr>
+    <tr>
+      <td><code>SearchBar</code></td>
+      <td>Cmd+F search with match navigation</td>
+    </tr>
+    <tr>
+      <td><code>Breadcrumbs</code></td>
+      <td>Path breadcrumbs with typeahead navigation</td>
+    </tr>
+    <tr>
+      <td><code>ContextMenu</code></td>
+      <td>Right-click menu for tree operations (uses <code>&lt;Teleport&gt;</code>)</td>
+    </tr>
+  </tbody>
+</table>
+
+### Composables
+
+<table>
+  <thead>
+    <tr>
+      <th>Composable</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>useStudio()</code></td>
+      <td>Access <code>state</code> and <code>actions</code> from the nearest <code>VisualJson</code> provider</td>
+    </tr>
+    <tr>
+      <td><code>useDragDrop()</code></td>
+      <td>Drag-and-drop state and handlers for tree reordering</td>
+    </tr>
+  </tbody>
+</table>
+
+## Theming
+
+All components read CSS custom properties for colors, fonts, and spacing. Override them via the `style` prop or on a parent element:
+
+```vue
+<JsonEditor
+  :value="data"
+  :style="{
+    '--vj-bg': '#ffffff',
+    '--vj-text': '#111111',
+    '--vj-border': '#e5e5e5',
+    '--vj-accent': '#2563eb',
+    '--vj-font': '\'Fira Code\', monospace',
+  }"
+  @change="data = $event"
+/>
+```
+
+See the [default variable list](src/components/JsonEditor.vue) for all available tokens.
+
+## License
+
+Apache-2.0

package/dist/index.d.ts

@@ -0,0 +1,255 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
+import { DefineComponent } from 'vue';
+import { JsonSchema } from '@visual-json/core';
+import { JsonValue } from '@visual-json/core';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { SearchMatch } from '@visual-json/core';
+import { ShallowRef } from 'vue';
+import { TreeNode } from '@visual-json/core';
+import { TreeState } from '@visual-json/core';
+
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+change: (value: JsonValue) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+onChange?: ((value: JsonValue) => any) | undefined;
+}>, {
+schema: JsonSchema | null;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare type __VLS_Props = {
+    value: JsonValue;
+    schema?: JsonSchema | null;
+};
+
+declare type __VLS_Props_2 = {
+    value?: JsonValue;
+    defaultValue?: JsonValue;
+    onChange?: (value: JsonValue) => void;
+    schema?: JsonSchema | null;
+    height?: string | number;
+    width?: string | number;
+    class?: string;
+    style?: Record<string, string>;
+    readOnly?: boolean;
+    treeShowValues?: boolean;
+    treeShowCounts?: boolean;
+    editorShowDescriptions?: boolean;
+    editorShowCounts?: boolean;
+    sidebarOpen?: boolean;
+};
+
+declare type __VLS_Props_3 = {
+    class?: string;
+    showValues?: boolean;
+    showCounts?: boolean;
+};
+
+declare type __VLS_Props_4 = {
+    class?: string;
+    showDescriptions?: boolean;
+    showCounts?: boolean;
+};
+
+declare type __VLS_Props_5 = {
+    class?: string;
+};
+
+declare type __VLS_Props_6 = {
+    class?: string;
+};
+
+declare type __VLS_Props_7 = {
+    x: number;
+    y: number;
+    items: ContextMenuEntry[];
+};
+
+declare type __VLS_Props_8 = {
+    originalJson: unknown;
+    currentJson: unknown;
+    class?: string;
+};
+
+declare type __VLS_Props_9 = {
+    enumValues: JsonValue[];
+    value: string;
+    inputStyle?: Record<string, string>;
+};
+
+declare type __VLS_PublicProps = {
+    "inputRef"?: HTMLInputElement | null;
+} & __VLS_Props_9;
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const Breadcrumbs: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+wrapperRef: HTMLDivElement;
+inputRef: HTMLInputElement;
+listRef: HTMLDivElement;
+}, HTMLDivElement>;
+
+export declare const ContextMenu: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+close: () => any;
+}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{
+onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+menuRef: HTMLDivElement;
+}, any>;
+
+export declare type ContextMenuEntry = ContextMenuItem | ContextMenuSeparator;
+
+export declare interface ContextMenuItem {
+    label: string;
+    action: () => void;
+    disabled?: boolean;
+    separator?: false;
+}
+
+export declare interface ContextMenuSeparator {
+    separator: true;
+}
+
+export declare const DiffView: DefineComponent<__VLS_Props_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_8> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+export declare interface DragState {
+    draggedNodeIds: ReadonlySet<string>;
+    dropTargetNodeId: string | null;
+    dropPosition: "before" | "after" | null;
+}
+
+export declare const EnumInput: DefineComponent<__VLS_PublicProps, {
+focus: () => void | undefined;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+valueChange: (val: string) => any;
+"update:inputRef": (value: HTMLInputElement | null) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+onValueChange?: ((val: string) => any) | undefined;
+"onUpdate:inputRef"?: ((value: HTMLInputElement | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+wrapperRef: HTMLDivElement;
+localInputRef: HTMLInputElement;
+listRef: HTMLDivElement;
+}, HTMLDivElement>;
+
+export declare const FormView: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{}>, {
+showCounts: boolean;
+showDescriptions: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+containerRef: HTMLDivElement;
+}, HTMLDivElement>;
+
+/**
+ * For array items that are objects, returns a meaningful label derived from
+ * well-known child fields (name, type, title, id, label, key) instead of
+ * the numeric index.
+ */
+export declare function getDisplayKey(node: TreeNode, state: TreeState): string;
+
+export declare function getVisibleNodes(root: TreeNode, isExpanded: (nodeId: string) => boolean): TreeNode[];
+
+export declare const JsonEditor: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+change: (value: JsonValue) => any;
+}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{
+onChange?: ((value: JsonValue) => any) | undefined;
+}>, {
+schema: JsonSchema | null;
+width: string | number;
+height: string | number;
+readOnly: boolean;
+treeShowValues: boolean;
+treeShowCounts: boolean;
+editorShowDescriptions: boolean;
+editorShowCounts: boolean;
+sidebarOpen: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+containerRef: HTMLDivElement;
+}, HTMLDivElement>;
+
+export { JsonSchema }
+
+export { JsonValue }
+
+export declare const SearchBar: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+inputRef: HTMLInputElement;
+}, HTMLDivElement>;
+
+export declare interface StudioActions {
+    setTree: (tree: TreeState) => void;
+    selectNode: (nodeId: string | null) => void;
+    selectAndDrillDown: (nodeId: string | null) => void;
+    toggleNodeSelection: (nodeId: string) => void;
+    selectNodeRange: (toNodeId: string) => void;
+    setSelection: (focusedId: string | null, selectedIds: Set<string>, anchorId: string | null) => void;
+    setVisibleNodesOverride: (nodes: TreeNode[] | null) => void;
+    drillDown: (nodeId: string | null) => void;
+    toggleExpand: (nodeId: string) => void;
+    expandNode: (nodeId: string) => void;
+    collapseNode: (nodeId: string) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    undo: () => void;
+    redo: () => void;
+    setSearchQuery: (query: string) => void;
+    nextSearchMatch: () => void;
+    prevSearchMatch: () => void;
+}
+
+export declare interface StudioContextValue {
+    state: StudioState;
+    actions: StudioActions;
+}
+
+export declare interface StudioState {
+    tree: Ref<TreeState>;
+    focusedNodeId: Ref<string | null>;
+    selectedNodeIds: Ref<Set<string>>;
+    anchorNodeId: Ref<string | null>;
+    drillDownNodeId: Ref<string | null>;
+    expandedNodeIds: Ref<Set<string>>;
+    schema: Ref<JsonSchema | null>;
+    searchQuery: Ref<string>;
+    searchMatches: Ref<SearchMatch[]>;
+    searchMatchIndex: Ref<number>;
+    searchMatchNodeIds: ComputedRef<Set<string>>;
+    canUndo: ComputedRef<boolean>;
+    canRedo: ComputedRef<boolean>;
+}
+
+export declare const TreeView: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {
+showValues: boolean;
+showCounts: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+containerRef: HTMLDivElement;
+}, any>;
+
+export declare function useDragDrop(visibleNodes: Ref<TreeNode[]>, selectedNodeIds: Ref<ReadonlySet<string>>): {
+    dragState: ShallowRef<DragState, DragState>;
+    handleDragStart: (nodeId: string) => void;
+    handleDragOver: (nodeId: string, position: "before" | "after") => void;
+    handleDragEnd: () => void;
+    handleDrop: () => void;
+};
+
+export declare function useStudio(): StudioContextValue;
+
+export declare const VisualJson: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+export { }

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),V=require("@visual-json/core");function U(n,i){const t=[];function o(a){if(t.push(a),i(a.id)&&(a.type==="object"||a.type==="array"))for(const s of a.children)o(s)}return o(n),t}var ve=["name","type","title","id","label","key"];function L(n,i){if(n.parentId===null)return"/";const t=i.nodesById.get(n.parentId);if((t==null?void 0:t.type)!=="array"||n.type!=="object")return n.key;for(const o of ve){const a=n.children.find(s=>s.key===o);if((a==null?void 0:a.value)!=null&&a.value!=="")return String(a.value)}return n.key}function ee(n){const i=[n.id];for(const t of n.children)i.push(...ee(t));return i}var W={"--vj-bg":"#1e1e1e","--vj-bg-panel":"#252526","--vj-bg-hover":"#2a2d2e","--vj-bg-selected":"#2a5a1e","--vj-bg-selected-muted":"#2a2d2e","--vj-bg-match":"#3a3520","--vj-bg-match-active":"#51502b","--vj-border":"#333333","--vj-border-subtle":"#2a2a2a","--vj-text":"#cccccc","--vj-text-muted":"#888888","--vj-text-dim":"#666666","--vj-text-dimmer":"#555555","--vj-string":"#ce9178","--vj-number":"#b5cea8","--vj-boolean":"#569cd6","--vj-accent":"#007acc","--vj-accent-muted":"#094771","--vj-input-bg":"#3c3c3c","--vj-input-border":"#555555","--vj-error":"#f48771","--vj-font":"monospace","--vj-input-font-size":"13px"},fe=Object.freeze(new Set),q=()=>({draggedNodeIds:fe,dropTargetNodeId:null,dropPosition:null});function pe(n,i){const t=[];function o(a){i.has(a.id)&&t.push(a.id);for(const s of a.children)o(s)}return o(n),t}function me(n,i){const{draggedNodeIds:t,dropTargetNodeId:o,dropPosition:a}=i;if(t.size===0||!o||!a)return null;const s=n.nodesById.get(o);if(!s||!s.parentId)return null;for(const r of t)if(V.isDescendant(n,o,r))return null;const d=s.parentId,l=n.nodesById.get(d);if(!l)return null;const m=l.children.filter(r=>t.has(r.id)).map(r=>r.id);if(m.length===t.size&&[...t].every(r=>{const f=n.nodesById.get(r);return(f==null?void 0:f.parentId)===d}))return V.reorderChildrenMulti(n,d,m,o,a);const g=pe(n.root,t),N=g.map(r=>n.nodesById.get(r)).filter(r=>!!r&&r.parentId!==null).map(r=>structuredClone(r));let B=n;for(const r of[...g].reverse())B.nodesById.has(r)&&(B=V.removeNode(B,r));const M=B.nodesById.get(o);if(!M||!M.parentId)return null;const v=B.nodesById.get(M.parentId);if(!v)return null;let D=v.children.findIndex(r=>r.id===o);a==="after"&&D++;for(let r=0;r<N.length;r++)B=V.insertNode(B,v.id,N[r],D+r);return B}function te(n,i,t){const o=document.createElement("div");o.textContent=`${i} selected`;const a=document.querySelector("[data-form-container], [role='tree']"),s=a?getComputedStyle(a):null,d=(s==null?void 0:s.getPropertyValue("--vj-bg-selected").trim())||W["--vj-bg-selected"],l=(s==null?void 0:s.getPropertyValue("--vj-text-selected").trim())||(s==null?void 0:s.getPropertyValue("--vj-text").trim())||W["--vj-text"],c=(s==null?void 0:s.getPropertyValue("--vj-font").trim())||W["--vj-font"];o.style.cssText=["position:fixed","top:-1000px","left:-1000px","padding:4px 12px",`background:${d}`,`color:${l}`,`font-family:${c}`,"font-size:13px","border-radius:4px","white-space:nowrap","pointer-events:none"].join(";"),document.body.appendChild(o),n.setDragImage(o,0,14),requestAnimationFrame(()=>o.remove())}var he={added:{bg:"#1e3a1e",marker:"+",label:"#4ec94e"},removed:{bg:"#3a1e1e",marker:"-",label:"#f48771"},changed:{bg:"#3a3a1e",marker:"~",label:"#dcdcaa"}};function H(n){if(n===void 0)return"";if(n===null)return"null";if(typeof n=="string")return JSON.stringify(n);if(typeof n=="object"){const i=JSON.stringify(n,null,2);return i.length>80?JSON.stringify(n).slice(0,77)+"...":i}return String(n)}function ne(n,i,t){if(!n)return;const o=V.getPropertySchema(n,t,i);if(o)return V.resolveRef(o,i??n)}function ge(n){return n.type==="boolean"||n.type==="null"?"var(--vj-boolean, #569cd6)":n.type==="number"?"var(--vj-number, #b5cea8)":"var(--vj-string, #ce9178)"}function ye(n){return n.type==="null"?"null":n.type==="boolean"?String(n.value):n.value===null||n.value===void 0?"":String(n.value)}function xe(n,i,t){var s;if(!i||!n.parentId)return!1;const o=n.path.split("/").slice(0,-1).join("/")||"/",a=ne(i,t,o);return((s=a==null?void 0:a.required)==null?void 0:s.includes(n.key))??!1}function ke(n,i,t){const o=Array.isArray(i)?i[0]:i;if(o==="boolean"||n==="true"||n==="false")return n==="true";if(n==="null")return null;if(o==="number"||o==="integer"||t==="number"){const a=Number(n);return isNaN(a)?n:a}return n}const oe=Symbol("StudioContext");function le(n,i,t){if(!i)return null;let o=n.nodesById.get(i);if(!o)return null;for(;o;){const a=o.parentId?n.nodesById.get(o.parentId):void 0,s=a?a.children:[n.root],d=new Set(s.map(c=>c.id));if(!s.every(c=>t.has(c.id))||!a||!a.parentId)return d;o=a}return null}function we(n,i,t){const o=n.findIndex(c=>c.id===i),a=n.findIndex(c=>c.id===t);if(o===-1||a===-1)return null;const s=Math.min(o,a),d=Math.max(o,a),l=new Set;for(let c=s;c<=d;c++)l.add(n[c].id);return l}function Q(n,i,t){const o=[...i].filter(l=>{const c=n.nodesById.get(l);if(!c||c.parentId===null)return!1;let m=n.nodesById.get(c.parentId);for(;m;){if(i.has(m.id))return!1;m=m.parentId?n.nodesById.get(m.parentId):void 0}return!0});if(o.length===0)return{newTree:n,nextFocusId:null};const a=t.findIndex(l=>i.has(l.id));let s=n;for(const l of o)s.nodesById.has(l)&&(s=V.removeNode(s,l));let d=null;for(let l=a;l<t.length;l++){const c=t[l].id;if(!i.has(c)&&s.nodesById.has(c)){d=c;break}}if(!d)for(let l=a-1;l>=0;l--){const c=t[l].id;if(!i.has(c)&&s.nodesById.has(c)){d=c;break}}return{newTree:s,nextFocusId:d}}const ae=e.defineComponent({__name:"VisualJson",props:{value:{type:[String,Number,Boolean,null,Array,Object]},schema:{default:null}},emits:["change"],setup(n,{emit:i}){const t=n,o=i,a=e.shallowRef(V.fromJson(t.value)),s=e.shallowRef(null),d=e.shallowRef(new Set),l=e.shallowRef(null),c=e.shallowRef(null),m=e.shallowRef(new Set([a.value.root.id])),p=e.computed(()=>U(a.value.root,u=>m.value.has(u)));let g=null,N=new V.History;const B=e.shallowRef(0),M=e.computed(()=>(B.value,N.canUndo)),v=e.computed(()=>(B.value,N.canRedo)),D=e.shallowRef(""),r=e.shallowRef([]),f=e.shallowRef(0),k=e.computed(()=>new Set(r.value.map(u=>u.nodeId)));let y=!1;N.push(a.value);function h(u){s.value=u,d.value=u?new Set([u]):new Set,l.value=u,c.value=u}e.watch(()=>t.value,u=>{if(y){y=!1;return}const b=V.fromJson(u);a.value=b,m.value=new Set([b.root.id]),h(null),N=new V.History,N.push(b),B.value++,D.value="",r.value=[],f.value=0},{flush:"sync"}),e.watch(a,u=>{if(!D.value.trim())return;const b=V.searchNodes(u,D.value);r.value=b,f.value=Math.min(f.value,Math.max(b.length-1,0))},{flush:"sync"});function E(u){a.value=u,N.push(u),B.value++,y=!0,o("change",V.toJson(u.root))}function C(){const u=N.undo();u&&(a.value=u,B.value++,y=!0,o("change",V.toJson(u.root)))}function $(){const u=N.redo();u&&(a.value=u,B.value++,y=!0,o("change",V.toJson(u.root)))}function O(u){const b=u.metaKey||u.ctrlKey;b&&u.key==="z"&&!u.shiftKey?(u.preventDefault(),C()):(b&&u.key==="z"&&u.shiftKey||b&&u.key==="y")&&(u.preventDefault(),$())}e.onMounted(()=>document.addEventListener("keydown",O)),e.onUnmounted(()=>document.removeEventListener("keydown",O));const w={tree:a,focusedNodeId:s,selectedNodeIds:d,anchorNodeId:l,drillDownNodeId:c,expandedNodeIds:m,schema:e.computed(()=>t.schema??null),searchQuery:D,searchMatches:r,searchMatchIndex:f,searchMatchNodeIds:k,canUndo:M,canRedo:v},j={setTree:E,selectNode(u){s.value=u,d.value=u?new Set([u]):new Set,l.value=u},selectAndDrillDown:h,toggleNodeSelection(u){const b=new Set(d.value);b.has(u)?b.delete(u):b.add(u),d.value=b,b.size===0?(s.value=null,l.value=null):(s.value=u,l.value=u)},selectNodeRange(u){const b=g??p.value,S=l.value;if(!S){s.value=u,d.value=new Set([u]),l.value=u;return}const R=we(b,S,u);if(!R){s.value=u,d.value=new Set([u]),l.value=u;return}d.value=R,s.value=u},setSelection(u,b,S){s.value=u,d.value=b,l.value=S},setVisibleNodesOverride(u){g=u},drillDown(u){c.value=u},toggleExpand(u){const b=new Set(m.value);b.has(u)?b.delete(u):b.add(u),m.value=b},expandNode(u){const b=new Set(m.value);b.add(u),m.value=b},collapseNode(u){const b=new Set(m.value);b.delete(u),m.value=b},expandAll(){m.value=new Set(ee(a.value.root))},collapseAll(){m.value=new Set([a.value.root.id])},undo:C,redo:$,setSearchQuery(u){if(D.value=u,!u.trim()){r.value=[],f.value=0;return}const b=V.searchNodes(a.value,u);if(r.value=b,f.value=0,b.length>0){const S=V.getAncestorIds(a.value,b.map(z=>z.nodeId)),R=new Set(m.value);for(const z of S)R.add(z);m.value=R,h(b[0].nodeId)}},nextSearchMatch(){if(r.value.length===0)return;const u=(f.value+1)%r.value.length;f.value=u,h(r.value[u].nodeId)},prevSearchMatch(){if(r.value.length===0)return;const u=(f.value-1+r.value.length)%r.value.length;f.value=u,h(r.value[u].nodeId)}};return e.provide(oe,{state:w,actions:j}),(u,b)=>e.renderSlot(u.$slots,"default")}});function F(){const n=e.inject(oe);if(!n)throw new Error("useStudio must be used within a <VisualJson> provider");return n}function Z(n,i){const{state:t,actions:o}=F(),a=e.shallowRef(q());function s(p){let g;i.value.size>0&&i.value.has(p)?g=i.value:g=new Set([p]),a.value={draggedNodeIds:g,dropTargetNodeId:null,dropPosition:null}}function d(p,g){const N=a.value.draggedNodeIds;for(const B of N)if(p===B||V.isDescendant(t.tree.value,p,B))return;a.value={...a.value,dropTargetNodeId:p,dropPosition:g}}function l(p,g){if(g==="before"){const N=n.value.findIndex(B=>B.id===p);if(N>0){d(n.value[N-1].id,"after");return}}d(p,g)}function c(){a.value=q()}function m(){const p=me(t.tree.value,a.value);p&&o.setTree(p),a.value=q()}return{dragState:a,handleDragStart:s,handleDragOver:l,handleDragEnd:c,handleDrop:m}}const be=["aria-selected","aria-expanded","draggable","data-node-id"],Se=["aria-label"],Ne={key:1,style:{width:"16px",flexShrink:0}},re=e.defineComponent({__name:"TreeNodeRow",props:{node:{},depth:{},dragState:{},showValues:{type:Boolean},showCounts:{type:Boolean},isFocused:{type:Boolean}},emits:["dragStart","dragOver","dragEnd","drop","contextMenu","selectRange"],setup(n,{emit:i}){const t=n,o=i,{state:a,actions:s}=F(),d=e.shallowRef(!1);function l(){return a.selectedNodeIds.value.has(t.node.id)}function c(){return a.expandedNodeIds.value.has(t.node.id)}const m=t.node.type==="object"||t.node.type==="array",p=t.node.parentId===null;function g(){return a.searchMatchNodeIds.value.has(t.node.id)}function N(){var y;return a.searchMatches.value.length>0&&((y=a.searchMatches.value[a.searchMatchIndex.value])==null?void 0:y.nodeId)===t.node.id}function B(){return m?t.node.type==="array"?`[${t.node.children.length}]`:`{${t.node.children.length}}`:t.node.value===null?"null":typeof t.node.value=="string"?t.node.value:String(t.node.value)}function M(y){y.preventDefault();const h=y.currentTarget.getBoundingClientRect(),E=h.top+h.height/2,C=y.clientY<E?"before":"after";o("dragOver",t.node.id,C)}function v(){return t.dragState.dropTargetNodeId===t.node.id&&t.dragState.dropPosition==="before"?"var(--vj-accent, #007acc)":"transparent"}function D(){return t.dragState.dropTargetNodeId===t.node.id&&t.dragState.dropPosition==="after"?"var(--vj-accent, #007acc)":"transparent"}function r(){const y=l(),h=N(),E=g(),C=d.value;return y?t.isFocused?"var(--vj-bg-selected, #2a5a1e)":"var(--vj-bg-selected-muted, var(--vj-bg-hover, #2a2d2e))":h?"var(--vj-bg-match-active, #51502b)":E?"var(--vj-bg-match, #3a3520)":C?"var(--vj-bg-hover, #2a2d2e)":"transparent"}function f(y){y.shiftKey?o("selectRange",t.node.id):y.metaKey||y.ctrlKey?s.toggleNodeSelection(t.node.id):s.selectAndDrillDown(t.node.id)}function k(y){y.dataTransfer.effectAllowed="move",a.selectedNodeIds.value.size>1&&a.selectedNodeIds.value.has(t.node.id)&&te(y.dataTransfer,a.selectedNodeIds.value.size),o("dragStart",t.node.id)}return(y,h)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{role:"treeitem","aria-selected":l(),"aria-expanded":e.unref(m)?c():void 0,draggable:!p,"data-node-id":n.node.id,style:e.normalizeStyle({display:"flex",alignItems:"center",gap:"6px",padding:"1px 8px",paddingLeft:8+n.depth*16+"px",cursor:"pointer",backgroundColor:r(),minHeight:"28px",userSelect:"none",opacity:n.dragState.draggedNodeIds.has(n.node.id)?.4:1,borderTop:`2px solid ${v()}`,borderBottom:`2px solid ${D()}`,boxSizing:"border-box",color:l()&&n.isFocused?"var(--vj-text-selected, var(--vj-text, #cccccc))":"var(--vj-text, #cccccc)"}),onClick:f,onMouseenter:h[1]||(h[1]=()=>d.value=!0),onMouseleave:h[2]||(h[2]=()=>d.value=!1),onContextmenu:h[3]||(h[3]=E=>o("contextMenu",E,n.node)),onDragstart:k,onDragover:M,onDragend:h[4]||(h[4]=()=>o("dragEnd")),onDrop:h[5]||(h[5]=e.withModifiers(()=>o("drop"),["prevent"]))},[e.unref(m)?(e.openBlock(),e.createElementBlock("button",{key:0,"aria-label":c()?"Collapse":"Expand",style:e.normalizeStyle({background:"none",border:"none",color:"inherit",cursor:"pointer",padding:0,width:"16px",fontSize:"9px",flexShrink:0,display:"inline-flex",alignItems:"center",justifyContent:"center",transition:"transform 0.15s",transform:c()?"rotate(90deg)":"rotate(0deg)"}),onClick:h[0]||(h[0]=e.withModifiers(()=>e.unref(s).toggleExpand(n.node.id),["stop"]))}," ▶ ",12,Se)):(e.openBlock(),e.createElementBlock("span",Ne)),e.createElementVNode("span",{style:e.normalizeStyle({color:"inherit",fontSize:"13px",fontFamily:"var(--vj-font, monospace)",flexShrink:0,fontWeight:p?600:400})},e.toDisplayString(p?"/":e.unref(L)(n.node,e.unref(a).tree.value)),5),!p&&e.unref(m)&&n.showCounts?(e.openBlock(),e.createElementBlock("span",{key:2,style:e.normalizeStyle({color:l()?"inherit":"var(--vj-text-muted, #888888)",fontSize:"13px",fontFamily:"var(--vj-font, monospace)",whiteSpace:"nowrap",marginLeft:"auto"})},e.toDisplayString(B()),5)):e.createCommentVNode("",!0),!p&&!e.unref(m)&&n.showValues?(e.openBlock(),e.createElementBlock("span",{key:3,style:e.normalizeStyle({color:n.node.type==="string"?"var(--vj-string, #ce9178)":"var(--vj-number, #b5cea8)",fontSize:"13px",fontFamily:"var(--vj-font, monospace)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginLeft:"auto"})},e.toDisplayString(B()),5)):e.createCommentVNode("",!0)],44,be),c()?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(n.node.children,E=>(e.openBlock(),e.createBlock(re,{key:E.id,node:E,depth:n.depth+1,"drag-state":n.dragState,"show-values":n.showValues,"show-counts":n.showCounts,"is-focused":n.isFocused,onDragStart:h[6]||(h[6]=C=>o("dragStart",C)),onDragOver:h[7]||(h[7]=(C,$)=>o("dragOver",C,$)),onDragEnd:h[8]||(h[8]=()=>o("dragEnd")),onDrop:h[9]||(h[9]=()=>o("drop")),onContextMenu:h[10]||(h[10]=(C,$)=>o("contextMenu",C,$)),onSelectRange:h[11]||(h[11]=C=>o("selectRange",C))},null,8,["node","depth","drag-state","show-values","show-counts","is-focused"]))),128)):e.createCommentVNode("",!0)],64))}}),De={key:0,style:{height:"1px",backgroundColor:"var(--vj-border, #454545)",margin:"4px 0"}},Be=["disabled","onClick","onMouseenter"],ie=e.defineComponent({__name:"ContextMenu",props:{x:{},y:{},items:{}},emits:["close"],setup(n,{emit:i}){const t=n,o=i,a=e.shallowRef(null),s=e.shallowRef({left:t.x,top:t.y});e.watch(()=>[t.x,t.y],async()=>{if(await e.nextTick(),!a.value)return;const c=a.value.getBoundingClientRect(),m=window.innerWidth,p=window.innerHeight;s.value={left:c.right>m?Math.max(0,t.x-c.width):t.x,top:c.bottom>p?Math.max(0,t.y-c.height):t.y}},{immediate:!0});function d(c){a.value&&!a.value.contains(c.target)&&o("close")}function l(c){c.key==="Escape"&&o("close")}return e.onMounted(async()=>{if(await e.nextTick(),a.value){const c=a.value.getBoundingClientRect(),m=window.innerWidth,p=window.innerHeight;s.value={left:c.right>m?Math.max(0,t.x-c.width):t.x,top:c.bottom>p?Math.max(0,t.y-c.height):t.y}}document.addEventListener("mousedown",d),document.addEventListener("keydown",l)}),e.onUnmounted(()=>{document.removeEventListener("mousedown",d),document.removeEventListener("keydown",l)}),(c,m)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",{ref_key:"menuRef",ref:a,style:e.normalizeStyle({position:"fixed",left:s.value.left+"px",top:s.value.top+"px",zIndex:1e4,backgroundColor:"var(--vj-bg-panel, #252526)",border:"1px solid var(--vj-border, #454545)",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0,0,0,0.5)",padding:"4px 0",minWidth:"160px"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.items,(p,g)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:g},["separator"in p&&p.separator?(e.openBlock(),e.createElementBlock("div",De)):"label"in p?(e.openBlock(),e.createElementBlock("button",{key:1,disabled:p.disabled,style:e.normalizeStyle({display:"block",width:"100%",textAlign:"left",background:"none",border:"none",color:p.disabled?"var(--vj-text-dimmer, #555555)":"var(--vj-text, #cccccc)",cursor:p.disabled?"default":"pointer",padding:"4px 16px",fontSize:"12px",fontFamily:"var(--vj-font, monospace)"}),onClick:()=>{p.disabled||(p.action(),o("close"))},onMouseenter:N=>{p.disabled||(N.target.style.backgroundColor="var(--vj-accent-muted, #094771)")},onMouseleave:m[0]||(m[0]=N=>{N.target.style.backgroundColor="transparent"})},e.toDisplayString(p.label),45,Be)):e.createCommentVNode("",!0)],64))),128))],4)]))}}),X=e.defineComponent({__name:"TreeView",props:{class:{},showValues:{type:Boolean,default:!0},showCounts:{type:Boolean,default:!1}},setup(n){const i=n,{state:t,actions:o}=F(),a=e.shallowRef(null),s=e.computed(()=>U(t.tree.value.root,r=>t.expandedNodeIds.value.has(r))),{dragState:d,handleDragStart:l,handleDragOver:c,handleDragEnd:m,handleDrop:p}=Z(s,t.selectedNodeIds),g=e.shallowRef(null),N=e.shallowRef(!1);function B(r){o.setVisibleNodesOverride(s.value),o.selectNodeRange(r)}e.watch(()=>t.focusedNodeId.value,r=>{if(r&&a.value){const f=a.value.querySelector(`[data-node-id="${r}"]`);f&&f.scrollIntoView({block:"nearest"})}});function M(r,f){r.preventDefault(),t.selectedNodeIds.value.has(f.id)||o.selectAndDrillDown(f.id),g.value={x:r.clientX,y:r.clientY,node:f}}function v(r){const f=[];if((r.type==="object"||r.type==="array")&&(f.push({label:"Expand all children",action:()=>{function y(h){const E=[h.id];for(const C of h.children)E.push(...y(C));return E}for(const h of y(r))o.expandNode(h)}}),f.push({label:"Collapse all children",action:()=>{function y(h){const E=[];for(const C of h.children)E.push(C.id),E.push(...y(C));return E}for(const h of y(r))o.collapseNode(h)}}),f.push({separator:!0})),f.push({label:"Copy path",action:()=>navigator.clipboard.writeText(r.path).catch(()=>{})}),f.push({label:"Copy value as JSON",action:()=>{const y=V.toJson(r),h=typeof y=="string"?y:JSON.stringify(y,null,2);navigator.clipboard.writeText(h).catch(()=>{})}}),r.parentId){f.push({separator:!0}),f.push({label:"Duplicate",action:()=>{const h=V.duplicateNode(t.tree.value,r.id);o.setTree(h)}});const y=["string","number","boolean","null","object","array"].filter(h=>h!==r.type).map(h=>({label:`Change to ${h}`,action:()=>{const E=V.changeType(t.tree.value,r.id,h);o.setTree(E)}}));f.push({separator:!0}),f.push(...y),f.push({separator:!0}),f.push({label:"Delete",action:()=>{const{newTree:h,nextFocusId:E}=Q(t.tree.value,t.selectedNodeIds.value,s.value);h!==t.tree.value&&(o.setTree(h),E?o.selectNode(E):o.setSelection(null,new Set,null))}})}return f}function D(r){const f=s.value.findIndex(k=>k.id===t.focusedNodeId.value);switch(r.key){case"ArrowDown":{r.preventDefault();const k=s.value[f+1];k&&(r.shiftKey?B(k.id):o.selectNode(k.id));break}case"ArrowUp":{r.preventDefault();const k=s.value[f-1];k&&(r.shiftKey?B(k.id):o.selectNode(k.id));break}case"ArrowRight":{r.preventDefault();const k=f>=0?s.value[f]:null;k&&(k.type==="object"||k.type==="array")&&(t.expandedNodeIds.value.has(k.id)?k.children.length>0&&o.selectNode(k.children[0].id):o.expandNode(k.id));break}case"ArrowLeft":{r.preventDefault();const k=f>=0?s.value[f]:null;if(!k)break;(k.type==="object"||k.type==="array")&&t.expandedNodeIds.value.has(k.id)?o.collapseNode(k.id):k.parentId&&o.selectNode(k.parentId);break}case"a":{if(r.metaKey||r.ctrlKey){r.preventDefault();const k=le(t.tree.value,t.focusedNodeId.value,t.selectedNodeIds.value);k&&o.setSelection(t.focusedNodeId.value,k,t.focusedNodeId.value)}break}case"Escape":{r.preventDefault(),t.selectedNodeIds.value.size>1&&t.focusedNodeId.value?o.selectNode(t.focusedNodeId.value):o.setSelection(null,new Set,null);break}case"Delete":case"Backspace":{r.preventDefault();const{newTree:k,nextFocusId:y}=Q(t.tree.value,t.selectedNodeIds.value,s.value);if(k===t.tree.value)break;o.setTree(k),y?o.selectNode(y):o.setSelection(null,new Set,null);break}}}return(r,f)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"containerRef",ref:a,role:"tree",tabindex:"0",style:{overflow:"auto",backgroundColor:"var(--vj-bg, #1e1e1e)",color:"var(--vj-text, #cccccc)",fontFamily:"var(--vj-font, monospace)",fontSize:"13px",outline:"none",flex:1},onKeydown:D,onFocus:f[0]||(f[0]=()=>N.value=!0),onBlur:f[1]||(f[1]=()=>N.value=!1)},[e.createVNode(re,{node:e.unref(t).tree.value.root,depth:0,"drag-state":e.unref(d),"show-values":i.showValues??!0,"show-counts":i.showCounts??!1,"is-focused":N.value,onDragStart:e.unref(l),onDragOver:e.unref(c),onDragEnd:e.unref(m),onDrop:e.unref(p),onContextMenu:M,onSelectRange:B},null,8,["node","drag-state","show-values","show-counts","is-focused","onDragStart","onDragOver","onDragEnd","onDrop"])],544),g.value?(e.openBlock(),e.createBlock(ie,{key:0,x:g.value.x,y:g.value.y,items:v(g.value.node),onClose:f[2]||(f[2]=()=>g.value=null)},null,8,["x","y","items"])):e.createCommentVNode("",!0)],64))}}),se=Symbol("FormViewContext"),je=["value"],Ee=["onMousedown","onMouseenter"],Ie=20,Ce=200,de=e.defineComponent({__name:"Breadcrumbs",props:{class:{}},setup(n){const{state:i,actions:t}=F(),o=e.computed(()=>i.drillDownNodeId.value?i.tree.value.nodesById.get(i.drillDownNodeId.value):null),a=e.computed(()=>{var v;return((v=o.value)==null?void 0:v.path)??"/"}),s=e.shallowRef(a.value),d=e.shallowRef(!1),l=e.shallowRef(0),c=e.shallowRef(null),m=e.shallowRef(null),p=e.shallowRef(null);e.watch(a,v=>{s.value=v});const g=e.computed(()=>{if(!d.value)return[];const v=s.value.toLowerCase(),D=[];for(const[r,f]of i.tree.value.nodesById)if(f.path.toLowerCase().startsWith(v)&&D.push({id:r,path:f.path}),D.length>=Ie)break;return D.sort((r,f)=>r.path.localeCompare(f.path)),D});e.watch(g,()=>{l.value=0}),e.watch(()=>[l.value,d.value],([v,D])=>{const r=m.value;if(!r||!D)return;const f=r.children[v];f==null||f.scrollIntoView({block:"nearest"})});function N(v){var D;for(const[r,f]of i.tree.value.nodesById)if(f.path===v){t.selectAndDrillDown(r);break}d.value=!1,(D=c.value)==null||D.blur()}function B(v){var D;if(!d.value){(v.key==="ArrowDown"||v.key==="Enter")&&(d.value=!0,v.preventDefault());return}switch(v.key){case"ArrowDown":v.preventDefault(),l.value=Math.min(l.value+1,g.value.length-1);break;case"ArrowUp":v.preventDefault(),l.value=Math.max(l.value-1,0);break;case"Enter":v.preventDefault(),g.value.length>0&&l.value<g.value.length?N(g.value[l.value].path):N(s.value.trim()||"/");break;case"Escape":v.preventDefault(),s.value=a.value,d.value=!1,(D=c.value)==null||D.blur();break}}function M(v){p.value&&!p.value.contains(v.target)&&(s.value=a.value,d.value=!1)}return e.onMounted(()=>document.addEventListener("mousedown",M)),e.onUnmounted(()=>document.removeEventListener("mousedown",M)),(v,D)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapperRef",ref:p,style:{position:"relative",flex:1,minWidth:0}},[e.createElementVNode("input",{ref_key:"inputRef",ref:c,value:s.value,spellcheck:"false",autocomplete:"off",style:{width:"100%",boxSizing:"border-box",padding:"3px 0",fontSize:"var(--vj-input-font-size, 13px)",fontFamily:"var(--vj-font, monospace)",color:"var(--vj-text-muted, #999999)",background:"transparent",border:"none",outline:"none"},onInput:D[0]||(D[0]=r=>{s.value=r.target.value,d.value||(d.value=!0)}),onFocus:D[1]||(D[1]=r=>{r.target.select(),d.value=!0}),onKeydown:B},null,40,je),d.value&&g.value.length>0?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"listRef",ref:m,style:e.normalizeStyle({position:"absolute",top:"100%",left:"-12px",right:"-12px",zIndex:50,maxHeight:Ce+"px",overflowY:"auto",backgroundColor:"var(--vj-bg-panel, #252526)",border:"1px solid var(--vj-border, #333333)",boxShadow:"0 4px 12px rgba(0,0,0,0.3)"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value,(r,f)=>(e.openBlock(),e.createElementBlock("div",{key:r.id,style:e.normalizeStyle({padding:"4px 12px",fontSize:"13px",fontFamily:"var(--vj-font, monospace)",color:f===l.value?"var(--vj-text, #cccccc)":"var(--vj-text-muted, #888888)",backgroundColor:f===l.value?"var(--vj-bg-hover, #2a2d2e)":"transparent",cursor:"pointer",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}),onMousedown:e.withModifiers(()=>N(r.path),["prevent"]),onMouseenter:()=>l.value=f},e.toDisplayString(r.path),45,Ee))),128))],4)):e.createCommentVNode("",!0)],512))}}),Ve=["value"],Me=["onMousedown","onMouseenter"],Re={style:{width:"14px",flexShrink:0,fontSize:"12px"}},ze=200,G=e.defineComponent({__name:"EnumInput",props:e.mergeModels({enumValues:{},value:{},inputStyle:{}},{inputRef:{},inputRefModifiers:{}}),emits:e.mergeModels(["valueChange"],["update:inputRef"]),setup(n,{expose:i,emit:t}){const o=n,a=t;e.useModel(n,"inputRef");const s=e.shallowRef(o.value),d=e.shallowRef(!1),l=e.shallowRef(0),c=e.shallowRef(null),m=e.shallowRef(null),p=e.shallowRef(null);e.watch(()=>o.value,v=>{s.value=v});const g=e.computed(()=>o.enumValues.map(v=>String(v)));e.watch(g,()=>{l.value=0}),e.watch(()=>[l.value,d.value],([v,D])=>{const r=c.value;if(!r||!D)return;const f=r.children[v];f==null||f.scrollIntoView({block:"nearest"})});function N(v){a("valueChange",v),s.value=v,d.value=!1}function B(v){if(!d.value){(v.key==="ArrowDown"||v.key==="ArrowUp")&&(v.preventDefault(),v.stopPropagation(),d.value=!0);return}switch(v.key){case"ArrowDown":v.preventDefault(),v.stopPropagation(),l.value=Math.min(l.value+1,g.value.length-1);break;case"ArrowUp":v.preventDefault(),v.stopPropagation(),l.value=Math.max(l.value-1,0);break;case"Enter":v.preventDefault(),v.stopPropagation(),g.value.length>0&&l.value<g.value.length&&N(g.value[l.value]);break;case"Escape":v.preventDefault(),v.stopPropagation(),s.value=o.value,d.value=!1;break;case"Tab":s.value=o.value,d.value=!1;break}}function M(v){m.value&&!m.value.contains(v.target)&&(s.value=o.value,d.value=!1)}return e.onMounted(()=>document.addEventListener("mousedown",M)),e.onUnmounted(()=>document.removeEventListener("mousedown",M)),i({focus:()=>{var v;return(v=p.value)==null?void 0:v.focus()}}),(v,D)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapperRef",ref:m,style:{position:"relative",flex:1,minWidth:0}},[e.createElementVNode("input",{ref_key:"localInputRef",ref:p,value:s.value,spellcheck:"false",autocomplete:"off",style:e.normalizeStyle(n.inputStyle),onInput:D[0]||(D[0]=r=>{s.value=r.target.value,d.value||(d.value=!0)}),onFocus:D[1]||(D[1]=()=>d.value=!0),onKeydown:B,onClick:D[2]||(D[2]=e.withModifiers(()=>{},["stop"]))},null,44,Ve),d.value&&g.value.length>0?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"listRef",ref:c,style:e.normalizeStyle({position:"absolute",top:"calc(100% + 4px)",left:"-32px",right:0,zIndex:50,maxHeight:ze+"px",overflowY:"auto",backgroundColor:"var(--vj-bg-panel, #252526)",border:"1px solid var(--vj-border, #333333)",boxShadow:"0 4px 12px rgba(0,0,0,0.3)"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value,(r,f)=>(e.openBlock(),e.createElementBlock("div",{key:r,style:e.normalizeStyle({padding:"4px 12px",fontSize:"13px",fontFamily:"var(--vj-font, monospace)",display:"flex",alignItems:"center",gap:"6px",color:f===l.value?"var(--vj-text, #cccccc)":"var(--vj-text-muted, #888888)",backgroundColor:f===l.value?"var(--vj-bg-hover, #2a2d2e)":"transparent",cursor:"pointer",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}),onMousedown:e.withModifiers(()=>N(r),["prevent"]),onMouseenter:()=>l.value=f},[e.createElementVNode("span",Re,e.toDisplayString(r===n.value?"✓":""),1),e.createTextVNode(" "+e.toDisplayString(r),1)],44,Me))),128))],4)):e.createCommentVNode("",!0)],512))}}),Te={key:0},$e=["data-form-node-id","draggable"],Fe=["value"],Oe={key:2,style:{color:"var(--vj-text-muted, #888888)",fontSize:"11px",fontFamily:"var(--vj-font, monospace)"}},Ae={key:1},Ke=["data-form-node-id","draggable"],Le=["value"],Pe={key:2,style:{color:"var(--vj-error, #f48771)",fontSize:"10px",fontFamily:"var(--vj-font, monospace)"}},He={key:3,style:{flex:1,display:"flex",alignItems:"center",gap:"6px",minWidth:0}},We={key:2,style:{color:"var(--vj-boolean, #569cd6)",fontFamily:"var(--vj-font, monospace)",fontSize:"var(--vj-input-font-size, 13px)",fontStyle:"italic",flex:1}},Je=["value","placeholder"],ue=e.defineComponent({__name:"FormField",props:{node:{},depth:{}},setup(n){const i=n,t=e.inject(se),{state:o,actions:a}=F(),s=e.shallowRef(!1),d=e.shallowRef(null),l=e.shallowRef(null);function c(){d.value&&typeof d.value.focus=="function"&&d.value.focus()}const m=e.computed(()=>i.node.type==="object"||i.node.type==="array"),p=e.computed(()=>i.node.parentId===null),g=e.computed(()=>o.selectedNodeIds.value.has(i.node.id)),N=e.computed(()=>t.editingNodeId.value===i.node.id),B=e.computed(()=>t.collapsedIds.value.has(i.node.id)),M=e.computed(()=>{var I;return i.node.parentId?((I=o.tree.value.nodesById.get(i.node.parentId))==null?void 0:I.type)==="object":!1}),v=e.computed(()=>ne(t.schema.value,t.rootSchema.value,i.node.path)),D=e.computed(()=>xe(i.node,t.schema.value,t.rootSchema.value)),r=e.computed(()=>{var I;return(I=v.value)==null?void 0:I.description}),f=e.computed(()=>{var I;return(I=v.value)==null?void 0:I.deprecated}),k=e.computed(()=>{var I;return(I=v.value)==null?void 0:I.title}),y=e.computed(()=>t.dragState.value.dropTargetNodeId===i.node.id),h=e.computed(()=>t.dragState.value.draggedNodeIds.has(i.node.id));function E(){return y.value&&t.dragState.value.dropPosition==="before"?"var(--vj-accent, #007acc)":"transparent"}function C(){return y.value&&t.dragState.value.dropPosition==="after"?"var(--vj-accent, #007acc)":"transparent"}function $(){return g.value?t.isFocused.value?"var(--vj-bg-selected, #2a5a1e)":"var(--vj-bg-selected-muted, var(--vj-bg-hover, #2a2d2e))":s.value?"var(--vj-bg-hover, #2a2d2e)":"transparent"}function O(){return g.value&&t.isFocused.value?"var(--vj-text-selected, var(--vj-text, #cccccc))":"var(--vj-text, #cccccc)"}function w(){return ge(i.node)}function j(){return ye(i.node)}function u(I){I.preventDefault();const x=I.currentTarget.getBoundingClientRect(),A=x.top+x.height/2;t.onDragOver(i.node.id,I.clientY<A?"before":"after")}function b(I){I.dataTransfer.effectAllowed="move",o.selectedNodeIds.value.size>1&&o.selectedNodeIds.value.has(i.node.id)&&te(I.dataTransfer,o.selectedNodeIds.value.size),t.onDragStart(i.node.id)}function S(I){var K;const x=ke(I,(K=v.value)==null?void 0:K.type,i.node.type),A=V.setValue(o.tree.value,i.node.id,x);a.setTree(A)}function R(I){const x=V.setKey(o.tree.value,i.node.id,I);a.setTree(x)}function z(){const I=V.removeNode(o.tree.value,i.node.id);a.setTree(I)}function Y(){const I=i.node.type==="array"?String(i.node.children.length):`newKey${i.node.children.length}`,x=V.addProperty(o.tree.value,i.node.id,I,"");a.setTree(x)}const ce=e.computed(()=>{var I;return((I=v.value)==null?void 0:I.enum)&&v.value.enum.length>0}),P=e.computed(()=>`calc(${(t.maxDepth.value-i.depth)*16}px + ${t.maxKeyLength.value}ch)`);return e.watch(N,async I=>{I&&(await e.nextTick(),m.value?l.value&&l.value.focus():i.node.value!==null&&i.node.value!==void 0&&i.node.value!==""&&d.value?c():l.value&&l.value.focus())}),(I,x)=>{var A,K;return m.value?(e.openBlock(),e.createElementBlock("div",Te,[e.createElementVNode("div",{"data-form-node-id":n.node.id,draggable:!p.value,style:e.normalizeStyle({display:"flex",alignItems:"center",gap:"6px",padding:"1px 8px",paddingLeft:8+n.depth*16+"px",cursor:"pointer",backgroundColor:$(),color:O(),height:"28px",boxSizing:"border-box",userSelect:"none",opacity:f.value?.5:h.value?.4:1,borderTop:`2px solid ${E()}`,borderBottom:`2px solid ${C()}`}),onClick:x[3]||(x[3]=e.withModifiers(T=>e.unref(t).onSelect(n.node.id,T),["stop"])),onDblclick:x[4]||(x[4]=()=>e.unref(t).onToggleCollapse(n.node.id)),onMouseenter:x[5]||(x[5]=()=>s.value=!0),onMouseleave:x[6]||(x[6]=()=>s.value=!1),onDragstart:b,onDragover:u,onDragend:x[7]||(x[7]=()=>e.unref(t).onDragEnd()),onDrop:x[8]||(x[8]=e.withModifiers(()=>e.unref(t).onDrop(),["prevent"]))},[e.createElementVNode("button",{style:e.normalizeStyle({background:"none",border:"none",color:"inherit",cursor:"pointer",padding:0,width:"16px",fontSize:"9px",flexShrink:0,display:"inline-flex",alignItems:"center",justifyContent:"center",transition:"transform 0.15s",transform:B.value?"rotate(0deg)":"rotate(90deg)"}),onClick:x[0]||(x[0]=e.withModifiers(()=>e.unref(t).onToggleCollapse(n.node.id),["stop"]))}," ▶ ",4),N.value&&!p.value?(e.openBlock(),e.createElementBlock("input",{key:0,ref_key:"keyInputRef",ref:l,value:n.node.key,style:e.normalizeStyle({background:"none",border:"none",color:"inherit",fontFamily:"var(--vj-font, monospace)",fontSize:"var(--vj-input-font-size, 13px)",fontWeight:500,padding:0,outline:"none",flexShrink:0,width:P.value}),onInput:x[1]||(x[1]=T=>R(T.target.value)),onClick:x[2]||(x[2]=e.withModifiers(()=>{},["stop"]))},null,44,Fe)):(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({color:!p.value&&!M.value&&!g.value?"var(--vj-text-muted, #888888)":"inherit",fontSize:"var(--vj-input-font-size, 13px)",fontFamily:"var(--vj-font, monospace)",fontWeight:500,flexShrink:0,display:"inline-block",width:P.value})},e.toDisplayString(p.value?"/":e.unref(L)(n.node,e.unref(o).tree.value)),5)),e.unref(t).showDescriptions&&k.value&&!g.value?(e.openBlock(),e.createElementBlock("span",Oe,e.toDisplayString(k.value),1)):e.createCommentVNode("",!0),s.value?(e.openBlock(),e.createElementBlock("button",{key:3,style:e.normalizeStyle({background:"none",border:"none",color:g.value?"inherit":"var(--vj-text-muted, #888888)",cursor:"pointer",padding:0,fontSize:"12px",fontFamily:"var(--vj-font, monospace)"}),onClick:e.withModifiers(Y,["stop"])}," + Add "+e.toDisplayString(n.node.type==="array"?"item":"property"),5)):e.createCommentVNode("",!0),e.unref(t).showCounts?(e.openBlock(),e.createElementBlock("span",{key:4,style:e.normalizeStyle({color:g.value?"inherit":"var(--vj-text-dim, #666666)",fontSize:"12px",fontFamily:"var(--vj-font, monospace)",marginLeft:"auto"})},e.toDisplayString(n.node.type==="array"?`${n.node.children.length} items`:`${n.node.children.length} properties`),5)):e.createCommentVNode("",!0),!p.value&&N.value?(e.openBlock(),e.createElementBlock("button",{key:5,style:e.normalizeStyle({background:"none",border:"none",color:g.value?"inherit":"var(--vj-text-muted, #888888)",cursor:"pointer",padding:"2px 4px",fontSize:"14px",fontFamily:"var(--vj-font, monospace)",...e.unref(t).showCounts?{}:{marginLeft:"auto"}}),title:"Remove",onClick:e.withModifiers(z,["stop"])}," × ",4)):e.createCommentVNode("",!0)],44,$e),e.unref(t).showDescriptions&&r.value?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle({padding:"2px 12px 4px",paddingLeft:8+n.depth*16+22+"px",fontSize:"11px",color:"var(--vj-text-dim, #666666)",fontFamily:"var(--vj-font, monospace)"})},e.toDisplayString(r.value),5)):e.createCommentVNode("",!0),B.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Ae,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.node.children,T=>(e.openBlock(),e.createBlock(ue,{key:T.id,node:T,depth:n.depth+1},null,8,["node","depth"]))),128))]))])):(e.openBlock(),e.createElementBlock("div",{key:1,"data-form-node-id":n.node.id,draggable:!p.value,style:e.normalizeStyle({display:"flex",alignItems:"center",gap:"6px",padding:"1px 8px",paddingLeft:8+n.depth*16+"px",cursor:"pointer",backgroundColor:$(),color:O(),height:"28px",boxSizing:"border-box",userSelect:"none",opacity:f.value?.5:h.value?.4:1,borderTop:`2px solid ${E()}`,borderBottom:`2px solid ${C()}`}),onClick:x[14]||(x[14]=e.withModifiers(T=>e.unref(t).onSelect(n.node.id,T),["stop"])),onDblclick:x[15]||(x[15]=()=>e.unref(t).onStartEditing(n.node.id)),onMouseenter:x[16]||(x[16]=()=>s.value=!0),onMouseleave:x[17]||(x[17]=()=>s.value=!1),onDragstart:b,onDragover:u,onDragend:x[18]||(x[18]=()=>e.unref(t).onDragEnd()),onDrop:x[19]||(x[19]=e.withModifiers(()=>e.unref(t).onDrop(),["prevent"]))},[x[20]||(x[20]=e.createElementVNode("span",{style:{width:"16px",flexShrink:0}},null,-1)),N.value&&M.value?(e.openBlock(),e.createElementBlock("input",{key:0,ref_key:"keyInputRef",ref:l,value:n.node.key,style:e.normalizeStyle({background:"none",border:"none",color:"inherit",fontFamily:"var(--vj-font, monospace)",fontSize:"var(--vj-input-font-size, 13px)",padding:0,flexShrink:0,outline:"none",width:P.value}),onInput:x[9]||(x[9]=T=>R(T.target.value)),onClick:x[10]||(x[10]=e.withModifiers(()=>{},["stop"])),onKeydown:x[11]||(x[11]=T=>{T.key==="Tab"&&!T.shiftKey&&d.value&&(T.preventDefault(),c())})},null,44,Le)):(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({color:!M.value&&!g.value?"var(--vj-text-muted, #888888)":"inherit",fontSize:"var(--vj-input-font-size, 13px)",fontFamily:"var(--vj-font, monospace)",flexShrink:0,display:"inline-block",width:P.value})},e.toDisplayString(e.unref(L)(n.node,e.unref(o).tree.value)),5)),D.value&&!g.value?(e.openBlock(),e.createElementBlock("span",Pe," * ")):e.createCommentVNode("",!0),N.value?(e.openBlock(),e.createElementBlock("div",He,[n.node.type==="boolean"?(e.openBlock(),e.createBlock(G,{key:0,ref_key:"valueInputRef",ref:d,"enum-values":["true","false"],value:String(n.node.value),"input-style":{background:"none",border:"none",fontFamily:"var(--vj-font, monospace)",fontSize:"var(--vj-input-font-size, 13px)",padding:"0",flex:"1",outline:"none",color:w()},onValueChange:S},null,8,["value","input-style"])):ce.value&&((A=v.value)!=null&&A.enum)?(e.openBlock(),e.createBlock(G,{key:1,ref_key:"valueInputRef",ref:d,"enum-values":v.value.enum,value:j(),"input-style":{background:"none",border:"none",fontFamily:"var(--vj-font, monospace)",fontSize:"var(--vj-input-font-size, 13px)",padding:"0",flex:"1",outline:"none",color:w()},onValueChange:S},null,8,["enum-values","value","input-style"])):n.node.type==="null"?(e.openBlock(),e.createElementBlock("span",We," null ")):(e.openBlock(),e.createElementBlock("input",{key:3,ref_key:"valueInputRef",ref:d,value:j(),placeholder:((K=v.value)==null?void 0:K.default)!==void 0?String(v.value.default):"<value>",style:e.normalizeStyle({background:"none",border:"none",fontFamily:"var(--vj-font, monospace)",fontSize:"var(--vj-input-font-size, 13px)",padding:0,flex:1,outline:"none",color:w()}),onInput:x[12]||(x[12]=T=>S(T.target.value)),onClick:x[13]||(x[13]=e.withModifiers(()=>{},["stop"]))},null,44,Je))])):(e.openBlock(),e.createElementBlock("span",{key:4,style:e.normalizeStyle({color:w(),fontSize:"var(--vj-input-font-size, 13px)",fontFamily:"var(--vj-font, monospace)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontStyle:n.node.type==="null"?"italic":void 0})},e.toDisplayString(j()),5)),N.value?(e.openBlock(),e.createElementBlock("button",{key:5,style:e.normalizeStyle({background:"none",border:"none",color:g.value?"inherit":"var(--vj-text-muted, #888888)",cursor:"pointer",padding:"2px 4px",fontSize:"14px",fontFamily:"var(--vj-font, monospace)",flexShrink:0}),title:"Remove",onClick:e.withModifiers(z,["stop"])}," × ",4)):e.createCommentVNode("",!0)],44,Ke))}}}),Ue={style:{backgroundColor:"var(--vj-bg, #1e1e1e)",color:"var(--vj-text, #cccccc)",height:"100%",fontFamily:"var(--vj-font, monospace)",display:"flex",flexDirection:"column"}},Ye={style:{display:"flex",alignItems:"center",padding:"4px 8px",borderBottom:"1px solid var(--vj-border, #333333)",backgroundColor:"var(--vj-bg, #1e1e1e)",flexShrink:0}},J=e.defineComponent({__name:"FormView",props:{class:{},showDescriptions:{type:Boolean,default:!1},showCounts:{type:Boolean,default:!1}},setup(n){const i=n,{state:t,actions:o}=F(),a=e.shallowRef(null),s=e.shallowRef(!1),d=e.shallowRef(null),l=e.shallowRef(new Set);let c=t.tree.value;const m=e.computed(()=>(t.drillDownNodeId.value?t.tree.value.nodesById.get(t.drillDownNodeId.value):null)??t.tree.value.root);e.watch(()=>m.value.id,()=>{d.value=null,l.value=new Set});const p=e.computed(()=>U(m.value,w=>!l.value.has(w))),{dragState:g,handleDragStart:N,handleDragOver:B,handleDragEnd:M,handleDrop:v}=Z(p,t.selectedNodeIds);e.onMounted(()=>{o.setVisibleNodesOverride(p.value)}),e.onUnmounted(()=>{o.setVisibleNodesOverride(null)}),e.watch(p,w=>{o.setVisibleNodesOverride(w)});const D=e.computed(()=>{let w=1,j=0;const u=m.value.path==="/"?0:m.value.path.split("/").filter(Boolean).length;for(const b of p.value){const S=b.parentId===null?"/":L(b,t.tree.value);S.length>w&&(w=S.length);const z=(b.path==="/"?0:b.path.split("/").filter(Boolean).length)-u;z>j&&(j=z)}return{maxKeyLength:w,maxDepth:j}}),r=e.computed(()=>D.value.maxKeyLength),f=e.computed(()=>D.value.maxDepth),k=e.computed(()=>t.schema.value),y=e.computed(()=>t.schema.value??void 0);function h(w,j){d.value=null,j.shiftKey?(o.setVisibleNodesOverride(p.value),o.selectNodeRange(w)):j.metaKey||j.ctrlKey?o.toggleNodeSelection(w):o.selectNode(w)}function E(w){const j=new Set(l.value);j.has(w)?j.delete(w):j.add(w),l.value=j}function C(w){c=t.tree.value,d.value=w}function $(w){requestAnimationFrame(()=>{var u;const j=(u=a.value)==null?void 0:u.querySelector(`[data-form-node-id="${w}"]`);j==null||j.scrollIntoView({block:"nearest"})})}function O(w){var u,b;if(d.value){w.key==="Escape"?(w.preventDefault(),w.stopPropagation(),o.setTree(c),d.value=null,(u=a.value)==null||u.focus()):w.key==="Enter"&&(w.preventDefault(),w.stopPropagation(),d.value=null,(b=a.value)==null||b.focus());return}let j=p.value.findIndex(S=>S.id===t.focusedNodeId.value);switch(j===-1&&p.value.length>0&&(j=0),w.key){case"ArrowDown":{w.preventDefault();const S=p.value[j+1];S&&(w.shiftKey?(o.setVisibleNodesOverride(p.value),o.selectNodeRange(S.id)):o.selectNode(S.id),$(S.id));break}case"ArrowUp":{w.preventDefault();const S=p.value[j-1];S&&(w.shiftKey?(o.setVisibleNodesOverride(p.value),o.selectNodeRange(S.id)):o.selectNode(S.id),$(S.id));break}case"ArrowRight":{w.preventDefault();const S=j>=0?p.value[j]:null;if(S&&(S.type==="object"||S.type==="array"))if(l.value.has(S.id)){const R=new Set(l.value);R.delete(S.id),l.value=R}else S.children.length>0&&(o.selectNode(S.children[0].id),$(S.children[0].id));break}case"ArrowLeft":{w.preventDefault();const S=j>=0?p.value[j]:null;if(!S)break;if((S.type==="object"||S.type==="array")&&!l.value.has(S.id)){const z=new Set(l.value);z.add(S.id),l.value=z}else if(S.parentId){const z=p.value.find(Y=>Y.id===S.parentId);z&&(o.selectNode(z.id),$(z.id))}break}case"Enter":{w.preventDefault(),t.focusedNodeId.value&&(c=t.tree.value,o.selectNode(t.focusedNodeId.value),d.value=t.focusedNodeId.value);break}case"a":{if(w.metaKey||w.ctrlKey){w.preventDefault();const S=le(t.tree.value,t.focusedNodeId.value,t.selectedNodeIds.value);S&&o.setSelection(t.focusedNodeId.value,S,t.focusedNodeId.value)}break}case"Escape":{w.preventDefault(),t.selectedNodeIds.value.size>1&&t.focusedNodeId.value?o.selectNode(t.focusedNodeId.value):o.setSelection(null,new Set,null);break}case"Delete":case"Backspace":{w.preventDefault();const{newTree:S,nextFocusId:R}=Q(t.tree.value,t.selectedNodeIds.value,p.value);if(S===t.tree.value)break;o.setTree(S),R?o.selectNode(R):o.setSelection(null,new Set,null);break}}}return e.provide(se,{schema:k,rootSchema:y,showDescriptions:i.showDescriptions,showCounts:i.showCounts,editingNodeId:d,collapsedIds:l,maxKeyLength:r,maxDepth:f,isFocused:s,dragState:g,onSelect:h,onToggleCollapse:E,onStartEditing:C,onDragStart:N,onDragOver:B,onDragEnd:M,onDrop:v}),(w,j)=>(e.openBlock(),e.createElementBlock("div",Ue,[e.createElementVNode("div",Ye,[e.createVNode(de)]),e.createElementVNode("div",{ref_key:"containerRef",ref:a,"data-form-container":"",tabindex:"0",style:{flex:1,overflow:"auto",outline:"none"},onKeydown:O,onFocus:j[0]||(j[0]=()=>s.value=!0),onBlur:j[1]||(j[1]=u=>{u.currentTarget.contains(u.relatedTarget)||(s.value=!1)})},[e.createVNode(ue,{node:m.value,depth:0},null,8,["node"])],544)]))}}),qe={style:{display:"flex",alignItems:"center",gap:"6px",padding:"4px 8px",backgroundColor:"var(--vj-bg, #1e1e1e)",borderBottom:"1px solid var(--vj-border, #333333)"}},Qe=["value"],Xe={style:{display:"flex",alignItems:"center",gap:"2px",flexShrink:0,height:"18px"}},Ge=["disabled"],_e=["disabled"],_=e.defineComponent({__name:"SearchBar",props:{class:{}},setup(n){const{state:i,actions:t}=F(),o=e.shallowRef(null);function a(d){var l;d.key==="Enter"&&(d.preventDefault(),d.shiftKey?t.prevSearchMatch():t.nextSearchMatch()),d.key==="Escape"&&(d.preventDefault(),t.setSearchQuery(""),(l=o.value)==null||l.blur())}function s(d){var c,m;(d.metaKey||d.ctrlKey)&&d.key==="f"&&(d.preventDefault(),(c=o.value)==null||c.focus(),(m=o.value)==null||m.select())}return e.onMounted(()=>document.addEventListener("keydown",s)),e.onUnmounted(()=>document.removeEventListener("keydown",s)),(d,l)=>(e.openBlock(),e.createElementBlock("div",qe,[e.createElementVNode("input",{ref_key:"inputRef",ref:o,type:"text",value:e.unref(i).searchQuery.value,placeholder:"Search...",spellcheck:"false",autocomplete:"off",style:{flex:1,background:"none",border:"none",borderRadius:"3px",color:"var(--vj-text, #cccccc)",fontFamily:"var(--vj-font, monospace)",fontSize:"var(--vj-input-font-size, 13px)",padding:"3px 8px",outline:"none",minWidth:0},onInput:l[0]||(l[0]=c=>e.unref(t).setSearchQuery(c.target.value)),onKeydown:a},null,40,Qe),e.createElementVNode("div",Xe,[e.unref(i).searchQuery.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("span",{style:e.normalizeStyle({fontSize:"11px",lineHeight:1,color:e.unref(i).searchMatches.value.length>0?"var(--vj-text-muted, #999999)":"var(--vj-error, #f48771)",fontFamily:"var(--vj-font, monospace)",whiteSpace:"nowrap"})},e.toDisplayString(e.unref(i).searchMatches.value.length>0?`${e.unref(i).searchMatchIndex.value+1}/${e.unref(i).searchMatches.value.length}`:"0/0"),5),e.createElementVNode("button",{disabled:e.unref(i).searchMatches.value.length===0,"aria-label":"Previous match (Shift+Enter)",title:"Previous match (Shift+Enter)",style:e.normalizeStyle({background:"none",border:"none",color:e.unref(i).searchMatches.value.length>0?"var(--vj-text, #cccccc)":"var(--vj-text-dimmer, #555555)",cursor:e.unref(i).searchMatches.value.length>0?"pointer":"default",padding:0,fontSize:"10px",lineHeight:1,display:"inline-flex",alignItems:"center",justifyContent:"center",width:"18px",height:"18px"}),onClick:l[1]||(l[1]=(...c)=>e.unref(t).prevSearchMatch&&e.unref(t).prevSearchMatch(...c))}," ▲ ",12,Ge),e.createElementVNode("button",{disabled:e.unref(i).searchMatches.value.length===0,"aria-label":"Next match (Enter)",title:"Next match (Enter)",style:e.normalizeStyle({background:"none",border:"none",color:e.unref(i).searchMatches.value.length>0?"var(--vj-text, #cccccc)":"var(--vj-text-dimmer, #555555)",cursor:e.unref(i).searchMatches.value.length>0?"pointer":"default",padding:0,fontSize:"10px",lineHeight:1,display:"inline-flex",alignItems:"center",justifyContent:"center",width:"18px",height:"18px"}),onClick:l[2]||(l[2]=(...c)=>e.unref(t).nextSearchMatch&&e.unref(t).nextSearchMatch(...c))}," ▼ ",12,_e),e.createElementVNode("button",{"aria-label":"Clear search (Esc)",title:"Clear search (Esc)",style:{background:"none",border:"none",color:"var(--vj-text, #cccccc)",cursor:"pointer",padding:0,fontSize:"14px",lineHeight:1,display:"inline-flex",alignItems:"center",justifyContent:"center",width:"18px",height:"18px"},onClick:l[3]||(l[3]=()=>e.unref(t).setSearchQuery(""))}," × ")],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("button",{"aria-label":"Expand all",title:"Expand all",style:{background:"none",border:"none",color:"var(--vj-text-muted, #888888)",cursor:"pointer",padding:"2px",fontSize:"12px",lineHeight:1,display:"inline-flex",alignItems:"center"},onClick:l[4]||(l[4]=(...c)=>e.unref(t).expandAll&&e.unref(t).expandAll(...c))},[...l[6]||(l[6]=[e.createElementVNode("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("path",{d:"M8 2v4M5 4l3-2 3 2"}),e.createElementVNode("path",{d:"M8 14v-4M5 12l3 2 3-2"}),e.createElementVNode("path",{d:"M2 8h12"})],-1)])]),e.createElementVNode("button",{"aria-label":"Collapse all",title:"Collapse all",style:{background:"none",border:"none",color:"var(--vj-text-muted, #888888)",cursor:"pointer",padding:"2px",fontSize:"12px",lineHeight:1,display:"inline-flex",alignItems:"center"},onClick:l[5]||(l[5]=(...c)=>e.unref(t).collapseAll&&e.unref(t).collapseAll(...c))},[...l[7]||(l[7]=[e.createElementVNode("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("path",{d:"M8 5V1M5 3l3 2 3-2"}),e.createElementVNode("path",{d:"M8 11v4M5 13l3-2 3 2"}),e.createElementVNode("path",{d:"M2 8h12"})],-1)])])],64))])]))}}),Ze={key:0,style:{flex:1,minHeight:0}},et={style:{display:"flex",flexShrink:0,borderBottom:"1px solid var(--vj-border, #333333)",backgroundColor:"var(--vj-bg-panel, #252526)"}},tt={style:{flex:1,minHeight:0,overflow:"hidden"}},nt={key:0,style:{display:"flex",flexDirection:"column",height:"100%"}},ot={style:{flex:1,minHeight:0,overflow:"auto"}},lt={key:1,style:{display:"flex",flexDirection:"column",height:"100%"}},at={style:{flex:1,minHeight:0}},rt={style:{flex:1,minHeight:0,overflow:"auto"}},it={key:0,style:{width:"1px",flexShrink:0,backgroundColor:"var(--vj-border, #333333)",position:"relative",transition:"background-color 0.15s"}},st={style:{display:"flex",flexDirection:"column",flex:1,minWidth:0,overflow:"hidden"}},dt={style:{flex:1,minHeight:0}},ut=e.defineComponent({__name:"JsonEditor",props:{value:{type:[String,Number,Boolean,null,Array,Object]},defaultValue:{type:[String,Number,Boolean,null,Array,Object]},onChange:{},schema:{default:null},height:{default:"100%"},width:{default:"100%"},class:{},style:{},readOnly:{type:Boolean,default:!1},treeShowValues:{type:Boolean,default:!0},treeShowCounts:{type:Boolean,default:!1},editorShowDescriptions:{type:Boolean,default:!1},editorShowCounts:{type:Boolean,default:!1},sidebarOpen:{type:Boolean,default:!0}},emits:["change"],setup(n,{emit:i}){const t=n,o=i,a=t.value!==void 0,s=e.shallowRef(a?t.value:t.defaultValue??{}),d=e.shallowRef(0);e.watch(()=>t.value,k=>{a&&k!==s.value&&(s.value=k,d.value++)});function l(k){var y;s.value=k,t.readOnly||(o("change",k),(y=t.onChange)==null||y.call(t,k))}const c=e.shallowRef(280),m=e.shallowRef(!1),p=e.shallowRef("tree"),g=e.shallowRef(null);let N=!1,B=0,M=0,v=null;function D(){g.value&&(m.value=g.value.offsetWidth<500)}e.onMounted(()=>{D(),g.value&&(v=new ResizeObserver(D),v.observe(g.value))}),e.onUnmounted(()=>{v==null||v.disconnect()});function r(k){N=!0,B=k.clientX,M=c.value,document.body.style.cursor="col-resize",document.body.style.userSelect="none";function y(E){if(!N)return;const C=E.clientX-B;c.value=Math.max(180,Math.min(600,M+C))}function h(){N=!1,document.body.style.cursor="",document.body.style.userSelect="",document.removeEventListener("mousemove",y),document.removeEventListener("mouseup",h)}document.addEventListener("mousemove",y),document.addEventListener("mouseup",h)}const f=e.computed(()=>({height:typeof t.height=="number"?`${t.height}px`:t.height,width:typeof t.width=="number"?`${t.width}px`:t.width,display:"flex",flexDirection:"column",overflow:"hidden",...W,...t.style??{}}));return(k,y)=>(e.openBlock(),e.createElementBlock("div",{"data-vj-root":"",style:e.normalizeStyle(f.value)},[(e.openBlock(),e.createBlock(ae,{key:d.value,value:s.value,schema:t.schema,onChange:l},{default:e.withCtx(()=>[m.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"containerRef",ref:g,style:{display:"flex",flexDirection:"column",flex:1,minHeight:0}},[t.sidebarOpen?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",et,[e.createElementVNode("button",{style:e.normalizeStyle({flex:1,fontSize:"11px",padding:"4px 0",cursor:"pointer",fontFamily:"var(--vj-font, monospace)",border:"none",background:p.value==="tree"?"var(--vj-accent-muted, #094771)":"transparent",color:p.value==="tree"?"var(--vj-text, #cccccc)":"var(--vj-text-muted, #999999)"}),onClick:y[0]||(y[0]=()=>p.value="tree")}," Tree ",4),e.createElementVNode("button",{style:e.normalizeStyle({flex:1,fontSize:"11px",padding:"4px 0",cursor:"pointer",fontFamily:"var(--vj-font, monospace)",border:"none",background:p.value==="form"?"var(--vj-accent-muted, #094771)":"transparent",color:p.value==="form"?"var(--vj-text, #cccccc)":"var(--vj-text-muted, #999999)"}),onClick:y[1]||(y[1]=()=>p.value="form")}," Form ",4)]),e.createElementVNode("div",tt,[p.value==="tree"?(e.openBlock(),e.createElementBlock("div",nt,[e.createVNode(_),e.createElementVNode("div",ot,[e.createVNode(X,{"show-values":t.treeShowValues,"show-counts":t.treeShowCounts},null,8,["show-values","show-counts"])])])):(e.openBlock(),e.createElementBlock("div",lt,[e.createElementVNode("div",at,[e.createVNode(J,{"show-descriptions":t.editorShowDescriptions,"show-counts":t.editorShowCounts},null,8,["show-descriptions","show-counts"])])]))])],64)):(e.openBlock(),e.createElementBlock("div",Ze,[e.createVNode(J,{"show-descriptions":t.editorShowDescriptions,"show-counts":t.editorShowCounts},null,8,["show-descriptions","show-counts"])]))],512)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"containerRef",ref:g,style:{display:"flex",flex:1,minHeight:0}},[e.createElementVNode("div",{style:e.normalizeStyle({flexShrink:0,overflow:"hidden",display:"flex",flexDirection:"column",width:t.sidebarOpen?c.value+"px":"0",transition:"width 0.2s ease"})},[e.createVNode(_),e.createElementVNode("div",rt,[e.createVNode(X,{"show-values":t.treeShowValues,"show-counts":t.treeShowCounts},null,8,["show-values","show-counts"])])],4),t.sidebarOpen?(e.openBlock(),e.createElementBlock("div",it,[e.createElementVNode("div",{style:{position:"absolute",top:0,bottom:0,left:"-3px",width:"7px",cursor:"col-resize",zIndex:10},onMousedown:r,onMouseenter:y[2]||(y[2]=h=>{const E=h.currentTarget.parentElement;E&&(E.style.backgroundColor="var(--vj-accent, #007acc)")}),onMouseleave:y[3]||(y[3]=h=>{if(!e.unref(N)){const E=h.currentTarget.parentElement;E&&(E.style.backgroundColor="var(--vj-border, #333333)")}})},null,32)])):e.createCommentVNode("",!0),e.createElementVNode("div",st,[e.createElementVNode("div",dt,[e.createVNode(J,{"show-descriptions":t.editorShowDescriptions,"show-counts":t.editorShowCounts},null,8,["show-descriptions","show-counts"])])])],512))]),_:1},8,["value","schema"]))],4))}}),ct={style:{backgroundColor:"var(--vj-bg, #1e1e1e)",color:"var(--vj-text, #cccccc)",overflow:"auto",height:"100%",display:"flex",flexDirection:"column"}},vt={style:{display:"flex",alignItems:"center",gap:"12px",padding:"6px 12px",borderBottom:"1px solid var(--vj-border, #333333)",backgroundColor:"var(--vj-bg-panel, #252526)",fontFamily:"var(--vj-font, monospace)",fontSize:"12px",flexShrink:0}},ft={style:{color:"var(--vj-text-muted, #999999)"}},pt={key:0,style:{color:"#4ec94e"}},mt={key:1,style:{color:"#f48771"}},ht={key:2,style:{color:"#dcdcaa"}},gt={style:{flex:1,overflow:"auto"}},yt={key:0,style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:"var(--vj-text-dimmer, #555555)",fontFamily:"var(--vj-font, monospace)",fontSize:"13px"}},xt={style:{color:"var(--vj-text, #cccccc)",flexShrink:0,minWidth:"100px"}},kt={style:{flex:1,display:"flex",gap:"8px",overflow:"hidden"}},wt={style:{color:"#f48771",textDecoration:"line-through"}},bt={style:{color:"#4ec94e"}},St={key:1,style:{color:"#4ec94e"}},Nt={key:2,style:{color:"#f48771",textDecoration:"line-through"}},Dt=e.defineComponent({__name:"DiffView",props:{originalJson:{},currentJson:{},class:{}},setup(n){const i=n,t=e.computed(()=>V.computeDiff(i.originalJson,i.currentJson)),o=e.computed(()=>t.value.filter(l=>l.type==="added").length),a=e.computed(()=>t.value.filter(l=>l.type==="removed").length),s=e.computed(()=>t.value.filter(l=>l.type==="changed").length);function d(l){return he[l.type]}return(l,c)=>(e.openBlock(),e.createElementBlock("div",ct,[e.createElementVNode("div",vt,[e.createElementVNode("span",ft,e.toDisplayString(t.value.length===0?"No changes":`${t.value.length} changes`),1),o.value>0?(e.openBlock(),e.createElementBlock("span",pt,"+"+e.toDisplayString(o.value)+" added",1)):e.createCommentVNode("",!0),a.value>0?(e.openBlock(),e.createElementBlock("span",mt,"-"+e.toDisplayString(a.value)+" removed",1)):e.createCommentVNode("",!0),s.value>0?(e.openBlock(),e.createElementBlock("span",ht,"~"+e.toDisplayString(s.value)+" modified",1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",gt,[t.value.length===0?(e.openBlock(),e.createElementBlock("div",yt," No differences detected ")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,(m,p)=>(e.openBlock(),e.createElementBlock("div",{key:p,style:e.normalizeStyle({display:"flex",alignItems:"flex-start",padding:"3px 12px",borderBottom:"1px solid var(--vj-border-subtle, #2a2a2a)",backgroundColor:d(m).bg,fontFamily:"var(--vj-font, monospace)",fontSize:"12px",gap:"8px"})},[e.createElementVNode("span",{style:e.normalizeStyle({color:d(m).label,fontWeight:600,width:"14px",flexShrink:0,textAlign:"center"})},e.toDisplayString(d(m).marker),5),e.createElementVNode("span",xt,e.toDisplayString(m.path),1),e.createElementVNode("span",kt,[m.type==="changed"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("span",wt,e.toDisplayString(e.unref(H)(m.oldValue)),1),c[0]||(c[0]=e.createElementVNode("span",{style:{color:"var(--vj-text-dim, #666666)"}},"→",-1)),e.createElementVNode("span",bt,e.toDisplayString(e.unref(H)(m.newValue)),1)],64)):m.type==="added"?(e.openBlock(),e.createElementBlock("span",St,e.toDisplayString(e.unref(H)(m.newValue)),1)):m.type==="removed"?(e.openBlock(),e.createElementBlock("span",Nt,e.toDisplayString(e.unref(H)(m.oldValue)),1)):e.createCommentVNode("",!0)])],4))),128))])]))}});exports.Breadcrumbs=de;exports.ContextMenu=ie;exports.DiffView=Dt;exports.EnumInput=G;exports.FormView=J;exports.JsonEditor=ut;exports.SearchBar=_;exports.TreeView=X;exports.VisualJson=ae;exports.getDisplayKey=L;exports.getVisibleNodes=U;exports.useDragDrop=Z;exports.useStudio=F;