@velastack/cms 0.1.0

package/dist/components/cms/cms-entries.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" generics="R extends RouteId">
+	import type { Snippet } from 'svelte';
+	import type { RouteId, RouteParams } from '$app/types';
+	import { cms } from './cms-store.svelte.js';
+	import type { CmsEntry } from './scope.js';
+
+	type Props = {
+		routeId: R;
+		children: Snippet<[CmsEntry<RouteParams<R>>, number]>;
+		fallback?: Snippet;
+	};
+
+	let { routeId, children, fallback }: Props = $props();
+
+	const items = $derived((cms.entries[routeId] ?? []) as CmsEntry<RouteParams<R>>[]);
+</script>
+
+{#if items.length}
+	{#each items as item, i}
+		{@render children(item, i)}
+	{/each}
+{:else if fallback}
+	{@render fallback()}
+{/if}

package/dist/components/cms/cms-entries.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { RouteId, RouteParams } from '$app/types';
+import type { CmsEntry } from './scope.js';
+declare function $$render<R extends RouteId>(): {
+    props: {
+        routeId: R;
+        children: Snippet<[CmsEntry<RouteParams<R>>, number]>;
+        fallback?: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<R extends RouteId> {
+    props(): ReturnType<typeof $$render<R>>['props'];
+    events(): ReturnType<typeof $$render<R>>['events'];
+    slots(): ReturnType<typeof $$render<R>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <R extends RouteId>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<R>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<R>['props']>, ReturnType<__sveltets_Render<R>['events']>, ReturnType<__sveltets_Render<R>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<R>['bindings']>;
+    } & ReturnType<__sveltets_Render<R>['exports']>;
+    <R extends RouteId>(internal: unknown, props: ReturnType<__sveltets_Render<R>['props']> & {}): ReturnType<__sveltets_Render<R>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CmsEntries: $$IsomorphicComponent;
+type CmsEntries<R extends RouteId> = InstanceType<typeof CmsEntries<R>>;
+export default CmsEntries;

package/dist/components/cms/cms-image-editable.svelte

@@ -0,0 +1,439 @@
+<script lang="ts">
+	import { tick as svelteTick } from 'svelte';
+	import { page } from '$app/state';
+	import { cmsStore, type CmsScopeRef, type MediaItem } from './cms-store.svelte.js';
+	import { get as pathGet } from './path.js';
+	import type { CmsImageValue } from './cms-image.svelte';
+	import { Button } from '../admin-bar/ui/button/index.js';
+	import { Input } from '../admin-bar/ui/input/index.js';
+	import CssRoot from '../admin-bar/css-root.svelte';
+	import { clickOutside } from '../admin-bar/click-outside.js';
+	import CmsMediaPicker from './cms-media-picker.svelte';
+	import UploadIcon from '../admin-bar/icons/upload.svelte';
+	import LinkIcon from '../admin-bar/icons/link.svelte';
+	import ImagesIcon from '../admin-bar/icons/images.svelte';
+	import TrashIcon from '../admin-bar/icons/trash-2.svelte';
+	import CheckIcon from '../admin-bar/icons/check.svelte';
+	import XIcon from '../admin-bar/icons/x.svelte';
+	import LoaderIcon from '../admin-bar/icons/loader-circle.svelte';
+	import AlertIcon from '../admin-bar/icons/triangle-alert.svelte';
+
+	type Props = {
+		scope: CmsScopeRef;
+		name: string;
+		initial: CmsImageValue;
+		fallbackAlt: string;
+	};
+	let { scope, name, initial, fallbackAlt }: Props = $props();
+
+	// Read leaves through `getValue` so live drafts reflect immediately. Fall
+	// back to the snapshot the display passed in when nothing's been written.
+	const currentUrl = $derived.by(() => {
+		const v = pathGet(cmsStore.getValue(scope, name), 'url');
+		if (typeof v === 'string') return v;
+		return initial.url ?? '';
+	});
+	const currentAlt = $derived.by(() => {
+		const v = pathGet(cmsStore.getValue(scope, name), 'alt');
+		if (typeof v === 'string') return v;
+		return initial.alt ?? '';
+	});
+
+	const endpoint = $derived(page.data.cms?.endpoint ?? '/api/cms');
+
+	let mode: 'idle' | 'url' | 'alt' = $state('idle');
+	let urlValue = $state('');
+	let altValue = $state('');
+	let urlInputEl: HTMLInputElement | null = $state(null);
+	let altInputEl: HTMLInputElement | null = $state(null);
+	let fileInputEl: HTMLInputElement | null = $state(null);
+	let libraryOpen = $state(false);
+
+	let dragDepth = $state(0);
+	const dragging = $derived(dragDepth > 0);
+
+	let uploading = $state(false);
+	let error: string | null = $state(null);
+
+	const writeUrl = (v: string) => cmsStore.setValue(scope, `${name}.url`, v);
+	const writeAlt = (v: string) => cmsStore.setValue(scope, `${name}.alt`, v);
+
+	const upload = async (file: File) => {
+		if (!file.type.startsWith('image/')) {
+			error = 'Only image files are supported.';
+			return;
+		}
+		error = null;
+		uploading = true;
+		try {
+			const url = await cmsStore.uploadImage(endpoint, file);
+			writeUrl(url);
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Upload failed';
+		} finally {
+			uploading = false;
+		}
+	};
+
+	const onDragEnter = (e: DragEvent) => {
+		if (!e.dataTransfer?.types.includes('Files')) return;
+		e.preventDefault();
+		dragDepth++;
+	};
+	const onDragOver = (e: DragEvent) => {
+		if (!e.dataTransfer?.types.includes('Files')) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+	};
+	const onDragLeave = (e: DragEvent) => {
+		e.preventDefault();
+		dragDepth = Math.max(0, dragDepth - 1);
+	};
+	const onDrop = (e: DragEvent) => {
+		e.preventDefault();
+		dragDepth = 0;
+		const file = e.dataTransfer?.files?.[0];
+		if (file) upload(file);
+	};
+
+	const onPickerChange = () => {
+		const file = fileInputEl?.files?.[0];
+		if (file) upload(file);
+		if (fileInputEl) fileInputEl.value = '';
+	};
+
+	const openPicker = (e: Event) => {
+		e.preventDefault();
+		e.stopPropagation();
+		fileInputEl?.click();
+	};
+
+	const enterUrlMode = async (e: Event) => {
+		e.preventDefault();
+		e.stopPropagation();
+		urlValue = currentUrl;
+		mode = 'url';
+		await svelteTick();
+		urlInputEl?.focus();
+		urlInputEl?.select();
+	};
+
+	const enterAltMode = async (e: Event) => {
+		e.preventDefault();
+		e.stopPropagation();
+		altValue = currentAlt;
+		mode = 'alt';
+		await svelteTick();
+		altInputEl?.focus();
+		altInputEl?.select();
+	};
+
+	const applyUrl = (e?: Event) => {
+		e?.preventDefault();
+		e?.stopPropagation();
+		const v = urlValue.trim();
+		if (v !== currentUrl) writeUrl(v);
+		mode = 'idle';
+	};
+	const applyAlt = (e?: Event) => {
+		e?.preventDefault();
+		e?.stopPropagation();
+		if (altValue !== currentAlt) writeAlt(altValue);
+		mode = 'idle';
+	};
+	const cancelEdit = (e?: Event) => {
+		e?.preventDefault();
+		e?.stopPropagation();
+		mode = 'idle';
+	};
+	const onUrlKey = (e: KeyboardEvent) => {
+		if (e.key === 'Enter') applyUrl(e);
+		else if (e.key === 'Escape') cancelEdit(e);
+	};
+	const onAltKey = (e: KeyboardEvent) => {
+		if (e.key === 'Enter') applyAlt(e);
+		else if (e.key === 'Escape') cancelEdit(e);
+	};
+
+	const remove = (e: Event) => {
+		e.preventDefault();
+		e.stopPropagation();
+		writeUrl('');
+	};
+
+	const toggleLibrary = (e: Event) => {
+		e.preventDefault();
+		e.stopPropagation();
+		libraryOpen = !libraryOpen;
+	};
+
+	const onLibrarySelect = (item: MediaItem) => {
+		writeUrl(item.url);
+		libraryOpen = false;
+	};
+
+	const onLibraryKey = (e: KeyboardEvent) => {
+		if (e.key === 'Escape' && libraryOpen) {
+			e.preventDefault();
+			e.stopPropagation();
+			libraryOpen = false;
+		}
+	};
+
+	const dismissError = (e: Event) => {
+		e.preventDefault();
+		e.stopPropagation();
+		error = null;
+	};
+
+	const stopMouseDown = (e: MouseEvent) => e.preventDefault();
+
+	const renderedAlt = $derived(currentAlt || fallbackAlt);
+</script>
+
+<CssRoot>
+	<span
+		class="cms-image-edit"
+		class:dragging
+		role="region"
+		aria-label={`Image slot ${name}`}
+		ondragenter={onDragEnter}
+		ondragover={onDragOver}
+		ondragleave={onDragLeave}
+		ondrop={onDrop}
+	>
+		<button
+			type="button"
+			class="cms-image-edit__pick"
+			onclick={openPicker}
+			aria-label={currentUrl ? `Replace image for ${name}` : `Upload image for ${name}`}
+		>
+			{#if currentUrl}
+				<img class="cms-image" src={currentUrl} alt={renderedAlt} draggable="false" />
+			{:else}
+				<span class="cms-image-edit__empty" data-cms-name={name}>{name}</span>
+			{/if}
+		</button>
+
+		<input bind:this={fileInputEl} type="file" accept="image/*" hidden onchange={onPickerChange} />
+
+		<div
+			class="cms-image-edit__toolbar"
+			role="toolbar"
+			tabindex="-1"
+			aria-label="Image actions"
+			onmousedown={stopMouseDown}
+		>
+			{#if mode === 'idle'}
+				<Button size="xs" variant="ghost" onclick={openPicker}>
+					<UploadIcon class="vela:size-3.5" />
+					Upload
+				</Button>
+				<Button size="xs" variant="ghost" onclick={toggleLibrary}>
+					<ImagesIcon class="vela:size-3.5" />
+					Library
+				</Button>
+				<Button size="xs" variant="ghost" onclick={enterUrlMode}>
+					<LinkIcon class="vela:size-3.5" />
+					URL
+				</Button>
+				<Button size="xs" variant="ghost" onclick={enterAltMode}>Alt</Button>
+				{#if currentUrl}
+					<Button size="xs" variant="ghost" onclick={remove} aria-label="Remove image">
+						<TrashIcon class="vela:size-3.5" />
+					</Button>
+				{/if}
+			{:else if mode === 'url'}
+				<Input
+					bind:ref={urlInputEl}
+					bind:value={urlValue}
+					type="url"
+					placeholder="https://example.com/image.jpg"
+					onkeydown={onUrlKey}
+					class="vela:h-7 vela:w-72 vela:text-xs"
+				/>
+				<Button size="icon" variant="ghost" aria-label="Apply URL" onclick={applyUrl}>
+					<CheckIcon class="vela:size-4" />
+				</Button>
+				<Button size="icon" variant="ghost" aria-label="Cancel" onclick={cancelEdit}>
+					<XIcon class="vela:size-4" />
+				</Button>
+			{:else if mode === 'alt'}
+				<Input
+					bind:ref={altInputEl}
+					bind:value={altValue}
+					type="text"
+					placeholder="Alt text"
+					onkeydown={onAltKey}
+					class="vela:h-7 vela:w-72 vela:text-xs"
+				/>
+				<Button size="icon" variant="ghost" aria-label="Apply alt text" onclick={applyAlt}>
+					<CheckIcon class="vela:size-4" />
+				</Button>
+				<Button size="icon" variant="ghost" aria-label="Cancel" onclick={cancelEdit}>
+					<XIcon class="vela:size-4" />
+				</Button>
+			{/if}
+		</div>
+
+		{#if libraryOpen}
+			<div
+				class="cms-image-edit__library"
+				role="dialog"
+				tabindex="-1"
+				aria-label="Choose from media library"
+				onmousedown={stopMouseDown}
+				onkeydown={onLibraryKey}
+				use:clickOutside={() => (libraryOpen = false)}
+			>
+				<CmsMediaPicker {endpoint} onSelect={onLibrarySelect} />
+			</div>
+		{/if}
+
+		{#if dragging}
+			<div class="cms-image-edit__overlay cms-image-edit__overlay--drop">
+				<UploadIcon class="vela:size-6" />
+				<span>Drop to upload</span>
+			</div>
+		{/if}
+
+		{#if uploading}
+			<div class="cms-image-edit__overlay cms-image-edit__overlay--uploading">
+				<LoaderIcon class="vela:size-5 vela:animate-spin" />
+			</div>
+		{/if}
+
+		{#if error}
+			<div class="cms-image-edit__error" role="alert">
+				<AlertIcon class="vela:size-3.5" />
+				<span>{error}</span>
+				<button
+					type="button"
+					class="cms-image-edit__error-dismiss"
+					aria-label="Dismiss error"
+					onclick={dismissError}>×</button
+				>
+			</div>
+		{/if}
+	</span>
+</CssRoot>
+
+<style>
+	.cms-image-edit {
+		position: relative;
+		display: inline-block;
+		vertical-align: top;
+		border-radius: 0.125rem;
+		outline: 1px dashed rgba(127, 127, 127, 0.6);
+		outline-offset: 2px;
+	}
+	.cms-image-edit:hover,
+	.cms-image-edit:focus-within,
+	.cms-image-edit.dragging {
+		outline: 2px solid var(--cms-accent, #534ab7);
+		outline-offset: 2px;
+	}
+	.cms-image-edit__pick {
+		display: block;
+		padding: 0;
+		margin: 0;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+	}
+	.cms-image-edit__pick :global(.cms-image) {
+		display: block;
+		max-width: 100%;
+		height: auto;
+	}
+	.cms-image-edit__empty {
+		display: inline-block;
+		padding: 0.5rem 0.75rem;
+		font-family: ui-monospace, monospace;
+		font-size: 0.85em;
+		color: rgba(127, 127, 127, 0.9);
+	}
+	.cms-image-edit__toolbar {
+		position: absolute;
+		top: 0;
+		left: 0;
+		transform: translateY(calc(-100% - 0.5rem));
+		display: none;
+		align-items: center;
+		gap: 0.125rem;
+		padding: 0.25rem;
+		background: var(--cms-bar-bg, #1f1f1f);
+		border: 1px solid var(--cms-bar-divider, #3a3a3a);
+		border-radius: 0.375rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+		color: var(--cms-bar-text, #f5f5f5);
+		z-index: 50;
+		white-space: nowrap;
+	}
+	.cms-image-edit:hover .cms-image-edit__toolbar,
+	.cms-image-edit:focus-within .cms-image-edit__toolbar {
+		display: inline-flex;
+	}
+	.cms-image-edit__library {
+		position: absolute;
+		top: 0;
+		left: 0;
+		transform: translateY(calc(-100% - 0.5rem));
+		padding: 0.5rem;
+		background: var(--cms-bar-bg, #1f1f1f);
+		border: 1px solid var(--cms-bar-divider, #3a3a3a);
+		border-radius: 0.5rem;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+		color: var(--cms-bar-text, #f5f5f5);
+		z-index: 60;
+	}
+	.cms-image-edit__overlay {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		gap: 0.5rem;
+		border-radius: 0.25rem;
+		pointer-events: none;
+		z-index: 10;
+		color: white;
+		font-weight: 600;
+		font-size: 0.875rem;
+	}
+	.cms-image-edit__overlay--drop {
+		background: rgba(83, 74, 183, 0.85);
+	}
+	.cms-image-edit__overlay--uploading {
+		background: rgba(0, 0, 0, 0.55);
+	}
+	.cms-image-edit__error {
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		transform: translateY(calc(100% + 0.375rem));
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.25rem 0.5rem;
+		background: var(--cms-status-error-bg-hover, #fee2e2);
+		color: var(--cms-status-error-text-base, #991b1b);
+		border: 1px solid var(--cms-status-error-border, #fecaca);
+		border-radius: 0.25rem;
+		font-size: 0.8125rem;
+		z-index: 20;
+		white-space: nowrap;
+	}
+	.cms-image-edit__error-dismiss {
+		background: transparent;
+		border: 0;
+		color: inherit;
+		cursor: pointer;
+		font-size: 1.1em;
+		line-height: 1;
+		padding: 0 0.125rem;
+	}
+</style>

package/dist/components/cms/cms-image-editable.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type CmsScopeRef } from './cms-store.svelte.js';
+import type { CmsImageValue } from './cms-image.svelte';
+type Props = {
+    scope: CmsScopeRef;
+    name: string;
+    initial: CmsImageValue;
+    fallbackAlt: string;
+};
+declare const CmsImageEditable: import("svelte").Component<Props, {}, "">;
+type CmsImageEditable = ReturnType<typeof CmsImageEditable>;
+export default CmsImageEditable;

package/dist/components/cms/cms-image.svelte

@@ -0,0 +1,78 @@
+<script lang="ts" module>
+	export type CmsImageValue = {
+		url?: string;
+		alt?: string;
+		width?: number;
+		height?: number;
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getCmsScope } from './scope.js';
+	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
+
+	type Props = {
+		name: string;
+		/** Fallback alt text used when the branch has no `alt` leaf. */
+		alt?: string;
+		fallback?: string;
+		value?: unknown;
+		children?: Snippet;
+	};
+
+	let { name, alt = '', fallback, value, children }: Props = $props();
+
+	const scope = getCmsScope();
+	const ref = $derived<CmsScopeRef | null>(
+		scope ? { scopeId: scope.scopeId, routeId: scope.routeId, params: scope.params } : null
+	);
+
+	const resolved = $derived.by(() => {
+		if (value !== undefined) return value;
+		return ref ? cmsStore.getValue(ref, name) : undefined;
+	});
+
+	// `<CmsImage>` owns a `{ url, alt, width?, height? }` branch. Accept a bare
+	// string as the URL leaf for legacy/value-prop callers.
+	const branch = $derived.by((): CmsImageValue | null => {
+		if (resolved == null) return null;
+		if (typeof resolved === 'string') return { url: resolved };
+		if (typeof resolved === 'object' && !Array.isArray(resolved)) return resolved as CmsImageValue;
+		return null;
+	});
+
+	const src = $derived(branch?.url ?? fallback ?? '');
+	const altText = $derived(branch?.alt ?? alt ?? '');
+	const editable = $derived(cmsStore.isEditing && value === undefined && !!ref);
+</script>
+
+{#if editable && ref}
+	{#await import('./cms-image-editable.svelte') then { default: Editable }}
+		<Editable scope={ref} {name} initial={branch ?? {}} fallbackAlt={alt} />
+	{/await}
+{:else if src}
+	<img class="cms-image" {src} alt={altText} />
+{:else if children}
+	{@render children()}
+{:else}
+	<span class="cms-missing" data-cms-name={name} data-cms-scope={scope?.scopeId ?? '?'}>
+		{name}
+	</span>
+{/if}
+
+<style>
+	.cms-image {
+		max-width: 100%;
+		height: auto;
+	}
+	.cms-missing {
+		display: inline-block;
+		padding: 0.5rem 0.75rem;
+		border: 1px dashed rgba(127, 127, 127, 0.6);
+		border-radius: 0.25rem;
+		font-family: ui-monospace, monospace;
+		font-size: 0.85em;
+		color: rgba(127, 127, 127, 0.9);
+	}
+</style>

package/dist/components/cms/cms-image.svelte.d.ts

@@ -0,0 +1,18 @@
+export type CmsImageValue = {
+    url?: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+};
+import type { Snippet } from 'svelte';
+type Props = {
+    name: string;
+    /** Fallback alt text used when the branch has no `alt` leaf. */
+    alt?: string;
+    fallback?: string;
+    value?: unknown;
+    children?: Snippet;
+};
+declare const CmsImage: import("svelte").Component<Props, {}, "">;
+type CmsImage = ReturnType<typeof CmsImage>;
+export default CmsImage;