@velastack/cms 0.4.0 → 0.5.0

package/dist/components/admin-bar/reorder-buttons.svelte.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    index: number;
+    count: number;
+    onMove: (from: number, to: number) => void;
+    onRemove: (index: number) => void;
+    label?: string;
+};
+declare const ReorderButtons: import("svelte").Component<Props, {}, "">;
+type ReorderButtons = ReturnType<typeof ReorderButtons>;
+export default ReorderButtons;

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

@@ -4,9 +4,12 @@
 	import { pages } from 'virtual:vela-cms/pages';
 	import { cmsStore, type CmsScopeRef } from '../cms/cms-store.svelte.js';
 	import { getPageScope, type CmsPayload } from '../cms/scope.js';
+	import { ROOT_SCOPE_ID } from '../cms/use-cms-field.svelte.js';
+	import { toMetaTags } from '../../core/metadata.js';
+	import FieldInput, { type FieldInputType } from './field-input.svelte';
 	import {
-		DEFAULT_METADATA_SCHEMA,
 		fieldType,
+		metadataSchemaFor,
 		type CmsPageMetadataSchema,
 		type MetadataFieldSchema
 	} from './page-config.js';
@@ -15,8 +18,7 @@
 	import Panel from './panel.svelte';
 	import { Button } from './ui/button/index.js';
 	import * as Collapsible from './ui/collapsible/index.js';
-	import { Input } from './ui/input/index.js';
-	import { Textarea } from './ui/textarea/index.js';
+	import * as Tabs from './ui/tabs/index.js';
 
 	type Props = { onClose: () => void; onSave: () => void | Promise<void> };
 	let { onClose, onSave }: Props = $props();
@@ -27,6 +29,20 @@
 	const TITLE_AMBER_AT = Math.floor(TITLE_TARGET * 0.8);
 	const DESC_AMBER_AT = Math.floor(DESC_TARGET * 0.8);
 
+	// The search snippet and the share card; everything else is advanced.
+	const PRIMARY = ['title', 'description'];
+	const SHARE = ['ogTitle', 'ogDescription', 'ogImage', 'twitterCard'];
+	const LABELS: Record<string, string> = {
+		title: 'Title',
+		description: 'Description',
+		ogTitle: 'Share title',
+		ogDescription: 'Share description',
+		ogImage: 'Share image',
+		twitterCard: 'Twitter card',
+		canonical: 'Canonical URL',
+		noindex: 'Hide from search engines'
+	};
+
 	const cms = $derived(page.data.cms as CmsPayload | undefined);
 	const pageScope = $derived(getPageScope(cms));
 	const ref = $derived<CmsScopeRef | null>(
@@ -35,25 +51,37 @@
 			: null
 	);
 
-	// Schema lives in the route's `page.cms.ts`. Fall back to default
-	// title/description so every route gets at least the SEO basics.
+	// The route's `page.cms.ts` schema merged over the defaults, so every
+	// route gets the search snippet, the share card and indexing controls.
 	const schema = $derived.by<CmsPageMetadataSchema>(() => {
 		if (!pageScope) return {};
-		const cfg = pages[pageScope.routeId];
-		return cfg?.metadata ?? DEFAULT_METADATA_SCHEMA;
+		return metadataSchemaFor(pages[pageScope.routeId]?.metadata);
 	});
 
 	const entries = $derived(Object.entries(schema));
-	const advancedEntries = $derived(entries.filter(([k]) => k !== 'title' && k !== 'description'));
+	const shareEntries = $derived(entries.filter(([k]) => SHARE.includes(k)));
+	const advancedEntries = $derived(
+		entries.filter(([k]) => !PRIMARY.includes(k) && !SHARE.includes(k))
+	);
 
 	const persistedValue = (key: string): unknown => {
 		if (!ref) return undefined;
 		return cmsStore.getValue(ref, `metadata.${key}`);
 	};
 
-	// Local form state — typing only updates `local`; nothing reaches
-	// cmsStore.metadataDrafts until Save fires. That keeps the bar's "X page
-	// draft" badge from flickering as the user explores.
+	// The title template reads the root layout's branding name, exactly as
+	// `toMetaTags` does at render time.
+	const siteName = $derived.by(() => {
+		const v = cmsStore.getValue(
+			{ scopeId: ROOT_SCOPE_ID, routeId: '/', params: {} },
+			'branding.name'
+		);
+		return typeof v === 'string' && v ? v : undefined;
+	});
+
+	// Local form state — typing only updates `local`; nothing reaches the
+	// draft until Save fires. That keeps the bar's "X page draft" badge from
+	// flickering as the user explores.
 	let local = $state<Record<string, unknown>>({});
 
 	$effect(() => {
@@ -62,8 +90,17 @@
 		local = next;
 	});
 
-	const titleVal = $derived(typeof local.title === 'string' ? local.title : '');
-	const descVal = $derived(typeof local.description === 'string' ? local.description : '');
+	const stringValue = (v: unknown): string => (typeof v === 'string' ? v : '');
+	const titleVal = $derived(stringValue(local.title));
+	const descVal = $derived(stringValue(local.description));
+	const preview = $derived(toMetaTags(local, { siteName }));
+	const fullTitle = $derived(
+		preview.title
+			? preview.titleTemplate
+				? preview.titleTemplate.replace('%s', preview.title)
+				: preview.title
+			: ''
+	);
 
 	const breadcrumb = $derived.by(() => {
 		const host = page.url.hostname || 'localhost';
@@ -71,12 +108,10 @@
 		return segments.length === 0 ? host : `${host} › ${segments.join(' › ')}`;
 	});
 
-	let previewTab = $state<'search' | 'social'>('search');
+	let previewTab = $state('search');
 
 	// Pull the live site's favicon — Google's result preview shows whichever
-	// favicon the document head declares, so the SEO preview should match. Resolve
-	// to absolute URLs (using `.href` rather than `.getAttribute`) so the img src
-	// renders correctly regardless of where the favicon is hosted.
+	// favicon the document head declares, so the SEO preview should match.
 	let faviconHref = $state<string | null>(null);
 	$effect(() => {
 		if (typeof document === 'undefined') return;
@@ -86,21 +121,6 @@
 		faviconHref = link?.href ?? null;
 	});
 
-	// Best-effort OG image: an explicit `og_image` field in the schema wins,
-	// otherwise the first image-type metadata field. The Social card stays useful
-	// even when neither exists — title/description still render against a
-	// placeholder.
-	const ogImageVal = $derived.by(() => {
-		const og = stringValue(local.og_image);
-		if (og) return og;
-		for (const [k, s] of entries) {
-			if (fieldType(s) !== 'image') continue;
-			const v = stringValue(local[k]);
-			if (v) return v;
-		}
-		return '';
-	});
-
 	const hostname = $derived(page.url.hostname || 'localhost');
 
 	const counterClass = (n: number, target: number, amberAt: number): string => {
@@ -118,33 +138,25 @@
 		await onSave();
 	};
 
-	const fieldLabelClass = 'vela:text-[12px] vela:text-bar-text-secondary';
 	const counterBaseClass = 'vela:text-[11px] vela:font-mono vela:tabular-nums';
-	const selectClass =
-		'vela:flex vela:h-9 vela:w-full vela:rounded-md vela:border vela:border-[var(--cms-bar-divider)]' +
-		' vela:bg-[var(--cms-bar-bg-hover)] vela:px-3 vela:py-1 vela:text-[13px] vela:text-bar-text' +
-		' vela:focus:outline-none vela:focus:ring-2 vela:focus:ring-[var(--cms-accent)]';
 
-	const stringValue = (v: unknown): string => (typeof v === 'string' ? v : '');
-	const numberValue = (v: unknown): number | null =>
-		typeof v === 'number' && !Number.isNaN(v) ? v : null;
-	const booleanValue = (v: unknown): boolean => v === true;
-
-	const setNumber = (key: string, raw: string) => {
-		if (raw === '') {
-			local[key] = undefined;
-		} else {
-			const n = Number(raw);
-			local[key] = Number.isFinite(n) ? n : undefined;
-		}
+	const inputType = (s: MetadataFieldSchema): FieldInputType => {
+		const t = fieldType(s);
+		return t === 'string' ? 'text' : t;
 	};
-
 	const enumValues = (s: MetadataFieldSchema): readonly string[] =>
 		typeof s !== 'string' && s.type === 'enum' ? s.values : [];
+	const labelFor = (key: string) => LABELS[key] ?? key;
 </script>
 
 <Panel ariaLabel="SEO and metadata" {onClose}>
-	<PanelHeader title="SEO &amp; metadata" {onClose} />
+	<PanelHeader title="SEO &amp; metadata" {onClose}>
+		{#snippet subtitle()}
+			<span class="vela:font-mono vela:text-[12px] vela:text-bar-text-secondary">
+				{page.url.pathname}
+			</span>
+		{/snippet}
+	</PanelHeader>
 
 	<form
 		class="vela:overflow-y-auto vela:px-4 vela:pb-4 vela:flex vela:flex-col vela:gap-4"
@@ -158,42 +170,13 @@
 				No page scope on this route.
 			</p>
 		{:else}
-			<div class="vela:flex vela:flex-col vela:gap-2">
-				<div
-					role="tablist"
-					aria-label="Preview format"
-					class="vela:inline-flex vela:self-start vela:p-0.5 vela:rounded-md
-						vela:bg-[var(--cms-bar-bg-hover)] vela:border vela:border-[var(--cms-bar-divider)]"
-				>
-					<button
-						type="button"
-						role="tab"
-						aria-selected={previewTab === 'search'}
-						onclick={() => (previewTab = 'search')}
-						class="vela:px-2.5 vela:py-1 vela:rounded vela:text-[11px] vela:font-medium
-							vela:cursor-pointer vela:transition-colors
-							{previewTab === 'search'
-							? 'vela:bg-bar-bg vela:text-bar-text'
-							: 'vela:text-bar-text-secondary vela:hover:text-bar-text'}"
-					>
-						Search
-					</button>
-					<button
-						type="button"
-						role="tab"
-						aria-selected={previewTab === 'social'}
-						onclick={() => (previewTab = 'social')}
-						class="vela:px-2.5 vela:py-1 vela:rounded vela:text-[11px] vela:font-medium
-							vela:cursor-pointer vela:transition-colors
-							{previewTab === 'social'
-							? 'vela:bg-bar-bg vela:text-bar-text'
-							: 'vela:text-bar-text-secondary vela:hover:text-bar-text'}"
-					>
-						Social
-					</button>
-				</div>
+			<Tabs.Root bind:value={previewTab}>
+				<Tabs.List aria-label="Preview format">
+					<Tabs.Trigger value="search">Search</Tabs.Trigger>
+					<Tabs.Trigger value="social">Social</Tabs.Trigger>
+				</Tabs.List>
 
-				{#if previewTab === 'search'}
+				<Tabs.Content value="search">
 					<div
 						class="vela:bg-[#fafafa] vela:text-[#202124] vela:rounded-lg vela:p-3.5
 							vela:border vela:border-[#e8eaed]"
@@ -215,13 +198,15 @@
 						<div
 							class="vela:mt-1.5 vela:text-[18px] vela:leading-snug vela:text-[#1a0dab] vela:truncate"
 						>
-							{titleVal || 'Page title'}
+							{fullTitle || 'Page title'}
 						</div>
 						<div class="vela:mt-1 vela:text-[13px] vela:leading-snug vela:text-[#4d5156]">
-							{descVal || 'Meta description appears here.'}
+							{preview.description || 'Meta description appears here.'}
 						</div>
 					</div>
-				{:else}
+				</Tabs.Content>
+
+				<Tabs.Content value="social">
 					<div
 						class="vela:bg-white vela:text-[#0f1419] vela:rounded-lg vela:overflow-hidden
 							vela:border vela:border-[#e8eaed]"
@@ -229,70 +214,92 @@
 						<div
 							class="vela:aspect-[1.91/1] vela:bg-[#e8eaed] vela:flex vela:items-center vela:justify-center vela:overflow-hidden"
 						>
-							{#if ogImageVal}
-								<img src={ogImageVal} alt="" class="vela:w-full vela:h-full vela:object-cover" />
+							{#if preview.openGraph?.images?.[0]}
+								<img
+									src={preview.openGraph.images[0].url}
+									alt=""
+									class="vela:w-full vela:h-full vela:object-cover"
+								/>
 							{:else}
-								<span class="vela:text-[11px] vela:text-[#5f6368]">No social image set</span>
+								<span class="vela:text-[11px] vela:text-[#5f6368]">No share image set</span>
 							{/if}
 						</div>
 						<div
 							class="vela:px-3.5 vela:py-2.5 vela:border-t vela:border-[#e8eaed] vela:bg-[#f7f9fa]"
 						>
 							<div class="vela:text-[11px] vela:uppercase vela:text-[#5f6368]">
-								{hostname}
+								{siteName ?? hostname}
 							</div>
 							<div
 								class="vela:mt-0.5 vela:text-[14px] vela:font-semibold vela:leading-snug vela:line-clamp-2"
 							>
-								{titleVal || 'Page title'}
+								{preview.openGraph?.title || 'Page title'}
 							</div>
 							<div
 								class="vela:mt-0.5 vela:text-[12px] vela:leading-snug vela:text-[#536471] vela:line-clamp-2"
 							>
-								{descVal || 'Meta description appears here.'}
+								{preview.openGraph?.description || 'Meta description appears here.'}
 							</div>
 						</div>
 					</div>
-				{/if}
-			</div>
+				</Tabs.Content>
+			</Tabs.Root>
 
 			{#if 'title' in schema}
-				<label class="vela:flex vela:flex-col vela:gap-1.5">
-					<div class="vela:flex vela:items-center vela:justify-between">
-						<span class={fieldLabelClass}>Title</span>
-						<span
-							class="{counterBaseClass} {counterClass(
-								titleVal.length,
-								TITLE_TARGET,
-								TITLE_AMBER_AT
-							)}"
-						>
-							{titleVal.length} / {TITLE_TARGET}
-						</span>
-					</div>
-					<Input
-						type="text"
-						value={stringValue(local.title)}
-						oninput={(e) => (local.title = e.currentTarget.value)}
-					/>
-				</label>
+				<FieldInput
+					type="text"
+					label="Title"
+					value={local.title}
+					onChange={(v) => (local.title = v ?? '')}
+					hint={`${titleVal.length} / ${TITLE_TARGET}`}
+					hintClass="{counterBaseClass} {counterClass(
+						titleVal.length,
+						TITLE_TARGET,
+						TITLE_AMBER_AT
+					)}"
+				/>
 			{/if}
 
 			{#if 'description' in schema}
-				<label class="vela:flex vela:flex-col vela:gap-1.5">
-					<div class="vela:flex vela:items-center vela:justify-between">
-						<span class={fieldLabelClass}>Description</span>
-						<span
-							class="{counterBaseClass} {counterClass(descVal.length, DESC_TARGET, DESC_AMBER_AT)}"
-						>
-							{descVal.length} / {DESC_TARGET}
-						</span>
-					</div>
-					<Textarea
-						value={stringValue(local.description)}
-						oninput={(e) => (local.description = e.currentTarget.value)}
-					/>
-				</label>
+				<FieldInput
+					type="long-string"
+					label="Description"
+					value={local.description}
+					onChange={(v) => (local.description = v ?? '')}
+					hint={`${descVal.length} / ${DESC_TARGET}`}
+					hintClass="{counterBaseClass} {counterClass(descVal.length, DESC_TARGET, DESC_AMBER_AT)}"
+				/>
+			{/if}
+
+			{#if shareEntries.length > 0}
+				<Collapsible.Root class="vela:border-t vela:border-[var(--cms-bar-divider)] vela:pt-3">
+					<Collapsible.Trigger
+						class="vela:group vela:flex vela:items-center vela:justify-between vela:w-full
+							vela:text-left vela:text-[13px] vela:text-bar-text-secondary
+							vela:hover:text-bar-text vela:cursor-pointer vela:focus:outline-none"
+					>
+						<span>Share card</span>
+						<ChevronDownIcon
+							class="vela:size-4 vela:transition-transform vela:group-data-[state=open]:rotate-180"
+						/>
+					</Collapsible.Trigger>
+					<Collapsible.Content>
+						<div class="vela:flex vela:flex-col vela:gap-3 vela:mt-3">
+							<p class="vela:text-[11px] vela:text-bar-text-tertiary vela:m-0">
+								Blank fields reuse the title and description above.
+							</p>
+							{#each shareEntries as [key, fieldSchema] (key)}
+								<FieldInput
+									type={inputType(fieldSchema)}
+									label={labelFor(key)}
+									values={enumValues(fieldSchema)}
+									value={local[key]}
+									onChange={(v) => (local[key] = v)}
+								/>
+							{/each}
+						</div>
+					</Collapsible.Content>
+				</Collapsible.Root>
 			{/if}
 
 			{#if advancedEntries.length > 0}
@@ -310,65 +317,13 @@
 					<Collapsible.Content>
 						<div class="vela:flex vela:flex-col vela:gap-3 vela:mt-3">
 							{#each advancedEntries as [key, fieldSchema] (key)}
-								{@const t = fieldType(fieldSchema)}
-								{#if t === 'boolean'}
-									<label
-										class="vela:flex vela:items-center vela:gap-2 vela:text-[13px] vela:text-bar-text"
-									>
-										<input
-											type="checkbox"
-											checked={booleanValue(local[key])}
-											onchange={(e) => (local[key] = e.currentTarget.checked)}
-										/>
-										<span>{key}</span>
-									</label>
-								{:else}
-									<label class="vela:flex vela:flex-col vela:gap-1.5">
-										<span class={fieldLabelClass}>{key}</span>
-										{#if t === 'long-string'}
-											<Textarea
-												value={stringValue(local[key])}
-												oninput={(e) => (local[key] = e.currentTarget.value)}
-											/>
-										{:else if t === 'number'}
-											<Input
-												type="number"
-												value={numberValue(local[key]) ?? ''}
-												oninput={(e) => setNumber(key, e.currentTarget.value)}
-											/>
-										{:else if t === 'date'}
-											<Input
-												type="date"
-												value={stringValue(local[key])}
-												oninput={(e) => (local[key] = e.currentTarget.value)}
-											/>
-										{:else if t === 'image'}
-											<Input
-												type="url"
-												placeholder="https://…"
-												value={stringValue(local[key])}
-												oninput={(e) => (local[key] = e.currentTarget.value)}
-											/>
-										{:else if t === 'enum'}
-											<select
-												class={selectClass}
-												value={stringValue(local[key])}
-												onchange={(e) => (local[key] = e.currentTarget.value)}
-											>
-												<option value="">—</option>
-												{#each enumValues(fieldSchema) as v (v)}
-													<option value={v}>{v}</option>
-												{/each}
-											</select>
-										{:else}
-											<Input
-												type="text"
-												value={stringValue(local[key])}
-												oninput={(e) => (local[key] = e.currentTarget.value)}
-											/>
-										{/if}
-									</label>
-								{/if}
+								<FieldInput
+									type={inputType(fieldSchema)}
+									label={labelFor(key)}
+									values={enumValues(fieldSchema)}
+									value={local[key]}
+									onChange={(v) => (local[key] = v)}
+								/>
 							{/each}
 						</div>
 					</Collapsible.Content>

package/dist/components/admin-bar/site-options-panel.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	/**
+	 * Site Options: the few project-wide values that do not render on the
+	 * page — the schema.org type, the default share image, which locales are
+	 * enabled. Anything a visitor sees (hours, contact, navigation, branding)
+	 * lives in the root layout scope and is edited where it renders.
+	 *
+	 * The schema comes from `createCms({ site })`; storage is one
+	 * non-localised tree per project.
+	 */
+	import { page } from '$app/state';
+	import { cmsStore } from '../cms/cms-store.svelte.js';
+	import type { CmsPayload, SiteFieldSchema, SiteSchema } from '../cms/scope.js';
+	import FieldInput from './field-input.svelte';
+	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 = { onClose: () => void; onSave: () => void | Promise<void> };
+	let { onClose, onSave }: Props = $props();
+
+	const cms = $derived(page.data.cms as CmsPayload | undefined);
+	const schema = $derived<SiteSchema>(cms?.site?.schema ?? {});
+	const endpoint = $derived(cms?.endpoint ?? '/api/cms');
+
+	// Flat (path → schema) view for save/reset; sections preserved for layout.
+	const sections = $derived(Object.entries(schema));
+	const allFieldPaths = $derived.by(() => {
+		const out: Array<{ path: string; schema: SiteFieldSchema }> = [];
+		for (const [sectionKey, section] of sections) {
+			for (const [fieldKey, fieldSchema] of Object.entries(section.fields)) {
+				out.push({ path: `${sectionKey}.${fieldKey}`, schema: fieldSchema });
+			}
+		}
+		return out;
+	});
+
+	const persistedValue = (path: string): unknown => cmsStore.getSiteValue(path);
+
+	// Local form state — typing only updates `local`; nothing reaches
+	// `cmsStore.siteDraft` until Save fires (matches seo-panel.svelte).
+	let local = $state<Record<string, unknown>>({});
+
+	$effect(() => {
+		const next: Record<string, unknown> = {};
+		for (const { path } of allFieldPaths) next[path] = persistedValue(path);
+		local = next;
+	});
+
+	const handleSave = async () => {
+		for (const { path } of allFieldPaths) {
+			const v = local[path];
+			if (v !== persistedValue(path)) cmsStore.setSiteValue(path, v);
+		}
+		await onSave();
+	};
+</script>
+
+<Panel ariaLabel="Site options" {onClose}>
+	<PanelHeader title="Site options" {onClose}>
+		{#snippet subtitle()}
+			<span class="vela:text-[12px] vela:text-bar-text-secondary">
+				settings that don't render on the page
+			</span>
+		{/snippet}
+	</PanelHeader>
+
+	<form
+		class="vela:overflow-y-auto vela:px-4 vela:pb-4 vela:flex vela:flex-col vela:gap-5"
+		onsubmit={(e) => {
+			e.preventDefault();
+			handleSave();
+		}}
+	>
+		{#if sections.length === 0}
+			<p class="vela:text-[13px] vela:text-bar-text-tertiary vela:py-2">
+				No site options have been declared. Pass a <code>site</code> schema to
+				<code>createCms()</code> to add fields here. Text that renders on the page belongs in the root
+				layout, edited in place.
+			</p>
+		{:else}
+			{#each sections as [sectionKey, section] (sectionKey)}
+				<section class="vela:flex vela:flex-col vela:gap-3">
+					<h3
+						class="vela:text-[10px] vela:font-semibold vela:uppercase vela:tracking-widest vela:text-bar-text-tertiary vela:m-0"
+					>
+						{section.label}
+					</h3>
+
+					{#each Object.entries(section.fields) as [fieldKey, fieldSchema] (fieldKey)}
+						{@const path = `${sectionKey}.${fieldKey}`}
+						<FieldInput
+							type={fieldSchema.type}
+							label={fieldSchema.label}
+							placeholder={fieldSchema.placeholder}
+							values={fieldSchema.values ?? []}
+							value={local[path]}
+							onChange={(v) => (local[path] = v)}
+							{endpoint}
+						/>
+					{/each}
+				</section>
+			{/each}
+		{/if}
+	</form>
+
+	<PanelFooter>
+		<span>Save to keep your changes</span>
+		<div class="vela:flex vela:items-center vela:gap-1.5">
+			<Button variant="ghost" size="pill" onclick={onClose}>Cancel</Button>
+			<Button size="pill" onclick={handleSave}>Save</Button>
+		</div>
+	</PanelFooter>
+</Panel>

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

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