cozyclay 1.9.0 → 2.0.0

package/src/hierarchy-panel.css

@@ -0,0 +1,386 @@
+.v2-outliner {
+	min-height: 0;
+	max-height: none;
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+	background: var(--surface-panel, #151517);
+	border: 0;
+	color: var(--text-1, #e4e4e7);
+	font-family: var(--sans, 'IBM Plex Sans');
+	font-size: var(--outliner-ui-size, 12px);
+	line-height: 1.2;
+	overflow: hidden;
+}
+
+.v2-outliner .hierarchy-heading {
+	height: var(--outliner-header-height, 36px);
+	min-height: var(--outliner-header-height, 36px);
+	padding: 0 var(--sp-2, 12px);
+	border-bottom: var(--outliner-border-width, 1px) solid var(--row-divider, #1d1d20);
+	background: var(--surface-panel, #151517);
+	color: var(--text-1, #e4e4e7);
+}
+
+.v2-outliner .hierarchy-heading strong {
+	margin: 0;
+	color: var(--text-1, #e4e4e7);
+	font-size: var(--outliner-title-size, 12px);
+	font-weight: 500;
+	letter-spacing: 0;
+}
+
+.v2-outliner .hierarchy-kicker,
+.v2-outliner .hierarchy-frame-status {
+	display: none;
+}
+
+.v2-outliner .v2-outliner-count {
+	color: var(--text-3, #636369);
+	font-family: var(--mono, 'JetBrains Mono');
+	font-size: var(--outliner-secondary-size, 11px);
+	font-weight: 400;
+}
+
+.v2-outliner .v2-outliner-search-wrap {
+	position: relative;
+	display: flex;
+	align-items: center;
+	height: var(--h-control, 28px);
+	min-height: var(--h-control, 28px);
+	margin: 0 var(--sp-2, 12px) var(--sp-1, 8px);
+	border-radius: var(--r-1, 4px);
+	background: var(--field, #0f0f11);
+	color: var(--text-3, #636369);
+}
+
+.v2-outliner .v2-outliner-search-icon {
+	position: absolute;
+	left: var(--sp-1, 8px);
+	color: var(--text-3, #636369);
+	font-size: var(--outliner-search-icon-size, 14px);
+	line-height: 1;
+	pointer-events: none;
+}
+
+.v2-outliner .v2-outliner-search {
+	width: 100%;
+	height: var(--h-control, 28px);
+	min-height: var(--h-control, 28px);
+	padding: 0 var(--sp-1, 8px) 0 var(--sp-3, 16px);
+	border: 0;
+	border-radius: var(--r-1, 4px);
+	outline: 0;
+	background: none;
+	color: var(--text-1, #e4e4e7);
+	font: inherit;
+	font-size: var(--outliner-secondary-size, 11px);
+}
+
+.v2-outliner .v2-outliner-search::placeholder {
+	color: var(--text-3, #636369);
+	opacity: 1;
+}
+
+.v2-outliner .v2-outliner-search:focus-visible {
+	outline: var(--outliner-border-width, 1px) solid var(--select, #e8a33d);
+	outline-offset: calc(var(--outliner-border-width, 1px) * -1);
+}
+
+.v2-outliner .hierarchy-tree {
+	flex: 1 1 auto;
+	min-height: 0;
+	padding: 0 var(--sp-1, 8px) var(--sp-1, 8px);
+	overflow: auto;
+	background: var(--surface-panel, #151517);
+}
+
+.v2-outliner .hierarchy-row-wrap {
+	position: relative;
+	height: var(--h-row, 24px);
+	min-height: var(--h-row, 24px);
+	margin-left: calc(var(--hierarchy-depth, 0) * var(--outliner-indent, 14px));
+	padding-right: 0;
+	border-radius: var(--r-1, 4px);
+	background: none;
+}
+
+.v2-outliner .hierarchy-row-wrap:hover {
+	background: var(--surface-raised, #1e1e21);
+}
+
+.v2-outliner .hierarchy-row-wrap.selected {
+	background: var(--select-tint, rgba(232,163,61,.14));
+	box-shadow: none;
+}
+
+.v2-outliner .hierarchy-row-wrap[data-own-hidden="true"] {
+	opacity: .52;
+}
+
+.v2-outliner .hierarchy-row-wrap:before {
+	display: none;
+}
+
+.v2-outliner .hierarchy-toggle,
+.v2-outliner .hierarchy-fold-space {
+	flex: 0 0 var(--outliner-chevron-slot, 12px);
+	width: var(--outliner-chevron-slot, 12px);
+	height: var(--h-row, 24px);
+	padding: 0;
+	border: 0;
+	background: none;
+}
+
+.v2-outliner .hierarchy-toggle {
+	display: grid;
+	place-items: center;
+	color: var(--text-3, #636369);
+	font-size: var(--outliner-chevron-size, 8px);
+	font-weight: 500;
+	line-height: 1;
+	cursor: pointer;
+}
+
+.v2-outliner .hierarchy-toggle:hover,
+.v2-outliner .hierarchy-toggle:focus-visible {
+	color: var(--text-1, #e4e4e7);
+}
+
+.v2-outliner .hierarchy-toggle.placeholder,
+.v2-outliner .hierarchy-fold-space {
+	pointer-events: none;
+}
+
+.v2-outliner .hierarchy-row {
+	width: 100%;
+	min-width: 0;
+	height: var(--h-row, 24px);
+	padding: 0 var(--sp-1, 8px) 0 0;
+	border: 0;
+	background: none;
+	color: var(--text-row, #c9c9ce);
+	font: inherit;
+	font-size: var(--outliner-ui-size, 12px);
+	font-weight: 400;
+	text-align: left;
+	cursor: default;
+}
+
+.v2-outliner .hierarchy-row:not(.icon-only) {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-1, 8px);
+}
+
+.v2-outliner .hierarchy-row.icon-only {
+	flex: 0 0 auto;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--sp-1, 8px);
+	width: auto;
+}
+
+.v2-outliner .v2-outliner-chip {
+	flex: 0 0 var(--outliner-chip-size, 6px);
+	width: var(--outliner-chip-size, 6px);
+	height: var(--outliner-chip-size, 6px);
+	border-radius: var(--outliner-chip-radius, 2px);
+	background: var(--chip-folder, #8a7a55);
+}
+
+.v2-outliner .v2-outliner-chip.folder { background: var(--chip-folder, #8a7a55); }
+.v2-outliner .v2-outliner-chip.mesh { background: var(--chip-mesh, #7e8b99); }
+.v2-outliner .v2-outliner-chip.cast { background: var(--chip-cast, #5fb584); }
+.v2-outliner .v2-outliner-chip.cam { background: var(--camera, #a78bfa); }
+.v2-outliner .v2-outliner-chip.light { background: var(--chip-light, #d9b84a); }
+
+.v2-outliner .hierarchy-label {
+	flex: 1 1 auto;
+	min-width: 0;
+	overflow: hidden;
+	color: var(--text-row, #c9c9ce);
+	font-size: var(--outliner-ui-size, 12px);
+	font-weight: 400;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.v2-outliner .hierarchy-row-wrap.selected .hierarchy-label {
+	color: var(--text-1, #e4e4e7);
+	font-weight: 500;
+}
+
+.v2-outliner .v2-outliner-type {
+	flex: 0 0 auto;
+	margin-left: auto;
+	color: var(--text-off, #4f4f55);
+	font-size: var(--outliner-type-size, 10.5px);
+	font-weight: 400;
+	white-space: nowrap;
+}
+
+.v2-outliner .hierarchy-status,
+.v2-outliner .hierarchy-badge {
+	display: none;
+}
+
+.v2-outliner .hierarchy-eye {
+	flex: 0 0 var(--outliner-eye-closed-width, 0px);
+	width: var(--outliner-eye-closed-width, 0px);
+	height: var(--h-row, 24px);
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--text-2, #9b9ba1);
+	opacity: 0;
+	overflow: hidden;
+}
+
+.v2-outliner .hierarchy-eye:focus-visible {
+	flex-basis: var(--outliner-eye-width, 24px);
+	width: var(--outliner-eye-width, 24px);
+	opacity: 1;
+	outline: var(--outliner-border-width, 1px) solid var(--select, #e8a33d);
+}
+
+.v2-outliner .hierarchy-row-wrap[data-drop="over"] {
+	border: var(--outliner-border-width, 1px) dashed var(--select, #e8a33d);
+	background: var(--select-tint, rgba(232,163,61,.14));
+}
+
+.v2-outliner .hierarchy-row-wrap[data-drop="target"] {
+	border: var(--outliner-border-width, 1px) solid var(--row-divider, #1d1d20);
+}
+
+.v2-outliner .hierarchy-row-wrap .hierarchy-scene-pill {
+	flex: 1 1 auto;
+	min-width: 0;
+	max-width: none;
+	height: var(--h-row, 24px);
+	margin: 0 var(--sp-1, 8px) 0 var(--sp-1, 8px);
+}
+
+.v2-outliner .hierarchy-row-wrap .hierarchy-scene-pill .dropdown,
+.v2-outliner .hierarchy-row-wrap .hierarchy-scene-pill .trigger {
+	width: 100%;
+	min-width: 0;
+}
+
+.v2-outliner .hierarchy-row-wrap .hierarchy-scene-pill .trigger {
+	height: var(--h-row, 24px);
+	gap: var(--outliner-trigger-gap, 6px);
+	padding: 0 var(--sp-1, 8px);
+	border: 0;
+	border-radius: var(--r-1, 4px);
+	background: var(--surface-active, #26262a);
+	color: var(--text-row, #c9c9ce);
+	font: inherit;
+	font-size: var(--outliner-ui-size, 12px);
+	text-align: left;
+}
+
+.v2-outliner .hierarchy-row-wrap .hierarchy-scene-pill .trigger:hover,
+.v2-outliner .hierarchy-row-wrap .hierarchy-scene-pill .dropdown.open .trigger {
+	background: var(--surface-raised, #1e1e21);
+	color: var(--text-1, #e4e4e7);
+}
+
+.v2-outliner .hierarchy-row-wrap .hierarchy-scene-pill .dd-caret {
+	flex: 0 0 var(--outliner-chevron-slot, 12px);
+	width: var(--outliner-chevron-slot, 12px);
+	height: var(--outliner-chevron-slot, 12px);
+	color: var(--text-3, #636369);
+}
+
+.v2-outliner .hierarchy-scene-hint {
+	flex: none;
+	margin: 0;
+	padding: 0 var(--sp-2, 12px) var(--sp-1, 8px);
+	color: var(--text-2, #9b9ba1);
+	font-size: var(--outliner-secondary-size, 11px);
+}
+
+.v2-outliner .v2-outliner-empty {
+	min-height: var(--h-row, 24px);
+	padding: var(--sp-1, 8px);
+	color: var(--text-3, #636369);
+	font-size: var(--outliner-secondary-size, 11px);
+}
+
+.v2-outliner .hierarchy-rename-input {
+	flex: 1 1 auto;
+	min-width: 0;
+	height: var(--h-control, 28px);
+	padding: 0 var(--sp-1, 8px);
+	border: 0;
+	border-radius: var(--r-1, 4px);
+	background: var(--field, #0f0f11);
+	color: var(--text-1, #e4e4e7);
+	font: inherit;
+	font-size: var(--outliner-ui-size, 12px);
+}
+
+.v2-outliner .hierarchy-rename-input:focus-visible {
+	outline: var(--outliner-border-width, 1px) solid var(--select, #e8a33d);
+}
+
+.v2-outliner .hierarchy-context-menu {
+	min-width: var(--outliner-menu-width, 220px);
+	padding: var(--outliner-menu-padding, 4px);
+	border: var(--outliner-border-width, 1px) solid var(--row-divider, #1d1d20);
+	border-radius: var(--r-2, 6px);
+	background: var(--surface-raised, #1e1e21);
+	box-shadow: 0 var(--sp-1, 8px) var(--sp-3, 16px) var(--overlay, rgba(12,12,13,.78));
+}
+
+.v2-outliner .hierarchy-context-item {
+	min-height: var(--h-control, 28px);
+	padding: 0 var(--sp-1, 8px);
+	border: 0;
+	border-radius: var(--r-1, 4px);
+	background: none;
+	color: var(--text-row, #c9c9ce);
+	font: inherit;
+	font-size: var(--outliner-secondary-size, 11px);
+	text-align: left;
+}
+
+.v2-outliner .hierarchy-context-item:hover,
+.v2-outliner .hierarchy-context-item:focus-visible {
+	background: var(--surface-active, #26262a);
+	color: var(--text-1, #e4e4e7);
+}
+
+.v2-outliner .hierarchy-context-item.danger {
+	color: var(--danger, #e5484d);
+}
+
+.v2-outliner .add-object-item {
+	min-height: var(--h-control, 28px);
+	padding: 0 var(--sp-1, 8px);
+	border: 0;
+	border-radius: var(--r-1, 4px);
+	background: none;
+	color: var(--text-row, #c9c9ce);
+	font: inherit;
+	font-size: var(--outliner-secondary-size, 11px);
+}
+
+.v2-outliner .add-object-item:hover,
+.v2-outliner .add-object-item:focus-visible {
+	background: var(--surface-active, #26262a);
+	color: var(--text-1, #e4e4e7);
+}
+
+.v2-outliner .add-object-heading {
+	padding: var(--sp-1, 8px) var(--sp-1, 8px) calc(var(--sp-1, 8px) / 2);
+	color: var(--text-3, #636369);
+	font-size: var(--outliner-type-size, 10.5px);
+}
+
+@media (max-width: 700px) {
+	.v2-outliner .v2-outliner-type {
+		display: none;
+	}
+}

package/src/hierarchy-panel.jsx

@@ -2,8 +2,9 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { ko, isKo } from "./locale.js";
 import { buildHierarchyNodes } from "./hierarchy-model.js";
 import { sceneObjectIdFromHierarchy } from "./scene-objects.js";
-import AddObjectMenu, { CatalogueEntries, displayObjectLabel } from "./object-catalog.jsx";
+import { CatalogueEntries, displayObjectLabel } from "./object-catalog.jsx";
 import { Dropdown } from "./ui.jsx";
+import "./hierarchy-panel.css";
 
 const HIERARCHY_LABELS_KO = {
 	"SCENE 01": "장면 01",
@@ -35,6 +36,8 @@ const HIERARCHY_LABELS_KO = {
 	Environment: "환경",
 	Props: "소품",
 	Light: "조명",
+	"Scene structure": "장면 구조",
+	"Scene hierarchy": "장면 계층",
 };
 
 const FALLBACK_SCENES = [{ id: "current-scene", name: "SCENE 01" }];
@@ -198,6 +201,57 @@ function displayHierarchyLabel(node) {
 	return isKo ? (HIERARCHY_LABELS_KO[node.label] ?? node.label) : node.label;
 }
 
+const OUTLINER_TYPES = {
+	folder: "Folder",
+	mesh: "Mesh",
+	cast: "Cast",
+	cam: "Cam",
+	light: "Light",
+};
+
+function outlinerTypeFor(node) {
+	const key = node.kind === "object"
+		? "mesh"
+		: node.kind === "character" || node.kind === "bone"
+			? "cast"
+			: node.kind === "camera"
+				? "cam"
+				: node.kind === "light"
+					? "light"
+					: "folder";
+	const label = key === "folder"
+		? ko(OUTLINER_TYPES[key], "폴더")
+		: key === "mesh"
+			? ko(OUTLINER_TYPES[key], "메시")
+			: key === "cast"
+				? ko(OUTLINER_TYPES[key], "캐스트")
+				: key === "cam"
+					? ko(OUTLINER_TYPES[key], "카메라")
+					: ko(OUTLINER_TYPES[key], "조명");
+	return { key, label };
+}
+
+function OutlinerChip({ type }) {
+	return <span className={`v2-outliner-chip ${type}`} aria-hidden="true" />;
+}
+
+function countHierarchyNodes(nodes) {
+	return nodes.reduce((count, node) => count + 1 + countHierarchyNodes(node.children ?? []), 0);
+}
+
+function filterHierarchyNodes(nodes, query, showB) {
+	const normalized = query.trim().toLocaleLowerCase();
+	const filterNode = (node) => {
+		if (node.optional === "showB" && !showB) return null;
+		if (!normalized) return node;
+		const label = displayHierarchyLabel(node).toLocaleLowerCase();
+		const children = (node.children ?? []).map(filterNode).filter(Boolean);
+		if (!label.includes(normalized) && children.length === 0) return null;
+		return children.length ? { ...node, children } : { ...node, children: undefined };
+	};
+	return nodes.map(filterNode).filter(Boolean);
+}
+
 function indexParents(nodes, parent = null, parents = new Map()) {
 	for (const node of nodes) {
 		if (parent) parents.set(node.id, parent);
@@ -210,6 +264,15 @@ function indexParents(nodes, parent = null, parents = new Map()) {
  * (Rename / Duplicate / Delete / Frame) or the create catalogue, matching
  * Unity's Hierarchy right-click menu (docs/unity-reference.md §9.7).
  * Closes on Escape, on any outside mousedown, and after a pick. */
+function findHierarchyNode(nodes, id) {
+	for (const node of nodes ?? []) {
+		if (node.id === id) return node;
+		const nested = findHierarchyNode(node.children, id);
+		if (nested) return nested;
+	}
+	return null;
+}
+
 function RowContextMenu({ menu, onClose, onAction, onAddObject }) {
 	const rootRef = useRef(null);
 	// Deleting a scene document is not undoable, so Delete arms first and only
@@ -275,8 +338,15 @@ function RowContextMenu({ menu, onClose, onAction, onAddObject }) {
 						{ko("+ New scene", "+ 새 장면")}
 					</button>
 				</>
+			) : menu.kind === "character" ? (
+				<button type="button" role="menuitem" className="hierarchy-context-item" onClick={() => onAction("visibility", menu.id)}>
+					{menu.hidden ? ko("Show", "표시") : ko("Hide", "숨기기")}
+				</button>
 			) : menu.kind === "object" ? (
 				<>
+					<button type="button" role="menuitem" className="hierarchy-context-item" onClick={() => onAction("visibility", menu.id)}>
+						{menu.hidden ? ko("Show", "표시") : ko("Hide", "숨기기")}
+					</button>
 					<button type="button" role="menuitem" className="hierarchy-context-item" onClick={() => onAction("rename", menu.id)}>
 						{ko("Rename", "이름 바꾸기")}
 					</button>
@@ -310,6 +380,7 @@ function TreeRow({
 	onRenameCommit,
 	onRenameCancel,
 	onRowContextMenu,
+	onToggleHidden,
 	onRenameStart,
 	// The scene root row hands its name to the pill in `rowExtra`; printing it
 	// twice on one row is the duplication this panel just removed.
@@ -361,6 +432,14 @@ function TreeRow({
 		...(draggableRow
 			? {
 					onDragStart: (event) => {
+						// The eye and the fold caret sit inside the draggable row.
+						// A press on either must not start a move, or the click is
+						// swallowed and a small slip reparents the row.
+						if (event.target instanceof Element && event.target.closest(".hierarchy-eye, .hierarchy-toggle")) {
+							event.preventDefault();
+							event.stopPropagation();
+							return;
+						}
 						event.stopPropagation();
 						event.dataTransfer.setData(HIERARCHY_DRAG_MIME, node.id);
 						event.dataTransfer.effectAllowed = "move";
@@ -410,6 +489,7 @@ function TreeRow({
 	// only exists when the caller asked for reparenting.
 	const dropEvents = rowDrag || drop || null;
 	const label = displayHierarchyLabel(node);
+	const outlinerType = outlinerTypeFor(node);
 	const rowWrapRef = useRef(null);
 	const inputRef = useRef(null);
 	// A commit/cancel may race the blur that follows the input unmounting;
@@ -441,6 +521,7 @@ function TreeRow({
 			className={"hierarchy-row-wrap" + (selectedId === node.id ? " selected" : "")}
 			style={{ "--hierarchy-depth": depth }}
 			data-node-id={node.id}
+			data-own-hidden={node.hidden ? "true" : undefined}
 			data-drop={drop || rowDropTarget ? (dropOver || rowDropOver ? "over" : "target") : undefined}
 			draggable={draggableRow || undefined}
 			{...(dropEvents ?? {})}
@@ -469,7 +550,7 @@ function TreeRow({
 				// blur commits (docs/unity-reference.md §9.7). A div, not the
 				// row button — an input inside a button is invalid HTML.
 				<div className={"hierarchy-row" + (touched ? " agent-touched" : "")}>
-					<HierarchyIcon kind={node.kind} />
+					<OutlinerChip type={outlinerType.key} />
 					<input
 						ref={inputRef}
 						className="hierarchy-rename-input"
@@ -498,10 +579,31 @@ function TreeRow({
 					onClick={() => onSelect(node.id)}
 					onDoubleClick={onRenameStart ?? undefined}
 				>
-					<HierarchyIcon kind={node.kind} />
+					<OutlinerChip type={outlinerType.key} />
 					{showLabel && <span className="hierarchy-label">{label}</span>}
 					{status && <span className="hierarchy-status">{status}</span>}
 					{badge !== null && badge !== undefined && badge !== 0 && <span className="hierarchy-badge">{badge}</span>}
+					<span className="v2-outliner-type">{outlinerType.label}</span>
+				</button>
+			)}
+			{(node.kind === "object" || node.kind === "character") && onToggleHidden && (
+				<button
+					type="button"
+					className="hierarchy-eye"
+					data-hidden={node.hidden ? "true" : undefined}
+					aria-pressed={node.hidden === true}
+					aria-label={node.hidden ? (isKo ? `${label} 표시` : `Show ${label}`) : (isKo ? `${label} 숨기기` : `Hide ${label}`)}
+					onClick={(event) => {
+						event.preventDefault();
+						event.stopPropagation();
+						onToggleHidden(node.id);
+					}}
+				>
+					<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+						<path d="M1.5 8s2.5-4 6.5-4 6.5 4 6.5 4-2.5 4-6.5 4S1.5 8 1.5 8z" fill="none" stroke="currentColor" strokeWidth="1.3" />
+						<circle cx="8" cy="8" r="1.7" fill="currentColor" />
+						{node.hidden && <path d="M3 13 13 3" stroke="currentColor" strokeWidth="1.3" />}
+					</svg>
 				</button>
 			)}
 			{rowExtra}
@@ -525,6 +627,7 @@ export default function HierarchyPanel({
 	onDuplicateObject,
 	onDeleteObject,
 	onFrameObject,
+	onToggleHidden,
 	propsDrop = null,
 	reparent = null,
 	// Hierarchy ids an agent receipt just changed. The host owns how long they
@@ -539,6 +642,7 @@ export default function HierarchyPanel({
 	onSceneDelete,
 }) {
 	const [expanded, setExpanded] = useState(() => new Set(["shot", "characterA"]));
+	const [search, setSearch] = useState("");
 	const [contextMenu, setContextMenu] = useState(null);
 	// Row currently in in-place rename. The panel owns it: F2/Return and the
 	// row context menu are the only ways in, so app state stays out of it.
@@ -574,6 +678,14 @@ export default function HierarchyPanel({
 		}));
 	}, [activeSceneName, sceneObjects, characters]);
 	const parents = useMemo(() => indexParents(hierarchyNodes), [hierarchyNodes]);
+	const filteredHierarchyNodes = useMemo(
+		() => filterHierarchyNodes(hierarchyNodes, search, showB),
+		[hierarchyNodes, search, showB],
+	);
+	const outlinerCount = useMemo(
+		() => countHierarchyNodes(filteredHierarchyNodes),
+		[filteredHierarchyNodes],
+	);
 
 	useEffect(() => {
 		setExpanded((current) => {
@@ -650,8 +762,16 @@ export default function HierarchyPanel({
 	const openRowMenu = (event, id) => {
 		event.preventDefault();
 		event.stopPropagation(); // a row pick must not also open the create menu
-		if (sceneObjectIdFromHierarchy(id) !== null) {
-			setContextMenu({ x: event.clientX, y: event.clientY, height: 148, kind: "object", id });
+		const node = findHierarchyNode(hierarchyNodes, id);
+		if (node?.kind === "object" || node?.kind === "character") {
+			setContextMenu({
+				x: event.clientX,
+				y: event.clientY,
+				height: node.kind === "object" ? 180 : 44,
+				kind: node.kind,
+				id,
+				hidden: node.hidden === true,
+			});
 		} else if (id === SCENE_ROOT_ID) {
 			// The root row is the scene document: its own verbs, never the
 			// Add-Object catalogue.
@@ -700,6 +820,10 @@ export default function HierarchyPanel({
 			onSceneCreate?.();
 			return;
 		}
+		if (action === "visibility") {
+			onToggleHidden?.(hierarchyId);
+			return;
+		}
 		const objectId = sceneObjectIdFromHierarchy(hierarchyId);
 		if (!objectId) return;
 		if (action === "duplicate") onDuplicateObject?.(objectId);
@@ -736,9 +860,9 @@ export default function HierarchyPanel({
 		nodes.flatMap((node) => {
 			if (node.optional === "showB" && !showB) return [];
 			const sceneRoot = node.id === SCENE_ROOT_ID;
-			// The root carries no fold caret, so nothing can close it: the scene is
-			// always open under its own name.
-			const open = sceneRoot || expanded.has(node.id);
+			// Search opens only the filtered branches. The stored expansion set is
+			// left untouched so clearing the query restores the author's tree.
+			const open = sceneRoot || expanded.has(node.id) || Boolean(search.trim());
 			const editing = editingId === node.id;
 			return [
 				<TreeRow
@@ -756,6 +880,7 @@ export default function HierarchyPanel({
 					onRenameCommit={(name) => commitRename(node.id, name)}
 					onRenameCancel={cancelRename}
 					onRowContextMenu={openRowMenu}
+					onToggleHidden={onToggleHidden}
 					// The root row names the scene document, and a double-click on a
 					// document name is where every file browser puts rename.
 					onRenameStart={sceneRoot ? () => setEditingId(node.id) : null}
@@ -786,22 +911,26 @@ export default function HierarchyPanel({
 		});
 
 	return (
-		<section className="hierarchy-pane" aria-label={ko("Scene hierarchy", "장면 계층")}>
+		<section className="hierarchy-pane v2-outliner" aria-label={ko("Outliner", "아웃라이너")}>
 			<div className="hierarchy-heading">
-				<div>
-					<span className="hierarchy-kicker">{ko("Hierarchy", "계층")}</span>
-					<strong>{ko("Scene structure", "장면 구조")}</strong>
-				</div>
-				<span className="hierarchy-frame-status">{motionFrames ? (isKo ? `${motionFrames}프레임` : `${motionFrames} frames`) : ko("Blocking", "블로킹")}</span>
+				<strong>{ko("Outliner", "아웃라이너")}</strong>
+				<span className="v2-outliner-count" data-testid="outliner-count">{outlinerCount}</span>
 			</div>
-			{onAddObject && (
-				<div className="hierarchy-toolbar">
-					<AddObjectMenu onAdd={onAddObject} />
-					<span className="hierarchy-frame-status">{motionFrames ? (isKo ? `${motionFrames}프레임` : `${motionFrames} frames`) : ko("Blocking", "블로킹")}</span>
-				</div>
-			)}
+			<label className="v2-outliner-search-wrap">
+				<span className="v2-outliner-search-icon" aria-hidden="true">⌕</span>
+				<input
+					className="v2-outliner-search"
+					type="search"
+					value={search}
+					placeholder={ko("Search", "검색")}
+					aria-label={ko("Search Outliner", "아웃라이너 검색")}
+					onChange={(event) => setSearch(event.target.value)}
+				/>
+			</label>
 			<div className="hierarchy-tree" role="tree" ref={treeRef} onKeyDown={onTreeKeyDown} onContextMenu={openCreateMenu}>
-				{renderNodes(hierarchyNodes)}
+				{filteredHierarchyNodes.length > 0 ? renderNodes(filteredHierarchyNodes) : (
+					<div className="v2-outliner-empty" role="status">{ko("No matches", "일치하는 항목 없음")}</div>
+				)}
 			</div>
 			{sceneHint && (
 				<p className="hierarchy-scene-hint" role="status">{sceneHint}</p>