@dragcraft/device-frames 0.0.1

package/dist/index.mjs

@@ -0,0 +1,820 @@
+import { DEFAULT_LAYOUT_REGION, normalizeStyleValueMap } from "@dragcraft/core";
+import { computed, defineComponent, h, inject, nextTick, onBeforeUnmount, onMounted, onUpdated, ref } from "vue";
+import { IconDesktop, IconLaptop, IconNavBack, IconNavHome, IconNavRecent, IconPhone, IconRobot, IconSignal, IconSignalBar } from "@dragcraft/icons";
+//#region src/components/frame-viewport.ts
+function renderFrameRootSelectionPlane(selectionPresentation) {
+	return h("div", {
+		"ref": (element) => {
+			selectionPresentation?.registerPlane("root", element instanceof HTMLElement ? element : null);
+		},
+		"class": "dc-device-frame__selection-plane dc-device-frame__selection-plane--root",
+		"data-dc-selection-plane": "root",
+		"aria-hidden": "true"
+	});
+}
+function renderDeviceFrame(modifierClass, selectionPresentation, children, frameOverlay) {
+	return h("div", {
+		"class": ["dc-device-frame", modifierClass],
+		"data-dc-toolbar-boundary": ""
+	}, [
+		h("div", { class: "dc-device-frame__surface" }, children),
+		frameOverlay,
+		renderFrameRootSelectionPlane(selectionPresentation)
+	]);
+}
+function edgeClass(edge) {
+	return `dc-device-frame__chrome--${edge}`;
+}
+function measureVar(edge) {
+	return `--dc-measured-inset-${edge}`;
+}
+function sizeVar(edge) {
+	return `--dc-sized-inset-${edge}`;
+}
+function sizeToCss(value) {
+	if (typeof value === "number") return `${value}px`;
+	return value ?? "0px";
+}
+function layerItemStyle(entry) {
+	const placement = entry.layout.placement;
+	if (placement.mode !== "framework") return void 0;
+	const style = {};
+	const block = placement.anchor.block ?? "end";
+	const inline = placement.anchor.inline ?? "end";
+	if (block === "start") style.top = sizeToCss(placement.offset?.blockStart ?? "calc(var(--dc-inset-block-start) + 16px)");
+	else if (block === "center") style.top = "50%";
+	else style.bottom = sizeToCss(placement.offset?.blockEnd ?? "calc(var(--dc-inset-block-end) + 16px)");
+	if (inline === "start") style.left = sizeToCss(placement.offset?.inlineStart ?? "calc(var(--dc-inset-inline-start) + 16px)");
+	else if (inline === "center") style.left = "50%";
+	else style.right = sizeToCss(placement.offset?.inlineEnd ?? "calc(var(--dc-inset-inline-end) + 16px)");
+	if (block === "center" && inline === "center") style.transform = "translate(-50%, -50%)";
+	else if (block === "center") style.transform = "translateY(-50%)";
+	else if (inline === "center") style.transform = "translateX(-50%)";
+	return style;
+}
+function renderChromeItem(entry, vnode) {
+	const placement = entry.layout.placement;
+	return h("div", {
+		"key": entry.node.id,
+		"class": [
+			"dc-device-frame__chrome-item",
+			edgeClass(placement.edge),
+			`dc-device-frame__chrome-item--${placement.position}`
+		],
+		"data-node-id": entry.node.id,
+		"data-dc-chrome-edge": placement.edge,
+		"data-dc-chrome-position": placement.position,
+		"data-dc-reserve-mode": placement.reserve.mode,
+		"data-dc-avoid-content": String(placement.avoidContent)
+	}, [vnode]);
+}
+function renderChrome(plan, chromeVNodes) {
+	if (!plan || chromeVNodes.length === 0) return null;
+	const groups = {
+		"block-start": {
+			reserved: [],
+			overlay: []
+		},
+		"block-end": {
+			reserved: [],
+			overlay: []
+		},
+		"inline-start": {
+			reserved: [],
+			overlay: []
+		},
+		"inline-end": {
+			reserved: [],
+			overlay: []
+		}
+	};
+	for (const [index, entry] of plan.chrome.entries()) {
+		const placement = entry.layout.placement;
+		if (placement.position === "fixed") {
+			const stack = placement.avoidContent ? "reserved" : "overlay";
+			groups[placement.edge][stack].push(renderChromeItem(entry, chromeVNodes[index]));
+		}
+	}
+	const stacks = Object.entries(groups).flatMap(([edge, edgeGroups]) => ["reserved", "overlay"].flatMap((stack) => {
+		const items = edgeGroups[stack];
+		return items.length > 0 ? [h("div", {
+			"key": `${edge}:${stack}`,
+			"class": [
+				"dc-device-frame__chrome-stack",
+				`dc-device-frame__chrome-stack--${edge}`,
+				`dc-device-frame__chrome-stack--${stack}`
+			],
+			"data-dc-chrome-edge": edge,
+			"data-dc-avoid-content-stack": String(stack === "reserved")
+		}, items)] : [];
+	}));
+	return stacks.length > 0 ? h("div", { class: "dc-device-frame__chrome" }, stacks) : null;
+}
+function groupContentChrome(plan, chromeVNodes) {
+	const groups = {
+		"block-start": [],
+		"block-end": [],
+		"inline-start": [],
+		"inline-end": []
+	};
+	for (const [index, entry] of (plan?.chrome ?? []).entries()) {
+		const placement = entry.layout.placement;
+		if (placement.position !== "fixed") groups[placement.edge].push(renderChromeItem(entry, chromeVNodes[index]));
+	}
+	return groups;
+}
+function renderLayers(plan, layerVNodes) {
+	if (!plan) return [];
+	return Array.from(plan.layers.entries()).map(([layer, entries]) => {
+		const vnodes = layerVNodes[layer] ?? [];
+		const children = entries.map((entry, index) => {
+			const placement = entry.layout.placement;
+			return h("div", {
+				"key": entry.node.id,
+				"class": ["dc-device-frame__layer-item", `dc-device-frame__layer-item--${placement.mode}`],
+				"data-node-id": entry.node.id,
+				"data-dc-layer-mode": placement.mode,
+				"style": layerItemStyle(entry)
+			}, [vnodes[index]]);
+		});
+		return h("div", {
+			"key": layer,
+			"class": ["dc-device-frame__layer", `dc-device-frame__layer--${layer}`],
+			"data-dc-layer": layer
+		}, children);
+	});
+}
+function useMeasuredChromeInsets(viewportRef) {
+	let observer = null;
+	let observedTargets = /* @__PURE__ */ new Set();
+	let updateFrame = null;
+	function getChromeMeasureTarget(item) {
+		return item.querySelector(":scope > .dc-node") ?? item;
+	}
+	function update() {
+		const viewport = viewportRef.value;
+		if (!viewport) return;
+		const totals = {
+			"block-start": 0,
+			"block-end": 0,
+			"inline-start": 0,
+			"inline-end": 0
+		};
+		for (const item of Array.from(viewport.querySelectorAll("[data-dc-chrome-position=\"fixed\"][data-dc-avoid-content=\"true\"]"))) {
+			if (item.dataset.dcReserveMode !== "measure") continue;
+			const edge = item.dataset.dcChromeEdge;
+			const rect = getChromeMeasureTarget(item).getBoundingClientRect();
+			totals[edge] += edge === "block-start" || edge === "block-end" ? rect.height : rect.width;
+		}
+		for (const [edge, value] of Object.entries(totals)) viewport.style.setProperty(measureVar(edge), `${value}px`);
+	}
+	function scheduleUpdate() {
+		if (updateFrame !== null) return;
+		updateFrame = window.requestAnimationFrame(() => {
+			updateFrame = null;
+			update();
+		});
+	}
+	function refreshObserver() {
+		const viewport = viewportRef.value;
+		if (!viewport) return;
+		if (typeof ResizeObserver === "undefined") {
+			scheduleUpdate();
+			return;
+		}
+		observer ??= new ResizeObserver(scheduleUpdate);
+		const nextTargets = new Set(Array.from(viewport.querySelectorAll("[data-dc-chrome-position=\"fixed\"][data-dc-avoid-content=\"true\"]"), getChromeMeasureTarget));
+		if (nextTargets.size !== observedTargets.size || [...nextTargets].some((target) => !observedTargets.has(target))) {
+			observer.disconnect();
+			for (const target of nextTargets) observer.observe(target);
+			observedTargets = nextTargets;
+		}
+		nextTick(scheduleUpdate);
+	}
+	onMounted(refreshObserver);
+	onUpdated(refreshObserver);
+	onBeforeUnmount(() => {
+		observer?.disconnect();
+		if (updateFrame !== null) window.cancelAnimationFrame(updateFrame);
+	});
+}
+function viewportStyle(plan) {
+	const fixedChromeIds = new Set((plan?.chrome ?? []).flatMap((entry) => {
+		return entry.layout.placement.position === "fixed" ? [entry.node.id] : [];
+	}));
+	const contributors = (plan?.insets.contributors ?? []).filter((contributor) => fixedChromeIds.has(contributor.sourceNodeId));
+	const sizedTotals = {
+		"block-start": [],
+		"block-end": [],
+		"inline-start": [],
+		"inline-end": []
+	};
+	const measuredFallbackTotals = {
+		"block-start": [],
+		"block-end": [],
+		"inline-start": [],
+		"inline-end": []
+	};
+	for (const contributor of contributors) if (contributor.reserve.mode === "size") sizedTotals[contributor.edge].push(sizeToCss(contributor.reserve.size));
+	else if (contributor.reserve.mode === "measure" && contributor.reserve.size !== void 0) measuredFallbackTotals[contributor.edge].push(sizeToCss(contributor.reserve.size));
+	const style = {};
+	for (const [edge, values] of Object.entries(sizedTotals)) style[sizeVar(edge)] = values.length === 0 ? "0px" : values.length === 1 ? values[0] : `calc(${values.join(" + ")})`;
+	for (const [edge, values] of Object.entries(measuredFallbackTotals)) {
+		if (values.length === 0) continue;
+		style[measureVar(edge)] = values.length === 1 ? values[0] : `calc(${values.join(" + ")})`;
+	}
+	return style;
+}
+function useScrollMetrics(scrollerRef) {
+	const thumbStyle = ref({ display: "none" });
+	let observer = null;
+	let observedTarget = null;
+	let updateFrame = null;
+	function setThumbStyle(next) {
+		const prev = thumbStyle.value;
+		const keys = /* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)]);
+		for (const key of keys) if (prev[key] !== next[key]) {
+			thumbStyle.value = next;
+			return;
+		}
+	}
+	function update() {
+		const scroller = scrollerRef.value;
+		if (!scroller) {
+			setThumbStyle({ display: "none" });
+			return;
+		}
+		const { clientHeight, scrollHeight, scrollTop } = scroller;
+		if (scrollHeight <= clientHeight + 1) {
+			setThumbStyle({ display: "none" });
+			return;
+		}
+		const thumbHeight = Math.max(24, clientHeight * clientHeight / scrollHeight);
+		const thumbTop = Math.max(0, clientHeight - thumbHeight) * (scrollTop / Math.max(1, scrollHeight - clientHeight));
+		setThumbStyle({
+			height: `${thumbHeight}px`,
+			transform: `translateY(${thumbTop}px)`
+		});
+	}
+	function scheduleUpdate() {
+		if (updateFrame !== null) return;
+		updateFrame = window.requestAnimationFrame(() => {
+			updateFrame = null;
+			update();
+		});
+	}
+	function refreshObserver() {
+		const scroller = scrollerRef.value;
+		if (!scroller) return;
+		if (typeof ResizeObserver === "undefined") {
+			scheduleUpdate();
+			return;
+		}
+		observer ??= new ResizeObserver(scheduleUpdate);
+		const nextTarget = scroller.firstElementChild instanceof HTMLElement ? scroller.firstElementChild : scroller;
+		if (nextTarget !== observedTarget) {
+			observer.disconnect();
+			observer.observe(nextTarget);
+			observedTarget = nextTarget;
+		}
+		nextTick(scheduleUpdate);
+	}
+	onMounted(refreshObserver);
+	onUpdated(refreshObserver);
+	onBeforeUnmount(() => {
+		observer?.disconnect();
+		if (updateFrame !== null) window.cancelAnimationFrame(updateFrame);
+	});
+	return {
+		thumbStyle,
+		update: scheduleUpdate
+	};
+}
+function useFrameViewport(options) {
+	const viewportRef = ref(null);
+	const scrollerRef = ref(null);
+	useMeasuredChromeInsets(viewportRef);
+	const { thumbStyle, update: updateScrollMetrics } = useScrollMetrics(scrollerRef);
+	return () => {
+		const current = options();
+		const surfaceStyle = normalizeStyleValueMap(current.surfaceStyle);
+		const chromeVNodes = current.chromeVNodes ?? [];
+		const contentChrome = groupContentChrome(current.plan, chromeVNodes);
+		return h("div", {
+			"ref": viewportRef,
+			"class": "dc-device-frame__viewport",
+			"data-dc-overlay-boundary": "",
+			"style": viewportStyle(current.plan)
+		}, [
+			h("div", { class: "dc-device-frame__content" }, [h("div", {
+				ref: scrollerRef,
+				class: "dc-device-frame__content-scroller",
+				onScroll: updateScrollMetrics
+			}, [h("div", { class: "dc-device-frame__content-layout" }, [
+				...contentChrome["block-start"],
+				h("div", { class: "dc-device-frame__content-row" }, [
+					contentChrome["inline-start"].length > 0 ? h("div", { class: "dc-device-frame__content-edge dc-device-frame__content-edge--inline-start" }, contentChrome["inline-start"]) : null,
+					h("div", {
+						"class": "dc-device-frame__content-surface",
+						"data-dc-component": "container-shell",
+						"style": surfaceStyle
+					}, current.content ?? []),
+					contentChrome["inline-end"].length > 0 ? h("div", { class: "dc-device-frame__content-edge dc-device-frame__content-edge--inline-end" }, contentChrome["inline-end"]) : null
+				]),
+				...contentChrome["block-end"],
+				h("div", {
+					"ref": (element) => {
+						current.selectionPresentation?.registerPlane("content", element instanceof HTMLElement ? element : null);
+					},
+					"class": "dc-device-frame__selection-plane dc-device-frame__selection-plane--content",
+					"data-dc-selection-plane": "content",
+					"aria-hidden": "true"
+				})
+			])]), h("div", {
+				"class": "dc-device-frame__scrollbar",
+				"aria-hidden": "true"
+			}, [h("div", {
+				class: "dc-device-frame__scrollbar-thumb",
+				style: thumbStyle.value
+			})])]),
+			renderChrome(current.plan, chromeVNodes),
+			...renderLayers(current.plan, current.layerVNodes ?? {}),
+			h("div", {
+				"ref": (element) => {
+					current.selectionPresentation?.registerPlane("viewport", element instanceof HTMLElement ? element : null);
+				},
+				"class": "dc-device-frame__selection-plane dc-device-frame__selection-plane--viewport",
+				"data-dc-selection-plane": "viewport",
+				"aria-hidden": "true"
+			})
+		]);
+	};
+}
+//#endregion
+//#region src/components/frames/AndroidFrame.ts
+/**
+* Android phone frame with status bar and bottom navigation bar.
+* Renders children via the default slot inside the content area.
+*/
+var AndroidFrame_default = defineComponent({
+	name: "DcAndroidFrame",
+	props: {
+		layoutPlan: {
+			type: Object,
+			default: void 0
+		},
+		chromeVNodes: {
+			type: Array,
+			default: () => []
+		},
+		layerVNodes: {
+			type: Object,
+			default: () => ({})
+		},
+		forbiddenOverlayVNode: {
+			type: Object,
+			default: null
+		},
+		surfaceStyle: {
+			type: Object,
+			default: void 0
+		},
+		selectionPresentation: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const renderViewport = useFrameViewport(() => ({
+			content: slots.default?.() ?? [],
+			chromeVNodes: props.chromeVNodes,
+			layerVNodes: props.layerVNodes,
+			plan: props.layoutPlan,
+			surfaceStyle: props.surfaceStyle,
+			selectionPresentation: props.selectionPresentation
+		}));
+		return () => renderDeviceFrame("dc-device-frame--android", props.selectionPresentation, [
+			h("div", { class: "dc-device-frame__status-bar" }, [h("span", { class: "dc-device-frame__status-time" }, "12:00"), h("span", { class: "dc-device-frame__status-icons" }, [h("span", null, h(IconSignal, { size: 10 })), h("span", null, h(IconSignalBar, { size: 10 }))])]),
+			renderViewport(),
+			h("div", { class: "dc-device-frame__nav-bar" }, [
+				h("span", { class: "dc-device-frame__nav-btn" }, h(IconNavBack, { size: 12 })),
+				h("span", { class: "dc-device-frame__nav-btn dc-device-frame__nav-btn--home" }, h(IconNavHome, { size: 12 })),
+				h("span", { class: "dc-device-frame__nav-btn" }, h(IconNavRecent, { size: 12 }))
+			])
+		], props.forbiddenOverlayVNode);
+	}
+});
+//#endregion
+//#region src/components/frames/DesktopFrame.ts
+/**
+* Desktop browser chrome frame with title bar, traffic lights, and URL bar.
+* Renders children via the default slot inside the content area.
+*/
+var DesktopFrame_default = defineComponent({
+	name: "DcDesktopFrame",
+	props: {
+		layoutPlan: {
+			type: Object,
+			default: void 0
+		},
+		chromeVNodes: {
+			type: Array,
+			default: () => []
+		},
+		layerVNodes: {
+			type: Object,
+			default: () => ({})
+		},
+		forbiddenOverlayVNode: {
+			type: Object,
+			default: null
+		},
+		surfaceStyle: {
+			type: Object,
+			default: void 0
+		},
+		selectionPresentation: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const renderViewport = useFrameViewport(() => ({
+			content: slots.default?.() ?? [],
+			chromeVNodes: props.chromeVNodes,
+			layerVNodes: props.layerVNodes,
+			plan: props.layoutPlan,
+			surfaceStyle: props.surfaceStyle,
+			selectionPresentation: props.selectionPresentation
+		}));
+		return () => renderDeviceFrame("dc-device-frame--desktop", props.selectionPresentation, [h("div", { class: "dc-device-frame__title-bar" }, [h("div", { class: "dc-device-frame__traffic-lights" }, [
+			h("span", { class: "dc-device-frame__traffic-dot dc-device-frame__traffic-dot--close" }),
+			h("span", { class: "dc-device-frame__traffic-dot dc-device-frame__traffic-dot--minimize" }),
+			h("span", { class: "dc-device-frame__traffic-dot dc-device-frame__traffic-dot--maximize" })
+		]), h("div", { class: "dc-device-frame__url-bar" }, "localhost:5173")]), renderViewport()], props.forbiddenOverlayVNode);
+	}
+});
+//#endregion
+//#region src/components/frames/IPhoneFrame.ts
+/**
+* iPhone frame with Dynamic Island notch, status bar, and home indicator.
+* Status bar uses a 3-column grid layout: time (left) | Dynamic Island (center) | icons (right),
+* matching the real iPhone status bar layout.
+* Renders children via the default slot inside the content area.
+*/
+var IPhoneFrame_default = defineComponent({
+	name: "DcIPhoneFrame",
+	props: {
+		layoutPlan: {
+			type: Object,
+			default: void 0
+		},
+		chromeVNodes: {
+			type: Array,
+			default: () => []
+		},
+		layerVNodes: {
+			type: Object,
+			default: () => ({})
+		},
+		forbiddenOverlayVNode: {
+			type: Object,
+			default: null
+		},
+		surfaceStyle: {
+			type: Object,
+			default: void 0
+		},
+		selectionPresentation: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const renderViewport = useFrameViewport(() => ({
+			content: slots.default?.() ?? [],
+			chromeVNodes: props.chromeVNodes,
+			layerVNodes: props.layerVNodes,
+			plan: props.layoutPlan,
+			surfaceStyle: props.surfaceStyle,
+			selectionPresentation: props.selectionPresentation
+		}));
+		return () => renderDeviceFrame("dc-device-frame--iphone", props.selectionPresentation, [
+			h("div", { class: "dc-device-frame__status-bar" }, [
+				h("span", { class: "dc-device-frame__status-time" }, "9:41"),
+				h("div", { class: "dc-device-frame__notch dc-device-frame__notch--dynamic-island" }),
+				h("span", { class: "dc-device-frame__status-icons" }, [
+					h("span", { class: "dc-device-frame__cellular" }, [
+						h("span", { class: "dc-device-frame__cellular-bar" }),
+						h("span", { class: "dc-device-frame__cellular-bar" }),
+						h("span", { class: "dc-device-frame__cellular-bar" }),
+						h("span", { class: "dc-device-frame__cellular-bar" })
+					]),
+					h("svg", {
+						class: "dc-device-frame__wifi",
+						width: "15",
+						height: "12",
+						viewBox: "0 0 15 12",
+						fill: "currentColor"
+					}, [
+						h("circle", {
+							cx: "7.5",
+							cy: "10.5",
+							r: "1.5"
+						}),
+						h("path", {
+							"d": "M5.1 7.6a3.5 3.5 0 014.8 0",
+							"stroke": "currentColor",
+							"stroke-width": "1.6",
+							"stroke-linecap": "round",
+							"fill": "none"
+						}),
+						h("path", {
+							"d": "M2.3 4.8a7.2 7.2 0 0110.4 0",
+							"stroke": "currentColor",
+							"stroke-width": "1.6",
+							"stroke-linecap": "round",
+							"fill": "none"
+						})
+					]),
+					h("span", { class: "dc-device-frame__battery" }, [h("span", { class: "dc-device-frame__battery-level" })])
+				])
+			]),
+			renderViewport(),
+			h("div", { class: "dc-device-frame__home-indicator" })
+		], props.forbiddenOverlayVNode);
+	}
+});
+//#endregion
+//#region src/components/frames/TabletFrame.ts
+/**
+* Tablet / iPad frame with minimal chrome and thin bezels.
+* Renders children via the default slot inside the content area.
+*/
+var TabletFrame_default = defineComponent({
+	name: "DcTabletFrame",
+	props: {
+		layoutPlan: {
+			type: Object,
+			default: void 0
+		},
+		chromeVNodes: {
+			type: Array,
+			default: () => []
+		},
+		layerVNodes: {
+			type: Object,
+			default: () => ({})
+		},
+		forbiddenOverlayVNode: {
+			type: Object,
+			default: null
+		},
+		surfaceStyle: {
+			type: Object,
+			default: void 0
+		},
+		selectionPresentation: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const renderViewport = useFrameViewport(() => ({
+			content: slots.default?.() ?? [],
+			chromeVNodes: props.chromeVNodes,
+			layerVNodes: props.layerVNodes,
+			plan: props.layoutPlan,
+			surfaceStyle: props.surfaceStyle,
+			selectionPresentation: props.selectionPresentation
+		}));
+		return () => renderDeviceFrame("dc-device-frame--tablet", props.selectionPresentation, [h("div", { class: "dc-device-frame__status-bar" }, [h("span", { class: "dc-device-frame__status-time" }, "9:41"), h("span", { class: "dc-device-frame__status-icons" }, [h("span", null, h(IconSignal, { size: 10 })), h("span", null, h(IconSignalBar, { size: 10 }))])]), renderViewport()], props.forbiddenOverlayVNode);
+	}
+});
+//#endregion
+//#region src/presets.ts
+const IPHONE_PRESET = {
+	type: "iphone",
+	label: "iPhone",
+	labelKey: "device.iphone",
+	icon: IconPhone,
+	width: 375,
+	height: 812,
+	frameComponent: IPhoneFrame_default
+};
+const ANDROID_PRESET = {
+	type: "android",
+	label: "Android",
+	labelKey: "device.android",
+	icon: IconRobot,
+	width: 360,
+	height: 800,
+	frameComponent: AndroidFrame_default
+};
+const TABLET_PRESET = {
+	type: "tablet",
+	label: "Tablet",
+	labelKey: "device.tablet",
+	icon: IconLaptop,
+	width: 768,
+	height: 1024,
+	frameComponent: TabletFrame_default
+};
+const DESKTOP_PRESET = {
+	type: "desktop",
+	label: "Desktop",
+	labelKey: "device.desktop",
+	icon: IconDesktop,
+	width: 1280,
+	height: 800,
+	frameComponent: DesktopFrame_default
+};
+/**
+* Returns the built-in device presets: iPhone, Android, Tablet, Desktop.
+*/
+function getDefaultPresets() {
+	return [
+		IPHONE_PRESET,
+		ANDROID_PRESET,
+		TABLET_PRESET,
+		DESKTOP_PRESET
+	];
+}
+//#endregion
+//#region src/types.ts
+/**
+* Injection key for the device frame context.
+*/
+const DEVICE_FRAME_CONTEXT_KEY = Symbol("dc-device-frame");
+//#endregion
+//#region src/components/DeviceFrameShell.ts
+/**
+* Stable container shell component for the renderer's containerShell extension.
+*
+* Reads the current device from DeviceFrameContext (provide/inject) and
+* renders the corresponding frame component. Because this is a single
+* stable component reference, RootRenderer's computed() never swaps
+* components — only the internal render output changes reactively.
+*
+* Falls back to the iPhone frame if no context is provided.
+*/
+const DeviceFrameShell = defineComponent({
+	name: "DcDeviceFrameShell",
+	props: {
+		layoutPlan: {
+			type: Object,
+			default: void 0
+		},
+		regionVNodes: {
+			type: Object,
+			default: () => ({})
+		},
+		chromeVNodes: {
+			type: Array,
+			default: () => []
+		},
+		layerVNodes: {
+			type: Object,
+			default: () => ({})
+		},
+		forbiddenOverlayVNode: {
+			type: Object,
+			default: null
+		},
+		surfaceStyle: {
+			type: Object,
+			default: void 0
+		},
+		selectionPresentation: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const ctx = inject(DEVICE_FRAME_CONTEXT_KEY, null);
+		const fallbackFrame = getDefaultPresets()[0].frameComponent;
+		const activeFrame = computed(() => {
+			if (!ctx) return fallbackFrame;
+			return ctx.getPreset(ctx.currentDevice.value)?.frameComponent ?? fallbackFrame;
+		});
+		return () => {
+			const additionalRegions = Object.entries(props.regionVNodes).filter(([region]) => region !== DEFAULT_LAYOUT_REGION).map(([region, nodes]) => h("div", {
+				"key": region,
+				"class": "dc-device-frame__content-region",
+				"data-dc-layout-region": region
+			}, nodes));
+			return h(activeFrame.value, {
+				layoutPlan: props.layoutPlan,
+				chromeVNodes: props.chromeVNodes,
+				layerVNodes: props.layerVNodes,
+				forbiddenOverlayVNode: props.forbiddenOverlayVNode,
+				surfaceStyle: props.surfaceStyle,
+				selectionPresentation: props.selectionPresentation
+			}, { default: () => [...slots.default?.() ?? [], ...additionalRegions] });
+		};
+	}
+});
+const DeviceFrameShellWithOverlay = DeviceFrameShell;
+DeviceFrameShellWithOverlay.__dcHandlesForbiddenOverlay = true;
+//#endregion
+//#region src/components/DevicePicker.ts
+var DevicePicker_default = defineComponent({
+	name: "DcDevicePicker",
+	props: {
+		context: {
+			type: Object,
+			required: true
+		},
+		translate: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props) {
+		return () => h("div", {
+			"class": "dc-device-picker",
+			"role": "group",
+			"aria-label": props.translate?.("device.group", "预览设备") ?? "Preview device"
+		}, props.context.presets.map((preset) => {
+			const label = preset.labelKey && props.translate ? props.translate(preset.labelKey, preset.label) : preset.label;
+			return h("button", {
+				"type": "button",
+				"class": {
+					"dc-device-picker__btn": true,
+					"dc-device-picker__btn--active": props.context.currentDevice.value === preset.type
+				},
+				"aria-pressed": props.context.currentDevice.value === preset.type,
+				"aria-label": label,
+				"title": label,
+				"onClick": () => props.context.setDevice(preset.type)
+			}, [typeof preset.icon === "string" ? preset.icon : h(preset.icon, { size: 15 }), h("span", { class: "dc-device-picker__label" }, label)]);
+		}));
+	}
+});
+//#endregion
+//#region src/context.ts
+/**
+* Creates a DeviceFrameContext. The caller is responsible for calling
+* `provide(DEVICE_FRAME_CONTEXT_KEY, ctx)` in their setup().
+*
+* @example
+* ```ts
+* const ctx = createDeviceFrameContext({ initialDevice: 'iphone' })
+* provide(DEVICE_FRAME_CONTEXT_KEY, ctx)
+* ```
+*/
+function createDeviceFrameContext(options = {}) {
+	const presets = options.presets ?? getDefaultPresets();
+	const currentDevice = ref(options.initialDevice ?? "iphone");
+	const presetMap = new Map(presets.map((p) => [p.type, p]));
+	return {
+		currentDevice,
+		presets,
+		getPreset: (type) => presetMap.get(type),
+		setDevice: (type) => {
+			if (presetMap.has(type)) currentDevice.value = type;
+		}
+	};
+}
+/**
+* Injects the DeviceFrameContext from the nearest ancestor provider.
+* Throws if not found.
+*/
+function useDeviceFrameContext() {
+	const ctx = inject(DEVICE_FRAME_CONTEXT_KEY);
+	if (!ctx) throw new Error("[dragcraft/device-frames] DeviceFrameContext not found. Ensure an ancestor calls provide(DEVICE_FRAME_CONTEXT_KEY, ctx).");
+	return ctx;
+}
+//#endregion
+//#region src/composables/useDeviceFrame.ts
+/**
+* Convenience composable for consuming device frame state in any descendant.
+* Returns the full context plus commonly needed computed values.
+*
+* @example
+* ```ts
+* const { currentDevice, setDevice, presets } = useDeviceFrame()
+* ```
+*/
+function useDeviceFrame() {
+	const ctx = useDeviceFrameContext();
+	const currentPreset = computed(() => ctx.getPreset(ctx.currentDevice.value));
+	const viewportWidth = computed(() => currentPreset.value?.width ?? 375);
+	const viewportHeight = computed(() => currentPreset.value?.height ?? 812);
+	return {
+		/** Reactive current device type */
+		currentDevice: ctx.currentDevice,
+		/** Reactive current preset object */
+		currentPreset,
+		/** Reactive viewport width */
+		viewportWidth,
+		/** Reactive viewport height */
+		viewportHeight,
+		/** All available presets */
+		presets: ctx.presets,
+		/** Switch device */
+		setDevice: ctx.setDevice
+	};
+}
+//#endregion
+export { ANDROID_PRESET, AndroidFrame_default as AndroidFrame, DESKTOP_PRESET, DEVICE_FRAME_CONTEXT_KEY, DesktopFrame_default as DesktopFrame, DeviceFrameShell, DevicePicker_default as DevicePicker, IPHONE_PRESET, IPhoneFrame_default as IPhoneFrame, TABLET_PRESET, TabletFrame_default as TabletFrame, createDeviceFrameContext, getDefaultPresets, useDeviceFrame, useDeviceFrameContext };