From 82dd61549bccd91837cb875e5c5d1e55f6b84b05 Mon Sep 17 00:00:00 2001
From: vegard <vnotnes@pm.me>
Date: Wed, 18 Mar 2026 08:47:20 +0000
Subject: [PATCH] =?UTF-8?q?Gj=C3=B8r=20EditorTrait=20til=20fullverdig=20Bl?=
 =?UTF-8?q?ockShell-panel=20med=20inline=20editor=20og=20kilder=20(oppgave?=
 =?UTF-8?q?=2020.8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fjerner TraitPanel-wrapper og erstatter med selvstendig panel-layout
som matcher KanbanTrait/CalendarTrait-mønsteret:

- Selvstendig layout som fyller BlockShell content area
- Listevisning med klikk-for-å-redigere (inline tittel + innhold)
- Source_material-edges vises som "Kilder"-sidebar i editor-visningen
- Visuell venstrekant-markering på artikler med kilder
- Opprett ny artikkel direkte fra panelet
- Container queries for responsiv tilpasning (small/medium/mobile)
- Beholder all eksisterende funksjonalitet: AI preset drops, publisering,
  drag-and-drop ut av panelet

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../lib/components/traits/EditorTrait.svelte  | 1277 +++++++++++++++--
 tasks.md                                      |    3 +-
 2 files changed, 1150 insertions(+), 130 deletions(-)

diff --git a/frontend/src/lib/components/traits/EditorTrait.svelte b/frontend/src/lib/components/traits/EditorTrait.svelte
index ec5233e..b07e6f8 100644
--- a/frontend/src/lib/components/traits/EditorTrait.svelte
+++ b/frontend/src/lib/components/traits/EditorTrait.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import type { Node, Edge } from '$lib/spacetime';
 	import { edgeStore, nodeStore, nodeVisibility } from '$lib/spacetime';
-	import { deleteEdge, aiProcess } from '$lib/api';
-	import TraitPanel from './TraitPanel.svelte';
+	import { createNode, createEdge, updateNode, deleteEdge, aiProcess } from '$lib/api';
 	import PublishDialog from '$lib/components/PublishDialog.svelte';
 	import { getDragPayload, setDragPayload, checkToolToNodeCompat, checkEditorCompat, type DragPayload } from '$lib/transfer';
 	import type { BlockReceiver, PlacementIntent } from '$lib/components/blockshell/types';
@@ -60,7 +59,10 @@
 	const isPublishingCollection = $derived(pubConfig !== null);
 	const pubSlug = $derived((pubConfig?.slug as string) ?? '');
 
-	/** Content nodes belonging to this collection, with their edges */
+	// =========================================================================
+	// Content items: nodes belonging to this collection
+	// =========================================================================
+
 	interface ContentItem {
 		node: Node;
 		edge: Edge;
@@ -83,7 +85,40 @@
 		return items;
 	});
 
-	/** User's content nodes that are NOT already in this collection (for publishing picker) */
+	// =========================================================================
+	// Source material: edges pointing FROM content items to their sources
+	// =========================================================================
+
+	interface SourceLink {
+		edge: Edge;
+		sourceNode: Node;
+		context: string;
+	}
+
+	/** All source_material edges from content items in this collection */
+	const sourceLinks = $derived.by((): SourceLink[] => {
+		const links: SourceLink[] = [];
+		const itemIds = new Set(contentItems.map(i => i.node.id));
+		for (const item of contentItems) {
+			for (const edge of edgeStore.bySource(item.node.id)) {
+				if (edge.edgeType !== 'source_material') continue;
+				const sourceNode = nodeStore.get(edge.targetId);
+				if (!sourceNode) continue;
+				let context = 'referenced';
+				try {
+					const meta = JSON.parse(edge.metadata ?? '{}');
+					if (meta.context) context = meta.context;
+				} catch { /* ignore */ }
+				links.push({ edge, sourceNode, context });
+			}
+		}
+		return links;
+	});
+
+	// =========================================================================
+	// Publishable nodes (for publishing picker)
+	// =========================================================================
+
 	const publishableNodes = $derived.by((): Node[] => {
 		if (!isPublishingCollection || !userId) return [];
 		const inCollection = new Set(contentItems.map(i => i.node.id));
@@ -103,12 +138,21 @@
 		return nodes;
 	});
 
+	// =========================================================================
 	// State
+	// =========================================================================
+
 	let showPublishPicker = $state(false);
 	let publishTarget = $state<Node | null>(null);
 	let unpublishing = $state<string | null>(null);
 	let unpublishError = $state<string | null>(null);
 	let confirmUnpublish = $state<ContentItem | null>(null);
+	let selectedItem = $state<ContentItem | null>(null);
+	let editContent = $state('');
+	let editTitle = $state('');
+	let saving = $state(false);
+	let saveMessage = $state<string | null>(null);
+	let showSources = $state(false);
 
 	// --- AI tool_to_node drop state ---
 	let dropTargetNodeId = $state<string | null>(null);
@@ -116,13 +160,101 @@
 	let aiProcessing = $state<string | null>(null);
 	let aiResult = $state<{ nodeId: string; success: boolean; message: string } | null>(null);
 
-	function parsePresetMetadata(presetId: string): Record<string, unknown> {
-		const node = nodeStore.get(presetId);
-		if (!node) return {};
-		try { return JSON.parse(node.metadata ?? '{}'); } catch { return {}; }
+	// =========================================================================
+	// Inline editing
+	// =========================================================================
+
+	function selectItem(item: ContentItem) {
+		selectedItem = item;
+		editTitle = item.node.title ?? '';
+		editContent = item.node.content ?? '';
+		saveMessage = null;
 	}
 
-	// --- Drag-and-drop: items as drag source ---
+	function closeEditor() {
+		selectedItem = null;
+		editTitle = '';
+		editContent = '';
+		saveMessage = null;
+	}
+
+	async function saveContent() {
+		if (!selectedItem || !accessToken || saving) return;
+		saving = true;
+		saveMessage = null;
+		try {
+			await updateNode(accessToken, {
+				node_id: selectedItem.node.id,
+				title: editTitle.trim() || undefined,
+				content: editContent,
+			});
+			saveMessage = 'Lagret';
+			setTimeout(() => { if (saveMessage === 'Lagret') saveMessage = null; }, 2000);
+		} catch (err) {
+			saveMessage = `Feil: ${err instanceof Error ? err.message : String(err)}`;
+		} finally {
+			saving = false;
+		}
+	}
+
+	/** Source links for the currently selected item */
+	const selectedSourceLinks = $derived.by((): SourceLink[] => {
+		if (!selectedItem) return [];
+		return sourceLinks.filter(sl => {
+			for (const edge of edgeStore.bySource(selectedItem!.node.id)) {
+				if (edge.id === sl.edge.id) return true;
+			}
+			return false;
+		});
+	});
+
+	// =========================================================================
+	// New article creation
+	// =========================================================================
+
+	let newTitle = $state('');
+	let isCreating = $state(false);
+	let showCreateForm = $state(false);
+
+	async function handleCreateArticle() {
+		if (!accessToken || !newTitle.trim() || isCreating) return;
+		isCreating = true;
+		try {
+			const { node_id } = await createNode(accessToken, {
+				node_kind: 'content',
+				title: newTitle.trim(),
+				visibility: 'hidden',
+				metadata: { document: { type: 'doc', content: [] } },
+			});
+			await createEdge(accessToken, {
+				source_id: node_id,
+				target_id: collection.id,
+				edge_type: 'belongs_to',
+				metadata: {},
+			});
+			newTitle = '';
+			showCreateForm = false;
+		} catch (err) {
+			console.error('Feil ved oppretting:', err);
+		} finally {
+			isCreating = false;
+		}
+	}
+
+	function handleCreateKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			handleCreateArticle();
+		} else if (e.key === 'Escape') {
+			showCreateForm = false;
+			newTitle = '';
+		}
+	}
+
+	// =========================================================================
+	// Drag-and-drop: items as drag source
+	// =========================================================================
+
 	function handleItemDragStart(e: DragEvent, item: ContentItem) {
 		if (!e.dataTransfer) return;
 		setDragPayload(e.dataTransfer, {
@@ -132,16 +264,12 @@
 		});
 	}
 
-	// --- Drag-and-drop: accept AI preset drops (tool_to_node) ---
+	// --- AI preset drops (tool_to_node) ---
 	function handleItemDragOver(e: DragEvent, item: ContentItem) {
 		e.preventDefault();
 		if (!e.dataTransfer) return;
-
 		const payload = getDragPayload(e.dataTransfer);
-		if (!payload || payload.nodeKind !== 'ai_preset' || !payload.presetId) {
-			// Not an AI preset — ignore (don't accept arbitrary drops on items)
-			return;
-		}
+		if (!payload || payload.nodeKind !== 'ai_preset' || !payload.presetId) return;
 
 		const compat = checkToolToNodeCompat(item.node.nodeKind, !!item.node.content?.trim());
 		if (!compat.compatible) {
@@ -185,7 +313,6 @@
 			return;
 		}
 
-		// Trigger tool_to_node AI processing
 		aiProcessing = item.node.id;
 		aiResult = null;
 
@@ -227,105 +354,221 @@
 			unpublishing = null;
 		}
 	}
+
+	// =========================================================================
+	// Helpers
+	// =========================================================================
+
+	function formatTime(node: Node): string {
+		if (!node.createdAt?.microsSinceUnixEpoch) return '';
+		const ms = Number(node.createdAt.microsSinceUnixEpoch / 1000n);
+		const date = new Date(ms);
+		return date.toLocaleDateString('nb-NO', { day: 'numeric', month: 'short' });
+	}
+
+	function kindIcon(kind: string): string {
+		switch (kind) {
+			case 'communication': return '💬';
+			case 'content': return '📄';
+			default: return '🔗';
+		}
+	}
 </script>
 
-<TraitPanel name="editor" label="Innhold" icon="📝">
-	{#snippet children()}
-		<p class="mb-3 text-xs text-gray-500">
-			Preset: <span class="font-medium">{preset}</span>
-			{#if config.allow_collaborators}
-				 &middot; Samarbeid aktivert
-			{/if}
-			{#if isPublishingCollection}
-				 &middot; Publisering aktiv
-			{/if}
-		</p>
+<!--
+	EditorTrait — fullverdig BlockShell-panel for artikkelverktøy.
+	Viser innholdsnoder med inline editor, source_material-kilder,
+	og støtter mottak av noder fra andre paneler.
+	Forelder (collection page) wrapper dette i BlockShell.
+-->
 
-		{#if unpublishError}
-			<div class="mb-3 rounded-lg border border-red-200 bg-red-50 p-2 text-xs text-red-700">
-				{unpublishError}
-				<button onclick={() => { unpublishError = null; }} class="ml-1 underline">Lukk</button>
-			</div>
-		{/if}
-
-		{#if contentItems.length === 0}
-			<p class="text-sm text-gray-400">Ingen innholdsnoder ennå.</p>
-		{:else}
-			<ul class="space-y-2">
-				{#each contentItems as item (item.node.id)}
-					{@const isDropTarget = dropTargetNodeId === item.node.id}
-					{@const isIncompat = isDropTarget && dropIncompat}
-					{@const isProcessing = aiProcessing === item.node.id}
-					{@const itemResult = aiResult?.nodeId === item.node.id ? aiResult : null}
-					<li
-						class="group rounded border px-3 py-2 transition-colors"
-						class:cursor-grab={!isProcessing}
-						class:active:cursor-grabbing={!isProcessing}
-						class:border-gray-100={!isDropTarget && !isProcessing}
-						class:border-purple-400={isDropTarget && !isIncompat}
-						class:bg-purple-50={isDropTarget && !isIncompat}
-						class:border-red-400={!!isIncompat}
-						class:bg-red-50={!!isIncompat}
-						class:border-amber-300={isProcessing}
-						class:bg-amber-50={isProcessing}
-						draggable={!isProcessing}
-						ondragstart={(e) => handleItemDragStart(e, item)}
-						ondragover={(e) => handleItemDragOver(e, item)}
-						ondragleave={(e) => handleItemDragLeave(e, item)}
-						ondrop={(e) => handleItemDrop(e, item)}
+<div class="editor-trait">
+	{#if selectedItem}
+		<!-- ============================================================= -->
+		<!-- EDITOR VIEW: inline editing for selected content node          -->
+		<!-- ============================================================= -->
+		<div class="editor-view">
+			<div class="editor-toolbar">
+				<button class="editor-back-btn" onclick={closeEditor} title="Tilbake til liste">
+					← Tilbake
+				</button>
+				<div class="editor-toolbar-right">
+					{#if selectedSourceLinks.length > 0}
+						<button
+							class="editor-sources-btn {showSources ? 'editor-sources-btn-active' : ''}"
+							onclick={() => { showSources = !showSources; }}
+							title="Vis kilder ({selectedSourceLinks.length})"
+						>
+							📎 {selectedSourceLinks.length}
+						</button>
+					{/if}
+					<button
+						class="editor-save-btn"
+						onclick={saveContent}
+						disabled={saving}
 					>
-						{#if isIncompat}
-							<!-- Incompat feedback overlay -->
-							<div class="text-center py-1">
-								<p class="text-xs text-red-600 font-medium">{dropIncompat?.reason}</p>
-								{#if dropIncompat?.suggestion}
-									<p class="text-xs text-red-400 mt-0.5">{dropIncompat.suggestion}</p>
-								{/if}
-							</div>
-						{:else if isDropTarget}
-							<!-- Compatible drop target -->
-							<div class="text-center py-1">
-								<p class="text-xs text-purple-600 font-medium">Slipp for in-place revisjon</p>
-							</div>
-						{:else}
-							<div class="flex items-start justify-between gap-2">
-								<div class="min-w-0 flex-1">
-									<h4 class="text-sm font-medium text-gray-900">
-										{item.node.title || 'Uten tittel'}
-										{#if isProcessing}
-											<span class="ml-1 text-xs text-amber-600">Prosesserer…</span>
-										{/if}
-									</h4>
-									{#if item.node.content}
-										<p class="mt-0.5 text-xs text-gray-500 line-clamp-2">{item.node.content.slice(0, 140)}</p>
-									{/if}
-									{#if isPublishingCollection && pubSlug}
-										<p class="mt-1 text-xs text-gray-400">
-											/pub/{pubSlug}/{item.node.id.slice(0, 8)}
-										</p>
-									{/if}
-									{#if itemResult}
-										<p class="mt-1 text-xs {itemResult.success ? 'text-green-600' : 'text-red-600'}">
-											{itemResult.message}
-										</p>
+						{saving ? 'Lagrer…' : 'Lagre'}
+					</button>
+					{#if saveMessage}
+						<span class="editor-save-msg {saveMessage.startsWith('Feil') ? 'editor-save-error' : 'editor-save-ok'}">
+							{saveMessage}
+						</span>
+					{/if}
+				</div>
+			</div>
+
+			<div class="editor-body">
+				<div class="editor-content-area">
+					<input
+						type="text"
+						class="editor-title-input"
+						bind:value={editTitle}
+						placeholder="Tittel…"
+					/>
+					<textarea
+						class="editor-textarea"
+						bind:value={editContent}
+						placeholder="Skriv innhold her…"
+					></textarea>
+				</div>
+
+				<!-- Sources sidebar (toggled) -->
+				{#if showSources && selectedSourceLinks.length > 0}
+					<div class="editor-sources-panel">
+						<h4 class="editor-sources-title">Kilder</h4>
+						<ul class="editor-sources-list">
+							{#each selectedSourceLinks as sl (sl.edge.id)}
+								<li class="editor-source-item">
+									<span class="editor-source-icon">{kindIcon(sl.sourceNode.nodeKind)}</span>
+									<div class="editor-source-info">
+										<span class="editor-source-name">{sl.sourceNode.title || 'Uten tittel'}</span>
+										<span class="editor-source-context">{sl.context}</span>
+									</div>
+								</li>
+							{/each}
+						</ul>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{:else}
+		<!-- ============================================================= -->
+		<!-- LIST VIEW: content items belonging to collection               -->
+		<!-- ============================================================= -->
+		<div class="editor-list">
+			{#if unpublishError}
+				<div class="editor-error">
+					{unpublishError}
+					<button onclick={() => { unpublishError = null; }} class="editor-error-dismiss">Lukk</button>
+				</div>
+			{/if}
+
+			<div class="editor-list-header">
+				<span class="editor-list-meta">
+					{preset}
+					{#if config.allow_collaborators}
+						· Samarbeid
+					{/if}
+					{#if isPublishingCollection}
+						· Publisering
+					{/if}
+				</span>
+				<span class="editor-list-count">{contentItems.length}</span>
+			</div>
+
+			{#if contentItems.length === 0}
+				<div class="editor-empty">
+					<span class="editor-empty-icon">📝</span>
+					<p>Ingen artikler ennå.</p>
+					<p class="editor-empty-hint">Opprett en ny, eller dra innhold fra andre paneler.</p>
+				</div>
+			{:else}
+				<div class="editor-items">
+					{#each contentItems as item (item.node.id)}
+						{@const isDropTarget = dropTargetNodeId === item.node.id}
+						{@const isIncompat = isDropTarget && dropIncompat}
+						{@const isProcessing = aiProcessing === item.node.id}
+						{@const itemResult = aiResult?.nodeId === item.node.id ? aiResult : null}
+						{@const itemSourceCount = (() => {
+							let c = 0;
+							for (const e of edgeStore.bySource(item.node.id)) {
+								if (e.edgeType === 'source_material') c++;
+							}
+							return c;
+						})()}
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							class="editor-item"
+							class:editor-item-drop={isDropTarget && !isIncompat}
+							class:editor-item-incompat={!!isIncompat}
+							class:editor-item-processing={isProcessing}
+							draggable={!isProcessing}
+							ondragstart={(e) => handleItemDragStart(e, item)}
+							ondragover={(e) => handleItemDragOver(e, item)}
+							ondragleave={(e) => handleItemDragLeave(e, item)}
+							ondrop={(e) => handleItemDrop(e, item)}
+							onclick={() => selectItem(item)}
+							onkeydown={(e) => { if (e.key === 'Enter') selectItem(item); }}
+							role="button"
+							tabindex="0"
+						>
+							{#if isIncompat}
+								<div class="editor-item-feedback">
+									<p class="editor-item-feedback-reason">{dropIncompat?.reason}</p>
+									{#if dropIncompat?.suggestion}
+										<p class="editor-item-feedback-suggestion">{dropIncompat.suggestion}</p>
 									{/if}
 								</div>
+							{:else if isDropTarget}
+								<div class="editor-item-feedback">
+									<p class="editor-item-feedback-ok">Slipp for in-place revisjon</p>
+								</div>
+							{:else}
+								<div class="editor-item-main">
+									{#if itemSourceCount > 0}
+										<span class="editor-item-source-indicator" title="{itemSourceCount} kilde(r)"></span>
+									{/if}
+									<div class="editor-item-text">
+										<span class="editor-item-title">
+											{item.node.title || 'Uten tittel'}
+											{#if isProcessing}
+												<span class="editor-item-processing-label">Prosesserer…</span>
+											{/if}
+										</span>
+										{#if item.node.content}
+											<span class="editor-item-preview">{item.node.content.slice(0, 120)}</span>
+										{/if}
+										{#if itemResult}
+											<span class="editor-item-result {itemResult.success ? 'editor-item-result-ok' : 'editor-item-result-err'}">
+												{itemResult.message}
+											</span>
+										{/if}
+									</div>
+									<div class="editor-item-meta">
+										{#if itemSourceCount > 0}
+											<span class="editor-item-source-count" title="Kilder">📎 {itemSourceCount}</span>
+										{/if}
+										{#if formatTime(item.node)}
+											<span class="editor-item-time">{formatTime(item.node)}</span>
+										{/if}
+									</div>
+								</div>
+
 								{#if isPublishingCollection && accessToken}
-									<div class="flex shrink-0 items-center gap-1">
+									<div class="editor-item-actions">
 										{#if pubSlug}
 											<a
 												href="/api/pub/{pubSlug}/{item.node.id.slice(0, 8)}"
 												target="_blank"
 												rel="noopener"
-												class="rounded px-2 py-1 text-xs text-gray-500 opacity-0 group-hover:opacity-100 hover:bg-gray-100 hover:text-gray-700"
-												title="Se publisert artikkel"
-											>
-												Se
-											</a>
+												class="editor-item-action"
+												title="Se publisert"
+												onclick={(e) => e.stopPropagation()}
+											>Se</a>
 										{/if}
 										<button
-											onclick={() => { confirmUnpublish = item; }}
-											class="rounded px-2 py-1 text-xs text-red-500 opacity-0 group-hover:opacity-100 hover:bg-red-50 hover:text-red-700"
+											onclick={(e) => { e.stopPropagation(); confirmUnpublish = item; }}
+											class="editor-item-action editor-item-action-danger"
 											title="Fjern fra publisering"
 											disabled={unpublishing === item.node.id}
 										>
@@ -333,41 +576,78 @@
 										</button>
 									</div>
 								{/if}
-							</div>
-						{/if}
-					</li>
-				{/each}
-			</ul>
-		{/if}
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
 
-		<!-- Publish new article button -->
-		{#if isPublishingCollection && accessToken}
-			<div class="mt-4">
-				<button
-					onclick={() => { showPublishPicker = !showPublishPicker; }}
-					class="rounded-lg bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-700"
-				>
-					Publiser artikkel
-				</button>
-			</div>
+			<!-- Actions: create / publish -->
+			{#if accessToken}
+				<div class="editor-actions">
+					{#if showCreateForm}
+						<div class="editor-create-form">
+							<input
+								type="text"
+								bind:value={newTitle}
+								onkeydown={handleCreateKeydown}
+								placeholder="Artikkeltittel…"
+								class="editor-create-input"
+								disabled={isCreating}
+							/>
+							<div class="editor-create-buttons">
+								<button
+									onclick={handleCreateArticle}
+									disabled={isCreating || !newTitle.trim()}
+									class="editor-create-btn"
+								>
+									{isCreating ? '…' : 'Opprett'}
+								</button>
+								<button
+									onclick={() => { showCreateForm = false; newTitle = ''; }}
+									class="editor-cancel-btn"
+								>
+									Avbryt
+								</button>
+							</div>
+						</div>
+					{:else}
+						<button
+							onclick={() => { showCreateForm = true; newTitle = ''; }}
+							class="editor-new-btn"
+						>
+							+ Ny artikkel
+						</button>
+					{/if}
+
+					{#if isPublishingCollection}
+						<button
+							onclick={() => { showPublishPicker = !showPublishPicker; }}
+							class="editor-publish-btn"
+						>
+							Publiser artikkel
+						</button>
+					{/if}
+				</div>
+			{/if}
 
 			<!-- Publishable nodes picker -->
-			{#if showPublishPicker}
-				<div class="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3">
-					<h4 class="mb-2 text-xs font-semibold text-emerald-800">Velg artikkel å publisere</h4>
+			{#if showPublishPicker && isPublishingCollection}
+				<div class="editor-publish-picker">
+					<h4 class="editor-publish-picker-title">Velg artikkel å publisere</h4>
 					{#if publishableNodes.length === 0}
-						<p class="text-xs text-emerald-600">Ingen upubliserte artikler funnet. Opprett innhold via mottaket først.</p>
+						<p class="editor-publish-picker-empty">Ingen upubliserte artikler funnet.</p>
 					{:else}
-						<ul class="max-h-48 space-y-1 overflow-y-auto">
+						<ul class="editor-publish-picker-list">
 							{#each publishableNodes as pNode (pNode.id)}
 								<li>
 									<button
 										onclick={() => { publishTarget = pNode; showPublishPicker = false; }}
-										class="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-emerald-100"
+										class="editor-publish-picker-item"
 									>
-										<span class="font-medium text-gray-900">{pNode.title || 'Uten tittel'}</span>
+										<span class="editor-publish-picker-name">{pNode.title || 'Uten tittel'}</span>
 										{#if pNode.content}
-											<span class="ml-1 text-xs text-gray-500">{pNode.content.slice(0, 60)}</span>
+											<span class="editor-publish-picker-preview">{pNode.content.slice(0, 60)}</span>
 										{/if}
 									</button>
 								</li>
@@ -376,9 +656,9 @@
 					{/if}
 				</div>
 			{/if}
-		{/if}
-	{/snippet}
-</TraitPanel>
+		</div>
+	{/if}
+</div>
 
 <!-- Publish dialog -->
 {#if publishTarget && accessToken && pubConfig}
@@ -428,3 +708,744 @@
 		</div>
 	</div>
 {/if}
+
+<style>
+	/* ================================================================= */
+	/* Root — fills BlockShell content area                               */
+	/* ================================================================= */
+	.editor-trait {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	/* ================================================================= */
+	/* LIST VIEW                                                          */
+	/* ================================================================= */
+	.editor-list {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.editor-list-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 8px 12px;
+		flex-shrink: 0;
+		border-bottom: 1px solid #f3f4f6;
+	}
+
+	.editor-list-meta {
+		font-size: 11px;
+		color: #9ca3af;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+	}
+
+	.editor-list-count {
+		font-size: 11px;
+		color: #9ca3af;
+		background: #f3f4f6;
+		border-radius: 9999px;
+		padding: 0 6px;
+		line-height: 18px;
+	}
+
+	.editor-error {
+		margin: 8px 12px 0;
+		padding: 8px 10px;
+		border-radius: 6px;
+		border: 1px solid #fecaca;
+		background: #fef2f2;
+		font-size: 12px;
+		color: #b91c1c;
+	}
+
+	.editor-error-dismiss {
+		margin-left: 4px;
+		text-decoration: underline;
+		cursor: pointer;
+		background: none;
+		border: none;
+		color: inherit;
+		font-size: inherit;
+	}
+
+	/* ================================================================= */
+	/* Empty state                                                        */
+	/* ================================================================= */
+	.editor-empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		padding: 24px;
+		color: #9ca3af;
+		font-size: 13px;
+		text-align: center;
+		gap: 4px;
+	}
+
+	.editor-empty-icon {
+		font-size: 28px;
+	}
+
+	.editor-empty-hint {
+		font-size: 11px;
+		color: #d1d5db;
+		margin-top: 4px;
+	}
+
+	/* ================================================================= */
+	/* Items list                                                         */
+	/* ================================================================= */
+	.editor-items {
+		flex: 1;
+		overflow-y: auto;
+		padding: 6px;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		min-height: 0;
+	}
+
+	.editor-item {
+		background: white;
+		border: 1px solid #e5e7eb;
+		border-radius: 6px;
+		padding: 8px 10px;
+		cursor: pointer;
+		transition: box-shadow 0.1s, border-color 0.15s, background 0.15s;
+	}
+
+	.editor-item:hover {
+		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+		border-color: #d1d5db;
+	}
+
+	.editor-item-drop {
+		border-color: #a78bfa;
+		background: #f5f3ff;
+	}
+
+	.editor-item-incompat {
+		border-color: #f87171;
+		background: #fef2f2;
+	}
+
+	.editor-item-processing {
+		border-color: #fbbf24;
+		background: #fffbeb;
+	}
+
+	.editor-item-feedback {
+		text-align: center;
+		padding: 4px 0;
+	}
+
+	.editor-item-feedback-reason {
+		font-size: 12px;
+		color: #dc2626;
+		font-weight: 500;
+	}
+
+	.editor-item-feedback-suggestion {
+		font-size: 11px;
+		color: #f87171;
+		margin-top: 2px;
+	}
+
+	.editor-item-feedback-ok {
+		font-size: 12px;
+		color: #7c3aed;
+		font-weight: 500;
+	}
+
+	.editor-item-main {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+	}
+
+	.editor-item-source-indicator {
+		flex-shrink: 0;
+		width: 3px;
+		min-height: 24px;
+		border-radius: 2px;
+		background: #a78bfa;
+		align-self: stretch;
+	}
+
+	.editor-item-text {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.editor-item-title {
+		font-size: 13px;
+		font-weight: 500;
+		color: #1f2937;
+		line-height: 1.3;
+		word-break: break-word;
+	}
+
+	.editor-item-processing-label {
+		margin-left: 4px;
+		font-size: 11px;
+		color: #d97706;
+		font-weight: 400;
+	}
+
+	.editor-item-preview {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		font-size: 12px;
+		color: #6b7280;
+		line-height: 1.3;
+	}
+
+	.editor-item-result {
+		font-size: 11px;
+	}
+
+	.editor-item-result-ok {
+		color: #059669;
+	}
+
+	.editor-item-result-err {
+		color: #dc2626;
+	}
+
+	.editor-item-meta {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		gap: 2px;
+		flex-shrink: 0;
+	}
+
+	.editor-item-source-count {
+		font-size: 10px;
+		color: #7c3aed;
+	}
+
+	.editor-item-time {
+		font-size: 10px;
+		color: #9ca3af;
+	}
+
+	.editor-item-actions {
+		display: flex;
+		gap: 4px;
+		margin-top: 4px;
+		justify-content: flex-end;
+		opacity: 0;
+		transition: opacity 0.15s;
+	}
+
+	.editor-item:hover .editor-item-actions {
+		opacity: 1;
+	}
+
+	.editor-item-action {
+		font-size: 11px;
+		padding: 2px 6px;
+		border-radius: 4px;
+		border: none;
+		background: transparent;
+		color: #6b7280;
+		cursor: pointer;
+		text-decoration: none;
+	}
+
+	.editor-item-action:hover {
+		background: #f3f4f6;
+		color: #374151;
+	}
+
+	.editor-item-action-danger {
+		color: #ef4444;
+	}
+
+	.editor-item-action-danger:hover {
+		background: #fef2f2;
+		color: #dc2626;
+	}
+
+	/* ================================================================= */
+	/* Actions bar (create, publish)                                      */
+	/* ================================================================= */
+	.editor-actions {
+		display: flex;
+		gap: 6px;
+		padding: 8px;
+		flex-shrink: 0;
+		border-top: 1px solid #f3f4f6;
+		flex-wrap: wrap;
+	}
+
+	.editor-new-btn {
+		padding: 6px 10px;
+		border: none;
+		background: transparent;
+		font-size: 12px;
+		color: #6b7280;
+		cursor: pointer;
+		border-radius: 6px;
+		transition: background 0.1s, color 0.1s;
+	}
+
+	.editor-new-btn:hover {
+		background: #f3f4f6;
+		color: #374151;
+	}
+
+	.editor-publish-btn {
+		padding: 6px 10px;
+		border: none;
+		border-radius: 6px;
+		font-size: 12px;
+		font-weight: 500;
+		background: #059669;
+		color: white;
+		cursor: pointer;
+		transition: background 0.1s;
+	}
+
+	.editor-publish-btn:hover {
+		background: #047857;
+	}
+
+	.editor-create-form {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		flex: 1;
+	}
+
+	.editor-create-input {
+		width: 100%;
+		padding: 6px 8px;
+		border: 1px solid #e5e7eb;
+		border-radius: 4px;
+		font-size: 12px;
+		outline: none;
+		box-sizing: border-box;
+	}
+
+	.editor-create-input:focus {
+		border-color: #60a5fa;
+	}
+
+	.editor-create-buttons {
+		display: flex;
+		gap: 4px;
+	}
+
+	.editor-create-btn {
+		padding: 4px 10px;
+		border: none;
+		border-radius: 4px;
+		font-size: 11px;
+		font-weight: 500;
+		background: #2563eb;
+		color: white;
+		cursor: pointer;
+	}
+
+	.editor-create-btn:hover {
+		background: #1d4ed8;
+	}
+
+	.editor-create-btn:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+
+	.editor-cancel-btn {
+		padding: 4px 10px;
+		border: none;
+		border-radius: 4px;
+		font-size: 11px;
+		background: transparent;
+		color: #6b7280;
+		cursor: pointer;
+	}
+
+	.editor-cancel-btn:hover {
+		background: #f3f4f6;
+	}
+
+	/* ================================================================= */
+	/* Publish picker                                                     */
+	/* ================================================================= */
+	.editor-publish-picker {
+		margin: 0 8px 8px;
+		padding: 10px;
+		border-radius: 6px;
+		border: 1px solid #a7f3d0;
+		background: #ecfdf5;
+	}
+
+	.editor-publish-picker-title {
+		font-size: 12px;
+		font-weight: 600;
+		color: #065f46;
+		margin-bottom: 6px;
+	}
+
+	.editor-publish-picker-empty {
+		font-size: 12px;
+		color: #059669;
+	}
+
+	.editor-publish-picker-list {
+		max-height: 160px;
+		overflow-y: auto;
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.editor-publish-picker-item {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		width: 100%;
+		padding: 6px 8px;
+		border: none;
+		border-radius: 4px;
+		background: transparent;
+		text-align: left;
+		font-size: 12px;
+		cursor: pointer;
+	}
+
+	.editor-publish-picker-item:hover {
+		background: #d1fae5;
+	}
+
+	.editor-publish-picker-name {
+		font-weight: 500;
+		color: #1f2937;
+	}
+
+	.editor-publish-picker-preview {
+		font-size: 11px;
+		color: #6b7280;
+	}
+
+	/* ================================================================= */
+	/* EDITOR VIEW                                                        */
+	/* ================================================================= */
+	.editor-view {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.editor-toolbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 6px 10px;
+		flex-shrink: 0;
+		border-bottom: 1px solid #f3f4f6;
+		gap: 8px;
+	}
+
+	.editor-back-btn {
+		border: none;
+		background: transparent;
+		font-size: 12px;
+		color: #6b7280;
+		cursor: pointer;
+		padding: 4px 6px;
+		border-radius: 4px;
+		flex-shrink: 0;
+	}
+
+	.editor-back-btn:hover {
+		background: #f3f4f6;
+		color: #374151;
+	}
+
+	.editor-toolbar-right {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.editor-sources-btn {
+		border: 1px solid #e5e7eb;
+		background: transparent;
+		font-size: 11px;
+		color: #7c3aed;
+		cursor: pointer;
+		padding: 3px 8px;
+		border-radius: 4px;
+		transition: background 0.1s;
+	}
+
+	.editor-sources-btn:hover {
+		background: #f5f3ff;
+	}
+
+	.editor-sources-btn-active {
+		background: #ede9fe;
+		border-color: #c4b5fd;
+	}
+
+	.editor-save-btn {
+		border: none;
+		background: #2563eb;
+		color: white;
+		font-size: 11px;
+		font-weight: 500;
+		cursor: pointer;
+		padding: 4px 10px;
+		border-radius: 4px;
+		transition: background 0.1s;
+	}
+
+	.editor-save-btn:hover {
+		background: #1d4ed8;
+	}
+
+	.editor-save-btn:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+
+	.editor-save-msg {
+		font-size: 11px;
+	}
+
+	.editor-save-ok {
+		color: #059669;
+	}
+
+	.editor-save-error {
+		color: #dc2626;
+	}
+
+	.editor-body {
+		display: flex;
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.editor-content-area {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-width: 0;
+		padding: 10px;
+		overflow: hidden;
+	}
+
+	.editor-title-input {
+		width: 100%;
+		padding: 6px 4px;
+		border: none;
+		border-bottom: 1px solid #e5e7eb;
+		font-size: 16px;
+		font-weight: 600;
+		color: #1f2937;
+		outline: none;
+		box-sizing: border-box;
+		flex-shrink: 0;
+		background: transparent;
+	}
+
+	.editor-title-input:focus {
+		border-bottom-color: #60a5fa;
+	}
+
+	.editor-textarea {
+		flex: 1;
+		width: 100%;
+		padding: 10px 4px;
+		border: none;
+		font-size: 14px;
+		font-family: inherit;
+		color: #374151;
+		line-height: 1.6;
+		outline: none;
+		resize: none;
+		background: transparent;
+		box-sizing: border-box;
+		min-height: 0;
+	}
+
+	/* ================================================================= */
+	/* Sources panel (sidebar in editor view)                             */
+	/* ================================================================= */
+	.editor-sources-panel {
+		width: 180px;
+		flex-shrink: 0;
+		border-left: 1px solid #f3f4f6;
+		padding: 10px;
+		overflow-y: auto;
+		background: #fafafa;
+	}
+
+	.editor-sources-title {
+		font-size: 11px;
+		font-weight: 600;
+		color: #6b7280;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		margin-bottom: 8px;
+	}
+
+	.editor-sources-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	.editor-source-item {
+		display: flex;
+		align-items: flex-start;
+		gap: 6px;
+		padding: 4px;
+		border-radius: 4px;
+		transition: background 0.1s;
+	}
+
+	.editor-source-item:hover {
+		background: #f3f4f6;
+	}
+
+	.editor-source-icon {
+		font-size: 14px;
+		flex-shrink: 0;
+		line-height: 1;
+		margin-top: 1px;
+	}
+
+	.editor-source-info {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		min-width: 0;
+	}
+
+	.editor-source-name {
+		font-size: 12px;
+		font-weight: 500;
+		color: #374151;
+		word-break: break-word;
+		line-height: 1.3;
+	}
+
+	.editor-source-context {
+		font-size: 10px;
+		color: #9ca3af;
+	}
+
+	/* ================================================================= */
+	/* Responsive within bounded container                                */
+	/* ================================================================= */
+
+	/* Small panels: hide sources sidebar, tighter spacing */
+	@container (max-width: 400px) {
+		.editor-sources-panel {
+			display: none;
+		}
+
+		.editor-items {
+			padding: 4px;
+		}
+
+		.editor-item {
+			padding: 6px 8px;
+		}
+
+		.editor-item-title {
+			font-size: 12px;
+		}
+
+		.editor-toolbar {
+			padding: 4px 8px;
+		}
+
+		.editor-content-area {
+			padding: 6px;
+		}
+
+		.editor-title-input {
+			font-size: 14px;
+		}
+
+		.editor-textarea {
+			font-size: 13px;
+		}
+	}
+
+	/* Medium panels: narrower sources sidebar */
+	@container (max-width: 600px) {
+		.editor-sources-panel {
+			width: 140px;
+			padding: 8px;
+		}
+
+		.editor-list-header {
+			padding: 6px 10px;
+		}
+	}
+
+	/* Mobile viewport fallback */
+	@media (max-width: 480px) {
+		.editor-sources-panel {
+			display: none;
+		}
+
+		.editor-items {
+			padding: 4px;
+		}
+
+		.editor-item {
+			padding: 6px 8px;
+		}
+
+		.editor-content-area {
+			padding: 6px;
+		}
+
+		.editor-title-input {
+			font-size: 14px;
+		}
+
+		.editor-textarea {
+			font-size: 13px;
+			line-height: 1.5;
+		}
+
+		.editor-actions {
+			padding: 6px;
+		}
+	}
+</style>
diff --git a/tasks.md b/tasks.md
index 5106647..454f98a 100644
--- a/tasks.md
+++ b/tasks.md
@@ -230,8 +230,7 @@ Ref: `docs/features/universell_overfoering.md`, `docs/retninger/arbeidsflaten.md
 - [x] 20.5 Panelrework — Chat: gjør ChatTrait til fullverdig BlockShell-panel med BlockReceiver, fullskjerm-toggle, og responsivt design innenfor begrenset container.
 - [x] 20.6 Panelrework — Kanban: gjør KanbanTrait til BlockShell-panel med drag-and-drop aksept fra andre paneler, fullskjerm, responsivt.
 - [x] 20.7 Panelrework — Kalender: gjør CalendarTrait til BlockShell-panel med drop-aksept for scheduling, fullskjerm, responsivt.
-- [~] 20.8 Panelrework — Editor/Artikkelverktøy: gjør artikkelverktøy til BlockShell-panel med source_material mottak fra andre paneler. Ref: `docs/features/artikkelverktoy.md`.
-  > Påbegynt: 2026-03-18T08:41
+- [x] 20.8 Panelrework — Editor/Artikkelverktøy: gjør artikkelverktøy til BlockShell-panel med source_material mottak fra andre paneler. Ref: `docs/features/artikkelverktoy.md`.
 - [ ] 20.9 Panelrework — Studio: gjør StudioTrait til BlockShell-panel med drop-aksept for lydfiler, fullskjerm, responsivt.
 
 ## Fase 21: CLI-verktøy — Unix-filosofi