@velastack/cms 0.1.0

package/dist/components/admin-bar/keyboard-shortcuts-dialog.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+	type ShortcutEntry = { keys: string; label: string };
+	type ShortcutGroup = { heading: string; entries: ShortcutEntry[] };
+
+	// Mirrors DESIGN.md §9. Grouped to match the menubar's mental model so
+	// users can scan to the right section by what they're trying to do.
+	const SHORTCUT_GROUPS: ShortcutGroup[] = [
+		{
+			heading: 'Editing',
+			entries: [
+				{ keys: '⌘E', label: 'Enter edit mode' },
+				{ keys: '⌘S', label: 'Save' },
+				{ keys: 'esc', label: 'Cancel edit / close panel' },
+				{ keys: '⌘Z', label: 'Revert last edit' }
+			]
+		},
+		{
+			heading: 'Page',
+			entries: [
+				{ keys: '⌘I', label: 'SEO & metadata for this page' },
+				{ keys: '⌘↵', label: 'Open current page in new tab' },
+				{ keys: '⌘P', label: 'Review & publish' }
+			]
+		},
+		{
+			heading: 'Navigate',
+			entries: [
+				{ keys: '⌘K', label: 'All pages' },
+				{ keys: '⌘M', label: 'Media library' },
+				{ keys: '⌘L', label: 'Locales' },
+				{ keys: '⌘H', label: 'Recent releases' },
+				{ keys: '/', label: 'Focus search (when a panel is open)' }
+			]
+		},
+		{
+			heading: 'Site',
+			entries: [
+				{ keys: '⌘N', label: 'New page' },
+				{ keys: '⌘,', label: 'Site settings' }
+			]
+		},
+		{
+			heading: 'View',
+			entries: [
+				{ keys: '⌘.', label: 'Hide / show bar' },
+				{ keys: '⌘⇧E', label: 'Toggle highlight editable areas' },
+				{ keys: '⌘G', label: 'Toggle grid & spacing overlay' },
+				{ keys: '?', label: 'Show this list' }
+			]
+		}
+	];
+</script>
+
+<script lang="ts">
+	import * as Dialog from './ui/dialog/index.js';
+	import { KbdShortcut } from './ui/kbd/index.js';
+
+	type Props = {
+		open: boolean;
+		onOpenChange: (open: boolean) => void;
+	};
+	let { open, onOpenChange }: Props = $props();
+</script>
+
+<Dialog.Root {open} {onOpenChange}>
+	<Dialog.Content class="vela:max-w-[34rem]">
+		<Dialog.Header>
+			<Dialog.Title>Keyboard shortcuts</Dialog.Title>
+			<Dialog.Description>
+				Single-letter shortcuts only fire when no input is focused.
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="vela:px-6 vela:pb-5 vela:flex vela:flex-col vela:gap-5">
+			{#each SHORTCUT_GROUPS as group}
+				<section class="vela:flex vela:flex-col vela:gap-1.5">
+					<h3
+						class="vela:text-[10px] vela:font-semibold vela:uppercase vela:tracking-widest vela:text-bar-text-tertiary vela:m-0"
+					>
+						{group.heading}
+					</h3>
+					<ul class="vela:flex vela:flex-col vela:m-0 vela:p-0 vela:list-none">
+						{#each group.entries as entry}
+							<li
+								class="vela:flex vela:items-center vela:justify-between vela:gap-3 vela:py-1.5 vela:text-[13px] vela:text-bar-text"
+							>
+								<span>{entry.label}</span>
+								<KbdShortcut keys={entry.keys} />
+							</li>
+						{/each}
+					</ul>
+				</section>
+			{/each}
+		</div>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/components/admin-bar/keyboard-shortcuts-dialog.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+};
+declare const KeyboardShortcutsDialog: import("svelte").Component<Props, {}, "">;
+type KeyboardShortcutsDialog = ReturnType<typeof KeyboardShortcutsDialog>;
+export default KeyboardShortcutsDialog;

package/dist/components/admin-bar/locales-panel.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { cmsStore, type ReleaseItem } from '../cms/cms-store.svelte.js';
+	import PanelFooter from './panel-footer.svelte';
+	import PanelHeader from './panel-header.svelte';
+	import Panel from './panel.svelte';
+	import { Badge } from './ui/badge/index.js';
+	import { Button } from './ui/button/index.js';
+
+	type Props = {
+		currentLocale: string;
+		locales: string[];
+		onClose: () => void;
+		onSelectLocale: (locale: string) => void;
+	};
+	let { currentLocale, locales, onClose, onSelectLocale }: Props = $props();
+
+	const defaultLocale = $derived(locales[0] ?? '');
+
+	// Group an item to a stable identity across locales: a same-(kind, routeId,
+	// params) item in EN and ES describes "the same thing" in both languages.
+	// Site items don't belong to any locale and never appear in this panel —
+	// callers filter them out before invoking `itemKey`.
+	const itemKey = (item: Exclude<ReleaseItem, { kind: 'site' }>): string => {
+		if (item.kind === 'layout') return `layout|${item.routeId}`;
+		const keys = Object.keys(item.params).sort();
+		const qp = keys.map((k) => `${k}=${item.params[k]}`).join('&');
+		return `${item.kind}|${item.routeId}|${qp}`;
+	};
+
+	// Per-locale: which "things" (item keys) have edits in this locale.
+	const editsByLocale = $derived.by(() => {
+		const out = new Map<string, Set<string>>();
+		for (const locale of locales) out.set(locale, new Set<string>());
+		for (const item of cmsStore.openRelease?.items ?? []) {
+			if (item.kind === 'site') continue;
+			const set = out.get(item.locale);
+			if (!set) continue;
+			set.add(itemKey(item));
+		}
+		return out;
+	});
+
+	const counts = $derived(cmsStore.workingCopyCountsByLocale);
+
+	type Row = {
+		locale: string;
+		isDefault: boolean;
+		isCurrent: boolean;
+		edits: number;
+		missing: number;
+	};
+
+	const rows = $derived.by<Row[]>(() => {
+		const defaultEdits = editsByLocale.get(defaultLocale) ?? new Set<string>();
+		return locales.map((locale) => {
+			const edits = editsByLocale.get(locale) ?? new Set<string>();
+			let missing = 0;
+			if (locale !== defaultLocale) {
+				for (const k of defaultEdits) {
+					if (!edits.has(k)) missing += 1;
+				}
+			}
+			return {
+				locale,
+				isDefault: locale === defaultLocale,
+				isCurrent: locale === currentLocale,
+				edits: counts[locale]?.total ?? 0,
+				missing
+			};
+		});
+	});
+</script>
+
+<Panel ariaLabel="Locales" {onClose}>
+	<PanelHeader title="Locales" {onClose}>
+		{#snippet subtitle()}
+			<span class="vela:text-[12px] vela:text-bar-text-secondary">
+				preview locale &amp; translation progress
+			</span>
+		{/snippet}
+	</PanelHeader>
+
+	<div class="vela:overflow-y-auto vela:px-4 vela:pb-2">
+		{#if rows.length === 0}
+			<p class="vela:text-[13px] vela:text-bar-text-tertiary vela:py-2">No locales configured.</p>
+		{:else}
+			<ol class="vela:list-none vela:pl-0 vela:m-0 vela:flex vela:flex-col">
+				{#each rows as row (row.locale)}
+					<li class="vela:relative vela:py-2.5">
+						<div class="vela:flex vela:items-start vela:justify-between vela:gap-3">
+							<div class="vela:flex vela:flex-col vela:min-w-0 vela:flex-1">
+								<div class="vela:flex vela:items-center vela:gap-2 vela:min-w-0">
+									<span class="vela:font-mono vela:text-[13px] vela:font-medium vela:text-bar-text">
+										{row.locale}
+									</span>
+									{#if row.isDefault}
+										<Badge variant="default" size="sm">default</Badge>
+									{/if}
+									{#if row.isCurrent}
+										<Badge variant="edit" size="sm">previewing</Badge>
+									{/if}
+								</div>
+								<div class="vela:text-[11px] vela:text-bar-text-tertiary vela:mt-0.5">
+									{row.edits}
+									{row.edits === 1 ? 'edit' : 'edits'}
+									{#if !row.isDefault && row.missing > 0}
+										· <span class="vela:text-[var(--cms-status-warn-text)]">
+											missing {row.missing} from {defaultLocale}
+										</span>
+									{/if}
+								</div>
+							</div>
+							<div class="vela:flex vela:items-center vela:gap-1.5 vela:shrink-0">
+								<Button
+									variant="outline"
+									size="pill"
+									disabled={row.isCurrent}
+									onclick={() => onSelectLocale(row.locale)}
+								>
+									{row.isCurrent ? 'Current' : 'Preview'}
+								</Button>
+							</div>
+						</div>
+					</li>
+				{/each}
+			</ol>
+		{/if}
+	</div>
+
+	<PanelFooter>
+		<span>
+			{rows.length}
+			{rows.length === 1 ? 'locale' : 'locales'}
+		</span>
+		<span class="vela:text-bar-text-tertiary"> Edits ride in one release across all locales. </span>
+	</PanelFooter>
+</Panel>

package/dist/components/admin-bar/locales-panel.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    currentLocale: string;
+    locales: string[];
+    onClose: () => void;
+    onSelectLocale: (locale: string) => void;
+};
+declare const LocalesPanel: import("svelte").Component<Props, {}, "">;
+type LocalesPanel = ReturnType<typeof LocalesPanel>;
+export default LocalesPanel;

package/dist/components/admin-bar/media-panel.svelte

@@ -0,0 +1,282 @@
+<script lang="ts">
+	import UploadIcon from './icons/upload.svelte';
+	import TrashIcon from './icons/trash-2.svelte';
+	import LoaderIcon from './icons/loader-circle.svelte';
+	import AlertIcon from './icons/triangle-alert.svelte';
+	import CheckIcon from './icons/check.svelte';
+	import { cmsStore } from '../cms/cms-store.svelte.js';
+	import type { MediaItem } from '../cms/cms-store.svelte.js';
+	import PanelFooter from './panel-footer.svelte';
+	import PanelHeader from './panel-header.svelte';
+	import Panel from './panel.svelte';
+	import { Button } from './ui/button/index.js';
+
+	type Props = {
+		endpoint: string;
+		onClose: () => void;
+	};
+	let { endpoint, onClose }: Props = $props();
+
+	const PAGE_SIZE = 24;
+
+	let items = $state<MediaItem[]>([]);
+	let total = $state(0);
+	let offset = $state(0);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+
+	let dragDepth = $state(0);
+	const dragging = $derived(dragDepth > 0);
+
+	let uploading = $state(false);
+	let copiedId = $state<string | null>(null);
+	let fileInputEl: HTMLInputElement | null = $state(null);
+
+	const fetchPage = async () => {
+		loading = true;
+		try {
+			const res = await cmsStore.listMedia(endpoint, { offset, limit: PAGE_SIZE });
+			items = res.items;
+			total = res.total;
+			error = null;
+		} catch {
+			error = 'Could not load media.';
+		} finally {
+			loading = false;
+		}
+	};
+
+	$effect(() => {
+		void offset; // re-run when offset changes
+		void fetchPage();
+	});
+
+	const upload = async (file: File) => {
+		if (!file.type.startsWith('image/')) {
+			error = 'Only image files are supported.';
+			return;
+		}
+		error = null;
+		uploading = true;
+		try {
+			const item = await cmsStore.uploadMedia(endpoint, file);
+			// Optimistic prepend; reset to first page so it's visible.
+			if (offset === 0) {
+				items = [item, ...items].slice(0, PAGE_SIZE);
+				total += 1;
+			} else {
+				offset = 0;
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Upload failed';
+		} finally {
+			uploading = false;
+		}
+	};
+
+	const onPickerChange = () => {
+		const files = fileInputEl?.files;
+		if (!files) return;
+		for (const f of files) void upload(f);
+		if (fileInputEl) fileInputEl.value = '';
+	};
+
+	const remove = async (item: MediaItem) => {
+		try {
+			await cmsStore.deleteMedia(endpoint, item.id);
+			items = items.filter((i) => i.id !== item.id);
+			total = Math.max(0, total - 1);
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Delete failed';
+		}
+	};
+
+	const copyUrl = async (item: MediaItem) => {
+		try {
+			await navigator.clipboard.writeText(item.url);
+			copiedId = item.id;
+			setTimeout(() => {
+				if (copiedId === item.id) copiedId = null;
+			}, 1500);
+		} catch {
+			// clipboard may be unavailable; ignore silently
+		}
+	};
+
+	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 files = e.dataTransfer?.files;
+		if (!files) return;
+		for (const f of files) void upload(f);
+	};
+
+	const rangeLabel = $derived.by(() => {
+		if (total === 0) return '0 of 0';
+		const start = offset + 1;
+		const end = Math.min(offset + items.length, total);
+		return `${start}–${end} of ${total}`;
+	});
+
+	const canPrev = $derived(offset > 0);
+	const canNext = $derived(offset + items.length < total);
+
+	const formatSize = (bytes: number): string => {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	};
+</script>
+
+<Panel ariaLabel="Media Library" {onClose}>
+	<PanelHeader title="Media Library" {onClose} />
+
+	<div
+		class="vela:relative vela:flex vela:flex-col vela:gap-3 vela:px-4 vela:pb-3 vela:overflow-y-auto"
+		class:dragging
+		ondragenter={onDragEnter}
+		ondragover={onDragOver}
+		ondragleave={onDragLeave}
+		ondrop={onDrop}
+		role="region"
+		aria-label="Media uploads"
+	>
+		<div class="vela:flex vela:items-center vela:gap-2">
+			<Button size="sm" variant="default" onclick={() => fileInputEl?.click()}>
+				<UploadIcon class="vela:size-3.5" />
+				Upload
+			</Button>
+			<span class="vela:text-[12px] vela:text-bar-text-tertiary">
+				or drag &amp; drop images here
+			</span>
+		</div>
+
+		<input
+			bind:this={fileInputEl}
+			type="file"
+			accept="image/*"
+			multiple
+			hidden
+			onchange={onPickerChange}
+		/>
+
+		{#if error}
+			<div
+				class="vela:flex vela:items-center vela:gap-2 vela:px-2.5 vela:py-1.5 vela:rounded-md vela:text-[12px]"
+				style:background="var(--cms-status-error-bg-hover)"
+				style:color="var(--cms-status-error-text-base)"
+				role="alert"
+			>
+				<AlertIcon class="vela:size-3.5" />
+				<span>{error}</span>
+			</div>
+		{/if}
+
+		{#if loading && items.length === 0}
+			<div
+				class="vela:flex vela:items-center vela:justify-center vela:py-12 vela:text-bar-text-tertiary"
+			>
+				<LoaderIcon class="vela:size-5 vela:animate-spin" />
+			</div>
+		{:else if items.length === 0}
+			<div
+				class="vela:flex vela:flex-col vela:items-center vela:justify-center vela:py-12 vela:text-[13px] vela:text-bar-text-tertiary"
+			>
+				<UploadIcon class="vela:size-6 vela:mb-2 vela:opacity-50" />
+				<span>No media yet — upload an image to get started.</span>
+			</div>
+		{:else}
+			<div class="vela:grid vela:grid-cols-3 vela:sm:grid-cols-4 vela:gap-2">
+				{#each items as item (item.id)}
+					<div
+						class="vela:relative vela:group vela:aspect-square vela:rounded-md vela:overflow-hidden vela:bg-[var(--cms-bar-bg-hover)]"
+					>
+						<button
+							type="button"
+							class="vela:block vela:size-full vela:cursor-pointer vela:bg-transparent vela:border-0 vela:p-0"
+							title={`${item.originalName} · ${formatSize(item.size)} — click to copy URL`}
+							onclick={() => copyUrl(item)}
+						>
+							<img
+								src={item.url}
+								alt={item.originalName}
+								loading="lazy"
+								class="vela:size-full vela:object-cover"
+							/>
+						</button>
+						<button
+							type="button"
+							class="vela:absolute vela:top-1 vela:right-1 vela:size-6 vela:rounded vela:bg-black/60 vela:text-white vela:flex vela:items-center vela:justify-center vela:cursor-pointer vela:opacity-0 vela:group-hover:opacity-100 vela:transition-opacity"
+							aria-label={`Delete ${item.originalName}`}
+							onclick={() => remove(item)}
+						>
+							<TrashIcon class="vela:size-3.5" />
+						</button>
+						{#if copiedId === item.id}
+							<div
+								class="vela:absolute vela:inset-0 vela:flex vela:items-center vela:justify-center vela:bg-black/55 vela:text-white vela:text-[12px] vela:font-medium vela:gap-1"
+							>
+								<CheckIcon class="vela:size-4" />
+								Copied
+							</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+
+		{#if uploading}
+			<div
+				class="vela:absolute vela:inset-0 vela:flex vela:items-center vela:justify-center vela:bg-black/35 vela:pointer-events-none"
+			>
+				<LoaderIcon class="vela:size-6 vela:animate-spin vela:text-white" />
+			</div>
+		{/if}
+
+		{#if dragging}
+			<div
+				class="vela:absolute vela:inset-0 vela:flex vela:flex-col vela:items-center vela:justify-center vela:gap-2 vela:text-white vela:font-semibold vela:pointer-events-none"
+				style:background="rgba(83, 74, 183, 0.85)"
+			>
+				<UploadIcon class="vela:size-6" />
+				<span>Drop to upload</span>
+			</div>
+		{/if}
+	</div>
+
+	<PanelFooter>
+		<span>{rangeLabel}</span>
+		<div class="vela:flex vela:items-center vela:gap-1">
+			<Button
+				size="xs"
+				variant="ghost"
+				disabled={!canPrev}
+				onclick={() => (offset = Math.max(0, offset - PAGE_SIZE))}
+			>
+				Prev
+			</Button>
+			<Button
+				size="xs"
+				variant="ghost"
+				disabled={!canNext}
+				onclick={() => (offset = offset + PAGE_SIZE)}
+			>
+				Next
+			</Button>
+		</div>
+	</PanelFooter>
+</Panel>

package/dist/components/admin-bar/media-panel.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    endpoint: string;
+    onClose: () => void;
+};
+declare const MediaPanel: import("svelte").Component<Props, {}, "">;
+type MediaPanel = ReturnType<typeof MediaPanel>;
+export default MediaPanel;

package/dist/components/admin-bar/new-page-chooser-dialog.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import ChevronRightIcon from './icons/chevron-right.svelte';
+	import type { CmsCreatablePageConfigWithRouteId } from './page-config.js';
+	import { resolveRouteOnlyParams } from './resolve-route.js';
+	import { Button } from './ui/button/index.js';
+	import * as Dialog from './ui/dialog/index.js';
+
+	type Props = {
+		open: boolean;
+		onOpenChange: (open: boolean) => void;
+		creatablePages: CmsCreatablePageConfigWithRouteId[];
+		onSelect: (config: CmsCreatablePageConfigWithRouteId) => void;
+	};
+	let { open, onOpenChange, creatablePages, onSelect }: Props = $props();
+</script>
+
+<Dialog.Root {open} {onOpenChange}>
+	<Dialog.Content showCloseButton={false} class="vela:max-w-[28rem]">
+		<Dialog.Header>
+			<Dialog.Title>New page</Dialog.Title>
+			<Dialog.Description>Choose a template.</Dialog.Description>
+		</Dialog.Header>
+
+		<ul class="vela:list-none vela:m-0 vela:px-3 vela:pb-2 vela:flex vela:flex-col vela:gap-1">
+			{#each creatablePages as cfg (cfg.routeId)}
+				<li>
+					<button
+						type="button"
+						onclick={() => onSelect(cfg)}
+						class="vela:group vela:flex vela:items-center vela:gap-3 vela:w-full vela:px-3 vela:py-2.5 vela:rounded-md
+							vela:text-left vela:cursor-pointer vela:focus:outline-none
+							vela:hover:bg-[var(--cms-bar-bg-hover)] vela:focus-visible:bg-[var(--cms-bar-bg-hover)]"
+					>
+						<div class="vela:flex vela:flex-col vela:min-w-0 vela:flex-1">
+							<span class="vela:text-[13px] vela:font-medium vela:text-bar-text vela:capitalize">
+								{cfg.type}
+							</span>
+							<span
+								class="vela:font-mono vela:text-[12px] vela:text-bar-text-secondary vela:truncate"
+							>
+								{resolveRouteOnlyParams(cfg.routeId)}
+							</span>
+						</div>
+						<ChevronRightIcon
+							class="vela:size-4 vela:text-bar-text-tertiary vela:group-hover:text-bar-text"
+						/>
+					</button>
+				</li>
+			{/each}
+		</ul>
+
+		<Dialog.Footer class="vela:justify-end vela:pt-3">
+			<Button variant="ghost" onclick={() => onOpenChange(false)}>Cancel</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/components/admin-bar/new-page-chooser-dialog.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CmsCreatablePageConfigWithRouteId } from './page-config.js';
+type Props = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    creatablePages: CmsCreatablePageConfigWithRouteId[];
+    onSelect: (config: CmsCreatablePageConfigWithRouteId) => void;
+};
+declare const NewPageChooserDialog: import("svelte").Component<Props, {}, "">;
+type NewPageChooserDialog = ReturnType<typeof NewPageChooserDialog>;
+export default NewPageChooserDialog;