@getdom/studio 0.1.0 → 0.2.0

package/src/pages/designer/color-swatch/DomColorSwatch.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { computed, inject, onMounted, ref, useId, watch } from 'vue';
+import DomColorInput from '../../forms/color-input/DomColorInput.vue';
+import { cssColorToHex } from '../../lib/css/color.js';
+import { cssEditorContextKey, resolveEditorColor } from '../_shared/cssEditorContext.js';
+
+defineOptions({ __doc: { name: 'Color swatch', description: 'Beta CSS colour swatch with an editable expression and native picker.' } });
+
+const props = defineProps({
+	modelValue: { type: String, default: '#000000' },
+	label: { type: String, default: 'Colour' },
+});
+const emit = defineEmits(['update:modelValue']);
+const context = inject(cssEditorContextKey, null);
+const id = useId();
+const mounted = ref(false);
+const resolvedColor = computed(() => resolveEditorColor(props.modelValue, context?.colorVariables.value));
+const nativeValue = computed(() => {
+	// Browser-dependent colour functions can only be resolved after hydration.
+	if (!mounted.value && !/^#|^oklch\(|^rgba?\(/i.test(resolvedColor.value)) return '#000000';
+	return cssColorToHex(resolvedColor.value);
+});
+const draft = ref(props.modelValue);
+
+/**
+ * Keeps the editable expression aligned when the selected skin or palette changes.
+ *
+ * @param {string} value Newly selected CSS colour value.
+ * @returns {void}
+ */
+function syncDraft(value) {
+	draft.value = value;
+}
+
+/**
+ * Commits a valid CSS colour expression or restores the previous value.
+ *
+ * @returns {void}
+ */
+function commitDraft() {
+	const value = draft.value.trim();
+	const resolved = resolveEditorColor(value, context?.colorVariables.value);
+	if (value && value.length <= 160 && !/[;{}@]|\burl\s*\(/i.test(value) && CSS.supports('color', resolved)) {
+		emit('update:modelValue', value);
+	} else {
+		draft.value = props.modelValue;
+	}
+}
+
+/** Enables browser colour resolution after the initial server/client render. */
+function enableBrowserColors() {
+	mounted.value = true;
+}
+
+watch(() => props.modelValue, syncDraft);
+onMounted(enableBrowserColors);
+</script>
+
+<template>
+	<div v-if="!context?.framed.value" class="min-w-0 space-y-1.5">
+		<label :for="id" class="block text-[10px] font-medium uppercase tracking-wide text-muted-fg">{{ label }}</label>
+		<div
+			class="flex h-9 min-w-0 items-center gap-2 rounded-md border border-input bg-canvas px-2 focus-within:ring-1 focus-within:ring-ring"
+		>
+			<label
+				class="relative size-5 shrink-0 overflow-hidden rounded-sm border border-border"
+				:style="{ backgroundColor: resolvedColor }"
+			>
+				<input
+					type="color"
+					:value="nativeValue"
+					:aria-label="`${label} colour`"
+					class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+					@input="emit('update:modelValue', $event.target.value)"
+				/>
+			</label>
+			<input
+				:id="id"
+				v-model="draft"
+				:aria-label="`${label} CSS colour`"
+				:title="modelValue"
+				spellcheck="false"
+				class="min-w-0 w-full bg-transparent font-mono text-[11px] outline-none"
+				@blur="commitDraft"
+				@keydown.enter.prevent="commitDraft"
+			/>
+		</div>
+	</div>
+	<DomColorInput
+		v-else
+		:model-value="modelValue"
+		:label="label"
+		@update:model-value="emit('update:modelValue', $event)"
+	/>
+</template>

package/src/pages/designer/frame/DomDesignerFrame.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { computed, useAttrs } from 'vue';
+import { createFrameLayout, frameLayoutStyle } from './frameLayout.js';
+
+defineOptions({ inheritAttrs: false, __doc: { name: 'Designer frame', description: 'An ordinary container with independent flow, flex, grid or absolute child layout.', slots: [{ name: 'default', description: 'Frame content. Applications own child placement.' }] } });
+const props = defineProps({
+	as: { type: String, default: 'div' },
+	layout: { type: Object, default: () => createFrameLayout() },
+});
+const attrs = useAttrs();
+const style = computed(() => frameLayoutStyle(props.layout));
+</script>
+
+<template>
+	<component :is="as" v-bind="attrs" :style="[style, attrs.style]"><slot /></component>
+</template>

package/src/pages/designer/frame/DomFrameLayoutEditor.vue

@@ -0,0 +1,41 @@
+<script setup>
+import DomNativeSelect from '../../forms/native-select/DomNativeSelect.vue';
+import DomNumberInput from '../../forms/number-input/DomNumberInput.vue';
+import DomTextInput from '../../forms/text-input/DomTextInput.vue';
+import { createFrameLayout } from './frameLayout.js';
+
+defineOptions({ __doc: { name: 'Frame layout editor', description: 'Controlled layout settings for flow, flex, grid and absolute frames.' } });
+const props = defineProps({ modelValue: { type: Object, default: () => createFrameLayout() } });
+const emit = defineEmits(['update:modelValue']);
+const modes = [{ label: 'Flow', value: 'flow' }, { label: 'Flex', value: 'flex' }, { label: 'Grid', value: 'grid' }, { label: 'Absolute', value: 'absolute' }];
+const directions = ['row', 'column', 'row-reverse', 'column-reverse'];
+const justification = ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'];
+const alignment = ['start', 'center', 'end', 'stretch', 'baseline'];
+/** Emits a fresh record; the host captures geometry before committing a mode change. */
+function update(key, value) {
+	emit('update:modelValue', createFrameLayout({ ...props.modelValue, [key]: value }));
+}
+</script>
+
+<template>
+	<div class="space-y-4">
+		<DomNativeSelect label="Child layout" :model-value="modelValue.mode" :options="modes" @update:model-value="update('mode', $event)" />
+		<DomNumberInput label="Padding" :model-value="modelValue.padding" :min="0" @update:model-value="update('padding', $event)" />
+		<template v-if="modelValue.mode === 'flex' || modelValue.mode === 'grid'">
+			<DomNumberInput label="Gap" :model-value="modelValue.gap" :min="0" @update:model-value="update('gap', $event)" />
+			<template v-if="modelValue.mode === 'flex'">
+				<DomNativeSelect label="Direction" :model-value="modelValue.direction" :options="directions" @update:model-value="update('direction', $event)" />
+				<DomNativeSelect label="Wrap" :model-value="modelValue.wrap" :options="['nowrap', 'wrap']" @update:model-value="update('wrap', $event)" />
+			</template>
+			<template v-else>
+				<DomTextInput label="Columns" :model-value="modelValue.columns" @update:model-value="update('columns', $event)" />
+				<DomTextInput label="Rows" :model-value="modelValue.rows" @update:model-value="update('rows', $event)" />
+				<DomNativeSelect label="Auto flow" :model-value="modelValue.autoFlow" :options="['row', 'column', 'row dense', 'column dense']" @update:model-value="update('autoFlow', $event)" />
+				<DomNativeSelect label="Justify items" :model-value="modelValue.justifyItems" :options="['start', 'center', 'end', 'stretch']" @update:model-value="update('justifyItems', $event)" />
+			</template>
+			<DomNativeSelect label="Justify content" :model-value="modelValue.justify" :options="justification" @update:model-value="update('justify', $event)" />
+			<DomNativeSelect label="Align items" :model-value="modelValue.align" :options="alignment" @update:model-value="update('align', $event)" />
+		</template>
+		<p class="text-xs leading-5 text-muted-fg">{{ modelValue.mode === 'absolute' ? 'Children move freely inside this frame. Alignment and spacing use this frame and its siblings.' : modelValue.mode === 'flow' ? 'Children follow normal document flow. Their margins and widths control spacing.' : 'The browser arranges children. Use gap and alignment here; reorder items in the inspector.' }}</p>
+	</div>
+</template>

package/src/pages/designer/frame/frameLayout.js

@@ -0,0 +1,93 @@
+export const frameModes = ['flow', 'flex', 'grid', 'absolute'];
+
+/** Creates independent layout settings; positioning in a parent is deliberately separate. */
+export function createFrameLayout(value = {}) {
+	return {
+		mode: frameModes.includes(value.mode) ? value.mode : 'flow',
+		direction: ['row', 'column', 'row-reverse', 'column-reverse'].includes(value.direction) ? value.direction : 'row',
+		wrap: value.wrap === 'wrap' ? 'wrap' : 'nowrap',
+		gap: Number.isFinite(Number(value.gap)) ? Math.max(0, Number(value.gap)) : 0,
+		padding: Number.isFinite(Number(value.padding)) ? Math.max(0, Number(value.padding)) : 0,
+		justify: ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'].includes(value.justify) ? value.justify : 'start',
+		align: ['start', 'center', 'end', 'stretch', 'baseline'].includes(value.align) ? value.align : 'stretch',
+		justifyItems: ['start', 'center', 'end', 'stretch'].includes(value.justifyItems) ? value.justifyItems : 'stretch',
+		autoFlow: ['row', 'column', 'row dense', 'column dense'].includes(value.autoFlow) ? value.autoFlow : 'row',
+		columns: String(value.columns || 'repeat(3, minmax(0, 1fr))'),
+		rows: String(value.rows || 'auto'),
+	};
+}
+
+/** Projects child layout into CSS without choosing the frame's placement in its parent. */
+export function frameLayoutStyle(value = {}) {
+	const layout = createFrameLayout(value);
+	return {
+		position: 'relative',
+		boxSizing: 'border-box',
+		display: layout.mode === 'flex' || layout.mode === 'grid' ? layout.mode : 'block',
+		padding: `${layout.padding}px`,
+		gap: `${layout.gap}px`,
+		flexDirection: layout.direction,
+		flexWrap: layout.wrap,
+		justifyContent: layout.justify,
+		alignItems: layout.align,
+		justifyItems: layout.justifyItems,
+		gridAutoFlow: layout.autoFlow,
+		gridTemplateColumns: layout.mode === 'grid' ? layout.columns : 'none',
+		gridTemplateRows: layout.mode === 'grid' ? layout.rows : 'none',
+	};
+}
+
+/** Reads the browser's resolved layout, including responsive Tailwind and inline styles. */
+export function readFrameLayout(element) {
+	const css = element.ownerDocument.defaultView.getComputedStyle(element);
+	const children = [...element.children].filter((child) => child.hasAttribute('data-designer-id'));
+	const absolute = children.length && children.every((child) => element.ownerDocument.defaultView.getComputedStyle(child).position === 'absolute');
+	return createFrameLayout({
+		mode: css.display.includes('flex') ? 'flex' : css.display.includes('grid') ? 'grid' : absolute ? 'absolute' : 'flow',
+		direction: css.flexDirection, wrap: css.flexWrap,
+		gap: parseFloat(css.gap), padding: parseFloat(css.paddingTop),
+		justify: css.justifyContent.replace('flex-', ''), align: css.alignItems.replace('flex-', ''),
+		justifyItems: css.justifyItems, autoFlow: css.gridAutoFlow,
+		columns: css.gridTemplateColumns === 'none' ? undefined : css.gridTemplateColumns,
+		rows: css.gridTemplateRows === 'none' ? undefined : css.gridTemplateRows,
+	});
+}
+
+/** Measures a child in its containing frame's CSS pixels, accounting for borders and scrolling. */
+export function measureFrameChild(element, frame) {
+	const rect = element.getBoundingClientRect();
+	const parent = frame.getBoundingClientRect();
+	const scale = parent.width / frame.offsetWidth || 1;
+	return {
+		left: (rect.left - parent.left) / scale - frame.clientLeft + frame.scrollLeft,
+		top: (rect.top - parent.top) / scale - frame.clientTop + frame.scrollTop,
+		width: rect.width / scale,
+		height: rect.height / scale,
+	};
+}
+
+/** Aligns a child against its frame's padded inner bounds. */
+export function alignFrameChild(rect, bounds, alignment, padding = 0) {
+	const next = { ...rect };
+	if (alignment === 'left') next.left = padding;
+	if (alignment === 'center') next.left = (bounds.width - rect.width) / 2;
+	if (alignment === 'right') next.left = bounds.width - padding - rect.width;
+	if (alignment === 'top') next.top = padding;
+	if (alignment === 'middle') next.top = (bounds.height - rect.height) / 2;
+	if (alignment === 'bottom') next.top = bounds.height - padding - rect.height;
+	return next;
+}
+
+/** Places children in their existing visual order with an explicit horizontal or vertical gap. */
+export function spaceFrameChildren(rects, axis, gap) {
+	const key = axis === 'x' ? 'left' : 'top';
+	const size = axis === 'x' ? 'width' : 'height';
+	const ordered = rects.map((rect, index) => ({ ...rect, index })).sort((a, b) => a[key] - b[key]);
+	let cursor = ordered[0]?.[key] || 0;
+	const result = rects.map((rect) => ({ ...rect }));
+	for (const rect of ordered) {
+		result[rect.index][key] = cursor;
+		cursor += rect[size] + Math.max(0, Number(gap) || 0);
+	}
+	return result;
+}

package/src/pages/designer/layers/DomDesignerLayers.vue

@@ -0,0 +1,11 @@
+<script setup>
+import DomTreeView from '../../components/tree-view/DomTreeView.vue';
+
+defineOptions({ __doc: { name: 'Designer layers', description: 'Beta layer tree shared with Studio. Accepts the full DomTreeView props, slots and events.' } });
+</script>
+
+<template>
+	<DomTreeView label="Layers" :chrome="false">
+		<template v-for="(_, name) in $slots" #[name]="scope"><slot :name="name" v-bind="scope" /></template>
+	</DomTreeView>
+</template>

package/src/pages/designer/shadow-editor/DomShadowEditor.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { ref, watch } from 'vue';
+import ShadowLayers from './ShadowLayers.vue';
+import { shadowListToCss } from '../shadow-editor/shadowModel.js';
+
+defineOptions({ __doc: { name: 'Shadow editor', description: 'Beta controlled CSS box-shadow layers: drop, inner and ring.' } });
+const props = defineProps({
+	modelValue: { type: Array, default: () => [] },
+	title: { type: String, default: 'Box shadows' },
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+const draft = ref([]);
+const open = ref(true);
+
+/** Copies caller-owned layers so editing never mutates a prop or its children. */
+function syncLayers(value) {
+	if (JSON.stringify(value) !== JSON.stringify(draft.value)) draft.value = value.map((layer) => ({ ...layer }));
+}
+/** Publishes independent layer records and their ready-to-use CSS value. */
+function publishLayers(value) {
+	if (JSON.stringify(value) === JSON.stringify(props.modelValue)) return;
+	const layers = value.map((layer) => ({ ...layer }));
+	emit('update:modelValue', layers);
+	emit('change', { layers, css: shadowListToCss(layers) });
+}
+watch(() => props.modelValue, syncLayers, { deep: true, immediate: true });
+watch(draft, publishLayers, { deep: true });
+</script>
+
+<template>
+	<ShadowLayers v-model="open" :shadows="draft" :title="title" />
+</template>

package/src/pages/designer/shadow-editor/ShadowLayers.vue

@@ -0,0 +1,185 @@
+<script setup>
+import { ref } from 'vue';
+import CssColorInput from '../color-swatch/DomColorSwatch.vue';
+import {
+	DomNativeSelect,
+	DomPopover,
+	DomRangeInput,
+} from '../../lib/vue';
+import ControlIconButton from '../_shared/ControlIconButton.vue';
+import StyleControlSection from '../_shared/StyleControlSection.vue';
+import {
+	addShadowLayer,
+	duplicateShadowLayer,
+	enabledShadows,
+	removeShadowLayer,
+	shadowKindOptions,
+	shadowTitle,
+} from '../shadow-editor/shadowModel.js';
+
+const props = defineProps({
+	shadows: {
+		type: Array,
+		required: true,
+	},
+	modelValue: {
+		type: Boolean,
+		default: true,
+	},
+	title: {
+		type: String,
+		default: 'Box shadows',
+	},
+	variables: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+
+const section = ref(null);
+const emit = defineEmits(['update:modelValue']);
+
+/** Adds a default layer to the editor-owned draft. */
+function addShadow() {
+	emit('update:modelValue', true);
+	addShadowLayer(props.shadows);
+}
+
+/** Duplicates a draft layer with a fresh identity. */
+function duplicateShadow(index) {
+	duplicateShadowLayer(props.shadows, index);
+}
+
+/** Removes a layer from the editor-owned draft. */
+function removeShadow(index) {
+	removeShadowLayer(props.shadows, index);
+}
+
+/** Closes other layer popovers when opening the active layer. */
+function closeOtherLayerPopovers(activeId) {
+	if (typeof document === 'undefined') return;
+	globalThis.requestAnimationFrame?.(() => {
+		section.value?.$el?.querySelectorAll('dom-popover[data-layer-popover-id]').forEach((popover) => {
+			if (popover.dataset.layerPopoverId === activeId) return;
+			closeLayerPopoverElement(popover);
+		});
+	});
+}
+
+/** Closes open layer controls before switching the active layer. */
+function closeAllLayerPopovers() {
+	if (typeof document === 'undefined') return;
+	section.value?.$el?.querySelectorAll('dom-popover[data-layer-popover-id]').forEach(closeLayerPopoverElement);
+}
+
+/** Closes a native popover and synchronizes its trigger state. */
+function closeLayerPopoverElement(popover) {
+	popover.open = false;
+	popover.removeAttribute('open');
+	popover.querySelector('.dom-popover-panel')?.hidePopover?.();
+	popover.querySelector('[aria-expanded="true"]')?.setAttribute('aria-expanded', 'false');
+}
+</script>
+
+<template>
+	<StyleControlSection
+		ref="section"
+		:model-value="modelValue"
+		:title="title"
+		:meta="`${enabledShadows(shadows).length} of ${shadows.length} visible`"
+		@update:model-value="emit('update:modelValue', $event)"
+	>
+		<template #actions>
+			<ControlIconButton icon="plus" label="Add shadow layer" @click.stop="addShadow" />
+		</template>
+
+		<div class="divide-y divide-border">
+			<p v-if="variables.shadow" class="px-3 py-2 font-mono text-[11px] text-muted-fg">{{ variables.shadow }}</p>
+			<article
+				v-for="(shadow, index) in shadows"
+				:key="shadow.id"
+				class="px-3 py-2"
+				:class="!shadow.enabled && 'opacity-60'"
+			>
+				<div class="grid grid-cols-[1fr_auto] items-center gap-2">
+					<DomPopover
+						:data-layer-popover-id="shadow.id"
+						position="start-bottom"
+						width="w-[22rem] max-w-[calc(100vw-2rem)]"
+						padding="p-0"
+						:collision-padding="12"
+						@open="closeOtherLayerPopovers(shadow.id)"
+					>
+						<template #trigger>
+							<button
+								type="button"
+								class="w-full min-w-0 rounded-md text-left transition hover:bg-secondary/60"
+								@pointerdown.capture="closeAllLayerPopovers"
+							>
+								<span class="flex min-w-0 items-center gap-2">
+									<span class="font-mono text-[11px] text-muted-fg">{{ index + 1 }}</span>
+									<span class="truncate text-sm font-medium">{{ shadowTitle(shadow) }}</span>
+								</span>
+							</button>
+						</template>
+						<div>
+							<div class="border-b border-border px-3 py-2">
+								<p class="truncate text-sm font-semibold">{{ shadowTitle(shadow) }}</p>
+							</div>
+							<div class="grid gap-3 p-3 sm:grid-cols-2">
+								<DomNativeSelect
+									v-model="shadow.kind"
+									label="Type"
+									:options="shadowKindOptions"
+									placeholder=""
+								/>
+								<CssColorInput v-model="shadow.color" label="Colour" />
+								<DomRangeInput v-model="shadow.alpha" label="Alpha" :min="0" :max="100" suffix="%" />
+								<DomRangeInput
+									v-model="shadow.x"
+									label="Horizontal"
+									:min="-80"
+									:max="80"
+									suffix="px"
+									:disabled="shadow.kind === 'ring'"
+								/>
+								<DomRangeInput
+									v-model="shadow.y"
+									label="Vertical"
+									:min="-80"
+									:max="80"
+									suffix="px"
+									:disabled="shadow.kind === 'ring'"
+								/>
+								<DomRangeInput
+									v-model="shadow.blur"
+									label="Blur"
+									:min="0"
+									:max="120"
+									suffix="px"
+									:disabled="shadow.kind === 'ring'"
+								/>
+								<DomRangeInput
+									v-model="shadow.spread"
+									label="Spread"
+									:min="-80"
+									:max="80"
+									suffix="px"
+								/>
+							</div>
+						</div>
+					</DomPopover>
+					<div class="flex items-center gap-1">
+						<ControlIconButton icon="duplicate" label="Duplicate shadow" @click="duplicateShadow(index)" />
+						<ControlIconButton
+							:icon="shadow.enabled ? 'eye' : 'eye-off'"
+							:label="shadow.enabled ? 'Hide shadow' : 'Show shadow'"
+							@click="shadow.enabled = !shadow.enabled"
+						/>
+						<ControlIconButton icon="remove" label="Remove shadow" @click="removeShadow(index)" />
+					</div>
+				</div>
+			</article>
+		</div>
+	</StyleControlSection>
+</template>

package/src/pages/designer/shadow-editor/shadowModel.js

@@ -0,0 +1,73 @@
+import { cssColorWithAlpha } from '../../lib/css/color.js';
+
+export const shadowKindOptions = [
+	{ label: 'Drop shadow', value: 'drop' },
+	{ label: 'Inner shadow', value: 'inset' },
+	{ label: 'Ring', value: 'ring' },
+];
+
+/** Creates a fresh editable shadow layer. Supply deterministic IDs after construction during SSR. */
+export function createShadow(overrides = {}) {
+	return {
+		enabled: true,
+		open: true,
+		kind: 'drop',
+		color: '#000000',
+		alpha: 20,
+		x: 0,
+		y: 8,
+		blur: 18,
+		spread: -6,
+		...overrides,
+		id: createId(),
+	};
+}
+
+/** Returns enabled layers in CSS stacking order. */
+export function enabledShadows(shadowList) {
+	return shadowList.filter((shadow) => shadow.enabled);
+}
+
+/** Serializes a drop shadow, inner shadow or ring to CSS. */
+export function shadowToCss(shadow) {
+	const color = cssColorWithAlpha(shadow.color, shadow.alpha);
+	if (shadow.kind === 'ring') return `0 0 0 ${shadow.spread}px ${color}`;
+	return `${shadow.kind === 'inset' ? 'inset ' : ''}${shadow.x}px ${shadow.y}px ${shadow.blur}px ${shadow.spread}px ${color}`;
+}
+
+/** Serializes visible layers as a CSS box-shadow value. */
+export function shadowListToCss(shadowList) {
+	const visibleShadows = enabledShadows(shadowList);
+	if (!visibleShadows.length) return 'none';
+	return visibleShadows.map((shadow) => shadowToCss(shadow)).join(', ');
+}
+
+/** Appends a new shadow and closes existing layer disclosures. */
+export function addShadowLayer(shadowList) {
+	shadowList.forEach((shadow) => {
+		shadow.open = false;
+	});
+	shadowList.push(createShadow());
+}
+
+/** Inserts an independent duplicate with a fresh identity. */
+export function duplicateShadowLayer(shadowList, index) {
+	shadowList.splice(index + 1, 0, createShadow({ ...shadowList[index], open: true }));
+}
+
+/** Removes a layer at the specified index. */
+export function removeShadowLayer(shadowList, index) {
+	shadowList.splice(index, 1);
+}
+
+/** Returns the human-readable shadow kind. */
+export function shadowTitle(shadow) {
+	if (shadow.kind === 'ring') return 'Ring';
+	if (shadow.kind === 'inset') return 'Inner shadow';
+	return 'Drop shadow';
+}
+
+/** Creates an opaque identity for a newly inserted editor layer. */
+function createId() {
+	return globalThis.crypto?.randomUUID?.() || `${Date.now()}-${Math.random()}`;
+}

package/src/pages/designer/stage/DesignerBounds.vue

@@ -0,0 +1,31 @@
+<script setup>
+const props = defineProps({
+	box: { type: Object, required: true },
+	scale: { type: Number, default: 1 },
+	positioning: { type: Boolean, default: false },
+});
+const emit = defineEmits(['begin', 'move', 'finish', 'cancel', 'nudge']);
+const handles = [
+	{ id: 'nw', label: 'top left', x: 0, y: 0, cursor: 'nwse-resize' },
+	{ id: 'n', label: 'top', x: 50, y: 0, cursor: 'ns-resize' },
+	{ id: 'ne', label: 'top right', x: 100, y: 0, cursor: 'nesw-resize' },
+	{ id: 'e', label: 'right', x: 100, y: 50, cursor: 'ew-resize' },
+	{ id: 'se', label: 'bottom right', x: 100, y: 100, cursor: 'nwse-resize' },
+	{ id: 's', label: 'bottom', x: 50, y: 100, cursor: 'ns-resize' },
+	{ id: 'sw', label: 'bottom left', x: 0, y: 100, cursor: 'nesw-resize' },
+	{ id: 'w', label: 'left', x: 0, y: 50, cursor: 'ew-resize' },
+];
+/** Keeps handles constant in screen pixels at every stage zoom. */
+function handleStyle(handle) {
+	return { left: `${handle.x}%`, top: `${handle.y}%`, width: `${12 / props.scale}px`, height: `${12 / props.scale}px`, borderWidth: `${2 / props.scale}px`, cursor: handle.cursor };
+}
+</script>
+
+<template>
+	<div data-designer-overlay class="pointer-events-none absolute z-[2147483647] border-primary" :style="{ borderWidth: `${2 / scale}px`, left: `${box.left}px`, top: `${box.top}px`, width: `${box.width}px`, height: `${box.height}px` }">
+		<button v-if="positioning" type="button" class="pointer-events-auto absolute inset-0 cursor-move touch-none outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="Move selected layer. Arrow keys move; Alt and arrows resize; Shift uses ten pixels." @pointerdown="emit('begin', { event: $event, handle: '' })" @pointermove="emit('move', $event)" @pointerup="emit('finish')" @pointercancel="emit('cancel')" @lostpointercapture="emit('cancel')" @keydown="emit('nudge', { event: $event, handle: '' })" />
+		<template v-if="positioning">
+			<button v-for="handle in handles" :key="handle.id" type="button" class="pointer-events-auto absolute -translate-x-1/2 -translate-y-1/2 touch-none border-primary bg-canvas outline-none focus-visible:ring-2 focus-visible:ring-ring" :style="handleStyle(handle)" :aria-label="`Resize selected layer: ${handle.label}`" @pointerdown.stop="emit('begin', { event: $event, handle: handle.id })" @pointermove="emit('move', $event)" @pointerup="emit('finish')" @pointercancel="emit('cancel')" @lostpointercapture="emit('cancel')" @keydown="emit('nudge', { event: $event, handle: handle.id })" />
+		</template>
+	</div>
+</template>