@velastack/cms 0.4.0 → 0.5.1

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

@@ -1,225 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/state';
-	import ImagesIcon from './icons/images.svelte';
-	import { cmsStore, type MediaItem } from '../cms/cms-store.svelte.js';
-	import CmsMediaPicker from '../cms/cms-media-picker.svelte';
-	import type { CmsPayload, SiteFieldSchema, SiteSchema } from '../cms/scope.js';
-	import { clickOutside } from './click-outside.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';
-	import { Input } from './ui/input/index.js';
-	import { Textarea } from './ui/textarea/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). That
-	// keeps the bar's "X drafts" count from flickering as the user explores.
-	let local = $state<Record<string, unknown>>({});
-
-	$effect(() => {
-		const next: Record<string, unknown> = {};
-		for (const { path } of allFieldPaths) next[path] = persistedValue(path);
-		local = next;
-	});
-
-	// Per-field media library popover state — keyed by field path.
-	let openLibrary = $state<string | null>(null);
-
-	const fieldLabelClass = 'vela:text-[12px] vela:text-bar-text-secondary';
-
-	const stringValue = (v: unknown): string => (typeof v === 'string' ? v : '');
-	const numberValue = (v: unknown): number | null =>
-		typeof v === 'number' && !Number.isNaN(v) ? v : null;
-
-	const setNumber = (path: string, raw: string) => {
-		if (raw === '') local[path] = undefined;
-		else {
-			const n = Number(raw);
-			local[path] = Number.isFinite(n) ? n : undefined;
-		}
-	};
-
-	const onLibrarySelect = (path: string, item: MediaItem) => {
-		local[path] = item.url;
-		openLibrary = null;
-	};
-
-	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 settings" {onClose}>
-	<PanelHeader title="Site settings" {onClose} />
-
-	<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 settings have been declared. Pass a <code>site</code> schema to
-				<code>createCms()</code> to add fields here.
-			</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}`}
-						{#if fieldSchema.type === 'markdown'}
-							<label class="vela:flex vela:flex-col vela:gap-1.5">
-								<span class={fieldLabelClass}>{fieldSchema.label}</span>
-								<Textarea
-									value={stringValue(local[path])}
-									placeholder={fieldSchema.placeholder ?? ''}
-									oninput={(e) => (local[path] = e.currentTarget.value)}
-								/>
-							</label>
-						{:else if fieldSchema.type === 'number'}
-							<label class="vela:flex vela:flex-col vela:gap-1.5">
-								<span class={fieldLabelClass}>{fieldSchema.label}</span>
-								<Input
-									type="number"
-									value={numberValue(local[path]) ?? ''}
-									placeholder={fieldSchema.placeholder ?? ''}
-									oninput={(e) => setNumber(path, e.currentTarget.value)}
-								/>
-							</label>
-						{:else if fieldSchema.type === 'datetime'}
-							<label class="vela:flex vela:flex-col vela:gap-1.5">
-								<span class={fieldLabelClass}>{fieldSchema.label}</span>
-								<Input
-									type="datetime-local"
-									value={stringValue(local[path])}
-									oninput={(e) => (local[path] = e.currentTarget.value)}
-								/>
-							</label>
-						{:else if fieldSchema.type === 'color'}
-							<label class="vela:flex vela:flex-col vela:gap-1.5">
-								<span class={fieldLabelClass}>{fieldSchema.label}</span>
-								<div class="vela:flex vela:items-center vela:gap-2">
-									<input
-										type="color"
-										value={stringValue(local[path]) || '#000000'}
-										oninput={(e) => (local[path] = e.currentTarget.value)}
-										class="vela:h-9 vela:w-12 vela:rounded vela:border vela:border-[var(--cms-bar-divider)] vela:bg-[var(--cms-bar-bg-hover)] vela:cursor-pointer"
-									/>
-									<Input
-										type="text"
-										value={stringValue(local[path])}
-										placeholder={fieldSchema.placeholder ?? '#1f1f1f'}
-										oninput={(e) => (local[path] = e.currentTarget.value)}
-									/>
-								</div>
-							</label>
-						{:else if fieldSchema.type === 'url'}
-							<label class="vela:flex vela:flex-col vela:gap-1.5">
-								<span class={fieldLabelClass}>{fieldSchema.label}</span>
-								<Input
-									type="url"
-									value={stringValue(local[path])}
-									placeholder={fieldSchema.placeholder ?? 'https://…'}
-									oninput={(e) => (local[path] = e.currentTarget.value)}
-								/>
-							</label>
-						{:else if fieldSchema.type === 'image'}
-							<div class="vela:flex vela:flex-col vela:gap-1.5">
-								<span class={fieldLabelClass}>{fieldSchema.label}</span>
-								<div class="vela:relative vela:flex vela:items-center vela:gap-2">
-									<Input
-										type="url"
-										value={stringValue(local[path])}
-										placeholder={fieldSchema.placeholder ?? 'https://…'}
-										oninput={(e) => (local[path] = e.currentTarget.value)}
-									/>
-									<Button
-										type="button"
-										variant="ghost"
-										size="pill-icon"
-										aria-label="Choose from media library"
-										onclick={() => (openLibrary = openLibrary === path ? null : path)}
-									>
-										<ImagesIcon class="vela:size-4" />
-									</Button>
-									{#if openLibrary === path}
-										<div
-											role="dialog"
-											aria-label="Choose from media library"
-											class="vela:absolute vela:right-0 vela:top-full vela:mt-1 vela:z-30
-												vela:p-2 vela:rounded-md vela:bg-bar-bg
-												vela:border vela:border-[var(--cms-bar-divider)]
-												vela:shadow-[0_8px_24px_rgba(0,0,0,0.35)]"
-											use:clickOutside={() => (openLibrary = null)}
-										>
-											<CmsMediaPicker {endpoint} onSelect={(item) => onLibrarySelect(path, item)} />
-										</div>
-									{/if}
-								</div>
-								{#if stringValue(local[path])}
-									<img
-										src={stringValue(local[path])}
-										alt=""
-										class="vela:max-h-24 vela:w-auto vela:rounded vela:border vela:border-[var(--cms-bar-divider)] vela:object-contain vela:bg-[var(--cms-bar-bg-hover)]"
-									/>
-								{/if}
-							</div>
-						{:else}
-							<label class="vela:flex vela:flex-col vela:gap-1.5">
-								<span class={fieldLabelClass}>{fieldSchema.label}</span>
-								<Input
-									type="text"
-									value={stringValue(local[path])}
-									placeholder={fieldSchema.placeholder ?? ''}
-									oninput={(e) => (local[path] = e.currentTarget.value)}
-								/>
-							</label>
-						{/if}
-					{/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-settings-panel.svelte.d.ts

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

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

@@ -1,137 +0,0 @@
-<script lang="ts" generics="T extends Record<string, unknown>">
-	import type { Snippet } from 'svelte';
-	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
-
-	type Props = {
-		scope: CmsScopeRef;
-		name: string;
-		items: T[];
-		children: Snippet<[T, number]>;
-	};
-
-	let { scope, name, items, children }: Props = $props();
-
-	/** Build a blank item from the keys of the first existing item. */
-	const blankItem = (): T => {
-		const template = items[0];
-		const out: Record<string, unknown> = {};
-		if (template) for (const k of Object.keys(template)) out[k] = '';
-		return out as T;
-	};
-
-	const commit = (next: T[]) => cmsStore.setValue(scope, name, next);
-
-	const removeItem = (index: number) => commit(items.filter((_, i) => i !== index));
-	const addItem = () => commit([...items, blankItem()]);
-	const updateItem = (index: number, patch: Partial<T>) =>
-		commit(items.map((item, i) => (i === index ? ({ ...item, ...patch } as T) : item)));
-</script>
-
-<ul class="cms-repeater-editable">
-	{#each items as item, i (i)}
-		<li class="cms-repeater-editable__item">
-			<div class="cms-repeater-editable__preview">
-				{@render children(item, i)}
-			</div>
-			<details class="cms-repeater-editable__fields">
-				<summary>Fields</summary>
-				{#each Object.keys(item) as key}
-					<label>
-						<span>{key}</span>
-						<input
-							type="text"
-							value={String(item[key] ?? '')}
-							oninput={(e) =>
-								updateItem(i, { [key]: (e.target as HTMLInputElement).value } as Partial<T>)}
-						/>
-					</label>
-				{/each}
-			</details>
-			<button
-				type="button"
-				class="cms-repeater-editable__remove"
-				aria-label="Remove item"
-				onclick={() => removeItem(i)}
-			>
-				×
-			</button>
-		</li>
-	{/each}
-</ul>
-<button type="button" class="cms-repeater-editable__add" onclick={addItem}>+ Add item</button>
-
-<style>
-	.cms-repeater-editable {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-	.cms-repeater-editable__item {
-		position: relative;
-		padding: 0.5rem;
-		border: 1px dashed rgba(127, 127, 127, 0.6);
-		border-radius: 0.25rem;
-		background: rgba(127, 127, 127, 0.06);
-	}
-	.cms-repeater-editable__remove {
-		position: absolute;
-		top: 0.25rem;
-		right: 0.25rem;
-		width: 1.5rem;
-		height: 1.5rem;
-		border: 0;
-		border-radius: 9999px;
-		background: rgba(220, 38, 38, 0.1);
-		color: rgb(220, 38, 38);
-		cursor: pointer;
-		font-size: 1rem;
-		line-height: 1;
-	}
-	.cms-repeater-editable__remove:hover {
-		background: rgba(220, 38, 38, 0.2);
-	}
-	.cms-repeater-editable__fields {
-		margin-top: 0.5rem;
-		font-size: 0.85em;
-	}
-	.cms-repeater-editable__fields summary {
-		cursor: pointer;
-		color: rgba(127, 127, 127, 0.9);
-	}
-	.cms-repeater-editable__fields label {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		margin-top: 0.375rem;
-	}
-	.cms-repeater-editable__fields label span {
-		flex: 0 0 6rem;
-		font-family: ui-monospace, monospace;
-		color: rgba(127, 127, 127, 0.9);
-	}
-	.cms-repeater-editable__fields input {
-		flex: 1;
-		padding: 0.25rem 0.5rem;
-		border: 1px solid rgba(127, 127, 127, 0.4);
-		border-radius: 0.25rem;
-		background: canvas;
-		color: inherit;
-		font: inherit;
-	}
-	.cms-repeater-editable__add {
-		margin-top: 0.5rem;
-		padding: 0.375rem 0.75rem;
-		border: 1px dashed rgba(127, 127, 127, 0.6);
-		border-radius: 0.25rem;
-		background: transparent;
-		color: inherit;
-		cursor: pointer;
-		font: inherit;
-	}
-	.cms-repeater-editable__add:hover {
-		background: rgba(127, 127, 127, 0.06);
-	}
-</style>

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

@@ -1,55 +0,0 @@
-<script lang="ts" generics="T extends Record<string, unknown> = Record<string, unknown>">
-	import type { Snippet } from 'svelte';
-	import { getCmsScope } from './scope.js';
-	import { cmsStore, type CmsScopeRef } from './cms-store.svelte.js';
-
-	type Props = {
-		name: string;
-		fallback?: T[];
-		value?: unknown;
-		children: Snippet<[T, number]>;
-	};
-
-	let { name, 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;
-	});
-
-	const items = $derived(
-		Array.isArray(resolved) ? (resolved as T[]) : Array.isArray(fallback) ? fallback : []
-	);
-	const editable = $derived(cmsStore.isEditing && value === undefined && !!ref);
-</script>
-
-{#if editable && ref}
-	{#await import('./cms-repeater-editable.svelte') then { default: Editable }}
-		<Editable scope={ref} {name} {items} {children} />
-	{/await}
-{:else if items.length}
-	{#each items as item, i}
-		{@render children(item, i)}
-	{/each}
-{:else}
-	<span class="cms-missing" data-cms-name={name} data-cms-scope={scope?.scopeId ?? '?'}>
-		{name}
-	</span>
-{/if}
-
-<style>
-	.cms-missing {
-		display: inline-block;
-		padding: 0 0.25rem;
-		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-repeater.svelte.d.ts

@@ -1,30 +0,0 @@
-import type { Snippet } from 'svelte';
-declare function $$render<T extends Record<string, unknown> = Record<string, unknown>>(): {
-    props: {
-        name: string;
-        fallback?: T[];
-        value?: unknown;
-        children: Snippet<[T, number]>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends Record<string, unknown> = Record<string, unknown>> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends Record<string, unknown> = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends Record<string, unknown> = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const CmsRepeater: $$IsomorphicComponent;
-type CmsRepeater<T extends Record<string, unknown> = Record<string, unknown>> = InstanceType<typeof CmsRepeater<T>>;
-export default CmsRepeater;