@quoin-cms/admin 0.1.0 → 0.3.0

package/src/lib/components/lexical/BlockHost.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+import type { Component } from 'svelte'
+import { getContext } from 'svelte'
+import { getEditor } from 'svelte-lexical'
+import { getQuoinContext, loadComponent } from '$lib/context.svelte.js'
+import { getNodeByKey, isBlockNode } from './lexical-helpers.js'
+import BlockField from './BlockField.svelte'
+import type { BlockDef } from './block-defaults.js'
+
+let {
+	blockType = '',
+	data = {},
+	nodeKey = '',
+}: { blockType?: string; data?: Record<string, unknown>; nodeKey?: string } = $props()
+
+const editor = getEditor()
+const ctx = getQuoinContext()
+const blocks = getContext<BlockDef[]>('quoin.lexical.blocks') ?? []
+
+const def = $derived(blocks.find((b) => b.slug === blockType))
+const customPath = $derived(def ? ctx.config.editorBlocks?.[blockType] : undefined)
+
+// svelte-ignore state_referenced_locally
+let model = $state<Record<string, unknown>>(structuredClone($state.snapshot(data)) ?? {})
+
+function commit(snapshot: Record<string, unknown>): void {
+	editor.update(() => {
+		const node = getNodeByKey(nodeKey)
+		if (isBlockNode(node)) node.setData(snapshot)
+	})
+}
+
+let primed = false
+$effect(() => {
+	const snap = $state.snapshot(model)
+	if (!primed) {
+		primed = true
+		return
+	}
+	const id = setTimeout(() => commit(snap), 250)
+	return () => clearTimeout(id)
+})
+
+let CustomComp = $state<Component<any> | null>(null)
+let customError = $state(false)
+$effect(() => {
+	if (customPath) {
+		customError = false
+		loadComponent(customPath, ctx.importMap)
+			.then((c) => (CustomComp = c))
+			.catch(() => {
+				CustomComp = null
+				customError = true
+			})
+	}
+})
+
+function setData(next: Record<string, unknown>): void {
+	model = next
+}
+</script>
+
+<div class="my-3 rounded-md border bg-card p-3">
+	{#if !def}
+		<p class="text-sm text-destructive">Unknown block: {blockType}</p>
+	{:else}
+		<div class="mb-2 flex items-center gap-2 text-xs font-medium text-muted-foreground">
+			{def.label}
+		</div>
+		{#if customPath}
+			{#if CustomComp}
+				{@const C = CustomComp}
+				<C schema={def.fields} data={model} {setData} {BlockField} />
+			{:else if customError}
+				<p class="text-sm text-destructive">Failed to load editor component for block "{blockType}".</p>
+			{/if}
+		{:else}
+			<div class="space-y-2">
+				{#each def.fields as f (f.name)}
+					<BlockField field={f} bind:data={model} />
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</div>

package/src/lib/components/lexical/BlockNode.ts

@@ -0,0 +1,102 @@
+import { DecoratorNode } from 'lexical';
+import type {
+	EditorConfig,
+	LexicalEditor,
+	LexicalNode,
+	NodeKey,
+	SerializedLexicalNode,
+	Spread,
+} from 'lexical';
+import BlockHost from './BlockHost.svelte';
+
+export type SerializedBlockNode = Spread<
+	{
+		type: 'block';
+		version: 1;
+		blockType: string;
+		data: Record<string, unknown>;
+	},
+	SerializedLexicalNode
+>;
+
+/**
+ * BlockNode is the single generic decorator node for all custom blocks.
+ * __blockType holds the block's slug; the block schema + optional editor
+ * component are resolved at render time by BlockHost.
+ */
+export class BlockNode extends DecoratorNode<unknown> {
+	__blockType: string;
+	__data: Record<string, unknown>;
+
+	static getType(): string {
+		return 'block';
+	}
+
+	static clone(node: BlockNode): BlockNode {
+		return new BlockNode(node.__blockType, node.__data, node.__key);
+	}
+
+	constructor(blockType: string, data: Record<string, unknown>, key?: NodeKey) {
+		super(key);
+		this.__blockType = blockType;
+		this.__data = data ?? {};
+	}
+
+	createDOM(_config: EditorConfig): HTMLElement {
+		const div = document.createElement('div');
+		div.className = 'lexical-block';
+		div.setAttribute('contenteditable', 'false');
+		return div;
+	}
+
+	updateDOM(): boolean {
+		return false;
+	}
+
+	static importJSON(json: SerializedBlockNode): BlockNode {
+		return new BlockNode(json.blockType, json.data ?? {});
+	}
+
+	exportJSON(): SerializedBlockNode {
+		return {
+			...super.exportJSON(),
+			type: 'block',
+			version: 1,
+			blockType: this.__blockType,
+			data: this.__data,
+		};
+	}
+
+	decorate(_editor: LexicalEditor, _config: EditorConfig) {
+		return {
+			componentClass: BlockHost,
+			updateProps: (props: Record<string, unknown>) => {
+				props.blockType = this.__blockType;
+				props.data = this.__data;
+				props.nodeKey = this.__key;
+			},
+		};
+	}
+
+	isInline(): boolean {
+		return false;
+	}
+
+	getData(): Record<string, unknown> {
+		return this.__data;
+	}
+
+	setData(data: Record<string, unknown>): this {
+		const writable = this.getWritable();
+		writable.__data = data;
+		return writable;
+	}
+}
+
+export function $createBlockNode(blockType: string, data: Record<string, unknown> = {}): BlockNode {
+	return new BlockNode(blockType, data);
+}
+
+export function $isBlockNode(node: LexicalNode | null | undefined): node is BlockNode {
+	return node instanceof BlockNode;
+}

package/src/lib/components/lexical/block-defaults.ts

@@ -0,0 +1,40 @@
+import type { FieldSchema } from '$lib/types/schema.js'
+
+export interface BlockDef {
+	slug: string
+	label: string
+	icon?: string
+	fields: FieldSchema[]
+}
+
+/**
+ * Build an empty data object for a block from its field schema. Each field
+ * gets a type-appropriate zero value (or its declared defaultValue). Used when
+ * inserting a fresh block node.
+ */
+export function defaultBlockData(fields: FieldSchema[]): Record<string, unknown> {
+	const out: Record<string, unknown> = {}
+	for (const f of fields) {
+		const dv = (f as { defaultValue?: unknown }).defaultValue
+		if (dv !== undefined) {
+			out[f.name] = dv
+			continue
+		}
+		switch (f.type as string) {
+			case 'checkbox':
+				out[f.name] = false
+				break
+			case 'number':
+				out[f.name] = null
+				break
+			case 'array':
+			case 'blocks':
+			case 'tags':
+				out[f.name] = []
+				break
+			default:
+				out[f.name] = ''
+		}
+	}
+	return out
+}

package/src/lib/components/lexical/lexical-helpers.ts

@@ -15,6 +15,9 @@ export { $isCustomHTMLNode as isCustomHTMLNode } from './CustomHTMLNode.js';
 export { $createPullQuoteNode as createPullQuoteNode } from './PullQuoteNode.js';
 export { $createCustomHTMLNode as createCustomHTMLNode } from './CustomHTMLNode.js';
 
+export { $isBlockNode as isBlockNode } from './BlockNode.js';
+export { $createBlockNode as createBlockNode } from './BlockNode.js';
+
 export { $createYouTubeNode as createYouTubeNode } from 'svelte-lexical';
 export { $createImageNode as createImageNode } from 'svelte-lexical';
 

package/src/lib/components/lexical/nodes.ts

@@ -1,8 +1,10 @@
 import type { Klass, LexicalNode } from 'lexical';
 import { PullQuoteNode } from './PullQuoteNode.js';
 import { CustomHTMLNode } from './CustomHTMLNode.js';
+import { BlockNode } from './BlockNode.js';
 
 export const customNodes: Array<Klass<LexicalNode>> = [
 	PullQuoteNode,
 	CustomHTMLNode,
+	BlockNode,
 ];

package/src/lib/components/lexical/toolbar/InsertBlockDropdown.svelte

@@ -1,11 +1,26 @@
 <script lang="ts">
+import { getContext } from 'svelte';
 import { getEditor } from 'svelte-lexical';
-import { insertNodes, createParagraphNode, createPullQuoteNode, createCustomHTMLNode, createYouTubeNode, createImageNode } from '../lexical-helpers.js';
-import { Plus, Youtube, Quote, Code2, Image as ImageIcon } from 'lucide-svelte';
+import { insertNodes, createParagraphNode, createPullQuoteNode, createCustomHTMLNode, createYouTubeNode, createImageNode, createBlockNode } from '../lexical-helpers.js';
+import { defaultBlockData } from '../block-defaults.js';
+import type { BlockDef } from '../block-defaults.js';
+import { Plus, Youtube, Quote, Code2, Image as ImageIcon, Blocks as BlocksIcon } from 'lucide-svelte';
 import MediaLibrary from '../../MediaLibrary.svelte';
 
 const editor = getEditor();
 
+const customBlocks = getContext<BlockDef[]>('quoin.lexical.blocks') ?? [];
+
+function insertBlock(b: BlockDef) {
+	editor.update(() => {
+		const node = createBlockNode(b.slug, defaultBlockData(b.fields));
+		insertNodes([node]);
+		const paragraph = createParagraphNode();
+		node.insertAfter(paragraph);
+	});
+	closeDropdown();
+}
+
 let isOpen = $state(false);
 let showYoutubeDialog = $state(false);
 let showImageDialog = $state(false);
@@ -188,6 +203,16 @@ function handleImageKeydown(e: KeyboardEvent) {
 				<Code2 class="h-4 w-4" />
 				Custom HTML
 			</button>
+			{#each customBlocks as b (b.slug)}
+				<button
+					type="button"
+					class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+					onclick={() => insertBlock(b)}
+				>
+					<BlocksIcon class="h-4 w-4" />
+					{b.label}
+				</button>
+			{/each}
 		</div>
 	{/if}
 </div>

package/src/lib/context.svelte.ts

@@ -42,6 +42,7 @@ export interface ResolvedQuoinConfig {
 	slots: Record<string, string>
 	views: Record<string, string>
 	pages: Record<string, PageEntry>
+	editorBlocks: Record<string, string>
 }
 
 /** importMap entries are thunked dynamic imports. */

package/src/lib/types/schema.ts

@@ -25,6 +25,8 @@ export interface FieldSchema {
 	label: string
 	required: boolean
 	hidden?: boolean
+	/** Hides the field from admin edit/list views (API still returns it). */
+	adminHidden?: boolean
 	/** Sub-variant for text fields (e.g. "password"). Phase 21 D-06.
 	 * Emitted by field.Text.ToJSON() when Text.Type != "". */
 	variant?: string
@@ -93,6 +95,9 @@ export interface CollectionSchema {
 	fields: FieldSchema[]
 	admin?: AdminConfig
 	versions?: VersionsSchema
+	/** Present when the collection is an upload collection (col.Upload != nil).
+	 * Signals the admin to render a file dropzone on create/edit. */
+	upload?: { accept?: string[]; imageVariants?: boolean }
 }
 
 export interface GlobalSchema {
@@ -101,6 +106,16 @@ export interface GlobalSchema {
 	fields: FieldSchema[]
 }
 
+/**
+ * Auto-injected by the backend on every collection record. Not present in
+ * `collection.fields` (which only contains user-declared fields), so the
+ * admin synthesizes these entries when listing columns or rendering cells.
+ */
+export const SYSTEM_FIELDS: FieldSchema[] = [
+	{ name: 'createdAt', type: 'date', label: 'Created', required: false },
+	{ name: 'updatedAt', type: 'date', label: 'Updated', required: false },
+]
+
 export interface SchemaResponse {
 	collections: CollectionSchema[]
 	globals: GlobalSchema[]

package/src/views/CollectionListView.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 import { page } from '$lib/router/index.svelte.js'
 import { schema, getCollectionByKey } from '$lib/stores/schema.svelte.js'
+import { SYSTEM_FIELDS } from '$lib/types/schema.js'
 import { listRecords, deleteRecord } from '$lib/api/records.js'
 import RecordTable from '$lib/components/RecordTable.svelte'
 import RecordGrid from '$lib/components/RecordGrid.svelte'
 import Pagination from '$lib/components/Pagination.svelte'
 import DeleteDialog from '$lib/components/DeleteDialog.svelte'
 import { toast } from 'svelte-sonner'
-import { Search, Download, Columns3, ChevronUp, ChevronDown, LayoutGrid, List } from 'lucide-svelte'
+import { Search, Columns3, ChevronUp, ChevronDown, LayoutGrid, List } from 'lucide-svelte'
+import Slot from '$lib/Slot.svelte'
 
 type ViewMode = 'list' | 'grid'
 
@@ -32,6 +34,27 @@ let searchTimeout: ReturnType<typeof setTimeout>
 let visibleColumns = $state<string[] | null>(null)
 let loadedKey = $state<string | null>(null)
 let columnPickerOpen = $state(false)
+let columnPickerEl = $state<HTMLDivElement | null>(null)
+
+function handleColumnPickerOutsideClick(e: MouseEvent) {
+	if (!columnPickerOpen) return
+	if (columnPickerEl && !columnPickerEl.contains(e.target as Node)) {
+		columnPickerOpen = false
+	}
+}
+
+$effect(() => {
+	if (!columnPickerOpen) return
+	// Defer attachment by one tick so the click that opened the popup cannot
+	// be caught by this listener (the same mouseup/click chain).
+	const id = setTimeout(() => {
+		document.addEventListener('mousedown', handleColumnPickerOutsideClick)
+	}, 0)
+	return () => {
+		clearTimeout(id)
+		document.removeEventListener('mousedown', handleColumnPickerOutsideClick)
+	}
+})
 let viewMode = $state<ViewMode>('list')
 
 function hasImageField(flds: any[]): boolean {
@@ -68,22 +91,42 @@ function flattenFields(flds: any[]): any[] {
 	}
 	return out
 }
-let allFields = $derived(collection ? flattenFields(collection.fields).filter((f: any) => !f.hidden) : [])
+let allFields = $derived.by(() => {
+	if (!collection) return []
+	const userFields = flattenFields(collection.fields).filter((f: any) => !f.hidden)
+	const userNames = new Set(userFields.map((f: any) => f.name))
+	const systemExtras = SYSTEM_FIELDS.filter((f) => !userNames.has(f.name))
+	return [...userFields, ...systemExtras]
+})
 
 $effect(() => {
 	if (!collection) return
 	if (loadedKey === collectionKey) return
+
+	// Reset per-collection state — pagination, search, and sort from the
+	// previous collection are meaningless here and cause blank pages.
+	currentPage = 1
+	searchQuery = ''
+	sort = ''
+
+	// Compute next visibleColumns into a local, then assign unconditionally.
+	// The previous version mutated visibleColumns inside the storage branch
+	// and only fell back to defaults when the result was empty, so collections
+	// without a localStorage entry inherited the prior collection's columns.
+	let next: string[] | null = null
 	const stored = typeof localStorage !== 'undefined'
 		? localStorage.getItem(`cols:${collectionKey}`)
 		: null
 	if (stored) {
-		try { visibleColumns = JSON.parse(stored) } catch { visibleColumns = null }
+		try { next = JSON.parse(stored) } catch { next = null }
 	}
-	if (!visibleColumns || !visibleColumns.length) {
-		visibleColumns = collection.admin?.defaultColumns?.length
+	if (!next || !next.length) {
+		next = collection.admin?.defaultColumns?.length
 			? [...collection.admin.defaultColumns]
 			: flattenFields(collection.fields).filter((f: any) => !f.hidden).slice(0, 4).map((f: any) => f.name)
 	}
+	// Dedupe — guards against corrupt localStorage entries.
+	visibleColumns = Array.from(new Set(next))
 	loadedKey = collectionKey
 })
 
@@ -110,10 +153,18 @@ function moveColumn(name: string, dir: -1 | 1) {
 }
 
 let orderedFields = $derived.by(() => {
-	const selected = (visibleColumns ?? [])
-		.map((n) => allFields.find((f: any) => f.name === n))
-		.filter(Boolean)
-	const rest = allFields.filter((f: any) => !(visibleColumns ?? []).includes(f.name))
+	// Dedupe by name. Stale localStorage or collisions can put the same
+	// column name in visibleColumns twice; keyed each blocks crash on dupes.
+	const seen = new Set<string>()
+	const selected: any[] = []
+	for (const n of visibleColumns ?? []) {
+		if (seen.has(n)) continue
+		const f = allFields.find((f: any) => f.name === n)
+		if (!f) continue
+		seen.add(n)
+		selected.push(f)
+	}
+	const rest = allFields.filter((f: any) => !seen.has(f.name))
 	return [...selected, ...rest]
 })
 
@@ -228,7 +279,7 @@ async function confirmDelete() {
           </button>
         </div>
       {/if}
-      <div class="relative">
+      <div class="relative" bind:this={columnPickerEl}>
         <button
           type="button"
           onclick={() => (columnPickerOpen = !columnPickerOpen)}
@@ -240,7 +291,6 @@ async function confirmDelete() {
         {#if columnPickerOpen}
           <div
             class="absolute right-0 z-20 mt-2 w-56 rounded-lg border border-border/80 bg-card p-2 shadow-lg"
-            onmouseleave={() => (columnPickerOpen = false)}
             role="menu"
           >
             {#each orderedFields as f, idx (f.name)}
@@ -280,16 +330,8 @@ async function confirmDelete() {
           </div>
         {/if}
       </div>
-      {#if collectionKey === 'subscribers'}
-        <a
-          href="/api/subscribers/export.csv"
-          download
-          class="inline-flex items-center gap-2 rounded-lg bg-brand-red px-3 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:opacity-90"
-        >
-          <Download class="h-4 w-4" />
-          Export CSV
-        </a>
-      {/if}
+      <Slot name="collection.{collectionKey}.list-actions" />
+      <Slot name="collection.*.list-actions" />
     </div>
 
     <!-- Top pagination -->

package/src/views/CollectionNewView.svelte

@@ -5,6 +5,7 @@ import { resolve } from '$lib/router/index.svelte.js'
 import { schema, getCollectionByKey } from '$lib/stores/schema.svelte.js'
 import { createRecord } from '$lib/api/records.js'
 import DocumentEditLayout from '$lib/components/DocumentEditLayout.svelte'
+import UploadCreateView from '$lib/components/UploadCreateView.svelte'
 import { toast } from 'svelte-sonner'
 import { onMount } from 'svelte'
 
@@ -57,6 +58,8 @@ async function handleSave(data: Record<string, any>) {
 			<p class="text-sm text-muted-foreground">Creating draft...</p>
 		</div>
 	</div>
+{:else if collection.upload}
+	<UploadCreateView {collection} />
 {:else}
 	<DocumentEditLayout
 		{collection}

package/src/views/DashboardSlot.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+/**
+ * Wrapper that renders either the consumer-supplied dashboard
+ * (via `views['dashboard.main']` in admin.config.ts) or the built-in
+ * generic DashboardView fallback.
+ */
+
+import type { Component } from 'svelte'
+import { getQuoinContext, loadComponent, resolveView } from '$lib/context.svelte.js'
+import DashboardView from './DashboardView.svelte'
+
+const ctx = getQuoinContext()
+const overridePath = $derived(resolveView('dashboard.main', ctx.config))
+
+let component = $state<Component<any> | null>(null)
+let loadError = $state<string | null>(null)
+
+$effect(() => {
+	component = null
+	loadError = null
+	if (!overridePath) return
+
+	loadComponent(overridePath, ctx.importMap)
+		.then((c) => {
+			component = c
+		})
+		.catch((err) => {
+			loadError = err instanceof Error ? err.message : String(err)
+			console.error('[quoin:DashboardSlot] Failed to load override:', err)
+		})
+})
+</script>
+
+{#if !overridePath}
+	<DashboardView />
+{:else if loadError}
+	<div class="p-6 text-red-600">
+		Failed to load dashboard override: {loadError}
+	</div>
+	<DashboardView />
+{:else if component}
+	{@const Override = component}
+	<Override />
+{:else}
+	<div class="p-6 text-muted-foreground">Loading dashboard…</div>
+{/if}