@velastack/cms 0.4.0 → 0.5.1

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+	/**
+	 * Up / down / remove for one item in a structured list. Buttons rather
+	 * than drag handles: they work with a keyboard, on touch, and inside a
+	 * popover without a drag library.
+	 */
+	import ChevronUpIcon from './icons/chevron-up.svelte';
+	import ChevronDownIcon from './icons/chevron-down.svelte';
+	import TrashIcon from './icons/trash-2.svelte';
+	import { Button } from './ui/button/index.js';
+
+	type Props = {
+		index: number;
+		count: number;
+		onMove: (from: number, to: number) => void;
+		onRemove: (index: number) => void;
+		label?: string;
+	};
+	let { index, count, onMove, onRemove, label = 'item' }: Props = $props();
+</script>
+
+<div class="vela:flex vela:items-center vela:gap-0.5 vela:shrink-0">
+	<Button
+		size="icon"
+		variant="ghost"
+		class="vela:h-6 vela:w-6"
+		aria-label={`Move ${label} up`}
+		disabled={index === 0}
+		onclick={() => onMove(index, index - 1)}
+	>
+		<ChevronUpIcon class="vela:size-3.5" />
+	</Button>
+	<Button
+		size="icon"
+		variant="ghost"
+		class="vela:h-6 vela:w-6"
+		aria-label={`Move ${label} down`}
+		disabled={index >= count - 1}
+		onclick={() => onMove(index, index + 1)}
+	>
+		<ChevronDownIcon class="vela:size-3.5" />
+	</Button>
+	<Button
+		size="icon"
+		variant="ghost"
+		class="vela:h-6 vela:w-6 vela:text-[var(--cms-status-error-text-base)]"
+		aria-label={`Remove ${label}`}
+		onclick={() => onRemove(index)}
+	>
+		<TrashIcon class="vela:size-3.5" />
+	</Button>
+</div>

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/rich-text-input.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	/**
+	 * A rich text field inside a structured editor: the same TipTap setup as
+	 * the inline `CmsRichText` editor, bound to a local value instead of a
+	 * CMS path.
+	 */
+	import { onDestroy, onMount, untrack } from 'svelte';
+	import { Editor } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+	import Toolbar from '../cms/cms-rich-text-toolbar.svelte';
+
+	type Props = {
+		value: string;
+		onChange: (html: string) => void;
+		label?: string;
+		placeholder?: string;
+	};
+	let { value, onChange, label }: Props = $props();
+
+	let host = $state<HTMLDivElement>();
+	let wrap = $state<HTMLDivElement>();
+	let editor = $state<Editor>();
+	let focused = $state(false);
+	let tick = $state(0);
+
+	onMount(() => {
+		editor = new Editor({
+			element: host,
+			extensions: [StarterKit.configure({ heading: { levels: [2, 3] } })],
+			content: value,
+			editorProps: { attributes: { class: 'cms-rich-text-input-pm' } },
+			onUpdate: ({ editor }) => onChange(editor.isEmpty ? '' : editor.getHTML()),
+			onTransaction: () => {
+				tick++;
+			}
+		});
+	});
+	onDestroy(() => editor?.destroy());
+
+	$effect(() => {
+		if (!editor || focused) return;
+		const next = value;
+		untrack(() => {
+			if (editor && editor.getHTML() !== next) {
+				editor.commands.setContent(next, { emitUpdate: false });
+			}
+		});
+	});
+</script>
+
+<div class="vela:flex vela:flex-col vela:gap-1.5">
+	{#if label}<span class="vela:text-[12px] vela:text-bar-text-secondary">{label}</span>{/if}
+	<div
+		class="cms-rich-text-input vela:relative vela:rounded-md vela:border vela:border-[var(--cms-bar-divider)] vela:px-3 vela:py-2 vela:text-[13px] vela:text-bar-text"
+		class:focused
+		bind:this={wrap}
+		onfocusin={() => (focused = true)}
+		onfocusout={(e) => {
+			const next = e.relatedTarget as Node | null;
+			if (next && wrap?.contains(next)) return;
+			focused = false;
+		}}
+	>
+		{#if editor && focused}
+			<div class="vela:mb-2">
+				<Toolbar {editor} {tick} />
+			</div>
+		{/if}
+		<div bind:this={host}></div>
+	</div>
+</div>
+
+<style>
+	.cms-rich-text-input.focused {
+		border-color: var(--cms-accent, #534ab7);
+	}
+	.cms-rich-text-input :global(.cms-rich-text-input-pm) {
+		outline: none;
+		min-height: 3em;
+		line-height: 1.5;
+	}
+	.cms-rich-text-input :global(.cms-rich-text-input-pm > :first-child) {
+		margin-top: 0;
+	}
+	.cms-rich-text-input :global(.cms-rich-text-input-pm > :last-child) {
+		margin-bottom: 0;
+	}
+	.cms-rich-text-input :global(.cms-rich-text-input-pm ul),
+	.cms-rich-text-input :global(.cms-rich-text-input-pm ol) {
+		padding-left: 1.25em;
+	}
+</style>

package/dist/components/admin-bar/rich-text-input.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    value: string;
+    onChange: (html: string) => void;
+    label?: string;
+    placeholder?: string;
+};
+declare const RichTextInput: import("svelte").Component<Props, {}, "">;
+type RichTextInput = ReturnType<typeof RichTextInput>;
+export default RichTextInput;

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>