cozyclay 3.0.2 → 3.1.0

package/src/panels/details.css

@@ -1032,14 +1032,25 @@
 	background: var(--select, #e8a33d);
 }
 
+/* The menu is portaled to <body> (ProjectPanel.jsx); the layer that carries
+   the wrap classes there has no box of its own. Surface and layer are the
+   shared popover tokens (themes.css). */
+.v2-project-menu.project-menu-layer {
+	display: contents;
+}
+
 .v2-project-menu.v2-project-menu .project-menu {
+	position: fixed;
+	z-index: var(--z-popover, 90);
 	box-sizing: border-box;
 	min-width: var(--details-menu-width, 200px);
 	padding: var(--details-gap, 4px);
-	border: var(--details-border-width, 1px) solid var(--row-divider, #1d1d20);
-	border-radius: var(--r-2, 6px);
-	background: var(--surface-panel, #151517);
-	box-shadow: none;
+	border: var(--details-border-width, 1px) solid var(--popover-border, var(--row-divider, #1d1d20));
+	border-radius: var(--popover-radius, 6px);
+	background: var(--popover-surface, var(--surface-raised, #1e1e21));
+	-webkit-backdrop-filter: var(--popover-blur, none);
+	backdrop-filter: var(--popover-blur, none);
+	box-shadow: var(--popover-shadow, 0 8px 24px rgba(0, 0, 0, .45));
 }
 
 .v2-project-menu.v2-project-menu .project-menu button {

package/src/popover.js

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from "react";
+
+// Shell popovers (the project menu, dropdowns, the Outliner context menu) are
+// exclusive: opening one announces itself and every other open one closes, so
+// two menus never stack over each other. Their surface and layer are the
+// --popover-* / --z-popover tokens in src/styles/themes.css.
+const POPOVER_OPEN_EVENT = "cozyclay:popover-open";
+
+/**
+ * Join the exclusive popover group while `open` is truthy. A new truthy
+ * `open` value (a context menu re-opened at another row) announces again.
+ * With `insideRefs`, a mousedown outside every ref also closes the popover.
+ */
+export function usePopover(open, close, insideRefs = null) {
+	const live = useRef({ close, insideRefs });
+	useEffect(() => {
+		live.current = { close, insideRefs };
+	});
+	useEffect(() => {
+		if (!open) return undefined;
+		const token = {};
+		window.dispatchEvent(new CustomEvent(POPOVER_OPEN_EVENT, { detail: token }));
+		const onOtherOpen = (event) => {
+			if (event.detail !== token) live.current.close();
+		};
+		const onDocMouseDown = (event) => {
+			const refs = live.current.insideRefs;
+			if (refs && !refs.some((ref) => ref.current?.contains(event.target))) live.current.close();
+		};
+		window.addEventListener(POPOVER_OPEN_EVENT, onOtherOpen);
+		document.addEventListener("mousedown", onDocMouseDown);
+		return () => {
+			window.removeEventListener(POPOVER_OPEN_EVENT, onOtherOpen);
+			document.removeEventListener("mousedown", onDocMouseDown);
+		};
+	}, [open]);
+}

package/src/posestudio.jsx

@@ -423,13 +423,10 @@ export function IkHandles({ chains, fkJoints, ikState, enabled, focus, onFocus,
 			// not-yet-focused sphere just took focus (nothing to bake). An
 			// empty-canvas click releases focus too.
 			if (!d.moved) {
-				if (d.kind === "empty") {
-					if (focusIdRef.current) focusRef.current?.(null);
-					return;
-				}
-				if (d.wasFocused && !d.axisDir) {
-					focusRef.current?.(null); // toggle off
-				}
+				// (An empty press is always wasFocused: it only begins while focused.)
+				// A gizmo volume can win the raycast over the sphere centre, so a
+				// no-move press on the centre (d.centerClick) toggles off too.
+				if (d.wasFocused && (!d.axisDir || d.centerClick)) focusRef.current?.(null); // toggle off
 				// axis-arrow clicks and fresh-sphere clicks: nothing to bake
 				return;
 			}
@@ -842,7 +839,7 @@ const CLICK_PX = 4;
 		if (kind === "empty") {
 			// An empty-canvas press: no drag, just a click candidate that
 			// releases focus on pointerup (see onUp).
-			dragRef.current = { kind: "empty", trackId: "empty", downXY, moved: false };
+			dragRef.current = { kind: "empty", trackId: "empty", downXY, moved: false, wasFocused: true };
 			window.addEventListener("pointermove", handlersRef.current.onMove);
 			window.addEventListener("pointerup", handlersRef.current.onUp);
 			window.addEventListener("pointercancel", handlersRef.current.onUp);
@@ -860,6 +857,7 @@ const CLICK_PX = 4;
 		}
 		raycaster.setFromCamera(ndc, camera);
 		let plane;
+		const rect = gl.domElement.getBoundingClientRect(), c = origin.clone().project(camera);
 		const ringDrag = !!axisDir && (kind === "fk" || kind === "swing");
 		if (ringDrag) {
 			// A ring turns about its axis: the pointer is read on the ring's own plane.
@@ -892,6 +890,8 @@ const CLICK_PX = 4;
 			// a no-move click toggles focus OFF only then; a click on a fresh
 			// (unfocused) handle must keep the focus it just took.
 			wasFocused: focusIdRef.current === track.id,
+			// Press landed within CLICK_PX of the sphere's projected centre.
+			centerClick: Math.hypot(downXY[0] - (rect.left + (c.x + 1) / 2 * rect.width), downXY[1] - (rect.top + (1 - c.y) / 2 * rect.height)) <= CLICK_PX,
 		};
 		if (kind === "fk" || kind === "swing" || kind === "body") {
 			// Swing/translate start state, frozen at drag start so moves stay
@@ -944,8 +944,7 @@ const CLICK_PX = 4;
 				handleRefs.current[p.track.id]?.userData.ikExposed !== false
 			);
 			if (focused && !selectionOnly) picks = picks.filter((p) => p.track.id === focused);
-		else picks = picks.filter((p) => !p.axisDir); // spheres only
-			if (selectionOnly) picks = picks.filter((p) => !p.axisDir);
+			else picks = picks.filter((p) => !p.axisDir); // spheres only
 			if (!picks.length) {
 				if (focused) beginDrag("empty", { id: "empty" }, null, null, downXY);
 				return;
@@ -985,10 +984,16 @@ const CLICK_PX = 4;
 			}
 			setHoverAxis((current) => (current === axis ? current : axis));
 		};
+		// Esc releases the focused handle (same path as the toggle-off click).
+		const onKey = (ev) => {
+			if (ev.key === "Escape" && focusIdRef.current && !/^(INPUT|TEXTAREA|SELECT)$/.test(ev.target?.tagName)) focusRef.current?.(null);
+		};
 		raycaster.layers.enable(POSER_LAYER);
 		el.addEventListener("pointerdown", onDown, true);
 		el.addEventListener("pointermove", onHover);
+		window.addEventListener("keydown", onKey);
 		return () => {
+			window.removeEventListener("keydown", onKey);
 			el.removeEventListener("pointerdown", onDown, true);
 			el.removeEventListener("pointermove", onHover);
 			raycaster.layers.disable(POSER_LAYER);

package/src/project-browser-art.jsx

@@ -0,0 +1,19 @@
+// Start-screen art: the brand mark and the template thumbnail that fills both
+// the card and the larger preview. Thumbnails are real studio renders, one per
+// theme, made by tools/render-start-thumbs.mjs into public/thumbs/. A template
+// without a render (a starter added since the last run) keeps the plain tile
+// its wrapper already paints.
+import { useState } from "react";
+import { useUiTheme } from "./theme.js";
+
+export function TemplateThumb({ id }) {
+	const theme = useUiTheme();
+	const src = `/thumbs/${id}-${theme}.webp`;
+	const [failed, setFailed] = useState(null);
+	if (failed === src) return null;
+	return <img className="v2-start-art" src={src} alt="" aria-hidden="true" draggable="false" decoding="async" onError={() => setFailed(src)} />;
+}
+
+export function BrandMark() {
+	return <img className="v2-start-brand-mark" src="/icons/icon-192.png" alt="" aria-hidden="true" draggable="false" width="26" height="26" />;
+}

package/src/project-browser.css

@@ -102,11 +102,17 @@
 }
 
 .v2-start-screen .v2-start-brand-mark {
+	display: block;
+	box-sizing: border-box;
 	width: var(--start-brand-mark, 26px);
 	height: var(--start-brand-mark, 26px);
 	flex: 0 0 var(--start-brand-mark, 26px);
-	border-radius: var(--r-2, 6px);
-	background: var(--select, #e8a33d);
+	padding: 1px;
+	border-radius: 7px;
+	/* The frog keeps its own blue on its own white tile in both themes. */
+	background: #fff;
+	box-shadow: 0 0 0 var(--start-border-width, 1px) color-mix(in srgb, var(--text-1, #e4e4e7) 10%, transparent);
+	object-fit: contain;
 }
 
 .v2-start-screen .v2-start-nav-list {
@@ -196,30 +202,7 @@
 	color: var(--text-1, #e4e4e7);
 }
 
-.v2-start-screen .v2-start-tabs {
-	display: flex;
-	align-items: center;
-	gap: var(--start-tab-gap, 20px);
-	min-height: var(--start-tab-height, 24px);
-}
-
-.v2-start-screen .v2-start-tab {
-	height: var(--start-tab-height, 24px);
-	padding: 0 0 var(--start-tab-underline-space, 8px);
-	border: 0;
-	border-bottom: var(--start-active-width, 1.5px) solid var(--transparent, transparent);
-	background: var(--transparent, transparent);
-	color: var(--text-3, #636369);
-	white-space: nowrap;
-}
-
-.v2-start-screen .v2-start-tab:hover,
-.v2-start-screen .v2-start-tab.active {
-	border-bottom-color: var(--select, #e8a33d);
-	color: var(--text-selected, #fff);
-}
-
-/* Project mode (previs flag): a two-up segmented switch above the tabs. Each
+/* Project mode (previs flag): a two-up segmented switch above the cards. Each
    segment carries its label and the one-line promise of what the mode makes. */
 .v2-start-screen .v2-start-mode {
 	display: grid;
@@ -291,69 +274,27 @@
 }
 
 .v2-start-screen .v2-start-template-art {
-	position: relative;
+	display: block;
+	overflow: hidden;
 	width: var(--start-template-art-width, 100%);
 	aspect-ratio: 16 / 10;
-	overflow: hidden;
 	border-radius: var(--r-2, 6px);
+	outline: var(--start-border-width, 1px) solid color-mix(in srgb, var(--text-1, #e4e4e7) 9%, transparent);
+	outline-offset: -1px;
 	background: var(--surface-raised, #1e1e21);
-	box-shadow: inset 0 0 0 var(--start-border-width, 1px) var(--transparent, transparent);
-}
-
-.v2-start-screen .v2-start-template-art::before,
-.v2-start-screen .v2-start-template-art::after {
-	content: "";
-	position: absolute;
-	display: block;
-	background: var(--surface-active, #26262a);
-}
-
-.v2-start-screen .v2-start-template-art::before {
-	left: var(--start-art-block-left, 12%);
-	bottom: var(--start-art-block-bottom, 16%);
-	width: var(--start-art-block-width, 36%);
-	height: var(--start-art-block-height, 48%);
-}
-
-.v2-start-screen .v2-start-template-art::after {
-	right: var(--start-art-block-right, 12%);
-	bottom: var(--start-art-block-bottom, 16%);
-	width: var(--start-art-small-width, 20%);
-	height: var(--start-art-small-height, 24%);
-	background: var(--field, #0f0f11);
-}
-
-.v2-start-screen .v2-start-template-art.sample::before {
-	width: var(--start-sample-block-width, 54%);
-	height: var(--start-sample-block-height, 28%);
-	background: var(--primary, #7258a0);
-}
-
-.v2-start-screen .v2-start-template-art.sample::after {
-	width: var(--start-sample-small-width, 10%);
-	height: var(--start-sample-small-height, 52%);
-	background: var(--camera, #a78bfa);
 }
 
 .v2-start-screen .v2-start-template.selected .v2-start-template-art {
-	box-shadow: inset 0 0 0 var(--start-selected-width, 1.5px) var(--select, #e8a33d);
+	outline: var(--start-selected-width, 1.5px) solid var(--select, #e8a33d);
+	outline-offset: -1.5px;
 }
 
 .v2-start-screen .v2-start-template:hover .v2-start-template-art {
-	box-shadow: inset 0 0 0 var(--start-hover-width, 1px) var(--text-3, #636369);
+	outline-color: var(--text-3, #636369);
 }
 
 .v2-start-screen .v2-start-template.selected:hover .v2-start-template-art {
-	box-shadow: inset 0 0 0 var(--start-selected-width, 1.5px) var(--select, #e8a33d);
-}
-
-.v2-start-screen .v2-start-template-code {
-	position: absolute;
-	left: var(--sp-1, 8px);
-	bottom: var(--sp-1, 8px);
-	color: var(--text-off, #4f4f55);
-	font-family: var(--mono, 'JetBrains Mono'), ui-monospace, monospace;
-	font-size: var(--start-code-size, 10px);
+	outline-color: var(--select, #e8a33d);
 }
 
 .v2-start-screen .v2-start-template-copy {
@@ -382,6 +323,43 @@
 	white-space: nowrap;
 }
 
+/* Open-project card: same slot and caption as a template, dashed art. */
+.v2-start-screen .v2-start-add-card {
+	min-width: var(--start-template-min-width, 0);
+	display: flex;
+	flex-direction: column;
+	gap: var(--sp-2, 12px);
+	padding: 0;
+	border: 0;
+	background: var(--transparent, transparent);
+	color: var(--text-1, #e4e4e7);
+	text-align: left;
+}
+
+.v2-start-screen .v2-start-add-art {
+	display: grid;
+	place-items: center;
+	width: var(--start-template-art-width, 100%);
+	aspect-ratio: 16 / 10;
+	border: var(--start-border-width, 1px) dashed var(--text-3, #636369);
+	border-radius: var(--r-2, 6px);
+	color: var(--text-3, #636369);
+	transition: border-color 120ms ease, color 120ms ease;
+}
+
+.v2-start-screen .v2-start-add-card:hover .v2-start-add-art,
+.v2-start-screen .v2-start-add-card:focus-visible .v2-start-add-art {
+	border-color: var(--select, #e8a33d);
+	color: var(--select, #e8a33d);
+}
+
+.v2-start-screen .v2-start-add-card.selected .v2-start-add-art {
+	border-style: solid;
+	border-color: var(--select, #e8a33d);
+	box-shadow: inset 0 0 0 0.5px var(--select, #e8a33d);
+	color: var(--select, #e8a33d);
+}
+
 /* --------------------------------------------------------------- recent --- */
 
 .v2-start-screen .v2-start-recent-block,
@@ -510,11 +488,6 @@
 	padding: var(--sp-1, 8px) 0;
 }
 
-.v2-start-screen .v2-start-file-actions {
-	margin-top: auto;
-	padding-top: var(--sp-1, 8px);
-}
-
 .v2-start-screen .v2-start-learn {
 	max-width: var(--start-learn-max-width, 520px);
 	display: flex;
@@ -537,6 +510,11 @@
 	line-height: 1.55;
 }
 
+.v2-start-screen .v2-start-file-actions {
+	margin-top: auto;
+	padding-top: var(--sp-1, 8px);
+}
+
 /* --------------------------------------------------------------- preview --- */
 
 .v2-start-screen .v2-start-preview {
@@ -550,51 +528,26 @@
 }
 
 .v2-start-screen .v2-start-preview-art {
-	position: relative;
-	width: var(--start-preview-art-width, 100%);
+	display: block;
+	flex: 0 0 auto;
+	/* A framed card inset to the copy column below it, not an edge-to-edge band. */
+	width: auto;
+	margin: var(--start-preview-copy-pad-x, 20px) var(--start-preview-copy-pad-x, 20px) 0;
 	aspect-ratio: 16 / 9;
-	display: flex;
-	align-items: flex-end;
-	justify-content: flex-start;
-	padding: var(--sp-1, 8px);
+	overflow: hidden;
+	border-radius: var(--r-2, 6px);
+	outline: var(--start-border-width, 1px) solid color-mix(in srgb, var(--text-1, #e4e4e7) 9%, transparent);
+	outline-offset: -1px;
 	background: var(--surface-raised, #1e1e21);
 }
 
-.v2-start-screen .v2-start-preview-art::before,
-.v2-start-screen .v2-start-preview-art::after {
-	content: "";
-	position: absolute;
+/* Template art: a real studio render (public/thumbs, one per theme). The
+   wrapper paints a plain tile underneath for a template without one. */
+.v2-start-screen .v2-start-art {
 	display: block;
-	background: var(--surface-active, #26262a);
-}
-
-.v2-start-screen .v2-start-preview-art::before {
-	left: var(--preview-block-left, 14%);
-	bottom: var(--preview-block-bottom, 16%);
-	width: var(--preview-block-width, 34%);
-	height: var(--preview-block-height, 50%);
-}
-
-.v2-start-screen .v2-start-preview-art::after {
-	right: var(--preview-block-right, 14%);
-	bottom: var(--preview-block-bottom, 16%);
-	width: var(--preview-small-width, 18%);
-	height: var(--preview-small-height, 28%);
-	background: var(--primary, #7258a0);
-}
-
-.v2-start-screen .v2-start-preview-art.sample::before {
-	width: var(--preview-sample-width, 58%);
-	height: var(--preview-sample-height, 30%);
-	background: var(--camera, #a78bfa);
-}
-
-.v2-start-screen .v2-start-preview-art span {
-	position: relative;
-	z-index: var(--start-art-label-layer, 1);
-	color: var(--text-off, #4f4f55);
-	font-family: var(--mono, 'JetBrains Mono'), ui-monospace, monospace;
-	font-size: var(--start-preview-label-size, 10.5px);
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
 }
 
 .v2-start-screen .v2-start-preview-copy {

package/src/project-browser.jsx

@@ -14,21 +14,16 @@ import {
 	storeProjectsDirectory,
 	DEFAULT_PREVIS_MODE,
 } from "./project.js";
+import { BrandMark, TemplateThumb } from "./project-browser-art.jsx";
 import "./project-browser.css";
 
 const APP_VERSION = packageInfo.version;
-const CATEGORIES = ["All", "Film", "Dialogue", "Action", "Vehicle"];
-const BLANK_TEMPLATE = Object.freeze({
-	id: "blank-stage",
-	name: "Blank Stage",
-	category: "All",
-	description: "An empty stage for blocking a new shot.",
-	kind: "blank",
-	code: "NEW",
-});
+// The "+" card is the one blank entry: an empty stage under a fresh name (no
+// starterId, so Create takes the blank path). Its preview is the blank-stage render.
+const NEW_PROJECT = Object.freeze({ id: "new-project", thumbId: "blank-stage", kind: "blank", defaultName: "Untitled Project", get name() { return ko("New project", "새 프로젝트"); }, get description() { return ko("Start from an empty stage.", "빈 무대에서 시작합니다."); } });
 
 // The two project modes the New view offers.
-// Storyboard starts from an empty stage only; Animation keeps every template.
+// Storyboard starts from an empty stage only; Animation also offers the starters.
 const MODE_OPTIONS = [
 	{
 		id: "storyboard",
@@ -46,6 +41,9 @@ const MODE_OPTIONS = [
 // path. The v2 chooser already has the name, so this short-lived handoff seeds
 // the existing ProjectNameDialog and lets its normal submit path commit it.
 let pendingProjectName = null;
+function stagePendingProjectName(name) {
+	pendingProjectName = name;
+}
 
 function formatDate(value) {
 	const date = new Date(value);
@@ -58,10 +56,8 @@ function sampleTemplate(scene) {
 		id: `sample-${scene.id}`,
 		starterId: scene.id,
 		name: scene.name,
-		category: "Action",
 		description: scene.blurb,
 		kind: "sample",
-		code: "SAMPLE",
 	};
 }
 
@@ -103,20 +99,17 @@ export function ProjectNameDialog({ open, initialName = "My Project", onCancel,
 
 /**
  * v2 start / project screen. Recent projects still come from the browser-local
- * project store, while today's starter scenes become the template cards.
+ * project store, while the bundled starter scenes (none today) become template
+ * cards before the "+" card.
  */
 export default function ProjectBrowser({ currentName, onOpen, onOpenFile, onNew, onClose, startup = false, starters = [], onStarter }) {
 	const starterTemplates = useMemo(() => starters.map(sampleTemplate), [starters]);
 	const [previsMode, setPrevisMode] = useState(DEFAULT_PREVIS_MODE);
-	const templates = useMemo(
-		() => (previsMode === "storyboard" ? [BLANK_TEMPLATE] : [BLANK_TEMPLATE, ...starterTemplates]),
-		[previsMode, starterTemplates],
-	);
-	const defaultTemplate = starterTemplates[0] ?? BLANK_TEMPLATE;
+	const templates = previsMode === "storyboard" ? [] : starterTemplates;
+	const defaultTemplate = starterTemplates[0] ?? NEW_PROJECT;
 	const [activeNav, setActiveNav] = useState(startup ? "new" : "recent");
-	const [category, setCategory] = useState("All");
 	const [selectedTemplateId, setSelectedTemplateId] = useState(defaultTemplate.id);
-	const [name, setName] = useState(currentName || defaultTemplate.name || "My Project");
+	const [name, setName] = useState(currentName || defaultTemplate.defaultName || defaultTemplate.name || "My Project");
 	const [frameRate, setFrameRate] = useState("24");
 	const [units, setUnits] = useState("Meters");
 	const [recents, setRecents] = useState([]);
@@ -156,15 +149,14 @@ export default function ProjectBrowser({ currentName, onOpen, onOpenFile, onNew,
 
 	// File › New reaches this screen with unsaved work, so Create can be refused
 	// by the discard confirmation. A name left behind then must not seed a later
-	// Save's name dialog once the screen closes.
+	// Save's name dialog once the screen closes. The clear waits for the end of
+	// the commit: a Create that closes this screen opens the name dialog in the
+	// same commit, and its effect takes the name first.
 	useEffect(() => () => {
-		pendingProjectName = null;
+		queueMicrotask(() => stagePendingProjectName(null));
 	}, []);
 
-	const selectedTemplate = templates.find((template) => template.id === selectedTemplateId) ?? templates[0];
-	const visibleTemplates = category === "All"
-		? templates
-		: templates.filter((template) => template.category === "All" || template.category === category);
+	const selectedTemplate = templates.find((template) => template.id === selectedTemplateId) ?? NEW_PROJECT;
 	const canCreate = name.trim().length > 0;
 	const createReason = ko("Enter a project name to create a project", "프로젝트를 만들려면 이름을 입력하세요");
 	const locationLabel = folder?.name || ko("Browser project store", "브라우저 프로젝트 저장소");
@@ -201,17 +193,17 @@ export default function ProjectBrowser({ currentName, onOpen, onOpenFile, onNew,
 	const selectTemplate = (template) => {
 		setSelectedTemplateId(template.id);
 		// A name the previous card (or the open project) filled in follows the new card; a typed one stays.
-		setName((current) => !current.trim() || current.trim() === selectedTemplate?.name || current.trim() === currentName ? template.name : current);
+		setName((current) => !current.trim() || [selectedTemplate?.name, selectedTemplate?.defaultName, currentName].includes(current.trim()) ? template.defaultName ?? template.name : current);
 	};
 
 	const choosePrevisMode = (mode) => {
 		setPrevisMode(mode);
 		// Storyboard offers the blank stage only, so a starter selection cannot
 		// survive the switch.
-		if (mode !== "storyboard" || selectedTemplate?.id === BLANK_TEMPLATE.id) return;
-		setSelectedTemplateId(BLANK_TEMPLATE.id);
+		if (mode !== "storyboard" || !selectedTemplate?.starterId) return;
+		setSelectedTemplateId(NEW_PROJECT.id);
 		// A name the starter card filled in would now describe the wrong stage.
-		setName((current) => (current.trim() === selectedTemplate?.name ? BLANK_TEMPLATE.name : current));
+		setName((current) => (current.trim() === selectedTemplate?.name ? NEW_PROJECT.defaultName : current));
 	};
 
 	const createProject = (event) => {
@@ -222,7 +214,7 @@ export default function ProjectBrowser({ currentName, onOpen, onOpenFile, onNew,
 			onStarter?.(selectedTemplate.starterId, projectName, { previsMode: "animation" });
 			return;
 		}
-		pendingProjectName = projectName;
+		stagePendingProjectName(projectName);
 		onNew(projectName, { previsMode });
 	};
 
@@ -234,7 +226,6 @@ export default function ProjectBrowser({ currentName, onOpen, onOpenFile, onNew,
 	const navItems = [
 		{ id: "recent", label: ko("Recent", "최근") },
 		{ id: "new", label: ko("New Project", "새 프로젝트") },
-		{ id: "samples", label: ko("Samples", "샘플") },
 		{ id: "learn", label: ko("Learn", "배우기") },
 	];
 
@@ -243,7 +234,7 @@ export default function ProjectBrowser({ currentName, onOpen, onOpenFile, onNew,
 			<div className={`v2-start-window project-browser${startup ? " startup" : ""}`} role="dialog" aria-modal="true" aria-label={ko("Choose project", "프로젝트 선택")}>
 				<nav className="v2-start-nav" aria-label={ko("Project navigation", "프로젝트 탐색")}>
 					<div className="v2-start-brand">
-						<span className="v2-start-brand-mark" aria-hidden="true" />
+						<BrandMark />
 						<strong>CozyClay</strong>
 					</div>
 					<div className="v2-start-nav-list">
@@ -265,7 +256,7 @@ export default function ProjectBrowser({ currentName, onOpen, onOpenFile, onNew,
 				<main className="v2-start-main">
 					<div className="v2-start-main-head">
 						<div className="v2-start-title-row">
-							<h1>{activeNav === "recent" ? ko("Recent", "최근") : activeNav === "samples" ? ko("Samples", "샘플") : activeNav === "learn" ? ko("Learn", "배우기") : ko("New Project", "새 프로젝트")}</h1>
+							<h1>{activeNav === "recent" ? ko("Recent", "최근") : activeNav === "learn" ? ko("Learn", "배우기") : ko("New Project", "새 프로젝트")}</h1>
 							{activeNav !== "new" && <button type="button" className="v2-start-close x" onClick={onClose} aria-label={ko("Close", "닫기")}>×</button>}
 						</div>
 						{activeNav === "new" && (
@@ -286,22 +277,6 @@ export default function ProjectBrowser({ currentName, onOpen, onOpenFile, onNew,
 								))}
 							</div>
 						)}
-						{(activeNav === "new" || activeNav === "samples") && (
-							<div className="v2-start-tabs" role="tablist" aria-label={ko("Template categories", "템플릿 카테고리")}>
-								{CATEGORIES.map((entry) => (
-									<button
-										type="button"
-										key={entry}
-										role="tab"
-										aria-selected={category === entry}
-										className={`v2-start-tab${category === entry ? " active" : ""}`}
-										onClick={() => setCategory(entry)}
-									>
-										{ko(entry, entry === "All" ? "전체" : entry === "Film" ? "영화" : entry === "Dialogue" ? "대화" : entry === "Action" ? "액션" : "차량")}
-									</button>
-								))}
-							</div>
-						)}
 					</div>
 
 					{activeNav === "learn" ? (
@@ -327,7 +302,7 @@ export default function ProjectBrowser({ currentName, onOpen, onOpenFile, onNew,
 					) : (
 						<>
 							<div className="v2-start-template-grid" role="list" aria-label={ko("Project templates", "프로젝트 템플릿")}>
-								{visibleTemplates.map((template) => (
+								{templates.map((template) => (
 									<button
 										type="button"
 										role="listitem"
@@ -337,15 +312,20 @@ export default function ProjectBrowser({ currentName, onOpen, onOpenFile, onNew,
 										onClick={() => selectTemplate(template)}
 										onDoubleClick={() => template.starterId && onStarter?.(template.starterId)}
 									>
-										<span className={`v2-start-template-art ${template.kind}`} aria-hidden="true">
-											<span className="v2-start-template-code">{template.code}</span>
-										</span>
+										<span className={`v2-start-template-art ${template.kind}`}><TemplateThumb id={template.starterId ?? template.id} /></span>
 										<span className="v2-start-template-copy">
 											<strong>{template.name}</strong>
 											<span>{template.description}</span>
 										</span>
 									</button>
 								))}
+								<button type="button" role="listitem" className={`v2-start-add-card${selectedTemplate?.id === NEW_PROJECT.id ? " selected" : ""}`} data-testid="start-new-project-card" onClick={() => { selectTemplate(NEW_PROJECT); requestAnimationFrame(() => nameInputRef.current?.select()); }}>
+									<span className="v2-start-add-art" aria-hidden="true"><svg viewBox="0 0 20 20" width="20" height="20"><path d="M10 3.5v13M3.5 10h13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg></span>
+									<span className="v2-start-template-copy">
+										<strong>{ko("New project", "새 프로젝트")}</strong>
+										<span>{ko("Start from an empty stage", "빈 무대에서 시작")}</span>
+									</span>
+								</button>
 							</div>
 
 							<div className="v2-start-recent-block">
@@ -357,15 +337,11 @@ export default function ProjectBrowser({ currentName, onOpen, onOpenFile, onNew,
 							</div>
 						</>
 					)}
-					{activeNav !== "recent" && activeNav !== "learn" && (
-						<div className="v2-start-file-actions">
-							<button type="button" className="v2-start-file-button" onClick={onOpenFile}>{ko("Open project file…", "프로젝트 파일 열기…")}</button>
-						</div>
-					)}
+					{activeNav !== "recent" && activeNav !== "learn" && <div className="v2-start-file-actions"><button type="button" className="v2-start-file-button" onClick={onOpenFile}>{ko("Open project file…", "프로젝트 파일 열기…")}</button></div>}
 				</main>
 
 				<aside className="v2-start-preview" data-testid="start-project-preview" aria-label={ko("Project preview", "프로젝트 미리보기")}>
-					<div className={`v2-start-preview-art ${selectedTemplate?.kind || "blank"}`} aria-hidden="true" />
+					<div className={`v2-start-preview-art ${selectedTemplate?.kind || "blank"}`}><TemplateThumb id={selectedTemplate.starterId ?? selectedTemplate.thumbId} /></div>
 					<div className="v2-start-preview-copy">
 						<strong>{selectedTemplate?.name}</strong>
 						<span>{selectedTemplate?.description}</span>