Merge branch 'dev'

lib/extract-artifact.ts

@@ -0,0 +1,84 @@
+/**
+ * extractArtifactToCanvas — Pull a generated artifact out of a generator shape
+ * and place it as a standalone canvas object (folk-image, folk-embed, or folk-bookmark).
+ */
+
+import type { FolkShape } from "./folk-shape";
+
+export type ArtifactMediaType = "image" | "video" | "pdf" | "download";
+
+interface ExtractOptions {
+	url: string;
+	mediaType: ArtifactMediaType;
+	title?: string;
+	sourceShape: FolkShape;
+}
+
+interface CanvasApi {
+	newShape: (tagName: string, props?: Record<string, any>, atPosition?: { x: number; y: number }) => any;
+	findFreePosition: (w: number, h: number, px?: number, py?: number, exclude?: any) => { x: number; y: number };
+	SHAPE_DEFAULTS: Record<string, { width: number; height: number }>;
+}
+
+const TAG_MAP: Record<ArtifactMediaType, string> = {
+	image: "folk-image",
+	video: "folk-embed",
+	pdf: "folk-embed",
+	download: "folk-bookmark",
+};
+
+export function extractArtifactToCanvas({ url, mediaType, title, sourceShape }: ExtractOptions): boolean {
+	const api = (window as any).__canvasApi as CanvasApi | undefined;
+	if (!api) {
+		console.warn("[extract-artifact] Canvas API not available");
+		return false;
+	}
+
+	const tagName = TAG_MAP[mediaType];
+	const defaults = api.SHAPE_DEFAULTS[tagName] || { width: 400, height: 300 };
+
+	// Position to the right of the source shape
+	const preferX = sourceShape.x + sourceShape.width + 40 + defaults.width / 2;
+	const preferY = sourceShape.y + sourceShape.height / 2;
+	const pos = api.findFreePosition(defaults.width, defaults.height, preferX, preferY, sourceShape);
+
+	const props: Record<string, any> = {};
+	if (mediaType === "image") {
+		props.src = url;
+		if (title) props.alt = title;
+	} else if (mediaType === "video" || mediaType === "pdf") {
+		props.url = url;
+	} else {
+		props.url = url;
+		if (title) props.title = title;
+	}
+
+	api.newShape(tagName, props, { x: pos.x + defaults.width / 2, y: pos.y + defaults.height / 2 });
+	return true;
+}
+
+/** CSS for the extract button — inject into each component's stylesheet */
+export const extractBtnCss = `
+	.extract-btn {
+		position: absolute;
+		top: 6px;
+		right: 6px;
+		padding: 3px 8px;
+		background: rgba(0, 0, 0, 0.6);
+		color: white;
+		border: none;
+		border-radius: 12px;
+		font-size: 12px;
+		cursor: pointer;
+		opacity: 0;
+		transition: opacity 0.15s;
+		z-index: 1;
+		line-height: 1;
+	}
+	.image-item:hover .extract-btn,
+	.video-item:hover .extract-btn,
+	.section:hover .extract-btn,
+	.render-preview:hover .extract-btn,
+	.preview-area:hover > .extract-btn { opacity: 1; }
+	.extract-btn:hover { background: rgba(0, 0, 0, 0.8); }
+`;

lib/folk-blender.ts

@@ -1,5 +1,6 @@
 import { FolkShape } from "./folk-shape";
 import { css, html } from "./tags";
+import { extractArtifactToCanvas, extractBtnCss } from "./extract-artifact";
 
 const styles = css`
 	:host {
@@ -202,6 +203,8 @@ const styles = css`
 	.render-preview:hover .zoom-reset { opacity: 1; }
 	.render-preview .zoom-reset:hover { background: var(--rs-surface-hover, #f1f5f9); }
 
+	${extractBtnCss}
+
 	.code-area {
 		flex: 1;
 		overflow: auto;
@@ -638,7 +641,7 @@ export class FolkBlender extends FolkShape {
 			this.#viewCleanup = null;
 
 			if (this.#renderUrl) {
-				this.#previewArea.innerHTML = `<img src="${this.#escapeHtml(this.#renderUrl)}" alt="3D Render" /><button class="zoom-reset" title="Reset zoom">Reset</button><span class="zoom-hint">Scroll to zoom · drag to pan</span>`;
+				this.#previewArea.innerHTML = `<button class="extract-btn" data-url="${this.#escapeHtml(this.#renderUrl)}" data-title="${this.#escapeHtml(this.#prompt || "3D Render")}" title="Extract to canvas">↗</button><img src="${this.#escapeHtml(this.#renderUrl)}" alt="3D Render" /><button class="zoom-reset" title="Reset zoom">Reset</button><span class="zoom-hint">Scroll to zoom · drag to pan</span>`;
 				const img = this.#previewArea.querySelector("img") as HTMLImageElement;
 				const resetBtn = this.#previewArea.querySelector(".zoom-reset") as HTMLButtonElement;
 
@@ -668,6 +671,13 @@ export class FolkBlender extends FolkShape {
 					e.stopPropagation();
 					fitImage();
 				});
+
+				// Extract button
+				const extractBtn = this.#previewArea.querySelector(".extract-btn") as HTMLElement;
+				extractBtn?.addEventListener("click", (e) => {
+					e.stopPropagation();
+					extractArtifactToCanvas({ url: extractBtn.dataset.url!, mediaType: "image", title: extractBtn.dataset.title, sourceShape: this });
+				});
 			} else {
 				this.#previewArea.innerHTML = '<div class="placeholder"><span class="placeholder-icon">✅</span><span>Script generated (see Script tab)</span></div>';
 			}

lib/folk-freecad.ts

@@ -1,5 +1,6 @@
 import { FolkShape } from "./folk-shape";
 import { css, html } from "./tags";
+import { extractArtifactToCanvas, extractBtnCss } from "./extract-artifact";
 
 const styles = css`
 	:host {
@@ -160,6 +161,8 @@ const styles = css`
 		background: #0e7490;
 	}
 
+	${extractBtnCss}
+
 	.placeholder {
 		flex: 1;
 		display: flex;
@@ -311,6 +314,14 @@ export class FolkFreeCAD extends FolkShape {
 			this.#renderResult();
 		}
 
+		// Extract button — delegated click
+		this.#previewArea?.addEventListener("click", (e) => {
+			const btn = (e.target as HTMLElement).closest(".extract-btn") as HTMLElement;
+			if (!btn) return;
+			e.stopPropagation();
+			extractArtifactToCanvas({ url: btn.dataset.url!, mediaType: "image", title: btn.dataset.title, sourceShape: this });
+		});
+
 		// Health check — only disable if endpoint unreachable (sidecar starts on demand)
 		fetch("/api/freecad/health").then(r => r.json()).then((h: any) => {
 			if (this.#generateBtn && h.available === false && h.status && !h.status.includes("on demand")) {
@@ -366,7 +377,7 @@ export class FolkFreeCAD extends FolkShape {
 	#renderResult() {
 		if (this.#previewArea) {
 			if (this.#previewUrl) {
-				this.#previewArea.innerHTML = `<img src="${this.#escapeHtml(this.#previewUrl)}" alt="CAD Preview" />`;
+				this.#previewArea.innerHTML = `<button class="extract-btn" data-url="${this.#escapeHtml(this.#previewUrl)}" data-title="${this.#escapeHtml(this.#prompt || "CAD Preview")}" title="Extract to canvas">↗</button><img src="${this.#escapeHtml(this.#previewUrl)}" alt="CAD Preview" />`;
 			} else {
 				this.#previewArea.innerHTML = '<div class="placeholder"><span class="placeholder-icon">✅</span><span>Model generated! Download files below.</span></div>';
 			}

lib/folk-image-gen.ts

@@ -1,5 +1,6 @@
 import { FolkShape } from "./folk-shape";
 import { css, html } from "./tags";
+import { extractArtifactToCanvas, extractBtnCss } from "./extract-artifact";
 
 const styles = css`
 	:host {
@@ -141,6 +142,8 @@ const styles = css`
 		position: relative;
 	}
 
+	${extractBtnCss}
+
 	.image-prompt {
 		font-size: 11px;
 		color: #64748b;
@@ -316,6 +319,14 @@ export class FolkImageGen extends FolkShape {
 
 		// Prevent canvas drag when interacting with content
 		this.#imageArea?.addEventListener("pointerdown", (e) => e.stopPropagation());
+
+		// Extract button — delegated click
+		this.#imageArea?.addEventListener("click", (e) => {
+			const btn = (e.target as HTMLElement).closest(".extract-btn") as HTMLElement;
+			if (!btn) return;
+			e.stopPropagation();
+			extractArtifactToCanvas({ url: btn.dataset.url!, mediaType: "image", title: btn.dataset.title, sourceShape: this });
+		});
 		this.#promptInput?.addEventListener("pointerdown", (e) => e.stopPropagation());
 
 		// Close button
@@ -422,6 +433,7 @@ export class FolkImageGen extends FolkShape {
 			.map(
 				(img) => `
 			<div class="image-item">
+				<button class="extract-btn" data-url="${this.#escapeHtml(img.url)}" data-title="${this.#escapeHtml(img.prompt)}" title="Extract to canvas">↗</button>
 				<img class="generated-image" src="${this.#escapeHtml(img.url)}" alt="${this.#escapeHtml(img.prompt)}" loading="lazy" />
 				<div class="image-prompt">${this.#escapeHtml(img.prompt)}</div>
 			</div>

lib/folk-kicad.ts

@@ -1,5 +1,6 @@
 import { FolkShape } from "./folk-shape";
 import { css, html } from "./tags";
+import { extractArtifactToCanvas, extractBtnCss } from "./extract-artifact";
 
 const styles = css`
 	:host {
@@ -218,6 +219,8 @@ const styles = css`
 		background: #047857;
 	}
 
+	${extractBtnCss}
+
 	.placeholder {
 		flex: 1;
 		display: flex;
@@ -397,6 +400,15 @@ export class FolkKiCAD extends FolkShape {
 			this.#showExports();
 		}
 
+		// Extract button — delegated click
+		this.#previewArea?.addEventListener("click", (e) => {
+			const btn = (e.target as HTMLElement).closest(".extract-btn") as HTMLElement;
+			if (!btn) return;
+			e.stopPropagation();
+			const mediaType = (btn.dataset.media || "image") as "image" | "pdf";
+			extractArtifactToCanvas({ url: btn.dataset.url!, mediaType, title: btn.dataset.title, sourceShape: this });
+		});
+
 		// Health check — only disable if endpoint unreachable (sidecar starts on demand)
 		fetch("/api/kicad/health").then(r => r.json()).then((h: any) => {
 			if (this.#generateBtn && h.available === false && h.status && !h.status.includes("on demand")) {
@@ -465,14 +477,14 @@ export class FolkKiCAD extends FolkShape {
 		switch (this.#activeTab) {
 			case "schematic":
 				if (this.#schematicSvg) {
-					this.#previewArea.innerHTML = `<img src="${this.#escapeHtml(this.#schematicSvg)}" alt="Schematic" />`;
+					this.#previewArea.innerHTML = `<button class="extract-btn" data-url="${this.#escapeHtml(this.#schematicSvg)}" data-title="Schematic" data-media="image" title="Extract to canvas">↗</button><img src="${this.#escapeHtml(this.#schematicSvg)}" alt="Schematic" />`;
 				} else {
 					this.#previewArea.innerHTML = '<div class="placeholder"><span class="placeholder-icon">📋</span><span>Schematic will appear here</span></div>';
 				}
 				break;
 			case "board":
 				if (this.#boardSvg) {
-					this.#previewArea.innerHTML = `<img src="${this.#escapeHtml(this.#boardSvg)}" alt="Board Layout" />`;
+					this.#previewArea.innerHTML = `<button class="extract-btn" data-url="${this.#escapeHtml(this.#boardSvg)}" data-title="Board Layout" data-media="image" title="Extract to canvas">↗</button><img src="${this.#escapeHtml(this.#boardSvg)}" alt="Board Layout" />`;
 				} else {
 					this.#previewArea.innerHTML = '<div class="placeholder"><span class="placeholder-icon">📟</span><span>Board layout will appear here</span></div>';
 				}

lib/folk-video-gen.ts

@@ -1,5 +1,6 @@
 import { FolkShape } from "./folk-shape";
 import { css, html } from "./tags";
+import { extractArtifactToCanvas, extractBtnCss } from "./extract-artifact";
 
 const styles = css`
 	:host {
@@ -234,6 +235,8 @@ const styles = css`
 		position: relative;
 	}
 
+	${extractBtnCss}
+
 	.video-prompt {
 		font-size: 11px;
 		color: #64748b;
@@ -469,6 +472,14 @@ export class FolkVideoGen extends FolkShape {
 		// Prevent drag on inputs
 		this.#promptInput?.addEventListener("pointerdown", (e) => e.stopPropagation());
 
+		// Extract button — delegated click
+		this.#videoArea?.addEventListener("click", (e) => {
+			const btn = (e.target as HTMLElement).closest(".extract-btn") as HTMLElement;
+			if (!btn) return;
+			e.stopPropagation();
+			extractArtifactToCanvas({ url: btn.dataset.url!, mediaType: "video", title: btn.dataset.title, sourceShape: this });
+		});
+
 		// Model selector
 		this.#modelSelect?.addEventListener("change", (e) => {
 			e.stopPropagation();
@@ -690,6 +701,7 @@ export class FolkVideoGen extends FolkShape {
 			.map(
 				(vid) => `
 			<div class="video-item">
+				<button class="extract-btn" data-url="${this.#escapeHtml(vid.url)}" data-title="${this.#escapeHtml(vid.prompt)}" title="Extract to canvas">↗</button>
 				<video class="generated-video" src="${this.#escapeHtml(vid.url)}" controls autoplay loop muted playsinline></video>
 				<div class="video-prompt">${this.#escapeHtml(vid.prompt)}</div>
 			</div>

lib/folk-zine-gen.ts

@@ -1,5 +1,6 @@
 import { FolkShape } from "./folk-shape";
 import { css, html } from "./tags";
+import { extractArtifactToCanvas, extractBtnCss } from "./extract-artifact";
 
 const styles = css`
 	:host {
@@ -193,6 +194,8 @@ const styles = css`
 		border-color: #f59e0b;
 	}
 
+	${extractBtnCss}
+
 	.section-header {
 		display: flex;
 		align-items: center;
@@ -694,8 +697,9 @@ export class FolkZineGen extends FolkShape {
 					<textarea class="section-text ${textClass}" data-section-id="${section.id}">${this.#escapeHtml(section.content || "")}</textarea>
 				</div>`;
 			} else if (section.type === "image") {
-				sectionsHtml += `<div class="section-body">`;
+				sectionsHtml += `<div class="section-body" style="position:relative">`;
 				if (section.imageUrl) {
+					sectionsHtml += `<button class="extract-btn" data-url="${this.#escapeHtml(section.imageUrl)}" data-title="${this.#escapeHtml(section.imagePrompt || "")}" title="Extract to canvas">↗</button>`;
 					sectionsHtml += `<img class="section-image" src="${this.#escapeHtml(section.imageUrl)}" alt="${this.#escapeHtml(section.imagePrompt || "")}" loading="lazy" />`;
 				} else {
 					sectionsHtml += `<div class="section-image-placeholder">${isRegenerating ? '<div class="spinner" style="width:24px;height:24px;"></div>' : "No image yet — click ↻ to generate"}</div>`;
@@ -821,6 +825,14 @@ export class FolkZineGen extends FolkShape {
 			e.stopPropagation();
 			this.#downloadZine();
 		});
+
+		// Extract button — delegated click on image sections
+		this.#contentEl.querySelector(".page-content")?.addEventListener("click", (e) => {
+			const btn = (e.target as HTMLElement).closest(".extract-btn") as HTMLElement;
+			if (!btn) return;
+			e.stopPropagation();
+			extractArtifactToCanvas({ url: btn.dataset.url!, mediaType: "image", title: btn.dataset.title, sourceShape: this });
+		});
 	}
 
 	async #regenerateSection(sectionId: string, feedback: string) {