@quoin-cms/admin 0.2.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 {

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/LoginView.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { goto } from '$lib/router/index.svelte.js'
 import { resolve } from '$lib/router/index.svelte.js'
-import { login, register, getMe, getSetupStatus } from '$lib/api/auth.js'
+import { login, register, getMe } from '$lib/api/auth.js'
 import { toast } from 'svelte-sonner'
 import { onMount } from 'svelte'
 import { BookOpen } from 'lucide-svelte'
@@ -9,9 +9,10 @@ import { branding, loadBranding } from '$lib/stores/branding.svelte.js'
 import Slot from '$lib/Slot.svelte'
 
 let email = $state('')
+let name = $state('')
 let password = $state('')
 let confirmPassword = $state('')
-let isSetup = $state(false)
+let isCreatingAccount = $state(false)
 let isLoading = $state(false)
 let isCheckingAuth = $state(true)
 
@@ -22,21 +23,19 @@ onMount(async () => {
 		await goto(resolve('/'))
 		return
 	}
-	const status = await getSetupStatus()
-	if (status.ok && status.data.needsSetup) {
-		isSetup = true
-	}
 	isCheckingAuth = false
 })
 
 async function handleLogin() {
-	if (!email || !password) {
+	const trimmedEmail = email.trim()
+	const trimmedPassword = password.trim()
+	if (!trimmedEmail || !trimmedPassword) {
 		toast.error('Please enter email and password')
 		return
 	}
 
 	isLoading = true
-	const result = await login(email, password)
+	const result = await login(trimmedEmail, trimmedPassword)
 	isLoading = false
 
 	if (result.ok) {
@@ -50,32 +49,41 @@ async function handleLogin() {
 	}
 }
 
-async function handleSetup() {
-	if (!email || !password) {
+async function handleCreateAccount() {
+	const trimmedName = name.trim()
+	const trimmedEmail = email.trim()
+	const trimmedPassword = password.trim()
+	const trimmedConfirmPassword = confirmPassword.trim()
+
+	if (!trimmedName) {
+		toast.error('Please enter your name')
+		return
+	}
+	if (!trimmedEmail || !trimmedPassword) {
 		toast.error('Please enter email and password')
 		return
 	}
-	if (password !== confirmPassword) {
+	if (trimmedPassword !== trimmedConfirmPassword) {
 		toast.error('Passwords do not match')
 		return
 	}
-	if (password.length < 6) {
+	if (trimmedPassword.length < 6) {
 		toast.error('Password must be at least 6 characters')
 		return
 	}
 
 	isLoading = true
-	const result = await register(email, password)
+	const result = await register(trimmedEmail, trimmedPassword, trimmedName)
 	isLoading = false
 
 	if (result.ok) {
 		toast.success('Admin account created! Logging in...')
-		const loginResult = await login(email, password)
+		const loginResult = await login(trimmedEmail, trimmedPassword)
 		if (loginResult.ok) {
 			await goto(resolve('/'))
 		} else {
 			toast.error('Account created but login failed. Please try logging in.')
-			isSetup = false
+			isCreatingAccount = false
 		}
 	} else {
 		toast.error(result.error)
@@ -83,7 +91,7 @@ async function handleSetup() {
 }
 
 function toggleMode() {
-	isSetup = !isSetup
+	isCreatingAccount = !isCreatingAccount
 	confirmPassword = ''
 }
 </script>
@@ -149,20 +157,36 @@ function toggleMode() {
 
         <div class="mb-8">
           <h2 class="text-xl font-semibold tracking-tight" style="font-family: var(--font-display);">
-            {isSetup ? 'Create your account' : 'Sign in'}
+            {isCreatingAccount ? 'Create your account' : 'Sign in'}
           </h2>
           <p class="mt-1.5 text-sm text-muted-foreground">
-            {isSetup ? 'Set up the first admin account to get started.' : 'Enter your credentials to continue.'}
+            {isCreatingAccount ? 'Create the first admin account to get started.' : 'Enter your credentials to continue.'}
           </p>
         </div>
 
         <form
           onsubmit={(e) => {
             e.preventDefault();
-            isSetup ? handleSetup() : handleLogin();
+            isCreatingAccount ? handleCreateAccount() : handleLogin();
           }}
           class="space-y-5"
         >
+          {#if isCreatingAccount}
+            <div>
+              <label for="name" class="mb-2 block text-[13px] font-medium text-foreground">
+                Name
+              </label>
+              <input
+                id="name"
+                type="text"
+                bind:value={name}
+                class="h-11 w-full rounded-lg border border-border bg-card px-3.5 text-sm shadow-sm transition-all placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/10"
+                placeholder="Your name"
+                autocomplete="name"
+              />
+            </div>
+          {/if}
+
           <div>
             <label for="email" class="mb-2 block text-[13px] font-medium text-foreground">
               Email
@@ -187,11 +211,11 @@ function toggleMode() {
               bind:value={password}
               class="h-11 w-full rounded-lg border border-border bg-card px-3.5 text-sm shadow-sm transition-all placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/10"
               placeholder="Enter password"
-              autocomplete={isSetup ? 'new-password' : 'current-password'}
+              autocomplete={isCreatingAccount ? 'new-password' : 'current-password'}
             />
           </div>
 
-          {#if isSetup}
+          {#if isCreatingAccount}
             <div>
               <label for="confirmPassword" class="mb-2 block text-[13px] font-medium text-foreground">
                 Confirm Password
@@ -212,7 +236,7 @@ function toggleMode() {
             disabled={isLoading}
             class="h-11 w-full rounded-lg bg-primary text-sm font-medium text-primary-foreground shadow-sm transition-all hover:bg-primary/90 hover:shadow-md active:scale-[0.99] disabled:opacity-50 disabled:shadow-none"
           >
-            {isLoading ? 'Please wait...' : isSetup ? 'Create Account' : 'Sign In'}
+            {isLoading ? 'Please wait...' : isCreatingAccount ? 'Create Account' : 'Sign In'}
           </button>
         </form>
 
@@ -222,7 +246,7 @@ function toggleMode() {
             onclick={toggleMode}
             class="text-[13px] text-muted-foreground transition-colors hover:text-primary"
           >
-            {isSetup ? 'Already have an account? Sign in' : 'First time? Create admin account'}
+            {isCreatingAccount ? 'Already have an account? Sign in' : 'First time? Create admin account'}
           </button>
         </div>
       </div>

package/biome.json

@@ -1,62 +0,0 @@
-{
-  "$schema": "https://biomejs.dev/schemas/2.4.4/schema.json",
-  "vcs": {
-    "enabled": true,
-    "clientKind": "git",
-    "useIgnoreFile": false,
-    "defaultBranch": "main"
-  },
-  "files": {
-    "ignoreUnknown": false
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "tab",
-    "lineWidth": 100
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true,
-      "suspicious": {
-        "noExplicitAny": "off"
-      },
-      "style": {
-        "noNonNullAssertion": "off"
-      },
-      "correctness": {
-        "noUnusedVariables": "warn"
-      }
-    }
-  },
-  "javascript": {
-    "formatter": {
-      "quoteStyle": "single",
-      "semicolons": "asNeeded",
-      "trailingCommas": "es5",
-      "arrowParentheses": "always"
-    }
-  },
-  "css": {
-    "parser": {
-      "cssModules": false,
-      "tailwindDirectives": true
-    },
-    "linter": {
-      "enabled": true
-    }
-  },
-  "overrides": [
-    {
-      "includes": ["**/*.svelte"],
-      "linter": {
-        "rules": {
-          "correctness": {
-            "noUnusedVariables": "off",
-            "noUnusedImports": "off"
-          }
-        }
-      }
-    }
-  ]
-}