@sprawlify/solid 0.0.16 → 0.0.18

package/dist/components/floating-panel/index.jsx

@@ -0,0 +1,217 @@
+import { t as __export } from "../../chunk-BJ7z6UrO.jsx";
+import { i as useMachine, n as normalizeProps, r as mergeProps$1 } from "../../core-C_FYj4uc.jsx";
+import { t as runIfFn } from "../../run-if-fn-CrJzzDIM.jsx";
+import { t as createContext$1 } from "../../create-context-BwqlrMqL.jsx";
+import { i as useLocaleContext, o as useEnvironmentContext } from "../../providers-C6VPiSrB.jsx";
+import { t as sprawlify } from "../../factory-BIJk1mK6.jsx";
+import { t as createSplitProps } from "../../create-split-props-CKwjjjkD.jsx";
+import "../../render-strategy-KJFIjVVG.jsx";
+import "../../compose-refs-Cp4AShsY.jsx";
+import { a as splitPresenceProps, i as usePresence, n as usePresenceContext, t as PresenceProvider } from "../../presence-H4-8_5_s.jsx";
+import { Show, createMemo, createUniqueId } from "solid-js";
+import * as floatingPanel from "@sprawlify/primitives/machines/floating-panel";
+import { anatomy as floatingPanelAnatomy } from "@sprawlify/primitives/machines/floating-panel";
+
+//#region src/components/floating-panel/use-floating-panel-context.ts
+const [FloatingPanelProvider, useFloatingPanelContext] = createContext$1({
+	hookName: "useFloatingPanelContext",
+	providerName: "<FloatingPanelProvider />"
+});
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-body.tsx
+const FloatingPanelBody = (props) => {
+	const floatingPanel$1 = useFloatingPanelContext();
+	const mergedProps = mergeProps$1(() => floatingPanel$1().getBodyProps(), props);
+	return <sprawlify.div {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-close-trigger.tsx
+const FloatingPanelCloseTrigger = (props) => {
+	const floatingPanel$1 = useFloatingPanelContext();
+	const mergedProps = mergeProps$1(() => floatingPanel$1().getCloseTriggerProps(), props);
+	return <sprawlify.button {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-content.tsx
+const FloatingPanelContent = (props) => {
+	const floatingPanel$1 = useFloatingPanelContext();
+	const presence = usePresenceContext();
+	const mergedProps = mergeProps$1(() => floatingPanel$1().getContentProps(), () => presence().presenceProps, props);
+	return <Show when={!presence().unmounted}>
+      <sprawlify.div {...mergedProps} />
+    </Show>;
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-context.tsx
+const FloatingPanelContext = (props) => props.children(useFloatingPanelContext());
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-drag-trigger.tsx
+const FloatingPanelDragTrigger = (props) => {
+	const floatingPanel$1 = useFloatingPanelContext();
+	const mergedProps = mergeProps$1(() => floatingPanel$1().getDragTriggerProps(), props);
+	return <sprawlify.div {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-header.tsx
+const FloatingPanelHeader = (props) => {
+	const floatingPanel$1 = useFloatingPanelContext();
+	const mergedProps = mergeProps$1(() => floatingPanel$1().getHeaderProps(), props);
+	return <sprawlify.div {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-positioner.tsx
+const FloatingPanelPositioner = (props) => {
+	const floatingPanel$1 = useFloatingPanelContext();
+	const mergedProps = mergeProps$1(() => floatingPanel$1().getPositionerProps(), props);
+	const presence = usePresenceContext();
+	return <Show when={!presence().unmounted}>
+      <sprawlify.div {...mergedProps} />
+    </Show>;
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-resize-trigger.tsx
+const FloatingPanelResizeTrigger = (props) => {
+	const [resizeProps, localProps] = createSplitProps()(props, ["axis"]);
+	const floatingPanel$1 = useFloatingPanelContext();
+	const mergedProps = mergeProps$1(() => floatingPanel$1().getResizeTriggerProps(resizeProps), localProps);
+	return <sprawlify.div {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-stage-trigger.tsx
+const FloatingPanelStageTrigger = (props) => {
+	const [stage, localProps] = createSplitProps()(props, ["stage"]);
+	const floatingPanel$1 = useFloatingPanelContext();
+	const mergedProps = mergeProps$1(() => floatingPanel$1().getStageTriggerProps(stage), localProps);
+	return <sprawlify.button {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/floating-panel/use-floating-panel.ts
+const useFloatingPanel = (props = {}) => {
+	const env = useEnvironmentContext();
+	const locale = useLocaleContext();
+	const id = createUniqueId();
+	const machineProps = createMemo(() => ({
+		id,
+		dir: locale().dir,
+		getRootNode: env().getRootNode,
+		...runIfFn(props)
+	}));
+	const service = useMachine(floatingPanel.machine, machineProps);
+	return createMemo(() => floatingPanel.connect(service, normalizeProps));
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-root.tsx
+const FloatingPanelRoot = (props) => {
+	const [presenceProps, otherProps] = splitPresenceProps(props);
+	const [useFloatingPanelProps, localProps] = createSplitProps()(otherProps, [
+		"allowOverflow",
+		"closeOnEscape",
+		"defaultOpen",
+		"defaultPosition",
+		"defaultSize",
+		"dir",
+		"disabled",
+		"draggable",
+		"getAnchorPosition",
+		"getBoundaryEl",
+		"gridSize",
+		"id",
+		"ids",
+		"lockAspectRatio",
+		"maxSize",
+		"minSize",
+		"onOpenChange",
+		"onPositionChange",
+		"onPositionChangeEnd",
+		"onSizeChange",
+		"onSizeChangeEnd",
+		"onStageChange",
+		"open",
+		"persistRect",
+		"position",
+		"resizable",
+		"size",
+		"strategy",
+		"translations"
+	]);
+	const floatingPanel$1 = useFloatingPanel(useFloatingPanelProps);
+	const presence = usePresence(mergeProps$1(() => ({ present: floatingPanel$1().open }), presenceProps));
+	return <FloatingPanelProvider value={floatingPanel$1}>
+      <PresenceProvider value={presence}>{localProps.children}</PresenceProvider>
+    </FloatingPanelProvider>;
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-root-provider.tsx
+const FloatingPanelRootProvider = (props) => {
+	const [presenceProps, baseProps] = splitPresenceProps(props);
+	const [rootProps, localProps] = createSplitProps()(baseProps, ["value"]);
+	const presence = usePresence(mergeProps$1(() => ({ present: rootProps.value().open }), presenceProps));
+	return <FloatingPanelProvider value={rootProps.value}>
+      <PresenceProvider value={presence}>{localProps.children}</PresenceProvider>
+    </FloatingPanelProvider>;
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-title.tsx
+const FloatingPanelTitle = (props) => {
+	const floatingPanel$1 = useFloatingPanelContext();
+	const mergedProps = mergeProps$1(() => floatingPanel$1().getTitleProps(), props);
+	return <sprawlify.h2 {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-trigger.tsx
+const FloatingPanelTrigger = (props) => {
+	const floatingPanel$1 = useFloatingPanelContext();
+	const presence = usePresenceContext();
+	const mergedProps = mergeProps$1(() => {
+		const triggerProps = floatingPanel$1().getTriggerProps();
+		return {
+			...triggerProps,
+			"aria-controls": presence().unmounted ? void 0 : triggerProps["aria-controls"]
+		};
+	}, props);
+	return <sprawlify.button {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel-control.tsx
+const FloatingPanelControl = (props) => {
+	const floatingPanel$1 = useFloatingPanelContext();
+	const mergedProps = mergeProps$1(() => floatingPanel$1().getControlProps(), props);
+	return <sprawlify.div {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/floating-panel/floating-panel.ts
+var floating_panel_exports = /* @__PURE__ */ __export({
+	Body: () => FloatingPanelBody,
+	CloseTrigger: () => FloatingPanelCloseTrigger,
+	Content: () => FloatingPanelContent,
+	Context: () => FloatingPanelContext,
+	Control: () => FloatingPanelControl,
+	DragTrigger: () => FloatingPanelDragTrigger,
+	Header: () => FloatingPanelHeader,
+	Positioner: () => FloatingPanelPositioner,
+	ResizeTrigger: () => FloatingPanelResizeTrigger,
+	Root: () => FloatingPanelRoot,
+	RootProvider: () => FloatingPanelRootProvider,
+	StageTrigger: () => FloatingPanelStageTrigger,
+	Title: () => FloatingPanelTitle,
+	Trigger: () => FloatingPanelTrigger
+});
+
+//#endregion
+export { floating_panel_exports as FloatingPanel, FloatingPanelBody, FloatingPanelCloseTrigger, FloatingPanelContent, FloatingPanelContext, FloatingPanelControl, FloatingPanelDragTrigger, FloatingPanelHeader, FloatingPanelPositioner, FloatingPanelResizeTrigger, FloatingPanelRoot, FloatingPanelRootProvider, FloatingPanelStageTrigger, FloatingPanelTitle, FloatingPanelTrigger, floatingPanelAnatomy, useFloatingPanel, useFloatingPanelContext };

package/dist/components/focus-trap/index.d.ts

@@ -0,0 +1,17 @@
+import { t as Assign } from "../../types-mGUbKy2h.js";
+import { r as PolymorphicProps, t as HTMLProps } from "../../factory-srnAQg4A.js";
+import * as solid_js168 from "solid-js";
+import { FocusTrapOptions } from "@sprawlify/primitives/focus-trap";
+
+//#region src/components/focus-trap/focus-trap.d.ts
+interface TrapOptions extends Pick<FocusTrapOptions, 'onActivate' | 'onDeactivate' | 'initialFocus' | 'fallbackFocus' | 'returnFocusOnDeactivate' | 'setReturnFocus'> {
+  /**
+   * Whether the focus trap is disabled.
+   */
+  disabled?: boolean;
+}
+interface FocusTrapBaseProps extends PolymorphicProps<'div'>, TrapOptions {}
+interface FocusTrapProps extends Assign<HTMLProps<'div'>, FocusTrapBaseProps> {}
+declare const FocusTrap: (props: FocusTrapProps) => solid_js168.JSX.Element;
+//#endregion
+export { FocusTrap, type FocusTrapBaseProps, type FocusTrapProps };

package/dist/components/focus-trap/index.js

@@ -0,0 +1,34 @@
+import "../../core-CRjuRw95.js";
+import { t as sprawlify } from "../../factory-k8EbNZ7r.js";
+import { t as createSplitProps } from "../../create-split-props-BHmgTHSf.js";
+import { t as composeRefs } from "../../compose-refs-tCBI7PRJ.js";
+import { createEffect, onCleanup } from "solid-js";
+import { createComponent, mergeProps as mergeProps$1 } from "solid-js/web";
+import { trapFocus } from "@sprawlify/primitives/focus-trap";
+
+//#region src/components/focus-trap/focus-trap.tsx
+const FocusTrap = (props) => {
+	let localNode;
+	const [trapProps, localProps] = createSplitProps()(props, [
+		"disabled",
+		"onActivate",
+		"onDeactivate",
+		"initialFocus",
+		"fallbackFocus",
+		"returnFocusOnDeactivate",
+		"setReturnFocus"
+	]);
+	createEffect(() => {
+		if (!localNode || trapProps.disabled) return;
+		const autoFocusNode = localNode.querySelector("[autofocus], [data-autofocus]");
+		trapProps.initialFocus ||= autoFocusNode ?? void 0;
+		onCleanup(trapFocus(localNode, trapProps));
+	});
+	return createComponent(sprawlify.div, mergeProps$1(localProps, { ref(r$) {
+		var _ref$ = composeRefs((el) => localNode = el, props.ref);
+		typeof _ref$ === "function" && _ref$(r$);
+	} }));
+};
+
+//#endregion
+export { FocusTrap };

package/dist/components/focus-trap/index.jsx

@@ -0,0 +1,30 @@
+import "../../core-C_FYj4uc.jsx";
+import { t as sprawlify } from "../../factory-BIJk1mK6.jsx";
+import { t as createSplitProps } from "../../create-split-props-CKwjjjkD.jsx";
+import { t as composeRefs } from "../../compose-refs-Cp4AShsY.jsx";
+import { createEffect, onCleanup } from "solid-js";
+import { trapFocus } from "@sprawlify/primitives/focus-trap";
+
+//#region src/components/focus-trap/focus-trap.tsx
+const FocusTrap = (props) => {
+	let localNode;
+	const [trapProps, localProps] = createSplitProps()(props, [
+		"disabled",
+		"onActivate",
+		"onDeactivate",
+		"initialFocus",
+		"fallbackFocus",
+		"returnFocusOnDeactivate",
+		"setReturnFocus"
+	]);
+	createEffect(() => {
+		if (!localNode || trapProps.disabled) return;
+		const autoFocusNode = localNode.querySelector("[autofocus], [data-autofocus]");
+		trapProps.initialFocus ||= autoFocusNode ?? void 0;
+		onCleanup(trapFocus(localNode, trapProps));
+	});
+	return <sprawlify.div {...localProps} ref={composeRefs((el) => localNode = el, props.ref)} />;
+};
+
+//#endregion
+export { FocusTrap };

package/dist/components/format/index.d.ts

@@ -0,0 +1,27 @@
+import * as solid_js22 from "solid-js";
+
+//#region src/components/format/format-byte.d.ts
+interface FormatByteProps {
+  unit?: 'bit' | 'byte';
+  unitDisplay?: 'long' | 'short' | 'narrow';
+  unitSystem?: 'decimal' | 'binary';
+  value: number;
+}
+declare const FormatByte: (props: FormatByteProps) => solid_js22.JSX.Element;
+//#endregion
+//#region src/components/format/format-number.d.ts
+interface FormatNumberProps extends Intl.NumberFormatOptions {
+  value: number;
+}
+declare const FormatNumber: (props: FormatNumberProps) => solid_js22.JSX.Element;
+//#endregion
+//#region src/components/format/format-relative-time.d.ts
+interface FormatRelativeTimeProps extends Intl.RelativeTimeFormatOptions {
+  value: Date;
+}
+declare const FormatRelativeTime: (props: FormatRelativeTimeProps) => solid_js22.JSX.Element;
+declare namespace format_d_exports {
+  export { FormatByte as Byte, FormatByteProps as ByteProps, FormatNumber as Number, FormatNumberProps as NumberProps, FormatRelativeTime as RelativeTime, FormatRelativeTimeProps as RelativeTimeProps };
+}
+//#endregion
+export { format_d_exports as Format, FormatByte, type FormatByteProps, FormatNumber, type FormatNumberProps, FormatRelativeTime, type FormatRelativeTimeProps };

package/dist/components/format/index.js

@@ -0,0 +1,46 @@
+import { t as __export } from "../../chunk-Bn8mXcTA.js";
+import "../../create-context-DlXBVMoq.js";
+import { i as useLocaleContext } from "../../providers-DgUckEdb.js";
+import { createMemo } from "solid-js";
+import { memo } from "solid-js/web";
+import { formatBytes, formatNumber, formatRelativeTime } from "@sprawlify/primitives/i18n-utils";
+
+//#region src/components/format/format-byte.tsx
+const FormatByte = (props) => {
+	const ctx = useLocaleContext();
+	return memo(createMemo(() => {
+		const { value, ...intlOptions } = props;
+		return formatBytes(value, ctx().locale, intlOptions);
+	}));
+};
+
+//#endregion
+//#region src/components/format/format-number.tsx
+const FormatNumber = (props) => {
+	const ctx = useLocaleContext();
+	return memo(createMemo(() => {
+		const { value, ...intlOptions } = props;
+		return formatNumber(value, ctx().locale, intlOptions);
+	}));
+};
+
+//#endregion
+//#region src/components/format/format-relative-time.tsx
+const FormatRelativeTime = (props) => {
+	const ctx = useLocaleContext();
+	return memo(createMemo(() => {
+		const { value, ...intlOptions } = props;
+		return formatRelativeTime(value, ctx().locale, intlOptions);
+	}));
+};
+
+//#endregion
+//#region src/components/format/format.ts
+var format_exports = /* @__PURE__ */ __export({
+	Byte: () => FormatByte,
+	Number: () => FormatNumber,
+	RelativeTime: () => FormatRelativeTime
+});
+
+//#endregion
+export { format_exports as Format, FormatByte, FormatNumber, FormatRelativeTime };

package/dist/components/format/index.jsx

@@ -0,0 +1,48 @@
+import { t as __export } from "../../chunk-BJ7z6UrO.jsx";
+import "../../create-context-BwqlrMqL.jsx";
+import { i as useLocaleContext } from "../../providers-C6VPiSrB.jsx";
+import { createMemo } from "solid-js";
+import { formatBytes, formatNumber, formatRelativeTime } from "@sprawlify/primitives/i18n-utils";
+
+//#region src/components/format/format-byte.tsx
+const FormatByte = (props) => {
+	const ctx = useLocaleContext();
+	const text = createMemo(() => {
+		const { value, ...intlOptions } = props;
+		return formatBytes(value, ctx().locale, intlOptions);
+	});
+	return <>{text()}</>;
+};
+
+//#endregion
+//#region src/components/format/format-number.tsx
+const FormatNumber = (props) => {
+	const ctx = useLocaleContext();
+	const text = createMemo(() => {
+		const { value, ...intlOptions } = props;
+		return formatNumber(value, ctx().locale, intlOptions);
+	});
+	return <>{text()}</>;
+};
+
+//#endregion
+//#region src/components/format/format-relative-time.tsx
+const FormatRelativeTime = (props) => {
+	const ctx = useLocaleContext();
+	const text = createMemo(() => {
+		const { value, ...intlOptions } = props;
+		return formatRelativeTime(value, ctx().locale, intlOptions);
+	});
+	return <>{text()}</>;
+};
+
+//#endregion
+//#region src/components/format/format.ts
+var format_exports = /* @__PURE__ */ __export({
+	Byte: () => FormatByte,
+	Number: () => FormatNumber,
+	RelativeTime: () => FormatRelativeTime
+});
+
+//#endregion
+export { format_exports as Format, FormatByte, FormatNumber, FormatRelativeTime };

package/dist/components/frame/index.d.ts

@@ -0,0 +1,13 @@
+import { t as Assign } from "../../types-mGUbKy2h.js";
+import { JSX } from "solid-js";
+
+//#region src/components/frame/frame.d.ts
+interface FrameBaseProps {
+  head?: JSX.Element;
+  onMount?: () => void;
+  onUnmount?: () => void;
+}
+interface FrameProps extends Assign<JSX.IframeHTMLAttributes<HTMLIFrameElement>, FrameBaseProps> {}
+declare const Frame: (props: FrameProps) => JSX.Element;
+//#endregion
+export { Frame, type FrameBaseProps, type FrameProps };

package/dist/components/frame/index.js

@@ -0,0 +1,121 @@
+import "../../create-context-DlXBVMoq.js";
+import { a as EnvironmentProvider } from "../../providers-DgUckEdb.js";
+import { t as composeRefs } from "../../compose-refs-tCBI7PRJ.js";
+import { Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js";
+import { Portal, createComponent, insert, spread, template, use } from "solid-js/web";
+
+//#region src/components/frame/frame-content.tsx
+const FrameContent = (props) => {
+	const { onMount: onMount$1, onUnmount, children: children$1 } = props;
+	createEffect(() => {
+		onMount$1?.();
+		onCleanup(() => {
+			onUnmount?.();
+		});
+	});
+	return children$1;
+};
+
+//#endregion
+//#region src/components/frame/frame.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<iframe>`);
+const initialSrcDoc = `<html><head><style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style></head><body><div class="frame-root"></div></body></html>`;
+function getMountNode(frame) {
+	const doc = frame.contentWindow?.document;
+	if (!doc) return null;
+	return doc.body.querySelector(".frame-root") || doc.body;
+}
+const Frame = (props) => {
+	const [frameProps, localProps] = splitProps(props, [
+		"children",
+		"head",
+		"onMount",
+		"onUnmount",
+		"srcdoc"
+	]);
+	const srcdoc = createMemo(() => frameProps.srcdoc ?? initialSrcDoc);
+	const [frameRef, setFrameRef] = createSignal(null);
+	const [mountNode, setMountNode] = createSignal(null);
+	createEffect(() => {
+		const frame = frameRef();
+		if (!frame) return;
+		const doc = frame.contentWindow?.document;
+		if (!doc) return;
+		doc.open();
+		doc.write(srcdoc());
+		doc.close();
+		setMountNode(getMountNode(frame));
+	});
+	createEffect(() => {
+		const frame = frameRef();
+		if (!frame || !frame.contentDocument) return;
+		const win = frame.contentWindow;
+		if (!win) return;
+		const node = getMountNode(frame);
+		if (!node) return;
+		const exec = () => {
+			win.requestAnimationFrame(() => {
+				if (!frame.contentDocument?.documentElement) return;
+				frame.style.setProperty("--width", `${node.scrollWidth}px`);
+				frame.style.setProperty("--height", `${node.scrollHeight}px`);
+			});
+		};
+		const resizeObserver = new win.ResizeObserver(exec);
+		exec();
+		if (frame.contentDocument) resizeObserver.observe(node);
+		onCleanup(() => {
+			resizeObserver.disconnect();
+		});
+	});
+	return createComponent(EnvironmentProvider, {
+		value: () => frameRef()?.contentDocument ?? document,
+		get children() {
+			var _el$ = _tmpl$();
+			var _ref$ = composeRefs(setFrameRef, localProps.ref);
+			typeof _ref$ === "function" && use(_ref$, _el$);
+			spread(_el$, localProps, false, true);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return mountNode();
+				},
+				children: (node) => createComponent(Portal, {
+					get mount() {
+						return node();
+					},
+					get children() {
+						return createComponent(FrameContent, {
+							get onMount() {
+								return frameProps.onMount;
+							},
+							get onUnmount() {
+								return frameProps.onUnmount;
+							},
+							get children() {
+								return frameProps.children;
+							}
+						});
+					}
+				})
+			}), null);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return mountNode();
+				},
+				get children() {
+					return createComponent(Portal, {
+						get mount() {
+							return frameRef().contentDocument.head;
+						},
+						get children() {
+							return frameProps.head;
+						}
+					});
+				}
+			}), null);
+			return _el$;
+		}
+	});
+};
+
+//#endregion
+export { Frame };

package/dist/components/frame/index.jsx

@@ -0,0 +1,86 @@
+import "../../create-context-BwqlrMqL.jsx";
+import { a as EnvironmentProvider } from "../../providers-C6VPiSrB.jsx";
+import { t as composeRefs } from "../../compose-refs-Cp4AShsY.jsx";
+import { Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
+
+//#region src/components/frame/frame-content.tsx
+const FrameContent = (props) => {
+	const { onMount: onMount$1, onUnmount, children: children$1 } = props;
+	createEffect(() => {
+		onMount$1?.();
+		onCleanup(() => {
+			onUnmount?.();
+		});
+	});
+	return children$1;
+};
+
+//#endregion
+//#region src/components/frame/frame.tsx
+const initialSrcDoc = `<html><head><style>*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }</style></head><body><div class="frame-root"></div></body></html>`;
+function getMountNode(frame) {
+	const doc = frame.contentWindow?.document;
+	if (!doc) return null;
+	return doc.body.querySelector(".frame-root") || doc.body;
+}
+const Frame = (props) => {
+	const [frameProps, localProps] = splitProps(props, [
+		"children",
+		"head",
+		"onMount",
+		"onUnmount",
+		"srcdoc"
+	]);
+	const srcdoc = createMemo(() => frameProps.srcdoc ?? initialSrcDoc);
+	const [frameRef, setFrameRef] = createSignal(null);
+	const [mountNode, setMountNode] = createSignal(null);
+	createEffect(() => {
+		const frame = frameRef();
+		if (!frame) return;
+		const doc = frame.contentWindow?.document;
+		if (!doc) return;
+		doc.open();
+		doc.write(srcdoc());
+		doc.close();
+		setMountNode(getMountNode(frame));
+	});
+	createEffect(() => {
+		const frame = frameRef();
+		if (!frame || !frame.contentDocument) return;
+		const win = frame.contentWindow;
+		if (!win) return;
+		const node = getMountNode(frame);
+		if (!node) return;
+		const exec = () => {
+			win.requestAnimationFrame(() => {
+				if (!frame.contentDocument?.documentElement) return;
+				frame.style.setProperty("--width", `${node.scrollWidth}px`);
+				frame.style.setProperty("--height", `${node.scrollHeight}px`);
+			});
+		};
+		const resizeObserver = new win.ResizeObserver(exec);
+		exec();
+		if (frame.contentDocument) resizeObserver.observe(node);
+		onCleanup(() => {
+			resizeObserver.disconnect();
+		});
+	});
+	return <EnvironmentProvider value={() => frameRef()?.contentDocument ?? document}>
+      <iframe {...localProps} ref={composeRefs(setFrameRef, localProps.ref)}>
+        <Show when={mountNode()}>
+          {(node) => <Portal mount={node()}>
+              <FrameContent onMount={frameProps.onMount} onUnmount={frameProps.onUnmount}>
+                {frameProps.children}
+              </FrameContent>
+            </Portal>}
+        </Show>
+        <Show when={mountNode()}>
+          <Portal mount={frameRef().contentDocument.head}>{frameProps.head}</Portal>
+        </Show>
+      </iframe>
+    </EnvironmentProvider>;
+};
+
+//#endregion
+export { Frame };

package/dist/components/highlight/index.d.ts

@@ -1,5 +1,5 @@
-import { n as MaybeAccessor, t as Assign } from "../../types-Dbw4va3W.js";
-import * as solid_js35 from "solid-js";
+import { n as MaybeAccessor, t as Assign } from "../../types-mGUbKy2h.js";
+import * as solid_js46 from "solid-js";
 import { Accessor, ComponentProps } from "solid-js";
 import { HighlightChunk, HighlightWordProps } from "@sprawlify/primitives/highlight-word";
 
@@ -10,6 +10,6 @@ declare const useHighlight: (props: MaybeAccessor<UseHighlightProps>) => Accesso
 //#region src/components/highlight/highlight.d.ts
 interface HighlightBaseProps extends UseHighlightProps {}
 interface HighlightProps extends Assign<ComponentProps<'mark'>, HighlightBaseProps> {}
-declare const Highlight: (props: HighlightProps) => solid_js35.JSX.Element;
+declare const Highlight: (props: HighlightProps) => solid_js46.JSX.Element;
 //#endregion
 export { Highlight, type HighlightChunk, type HighlightProps, type UseHighlightProps, useHighlight };

package/dist/components/highlight/index.js

@@ -1,5 +1,5 @@
-import { t as runIfFn } from "../../run-if-fn-D5794CxE.js";
-import { t as createSplitProps } from "../../create-split-props-pQu7jijw.js";
+import { t as runIfFn } from "../../run-if-fn-C80kt4dU.js";
+import { t as createSplitProps } from "../../create-split-props-BHmgTHSf.js";
 import { For, Show, createMemo } from "solid-js";
 import { createComponent, insert, spread, template } from "solid-js/web";
 import { highlightWord } from "@sprawlify/primitives/highlight-word";
@@ -13,7 +13,7 @@ const useHighlight = (props) => {
 //#region src/components/highlight/highlight.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<mark>`);
 const Highlight = (props) => {
-	if (typeof props.text !== "string") throw new Error("[ark-ui/highlight] text must be a string");
+	if (typeof props.text !== "string") throw new Error("[sprawlify/highlight] text must be a string");
 	const [highlightProps, localProps] = createSplitProps()(props, [
 		"query",
 		"text",