@getdom/studio 0.1.0 → 0.2.0

package/src/pages/designer/backdrop-editor/BackdropControl.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { computed } from 'vue';
+import {
+	DomRangeInput,
+} from '../../lib/vue';
+import ControlIconButton from '../_shared/ControlIconButton.vue';
+import StyleControlSection from '../_shared/StyleControlSection.vue';
+import { backdropToCss } from './backdropModel.js';
+
+const props = defineProps({
+	backdrop: {
+		type: Object,
+		required: true,
+	},
+	modelValue: {
+		type: Boolean,
+		default: true,
+	},
+	title: {
+		type: String,
+		default: 'Backdrop effects',
+	},
+	variables: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+
+const emit = defineEmits(['update:modelValue']);
+const backdropCss = computed(() => backdropToCss(props.backdrop));
+</script>
+
+<template>
+	<StyleControlSection
+		:model-value="modelValue"
+		:title="title"
+		:meta="backdropCss"
+		:muted="!backdrop.enabled"
+		@update:model-value="emit('update:modelValue', $event)"
+	>
+		<template #actions>
+			<ControlIconButton
+				:icon="backdrop.enabled ? 'eye' : 'eye-off'"
+				:label="backdrop.enabled ? 'Hide backdrop effects' : 'Show backdrop effects'"
+				@click="backdrop.enabled = !backdrop.enabled"
+			/>
+		</template>
+
+		<div class="p-3">
+			<div class="grid gap-3 sm:grid-cols-2">
+				<DomRangeInput v-model="backdrop.blur" label="Blur" :min="0" :max="40" suffix="px" />
+				<DomRangeInput v-model="backdrop.saturate" label="Saturate" :min="0.5" :max="1.8" :step="0.01" />
+			</div>
+			<p v-if="variables.backdrop" class="mt-3 truncate font-mono text-[11px] text-muted-fg">{{ variables.backdrop }}</p>
+		</div>
+	</StyleControlSection>
+</template>

package/src/pages/designer/backdrop-editor/DomBackdropEditor.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { ref, watch } from 'vue';
+import BackdropControl from './BackdropControl.vue';
+import { createBackdrop, backdropToCss } from './backdropModel.js';
+
+defineOptions({ __doc: { name: 'Backdrop editor', description: 'Beta controlled CSS backdrop editor shared with the theme designer.' } });
+const props = defineProps({
+	modelValue: { type: Object, default: () => createBackdrop() },
+	title: { type: String, default: 'Backdrop effects' },
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+const draft = ref(createBackdrop());
+const open = ref(true);
+/** Copies records so nested control edits never mutate caller-owned state. */
+function clone(value) { return { ...value }; }
+/** Synchronizes external state, preserving existing fill identities. */
+function sync(value) {
+	if (JSON.stringify(value) !== JSON.stringify(draft.value)) draft.value = clone(value);
+}
+/** Emits independent records and ready-to-bind CSS. */
+function publish(value) {
+	if (JSON.stringify(value) === JSON.stringify(props.modelValue)) return;
+	const backdrop = clone(value);
+	emit('update:modelValue', backdrop);
+	emit('change', { backdrop, css: backdropToCss(backdrop) });
+}
+watch(() => props.modelValue, sync, { deep: true, immediate: true });
+watch(draft, publish, { deep: true });
+</script>
+
+<template>
+	<BackdropControl v-model="open" :backdrop="draft" :title="title" />
+</template>

package/src/pages/designer/backdrop-editor/backdropModel.js

@@ -0,0 +1,39 @@
+/** Shared theme editor helper: createBackdrop. */
+export function createBackdrop(overrides = {}) {
+	return {
+		enabled: false,
+		open: true,
+		blur: 0,
+		saturate: 1,
+		...overrides,
+		blur: Number.parseFloat(overrides.blur ?? 0),
+		saturate: Number.parseFloat(overrides.saturate ?? 1),
+	};
+}
+
+/** Serializes enabled blur and saturation into a backdrop-filter value. */
+export function backdropToCss(backdrop) {
+	if (!backdrop?.enabled) return 'none';
+	const parts = [];
+	const blur = Number.parseFloat(backdrop.blur);
+	const saturate = Number.parseFloat(backdrop.saturate);
+	if (blur > 0) parts.push(`blur(${formatCssNumber(blur)}px)`);
+	if (Number.isFinite(saturate) && saturate !== 1) parts.push(`saturate(${formatCssNumber(saturate)})`);
+	return parts.length ? parts.join(' ') : 'none';
+}
+
+/** Shared theme editor helper: parseBackdropValue. */
+export function parseBackdropValue(value) {
+	const raw = String(value || '').trim();
+	if (!raw || raw === 'none') return createBackdrop();
+	return createBackdrop({
+		enabled: true,
+		blur: Number.parseFloat(raw.match(/blur\(\s*(-?\d+(?:\.\d+)?)px\s*\)/i)?.[1] ?? 0),
+		saturate: Number.parseFloat(raw.match(/saturate\(\s*(-?\d+(?:\.\d+)?)\s*\)/i)?.[1] ?? 1),
+	});
+}
+
+/** Formats a CSS number. */
+function formatCssNumber(value) {
+	return Number(Number.parseFloat(value || 0).toFixed(3)).toString();
+}

package/src/pages/designer/background-editor/BackgroundLayers.vue

@@ -0,0 +1,210 @@
+<script setup>
+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 {
+	addFillLayer,
+	duplicateFillLayer,
+	enabledFills,
+	fillToCss,
+	fillTypeOptions,
+	removeFillLayer,
+} from './backgroundModel.js';
+
+const props = defineProps({
+	background: {
+		type: Object,
+		required: true,
+	},
+	modelValue: {
+		type: Boolean,
+		default: true,
+	},
+	title: {
+		type: String,
+		default: 'Fill',
+	},
+	variables: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+/** Handles background layer interaction: addFill. */
+function addFill() {
+	emit('update:modelValue', true);
+	addFillLayer(props.background);
+}
+
+/** Handles background layer interaction: duplicateFill. */
+function duplicateFill(index) {
+	duplicateFillLayer(props.background, index);
+}
+
+/** Handles background layer interaction: removeFill. */
+function removeFill(index) {
+	removeFillLayer(props.background, index);
+}
+
+/** Handles background layer interaction: closeOtherLayerPopovers. */
+function closeOtherLayerPopovers(activeId) {
+	if (typeof document === 'undefined') return;
+	globalThis.requestAnimationFrame?.(() => {
+		document.querySelectorAll('dom-popover[data-layer-popover-id]').forEach((popover) => {
+			if (popover.dataset.layerPopoverId === activeId) return;
+			closeLayerPopoverElement(popover);
+		});
+	});
+}
+
+/** Handles background layer interaction: closeAllLayerPopovers. */
+function closeAllLayerPopovers() {
+	if (typeof document === 'undefined') return;
+	document.querySelectorAll('dom-popover[data-layer-popover-id]').forEach(closeLayerPopoverElement);
+}
+
+/** Handles background layer interaction: closeLayerPopoverElement. */
+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
+		:model-value="modelValue"
+		:title="title"
+		:meta="`${enabledFills(background.fills).length} of ${background.fills.length} visible`"
+		:muted="!background.enabled"
+		@update:model-value="emit('update:modelValue', $event)"
+	>
+		<template #actions>
+			<ControlIconButton icon="plus" label="Add background layer" @click.stop="addFill" />
+			<ControlIconButton
+				:icon="background.enabled ? 'eye' : 'eye-off'"
+				:label="background.enabled ? 'Hide background' : 'Show background'"
+				@click="background.enabled = !background.enabled"
+			/>
+		</template>
+
+		<div class="divide-y divide-border">
+			<p v-if="variables.bgImage" class="px-3 py-2 font-mono text-[11px] text-muted-fg">
+				{{ variables.bgImage }}
+			</p>
+			<article
+				v-for="(fill, index) in background.fills"
+				:key="fill.id"
+				class="px-3 py-2"
+				:class="!fill.enabled && 'opacity-60'"
+			>
+				<div class="grid grid-cols-[1fr_auto] items-center gap-2">
+					<DomPopover
+						:data-layer-popover-id="fill.id"
+						position="start-bottom"
+						width="w-[22rem] max-w-[calc(100vw-2rem)]"
+						padding="p-0"
+						:collision-padding="12"
+						@open="closeOtherLayerPopovers(fill.id)"
+					>
+						<template #trigger>
+							<button
+								type="button"
+								class="grid w-full min-w-0 grid-cols-[auto_1fr] items-center gap-2 rounded-md text-left transition hover:bg-secondary/60"
+								@pointerdown.capture="closeAllLayerPopovers"
+							>
+								<span
+									class="h-5 w-5 rounded border border-border"
+									:style="{ background: fillToCss(fill) }"
+								/>
+								<span class="min-w-0">
+									<span class="block truncate text-sm font-medium">{{
+										fill.kind === 'solid'
+											? 'Solid'
+											: fill.kind === 'linear'
+												? 'Linear gradient'
+												: 'Radial gradient'
+									}}</span>
+								</span>
+							</button>
+						</template>
+						<div>
+							<div class="border-b border-border px-3 py-2">
+								<p class="truncate text-sm font-semibold">Fill {{ index + 1 }}</p>
+							</div>
+							<div class="grid gap-3 p-3 sm:grid-cols-2">
+								<DomNativeSelect
+									v-model="fill.kind"
+									label="Type"
+									:options="fillTypeOptions"
+									placeholder=""
+								/>
+								<template v-if="fill.kind === 'solid'">
+									<CssColorInput v-model="fill.color" label="Colour" />
+									<DomRangeInput v-model="fill.alpha" label="Alpha" :min="0" :max="100" suffix="%" />
+								</template>
+								<template v-else>
+									<CssColorInput v-model="fill.gradientFrom" label="From" />
+									<DomRangeInput
+										v-model="fill.gradientFromAlpha"
+										label="From alpha"
+										:min="0"
+										:max="100"
+										suffix="%"
+									/>
+									<CssColorInput v-model="fill.gradientTo" label="To" />
+									<DomRangeInput
+										v-model="fill.gradientToAlpha"
+										label="To alpha"
+										:min="0"
+										:max="100"
+										suffix="%"
+									/>
+									<DomRangeInput
+										v-if="fill.kind === 'linear'"
+										v-model="fill.gradientAngle"
+										label="Angle"
+										:min="0"
+										:max="360"
+										suffix="deg"
+									/>
+									<DomRangeInput
+										v-model="fill.gradientFromStop"
+										label="From stop"
+										:min="0"
+										:max="100"
+										suffix="%"
+									/>
+									<DomRangeInput
+										v-model="fill.gradientToStop"
+										label="To stop"
+										:min="0"
+										:max="100"
+										suffix="%"
+									/>
+								</template>
+							</div>
+						</div>
+					</DomPopover>
+					<div class="flex items-center gap-1">
+						<ControlIconButton icon="duplicate" label="Duplicate fill" @click="duplicateFill(index)" />
+						<ControlIconButton
+							:icon="fill.enabled ? 'eye' : 'eye-off'"
+							:label="fill.enabled ? 'Hide fill' : 'Show fill'"
+							@click="fill.enabled = !fill.enabled"
+						/>
+						<ControlIconButton icon="remove" label="Remove fill" @click="removeFill(index)" />
+					</div>
+				</div>
+			</article>
+		</div>
+	</StyleControlSection>
+</template>

package/src/pages/designer/background-editor/DomBackgroundEditor.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { ref, watch } from 'vue';
+import BackgroundLayers from './BackgroundLayers.vue';
+import { createBackgroundState, backgroundImageToCss } from './backgroundModel.js';
+
+defineOptions({ __doc: { name: 'Background editor', description: 'Beta controlled CSS background editor shared with the theme designer.' } });
+const props = defineProps({
+	modelValue: { type: Object, default: () => createBackgroundState({}, { allowEmpty: true }) },
+	title: { type: String, default: 'Background layers' },
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+const draft = ref(createBackgroundState({}, { allowEmpty: true }));
+const open = ref(true);
+/** Copies records so nested control edits never mutate caller-owned state. */
+function clone(value) { return { ...value, fills: (value.fills || []).map((fill) => ({ ...fill })) }; }
+/** Synchronizes external state, preserving existing fill identities. */
+function sync(value) {
+	if (JSON.stringify(value) !== JSON.stringify(draft.value)) draft.value = clone(value);
+}
+/** Emits independent records and ready-to-bind CSS. */
+function publish(value) {
+	if (JSON.stringify(value) === JSON.stringify(props.modelValue)) return;
+	const background = clone(value);
+	emit('update:modelValue', background);
+	emit('change', { background, css: backgroundImageToCss(background) });
+}
+watch(() => props.modelValue, sync, { deep: true, immediate: true });
+watch(draft, publish, { deep: true });
+</script>
+
+<template>
+	<BackgroundLayers v-model="open" :background="draft" :title="title" />
+</template>

package/src/pages/designer/background-editor/backgroundModel.js

@@ -0,0 +1,102 @@
+import { cssColorWithAlpha } from '../../lib/css/color.js';
+
+export const fillTypeOptions = [
+	{ label: 'Solid', value: 'solid' },
+	{ label: 'Linear gradient', value: 'linear' },
+	{ label: 'Radial gradient', value: 'radial' },
+];
+
+/** Shared theme editor helper: createFillLayers. */
+export function createFillLayers(background = {}, options = {}) {
+	if (Array.isArray(background.fills) && background.fills.length) {
+		return background.fills.map((fill, index) => createFill({ ...fill, open: index === 0 }));
+	}
+	if (options.allowEmpty) return [];
+	return [createFill()];
+}
+
+/** Creates a background record with independently owned fill layers. */
+export function createBackgroundState(overrides = {}, options = {}) {
+	return {
+		enabled: overrides.enabled ?? true,
+		open: overrides.open ?? true,
+		blendMode: overrides.blendMode ?? 'normal',
+		fills: createFillLayers(overrides, options),
+	};
+}
+
+/** Creates a new fill identity; assign a deterministic ID after construction for SSR. */
+export function createFill(overrides = {}) {
+	return {
+		enabled: true,
+		open: true,
+		kind: 'solid',
+		color: '#171717',
+		alpha: 100,
+		gradientFrom: '#171717',
+		gradientFromAlpha: 100,
+		gradientTo: '#4f46e5',
+		gradientToAlpha: 100,
+		gradientAngle: 135,
+		gradientFromStop: 0,
+		gradientToStop: 100,
+		...overrides,
+		id: createId(),
+	};
+}
+
+/** Shared theme editor helper: enabledFills. */
+export function enabledFills(fillList) {
+	return fillList.filter((fill) => fill.enabled);
+}
+
+/** Shared theme editor helper: fillToCss. */
+export function fillToCss(fill) {
+	if (fill.kind === 'linear') {
+		return `linear-gradient(${fill.gradientAngle}deg, ${cssColorWithAlpha(fill.gradientFrom, fill.gradientFromAlpha)} ${fill.gradientFromStop}%, ${cssColorWithAlpha(fill.gradientTo, fill.gradientToAlpha)} ${fill.gradientToStop}%)`;
+	}
+	if (fill.kind === 'radial') {
+		return `radial-gradient(circle at 50% 45%, ${cssColorWithAlpha(fill.gradientFrom, fill.gradientFromAlpha)} ${fill.gradientFromStop}%, ${cssColorWithAlpha(fill.gradientTo, fill.gradientToAlpha)} ${fill.gradientToStop}%)`;
+	}
+	return cssColorWithAlpha(fill.color, fill.alpha);
+}
+
+/** Shared theme editor helper: fillListToCss. */
+export function fillListToCss(fillList) {
+	const visibleFills = enabledFills(fillList);
+	if (!visibleFills.length) return 'transparent';
+	return visibleFills.map((fill) => fillToCss(fill)).join(', ');
+}
+
+/** Serializes enabled fills as valid CSS background images, first layer on top. */
+export function backgroundImageToCss(background) {
+	if (!background?.enabled) return 'none';
+	const layers = enabledFills(background.fills || []).map((fill) => {
+		const css = fillToCss(fill);
+		return fill.kind === 'linear' || fill.kind === 'radial' ? css : `linear-gradient(${css}, ${css})`;
+	});
+	return layers.join(', ') || 'none';
+}
+
+/** Shared theme editor helper: addFillLayer. */
+export function addFillLayer(background) {
+	background.fills.forEach((fill) => {
+		fill.open = false;
+	});
+	background.fills.unshift(createFill({ kind: 'linear' }));
+}
+
+/** Shared theme editor helper: duplicateFillLayer. */
+export function duplicateFillLayer(background, index) {
+	background.fills.splice(index + 1, 0, createFill({ ...background.fills[index], open: true }));
+}
+
+/** Shared theme editor helper: removeFillLayer. */
+export function removeFillLayer(background, index) {
+	background.fills.splice(index, 1);
+}
+
+/** Creates a new fill identity. */
+function createId() {
+	return globalThis.crypto?.randomUUID?.() || `${Date.now()}-${Math.random()}`;
+}

package/src/pages/designer/border-editor/BorderControl.vue

@@ -0,0 +1,72 @@
+<script setup>
+import CssColorInput from '../color-swatch/DomColorSwatch.vue';
+import {
+	DomNativeSelect,
+	DomRangeInput,
+} from '../../lib/vue';
+import ControlIconButton from '../_shared/ControlIconButton.vue';
+import StyleControlSection from '../_shared/StyleControlSection.vue';
+import { borderStyleOptions } from './borderModel.js';
+
+const props = defineProps({
+	border: {
+		type: Object,
+		required: true,
+	},
+	modelValue: {
+		type: Boolean,
+		default: true,
+	},
+	title: {
+		type: String,
+		default: 'Border',
+	},
+	maxWidth: { type: Number, default: 6 },
+	variables: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+
+const emit = defineEmits(['update:modelValue']);
+</script>
+
+<template>
+	<StyleControlSection
+		:model-value="modelValue"
+		:title="title"
+		:meta="border.enabled && border.style !== 'none' ? `${border.width}px ${border.style}` : 'none'"
+		:muted="!border.enabled"
+		@update:model-value="emit('update:modelValue', $event)"
+	>
+		<template #actions>
+			<ControlIconButton
+				:icon="border.enabled ? 'eye' : 'eye-off'"
+				:label="border.enabled ? 'Hide border' : 'Show border'"
+				@click="border.enabled = !border.enabled"
+			/>
+		</template>
+
+		<div class="p-3">
+			<div class="grid gap-3 sm:grid-cols-2">
+				<DomRangeInput v-model="border.width" label="Width" :min="0" :max="maxWidth" suffix="px" />
+				<DomNativeSelect v-model="border.style" label="Style" :options="borderStyleOptions" placeholder="" />
+				<CssColorInput v-model="border.color" label="Colour" />
+			</div>
+			<div
+				v-if="variables.color || variables.width || variables.style"
+				class="mt-3 flex flex-wrap gap-1.5 font-mono text-[11px] text-muted-fg"
+			>
+				<span v-if="variables.color" class="rounded border border-border bg-secondary px-1.5 py-0.5">{{
+					variables.color
+				}}</span>
+				<span v-if="variables.width" class="rounded border border-border bg-secondary px-1.5 py-0.5">{{
+					variables.width
+				}}</span>
+				<span v-if="variables.style" class="rounded border border-border bg-secondary px-1.5 py-0.5">{{
+					variables.style
+				}}</span>
+			</div>
+		</div>
+	</StyleControlSection>
+</template>

package/src/pages/designer/border-editor/DomBorderEditor.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref, watch } from 'vue';
+import BorderControl from './BorderControl.vue';
+import { createDesignerBorder, borderToCss } from './borderModel.js';
+
+defineOptions({ __doc: { name: 'Border editor', description: 'Beta controlled CSS border width, style and colour, shared with the CSS button creator.' } });
+const props = defineProps({
+	modelValue: { type: Object, default: () => createDesignerBorder() },
+	title: { type: String, default: 'Border' },
+	maxWidth: { type: Number, default: 40 },
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+const draft = ref(createDesignerBorder());
+const open = ref(true);
+
+/** Copies incoming values so the underlying control never mutates application-owned records. */
+function syncBorder(value) {
+	const next = createDesignerBorder(value);
+	if (JSON.stringify(next) !== JSON.stringify(draft.value)) draft.value = next;
+}
+/** Emits an independent record and its CSS value for application-owned styling. */
+function publishBorder(value) {
+	if (JSON.stringify(value) === JSON.stringify(createDesignerBorder(props.modelValue))) return;
+	const border = { ...value };
+	emit('update:modelValue', border);
+	emit('change', { border, css: borderToCss(border) });
+}
+watch(() => props.modelValue, syncBorder, { deep: true, immediate: true });
+watch(draft, publishBorder, { deep: true });
+</script>
+
+<template>
+	<BorderControl v-model="open" :border="draft" :title="title" :max-width="maxWidth" />
+</template>

package/src/pages/designer/border-editor/borderModel.js

@@ -0,0 +1,21 @@
+export const borderStyleOptions = [
+	{ label: 'Solid', value: 'solid' },
+	{ label: 'Dashed', value: 'dashed' },
+	{ label: 'Dotted', value: 'dotted' },
+	{ label: 'Double', value: 'double' },
+	{ label: 'None', value: 'none' },
+];
+
+/** Creates a caller-owned uniform border record with a finite, nonnegative pixel width. */
+export function createDesignerBorder(overrides = {}) {
+	const width = Number.parseFloat(overrides.width ?? 1);
+	return { enabled: true, style: 'solid', color: '#171717', ...overrides, width: Number.isFinite(width) ? Math.max(0, width) : 1 };
+}
+
+/** Serializes a uniform border without discarding values when its visibility is disabled. */
+export function borderToCss(border) {
+	if (!border?.enabled || border.style === 'none') return 'none';
+	const value = createDesignerBorder(border);
+	const style = borderStyleOptions.some((option) => option.value === value.style) ? value.style : 'solid';
+	return `${value.width}px ${style} ${value.color}`;
+}