cozyclay 3.0.3 → 3.1.1

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>

package/src/props.jsx

@@ -2,11 +2,11 @@
  * Set props: low-poly clay maquettes to block against.
  *
  * The set is a bare room and a figure; a shot that needs "something in the
- * world" (a car to lean on, to walk past, to frame behind glass) has nothing
+ * world" (a wall to lean on, to walk past, to frame behind) has nothing
  * to work with. These props are built from primitives in the same clay style
  * as the Room and the character tint, so the whole frame stays one
- * consistent maquette. The hand-built set pieces live in set-pieces.jsx;
- * practical lights and glow in scene-lights.jsx and object-glow.js.
+ * consistent maquette. Practical lights and glow live in scene-lights.jsx
+ * and object-glow.js.
  */
 
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -19,40 +19,35 @@ import { CUTOUT_KIND, MESH_KIND, EMPTY_KIND, EMPTY_MARKER_SIZE, SCULPT_KIND } fr
 import { TEXT_KIND } from "./text/text-record.js";
 import { TextObject } from "./text/text-object.jsx";
 import { buildSculptGroup, disposeSculptGroup } from "./sculpt-geometry.js";
+import { depthRankProps, usePrimitiveLook } from "./primitive-look.js";
 import { subscribeToAssetTexture } from "./scene-asset-cache.js";
 import { ImportedMesh } from "./imported-mesh.jsx";
 import { EffectMarker, EffectsLayer } from "./effects/EffectsLayer.jsx";
 import { EFFECT_KIND } from "./effects/effect-record.js";
 import { applyPoseFade } from "./pose-fade.js";
 import { coplanarDepthRanks } from "./coplanar-depth.js";
-import { autoFlat, Car, Chair, SmallPlane } from "./set-pieces.jsx";
+import { autoFlat } from "./auto-flat.js";
 import { LIGHT_KIND, capPracticalShadows } from "./object-look.js";
 import { SceneLight, useLookRefresh } from "./scene-lights.jsx";
 import { placeObjectLook } from "./scene-light-place.js";
 
-// Parts of an assembly can share a plane with an earlier part (hood top and
-// grille top). The depth test can't order them and the winner flips as the
-// camera moves, so a ranked part is pulled toward the camera by `rank` steps
-// (negative = nearer). Rank 0 gets nothing: those materials stay untouched.
-function depthRankProps(rank) {
-	return rank > 0 ? { polygonOffset: true, polygonOffsetFactor: -rank, polygonOffsetUnits: -rank } : null;
-}
-
 /**
  * The creatable primitives, Unity's 3D Object menu in clay. Each one is built
  * with its base on the local floor (y = 0), so an object's `y` reads as height
- * above the deck rather than "half of me is underground".
+ * above the deck rather than "half of me is underground". A surface preset
+ * (primitive-look.js) replaces the clay; glass casts no shadow.
  */
-function Primitive({ kind, color, autoColor, depthRank = 0 }) {
+function Primitive({ kind, object, color, autoColor, depthRank = 0 }) {
 	const side = kind === "plane" ? THREE.DoubleSide : THREE.FrontSide;
-	const material = autoColor ? (
+	const look = usePrimitiveLook(object, kind, side, depthRank), cast = !(look?.transmission > 0);
+	const material = look ? <primitive object={look} attach="material" /> : autoColor ? (
 		<meshStandardMaterial {...autoFlat(autoColor)} side={side} {...depthRankProps(depthRank)} />
 	) : (
 		<meshStandardMaterial color={color} roughness={0.82} side={side} {...depthRankProps(depthRank)} />
 	);
 	if (kind === "sphere") {
 		return (
-			<mesh position={[0, 0.5, 0]} castShadow receiveShadow>
+			<mesh position={[0, 0.5, 0]} castShadow={cast} receiveShadow>
 				<sphereGeometry args={[0.5, 28, 18]} />
 				{material}
 			</mesh>
@@ -60,7 +55,7 @@ function Primitive({ kind, color, autoColor, depthRank = 0 }) {
 	}
 	if (kind === "capsule") {
 		return (
-			<mesh position={[0, 0.7, 0]} castShadow receiveShadow>
+			<mesh position={[0, 0.7, 0]} castShadow={cast} receiveShadow>
 				<capsuleGeometry args={[0.35, 0.7, 6, 18]} />
 				{material}
 			</mesh>
@@ -68,7 +63,7 @@ function Primitive({ kind, color, autoColor, depthRank = 0 }) {
 	}
 	if (kind === "cylinder") {
 		return (
-			<mesh position={[0, 0.5, 0]} castShadow receiveShadow>
+			<mesh position={[0, 0.5, 0]} castShadow={cast} receiveShadow>
 				<cylinderGeometry args={[0.5, 0.5, 1, 26]} />
 				{material}
 			</mesh>
@@ -76,7 +71,7 @@ function Primitive({ kind, color, autoColor, depthRank = 0 }) {
 	}
 	if (kind === "cone") {
 		return (
-			<mesh position={[0, 0.5, 0]} castShadow receiveShadow>
+			<mesh position={[0, 0.5, 0]} castShadow={cast} receiveShadow>
 				<coneGeometry args={[0.5, 1, 26]} />
 				{material}
 			</mesh>
@@ -91,7 +86,7 @@ function Primitive({ kind, color, autoColor, depthRank = 0 }) {
 		);
 	}
 	return (
-		<mesh position={[0, 0.5, 0]} castShadow receiveShadow>
+		<mesh position={[0, 0.5, 0]} castShadow={cast} receiveShadow>
 			<boxGeometry args={[1, 1, 1]} />
 			{material}
 		</mesh>
@@ -162,20 +157,17 @@ function Cutout({ object }) {
 
 /**
  * A sculpt: the clay parts its recipe describes, rebuilt only when the recipe
- * or the look changes. Each part keeps its own clay colour; auto-colour paints
- * the whole sculpt flat like any other prop, because it is one object.
+ * or the look changes. The shaded look is buildSculptGroup's own clay (part
+ * colours, gradients, scatter tints); auto-colour paints the whole sculpt flat
+ * like any other prop, because it is one object. Depth rank rides on either.
  */
 function Sculpt({ object, depthRank = 0 }) {
 	const { recipe, autoColor } = object;
-	const group = useMemo(
-		() => buildSculptGroup(recipe, {
-			materialFor: (part) => new THREE.MeshStandardMaterial({
-				...(autoColor ? autoFlat(autoColor) : { color: part.color, roughness: 0.82, metalness: 0 }),
-				...depthRankProps(depthRank),
-			}),
-		}),
-		[recipe, autoColor, depthRank],
-	);
+	const group = useMemo(() => {
+		const built = buildSculptGroup(recipe, autoColor ? { materialFor: () => new THREE.MeshStandardMaterial(autoFlat(autoColor)) } : {});
+		built.traverse((node) => node.material && Object.assign(node.material, depthRankProps(depthRank)));
+		return built;
+	}, [recipe, autoColor, depthRank]);
 	useEffect(() => () => disposeSculptGroup(group), [group]);
 	return <primitive object={group} />;
 }
@@ -242,10 +234,7 @@ function SceneObjectContent({ object, depthRank = 0 }) {
 	if (renderer === MESH_KIND) return <ImportedMesh object={object} />;
 	if (renderer === SCULPT_KIND) return <Sculpt object={object} depthRank={depthRank} />;
 	if (renderer === TEXT_KIND) return <TextObject object={object} />;
-	if (renderer === "car") return <Car color={autoColor ?? color} autoColor={autoColor} />;
-	if (renderer === "small-plane") return <SmallPlane autoColor={autoColor} />;
-	if (renderer === "chair") return <Chair autoColor={autoColor} />;
-	if (PRIMITIVE_KINDS.has(renderer)) return <Primitive kind={renderer} color={color} autoColor={autoColor} depthRank={depthRank} />;
+	if (PRIMITIVE_KINDS.has(renderer)) return <Primitive kind={renderer} object={object} color={color} autoColor={autoColor} depthRank={depthRank} />;
 	return null;
 }
 

package/src/render-passes.js

@@ -47,10 +47,16 @@ export function passFileName(kind) {
 // it spreads the value over four channels and reads as colour noise). This
 // shader is the plain depth-to-grey the deliverable wants, and the range it
 // normalises over is the stage's, not the projection's.
+// An InstancedMesh (a sculpt's scatter) draws every instance through its
+// instanceMatrix; without it all of them would land on the mesh's origin.
 const DEPTH_VERTEX = /* glsl */ `
 varying float vViewDepth;
 void main() {
-	vec4 viewPosition = modelViewMatrix * vec4(position, 1.0);
+	vec4 local = vec4(position, 1.0);
+#ifdef USE_INSTANCING
+	local = instanceMatrix * local;
+#endif
+	vec4 viewPosition = modelViewMatrix * local;
 	vViewDepth = -viewPosition.z;
 	gl_Position = projectionMatrix * viewPosition;
 }