@wirekyt/vue 0.0.1 → 0.0.3

package/dist/index-kCBQJqpU.d.ts

@@ -0,0 +1,74 @@
+import { ComputedRef, MaybeRef, Ref } from "vue";
+import { CollectionItem, CollectionItem as CollectionItem$1, CollectionOptions, FilePathTreeNode, FilePathTreeNode as FilePathTreeNode$1, FlatTreeNode, GridCollection as GridCollection$1, GridCollectionOptions, ListCollection as ListCollection$1, SelectionMode, TreeCollection, TreeCollection as TreeCollection$1, TreeCollectionOptions, TreeCollectionOptions as TreeCollectionOptions$1, TreeNode, TreeNode as TreeNode$1 } from "@wirekyt/dom/collection";
+import * as asyncList from "@wirekyt/dom/machines/async-list";
+//#region src/components/collection/grid.d.ts
+declare const createGridCollection: <T extends CollectionItem$1>(options: GridCollectionOptions<T>) => GridCollection$1<T>;
+//#endregion
+//#region src/components/collection/list.d.ts
+declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection$1<T>;
+//#endregion
+//#region src/components/collection/tree.d.ts
+declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
+declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;
+//#endregion
+//#region src/components/collection/use-async-list.d.ts
+interface UseAsyncListProps<T, C = string> extends asyncList.Props<T, C> {}
+interface UseAsyncListReturn<T, C = string> extends ComputedRef<asyncList.Api<T, C>> {}
+declare const useAsyncList: <T, C = string>(props?: MaybeRef<UseAsyncListProps<T, C>>) => UseAsyncListReturn<T, C>;
+//#endregion
+//#region src/components/collection/use-list.d.ts
+interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, "items"> {
+  initialItems: T[] | readonly T[];
+  filter?: (itemText: string, filterText: string, item: T) => boolean;
+  limit?: number;
+}
+declare function useListCollection<T>(props: MaybeRef<UseListCollectionProps<T>>): UseListCollectionReturn<T>;
+interface UseListCollectionReturn<T> {
+  collection: Ref<ListCollection$1<T>>;
+  filter: (inputValue: string) => void;
+  set: (items: T[]) => void;
+  reset: () => void;
+  clear: () => void;
+  insert: (index: number, ...items: T[]) => void;
+  insertBefore: (value: string, ...items: T[]) => void;
+  insertAfter: (value: string, ...items: T[]) => void;
+  remove: (...itemOrValues: Array<T | string>) => void;
+  move: (value: string, to: number) => void;
+  moveBefore: (value: string, ...values: string[]) => void;
+  moveAfter: (value: string, ...values: string[]) => void;
+  reorder: (from: number, to: number) => void;
+  append: (...items: T[]) => void;
+  upsert: (value: string, item: T, mode?: "append" | "prepend") => void;
+  prepend: (...items: T[]) => void;
+  update: (value: string, item: T) => void;
+}
+//#endregion
+//#region src/components/collection/use-list-selection.d.ts
+interface UseListSelectionProps<T extends CollectionItem> {
+  selectionMode?: SelectionMode;
+  deselectable?: boolean;
+  initialSelectedValues?: string[];
+  resetOnCollectionChange?: boolean;
+  collection: ListCollection$1<T>;
+}
+declare function useListSelection<T extends CollectionItem>(props: MaybeRef<UseListSelectionProps<T>>): UseListSelectionReturn;
+interface UseListSelectionReturn {
+  selectedValues: Ref<string[]>;
+  isEmpty: Ref<boolean>;
+  firstSelectedValue: Ref<string | null>;
+  lastSelectedValue: Ref<string | null>;
+  isSelected: (value: string | null) => boolean;
+  canSelect: (value: string) => boolean;
+  select: (value: string, forceToggle?: boolean) => void;
+  deselect: (value: string) => void;
+  toggle: (value: string) => void;
+  replace: (value: string | null) => void;
+  extend: (anchorValue: string, targetValue: string) => void;
+  setSelectedValues: (values: string[]) => void;
+  clear: () => void;
+  resetSelection: () => void;
+  isAllSelected: () => boolean;
+  isSomeSelected: () => boolean;
+}
+//#endregion
+export { createGridCollection as C, GridCollectionOptions as S, CollectionItem as _, UseListCollectionReturn as a, createListCollection as b, UseAsyncListReturn as c, FlatTreeNode as d, TreeCollection$1 as f, createTreeCollection as g, createFileTreeCollection as h, UseListCollectionProps as i, useAsyncList as l, TreeNode$1 as m, UseListSelectionReturn as n, useListCollection as o, TreeCollectionOptions$1 as p, useListSelection as r, UseAsyncListProps as s, UseListSelectionProps as t, FilePathTreeNode$1 as u, CollectionOptions as v, GridCollection$1 as x, ListCollection$1 as y };

package/dist/index-vIbTjrJ-.d.cts

@@ -0,0 +1,37 @@
+import { a as PolymorphicProps } from "./factory-BNwuanv4.cjs";
+import { n as RootProps, t as RootEmits } from "./types-rSRkzyd6.cjs";
+import { n as UsePresenceReturn } from "./use-presence-BSp_dR-C.cjs";
+import { HTMLAttributes } from "vue";
+//#region src/components/presence/presence.vue.d.ts
+interface PresenceBaseProps extends RootProps, PolymorphicProps {}
+interface PresenceProps extends PresenceBaseProps,
+/**
+ * @vue-ignore
+ */
+HTMLAttributes {}
+interface PresenceEmits extends RootEmits {}
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PresenceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  exitComplete: () => any;
+}, string, import("vue").PublicProps, Readonly<PresenceProps> & Readonly<{
+  onExitComplete?: (() => any) | undefined;
+}>, {
+  present: boolean;
+  immediate: boolean;
+  lazyMount: boolean;
+  skipAnimationOnMount: boolean;
+  unmountOnExit: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+  default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/presence/use-context.d.ts
+interface UsePresenceContext extends UsePresenceReturn {}
+declare const PresenceProvider: (opts: UsePresenceContext) => void, usePresenceContext: (fallback?: UsePresenceContext | undefined) => UsePresenceContext;
+//#endregion
+export { PresenceProps as a, PresenceEmits as i, UsePresenceContext as n, _default as o, usePresenceContext as r, PresenceProvider as t };

package/dist/index.cjs

@@ -0,0 +1,43 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_utils = require("./utils-XrBZd2Yk.cjs");
+const require_providers = require("./providers-5QhcwgSd.cjs");
+const require_clean_props = require("./clean-props-MyKqus13.cjs");
+const require_boolean = require("./boolean-Dyu9-5Wp.cjs");
+const require_create_split_props = require("./create-split-props-Jx-IEwdk.cjs");
+const require_factory = require("./factory-JL7MPjkk.cjs");
+let _wirekyt_dom = require("@wirekyt/dom");
+exports.DEFAULT_ENVIRONMENT = require_providers.DEFAULT_ENVIRONMENT;
+exports.DEFAULT_LOCALE = require_providers.DEFAULT_LOCALE;
+exports.Dynamic = require_utils.Dynamic;
+exports.EnvironmentProvider = require_providers._sfc_main$1;
+exports.LocaleProvider = require_providers._sfc_main;
+exports.RenderStrategyPropsProvider = require_utils.RenderStrategyPropsProvider;
+exports.cleanProps = require_clean_props.cleanProps;
+exports.createContext = require_utils.createContext;
+exports.createSplitProps = require_create_split_props.createSplitProps;
+exports.jsxFactory = require_factory.jsxFactory;
+Object.defineProperty(exports, "mergeProps", {
+	enumerable: true,
+	get: function() {
+		return _wirekyt_dom.mergeProps;
+	}
+});
+exports.normalizeProps = require_utils.normalizeProps;
+exports.runIfFn = require_providers.runIfFn;
+exports.toBooleanValue = require_boolean.toBooleanValue;
+exports.useCollator = require_providers.useCollator;
+exports.useDateFormatter = require_providers.useDateFormatter;
+exports.useEmitAsProps = require_utils.useEmitAsProps;
+exports.useEnvironmentContext = require_providers.useEnvironmentContext;
+exports.useFilter = require_providers.useFilter;
+exports.useFocusVisible = require_providers.useFocusVisible;
+exports.useForwardExpose = require_utils.useForwardExpose;
+exports.useForwardProps = require_utils.useForwardProps;
+exports.useForwardPropsEmits = require_utils.useForwardPropsEmits;
+exports.useInteractionModality = require_providers.useInteractionModality;
+exports.useLocaleContext = require_providers.useLocaleContext;
+exports.useMachine = require_utils.useMachine;
+exports.useRenderStrategyProps = require_utils.useRenderStrategyProps;
+exports.useSyncExternalStore = require_utils.useSyncExternalStore;
+exports.useVModel = require_utils.useVModel;
+exports.wire = require_factory.wire;

package/dist/index.d.cts

@@ -0,0 +1,5 @@
+import { a as PolymorphicProps, i as HTMLWireProps, n as HTMLPolymorphicComponents, o as jsxFactory, r as HTMLPolymorphicProps, s as wire, t as AsChildComponent } from "./factory-BNwuanv4.cjs";
+import { a as MaybePromise, c as useMachine, i as EmitFn, l as PropTypes, n as Assign, o as Optional, r as BooleanDefaults, s as useSyncExternalStore, t as mergeProps, u as normalizeProps } from "./index-B-o8jLyV.cjs";
+import { A as createContext, C as UseEnvironmentContext, D as cleanProps, E as toBooleanValue, O as runIfFn, S as RootNode, T as createSplitProps, _ as UseFocusVisibleProps, a as UseFilterReturn, b as _default, c as UseDateFormatterReturn, d as UseCollatorReturn, f as useCollator, g as useInteractionModality, h as Modality, i as UseFilterProps, k as useEmitAsProps, l as useDateFormatter, m as _default$1, n as LocaleContext, o as useFilter, p as LocaleProviderProps, r as useLocaleContext, s as UseDateFormatterProps, t as DEFAULT_LOCALE, u as UseCollatorProps, v as useFocusVisible, w as useEnvironmentContext, x as DEFAULT_ENVIRONMENT, y as EnvironmentProviderProps } from "./index-Zc9P69Ka.cjs";
+import { a as Dynamic, c as useForwardExpose, i as useRenderStrategyProps, n as RenderStrategyProps, o as useForwardPropsEmits, r as RenderStrategyPropsProvider, s as useForwardProps, t as useVModel } from "./index-Cc4qS0rQ.cjs";
+export { AsChildComponent, Assign, BooleanDefaults, DEFAULT_ENVIRONMENT, DEFAULT_LOCALE, Dynamic, EmitFn, _default as EnvironmentProvider, type EnvironmentProviderProps, HTMLPolymorphicComponents, HTMLPolymorphicProps, HTMLWireProps, type LocaleContext, _default$1 as LocaleProvider, type LocaleProviderProps, MaybePromise, type Modality, Optional, PolymorphicProps, PropTypes, type RenderStrategyProps, RenderStrategyPropsProvider, type RootNode, type UseCollatorProps, type UseCollatorReturn, type UseDateFormatterProps, type UseDateFormatterReturn, type UseEnvironmentContext, type UseFilterProps, type UseFilterReturn, type UseFocusVisibleProps, cleanProps, createContext, createSplitProps, jsxFactory, mergeProps, normalizeProps, runIfFn, toBooleanValue, useCollator, useDateFormatter, useEmitAsProps, useEnvironmentContext, useFilter, useFocusVisible, useForwardExpose, useForwardProps, useForwardPropsEmits, useInteractionModality, useLocaleContext, useMachine, useRenderStrategyProps, useSyncExternalStore, useVModel, wire };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { a as PolymorphicProps, i as HTMLWireProps, n as HTMLPolymorphicComponents, o as jsxFactory, r as HTMLPolymorphicProps, s as wire, t as AsChildComponent } from "./factory-BNwuanv4.js";
+import { a as MaybePromise, c as useMachine, i as EmitFn, l as PropTypes, n as Assign, o as Optional, r as BooleanDefaults, s as useSyncExternalStore, t as mergeProps, u as normalizeProps } from "./index-BSoF1D-v.js";
+import { A as createContext, C as UseEnvironmentContext, D as cleanProps, E as toBooleanValue, O as runIfFn, S as RootNode, T as createSplitProps, _ as UseFocusVisibleProps, a as UseFilterReturn, b as _default, c as UseDateFormatterReturn, d as UseCollatorReturn, f as useCollator, g as useInteractionModality, h as Modality, i as UseFilterProps, k as useEmitAsProps, l as useDateFormatter, m as _default$1, n as LocaleContext, o as useFilter, p as LocaleProviderProps, r as useLocaleContext, s as UseDateFormatterProps, t as DEFAULT_LOCALE, u as UseCollatorProps, v as useFocusVisible, w as useEnvironmentContext, x as DEFAULT_ENVIRONMENT, y as EnvironmentProviderProps } from "./index-BTNfeIXf.js";
+import { a as Dynamic, c as useForwardExpose, i as useRenderStrategyProps, n as RenderStrategyProps, o as useForwardPropsEmits, r as RenderStrategyPropsProvider, s as useForwardProps, t as useVModel } from "./index-Cc4qS0rQ.js";
+export { AsChildComponent, Assign, BooleanDefaults, DEFAULT_ENVIRONMENT, DEFAULT_LOCALE, Dynamic, EmitFn, _default as EnvironmentProvider, type EnvironmentProviderProps, HTMLPolymorphicComponents, HTMLPolymorphicProps, HTMLWireProps, type LocaleContext, _default$1 as LocaleProvider, type LocaleProviderProps, MaybePromise, type Modality, Optional, PolymorphicProps, PropTypes, type RenderStrategyProps, RenderStrategyPropsProvider, type RootNode, type UseCollatorProps, type UseCollatorReturn, type UseDateFormatterProps, type UseDateFormatterReturn, type UseEnvironmentContext, type UseFilterProps, type UseFilterReturn, type UseFocusVisibleProps, cleanProps, createContext, createSplitProps, jsxFactory, mergeProps, normalizeProps, runIfFn, toBooleanValue, useCollator, useDateFormatter, useEmitAsProps, useEnvironmentContext, useFilter, useFocusVisible, useForwardExpose, useForwardProps, useForwardPropsEmits, useInteractionModality, useLocaleContext, useMachine, useRenderStrategyProps, useSyncExternalStore, useVModel, wire };

package/dist/index.js

@@ -0,0 +1,7 @@
+import { a as mergeProps, c as normalizeProps, d as useForwardExpose, i as Dynamic, l as useForwardPropsEmits, m as createContext, n as RenderStrategyPropsProvider, o as useSyncExternalStore, p as useEmitAsProps, r as useRenderStrategyProps, s as useMachine, t as useVModel, u as useForwardProps } from "./utils-D95V66v9.js";
+import { a as DEFAULT_LOCALE, c as useFocusVisible, d as useEnvironmentContext, f as runIfFn, i as _sfc_main$1, l as _sfc_main, n as useDateFormatter, o as useLocaleContext, r as useCollator, s as useInteractionModality, t as useFilter, u as DEFAULT_ENVIRONMENT } from "./providers-C3XQH-uu.js";
+import { t as cleanProps } from "./clean-props--1kqQE0Y.js";
+import { t as toBooleanValue } from "./boolean-BCaEpMxQ.js";
+import { t as createSplitProps } from "./create-split-props-BBxrD7TV.js";
+import { n as wire, t as jsxFactory } from "./factory-8Ao0DEy3.js";
+export { DEFAULT_ENVIRONMENT, DEFAULT_LOCALE, Dynamic, _sfc_main as EnvironmentProvider, _sfc_main$1 as LocaleProvider, RenderStrategyPropsProvider, cleanProps, createContext, createSplitProps, jsxFactory, mergeProps, normalizeProps, runIfFn, toBooleanValue, useCollator, useDateFormatter, useEmitAsProps, useEnvironmentContext, useFilter, useFocusVisible, useForwardExpose, useForwardProps, useForwardPropsEmits, useInteractionModality, useLocaleContext, useMachine, useRenderStrategyProps, useSyncExternalStore, useVModel, wire };

package/dist/json-tree-view.cjs

@@ -0,0 +1,346 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
+const require_utils = require("./utils-XrBZd2Yk.cjs");
+const require_create_split_props = require("./create-split-props-Jx-IEwdk.cjs");
+const require_collection = require("./collection-B0onOyyK.cjs");
+const require_tree_view = require("./tree-view-DnTVwhew.cjs");
+let vue = require("vue");
+let _wirekyt_dom_json_tree_utils = require("@wirekyt/dom/json-tree-utils");
+//#region src/components/json-tree-view/get-branch-value.ts
+function getBranchValues(tree, depth) {
+	let values = [];
+	tree.visit({ onEnter: (node, indexPath) => {
+		if (indexPath.length === 0) return;
+		if (tree.isBranchNode(node) && indexPath.length <= depth) values.push(tree.getNodeValue(node));
+	} });
+	return values;
+}
+//#endregion
+//#region src/components/json-tree-view/props-context.ts
+const [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = require_utils.createContext("JsonTreeViewPropsContext");
+//#endregion
+//#region src/components/json-tree-view/root.vue
+const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "root",
+	props: /*@__PURE__*/ (0, vue.mergeDefaults)({
+		data: {},
+		defaultExpandedDepth: {},
+		quotesOnKeys: { type: Boolean },
+		maxPreviewItems: {},
+		collapseStringsAfterLength: {},
+		groupArraysAfterLength: {},
+		showNonenumerable: { type: Boolean },
+		defaultExpandedValue: {},
+		defaultSelectedValue: {},
+		defaultCheckedValue: {},
+		defaultFocusedValue: {},
+		checkedValue: {},
+		expandOnClick: { type: Boolean },
+		expandedValue: {},
+		focusedValue: {},
+		id: {},
+		ids: {},
+		selectedValue: {},
+		selectionMode: {},
+		translations: {},
+		typeahead: { type: Boolean },
+		loadChildren: { type: Function },
+		canRename: { type: Function },
+		lazyMount: { type: Boolean },
+		unmountOnExit: { type: Boolean },
+		asChild: { type: Boolean }
+	}, {
+		expandOnClick: void 0,
+		typeahead: void 0,
+		lazyMount: void 0,
+		unmountOnExit: void 0,
+		asChild: void 0,
+		showNonenumerable: void 0,
+		quotesOnKeys: void 0
+	}),
+	setup(__props) {
+		const props = __props;
+		const [jsonTreeProps, localProps] = require_create_split_props.createSplitProps()(props, [
+			"maxPreviewItems",
+			"collapseStringsAfterLength",
+			"quotesOnKeys",
+			"groupArraysAfterLength",
+			"showNonenumerable"
+		]);
+		const { data, defaultExpandedDepth, ...restProps } = localProps;
+		const collection = (0, vue.computed)(() => {
+			return require_collection.createTreeCollection({
+				nodeToValue: _wirekyt_dom_json_tree_utils.nodeToValue,
+				nodeToString: _wirekyt_dom_json_tree_utils.nodeToString,
+				rootNode: (0, _wirekyt_dom_json_tree_utils.getRootNode)(data)
+			});
+		});
+		const defaultExpandedValue = (0, vue.computed)(() => {
+			const expandedValue = defaultExpandedDepth != null ? getBranchValues(collection.value, defaultExpandedDepth) : void 0;
+			return props.defaultExpandedValue || expandedValue;
+		});
+		JsonTreeViewPropsProvider((0, vue.computed)(() => jsonTreeProps));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_tree_view.tree_view_exports).Root, (0, vue.mergeProps)({ "data-scope": "json-tree-view" }, restProps, {
+				collection: collection.value,
+				defaultExpandedValue: defaultExpandedValue.value,
+				typeahead: false
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["collection", "defaultExpandedValue"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/json-tree-view/root-provider.vue
+const _sfc_main$1 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "root-provider",
+	props: {
+		value: {},
+		lazyMount: { type: Boolean },
+		unmountOnExit: { type: Boolean },
+		asChild: { type: Boolean }
+	},
+	setup(__props) {
+		const jsonTreeView = __props.value;
+		const treeView = (0, vue.computed)(() => {
+			const { options: _, ...rest } = jsonTreeView.value;
+			return rest;
+		});
+		JsonTreeViewPropsProvider((0, vue.computed)(() => jsonTreeView.value.options));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_tree_view._sfc_main$2), {
+				"data-scope": "json-tree-view",
+				value: treeView.value
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["value"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/json-tree-view/key-node.vue
+const _hoisted_1 = ["data-non-enumerable"];
+const _sfc_main$5 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "key-node",
+	props: {
+		node: {},
+		showQuotes: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const key = (0, vue.computed)(() => (0, _wirekyt_dom_json_tree_utils.keyPathToKey)(props.node.keyPath));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [(0, vue.createElementVNode)("span", {
+				"data-kind": "key",
+				"data-non-enumerable": __props.node.isNonEnumerable ? "" : void 0
+			}, (0, vue.toDisplayString)(__props.showQuotes ? `"${key.value}"` : key.value), 9, _hoisted_1), _cache[0] || (_cache[0] = (0, vue.createElementVNode)("span", { "data-kind": "colon" }, ":", -1))], 64);
+		};
+	}
+});
+//#endregion
+//#region src/components/json-tree-view/value-node.vue
+const _sfc_main$4 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "value-node",
+	props: { node: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			const _component_JsonTreeViewValueNode = (0, vue.resolveComponent)("JsonTreeViewValueNode");
+			return __props.node.type === "text" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [_ctx.$slots.renderValue ? (0, vue.renderSlot)(_ctx.$slots, "renderValue", { node: __props.node }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.node.value), 1)], void 0, 0) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.node.value), 1)], 64))], 64)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.node.tagName), {
+				key: 1,
+				"data-root": __props.node.properties.root ? "" : void 0,
+				"data-type": __props.node.properties.nodeType,
+				"data-kind": __props.node.properties.kind
+			}, {
+				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.node.children, (child, index) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)(_component_JsonTreeViewValueNode, {
+						key: index,
+						node: child
+					}, {
+						renderValue: (0, vue.withCtx)(({ node: childNode }) => [(0, vue.renderSlot)(_ctx.$slots, "renderValue", { node: childNode })]),
+						_: 3
+					}, 8, ["node"]);
+				}), 128))]),
+				_: 3
+			}, 8, [
+				"data-root",
+				"data-type",
+				"data-kind"
+			]));
+		};
+	}
+});
+//#endregion
+//#region src/components/json-tree-view/node.vue
+const _sfc_main$3 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "node",
+	props: {
+		node: {},
+		indexPath: {},
+		indentGuide: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const tree = require_tree_view.useTreeViewContext();
+		const nodeState = (0, vue.computed)(() => tree.value.getNodeState({
+			node: props.node,
+			indexPath: props.indexPath
+		}));
+		const options = useJsonTreeViewPropsContext();
+		const key = (0, vue.computed)(() => (0, _wirekyt_dom_json_tree_utils.keyPathToKey)(props.node.keyPath, { excludeRoot: true }));
+		const valueNode = (0, vue.computed)(() => (0, _wirekyt_dom_json_tree_utils.jsonNodeToElement)(props.node, (0, vue.toValue)(options)));
+		const nodeProps = (0, vue.computed)(() => {
+			const desc = (0, _wirekyt_dom_json_tree_utils.getAccessibleDescription)(props.node);
+			const line = props.indexPath.reduce((acc, curr) => acc + curr, 1);
+			const lineLength = props.indexPath.length - 1;
+			return {
+				"aria-label": desc,
+				"data-line": line,
+				style: { ["--line-length"]: lineLength }
+			};
+		});
+		return (_ctx, _cache) => {
+			const _component_JsonTreeViewNode = (0, vue.resolveComponent)("JsonTreeViewNode");
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_tree_view._sfc_main$3), {
+				node: __props.node,
+				"index-path": __props.indexPath
+			}, {
+				default: (0, vue.withCtx)(() => [nodeState.value.isBranch ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_tree_view._sfc_main$13), {
+					key: 0,
+					"data-scope": "json-tree-view"
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_tree_view._sfc_main$18), (0, vue.mergeProps)(nodeProps.value, { "data-scope": "json-tree-view" }), {
+						default: (0, vue.withCtx)(() => [_ctx.$slots.arrow ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_tree_view._sfc_main$16), {
+							key: 0,
+							"data-scope": "json-tree-view"
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "arrow")]),
+							_: 3
+						})) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)((0, vue.unref)(require_tree_view._sfc_main$15), { "data-scope": "json-tree-view" }, {
+							default: (0, vue.withCtx)(() => [key.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(_sfc_main$5, {
+								key: 0,
+								node: __props.node,
+								"show-quotes": (0, vue.unref)(options).quotesOnKeys
+							}, null, 8, ["node", "show-quotes"])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)(_sfc_main$4, { node: valueNode.value }, {
+								renderValue: (0, vue.withCtx)(({ node: childNode }) => [(0, vue.renderSlot)(_ctx.$slots, "renderValue", { node: childNode })]),
+								_: 3
+							}, 8, ["node"])]),
+							_: 3
+						})]),
+						_: 3
+					}, 16), (0, vue.createVNode)((0, vue.unref)(require_tree_view._sfc_main$19), { "data-scope": "json-tree-view" }, {
+						default: (0, vue.withCtx)(() => [_ctx.$slots.indentGuide ? (0, vue.renderSlot)(_ctx.$slots, "indentGuide", {}, void 0, void 0, 0) : __props.indentGuide ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_tree_view._sfc_main$17), { key: 1 })) : (0, vue.createCommentVNode)("v-if", true), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.node.children, (child, index) => {
+							return (0, vue.openBlock)(), (0, vue.createBlock)(_component_JsonTreeViewNode, (0, vue.mergeProps)({ key: index }, { ref_for: true }, _ctx.$props, {
+								node: child,
+								"index-path": [...__props.indexPath, index]
+							}), {
+								arrow: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "arrow")]),
+								indentGuide: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "indentGuide")]),
+								renderValue: (0, vue.withCtx)(({ node: childNode }) => [(0, vue.renderSlot)(_ctx.$slots, "renderValue", { node: childNode })]),
+								_: 3
+							}, 16, ["node", "index-path"]);
+						}), 128))]),
+						_: 3
+					})]),
+					_: 3
+				})) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_tree_view._sfc_main$9), (0, vue.mergeProps)({ key: 1 }, nodeProps.value, { "data-scope": "json-tree-view" }), {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_tree_view._sfc_main$10), { "data-scope": "json-tree-view" }, {
+						default: (0, vue.withCtx)(() => [key.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(_sfc_main$5, {
+							key: 0,
+							node: __props.node,
+							"show-quotes": (0, vue.unref)(options).quotesOnKeys
+						}, null, 8, ["node", "show-quotes"])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)(_sfc_main$4, { node: valueNode.value }, {
+							renderValue: (0, vue.withCtx)(({ node: childNode }) => [(0, vue.renderSlot)(_ctx.$slots, "renderValue", { node: childNode })]),
+							_: 3
+						}, 8, ["node"])]),
+						_: 3
+					})]),
+					_: 3
+				}, 16))]),
+				_: 3
+			}, 8, ["node", "index-path"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/json-tree-view/tree.vue
+const _sfc_main$2 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "tree",
+	props: {
+		asChild: { type: Boolean },
+		indentGuide: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const [nodeProps, treeProps] = require_create_split_props.createSplitProps()(props, ["indentGuide"]);
+		const tree = require_tree_view.useTreeViewContext();
+		const children = (0, vue.computed)(() => tree.value.collection.getNodeChildren(tree.value.collection.rootNode));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_tree_view._sfc_main), (0, vue.mergeProps)({ "data-scope": "json-tree-view" }, (0, vue.unref)(treeProps)), {
+				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(children.value, (child, index) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)(_sfc_main$3, (0, vue.mergeProps)({
+						key: index,
+						node: child,
+						"index-path": [index]
+					}, { ref_for: true }, (0, vue.unref)(nodeProps)), {
+						arrow: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "arrow")]),
+						indentGuide: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "indentGuide")]),
+						renderValue: (0, vue.withCtx)(({ node: childNode }) => [(0, vue.renderSlot)(_ctx.$slots, "renderValue", { node: childNode })]),
+						_: 3
+					}, 16, ["node", "index-path"]);
+				}), 128))]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+//#region src/components/json-tree-view/use-json-tree-view.ts
+const splitJsonTreeViewProps = require_create_split_props.createSplitProps();
+const useJsonTreeView = (props) => {
+	const [jsonTreeProps, localProps] = splitJsonTreeViewProps((0, vue.toValue)(props), [
+		"maxPreviewItems",
+		"collapseStringsAfterLength",
+		"quotesOnKeys",
+		"groupArraysAfterLength",
+		"showNonenumerable"
+	]);
+	const treeView = require_tree_view.useTreeView((0, vue.computed)(() => {
+		const { data, defaultExpandedDepth, ...restProps } = localProps;
+		const collection = require_collection.createTreeCollection({
+			nodeToValue: _wirekyt_dom_json_tree_utils.nodeToValue,
+			nodeToString: _wirekyt_dom_json_tree_utils.nodeToString,
+			rootNode: (0, _wirekyt_dom_json_tree_utils.getRootNode)(data)
+		});
+		return {
+			defaultExpandedValue: defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : void 0,
+			...restProps,
+			collection,
+			typeahead: false
+		};
+	}));
+	return (0, vue.computed)(() => ({
+		...treeView.value,
+		options: jsonTreeProps
+	}));
+};
+//#endregion
+//#region src/components/json-tree-view/json-tree-view.ts
+var json_tree_view_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	Root: () => _sfc_main,
+	RootProvider: () => _sfc_main$1,
+	Tree: () => _sfc_main$2
+});
+//#endregion
+Object.defineProperty(exports, "JsonTreeView", {
+	enumerable: true,
+	get: function() {
+		return json_tree_view_exports;
+	}
+});
+exports.JsonTreeViewRoot = _sfc_main;
+exports.JsonTreeViewRootProvider = _sfc_main$1;
+exports.JsonTreeViewTree = _sfc_main$2;
+exports.useJsonTreeView = useJsonTreeView;

package/dist/json-tree-view.d.cts

@@ -0,0 +1,86 @@
+import { l as PropTypes } from "./index-B-o8jLyV.cjs";
+import { _ as TreeViewRootBaseProps, h as TreeViewTreeProps, it as UseTreeViewProps, w as TreeViewRootProviderProps } from "./index-Di84rFjS.cjs";
+import { ComputedRef, HTMLAttributes, MaybeRef } from "vue";
+import { JsonNode, JsonNodeHastElement, JsonNodePreviewOptions } from "@wirekyt/dom/json-tree-utils";
+import * as treeView from "@wirekyt/dom/machines/tree-view";
+//#region src/components/json-tree-view/props-context.d.ts
+interface JsonTreeViewOptions extends Partial<JsonNodePreviewOptions> {
+  quotesOnKeys?: boolean;
+}
+//#endregion
+//#region src/components/json-tree-view/root.vue.d.ts
+interface JsonTreeViewRootBaseProps extends JsonTreeViewOptions, Omit<TreeViewRootBaseProps<JsonNode>, "collection"> {
+  data: object;
+  defaultExpandedDepth?: number;
+}
+interface JsonTreeViewRootProps extends JsonTreeViewRootBaseProps,
+/**
+ * @vue-ignore
+ */
+HTMLAttributes {}
+declare const _default: typeof __VLS_export$2;
+declare const __VLS_export$2: __VLS_WithSlots$2<import("vue").DefineComponent<JsonTreeViewRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<JsonTreeViewRootProps> & Readonly<{}>, {
+  asChild: boolean;
+  lazyMount: boolean;
+  unmountOnExit: boolean;
+  showNonenumerable: boolean;
+  expandOnClick: boolean;
+  typeahead: boolean;
+  quotesOnKeys: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+  default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots$2<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/json-tree-view/root-provider.vue.d.ts
+interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps<JsonNode> {}
+declare const _default$1: typeof __VLS_export$1;
+declare const __VLS_export$1: __VLS_WithSlots$1<import("vue").DefineComponent<JsonTreeViewRootProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<JsonTreeViewRootProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+  default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/json-tree-view/node.vue.d.ts
+interface JsonTreeViewNodeBaseProps {
+  indentGuide?: boolean;
+}
+//#endregion
+//#region src/components/json-tree-view/tree.vue.d.ts
+interface JsonTreeViewTreeBaseProps extends JsonTreeViewNodeBaseProps {}
+interface JsonTreeViewTreeProps extends TreeViewTreeProps, JsonTreeViewTreeBaseProps {}
+declare const _default$2: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<JsonTreeViewTreeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<JsonTreeViewTreeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+  arrow(): unknown;
+  indentGuide(): unknown;
+  renderValue(props: {
+    node: JsonNodeHastElement;
+  }): unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/json-tree-view/use-json-tree-view.d.ts
+interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, "collection">, JsonTreeViewOptions {
+  data: unknown;
+  defaultExpandedDepth?: number;
+}
+interface UseJsonTreeViewReturn extends ComputedRef<treeView.Api<PropTypes, JsonNode> & {
+  options: JsonTreeViewOptions;
+}> {}
+declare const useJsonTreeView: (props: MaybeRef<UseJsonTreeViewProps>) => UseJsonTreeViewReturn;
+declare namespace json_tree_view_d_exports {
+  export { _default as Root, JsonTreeViewRootBaseProps as RootBaseProps, JsonTreeViewRootProps as RootProps, _default$1 as RootProvider, JsonTreeViewRootProviderProps as RootProviderProps, _default$2 as Tree, JsonTreeViewTreeBaseProps as TreeBaseProps, JsonTreeViewTreeProps as TreeProps };
+}
+//#endregion
+export { json_tree_view_d_exports as JsonTreeView, _default as JsonTreeViewRoot, type JsonTreeViewRootProps, _default$1 as JsonTreeViewRootProvider, type JsonTreeViewRootProviderProps, _default$2 as JsonTreeViewTree, type JsonTreeViewTreeProps, type UseJsonTreeViewProps, type UseJsonTreeViewReturn, useJsonTreeView };