@wirekyt/vue 0.0.1 → 0.0.2

package/dist/format.cjs

@@ -0,0 +1,116 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
+const require_providers = require("./providers-5QhcwgSd.cjs");
+let vue = require("vue");
+let _wirekyt_dom_i18n_utils = require("@wirekyt/dom/i18n-utils");
+//#region src/components/format/byte.vue
+const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "byte",
+	props: {
+		unit: {},
+		unitDisplay: {},
+		unitSystem: {},
+		value: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const locale = require_providers.useLocaleContext(require_providers.DEFAULT_LOCALE);
+		const text = (0, vue.computed)(() => {
+			const { value, ...otherProps } = props;
+			return (0, _wirekyt_dom_i18n_utils.formatBytes)(value, locale.value.locale, otherProps);
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.toDisplayString)(text.value);
+		};
+	}
+});
+//#endregion
+//#region src/components/format/number.vue
+const _sfc_main$1 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "number",
+	props: {
+		value: {},
+		compactDisplay: {},
+		notation: {},
+		signDisplay: {},
+		unit: {},
+		unitDisplay: {},
+		currencyDisplay: {},
+		currencySign: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const locale = require_providers.useLocaleContext(require_providers.DEFAULT_LOCALE);
+		const text = (0, vue.computed)(() => {
+			const { value, ...intlProps } = props;
+			return (0, _wirekyt_dom_i18n_utils.formatNumber)(value, locale.value.locale, intlProps);
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.toDisplayString)(text.value);
+		};
+	}
+});
+//#endregion
+//#region src/components/format/relative-time.vue
+const _sfc_main$2 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "relative-time",
+	props: {
+		value: {},
+		localeMatcher: {},
+		numeric: {},
+		style: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const locale = require_providers.useLocaleContext(require_providers.DEFAULT_LOCALE);
+		const text = (0, vue.computed)(() => {
+			const { value, ...intlProps } = props;
+			return (0, _wirekyt_dom_i18n_utils.formatRelativeTime)(value, locale.value.locale, intlProps);
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.toDisplayString)(text.value);
+		};
+	}
+});
+//#endregion
+//#region src/components/format/time.vue
+const _sfc_main$3 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "time",
+	props: {
+		value: {},
+		format: {},
+		amLabel: {},
+		pmLabel: {},
+		withSeconds: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const locale = require_providers.useLocaleContext(require_providers.DEFAULT_LOCALE);
+		const text = (0, vue.computed)(() => {
+			const { value, ...intlProps } = props;
+			return (0, _wirekyt_dom_i18n_utils.formatTime)(value, locale.value.locale, intlProps);
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.toDisplayString)(text.value);
+		};
+	}
+});
+//#endregion
+//#region src/components/format/format.ts
+var format_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	Byte: () => _sfc_main,
+	Number: () => _sfc_main$1,
+	RelativeTime: () => _sfc_main$2,
+	Time: () => _sfc_main$3
+});
+//#endregion
+Object.defineProperty(exports, "Format", {
+	enumerable: true,
+	get: function() {
+		return format_exports;
+	}
+});
+exports.FormatByte = _sfc_main;
+exports.FormatNumber = _sfc_main$1;
+exports.FormatRelativeTime = _sfc_main$2;
+exports.FormatTime = _sfc_main$3;

package/dist/format.d.cts

@@ -0,0 +1,46 @@
+import { FormatTimeOptions } from "@wirekyt/dom/i18n-utils";
+//#region src/components/format/byte.vue.d.ts
+interface FormatByteProps {
+  unit?: "bit" | "byte";
+  unitDisplay?: "long" | "short" | "narrow";
+  unitSystem?: "decimal" | "binary";
+  value: number;
+}
+declare const _default: typeof __VLS_export$3;
+declare const __VLS_export$3: import("vue").DefineComponent<FormatByteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormatByteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//#endregion
+//#region src/components/format/number.vue.d.ts
+interface FormatNumberProps {
+  value: number;
+  compactDisplay?: "short" | "long" | undefined;
+  notation?: "standard" | "scientific" | "engineering" | "compact" | undefined;
+  signDisplay?: "auto" | "never" | "always" | "exceptZero" | undefined;
+  unit?: string | undefined;
+  unitDisplay?: "short" | "long" | "narrow" | undefined;
+  currencyDisplay?: string | undefined;
+  currencySign?: string | undefined;
+}
+declare const _default$1: typeof __VLS_export$2;
+declare const __VLS_export$2: import("vue").DefineComponent<FormatNumberProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormatNumberProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//#endregion
+//#region src/components/format/relative-time.vue.d.ts
+interface FormatRelativeTimeProps {
+  value: Date;
+  localeMatcher?: Intl.RelativeTimeFormatLocaleMatcher;
+  numeric?: Intl.RelativeTimeFormatNumeric;
+  style?: Intl.RelativeTimeFormatStyle;
+}
+declare const _default$2: typeof __VLS_export$1;
+declare const __VLS_export$1: import("vue").DefineComponent<FormatRelativeTimeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormatRelativeTimeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//#endregion
+//#region src/components/format/time.vue.d.ts
+interface FormatTimeProps extends FormatTimeOptions {
+  value: string | Date;
+}
+declare const _default$3: typeof __VLS_export;
+declare const __VLS_export: import("vue").DefineComponent<FormatTimeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormatTimeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare namespace format_d_exports {
+  export { _default as Byte, FormatByteProps as ByteBaseProps, FormatByteProps as ByteProps, _default$1 as Number, FormatNumberProps as NumberBaseProps, FormatNumberProps as NumberProps, _default$2 as RelativeTime, FormatRelativeTimeProps as RelativeTimeBaseProps, FormatRelativeTimeProps as RelativeTimeProps, _default$3 as Time, FormatTimeProps as TimeBaseProps, FormatTimeProps as TimeProps };
+}
+//#endregion
+export { format_d_exports as Format, _default as FormatByte, type FormatByteProps, _default$1 as FormatNumber, type FormatNumberProps, _default$2 as FormatRelativeTime, type FormatRelativeTimeProps, _default$3 as FormatTime, type FormatTimeProps };

package/dist/format.d.ts

@@ -0,0 +1,46 @@
+import { FormatTimeOptions } from "@wirekyt/dom/i18n-utils";
+//#region src/components/format/byte.vue.d.ts
+interface FormatByteProps {
+  unit?: "bit" | "byte";
+  unitDisplay?: "long" | "short" | "narrow";
+  unitSystem?: "decimal" | "binary";
+  value: number;
+}
+declare const _default: typeof __VLS_export$3;
+declare const __VLS_export$3: import("vue").DefineComponent<FormatByteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormatByteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//#endregion
+//#region src/components/format/number.vue.d.ts
+interface FormatNumberProps {
+  value: number;
+  compactDisplay?: "short" | "long" | undefined;
+  notation?: "standard" | "scientific" | "engineering" | "compact" | undefined;
+  signDisplay?: "auto" | "never" | "always" | "exceptZero" | undefined;
+  unit?: string | undefined;
+  unitDisplay?: "short" | "long" | "narrow" | undefined;
+  currencyDisplay?: string | undefined;
+  currencySign?: string | undefined;
+}
+declare const _default$1: typeof __VLS_export$2;
+declare const __VLS_export$2: import("vue").DefineComponent<FormatNumberProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormatNumberProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//#endregion
+//#region src/components/format/relative-time.vue.d.ts
+interface FormatRelativeTimeProps {
+  value: Date;
+  localeMatcher?: Intl.RelativeTimeFormatLocaleMatcher;
+  numeric?: Intl.RelativeTimeFormatNumeric;
+  style?: Intl.RelativeTimeFormatStyle;
+}
+declare const _default$2: typeof __VLS_export$1;
+declare const __VLS_export$1: import("vue").DefineComponent<FormatRelativeTimeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormatRelativeTimeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//#endregion
+//#region src/components/format/time.vue.d.ts
+interface FormatTimeProps extends FormatTimeOptions {
+  value: string | Date;
+}
+declare const _default$3: typeof __VLS_export;
+declare const __VLS_export: import("vue").DefineComponent<FormatTimeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormatTimeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare namespace format_d_exports {
+  export { _default as Byte, FormatByteProps as ByteBaseProps, FormatByteProps as ByteProps, _default$1 as Number, FormatNumberProps as NumberBaseProps, FormatNumberProps as NumberProps, _default$2 as RelativeTime, FormatRelativeTimeProps as RelativeTimeBaseProps, FormatRelativeTimeProps as RelativeTimeProps, _default$3 as Time, FormatTimeProps as TimeBaseProps, FormatTimeProps as TimeProps };
+}
+//#endregion
+export { format_d_exports as Format, _default as FormatByte, type FormatByteProps, _default$1 as FormatNumber, type FormatNumberProps, _default$2 as FormatRelativeTime, type FormatRelativeTimeProps, _default$3 as FormatTime, type FormatTimeProps };

package/dist/format.js

@@ -0,0 +1,106 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { a as DEFAULT_LOCALE, o as useLocaleContext } from "./providers-C3XQH-uu.js";
+import { computed, defineComponent, toDisplayString } from "vue";
+import { formatBytes, formatNumber, formatRelativeTime, formatTime } from "@wirekyt/dom/i18n-utils";
+//#region src/components/format/byte.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "byte",
+	props: {
+		unit: {},
+		unitDisplay: {},
+		unitSystem: {},
+		value: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const locale = useLocaleContext(DEFAULT_LOCALE);
+		const text = computed(() => {
+			const { value, ...otherProps } = props;
+			return formatBytes(value, locale.value.locale, otherProps);
+		});
+		return (_ctx, _cache) => {
+			return toDisplayString(text.value);
+		};
+	}
+});
+//#endregion
+//#region src/components/format/number.vue
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "number",
+	props: {
+		value: {},
+		compactDisplay: {},
+		notation: {},
+		signDisplay: {},
+		unit: {},
+		unitDisplay: {},
+		currencyDisplay: {},
+		currencySign: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const locale = useLocaleContext(DEFAULT_LOCALE);
+		const text = computed(() => {
+			const { value, ...intlProps } = props;
+			return formatNumber(value, locale.value.locale, intlProps);
+		});
+		return (_ctx, _cache) => {
+			return toDisplayString(text.value);
+		};
+	}
+});
+//#endregion
+//#region src/components/format/relative-time.vue
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	__name: "relative-time",
+	props: {
+		value: {},
+		localeMatcher: {},
+		numeric: {},
+		style: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const locale = useLocaleContext(DEFAULT_LOCALE);
+		const text = computed(() => {
+			const { value, ...intlProps } = props;
+			return formatRelativeTime(value, locale.value.locale, intlProps);
+		});
+		return (_ctx, _cache) => {
+			return toDisplayString(text.value);
+		};
+	}
+});
+//#endregion
+//#region src/components/format/time.vue
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	__name: "time",
+	props: {
+		value: {},
+		format: {},
+		amLabel: {},
+		pmLabel: {},
+		withSeconds: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const locale = useLocaleContext(DEFAULT_LOCALE);
+		const text = computed(() => {
+			const { value, ...intlProps } = props;
+			return formatTime(value, locale.value.locale, intlProps);
+		});
+		return (_ctx, _cache) => {
+			return toDisplayString(text.value);
+		};
+	}
+});
+//#endregion
+//#region src/components/format/format.ts
+var format_exports = /* @__PURE__ */ __exportAll({
+	Byte: () => _sfc_main,
+	Number: () => _sfc_main$1,
+	RelativeTime: () => _sfc_main$2,
+	Time: () => _sfc_main$3
+});
+//#endregion
+export { format_exports as Format, _sfc_main as FormatByte, _sfc_main$1 as FormatNumber, _sfc_main$2 as FormatRelativeTime, _sfc_main$3 as FormatTime };

package/dist/frame.cjs

@@ -0,0 +1,93 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_providers = require("./providers-5QhcwgSd.cjs");
+let vue = require("vue");
+//#region src/components/frame/content.vue
+const _sfc_main$1 = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "content",
+	emits: ["mount", "unmount"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		(0, vue.onMounted)(() => {
+			emit("mount");
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			emit("unmount");
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.renderSlot)(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+//#region src/components/frame/frame.vue
+const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "frame",
+	props: {
+		head: {},
+		srcDoc: { default: "<html><head><style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style></head><body><div class=\"frame-root\"></div></body></html>" }
+	},
+	emits: ["mount", "unmount"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const props = __props;
+		const frameRef = (0, vue.ref)(null);
+		const mountNode = (0, vue.ref)(null);
+		__expose({ frameRef });
+		function getMountNode(frame) {
+			const doc = frame.contentWindow?.document;
+			if (!doc) return null;
+			return doc.body.querySelector(".frame-root") || doc.body;
+		}
+		(0, vue.watch)(frameRef, (node) => {
+			if (!node) return;
+			const doc = node.contentWindow?.document;
+			if (!doc) return;
+			doc.open();
+			doc.write(props.srcDoc);
+			doc.close();
+			mountNode.value = getMountNode(node);
+		});
+		(0, vue.watch)(() => [frameRef.value, mountNode.value], ([frameNode, mountNode], _oldValue, onCleanup) => {
+			if (!frameNode || !frameNode.contentDocument) return;
+			const win = frameNode.contentWindow;
+			if (!win) return;
+			const exec = () => {
+				win.requestAnimationFrame(() => {
+					if (!frameNode.contentDocument?.documentElement || !mountNode) return;
+					frameNode.style.setProperty("--width", `${mountNode.scrollWidth}px`);
+					frameNode.style.setProperty("--height", `${mountNode.scrollHeight}px`);
+				});
+			};
+			const resizeObserver = new win.ResizeObserver(exec);
+			exec();
+			if (mountNode) resizeObserver.observe(mountNode);
+			onCleanup(() => {
+				resizeObserver.disconnect();
+			});
+		});
+		const env = () => frameRef.value?.contentDocument ?? document;
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_providers._sfc_main$1), { value: env }, {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("iframe", (0, vue.mergeProps)({
+					ref_key: "frameRef",
+					ref: frameRef
+				}, _ctx.$attrs), [mountNode.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
+					key: 0,
+					to: mountNode.value
+				}, [(0, vue.createVNode)(_sfc_main$1, {
+					onMount: _cache[0] || (_cache[0] = ($event) => emit("mount")),
+					onUnmount: _cache[1] || (_cache[1] = ($event) => emit("unmount"))
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					_: 3
+				})], 8, ["to"])) : (0, vue.createCommentVNode)("v-if", true), frameRef.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
+					key: 1,
+					to: frameRef.value.contentDocument.head
+				}, [(0, vue.renderSlot)(_ctx.$slots, "head")], 8, ["to"])) : (0, vue.createCommentVNode)("v-if", true)], 16)]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+exports.Frame = _sfc_main;

package/dist/frame.d.cts

@@ -0,0 +1,37 @@
+import { IframeHTMLAttributes, VNode } from "vue";
+//#region src/components/frame/frame.vue.d.ts
+interface FrameBaseProps {
+  head?: VNode | VNode[];
+  srcDoc?: string;
+}
+interface FrameProps extends FrameBaseProps,
+/**
+ * @vue-ignore
+ */
+IframeHTMLAttributes {}
+declare var __VLS_23: {}, __VLS_31: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_23) => any;
+} & {
+  head?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FrameProps, {
+  frameRef: import("vue").Ref<HTMLIFrameElement | null, HTMLIFrameElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+  mount: () => any;
+  unmount: () => any;
+}, string, import("vue").PublicProps, Readonly<FrameProps> & Readonly<{
+  onMount?: (() => any) | undefined;
+  onUnmount?: (() => any) | undefined;
+}>, {
+  srcDoc: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as Frame, type FrameBaseProps, type FrameProps };

package/dist/frame.d.ts

@@ -0,0 +1,37 @@
+import { IframeHTMLAttributes, VNode } from "vue";
+//#region src/components/frame/frame.vue.d.ts
+interface FrameBaseProps {
+  head?: VNode | VNode[];
+  srcDoc?: string;
+}
+interface FrameProps extends FrameBaseProps,
+/**
+ * @vue-ignore
+ */
+IframeHTMLAttributes {}
+declare var __VLS_23: {}, __VLS_31: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_23) => any;
+} & {
+  head?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FrameProps, {
+  frameRef: import("vue").Ref<HTMLIFrameElement | null, HTMLIFrameElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+  mount: () => any;
+  unmount: () => any;
+}, string, import("vue").PublicProps, Readonly<FrameProps> & Readonly<{
+  onMount?: (() => any) | undefined;
+  onUnmount?: (() => any) | undefined;
+}>, {
+  srcDoc: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as Frame, type FrameBaseProps, type FrameProps };

package/dist/frame.js

@@ -0,0 +1,92 @@
+import { l as _sfc_main$2 } from "./providers-C3XQH-uu.js";
+import { Teleport, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, watch, withCtx } from "vue";
+//#region src/components/frame/content.vue
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "content",
+	emits: ["mount", "unmount"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		onMounted(() => {
+			emit("mount");
+		});
+		onBeforeUnmount(() => {
+			emit("unmount");
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+//#region src/components/frame/frame.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "frame",
+	props: {
+		head: {},
+		srcDoc: { default: "<html><head><style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style></head><body><div class=\"frame-root\"></div></body></html>" }
+	},
+	emits: ["mount", "unmount"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const props = __props;
+		const frameRef = ref(null);
+		const mountNode = ref(null);
+		__expose({ frameRef });
+		function getMountNode(frame) {
+			const doc = frame.contentWindow?.document;
+			if (!doc) return null;
+			return doc.body.querySelector(".frame-root") || doc.body;
+		}
+		watch(frameRef, (node) => {
+			if (!node) return;
+			const doc = node.contentWindow?.document;
+			if (!doc) return;
+			doc.open();
+			doc.write(props.srcDoc);
+			doc.close();
+			mountNode.value = getMountNode(node);
+		});
+		watch(() => [frameRef.value, mountNode.value], ([frameNode, mountNode], _oldValue, onCleanup) => {
+			if (!frameNode || !frameNode.contentDocument) return;
+			const win = frameNode.contentWindow;
+			if (!win) return;
+			const exec = () => {
+				win.requestAnimationFrame(() => {
+					if (!frameNode.contentDocument?.documentElement || !mountNode) return;
+					frameNode.style.setProperty("--width", `${mountNode.scrollWidth}px`);
+					frameNode.style.setProperty("--height", `${mountNode.scrollHeight}px`);
+				});
+			};
+			const resizeObserver = new win.ResizeObserver(exec);
+			exec();
+			if (mountNode) resizeObserver.observe(mountNode);
+			onCleanup(() => {
+				resizeObserver.disconnect();
+			});
+		});
+		const env = () => frameRef.value?.contentDocument ?? document;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(_sfc_main$2), { value: env }, {
+				default: withCtx(() => [createElementVNode("iframe", mergeProps({
+					ref_key: "frameRef",
+					ref: frameRef
+				}, _ctx.$attrs), [mountNode.value ? (openBlock(), createBlock(Teleport, {
+					key: 0,
+					to: mountNode.value
+				}, [createVNode(_sfc_main$1, {
+					onMount: _cache[0] || (_cache[0] = ($event) => emit("mount")),
+					onUnmount: _cache[1] || (_cache[1] = ($event) => emit("unmount"))
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				})], 8, ["to"])) : createCommentVNode("v-if", true), frameRef.value ? (openBlock(), createBlock(Teleport, {
+					key: 1,
+					to: frameRef.value.contentDocument.head
+				}, [renderSlot(_ctx.$slots, "head")], 8, ["to"])) : createCommentVNode("v-if", true)], 16)]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { _sfc_main as Frame };

package/dist/highlight.cjs

@@ -0,0 +1,44 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./utils-XrBZd2Yk.cjs");
+const require_clean_props = require("./clean-props-MyKqus13.cjs");
+let vue = require("vue");
+let _wirekyt_dom_highlight_word = require("@wirekyt/dom/highlight-word");
+//#region src/components/highlight/use-highlight.ts
+const useHighlight = (props) => {
+	return (0, vue.computed)(() => (0, _wirekyt_dom_highlight_word.highlightWord)(require_clean_props.cleanProps((0, vue.toValue)(props))));
+};
+//#endregion
+//#region src/components/highlight/highlight.vue
+const _hoisted_1 = { key: 0 };
+const _sfc_main = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "highlight",
+	props: {
+		text: {},
+		query: {},
+		ignoreCase: {
+			type: Boolean,
+			default: void 0
+		},
+		matchAll: {
+			type: Boolean,
+			default: void 0
+		},
+		exactMatch: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		if (typeof props.text !== "string") throw new Error("[ark-ui/highlight] text must be a string");
+		const chunks = useHighlight(props);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(chunks), (chunk) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [chunk.match ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("mark", _hoisted_1, (0, vue.toDisplayString)(chunk.text), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(chunk.text), 1)], 64))], 64);
+			}), 256);
+		};
+	}
+});
+//#endregion
+exports.Highlight = _sfc_main;
+exports.useHighlight = useHighlight;

package/dist/highlight.d.cts

@@ -0,0 +1,32 @@
+import { HTMLAttributes, MaybeRef } from "vue";
+//#region src/components/highlight/types.d.ts
+interface UseHighlightProps {
+  text: string;
+  query: string | string[];
+  ignoreCase?: boolean;
+  matchAll?: boolean;
+  exactMatch?: boolean;
+}
+interface HighlightChunk {
+  text: string;
+  match: boolean;
+}
+//#endregion
+//#region src/components/highlight/use-highlight.d.ts
+declare const useHighlight: (props: MaybeRef<UseHighlightProps>) => import("vue").ComputedRef<import("@wirekyt/dom/highlight-word").HighlightChunk[]>;
+//#endregion
+//#region src/components/highlight/highlight.vue.d.ts
+interface HighlightBaseProps extends UseHighlightProps {}
+interface HighlightProps extends HighlightBaseProps,
+/**
+ * @vue-ignore
+ */
+HTMLAttributes {}
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: import("vue").DefineComponent<HighlightProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HighlightProps> & Readonly<{}>, {
+  ignoreCase: boolean;
+  matchAll: boolean;
+  exactMatch: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//#endregion
+export { _default as Highlight, type HighlightChunk, type HighlightProps, type UseHighlightProps, useHighlight };