diff --git a/apps/ai-game-creator-shell/src-tauri/src/project/asset_canvas.rs b/apps/ai-game-creator-shell/src-tauri/src/project/asset_canvas.rs
index c3b0bb6bd..7580e4331 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/project/asset_canvas.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/project/asset_canvas.rs
@@ -4378,6 +4378,17 @@ fn recover_asset_canvas_transaction_locked(
                 event,
             ));
         }
+        if find_superseding_asset_canvas_commit(
+            root,
+            &journal,
+            &current_manifest,
+            &current_manifest_sha,
+            &current_revision,
+            &current_revision_sha,
+        )? {
+            return mark_asset_canvas_superseded_locked(root, journal, ledger)
+                .map(|outcome| (outcome, None));
+        }
         return mark_asset_canvas_reconciliation_locked(root, journal, ledger)
             .map(|outcome| (outcome, None));
     }
diff --git a/apps/ai-game-creator-shell/src-tauri/src/project/asset_canvas_tests.rs b/apps/ai-game-creator-shell/src-tauri/src/project/asset_canvas_tests.rs
index 4073066f4..2dbab8594 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/project/asset_canvas_tests.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/project/asset_canvas_tests.rs
@@ -1060,6 +1060,65 @@ fn recovery_marks_interrupted_refine_commit_superseded_by_verified_later_commit(
     commit_asset_canvas_at(fixture.root(), &third_input).expect("commit after superseded recovery");
 }
 
+#[test]
+fn recovery_marks_completed_refine_commit_superseded_by_verified_later_commit() {
+    let (fixture, first_commit_id, second_commit_id) =
+        initialize_refine_fixture_with_later_commit();
+    // initialize_refine_fixture_with_later_commit only forces the first
+    // transaction into the unresolved state. Restore both completed ledgers so
+    // this test models two successful commits followed by a restart.
+    for commit_id in [&first_commit_id, &second_commit_id] {
+        let mut journal = read_asset_canvas_journal(fixture.root(), commit_id)
+            .expect("read completed transaction journal")
+            .expect("completed transaction journal");
+        let mut ledger = read_asset_canvas_ledger(fixture.root(), commit_id)
+            .expect("read completed transaction ledger")
+            .expect("completed transaction ledger");
+        journal.stage = AssetCanvasTransactionStage::Committed;
+        ledger.status = AssetCanvasLedgerStatus::Committed;
+        write_asset_canvas_journal(fixture.root(), &journal)
+            .expect("restore completed journal stage");
+        write_asset_canvas_ledger(fixture.root(), &ledger)
+            .expect("restore completed ledger status");
+    }
+
+    let recovered = recover_asset_canvas_transactions_at(fixture.root(), PROJECT_ID)
+        .expect("recover two completed refine transactions");
+    let first_outcome = recovered
+        .result
+        .outcomes
+        .iter()
+        .find(|outcome| outcome.commit_id == first_commit_id)
+        .expect("first completed outcome");
+    let second_outcome = recovered
+        .result
+        .outcomes
+        .iter()
+        .find(|outcome| outcome.commit_id == second_commit_id)
+        .expect("second completed outcome");
+    assert_eq!(
+        first_outcome.status,
+        RecoverAssetCanvasOutcomeStatus::Superseded
+    );
+    assert_eq!(
+        second_outcome.status,
+        RecoverAssetCanvasOutcomeStatus::AlreadyCommitted
+    );
+    assert!(!recovered.result.outcomes.iter().any(|outcome| {
+        outcome.status == RecoverAssetCanvasOutcomeStatus::ReconciliationRequired
+    }));
+
+    let repeated = recover_asset_canvas_transactions_at(fixture.root(), PROJECT_ID)
+        .expect("repeat recovery after supersede");
+    assert!(repeated.result.outcomes.iter().any(|outcome| {
+        outcome.commit_id == first_commit_id
+            && outcome.status == RecoverAssetCanvasOutcomeStatus::Superseded
+    }));
+    assert!(!repeated.result.outcomes.iter().any(|outcome| {
+        outcome.status == RecoverAssetCanvasOutcomeStatus::ReconciliationRequired
+    }));
+}
+
 #[test]
 fn recovery_does_not_supersede_when_later_transaction_identity_is_broken() {
     let (fixture, first_commit_id, second_commit_id) =
diff --git a/apps/ai-game-creator-shell/src-tauri/src/project/resource_layout.rs b/apps/ai-game-creator-shell/src-tauri/src/project/resource_layout.rs
index 8c587703c..8c87f9403 100644
--- a/apps/ai-game-creator-shell/src-tauri/src/project/resource_layout.rs
+++ b/apps/ai-game-creator-shell/src-tauri/src/project/resource_layout.rs
@@ -12,7 +12,8 @@ const RESOURCE_LAYOUT_LOCK_PATH: &str = ".agent/workbench/resource-layouts/.layo
 const RESOURCE_LAYOUT_MAX_BYTES: usize = 2 * 1024 * 1024;
 const RESOURCE_LAYOUT_MAX_POSITIONS: usize = 4096;
 const RESOURCE_LAYOUT_MAX_RESOURCE_ID_CHARS: usize = 512;
-const RESOURCE_LAYOUT_MAX_COORDINATE: u32 = 1_000_000;
+const RESOURCE_LAYOUT_MIN_COORDINATE: i32 = -1_000_000;
+const RESOURCE_LAYOUT_MAX_COORDINATE: i32 = 1_000_000;
 const RESOURCE_LAYOUT_LOCK_WAIT_ATTEMPTS: usize = 100;
 const RESOURCE_LAYOUT_LOCK_WAIT_MILLIS: u64 = 10;
 
@@ -337,11 +338,13 @@ fn validate_resource_layout_positions(
         if !resource_ids.insert(resource_id) {
             return Err("资源布局 resourceId 不能重复".to_string());
         }
-        if position.x > RESOURCE_LAYOUT_MAX_COORDINATE
+        if position.x < RESOURCE_LAYOUT_MIN_COORDINATE
+            || position.x > RESOURCE_LAYOUT_MAX_COORDINATE
+            || position.y < RESOURCE_LAYOUT_MIN_COORDINATE
             || position.y > RESOURCE_LAYOUT_MAX_COORDINATE
         {
             return Err(format!(
-                "资源布局坐标不能超过 {RESOURCE_LAYOUT_MAX_COORDINATE}"
+                "资源布局坐标必须在 {RESOURCE_LAYOUT_MIN_COORDINATE} 到 {RESOURCE_LAYOUT_MAX_COORDINATE} 之间"
             ));
         }
     }
@@ -526,7 +529,7 @@ mod tests {
         ))
     }
 
-    fn layout_position(id: &str, x: u32) -> ProjectResourceCanvasPosition {
+    fn layout_position(id: &str, x: i32) -> ProjectResourceCanvasPosition {
         ProjectResourceCanvasPosition {
             resource_id: id.to_string(),
             section: shared_contracts::game_creation_app::ProjectResourceCanvasSection::Art,
@@ -883,11 +886,27 @@ mod tests {
             RESOURCE_LAYOUT_MAX_COORDINATE
         );
 
-        let coordinate_error = update_project_resource_canvas_layout_at(
+        let lower_boundary = update_project_resource_canvas_layout_at(
             &root,
             ProjectResourceCanvasLayoutMode::Type,
             "layout-invalid",
             boundary.layout.revision,
+            vec![layout_position(
+                "asset-coordinate-lower-boundary",
+                RESOURCE_LAYOUT_MIN_COORDINATE,
+            )],
+        )
+        .expect("lower boundary coordinate must remain valid");
+        assert_eq!(
+            lower_boundary.layout.positions[0].x,
+            RESOURCE_LAYOUT_MIN_COORDINATE
+        );
+
+        let coordinate_error = update_project_resource_canvas_layout_at(
+            &root,
+            ProjectResourceCanvasLayoutMode::Type,
+            "layout-invalid",
+            lower_boundary.layout.revision,
             vec![layout_position(
                 "asset-coordinate",
                 RESOURCE_LAYOUT_MAX_COORDINATE + 1,
@@ -895,6 +914,18 @@ mod tests {
         )
         .expect_err("oversized coordinate must fail");
         assert!(coordinate_error.contains("坐标"));
+        let lower_coordinate_error = update_project_resource_canvas_layout_at(
+            &root,
+            ProjectResourceCanvasLayoutMode::Type,
+            "layout-invalid",
+            lower_boundary.layout.revision,
+            vec![layout_position(
+                "asset-coordinate-below-lower-boundary",
+                RESOURCE_LAYOUT_MIN_COORDINATE - 1,
+            )],
+        )
+        .expect_err("coordinate below lower boundary must fail");
+        assert!(lower_coordinate_error.contains("坐标"));
         let id_error = update_project_resource_canvas_layout_at(
             &root,
             ProjectResourceCanvasLayoutMode::Type,
diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index e44895373..6dc7e0c63 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -4878,6 +4878,11 @@ iframe.preview-frame {
   box-shadow: var(--platform-panel-shadow);
 }
 
+.game-workbench-stage > .game-resource-manager {
+  grid-row: 3;
+  min-height: 0;
+}
+
 .game-workbench-chat {
   border-color: var(--platform-line-soft);
   box-shadow: var(--platform-nav-active-shadow);
@@ -5005,6 +5010,7 @@ iframe.preview-frame {
 .game-resource-manager {
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
   min-height: 0;
 }
 
@@ -5081,6 +5087,8 @@ iframe.preview-frame {
 .game-resource-canvas {
   position: relative;
   flex: 1;
+  display: flex;
+  flex-direction: column;
   min-height: 0;
   padding: 12px;
   overflow: auto;
@@ -5101,6 +5109,17 @@ iframe.preview-frame {
   cursor: grabbing;
 }
 
+.game-resource-canvas--paged {
+  overflow: hidden;
+  cursor: grab;
+  overscroll-behavior: none;
+  touch-action: none;
+}
+
+.game-resource-canvas--paged:active {
+  cursor: grabbing;
+}
+
 .game-resource-canvas-content {
   position: relative;
   display: grid;
@@ -5116,6 +5135,190 @@ iframe.preview-frame {
   min-height: 0;
 }
 
+.game-resource-canvas-content--paged {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.game-resource-page-shell {
+  display: grid;
+  grid-template-columns: 212px minmax(0, 1fr);
+  gap: 14px;
+  width: 100%;
+  height: 100%;
+}
+
+.game-resource-outline {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 0;
+  padding: 12px 2px;
+  overflow: auto;
+  border-right: 1px solid #eaded8;
+}
+
+.game-resource-outline button {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 6px;
+  min-height: 34px;
+  padding: 0 9px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #725348;
+  cursor: pointer;
+  text-align: left;
+}
+
+.game-resource-outline button:hover,
+.game-resource-outline button:focus-visible,
+.game-resource-outline button.is-active {
+  background: #f6ece6;
+  color: #a9502a;
+  outline: 0;
+}
+
+.game-resource-outline button strong {
+  overflow: hidden;
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.game-resource-outline button small {
+  color: #a98a7c;
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+}
+
+.game-resource-page {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 10px;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.game-resource-page-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 36px;
+  padding: 0 4px;
+}
+
+.game-resource-page-heading span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #6d4b3f;
+  font-size: 13px;
+}
+
+.game-resource-page-heading strong {
+  font-size: 15px;
+}
+
+.game-resource-page-heading small {
+  color: #a98a7c;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+.game-resource-page-canvas {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid #ecdfd8;
+  border-radius: 12px;
+  background:
+    radial-gradient(#eaded8 0.8px, transparent 0.8px) 0 0 / 18px 18px,
+    #fffdfa;
+}
+
+.game-resource-canvas-reset {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 3;
+  display: grid;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid rgb(227 207 197 / 88%);
+  border-radius: 8px;
+  background: rgb(255 253 250 / 88%);
+  color: #8c6252;
+  cursor: pointer;
+  place-items: center;
+  box-shadow: 0 4px 12px rgb(112 70 52 / 10%);
+  backdrop-filter: blur(4px);
+}
+
+.game-resource-canvas-reset:hover,
+.game-resource-canvas-reset:focus-visible {
+  border-color: #ce7650;
+  color: #bd5f37;
+  outline: 2px solid rgb(206 118 80 / 22%);
+  outline-offset: 1px;
+}
+
+.game-resource-page-world {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+}
+
+.game-resource-page-empty {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  padding: 24px;
+  color: #b0958a;
+  font-size: 12px;
+  place-items: center;
+  pointer-events: none;
+}
+
+.game-resource-next-page {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 38px;
+  padding: 0 14px;
+  border: 1px solid #e8d6cc;
+  border-radius: 10px;
+  background: #fff8f4;
+  color: #725348;
+  cursor: pointer;
+}
+
+.game-resource-next-page:hover,
+.game-resource-next-page:focus-visible {
+  border-color: #d6946f;
+  color: #a9502a;
+  outline: 0;
+}
+
+.game-resource-next-page span {
+  color: #a98a7c;
+  font-size: 10px;
+}
+
+.game-resource-next-page strong {
+  font-size: 12px;
+}
+
 .game-resource-section-stack {
   display: contents;
 }
@@ -5374,6 +5577,18 @@ iframe.preview-frame {
   transform: translate3d(var(--resource-x, 0), var(--resource-y, 0), 0);
 }
 
+.game-resource-card {
+  cursor: grab;
+  touch-action: none;
+}
+
+.game-resource-card.is-dragging {
+  cursor: grabbing;
+  box-shadow:
+    0 14px 32px rgb(195 105 62 / 24%),
+    0 0 0 2px rgb(216 115 66 / 24%);
+}
+
 .game-resource-card:hover,
 .game-resource-card:focus-within,
 .game-resource-card.is-selected {
diff --git a/apps/ai-game-creator-shell/src/view/project-development/index.tsx b/apps/ai-game-creator-shell/src/view/project-development/index.tsx
index 0cab0714c..a46a098d9 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/index.tsx
+++ b/apps/ai-game-creator-shell/src/view/project-development/index.tsx
@@ -12,20 +12,15 @@ import {
   Image,
   Info,
   ListFilter,
-  Maximize2,
-  Minus,
   Music2,
   Pause,
   Play,
-  Plus,
   RotateCcw,
   Search,
   Settings2,
   SlidersHorizontal,
   Sparkles,
   X,
-  ZoomIn,
-  ZoomOut,
 } from 'lucide-react';
 import {
   type CSSProperties,
@@ -76,9 +71,13 @@ import {
   type ResourceFocusIntent,
 } from './projectResourceLiveUpdateModel';
 import {
-  constrainResourceCanvasViewport,
   createResourceCanvasCardSizeByResourceId,
-  RESOURCE_CANVAS_BOUNDARY_PADDING,
+  normalizeInfiniteResourceCanvasViewport,
+  RESOURCE_CANVAS_DRAG_THRESHOLD,
+  RESOURCE_CANVAS_FIT_PADDING,
+  RESOURCE_CANVAS_SECTION_MIN_HEIGHT,
+  RESOURCE_CANVAS_SECTION_MIN_WIDTH,
+  RESOURCE_CANVAS_SECTION_ORDER,
   type ResourceCanvasCardSize,
   resourceCanvasCardSize,
   resourceCanvasSectionExtent,
@@ -95,7 +94,10 @@ import {
   type ProjectResourceGraphNodeInput,
   type ProjectResourceGraphReadModel,
 } from './resourceDependencyGraphModel';
-import { ResourceDependencyOverlay } from './ResourceDependencyOverlay';
+import {
+  ResourceDependencyOverlay,
+  type ResourceDependencyOverlayHandle,
+} from './ResourceDependencyOverlay';
 import {
   defaultDerivedResourceName,
   type ProjectResourceEditCapability,
@@ -278,19 +280,52 @@ export type ProjectAgentRuntimeSummary = {
 
 const emptyProjectAgentRuntimeSummaries: ProjectAgentRuntimeSummary[] = [];
 const emptyProjectAgentResults: ProjectAgentResultSummary[] = [];
-const RESOURCE_DEPENDENCY_SECTION_HEADER_HEIGHT = 48;
-const RESOURCE_DEPENDENCY_SECTION_GAP = 56;
+type ResourceCanvasViewportByCategory = Record<
+  ResourceCategory,
+  CanvasViewport
+>;
+
+function defaultResourceCanvasViewports(): ResourceCanvasViewportByCategory {
+  return {
+    document: { x: 48, y: 48, scale: 1 },
+    art: { x: 48, y: 48, scale: 1 },
+    audio: { x: 48, y: 48, scale: 1 },
+    code: { x: 48, y: 48, scale: 1 },
+    version: { x: 48, y: 48, scale: 1 },
+  };
+}
 
 const RESOURCE_CANVAS_FALLBACK_WIDTH = 900;
 const RESOURCE_CANVAS_FALLBACK_HEIGHT = 640;
+const RESOURCE_CANVAS_MIN_DRAG_COORDINATE = -1_000_000;
+const RESOURCE_CANVAS_MAX_DRAG_COORDINATE = 1_000_000;
+
+function normalizeResourceCanvasDragCoordinate(value: number) {
+  return Math.min(
+    RESOURCE_CANVAS_MAX_DRAG_COORDINATE,
+    Math.max(RESOURCE_CANVAS_MIN_DRAG_COORDINATE, Math.round(value)),
+  );
+}
+
+function resourceCanvasViewportElement(element: HTMLElement | null) {
+  const pageCanvas = element?.querySelector<HTMLElement>(
+    '.game-resource-page-canvas',
+  );
+  return pageCanvas ?? element;
+}
 
 function resourceCanvasElementSize(element: HTMLElement | null) {
-  const rect = element?.getBoundingClientRect();
+  const viewportElement = resourceCanvasViewportElement(element);
+  const rect = viewportElement?.getBoundingClientRect();
   return {
     width:
-      element?.clientWidth || rect?.width || RESOURCE_CANVAS_FALLBACK_WIDTH,
+      viewportElement?.clientWidth ||
+      rect?.width ||
+      RESOURCE_CANVAS_FALLBACK_WIDTH,
     height:
-      element?.clientHeight || rect?.height || RESOURCE_CANVAS_FALLBACK_HEIGHT,
+      viewportElement?.clientHeight ||
+      rect?.height ||
+      RESOURCE_CANVAS_FALLBACK_HEIGHT,
   };
 }
 
@@ -325,13 +360,7 @@ export type ProjectDevelopmentViewProps = {
   ) => void;
 };
 
-const categoryOrder: ResourceCategory[] = [
-  'code',
-  'document',
-  'version',
-  'art',
-  'audio',
-];
+const categoryOrder = RESOURCE_CANVAS_SECTION_ORDER;
 
 const categoryLabels: Record<ResourceCategory, string> = {
   code: '游戏代码',
@@ -463,11 +492,16 @@ const ResourceCard = memo(function ResourceCard({
   relationState,
   x,
   y,
+  dragging,
   previewIdentity,
   preview,
   cardSize,
   activeMediaIdentity,
   onSelect,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
   onObservePreview,
   onRequestPreview,
   onPreviewDecodeError,
@@ -480,11 +514,21 @@ const ResourceCard = memo(function ResourceCard({
   relationState: 'version-binding' | null;
   x: number;
   y: number;
+  dragging: boolean;
   previewIdentity: string;
   preview: ProjectResourceCardPreviewState;
   cardSize: ResourceCanvasCardSize;
   activeMediaIdentity: string | null;
   onSelect: (resourceId: string) => void;
+  onPointerDown: (
+    event: ReactPointerEvent<HTMLDivElement>,
+    resource: ProjectResource,
+    x: number,
+    y: number,
+  ) => void;
+  onPointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onPointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onPointerCancel: (event: ReactPointerEvent<HTMLDivElement>) => void;
   onObservePreview: (
     element: HTMLElement,
     resource: ProjectResource,
@@ -694,7 +738,7 @@ const ResourceCard = memo(function ResourceCard({
       ref={cardRef}
       className={`game-resource-card${selected ? ' is-selected' : ''}${
         relationState ? ` is-relation-${relationState}` : ''
-      }`}
+      }${dragging ? ' is-dragging' : ''}`}
       data-preview-kind={kind}
       style={
         {
@@ -704,6 +748,11 @@ const ResourceCard = memo(function ResourceCard({
           '--resource-card-height': `${cardSize.height}px`,
         } as CSSProperties
       }
+      onPointerDown={(event) => onPointerDown(event, resource, x, y)}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerCancel}
+      onClick={() => onSelect(resource.id)}
     >
       <span className="game-resource-card-visual" aria-hidden="true">
         {visual}
@@ -715,7 +764,6 @@ const ResourceCard = memo(function ResourceCard({
         aria-pressed={selected}
         data-resource-id={resource.id}
         title="打开资源详情"
-        onClick={() => onSelect(resource.id)}
       />
       {isMedia ? (
         <button
@@ -723,7 +771,8 @@ const ResourceCard = memo(function ResourceCard({
           className="game-resource-card-media-control"
           aria-label={`${mediaActive ? '暂停' : '播放'} ${resource.label}`}
           aria-pressed={mediaActive}
-          onClick={() => {
+          onClick={(event) => {
+            event.stopPropagation();
             if (!sourceUrl) {
               onRequestPreview(resource, previewIdentity, 'play');
             }
@@ -758,8 +807,10 @@ export default function ProjectDevelopmentView({
   const [mode, setMode] = useState<WorkbenchMode>('resources');
   const [sortMode, setSortMode] = useState<ResourceSortMode>('dependency');
   const [searchText, setSearchText] = useState('');
-  const [resourceCanvasViewport, setResourceCanvasViewport] =
-    useState<CanvasViewport>({ x: 48, y: 48, scale: 1 });
+  const [resourceCanvasViewports, setResourceCanvasViewports] =
+    useState<ResourceCanvasViewportByCategory>(defaultResourceCanvasViewports);
+  const [activeResourceCategory, setActiveResourceCategory] =
+    useState<ResourceCategory | null>(null);
   const [selectedResourceId, setSelectedResourceId] = useState<string | null>(
     null,
   );
@@ -814,13 +865,40 @@ export default function ProjectDevelopmentView({
     element: HTMLMediaElement | null;
   } | null>(null);
   const resourceCanvasRef = useRef<HTMLDivElement>(null);
-  const resourceCanvasViewportRef = useRef(resourceCanvasViewport);
+  const resourceCanvasViewportRef = useRef<CanvasViewport>({
+    x: 48,
+    y: 48,
+    scale: 1,
+  });
+  const resourceCanvasFitKeyRef = useRef<string | null>(null);
+  const resourceCanvasPageWheelRef = useRef({ lastSwitchAt: 0 });
   const resourceCanvasPanRef = useRef<{
     pointerId: number;
     startClientX: number;
     startClientY: number;
     startViewport: CanvasViewport;
   } | null>(null);
+  const resourceCardDragRef = useRef<{
+    pointerId: number;
+    resourceId: string;
+    section: ResourceCategory;
+    startClientX: number;
+    startClientY: number;
+    startScale: number;
+    startX: number;
+    startY: number;
+    changed: boolean;
+    captured: boolean;
+  } | null>(null);
+  const [resourceCardDragPreview, setResourceCardDragPreview] = useState<{
+    resourceId: string;
+    x: number;
+    y: number;
+  } | null>(null);
+  const resourceDependencyOverlayRef =
+    useRef<ResourceDependencyOverlayHandle>(null);
+  const skipNextResourceCardClickRef = useRef<string | null>(null);
+  const skipNextResourceCardClickTimerRef = useRef<number | null>(null);
   const resourceSearchRef = useRef<HTMLInputElement>(null);
   const resourceFocusRef = useRef<HTMLElement>(null);
   const resourceFocusTriggerIdRef = useRef<string | null>(null);
@@ -877,6 +955,29 @@ export default function ProjectDevelopmentView({
   const resourceRecoveryDialogRef = useRef<HTMLElement>(null);
   const dependencyDescriptionId = useId();
 
+  const clearSkippedResourceCardClick = useCallback(() => {
+    if (skipNextResourceCardClickTimerRef.current !== null) {
+      window.clearTimeout(skipNextResourceCardClickTimerRef.current);
+      skipNextResourceCardClickTimerRef.current = null;
+    }
+    skipNextResourceCardClickRef.current = null;
+  }, []);
+
+  const deferSkippedResourceCardClickCleanup = useCallback(
+    (resourceId: string) => {
+      if (skipNextResourceCardClickTimerRef.current !== null) {
+        window.clearTimeout(skipNextResourceCardClickTimerRef.current);
+      }
+      skipNextResourceCardClickTimerRef.current = window.setTimeout(() => {
+        if (skipNextResourceCardClickRef.current === resourceId) {
+          skipNextResourceCardClickRef.current = null;
+        }
+        skipNextResourceCardClickTimerRef.current = null;
+      }, 0);
+    },
+    [],
+  );
+
   currentProjectIdentityRef.current = {
     projectPath,
     projectId: manifest.projectId,
@@ -1223,17 +1324,53 @@ export default function ProjectDevelopmentView({
       ),
     [visibleResources],
   );
+  const projectResourcesByCategory = useMemo(
+    () =>
+      new Map(
+        categoryOrder.map((category) => [
+          category,
+          resources.filter((resource) => resource.category === category),
+        ]),
+      ),
+    [resources],
+  );
+  const resourcePageCategories = useMemo(
+    () => (resources.length > 0 ? categoryOrder : []),
+    [resources.length],
+  );
+  const activePageCategory =
+    resourcePageCategories.find(
+      (category) => category === activeResourceCategory,
+    ) ??
+    resourcePageCategories.find(
+      (category) => (projectResourcesByCategory.get(category)?.length ?? 0) > 0,
+    ) ??
+    resourcePageCategories[0] ??
+    null;
+  const nextPageCategory =
+    activePageCategory && resourcePageCategories.length > 1
+      ? resourcePageCategories[
+          (resourcePageCategories.indexOf(activePageCategory) + 1) %
+            resourcePageCategories.length
+        ]
+      : null;
   const dependencyRelationshipDescriptions = useMemo(() => {
-    if (sortMode !== 'dependency') {
+    if (sortMode !== 'dependency' || !activePageCategory) {
       return [];
     }
     const labelByResourceId = new Map(
       resources.map((resource) => [resource.id, resource.label]),
     );
+    const categoryByResourceId = new Map(
+      resources.map((resource) => [resource.id, resource.category]),
+    );
     const descriptions = new Set(
       resourceGraph.referenceEdges.flatMap((edge) =>
         visibleResourceIds.has(edge.sourceResourceId) &&
-        visibleResourceIds.has(edge.targetResourceId)
+        visibleResourceIds.has(edge.targetResourceId) &&
+        categoryByResourceId.get(edge.sourceResourceId) ===
+          activePageCategory &&
+        categoryByResourceId.get(edge.targetResourceId) === activePageCategory
           ? [
               `${labelByResourceId.get(edge.targetResourceId) ?? edge.targetResourceId} 引用 ${
                 labelByResourceId.get(edge.sourceResourceId) ??
@@ -1244,7 +1381,13 @@ export default function ProjectDevelopmentView({
       ),
     );
     return Array.from(descriptions);
-  }, [resourceGraph, resources, sortMode, visibleResourceIds]);
+  }, [
+    activePageCategory,
+    resourceGraph,
+    resources,
+    sortMode,
+    visibleResourceIds,
+  ]);
   const resourcePositionsByCategory = useMemo(
     () =>
       new Map(
@@ -1270,74 +1413,40 @@ export default function ProjectDevelopmentView({
       ),
     [resourceCardSizeByResourceId, resourcePositionsByCategory],
   );
-  const resourceDependencySectionOriginByCategory = useMemo(() => {
-    let y = 24;
-    const origins = new Map<ResourceCategory, number>();
-    for (const category of categoryOrder) {
-      origins.set(category, y);
-      const extent = resourceBaseExtentByCategory.get(category) ?? {
-        width: 0,
-        height: 0,
-      };
-      y +=
-        RESOURCE_DEPENDENCY_SECTION_HEADER_HEIGHT +
-        Math.max(RESOURCE_DEPENDENCY_SECTION_GAP, extent.height) +
-        RESOURCE_DEPENDENCY_SECTION_GAP;
-    }
-    return origins;
-  }, [resourceBaseExtentByCategory]);
-  const resourceDependencyWorldPositions = useMemo(
-    () =>
-      resourceLayout.positions.map((position) => ({
-        ...position,
-        y:
-          position.y +
-          (resourceDependencySectionOriginByCategory.get(position.section) ??
-            0) +
-          RESOURCE_DEPENDENCY_SECTION_HEADER_HEIGHT,
-      })),
-    [resourceDependencySectionOriginByCategory, resourceLayout.positions],
-  );
-  const resourceCanvasWorldExtent = useMemo(() => {
-    let height = 24;
-    let width = 900;
-    for (const category of categoryOrder) {
-      const extent = resourceBaseExtentByCategory.get(category);
-      width = Math.max(width, (extent?.width ?? 0) + 48);
-      height = Math.max(
-        height,
-        (resourceDependencySectionOriginByCategory.get(category) ?? 0) +
-          RESOURCE_DEPENDENCY_SECTION_HEADER_HEIGHT +
-          (extent?.height ?? 0) +
-          RESOURCE_DEPENDENCY_SECTION_GAP,
-      );
-    }
-    return { width, height };
-  }, [resourceBaseExtentByCategory, resourceDependencySectionOriginByCategory]);
+  const activePageExtent = (activePageCategory
+    ? resourceBaseExtentByCategory.get(activePageCategory)
+    : undefined) ?? {
+    width: RESOURCE_CANVAS_SECTION_MIN_WIDTH,
+    height: RESOURCE_CANVAS_SECTION_MIN_HEIGHT,
+  };
   const resourceCanvasNavigationBounds = useMemo(
     () => ({
       x: 0,
       y: 0,
-      width: resourceCanvasWorldExtent.width,
-      height: resourceCanvasWorldExtent.height,
+      width: activePageExtent.width,
+      height: activePageExtent.height,
     }),
-    [resourceCanvasWorldExtent],
+    [activePageExtent.height, activePageExtent.width],
   );
-  const setConstrainedResourceCanvasViewport = useCallback(
+  const activeResourceCanvasViewport = activePageCategory
+    ? resourceCanvasViewports[activePageCategory]
+    : { x: 48, y: 48, scale: 1 };
+  const setResourceCanvasViewport = useCallback(
     (candidate: CanvasViewport) => {
-      const next = constrainResourceCanvasViewport({
-        bounds: resourceCanvasNavigationBounds,
-        canvasSize: resourceCanvasElementSize(resourceCanvasRef.current),
-        viewport: candidate,
-      });
+      if (!activePageCategory) {
+        return;
+      }
+      const next = normalizeInfiniteResourceCanvasViewport(candidate);
       resourceCanvasViewportRef.current = next;
-      setResourceCanvasViewport((current) =>
-        resourceCanvasViewportsEqual(current, next) ? current : next,
+      setResourceCanvasViewports((current) =>
+        resourceCanvasViewportsEqual(current[activePageCategory], next)
+          ? current
+          : { ...current, [activePageCategory]: next },
       );
     },
-    [resourceCanvasNavigationBounds],
+    [activePageCategory],
   );
-  resourceCanvasViewportRef.current = resourceCanvasViewport;
+  resourceCanvasViewportRef.current = activeResourceCanvasViewport;
   const selectedResource =
     resources.find((resource) => resource.id === selectedResourceId) ?? null;
   const focusedResource =
@@ -1543,6 +1652,34 @@ export default function ProjectDevelopmentView({
     [queueResourceSectionZoomScroll, setResourceSectionZoom],
   );
 
+  const advanceResourceCanvasPage = useCallback(
+    (deltaY: number) => {
+      if (
+        !activePageCategory ||
+        resourcePageCategories.length < 2 ||
+        !Number.isFinite(deltaY) ||
+        Math.abs(deltaY) < 20
+      ) {
+        return;
+      }
+      const now = performance.now();
+      if (now - resourceCanvasPageWheelRef.current.lastSwitchAt < 360) {
+        return;
+      }
+      const index = resourcePageCategories.indexOf(activePageCategory);
+      const nextIndex =
+        (index + (deltaY > 0 ? 1 : -1) + resourcePageCategories.length) %
+        resourcePageCategories.length;
+      const nextCategory = resourcePageCategories[nextIndex];
+      if (!nextCategory) {
+        return;
+      }
+      resourceCanvasPageWheelRef.current.lastSwitchAt = now;
+      setActiveResourceCategory(nextCategory);
+    },
+    [activePageCategory, resourcePageCategories],
+  );
+
   useEffect(() => {
     if (mode !== 'resources' || focusedResourceId !== null) {
       return undefined;
@@ -1559,22 +1696,31 @@ export default function ProjectDevelopmentView({
         : null;
     };
     const wheel = (event: WheelEvent) => {
-      if (sortMode === 'dependency') {
+      const target = event.target instanceof Element ? event.target : null;
+      if (target?.closest('button, input, textarea, select, a')) {
+        return;
+      }
+      if (resourcePageCategories.length > 0) {
         event.preventDefault();
-        const rect = canvas.getBoundingClientRect();
-        const result = resolveViewportFromWheel({
-          viewport: resourceCanvasViewportRef.current,
-          deltaX: event.deltaX,
-          deltaY: event.deltaY,
-          shiftKey: event.shiftKey,
-          ctrlKey: event.ctrlKey,
-          metaKey: event.metaKey,
-          screenPoint: {
-            x: event.clientX - rect.left,
-            y: event.clientY - rect.top,
-          },
-        });
-        setConstrainedResourceCanvasViewport(result.viewport);
+        if (event.ctrlKey || event.metaKey) {
+          const rect =
+            resourceCanvasViewportElement(canvas)!.getBoundingClientRect();
+          const result = resolveViewportFromWheel({
+            viewport: resourceCanvasViewportRef.current,
+            deltaX: event.deltaX,
+            deltaY: event.deltaY,
+            shiftKey: event.shiftKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            screenPoint: {
+              x: event.clientX - rect.left,
+              y: event.clientY - rect.top,
+            },
+          });
+          setResourceCanvasViewport(result.viewport);
+          return;
+        }
+        advanceResourceCanvasPage(event.deltaY);
         return;
       }
       if (!event.ctrlKey && !event.metaKey) {
@@ -1675,36 +1821,61 @@ export default function ProjectDevelopmentView({
       zoomFrames.clear();
     };
   }, [
+    advanceResourceCanvasPage,
     applyAnchoredResourceSectionZoom,
     focusedResourceId,
     mode,
     queueResourceSectionZoomScroll,
-    setConstrainedResourceCanvasViewport,
+    resourcePageCategories.length,
+    setResourceCanvasViewport,
     setResourceSectionZoom,
     sortMode,
   ]);
 
   useLayoutEffect(() => {
-    if (mode !== 'resources' || sortMode !== 'dependency') {
+    if (mode !== 'resources' || !activePageCategory) {
       return undefined;
     }
     const canvas = resourceCanvasRef.current;
     if (!canvas) {
       return undefined;
     }
-    const constrainViewport = () =>
-      setConstrainedResourceCanvasViewport(resourceCanvasViewportRef.current);
-    constrainViewport();
+    const fitKey = `${projectPath}\n${manifest.projectId}\n${sortMode}\n${activePageCategory}`;
+    const canvasSize = resourceCanvasElementSize(canvas);
+    if (resourceCanvasFitKeyRef.current !== fitKey) {
+      resourceCanvasFitKeyRef.current = fitKey;
+      setResourceCanvasViewport(
+        fitViewportToBounds({
+          bounds: resourceCanvasNavigationBounds,
+          canvasSize,
+          padding: RESOURCE_CANVAS_FIT_PADDING,
+        }),
+      );
+    } else {
+      // Resource extents can change after an image finishes measuring or a
+      // card is manually moved. Keep the user's infinite pan/zoom unchanged.
+      setResourceCanvasViewport(resourceCanvasViewportRef.current);
+    }
+    const normalizeViewport = () =>
+      setResourceCanvasViewport(resourceCanvasViewportRef.current);
     const observer = window.ResizeObserver
-      ? new window.ResizeObserver(constrainViewport)
+      ? new window.ResizeObserver(normalizeViewport)
       : null;
     observer?.observe(canvas);
-    window.addEventListener('resize', constrainViewport);
+    window.addEventListener('resize', normalizeViewport);
     return () => {
       observer?.disconnect();
-      window.removeEventListener('resize', constrainViewport);
+      window.removeEventListener('resize', normalizeViewport);
     };
-  }, [mode, setConstrainedResourceCanvasViewport, sortMode]);
+  }, [
+    activePageCategory,
+    manifest.projectId,
+    mode,
+    projectPath,
+    resourceCanvasNavigationBounds,
+    setResourceCanvasViewport,
+    sortMode,
+  ]);
 
   const captureResourceSectionScrollPositions = useCallback(() => {
     const canvas = resourceCanvasRef.current;
@@ -1821,7 +1992,22 @@ export default function ProjectDevelopmentView({
     setSelectedResourceId(null);
     setFocusedResourceId(null);
     restoreResourceListScrollRef.current = false;
-  }, [advanceFocusGeneration, manifest.projectId, projectPath]);
+    setActiveResourceCategory(null);
+    setResourceCanvasViewports(defaultResourceCanvasViewports());
+    resourceCanvasFitKeyRef.current = null;
+    resourceCanvasViewportRef.current =
+      defaultResourceCanvasViewports().document;
+    resourceCanvasPageWheelRef.current.lastSwitchAt = 0;
+    resourceCardDragRef.current = null;
+    resourceCanvasPanRef.current = null;
+    resourceDependencyOverlayRef.current?.clearDragPreview();
+    clearSkippedResourceCardClick();
+  }, [
+    advanceFocusGeneration,
+    clearSkippedResourceCardClick,
+    manifest.projectId,
+    projectPath,
+  ]);
 
   const isCurrentRecoveryProject = useCallback(
     (identity: { projectPath: string; projectId: string }) => {
@@ -2187,6 +2373,10 @@ export default function ProjectDevelopmentView({
 
   const handleResourceSelect = useCallback(
     (resourceId: string) => {
+      if (skipNextResourceCardClickRef.current === resourceId) {
+        clearSkippedResourceCardClick();
+        return;
+      }
       advanceFocusGeneration();
       stopActiveCardMedia();
       captureResourceSectionScrollPositions();
@@ -2201,6 +2391,7 @@ export default function ProjectDevelopmentView({
       advanceFocusGeneration,
       captureResourceListScrollPosition,
       captureResourceSectionScrollPositions,
+      clearSkippedResourceCardClick,
       stopActiveCardMedia,
     ],
   );
@@ -2235,22 +2426,155 @@ export default function ProjectDevelopmentView({
 
   const resetResourceCanvasViewport = useCallback(() => {
     const canvasSize = resourceCanvasElementSize(resourceCanvasRef.current);
-    setConstrainedResourceCanvasViewport(
+    setResourceCanvasViewport(
       fitViewportToBounds({
         bounds: resourceCanvasNavigationBounds,
         canvasSize,
-        padding: RESOURCE_CANVAS_BOUNDARY_PADDING,
+        padding: RESOURCE_CANVAS_FIT_PADDING,
       }),
     );
-  }, [resourceCanvasNavigationBounds, setConstrainedResourceCanvasViewport]);
+  }, [resourceCanvasNavigationBounds, setResourceCanvasViewport]);
+
+  const handleResourceCardPointerDown = useCallback(
+    (
+      event: ReactPointerEvent<HTMLDivElement>,
+      resource: ProjectResource,
+      x: number,
+      y: number,
+    ) => {
+      if (
+        event.button !== 0 ||
+        !activePageCategory ||
+        resource.category !== activePageCategory
+      ) {
+        return;
+      }
+      const scale = resourceCanvasViewportRef.current.scale;
+      if (!Number.isFinite(scale) || scale <= 0) {
+        return;
+      }
+      resourceCardDragRef.current = {
+        pointerId: event.pointerId,
+        resourceId: resource.id,
+        section: resource.category,
+        startClientX: event.clientX,
+        startClientY: event.clientY,
+        startScale: scale,
+        startX: x,
+        startY: y,
+        changed: false,
+        captured: false,
+      };
+    },
+    [activePageCategory],
+  );
+
+  const handleResourceCardPointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      const drag = resourceCardDragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      const deltaX = event.clientX - drag.startClientX;
+      const deltaY = event.clientY - drag.startClientY;
+      if (
+        !drag.changed &&
+        Math.hypot(deltaX, deltaY) < RESOURCE_CANVAS_DRAG_THRESHOLD
+      ) {
+        return;
+      }
+      if (!drag.captured) {
+        drag.captured = true;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        skipNextResourceCardClickRef.current = drag.resourceId;
+      }
+      drag.changed = true;
+      const coordinate = (start: number, delta: number) =>
+        normalizeResourceCanvasDragCoordinate(
+          start + delta / drag.startScale,
+        );
+      const preview = {
+        resourceId: drag.resourceId,
+        x: coordinate(drag.startX, deltaX),
+        y: coordinate(drag.startY, deltaY),
+      };
+      setResourceCardDragPreview(preview);
+      resourceDependencyOverlayRef.current?.updateDragPreview(preview);
+    },
+    [],
+  );
+
+  const finishResourceCardPointerDrag = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>, commit: boolean) => {
+      const drag = resourceCardDragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+      }
+      resourceCardDragRef.current = null;
+      resourceDependencyOverlayRef.current?.clearDragPreview();
+      if (!commit || !drag.changed) {
+        clearSkippedResourceCardClick();
+      } else {
+        deferSkippedResourceCardClickCleanup(drag.resourceId);
+      }
+      const preview = drag.changed
+        ? {
+            resourceId: drag.resourceId,
+            x: normalizeResourceCanvasDragCoordinate(
+              drag.startX +
+                (event.clientX - drag.startClientX) / drag.startScale,
+            ),
+            y: normalizeResourceCanvasDragCoordinate(
+              drag.startY +
+                (event.clientY - drag.startClientY) / drag.startScale,
+            ),
+          }
+        : null;
+      setResourceCardDragPreview(null);
+      if (commit && drag.changed && preview?.resourceId === drag.resourceId) {
+        activeResourceLayout.commitPosition(
+          drag.resourceId,
+          drag.section,
+          preview.x,
+          preview.y,
+        );
+      }
+    },
+    [
+      activeResourceLayout,
+      clearSkippedResourceCardClick,
+      deferSkippedResourceCardClickCleanup,
+    ],
+  );
+
+  const handleResourceCardPointerUp = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      finishResourceCardPointerDrag(event, true);
+    },
+    [finishResourceCardPointerDrag],
+  );
+
+  const handleResourceCardPointerCancel = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      finishResourceCardPointerDrag(event, false);
+    },
+    [finishResourceCardPointerDrag],
+  );
 
   const handleResourceCanvasPointerDown = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
-      if (sortMode !== 'dependency' || event.button !== 0) {
+      if (!activePageCategory || event.button !== 0) {
         return;
       }
       const target = event.target as HTMLElement;
-      if (target.closest('button, input, textarea, select, a')) {
+      if (
+        target.closest(
+          'button, input, textarea, select, a, .game-resource-card',
+        )
+      ) {
         return;
       }
       event.currentTarget.setPointerCapture(event.pointerId);
@@ -2261,7 +2585,7 @@ export default function ProjectDevelopmentView({
         startViewport: resourceCanvasViewportRef.current,
       };
     },
-    [sortMode],
+    [activePageCategory],
   );
 
   const handleResourceCanvasPointerMove = useCallback(
@@ -2270,13 +2594,13 @@ export default function ProjectDevelopmentView({
       if (!pan || pan.pointerId !== event.pointerId) {
         return;
       }
-      setConstrainedResourceCanvasViewport({
+      setResourceCanvasViewport({
         ...pan.startViewport,
         x: pan.startViewport.x + event.clientX - pan.startClientX,
         y: pan.startViewport.y + event.clientY - pan.startClientY,
       });
     },
-    [setConstrainedResourceCanvasViewport],
+    [setResourceCanvasViewport],
   );
 
   const stopResourceCanvasPan = useCallback(
@@ -3130,6 +3454,10 @@ export default function ProjectDevelopmentView({
     const targetResource = intent.resourceId
       ? resources.find((resource) => resource.id === intent.resourceId)
       : undefined;
+    if (targetResource && targetResource.category !== activePageCategory) {
+      setActiveResourceCategory(targetResource.category);
+      return;
+    }
     const targetVisible = intent.resourceId
       ? visibleResourceIds.has(intent.resourceId)
       : false;
@@ -3200,6 +3528,7 @@ export default function ProjectDevelopmentView({
     card.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
     handleResourceSelect(intent.resourceId);
   }, [
+    activePageCategory,
     dependencyLayout.layout.positions,
     dependencyLayout.settled,
     handleResourceSelect,
@@ -3369,16 +3698,6 @@ export default function ProjectDevelopmentView({
                     <ListFilter size={15} aria-hidden="true" />
                     按类型
                   </button>
-                  {sortMode === 'dependency' ? (
-                    <button
-                      type="button"
-                      aria-label="复位资源画布"
-                      title="复位资源画布"
-                      onClick={resetResourceCanvasViewport}
-                    >
-                      <Maximize2 size={15} aria-hidden="true" />
-                    </button>
-                  ) : null}
                 </>
               ) : null}
             </div>
@@ -3789,7 +4108,7 @@ export default function ProjectDevelopmentView({
                 ) : null}
                 <div
                   ref={resourceCanvasRef}
-                  className={`game-resource-canvas game-resource-canvas--${sortMode}`}
+                  className={`game-resource-canvas game-resource-canvas--paged game-resource-canvas--${sortMode}`}
                   aria-label={
                     sortMode === 'dependency' ? '资源依赖视图' : '资源类型视图'
                   }
@@ -3830,139 +4149,224 @@ export default function ProjectDevelopmentView({
                       </ul>
                     </div>
                   ) : null}
-                  <div
-                    className="game-resource-canvas-content"
-                    data-resource-boundary={
-                      sortMode === 'dependency'
-                        ? `${resourceCanvasNavigationBounds.x},${resourceCanvasNavigationBounds.y},${resourceCanvasNavigationBounds.width},${resourceCanvasNavigationBounds.height}`
-                        : undefined
-                    }
-                    data-resource-viewport={
-                      sortMode === 'dependency'
-                        ? `${resourceCanvasViewport.x},${resourceCanvasViewport.y},${resourceCanvasViewport.scale}`
-                        : undefined
-                    }
-                    style={
-                      sortMode === 'dependency'
-                        ? {
-                            width: `${resourceCanvasWorldExtent.width}px`,
-                            height: `${resourceCanvasWorldExtent.height}px`,
-                            transform: `translate(${resourceCanvasViewport.x}px, ${resourceCanvasViewport.y}px) scale(${resourceCanvasViewport.scale})`,
-                            transformOrigin: '0 0',
-                          }
-                        : undefined
-                    }
-                  >
-                    <div
-                      className="game-resource-section-stack"
-                      data-testid={
-                        sortMode === 'dependency'
-                          ? 'resource-dependency-overlay'
-                          : undefined
-                      }
-                    >
-                      {sortMode === 'dependency' ? (
-                        <>
-                          <ResourceDependencyOverlay
-                            key={`${projectPath}:${manifest.projectId}:world`}
-                            graph={resourceGraph}
-                            positions={resourceDependencyWorldPositions}
-                            visibleResourceIds={visibleResourceIds}
-                            cardSizeByResourceId={resourceCardSizeByResourceId}
-                            geometryRevision={`${resourceCanvasWorldExtent.width}@${resourceCanvasWorldExtent.height}`}
-                          />
-                          {categoryOrder.map((category) => {
+                  <div className="game-resource-canvas-content game-resource-canvas-content--paged">
+                    {activePageCategory ? (
+                      <div className="game-resource-page-shell">
+                        <nav
+                          className="game-resource-outline"
+                          aria-label="资源栏目大纲"
+                        >
+                          {resourcePageCategories.map((category) => {
                             const Icon = categoryIcons[category];
-                            const originY =
-                              resourceDependencySectionOriginByCategory.get(
-                                category,
-                              ) ?? 0;
-                            const resourceCount = (
-                              visibleResourcesByCategory.get(category) ?? []
-                            ).length;
+                            const count =
+                              projectResourcesByCategory.get(category)
+                                ?.length ?? 0;
                             return (
-                              <header
-                                className="game-resource-world-section-heading"
+                              <button
                                 key={category}
-                                style={{ top: `${originY}px` }}
+                                type="button"
+                                aria-current={
+                                  category === activePageCategory
+                                    ? 'page'
+                                    : undefined
+                                }
+                                className={
+                                  category === activePageCategory
+                                    ? 'is-active'
+                                    : undefined
+                                }
+                                onClick={() =>
+                                  setActiveResourceCategory(category)
+                                }
                               >
-                                <span>
-                                  <Icon size={16} aria-hidden="true" />
-                                  {categoryLabels[category]}
-                                </span>
-                                <small>{resourceCount} 项</small>
-                              </header>
+                                <Icon size={14} aria-hidden="true" />
+                                <strong>{categoryLabels[category]}</strong>
+                                <small>{count}</small>
+                              </button>
                             );
                           })}
-                          {visibleResources.map((resource) => {
-                            const position = resourcePositionById.get(
-                              resource.id,
-                            );
-                            const previewIdentity =
-                              resourceCardPreviews.identityByResourceId.get(
-                                resource.id,
+                        </nav>
+                        <section
+                          className="game-resource-page"
+                          aria-label={`${categoryLabels[activePageCategory]}资源画布`}
+                        >
+                          <header className="game-resource-page-heading">
+                            {(() => {
+                              const Icon = categoryIcons[activePageCategory];
+                              const categoryResources =
+                                visibleResourcesByCategory.get(
+                                  activePageCategory,
+                                ) ?? [];
+                              return (
+                                <>
+                                  <span>
+                                    <Icon size={18} aria-hidden="true" />
+                                    <strong>
+                                      {categoryLabels[activePageCategory]}
+                                    </strong>
+                                  </span>
+                                  <small>
+                                    {categoryResources.length} /{' '}
+                                    {projectResourcesByCategory.get(
+                                      activePageCategory,
+                                    )?.length ?? 0}{' '}
+                                    项
+                                  </small>
+                                </>
                               );
-                            if (!position || !previewIdentity) {
-                              return null;
-                            }
-                            const worldPosition =
-                              resourceDependencyWorldPositions.find(
-                                (candidate) =>
-                                  candidate.resourceId === resource.id,
-                              ) ?? position;
-                            const relationState =
-                              selectedVersionBindingResourceIds.has(resource.id)
-                                ? 'version-binding'
-                                : null;
-                            return (
-                              <ResourceCard
-                                key={resource.id}
-                                resource={resource}
-                                selected={resource.id === selectedResourceId}
-                                relationState={relationState}
-                                x={worldPosition.x}
-                                y={worldPosition.y}
-                                cardSize={resourceCanvasCardSize(
+                            })()}
+                          </header>
+                          <div
+                            className="game-resource-page-canvas"
+                            data-resource-section-scroll={activePageCategory}
+                            aria-label={`${categoryLabels[activePageCategory]}画布内容`}
+                          >
+                            <button
+                              type="button"
+                              className="game-resource-canvas-reset"
+                              aria-label="复位资源画布"
+                              title="复位资源画布"
+                              onClick={resetResourceCanvasViewport}
+                            >
+                              <RotateCcw size={15} aria-hidden="true" />
+                            </button>
+                            <div
+                              className="game-resource-page-world"
+                              data-resource-boundary={`${resourceCanvasNavigationBounds.x},${resourceCanvasNavigationBounds.y},${resourceCanvasNavigationBounds.width},${resourceCanvasNavigationBounds.height}`}
+                              data-resource-viewport={`${activeResourceCanvasViewport.x},${activeResourceCanvasViewport.y},${activeResourceCanvasViewport.scale}`}
+                              style={{
+                                width: `${resourceCanvasNavigationBounds.width}px`,
+                                height: `${resourceCanvasNavigationBounds.height}px`,
+                                transform: `translate(${activeResourceCanvasViewport.x}px, ${activeResourceCanvasViewport.y}px) scale(${activeResourceCanvasViewport.scale})`,
+                                transformOrigin: '0 0',
+                              }}
+                            >
+                              {sortMode === 'dependency' ? (
+                                <ResourceDependencyOverlay
+                                  ref={resourceDependencyOverlayRef}
+                                  key={`${projectPath}:${manifest.projectId}:${activePageCategory}`}
+                                  graph={resourceGraph}
+                                  positions={
+                                    resourcePositionsByCategory.get(
+                                      activePageCategory,
+                                    ) ?? []
+                                  }
+                                  section={activePageCategory}
+                                  visibleResourceIds={visibleResourceIds}
+                                  cardSizeByResourceId={
+                                    resourceCardSizeByResourceId
+                                  }
+                                  geometryRevision={`${resourceCanvasNavigationBounds.width}@${resourceCanvasNavigationBounds.height}`}
+                                />
+                              ) : null}
+                              {(
+                                visibleResourcesByCategory.get(
+                                  activePageCategory,
+                                ) ?? []
+                              ).map((resource) => {
+                                const position = resourcePositionById.get(
                                   resource.id,
-                                  resourceCardSizeByResourceId,
-                                )}
-                                previewIdentity={previewIdentity}
-                                preview={
-                                  resourceCardPreviews.previews.get(
-                                    previewIdentity,
-                                  ) ?? resourceCardPreviews.idlePreview
+                                );
+                                const previewIdentity =
+                                  resourceCardPreviews.identityByResourceId.get(
+                                    resource.id,
+                                  );
+                                if (!position || !previewIdentity) {
+                                  return null;
                                 }
-                                activeMediaIdentity={activeCardMediaIdentity}
-                                onSelect={handleResourceSelect}
-                                onObservePreview={
-                                  resourceCardPreviews.observePreview
-                                }
-                                onRequestPreview={
-                                  resourceCardPreviews.requestPreview
-                                }
-                                onPreviewDecodeError={
-                                  handleCardPreviewDecodeError
-                                }
-                                onMediaToggle={handleCardMediaToggle}
-                                onMediaReady={handleCardMediaReady}
-                                onMediaPlaybackChange={
-                                  handleCardMediaPlaybackChange
-                                }
-                              />
-                            );
-                          })}
-                        </>
-                      ) : (
-                        categoryOrder.map((category) => {
-                          const categoryResources =
-                            visibleResourcesByCategory.get(category) ?? [];
-                          const baseExtent = resourceBaseExtentByCategory.get(
-                            category,
-                          ) ?? { width: 0, height: 0 };
-                          const extent = {
-                            width: baseExtent.width,
-                            height: baseExtent.height,
-                          };
+                                const relationState =
+                                  selectedVersionBindingResourceIds.has(
+                                    resource.id,
+                                  )
+                                    ? 'version-binding'
+                                    : null;
+                                const dragPreview =
+                                  resourceCardDragPreview?.resourceId ===
+                                  resource.id
+                                    ? resourceCardDragPreview
+                                    : null;
+                                return (
+                                  <ResourceCard
+                                    key={resource.id}
+                                    resource={resource}
+                                    selected={
+                                      resource.id === selectedResourceId
+                                    }
+                                    relationState={relationState}
+                                    x={dragPreview?.x ?? position.x}
+                                    y={dragPreview?.y ?? position.y}
+                                    dragging={dragPreview !== null}
+                                    cardSize={resourceCanvasCardSize(
+                                      resource.id,
+                                      resourceCardSizeByResourceId,
+                                    )}
+                                    previewIdentity={previewIdentity}
+                                    preview={
+                                      resourceCardPreviews.previews.get(
+                                        previewIdentity,
+                                      ) ?? resourceCardPreviews.idlePreview
+                                    }
+                                    activeMediaIdentity={
+                                      activeCardMediaIdentity
+                                    }
+                                    onPointerDown={
+                                      handleResourceCardPointerDown
+                                    }
+                                    onPointerMove={
+                                      handleResourceCardPointerMove
+                                    }
+                                    onPointerUp={handleResourceCardPointerUp}
+                                    onPointerCancel={
+                                      handleResourceCardPointerCancel
+                                    }
+                                    onSelect={handleResourceSelect}
+                                    onObservePreview={
+                                      resourceCardPreviews.observePreview
+                                    }
+                                    onRequestPreview={
+                                      resourceCardPreviews.requestPreview
+                                    }
+                                    onPreviewDecodeError={
+                                      handleCardPreviewDecodeError
+                                    }
+                                    onMediaToggle={handleCardMediaToggle}
+                                    onMediaReady={handleCardMediaReady}
+                                    onMediaPlaybackChange={
+                                      handleCardMediaPlaybackChange
+                                    }
+                                  />
+                                );
+                              })}
+                            </div>
+                            {(
+                              visibleResourcesByCategory.get(
+                                activePageCategory,
+                              ) ?? []
+                            ).length === 0 ? (
+                              <p className="game-resource-page-empty">
+                                没有匹配资源
+                              </p>
+                            ) : null}
+                          </div>
+                          {nextPageCategory ? (
+                            <button
+                              type="button"
+                              className="game-resource-next-page"
+                              onClick={() =>
+                                setActiveResourceCategory(nextPageCategory)
+                              }
+                            >
+                              <span>下一页</span>
+                              <strong>
+                                {categoryLabels[nextPageCategory]}
+                              </strong>
+                            </button>
+                          ) : null}
+                        </section>
+                      </div>
+                    ) : (
+                      <div className="game-resource-section-stack">
+                        {categoryOrder.map((category) => {
                           const Icon = categoryIcons[category];
                           const sectionHeight =
                             resourceSectionHeights.sectionStates.get(category);
@@ -3971,9 +4375,9 @@ export default function ProjectDevelopmentView({
                           }
                           return (
                             <section
+                              key={category}
                               className="game-resource-section"
                               aria-label={categoryLabels[category]}
-                              key={category}
                               style={
                                 {
                                   '--resource-section-height': `${sectionHeight.height}px`,
@@ -3986,225 +4390,16 @@ export default function ProjectDevelopmentView({
                                   <Icon size={16} aria-hidden="true" />
                                   {categoryLabels[category]}
                                 </span>
-                                <div className="game-resource-section-actions">
-                                  <small
-                                    aria-label={`${categoryLabels[category]}资源数量`}
-                                  >
-                                    {categoryResources.length} 项
-                                  </small>
-                                  <div
-                                    className="game-resource-section-height-actions"
-                                    role="group"
-                                    aria-label={`${categoryLabels[category]}分区高度`}
-                                  >
-                                    <button
-                                      type="button"
-                                      aria-label={`缩小${categoryLabels[category]}分区`}
-                                      title={`缩小${categoryLabels[category]}分区高度`}
-                                      disabled={sectionHeight.atMin}
-                                      onClick={() =>
-                                        resourceSectionHeights.updateSectionHeight(
-                                          category,
-                                          'decrease',
-                                        )
-                                      }
-                                    >
-                                      <Minus size={14} aria-hidden="true" />
-                                    </button>
-                                    <button
-                                      type="button"
-                                      aria-label={`恢复${categoryLabels[category]}分区默认尺寸`}
-                                      title={`恢复${categoryLabels[category]}分区默认高度`}
-                                      disabled={sectionHeight.atDefault}
-                                      onClick={() =>
-                                        resourceSectionHeights.updateSectionHeight(
-                                          category,
-                                          'reset',
-                                        )
-                                      }
-                                    >
-                                      <RotateCcw size={13} aria-hidden="true" />
-                                    </button>
-                                    <button
-                                      type="button"
-                                      aria-label={`放大${categoryLabels[category]}分区`}
-                                      title={`增加${categoryLabels[category]}分区高度`}
-                                      disabled={sectionHeight.atMax}
-                                      onClick={() =>
-                                        resourceSectionHeights.updateSectionHeight(
-                                          category,
-                                          'increase',
-                                        )
-                                      }
-                                    >
-                                      <Plus size={14} aria-hidden="true" />
-                                    </button>
-                                  </div>
-                                  <div
-                                    className="game-resource-section-zoom-actions"
-                                    role="group"
-                                    aria-label={`${categoryLabels[category]}内容缩放`}
-                                  >
-                                    <button
-                                      type="button"
-                                      aria-label={`缩小${categoryLabels[category]}内容`}
-                                      title={`缩小${categoryLabels[category]}内容`}
-                                      disabled={sectionHeight.atMinZoom}
-                                      onClick={() =>
-                                        resourceSectionHeights.updateSectionZoom(
-                                          category,
-                                          'decrease',
-                                        )
-                                      }
-                                    >
-                                      <ZoomOut size={14} aria-hidden="true" />
-                                    </button>
-                                    <button
-                                      type="button"
-                                      className="game-resource-section-zoom-value"
-                                      aria-label={`恢复${categoryLabels[category]}内容默认缩放，当前${Math.round(
-                                        sectionHeight.zoom * 100,
-                                      )}%`}
-                                      title={`恢复${categoryLabels[category]}内容为 100%`}
-                                      disabled={sectionHeight.atDefaultZoom}
-                                      onClick={() =>
-                                        resourceSectionHeights.updateSectionZoom(
-                                          category,
-                                          'reset',
-                                        )
-                                      }
-                                    >
-                                      {Math.round(sectionHeight.zoom * 100)}%
-                                    </button>
-                                    <button
-                                      type="button"
-                                      aria-label={`放大${categoryLabels[category]}内容`}
-                                      title={`放大${categoryLabels[category]}内容`}
-                                      disabled={sectionHeight.atMaxZoom}
-                                      onClick={() =>
-                                        resourceSectionHeights.updateSectionZoom(
-                                          category,
-                                          'increase',
-                                        )
-                                      }
-                                    >
-                                      <ZoomIn size={14} aria-hidden="true" />
-                                    </button>
-                                  </div>
-                                </div>
+                                <small>0 项</small>
                               </header>
-                              <div
-                                className="game-resource-section-viewport"
-                                data-resource-section-scroll={category}
-                                aria-label={`${categoryLabels[category]}分区内容`}
-                                tabIndex={0}
-                                onScroll={(event) => {
-                                  resourceSectionScrollPositionsRef.current.set(
-                                    resourceSectionScrollKey(category),
-                                    {
-                                      left: event.currentTarget.scrollLeft,
-                                      top: event.currentTarget.scrollTop,
-                                    },
-                                  );
-                                }}
-                              >
-                                {categoryResources.length > 0 ? (
-                                  <div
-                                    className="game-resource-plane-frame"
-                                    style={{
-                                      width: `${Math.ceil(
-                                        extent.width * sectionHeight.zoom,
-                                      )}px`,
-                                      height: `${Math.ceil(
-                                        extent.height * sectionHeight.zoom,
-                                      )}px`,
-                                    }}
-                                  >
-                                    <div
-                                      className="game-resource-plane"
-                                      data-resource-section-plane={category}
-                                      data-resource-section-scale={
-                                        sectionHeight.zoom
-                                      }
-                                      style={{
-                                        width: `${extent.width}px`,
-                                        height: `${extent.height}px`,
-                                      }}
-                                    >
-                                      {categoryResources.map((resource) => {
-                                        const position =
-                                          resourcePositionById.get(resource.id);
-                                        if (!position) {
-                                          return null;
-                                        }
-                                        const relationState =
-                                          selectedVersionBindingResourceIds.has(
-                                            resource.id,
-                                          )
-                                            ? 'version-binding'
-                                            : null;
-                                        const previewIdentity =
-                                          resourceCardPreviews.identityByResourceId.get(
-                                            resource.id,
-                                          );
-                                        if (!previewIdentity) {
-                                          return null;
-                                        }
-                                        return (
-                                          <ResourceCard
-                                            key={resource.id}
-                                            resource={resource}
-                                            selected={
-                                              resource.id === selectedResourceId
-                                            }
-                                            relationState={relationState}
-                                            x={position.x}
-                                            y={position.y}
-                                            cardSize={resourceCanvasCardSize(
-                                              resource.id,
-                                              resourceCardSizeByResourceId,
-                                            )}
-                                            previewIdentity={previewIdentity}
-                                            preview={
-                                              resourceCardPreviews.previews.get(
-                                                previewIdentity,
-                                              ) ??
-                                              resourceCardPreviews.idlePreview
-                                            }
-                                            activeMediaIdentity={
-                                              activeCardMediaIdentity
-                                            }
-                                            onSelect={handleResourceSelect}
-                                            onObservePreview={
-                                              resourceCardPreviews.observePreview
-                                            }
-                                            onRequestPreview={
-                                              resourceCardPreviews.requestPreview
-                                            }
-                                            onPreviewDecodeError={
-                                              handleCardPreviewDecodeError
-                                            }
-                                            onMediaToggle={
-                                              handleCardMediaToggle
-                                            }
-                                            onMediaReady={handleCardMediaReady}
-                                            onMediaPlaybackChange={
-                                              handleCardMediaPlaybackChange
-                                            }
-                                          />
-                                        );
-                                      })}
-                                    </div>
-                                  </div>
-                                ) : (
-                                  <p>暂无已登记资源</p>
-                                )}
+                              <div className="game-resource-section-viewport">
+                                <p>暂无已登记资源</p>
                               </div>
                             </section>
                           );
-                        })
-                      )}
-                    </div>
+                        })}
+                      </div>
+                    )}
                   </div>
                 </div>
               </div>
diff --git a/apps/ai-game-creator-shell/src/view/project-development/resourceCanvasLayoutModel.ts b/apps/ai-game-creator-shell/src/view/project-development/resourceCanvasLayoutModel.ts
index 64a8451d5..aac5698b8 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/resourceCanvasLayoutModel.ts
+++ b/apps/ai-game-creator-shell/src/view/project-development/resourceCanvasLayoutModel.ts
@@ -6,6 +6,7 @@ import {
 
 import {
   GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE,
+  GAME_CREATION_RESOURCE_LAYOUT_MIN_COORDINATE,
   GAME_CREATION_RESOURCE_LAYOUT_SCHEMA_VERSION,
   type ProjectResourceCanvasLayout,
   type ProjectResourceCanvasLayoutMode,
@@ -29,15 +30,14 @@ export const RESOURCE_CANVAS_TYPE_COLUMNS = 3;
 export const RESOURCE_CANVAS_SECTION_MIN_WIDTH = 620;
 export const RESOURCE_CANVAS_SECTION_MIN_HEIGHT = 108;
 export const RESOURCE_CANVAS_CLUSTER_GAP = 48;
-export const RESOURCE_CANVAS_BOUNDARY_PADDING = 96;
+/**
+ * Initial fit inset only. The resource canvas background itself is infinite;
+ * this value must not be used to clamp a later pan or zoom.
+ */
+export const RESOURCE_CANVAS_FIT_PADDING = 96;
 
-const sectionOrder: ProjectResourceCanvasSection[] = [
-  'code',
-  'document',
-  'version',
-  'art',
-  'audio',
-];
+export const RESOURCE_CANVAS_SECTION_ORDER: readonly ProjectResourceCanvasSection[] =
+  ['document', 'art', 'audio', 'code', 'version'];
 
 export type ResourceCanvasCardSize = {
   width: number;
@@ -65,76 +65,24 @@ function clampResourceCanvasNumber(
 }
 
 /**
- * Keeps the dependency canvas inside the invisible boundary formed by every
- * resource plus a fixed screen-space safety margin. The minimum zoom is the
- * scale at which the whole boundary fits; panning never lets the resource
- * union move beyond the safety margin on either axis.
+ * Normalizes an infinite resource-canvas viewport.
+ *
+ * The canvas has no navigational edge: x/y are intentionally left untouched
+ * so users can pan the background and resources arbitrarily far in any
+ * direction. Only invalid coordinates and the shared image-canvas scale
+ * limits are normalized here.
  */
-export function constrainResourceCanvasViewport({
-  bounds,
-  canvasSize,
-  padding = RESOURCE_CANVAS_BOUNDARY_PADDING,
-  viewport,
-}: {
-  bounds: ResourceCanvasNavigationBounds;
-  canvasSize: { width: number; height: number };
-  padding?: number;
-  viewport: CanvasViewport;
-}): CanvasViewport {
-  const canvasWidth = Math.max(
-    1,
-    Number.isFinite(canvasSize.width) ? canvasSize.width : 1,
-  );
-  const canvasHeight = Math.max(
-    1,
-    Number.isFinite(canvasSize.height) ? canvasSize.height : 1,
-  );
-  const boundsX = Number.isFinite(bounds.x) ? bounds.x : 0;
-  const boundsY = Number.isFinite(bounds.y) ? bounds.y : 0;
-  const boundsWidth = Math.max(
-    1,
-    Number.isFinite(bounds.width) ? bounds.width : 1,
-  );
-  const boundsHeight = Math.max(
-    1,
-    Number.isFinite(bounds.height) ? bounds.height : 1,
-  );
-  const normalizedPadding = Math.max(0, Number.isFinite(padding) ? padding : 0);
-  const horizontalPadding = Math.min(normalizedPadding, (canvasWidth - 1) / 2);
-  const verticalPadding = Math.min(normalizedPadding, (canvasHeight - 1) / 2);
-  const availableWidth = Math.max(1, canvasWidth - horizontalPadding * 2);
-  const availableHeight = Math.max(1, canvasHeight - verticalPadding * 2);
-  const minimumScale = clampResourceCanvasNumber(
-    Math.min(1, availableWidth / boundsWidth, availableHeight / boundsHeight),
-    MIN_SCALE,
-    MAX_SCALE,
-  );
-  const scale = clampResourceCanvasNumber(
-    Number.isFinite(viewport.scale) ? viewport.scale : minimumScale,
-    minimumScale,
-    MAX_SCALE,
-  );
-  const minimumX =
-    canvasWidth - horizontalPadding - (boundsX + boundsWidth) * scale;
-  const maximumX = horizontalPadding - boundsX * scale;
-  const minimumY =
-    canvasHeight - verticalPadding - (boundsY + boundsHeight) * scale;
-  const maximumY = verticalPadding - boundsY * scale;
-  const centeredX = canvasWidth / 2 - (boundsX + boundsWidth / 2) * scale;
-  const centeredY = canvasHeight / 2 - (boundsY + boundsHeight / 2) * scale;
-  const candidateX = Number.isFinite(viewport.x) ? viewport.x : centeredX;
-  const candidateY = Number.isFinite(viewport.y) ? viewport.y : centeredY;
-
+export function normalizeInfiniteResourceCanvasViewport(
+  viewport: CanvasViewport,
+): CanvasViewport {
   return {
-    x:
-      minimumX <= maximumX
-        ? clampResourceCanvasNumber(candidateX, minimumX, maximumX)
-        : centeredX,
-    y:
-      minimumY <= maximumY
-        ? clampResourceCanvasNumber(candidateY, minimumY, maximumY)
-        : centeredY,
-    scale,
+    x: Number.isFinite(viewport.x) ? viewport.x : 0,
+    y: Number.isFinite(viewport.y) ? viewport.y : 0,
+    scale: clampResourceCanvasNumber(
+      Number.isFinite(viewport.scale) ? viewport.scale : 1,
+      MIN_SCALE,
+      MAX_SCALE,
+    ),
   };
 }
 
@@ -1185,7 +1133,7 @@ export function reconcileResourceCanvasLayout(
     resources.map((resource) => [resource.id, resource]),
   );
   const positionsBySection = new Map(
-    sectionOrder.map((section) => [
+    RESOURCE_CANVAS_SECTION_ORDER.map((section) => [
       section,
       [] as ProjectResourceCanvasPosition[],
     ]),
@@ -1202,7 +1150,10 @@ export function reconcileResourceCanvasLayout(
     preserved.map((position) => position.resourceId),
   );
   const newResourcesBySection = new Map(
-    sectionOrder.map((section) => [section, [] as ResourceCanvasItem[]]),
+    RESOURCE_CANVAS_SECTION_ORDER.map((section) => [
+      section,
+      [] as ResourceCanvasItem[],
+    ]),
   );
   for (const resource of resources) {
     if (!preservedIds.has(resource.id)) {
@@ -1210,7 +1161,7 @@ export function reconcileResourceCanvasLayout(
     }
   }
 
-  for (const section of sectionOrder) {
+  for (const section of RESOURCE_CANVAS_SECTION_ORDER) {
     const sectionPositions = positionsBySection.get(section) ?? [];
     const sectionResources = resources.filter(
       (resource) => resource.category === section,
@@ -1255,7 +1206,7 @@ export function reconcileResourceCanvasLayout(
     }
   }
 
-  const ordered = sectionOrder.flatMap((section) =>
+  const ordered = RESOURCE_CANVAS_SECTION_ORDER.flatMap((section) =>
     (positionsBySection.get(section) ?? []).sort(
       (left, right) =>
         left.y - right.y ||
@@ -1283,11 +1234,11 @@ export function moveResourceCanvasPosition(
   const finiteY = Number.isFinite(y) ? y : 0;
   const normalizedX = Math.min(
     GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE,
-    Math.max(0, Math.round(finiteX)),
+    Math.max(GAME_CREATION_RESOURCE_LAYOUT_MIN_COORDINATE, Math.round(finiteX)),
   );
   const normalizedY = Math.min(
     GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE,
-    Math.max(0, Math.round(finiteY)),
+    Math.max(GAME_CREATION_RESOURCE_LAYOUT_MIN_COORDINATE, Math.round(finiteY)),
   );
   return {
     ...layout,
diff --git a/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceSectionHeights.ts b/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceSectionHeights.ts
index e54e5bb08..967be37af 100644
--- a/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceSectionHeights.ts
+++ b/apps/ai-game-creator-shell/src/view/project-development/useProjectResourceSectionHeights.ts
@@ -10,6 +10,7 @@ import type {
   ProjectResourceCanvasLayoutMode,
   ProjectResourceCanvasSection,
 } from '../../../../../packages/shared/src/contracts/gameCreationApp';
+import { RESOURCE_CANVAS_SECTION_ORDER } from './resourceCanvasLayoutModel';
 import {
   clampProjectResourceSectionHeight,
   clampProjectResourceSectionZoom,
@@ -29,13 +30,7 @@ const RESOURCE_LAYOUT_MODES: readonly ProjectResourceCanvasLayoutMode[] = [
   'dependency',
   'type',
 ];
-const RESOURCE_SECTIONS: readonly ProjectResourceCanvasSection[] = [
-  'code',
-  'document',
-  'version',
-  'art',
-  'audio',
-];
+const RESOURCE_SECTIONS = RESOURCE_CANVAS_SECTION_ORDER;
 
 export type ProjectResourceSectionHeightState = {
   height: number;
diff --git a/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts b/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts
index c925dd96f..4185d8e17 100644
--- a/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts
+++ b/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts
@@ -23,7 +23,6 @@ import {
   SupervisorChatOnlyView,
 } from '../../src/features/project-workspace/SupervisorChatOnlyView';
 import {
-  RESOURCE_CANVAS_BOUNDARY_PADDING,
   RESOURCE_CANVAS_CARD_WIDTH,
   RESOURCE_CANVAS_COLUMN_GAP,
   RESOURCE_CANVAS_DEPENDENCY_COLUMN_GAP,
@@ -31,10 +30,6 @@ import {
 import { normalizeProjectResourceGraph } from '../../src/view/project-development/resourceDependencyGraphModel';
 import { ResourceDependencyOverlay } from '../../src/view/project-development/ResourceDependencyOverlay';
 import type { ProjectAgentResultSummary } from '../../src/view/project-development/resourceProjectionModel';
-import {
-  RESOURCE_SECTION_DEFAULT_HEIGHT,
-  RESOURCE_SECTION_HEIGHT_STEP,
-} from '../../src/view/project-development/resourceSectionHeightModel';
 import {
   act,
   agentRuntimeUserInputRequest,
@@ -773,7 +768,7 @@ export function registerProjectWorkbenchFoundationTests() {
     expect(screen.getByRole('article', { name: /发布 Agent/ })).not.toBeNull();
   });
 
-  it('keeps four resource section heights independent across modes, projects, details, and viewport clamps', async () => {
+  it('uses one full-page canvas per resource section with dependency-only guide lines', async () => {
     function addSectionResources(
       manifest: ReturnType<typeof createGameCreationAppManifest>,
     ) {
@@ -812,16 +807,11 @@ export function registerProjectWorkbenchFoundationTests() {
       ];
     }
 
-    const manifestA = createGameCreationAppManifest(
-      'workbench-section-height-a',
-      '分区高度项目甲',
+    const manifest = createGameCreationAppManifest(
+      'workbench-section-pages',
+      '分页资源项目',
     );
-    addSectionResources(manifestA);
-    const manifestB = createGameCreationAppManifest(
-      'workbench-section-height-b',
-      '分区高度项目乙',
-    );
-    addSectionResources(manifestB);
+    addSectionResources(manifest);
     let layoutRevision = 0;
     const invoke = vi.fn(
       async (command: string, args?: Record<string, unknown>) => {
@@ -857,352 +847,266 @@ export function registerProjectWorkbenchFoundationTests() {
     );
     window.__TAURI__ = { core: { invoke } };
 
-    const viewProps = {
-      projectName: manifestA.name,
-      projectPath: '/tmp/workbench-section-height-a',
-      manifest: manifestA,
-      attachments: [],
-      recentRunStatus: null,
-      recentRunStopReason: null,
-      supervisor: React.createElement('div', null, '项目总控'),
-      onHomeOpen: vi.fn(),
-      onProjectsOpen: vi.fn(),
-    };
-    const rendered = render(
-      React.createElement(ProjectDevelopmentView, viewProps),
+    render(
+      React.createElement(ProjectDevelopmentView, {
+        projectName: manifest.name,
+        projectPath: '/tmp/workbench-section-pages',
+        manifest,
+        attachments: [],
+        recentRunStatus: null,
+        recentRunStopReason: null,
+        supervisor: React.createElement('div', null, '项目总控'),
+        onHomeOpen: vi.fn(),
+        onProjectsOpen: vi.fn(),
+      }),
     );
+
     const dependencyCanvas = (await screen.findByLabelText(
       '资源依赖视图',
     )) as HTMLDivElement;
-    expect(screen.queryByRole('button', { name: '缩小文档分区' })).toBeNull();
-    expect(screen.queryByRole('button', { name: '放大文档内容' })).toBeNull();
-    expect(
-      dependencyCanvas.querySelector('[data-resource-section-scroll]'),
-    ).toBeNull();
-    expect(
-      dependencyCanvas.querySelector(
-        '[data-testid="resource-dependency-overlay-world"]',
-      ),
-    ).not.toBeNull();
-    expect(dependencyCanvas.scrollLeft).toBe(0);
-    expect(dependencyCanvas.scrollTop).toBe(0);
-
-    const dependencyWorld = dependencyCanvas.querySelector(
-      '.game-resource-canvas-content',
-    ) as HTMLDivElement;
     Object.defineProperties(dependencyCanvas, {
-      clientWidth: { configurable: true, value: 800 },
-      clientHeight: { configurable: true, value: 600 },
-      setPointerCapture: { configurable: true, value: vi.fn() },
-      hasPointerCapture: { configurable: true, value: vi.fn(() => false) },
-      releasePointerCapture: { configurable: true, value: vi.fn() },
+      clientWidth: { configurable: true, get: () => 800 },
+      clientHeight: { configurable: true, get: () => 600 },
     });
-    const initialDependencyTransform = dependencyWorld.style.transform;
-    const ordinaryWheel = new WheelEvent('wheel', {
-      bubbles: true,
-      cancelable: true,
-      deltaX: 24,
-      deltaY: 36,
-      clientX: 120,
-      clientY: 96,
+    const pageCanvas = dependencyCanvas.querySelector<HTMLElement>(
+      '.game-resource-page-canvas',
+    );
+    expect(pageCanvas).not.toBeNull();
+    Object.defineProperties(pageCanvas!, {
+      clientWidth: { configurable: true, get: () => 500 },
+      clientHeight: { configurable: true, get: () => 300 },
     });
-    let ordinaryWheelDispatchResult = true;
-    act(() => {
-      ordinaryWheelDispatchResult =
-        dependencyCanvas.dispatchEvent(ordinaryWheel);
+    const setPointerCapture = vi.fn();
+    const releasePointerCapture = vi.fn();
+    const hasPointerCapture = vi.fn(() => true);
+    Object.defineProperties(dependencyCanvas, {
+      setPointerCapture: { configurable: true, value: setPointerCapture },
+      hasPointerCapture: { configurable: true, value: hasPointerCapture },
+      releasePointerCapture: {
+        configurable: true,
+        value: releasePointerCapture,
+      },
     });
-    expect(ordinaryWheelDispatchResult).toBe(false);
-    expect(ordinaryWheel.defaultPrevented).toBe(true);
+    window.dispatchEvent(new Event('resize'));
+
+    const outline = screen.getByLabelText('资源栏目大纲');
+    expect(
+      Array.from(outline.querySelectorAll('strong')).map(
+        (item) => item.textContent,
+      ),
+    ).toEqual(['文档', '美术资源', '音乐音效资源', '游戏代码', '项目版本']);
+    expect(screen.getByRole('region', { name: '文档资源画布' })).not.toBeNull();
+    expect(
+      screen.getByTestId('resource-dependency-overlay-document'),
+    ).not.toBeNull();
+    expect(
+      screen.getByRole('button', { name: /下一页\s*美术资源/ }),
+    ).not.toBeNull();
+
+    fireEvent.click(within(outline).getByRole('button', { name: /游戏代码/ }));
+    expect(
+      screen.getByRole('region', { name: '游戏代码资源画布' }),
+    ).not.toBeNull();
+    expect(screen.getByText('没有匹配资源')).not.toBeNull();
+    fireEvent.click(within(outline).getByRole('button', { name: /文档/ }));
+
+    const documentWorld = dependencyCanvas.querySelector<HTMLElement>(
+      '[data-resource-viewport]',
+    );
+    expect(documentWorld).not.toBeNull();
     await waitFor(() =>
-      expect(dependencyWorld.style.transform).not.toBe(
-        initialDependencyTransform,
+      expect(documentWorld?.getAttribute('data-resource-viewport')).not.toBe(
+        '48,48,1',
       ),
     );
+    const fittedScale = Number(
+      documentWorld?.getAttribute('data-resource-viewport')?.split(',')[2],
+    );
+    expect(fittedScale).toBeLessThan(0.6);
+    const readViewport = () =>
+      (documentWorld?.getAttribute('data-resource-viewport') ?? '')
+        .split(',')
+        .map(Number);
 
-    const transformAfterPanWheel = dependencyWorld.style.transform;
+    const viewportBeforeZoom = readViewport();
     const zoomWheel = new WheelEvent('wheel', {
       bubbles: true,
       cancelable: true,
       ctrlKey: true,
+      deltaX: 0,
       deltaY: -120,
-      clientX: 240,
-      clientY: 180,
     });
+    let zoomWheelResult = true;
     act(() => {
-      dependencyCanvas.dispatchEvent(zoomWheel);
+      zoomWheelResult = dependencyCanvas.dispatchEvent(zoomWheel);
     });
-    expect(zoomWheel.defaultPrevented).toBe(true);
-    await waitFor(() =>
-      expect(dependencyWorld.style.transform).not.toBe(transformAfterPanWheel),
-    );
+    expect(zoomWheelResult).toBe(false);
+    expect(readViewport()[2]).toBeGreaterThan(viewportBeforeZoom[2]!);
+    expect(screen.getByRole('region', { name: '文档资源画布' })).not.toBeNull();
 
-    const readViewport = () =>
-      (dependencyWorld.dataset.resourceViewport ?? '')
-        .split(',')
-        .map(Number) as [number, number, number];
-    const readBoundary = () =>
-      (dependencyWorld.dataset.resourceBoundary ?? '')
-        .split(',')
-        .map(Number) as [number, number, number, number];
+    const viewportBeforePan = readViewport();
     fireEvent.pointerDown(dependencyCanvas, {
-      pointerId: 41,
       button: 0,
-      clientX: 0,
-      clientY: 0,
-    });
-    fireEvent.pointerMove(dependencyCanvas, {
-      pointerId: 41,
-      clientX: 100_000,
-      clientY: 100_000,
-    });
-    fireEvent.pointerUp(dependencyCanvas, {
-      pointerId: 41,
-      clientX: 100_000,
-      clientY: 100_000,
+      clientX: 100,
+      clientY: 100,
     });
+    fireEvent.pointerMove(dependencyCanvas, { clientX: 30, clientY: 70 });
+    fireEvent.pointerUp(dependencyCanvas);
+    expect(setPointerCapture).toHaveBeenCalled();
     await waitFor(() => {
       const [x, y] = readViewport();
-      expect(x).toBe(RESOURCE_CANVAS_BOUNDARY_PADDING);
-      expect(y).toBe(RESOURCE_CANVAS_BOUNDARY_PADDING);
+      expect(x).toBeLessThan(viewportBeforePan[0]!);
+      expect(y).toBeLessThanOrEqual(viewportBeforePan[1]!);
     });
 
     fireEvent.pointerDown(dependencyCanvas, {
-      pointerId: 42,
       button: 0,
-      clientX: 0,
-      clientY: 0,
+      clientX: 100,
+      clientY: 100,
     });
     fireEvent.pointerMove(dependencyCanvas, {
-      pointerId: 42,
-      clientX: -100_000,
-      clientY: -100_000,
-    });
-    fireEvent.pointerUp(dependencyCanvas, {
-      pointerId: 42,
-      clientX: -100_000,
-      clientY: -100_000,
+      clientX: -5_000,
+      clientY: -5_000,
     });
+    fireEvent.pointerUp(dependencyCanvas);
     await waitFor(() => {
-      const [boundsX, boundsY, boundsWidth, boundsHeight] = readBoundary();
-      const [x, y, scale] = readViewport();
-      expect(x).toBeCloseTo(
-        800 -
-          RESOURCE_CANVAS_BOUNDARY_PADDING -
-          (boundsX + boundsWidth) * scale,
-      );
-      expect(y).toBeCloseTo(
-        600 -
-          RESOURCE_CANVAS_BOUNDARY_PADDING -
-          (boundsY + boundsHeight) * scale,
-      );
+      const [x, y] = readViewport();
+      expect(x).toBeLessThan(-1_000);
+      expect(y).toBeLessThan(-1_000);
     });
 
-    for (let index = 0; index < 80; index += 1) {
-      act(() => {
-        dependencyCanvas.dispatchEvent(
-          new WheelEvent('wheel', {
-            bubbles: true,
-            cancelable: true,
-            ctrlKey: true,
-            deltaY: 120,
-            clientX: 400,
-            clientY: 300,
-          }),
-        );
-      });
-    }
-    await waitFor(() => {
-      const [, , boundsWidth, boundsHeight] = readBoundary();
-      const [, , scale] = readViewport();
-      expect(scale).toBeCloseTo(
-        Math.min(
-          1,
-          (800 - RESOURCE_CANVAS_BOUNDARY_PADDING * 2) / boundsWidth,
-          (600 - RESOURCE_CANVAS_BOUNDARY_PADDING * 2) / boundsHeight,
-        ),
-      );
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: '复位资源画布' }));
-    await waitFor(() =>
-      expect(dependencyWorld.style.transform).not.toBe(transformAfterPanWheel),
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: '按类型' }));
-    const typeCanvas = screen.getByLabelText('资源类型视图') as HTMLDivElement;
-    expect(typeCanvas.scrollLeft).toBe(0);
-    expect(typeCanvas.scrollTop).toBe(0);
-
-    const sectionHeight = (label: string) =>
-      screen
-        .getByRole('region', { name: label })
-        .style.getPropertyValue('--resource-section-height');
-    const sectionZoom = (label: string) =>
-      Number(
-        screen
-          .getByRole('region', { name: label })
-          .querySelector<HTMLElement>('[data-resource-section-plane]')?.dataset
-          .resourceSectionScale ?? 0,
-      );
-    expect(sectionHeight('文档')).toBe(`${RESOURCE_SECTION_DEFAULT_HEIGHT}px`);
-    expect(sectionHeight('项目版本')).toBe(
-      `${RESOURCE_SECTION_DEFAULT_HEIGHT}px`,
-    );
-    expect(sectionHeight('美术资源')).toBe(
-      `${RESOURCE_SECTION_DEFAULT_HEIGHT}px`,
-    );
-    expect(sectionHeight('音乐音效资源')).toBe(
-      `${RESOURCE_SECTION_DEFAULT_HEIGHT}px`,
-    );
-    expect(sectionZoom('文档')).toBe(1);
-    expect(sectionZoom('美术资源')).toBe(1);
-
-    const layoutUpdatesBeforeZoom = invoke.mock.calls.filter(
-      ([command]) => command === 'update_local_project_resource_canvas_layout',
-    ).length;
-    fireEvent.click(screen.getByRole('button', { name: '放大文档内容' }));
-    expect(sectionZoom('文档')).toBe(1.1);
-    expect(sectionZoom('项目版本')).toBe(1);
-    const documentZoomViewport = screen.getByLabelText('文档分区内容');
-    const ordinaryTypeWheel = new WheelEvent('wheel', {
+    const pageWheel = new WheelEvent('wheel', {
       bubbles: true,
       cancelable: true,
       deltaX: 0,
-      deltaY: -100,
+      deltaY: 160,
     });
-    let ordinaryTypeWheelDispatchResult = true;
+    let pageWheelResult = true;
     act(() => {
-      ordinaryTypeWheelDispatchResult =
-        documentZoomViewport.dispatchEvent(ordinaryTypeWheel);
+      pageWheelResult = dependencyCanvas.dispatchEvent(pageWheel);
     });
-    expect(ordinaryTypeWheelDispatchResult).toBe(true);
-    expect(ordinaryTypeWheel.defaultPrevented).toBe(false);
-    expect(sectionZoom('文档')).toBe(1.1);
-    const zoomBeforeWebKitGesture = sectionZoom('文档');
-    const gestureStart = new Event('gesturestart', {
-      bubbles: true,
-      cancelable: true,
-    });
-    Object.defineProperties(gestureStart, {
-      clientX: { value: 0 },
-      clientY: { value: 0 },
-    });
-    const gestureChange = new Event('gesturechange', {
-      bubbles: true,
-      cancelable: true,
-    });
-    Object.defineProperty(gestureChange, 'scale', { value: 1.1 });
-    act(() => {
-      documentZoomViewport.dispatchEvent(gestureStart);
-      documentZoomViewport.dispatchEvent(gestureChange);
-      documentZoomViewport.dispatchEvent(
-        new Event('gestureend', { bubbles: true, cancelable: true }),
-      );
-    });
-    await waitFor(() =>
-      expect(sectionZoom('文档')).toBeGreaterThan(zoomBeforeWebKitGesture),
-    );
-    await act(
-      () =>
-        new Promise<void>((resolve) => {
-          window.requestAnimationFrame(() => resolve());
-        }),
-    );
+    expect(pageWheelResult).toBe(false);
     expect(
-      invoke.mock.calls.filter(
-        ([command]) =>
-          command === 'update_local_project_resource_canvas_layout',
-      ),
-    ).toHaveLength(layoutUpdatesBeforeZoom);
+      screen.getByRole('region', { name: '美术资源资源画布' }),
+    ).not.toBeNull();
+    expect(
+      screen.getByTestId('resource-dependency-overlay-art'),
+    ).not.toBeNull();
+    expect(
+      screen.queryByTestId('resource-dependency-overlay-document'),
+    ).toBeNull();
 
-    const documentDecrease = screen.getByRole('button', {
-      name: '缩小文档分区',
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 380));
     });
-    documentDecrease.focus();
-    const layoutUpdatesBeforeResize = invoke.mock.calls.filter(
-      ([command]) => command === 'update_local_project_resource_canvas_layout',
-    ).length;
-    fireEvent.click(documentDecrease);
-    expect(document.activeElement).toBe(documentDecrease);
-    expect(sectionHeight('文档')).toBe(
-      `${RESOURCE_SECTION_DEFAULT_HEIGHT - RESOURCE_SECTION_HEIGHT_STEP}px`,
-    );
-    expect(sectionHeight('项目版本')).toBe(
-      `${RESOURCE_SECTION_DEFAULT_HEIGHT}px`,
-    );
-    expect(
-      invoke.mock.calls.filter(
-        ([command]) =>
-          command === 'update_local_project_resource_canvas_layout',
-      ),
-    ).toHaveLength(layoutUpdatesBeforeResize);
-
-    typeCanvas.scrollLeft = 52;
-    typeCanvas.scrollTop = 68;
-    fireEvent.scroll(typeCanvas);
-    const documentViewport = screen.getByLabelText(
-      '文档分区内容',
-    ) as HTMLDivElement;
-    documentViewport.scrollTop = 44;
-    documentViewport.scrollLeft = 12;
-    fireEvent.scroll(documentViewport);
-    fireEvent.click(
-      await screen.findByRole('button', {
-        name: /打开资源详情：项目版本 版本 1/,
-      }),
-    );
-    fireEvent.click(screen.getByRole('button', { name: '收起资源' }));
-    const restoredDocumentViewport = screen.getByLabelText(
-      '文档分区内容',
-    ) as HTMLDivElement;
-    expect(restoredDocumentViewport.scrollTop).toBe(44);
-    expect(restoredDocumentViewport.scrollLeft).toBe(12);
-    expect(sectionHeight('文档')).toBe(
-      `${RESOURCE_SECTION_DEFAULT_HEIGHT - RESOURCE_SECTION_HEIGHT_STEP}px`,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: '按依赖' }));
-    expect(
-      (screen.getByLabelText('资源依赖视图') as HTMLDivElement).scrollLeft,
-    ).toBe(0);
-    expect(
-      (screen.getByLabelText('资源依赖视图') as HTMLDivElement).scrollTop,
-    ).toBe(0);
-    expect(screen.queryByRole('button', { name: '放大文档内容' })).toBeNull();
     fireEvent.click(screen.getByRole('button', { name: '按类型' }));
+    const typeCanvas = screen.getByLabelText('资源类型视图') as HTMLDivElement;
     expect(
-      (screen.getByLabelText('资源类型视图') as HTMLDivElement).scrollLeft,
-    ).toBe(52);
+      within(typeCanvas).getByRole('button', { name: '复位资源画布' }),
+    ).not.toBeNull();
     expect(
-      (screen.getByLabelText('资源类型视图') as HTMLDivElement).scrollTop,
-    ).toBe(68);
-    fireEvent.click(
-      screen.getByRole('button', {
-        name: '恢复文档分区默认尺寸',
-      }),
-    );
-    expect(sectionHeight('文档')).toBe(`${RESOURCE_SECTION_DEFAULT_HEIGHT}px`);
+      screen.getByRole('region', { name: '美术资源资源画布' }),
+    ).not.toBeNull();
+    expect(
+      typeCanvas.querySelector('.game-resource-dependency-overlay'),
+    ).toBeNull();
 
-    rendered.rerender(
+    const typePageWheel = new WheelEvent('wheel', {
+      bubbles: true,
+      cancelable: true,
+      deltaX: 0,
+      deltaY: 160,
+    });
+    act(() => {
+      typeCanvas.dispatchEvent(typePageWheel);
+    });
+    expect(
+      screen.getByRole('region', { name: '音乐音效资源资源画布' }),
+    ).not.toBeNull();
+
+    fireEvent.click(within(outline).getByRole('button', { name: /项目版本/ }));
+    expect(
+      screen.getByRole('region', { name: '项目版本资源画布' }),
+    ).not.toBeNull();
+    expect(screen.queryByRole('button', { name: /缩小.*分区/ })).toBeNull();
+    expect(screen.queryByRole('button', { name: /放大.*内容/ })).toBeNull();
+  });
+
+  it('keeps the empty resource overview identical in both modes', async () => {
+    const manifest = createGameCreationAppManifest(
+      'workbench-empty-section-overview',
+      '空资源项目',
+    );
+    window.__TAURI__ = {
+      core: {
+        invoke: vi.fn(
+          async (command: string, args?: Record<string, unknown>) => {
+            if (command === 'read_local_project_resource_graph') {
+              return resourceGraphForInputs(args);
+            }
+            if (command === 'read_local_project_resource_canvas_layout') {
+              return {
+                schemaVersion: 'game-creator-resource-layout.v1',
+                projectId: args?.expectedProjectId,
+                mode: args?.mode,
+                revision: 0,
+                positions: [],
+                updatedAt: 0,
+              };
+            }
+            if (command === 'update_local_project_resource_canvas_layout') {
+              return {
+                status: 'updated',
+                layout: {
+                  schemaVersion: 'game-creator-resource-layout.v1',
+                  projectId: args?.expectedProjectId,
+                  mode: args?.mode,
+                  revision: 1,
+                  positions: args?.positions,
+                  updatedAt: 1,
+                },
+              };
+            }
+            throw new Error(`unexpected invoke ${command}`);
+          },
+        ),
+      },
+    };
+
+    render(
       React.createElement(ProjectDevelopmentView, {
-        ...viewProps,
-        projectName: manifestB.name,
-        projectPath: '/tmp/workbench-section-height-b',
-        manifest: manifestB,
+        projectName: manifest.name,
+        projectPath: '/tmp/workbench-empty-section-overview',
+        manifest,
+        attachments: [],
+        recentRunStatus: null,
+        recentRunStopReason: null,
+        supervisor: React.createElement('div', null, '项目总控'),
+        onHomeOpen: vi.fn(),
+        onProjectsOpen: vi.fn(),
       }),
     );
-    await waitFor(() =>
-      expect(sectionHeight('文档')).toBe(
-        `${RESOURCE_SECTION_DEFAULT_HEIGHT}px`,
-      ),
-    );
-    expect(sectionZoom('文档')).toBe(1);
-    rendered.rerender(React.createElement(ProjectDevelopmentView, viewProps));
-    await waitFor(() =>
-      expect(sectionHeight('文档')).toBe(
-        `${RESOURCE_SECTION_DEFAULT_HEIGHT}px`,
-      ),
-    );
+
+    const assertOverview = () => {
+      expect(screen.queryByLabelText('资源栏目大纲')).toBeNull();
+      expect(screen.getAllByText('暂无已登记资源')).toHaveLength(5);
+      for (const label of [
+        '文档',
+        '美术资源',
+        '音乐音效资源',
+        '游戏代码',
+        '项目版本',
+      ]) {
+        expect(screen.getByRole('region', { name: label })).not.toBeNull();
+      }
+    };
+    await screen.findByRole('region', { name: '文档' });
+    assertOverview();
+    fireEvent.click(screen.getByRole('button', { name: '按类型' }));
+    assertOverview();
+    fireEvent.click(screen.getByRole('button', { name: '按依赖' }));
+    await screen.findByRole('region', { name: '文档' });
+    assertOverview();
   });
 
   it('renders one body-first card system in both layouts and separates detail from single-media playback', async () => {
@@ -1340,8 +1244,15 @@ export function registerProjectWorkbenchFoundationTests() {
     const rendered = render(
       React.createElement(ProjectDevelopmentView, viewProps),
     );
+    const outline = screen.getByLabelText('资源栏目大纲');
+    const showResourcePage = (label: string) => {
+      fireEvent.click(
+        within(outline).getByRole('button', { name: new RegExp(label) }),
+      );
+    };
 
-    const heroDetailButton = await screen.findByRole('button', {
+    showResourcePage('美术资源');
+    let heroDetailButton = await screen.findByRole('button', {
       name: /打开资源详情：美术资源 hero\.png/,
     });
     const heroCard = heroDetailButton.closest('.game-resource-card');
@@ -1351,7 +1262,9 @@ export function registerProjectWorkbenchFoundationTests() {
     expect(
       heroCard?.querySelector('.game-resource-card-open button'),
     ).toBeNull();
-    await waitFor(() => expect(observer.observedCount()).toBe(5));
+    await waitFor(() =>
+      expect(observer.observedCount()).toBeGreaterThanOrEqual(2),
+    );
     act(() => observer.triggerVisible());
 
     await waitFor(() => {
@@ -1360,8 +1273,11 @@ export function registerProjectWorkbenchFoundationTests() {
           ?.querySelector('.game-resource-card-visual > img')
           ?.getAttribute('src'),
       ).toBe('blob:mock-attachment-preview');
-      expect(screen.getByText(/这是安全的卡片正文摘要。/)).not.toBeNull();
     });
+    showResourcePage('文档');
+    act(() => observer.triggerVisible());
+    await screen.findByText(/这是安全的卡片正文摘要。/);
+    showResourcePage('美术资源');
     expect(
       invoke.mock.calls.some(
         ([command, args]) =>
@@ -1398,6 +1314,7 @@ export function registerProjectWorkbenchFoundationTests() {
     expect(stableVideoControl).toBe(pauseVideoControl);
     expect(document.activeElement).toBe(stableVideoControl);
 
+    showResourcePage('音乐音效资源');
     fireEvent.click(screen.getByRole('button', { name: '播放 theme.mp3' }));
     await waitFor(() => {
       expect(
@@ -1412,6 +1329,10 @@ export function registerProjectWorkbenchFoundationTests() {
     expect(pause.mock.instances).toContain(video);
     expect(screen.queryByRole('dialog', { name: 'theme.mp3' })).toBeNull();
 
+    showResourcePage('美术资源');
+    heroDetailButton = await screen.findByRole('button', {
+      name: /打开资源详情：美术资源 hero\.png/,
+    });
     fireEvent.click(heroDetailButton);
     const heroFocus = await screen.findByRole('dialog', { name: 'hero.png' });
     expect(within(heroFocus).getByText('assets/hero.png')).not.toBeNull();
@@ -1427,7 +1348,7 @@ export function registerProjectWorkbenchFoundationTests() {
     );
 
     fireEvent.click(screen.getByRole('button', { name: '按类型' }));
-    await waitFor(() => expect(observer.observedCount()).toBe(5));
+    expect(observer.observedCount()).toBeGreaterThanOrEqual(2);
     act(() => observer.triggerVisible());
     expect(screen.getByLabelText('资源类型视图')).not.toBeNull();
     const typeVideoControl = await screen.findByRole('button', {
@@ -1699,6 +1620,11 @@ export function registerProjectWorkbenchFoundationTests() {
     );
 
     fireEvent.click(screen.getByRole('button', { name: '按类型' }));
+    fireEvent.click(
+      within(screen.getByLabelText('资源栏目大纲')).getByRole('button', {
+        name: /项目版本/,
+      }),
+    );
     const rootVersionButton = screen.getByRole('button', {
       name: /打开资源详情：项目版本 版本 1/,
     });
@@ -1724,6 +1650,11 @@ export function registerProjectWorkbenchFoundationTests() {
     expect(screen.queryByText('asset:asset-removed')).toBeNull();
 
     fireEvent.click(screen.getByRole('button', { name: '收起资源' }));
+    fireEvent.click(
+      within(screen.getByLabelText('资源栏目大纲')).getByRole('button', {
+        name: /美术资源/,
+      }),
+    );
     const playerCard = screen
       .getByRole('button', { name: /player\.png/ })
       .closest('.game-resource-card');
@@ -1817,26 +1748,6 @@ export function registerProjectWorkbenchFoundationTests() {
     });
     const artReceiptCard = artReceiptButton.closest('.game-resource-card');
     expect(artReceiptCard).not.toBeNull();
-    const originalStyle = artReceiptCard?.getAttribute('style');
-    fireEvent.pointerDown(artReceiptButton, {
-      pointerId: 7,
-      button: 0,
-      clientX: 0,
-      clientY: 0,
-    });
-    fireEvent.pointerMove(artReceiptButton, {
-      pointerId: 7,
-      clientX: 240,
-      clientY: 32,
-    });
-    fireEvent.pointerUp(artReceiptButton, {
-      pointerId: 7,
-      clientX: 240,
-      clientY: 32,
-    });
-    fireEvent.pointerCancel(artReceiptButton, { pointerId: 7 });
-    expect(artReceiptCard?.getAttribute('style')).toBe(originalStyle);
-    expect(artReceiptCard?.classList.contains('is-dragging')).toBe(false);
     const styles = readFileSync(
       resolve(process.cwd(), 'apps/ai-game-creator-shell/src/styles.css'),
       'utf8',
@@ -1847,7 +1758,7 @@ export function registerProjectWorkbenchFoundationTests() {
     expect(styles).toMatch(
       /\.game-resource-canvas\s*\{[^}]*user-select:\s*none/s,
     );
-    expect(styles).not.toMatch(/\.game-resource-card\.is-dragging/);
+    expect(styles).toMatch(/\.game-resource-card\.is-dragging/);
 
     fireEvent.click(artReceiptButton);
     const workbenchStage = screen.getByLabelText('项目主视窗');
@@ -2092,6 +2003,11 @@ export function registerProjectWorkbenchFoundationTests() {
     expect(documentFocus.querySelector('a')).toBeNull();
     expect(within(documentFocus).getByText('图片：远程图片')).not.toBeNull();
     expect(documentFocus.hasAttribute('aria-modal')).toBe(false);
+    fireEvent.click(
+      within(screen.getByLabelText('资源栏目大纲')).getByRole('button', {
+        name: /美术资源/,
+      }),
+    );
     fireEvent.click(screen.getByRole('button', { name: /icon\.svg/ }));
     expect(screen.queryByRole('dialog', { name: 'design.md' })).toBeNull();
     const artDetails = await screen.findByRole('dialog', { name: 'icon.svg' });
@@ -2122,6 +2038,11 @@ export function registerProjectWorkbenchFoundationTests() {
       within(videoDetails).getByRole('button', { name: '收起资源' }),
     );
 
+    fireEvent.click(
+      within(screen.getByLabelText('资源栏目大纲')).getByRole('button', {
+        name: /音乐音效资源/,
+      }),
+    );
     fireEvent.click(
       screen.getByRole('button', {
         name: '打开资源详情：音乐音效资源 bgm.mp3',
@@ -2155,6 +2076,11 @@ export function registerProjectWorkbenchFoundationTests() {
       ),
     );
 
+    fireEvent.click(
+      within(screen.getByLabelText('资源栏目大纲')).getByRole('button', {
+        name: /文档/,
+      }),
+    );
     fireEvent.click(screen.getByRole('button', { name: /blocked\.md/ }));
     expect((await screen.findByRole('alert')).textContent).toBe(
       '当前项目策略要求先确认读取文档，确认后请关闭详情并重试',
@@ -2296,7 +2222,7 @@ export function registerProjectWorkbenchFoundationTests() {
     ).toBe(false);
   });
 
-  it('renders, filters, and destroys unified-world resource dependency lines', async () => {
+  it('renders, filters, and destroys section-page resource dependency lines', async () => {
     const manifest = createGameCreationAppManifest(
       'workbench-resource-graph',
       '资源依赖图测试',
@@ -2304,7 +2230,7 @@ export function registerProjectWorkbenchFoundationTests() {
     manifest.assets.push(
       {
         id: 'dependency-spec',
-        kind: 'ui-spec',
+        kind: 'metadata',
         mediaType: 'application/json',
         localPath: 'assets/spec-source.json',
         source: {
@@ -2315,7 +2241,7 @@ export function registerProjectWorkbenchFoundationTests() {
       },
       {
         id: 'dependency-ui',
-        kind: 'ui-prototype',
+        kind: 'metadata',
         mediaType: 'application/json',
         localPath: 'assets/ui-dependency.json',
         source: {
@@ -2500,7 +2426,9 @@ export function registerProjectWorkbenchFoundationTests() {
       }),
     );
 
-    let overlay = await screen.findByTestId('resource-dependency-overlay');
+    let overlay = await screen.findByTestId(
+      'resource-dependency-overlay-document',
+    );
     await waitFor(() => {
       expect(
         overlay.querySelectorAll('[data-edge-kind="asset-reference"]'),
@@ -2514,7 +2442,7 @@ export function registerProjectWorkbenchFoundationTests() {
     expect(descriptionId).not.toBeNull();
     const relationshipDescription = document.getElementById(descriptionId!);
     expect(relationshipDescription?.textContent).toContain(
-      'ui-dependency.json（待视觉验收） 引用 spec-source.json',
+      'ui-dependency.json 引用 spec-source.json',
     );
     expect(
       overlay.querySelector(`[data-edge-id='${crossReferenceId}']`),
@@ -2531,9 +2459,11 @@ export function registerProjectWorkbenchFoundationTests() {
     ).toBe(true);
 
     fireEvent.click(screen.getByRole('button', { name: '按类型' }));
-    expect(screen.queryByTestId('resource-dependency-overlay')).toBeNull();
+    expect(
+      screen.queryByTestId('resource-dependency-overlay-document'),
+    ).toBeNull();
     fireEvent.click(screen.getByRole('button', { name: '按依赖' }));
-    overlay = await screen.findByTestId('resource-dependency-overlay');
+    overlay = await screen.findByTestId('resource-dependency-overlay-document');
 
     const dependencyWorld = dependencyCanvas.querySelector<HTMLElement>(
       '.game-resource-canvas-content',
@@ -2564,7 +2494,16 @@ export function registerProjectWorkbenchFoundationTests() {
       expect(path).not.toBeNull();
       return path?.getAttribute('d');
     });
-    const sourceStyle = sourceCard.getAttribute('style');
+    const sourceCardContainer = sourceCard.closest<HTMLElement>(
+      '.game-resource-card',
+    );
+    expect(sourceCardContainer).not.toBeNull();
+    Object.defineProperties(sourceCardContainer, {
+      setPointerCapture: { configurable: true, value: vi.fn() },
+      hasPointerCapture: { configurable: true, value: vi.fn(() => true) },
+      releasePointerCapture: { configurable: true, value: vi.fn() },
+    });
+    const sourceStyle = sourceCardContainer?.getAttribute('style');
     const layoutUpdatesBeforePointer = invoke.mock.calls.filter(
       ([command]) => command === 'update_local_project_resource_canvas_layout',
     ).length;
@@ -2585,27 +2524,41 @@ export function registerProjectWorkbenchFoundationTests() {
       clientX: 72,
       clientY: 28,
     });
-    fireEvent.pointerCancel(sourceCard, { pointerId: 27 });
-    expect(sourceCard.getAttribute('style')).toBe(sourceStyle);
-    expect(sourceCard.classList.contains('is-dragging')).toBe(false);
-    expect(overlay.querySelector(referenceSelector)?.getAttribute('d')).toBe(
-      firstPath,
-    );
+    await waitFor(() => {
+      expect(sourceCardContainer?.getAttribute('style')).not.toBe(sourceStyle);
+      expect(
+        overlay.querySelector(referenceSelector)?.getAttribute('d'),
+      ).not.toBe(firstPath);
+    });
+    expect(sourceCardContainer?.classList.contains('is-dragging')).toBe(false);
     expect(
       invoke.mock.calls.filter(
         ([command]) =>
           command === 'update_local_project_resource_canvas_layout',
+      ).length,
+    ).toBeGreaterThan(layoutUpdatesBeforePointer);
+    expect(
+      invoke.mock.calls.some(
+        ([command, args]) =>
+          command === 'update_local_project_resource_canvas_layout' &&
+          Array.isArray(args?.positions) &&
+          args.positions.some(
+            (position) =>
+              position.resourceId === 'asset:dependency-spec' &&
+              position.manuallyPlaced,
+          ),
       ),
-    ).toHaveLength(layoutUpdatesBeforePointer);
+    ).toBe(true);
 
-    fireEvent.click(targetCard);
+    fireEvent.click(sourceCardContainer!);
+    fireEvent.click(targetCard.closest('.game-resource-card')!);
     const targetFocus = screen.getByRole('dialog', {
       name: /ui-dependency\.json/u,
     });
     fireEvent.click(
       within(targetFocus).getByRole('button', { name: '收起资源' }),
     );
-    overlay = await screen.findByTestId('resource-dependency-overlay');
+    overlay = await screen.findByTestId('resource-dependency-overlay-document');
     sourceCard = screen.getByRole('button', { name: /spec-source\.json/ });
     await waitFor(() =>
       expect(overlay.querySelector(referenceSelector)).not.toBeNull(),
@@ -2642,9 +2595,6 @@ export function registerProjectWorkbenchFoundationTests() {
         onProjectsOpen: vi.fn(),
       }),
     );
-    const nextOverlay = await screen.findByTestId(
-      'resource-dependency-overlay',
-    );
     expect(previousReferencePaths).not.toHaveLength(0);
     await waitFor(() => {
       expect(
@@ -2652,7 +2602,9 @@ export function registerProjectWorkbenchFoundationTests() {
           (previousReferencePath) => !previousReferencePath.isConnected,
         ),
       ).toBe(true);
-      expect(nextOverlay.querySelector('[data-edge-kind]')).toBeNull();
+      expect(
+        screen.queryByTestId('resource-dependency-overlay-document'),
+      ).toBeNull();
     });
   });
 
@@ -3297,7 +3249,7 @@ export function registerProjectWorkbenchFoundationTests() {
     ).toEqual([]);
   });
 
-  it('restores historical resource positions but never moves or persists them from pointer input', async () => {
+  it('moves historical resource positions from pointer input and persists one manual CAS', async () => {
     const projectId = 'workbench-layout-persistence';
     const projectPath = '/tmp/workbench-layout-persistence';
     const resourceId = 'agent-result:design-foundation:layout-result-run';
@@ -3337,7 +3289,17 @@ export function registerProjectWorkbenchFoundationTests() {
           return structuredClone(persistedLayout);
         }
         if (command === 'update_local_project_resource_canvas_layout') {
-          throw new Error('pointer input must not submit a manual layout CAS');
+          return {
+            status: 'updated',
+            layout: {
+              schemaVersion: 'game-creator-resource-layout.v1',
+              projectId: args?.expectedProjectId,
+              mode: args?.mode,
+              revision: 2,
+              positions: args?.positions,
+              updatedAt: 101,
+            },
+          };
         }
         throw new Error(`unexpected invoke ${command}`);
       },
@@ -3365,12 +3327,14 @@ export function registerProjectWorkbenchFoundationTests() {
     expect(card).not.toBeNull();
     await waitFor(() => {
       expect(card?.getAttribute('style')).toContain('--resource-x: 12px');
-      expect(card?.getAttribute('style')).toContain('--resource-y: 308px');
+      expect(card?.getAttribute('style')).toContain('--resource-y: 24px');
+    });
+    expect(card).not.toBeNull();
+    Object.defineProperties(card, {
+      setPointerCapture: { configurable: true, value: vi.fn() },
+      hasPointerCapture: { configurable: true, value: vi.fn(() => true) },
+      releasePointerCapture: { configurable: true, value: vi.fn() },
     });
-    const originalStyle = card?.getAttribute('style');
-    const layoutUpdatesBeforePointer = invoke.mock.calls.filter(
-      ([command]) => command === 'update_local_project_resource_canvas_layout',
-    ).length;
 
     fireEvent.pointerDown(cardButton, {
       pointerId: 11,
@@ -3380,25 +3344,37 @@ export function registerProjectWorkbenchFoundationTests() {
     });
     fireEvent.pointerMove(cardButton, {
       pointerId: 11,
-      clientX: 100,
+      clientX: -100,
       clientY: 60,
     });
     fireEvent.pointerUp(cardButton, {
       pointerId: 11,
-      clientX: 100,
+      clientX: -100,
       clientY: 60,
     });
-    fireEvent.pointerCancel(cardButton, { pointerId: 11 });
-    expect(card?.getAttribute('style')).toBe(originalStyle);
-    expect(card?.classList.contains('is-dragging')).toBe(false);
-    expect(
-      invoke.mock.calls.filter(
-        ([command]) =>
-          command === 'update_local_project_resource_canvas_layout',
-      ),
-    ).toHaveLength(layoutUpdatesBeforePointer);
+    fireEvent.click(card!);
+    expect(screen.queryByRole('dialog', { name: '布局持久化回执' })).toBeNull();
 
-    fireEvent.click(cardButton);
+    await waitFor(() => {
+      expect(card?.getAttribute('style')).toContain('--resource-x: -108px');
+      expect(card?.getAttribute('style')).toContain('--resource-y: 54px');
+    });
+    expect(invoke).toHaveBeenCalledWith(
+      'update_local_project_resource_canvas_layout',
+      expect.objectContaining({
+        positions: expect.arrayContaining([
+          expect.objectContaining({
+            resourceId,
+            section: 'document',
+            x: -108,
+            y: 54,
+            manuallyPlaced: true,
+          }),
+        ]),
+      }),
+    );
+
+    fireEvent.click(card!);
     expect(
       screen.getByRole('dialog', { name: '布局持久化回执' }),
     ).not.toBeNull();
@@ -3415,11 +3391,170 @@ export function registerProjectWorkbenchFoundationTests() {
         '--resource-x: 12px',
       );
       expect(restoredCard?.getAttribute('style')).toContain(
-        '--resource-y: 308px',
+        '--resource-y: 24px',
       );
     });
   });
 
+  it('opens resource details after a plain pointer press without treating it as a drag', async () => {
+    const projectId = 'workbench-card-click-no-drag';
+    const projectPath = '/tmp/workbench-card-click-no-drag';
+    const manifest = createGameCreationAppManifest(
+      projectId,
+      '卡片点击不误判拖动测试',
+    );
+    manifest.assets.push({
+      id: 'clickable-art',
+      kind: 'character',
+      mediaType: 'image/png',
+      localPath: 'assets/clickable.png',
+      source: { kind: 'generated' },
+    });
+    const invoke = vi.fn(
+      async (command: string, args?: Record<string, unknown>) => {
+        if (command === 'read_local_project_resource_graph') {
+          return resourceGraphForInputs(args);
+        }
+        if (command === 'read_local_project_resource_canvas_layout') {
+          return {
+            schemaVersion: 'game-creator-resource-layout.v1',
+            projectId,
+            mode: args?.mode,
+            revision: 0,
+            positions: [],
+            updatedAt: 0,
+          };
+        }
+        throw new Error(`unexpected invoke ${command}`);
+      },
+    );
+    window.__TAURI__ = { core: { invoke } };
+
+    render(
+      React.createElement(ProjectDevelopmentView, {
+        projectName: '卡片点击不误判拖动测试',
+        projectPath,
+        manifest,
+        attachments: [],
+        supervisor: React.createElement('div', null, '项目总控'),
+      }),
+    );
+
+    const cardButton = await screen.findByRole('button', {
+      name: '打开资源详情：美术资源 clickable.png',
+    });
+    fireEvent.pointerDown(cardButton, {
+      pointerId: 7,
+      button: 0,
+      clientX: 40,
+      clientY: 50,
+    });
+    fireEvent.pointerMove(cardButton, {
+      pointerId: 7,
+      clientX: 42,
+      clientY: 51,
+    });
+    fireEvent.pointerUp(cardButton, {
+      pointerId: 7,
+      clientX: 42,
+      clientY: 51,
+    });
+
+    fireEvent.click(cardButton.closest('.game-resource-card')!);
+    expect(
+      screen.getByRole('dialog', { name: 'clickable.png' }),
+    ).not.toBeNull();
+    expect(
+      invoke.mock.calls.some(
+        ([command, args]) =>
+          command === 'update_local_project_resource_canvas_layout' &&
+          Array.isArray(args?.positions) &&
+          args.positions.some(
+            (position) =>
+              position.resourceId === 'asset:clickable-art' &&
+              position.manuallyPlaced,
+          ),
+      ),
+    ).toBe(false);
+  });
+
+  it('does not leave a stale click suppression after a cancelled card drag', async () => {
+    const projectId = 'workbench-card-drag-cancel';
+    const projectPath = '/tmp/workbench-card-drag-cancel';
+    const manifest = createGameCreationAppManifest(
+      projectId,
+      '卡片拖拽取消点击测试',
+    );
+    manifest.assets.push({
+      id: 'cancelable-art',
+      kind: 'character',
+      mediaType: 'image/png',
+      localPath: 'assets/cancelable.png',
+      source: { kind: 'generated' },
+    });
+    const invoke = vi.fn(
+      async (command: string, args?: Record<string, unknown>) => {
+        if (command === 'read_local_project_resource_graph') {
+          return resourceGraphForInputs(args);
+        }
+        if (command === 'read_local_project_resource_canvas_layout') {
+          return {
+            schemaVersion: 'game-creator-resource-layout.v1',
+            projectId,
+            mode: args?.mode,
+            revision: 0,
+            positions: [],
+            updatedAt: 0,
+          };
+        }
+        throw new Error(`unexpected invoke ${command}`);
+      },
+    );
+    window.__TAURI__ = { core: { invoke } };
+
+    render(
+      React.createElement(ProjectDevelopmentView, {
+        projectName: '卡片拖拽取消点击测试',
+        projectPath,
+        manifest,
+        attachments: [],
+        recentRunStatus: null,
+        recentRunStopReason: null,
+        supervisor: React.createElement('div', null, '项目总控'),
+        onHomeOpen: vi.fn(),
+        onProjectsOpen: vi.fn(),
+      }),
+    );
+
+    const cardButton = await screen.findByRole('button', {
+      name: '打开资源详情：美术资源 cancelable.png',
+    });
+    const card = cardButton.closest<HTMLElement>('.game-resource-card');
+    expect(card).not.toBeNull();
+    Object.defineProperties(card!, {
+      setPointerCapture: { configurable: true, value: vi.fn() },
+      hasPointerCapture: { configurable: true, value: vi.fn(() => true) },
+      releasePointerCapture: { configurable: true, value: vi.fn() },
+    });
+    fireEvent.pointerDown(card, {
+      pointerId: 41,
+      button: 0,
+      clientX: 40,
+      clientY: 50,
+    });
+    fireEvent.pointerMove(card, {
+      pointerId: 41,
+      clientX: 120,
+      clientY: 50,
+    });
+    fireEvent.pointerCancel(card, { pointerId: 41 });
+
+    fireEvent.click(card!);
+    expect(
+      screen.getByRole('dialog', { name: 'cancelable.png' }),
+    ).not.toBeNull();
+  });
+
   it('maps manifest asset kinds into stable type layout ordering', async () => {
     const projectId = 'workbench-layout-asset-subtypes';
     const manifest = createGameCreationAppManifest(
diff --git a/apps/ai-game-creator-shell/tests/resourceCanvasLayoutModel.test.ts b/apps/ai-game-creator-shell/tests/resourceCanvasLayoutModel.test.ts
index 13a2ba3da..68052e45c 100644
--- a/apps/ai-game-creator-shell/tests/resourceCanvasLayoutModel.test.ts
+++ b/apps/ai-game-creator-shell/tests/resourceCanvasLayoutModel.test.ts
@@ -2,14 +2,15 @@ import { describe, expect, it } from 'vitest';
 
 import {
   GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE,
+  GAME_CREATION_RESOURCE_LAYOUT_MIN_COORDINATE,
   isSafeProjectResourceCanvasCoordinate,
 } from '../../../packages/shared/src/contracts/gameCreationApp';
 import {
-  constrainResourceCanvasViewport,
   createEmptyResourceCanvasLayout,
   createResourceCanvasCardSizeByResourceId,
   DEFAULT_RESOURCE_CANVAS_CARD_SIZE,
   moveResourceCanvasPosition,
+  normalizeInfiniteResourceCanvasViewport,
   reconcileResourceCanvasLayout,
   RESOURCE_CANVAS_CARD_HEIGHT,
   RESOURCE_CANVAS_CARD_WIDTH,
@@ -57,44 +58,42 @@ function positionById(
 }
 
 describe('resource canvas layout model', () => {
-  it('clamps dependency-canvas panning to the resource union and safety margin', () => {
-    const common = {
-      bounds: { x: 0, y: 0, width: 1_000, height: 800 },
-      canvasSize: { width: 800, height: 600 },
-    };
-
+  it('allows infinite background panning while keeping zoom within shared limits', () => {
     expect(
-      constrainResourceCanvasViewport({
-        ...common,
-        viewport: { x: 2_000, y: 2_000, scale: 1 },
+      normalizeInfiniteResourceCanvasViewport({
+        x: 2_000,
+        y: 2_000,
+        scale: 1,
       }),
-    ).toEqual({ x: 96, y: 96, scale: 1 });
+    ).toEqual({ x: 2_000, y: 2_000, scale: 1 });
     expect(
-      constrainResourceCanvasViewport({
-        ...common,
-        viewport: { x: -2_000, y: -2_000, scale: 1 },
+      normalizeInfiniteResourceCanvasViewport({
+        x: -2_000,
+        y: -2_000,
+        scale: 0.001,
       }),
-    ).toEqual({ x: -296, y: -296, scale: 1 });
+    ).toEqual({ x: -2_000, y: -2_000, scale: 0.025 });
   });
 
-  it('stops zooming out once all resources and the hidden margin fit', () => {
-    expect(
-      constrainResourceCanvasViewport({
-        bounds: { x: 0, y: 0, width: 1_000, height: 800 },
-        canvasSize: { width: 800, height: 600 },
-        viewport: { x: -800, y: 900, scale: 0.001 },
-      }),
-    ).toEqual({ x: 145, y: 96, scale: 0.51 });
+  it('does not pull the viewport back when resource extents change', () => {
+    const before = normalizeInfiniteResourceCanvasViewport({
+      x: 12_000,
+      y: -9_000,
+      scale: 0.75,
+    });
+    const after = normalizeInfiniteResourceCanvasViewport(before);
+
+    expect(after).toEqual(before);
   });
 
-  it('centers a resource boundary smaller than the viewport instead of allowing blank panning', () => {
+  it('repairs invalid viewport coordinates without adding a canvas boundary', () => {
     expect(
-      constrainResourceCanvasViewport({
-        bounds: { x: 20, y: 30, width: 200, height: 100 },
-        canvasSize: { width: 800, height: 600 },
-        viewport: { x: -5_000, y: 5_000, scale: 1 },
+      normalizeInfiniteResourceCanvasViewport({
+        x: Number.NaN,
+        y: Number.POSITIVE_INFINITY,
+        scale: Number.NaN,
       }),
-    ).toEqual({ x: 280, y: 220, scale: 1 });
+    ).toEqual({ x: 0, y: 0, scale: 1 });
   });
 
   it('creates non-overlapping defaults and keeps the two modes independent', () => {
@@ -179,6 +178,32 @@ describe('resource canvas layout model', () => {
     ).toBe(false);
   });
 
+  it('preserves negative manual positions within the symmetric canvas range', () => {
+    const base = reconcileResourceCanvasLayout(
+      createEmptyResourceCanvasLayout('project-negative', 'type'),
+      [resource('a', 'document')],
+    ).layout;
+    const moved = moveResourceCanvasPosition(
+      base,
+      'a',
+      'document',
+      -123.4,
+      -45.6,
+    );
+
+    expect(moved.positions[0]).toMatchObject({ x: -123, y: -46 });
+    expect(
+      isSafeProjectResourceCanvasCoordinate(
+        GAME_CREATION_RESOURCE_LAYOUT_MIN_COORDINATE,
+      ),
+    ).toBe(true);
+    expect(
+      isSafeProjectResourceCanvasCoordinate(
+        GAME_CREATION_RESOURCE_LAYOUT_MIN_COORDINATE - 1,
+      ),
+    ).toBe(false);
+  });
+
   it('drops a persisted position whose section no longer matches the resource', () => {
     const layout = createEmptyResourceCanvasLayout('project-1', 'dependency');
     layout.positions = [
@@ -555,6 +580,16 @@ describe('resource canvas layout model', () => {
         GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE + 1,
       ),
     ).toBe(false);
+    expect(
+      isSafeProjectResourceCanvasCoordinate(
+        GAME_CREATION_RESOURCE_LAYOUT_MIN_COORDINATE,
+      ),
+    ).toBe(true);
+    expect(
+      isSafeProjectResourceCanvasCoordinate(
+        GAME_CREATION_RESOURCE_LAYOUT_MIN_COORDINATE - 1,
+      ),
+    ).toBe(false);
     expect(deepPositions.map((position) => position.x)).toEqual([
       lastLegalColumn,
       lastLegalColumn,
diff --git a/docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md b/docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md
index 62085469b..9762e8e57 100644
--- a/docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md
+++ b/docs/prd/【AI游戏创作】项目开发工作台PRD-2026-07-20.md
@@ -43,18 +43,18 @@
 ### 3.3 资源布局
 
 - “按依赖”和“按类型”分别保存画布位置。
-- 当前只允许 dependency / type 自动布局与资源卡点击，不提供资源卡手动拖动入口。
+- dependency / type 自动布局与资源卡手动拖动并存；空项目分区展览仍只提供分区空态。
 - 切换布局模式后恢复该模式 sidecar 中已有坐标；历史手动坐标只读恢复，不删除、不重置、不迁移。
 - 新资源首次进入某个布局时才执行默认不重叠排版；已有坐标不得被自动排序覆盖。
 - 依赖布局使用资源生成/引用关系；类型布局按资源大类、子类型、尺寸规格排序。
 - 资源分区由资源投影固定，前端交互不能改变分类。
-- 资源卡手动拖动、拖动持久化、拖动性能与冲突后的重新拖动提示全部暂缓，不作为当前产品合同或验收条件。
+- 非空资源页支持资源卡手动拖动：超过移动阈值后乐观更新坐标与依赖线，结束时提交一次手动布局 CAS；拖动后的点击不触发详情。空画布拖拽仍只平移 viewport。
 
 #### 3.3.1 资源管理三个串行阶段
 
 1. 阶段一“资源卡本体化”：`dependency / type` 两种布局共用同一个资源卡组件和预览调度器。图片与安全 SVG 直接显示主体并保留透明棋盘底；图片卡按真实纵横比在统一边界内计算展示矩形，视频、音频、文档和项目版本继续使用稳定固定卡片。资源详情是叠加在原画板上的非模态独立卡片，以元数据、Rust 权威依赖关系和版本信息为主；打开详情不得卸载“新增资源 / 按依赖 / 按类型”、资源卡、依赖连线或重置 viewport、搜索和排序模式。
-2. 阶段二“分区独立缩放”（已完成）只适用于 `type` 模式，同时包含互不替代的分区可视高度和内容倍率。文档、项目版本、美术资源、音乐音效资源的标题栏分别保留高度减小 / 恢复 / 增大，并新增 `50%..200%` 内容缩放减小 / 百分比复位 / 增大；触摸板捏合、`Ctrl/Cmd + wheel` 与按钮使用同一倍率模型，普通双指滚动仍只滚动。高度与倍率都以 `projectId + type + category` 隔离并只保留在当前会话内存；倍率以分区 viewport 中的手势中心为锚点，逻辑 `x / y` 和媒体比例不变；非图片资源维持 `180×128`，美术图片按真实比例和统一边界计算本体矩形。最小高度固定容纳标题操作与至少一排卡片，最大高度以中央资源画布当前可用高度为上限。分区保持正常文档流，后续分区由外层资源画布滚动访问，单区内容在缩放后仍只在该区内部滚动。两类表现态都不修改 manifest、`game-creator-resource-layout.v1`、布局 CAS 或资源身份，不重建媒体控件、不抢走焦点，也不恢复卡片拖动。`dependency` 模式使用统一世界自由画板，不展示这些分区滚动与缩放操作。
-3. 阶段三“依赖布局聚类”（已完成）：仅在 `dependency` 模式中，按固定资源分类对当前 Rust 只读图返回的同类型精确引用边和同类型聚合任务流做弱连通分组；任务流以流节点连接其成员，绝不展开成资源笛卡尔积，但只作为布局邻近提示，不绘制虚线、不进入画布关系说明。`dependencyDepth` 是唯一横向层级权威；每个相关簇先按“最小深度 -> 最小稳定资源 ID”排序，再在同层进行固定两轮由左至右、由右至左的中位数扫描，平局回退稳定资源 ID；同 SCC/环成员保持连续，环后资源继续按 Rust 深度推进。孤立资源是稳定单例组，紧凑排在相关簇之后，簇之间保持固定留白。跨分类精确引用不参与前端布局邻接，但会在统一世界 SVG 中显示并进入同源的无障碍关系说明；搜索只隐藏卡片及任一端点被隐藏的橙色精确引用边，不重算组或压缩坐标。历史 `manuallyPlaced=true` 坐标继续原样保留并参与自动坐标避让。聚类是可派生表现，不新增 manifest 字段、sidecar schema、SpacetimeDB 表或第二套依赖真相。
+2. 阶段二“分区独立缩放”是历史实现；2026-08-22 起仅在项目完全没有任何资源投影时保留“按类型式分区展览”作为空态。任一栏目出现资源后，`dependency / type` 两种模式均切换为栏目分页画布，默认停留在固定栏目顺序中的第一个非空栏目；大纲展示全部栏目，空栏目计数为 0 且可打开空画布，不再提供分区高度、分区滚动和分区倍率操作。
+3. 阶段三“依赖布局聚类”（已完成）：仅在 `dependency` 模式中，按固定资源分类对当前 Rust 只读图返回的同类型精确引用边和同类型聚合任务流做弱连通分组；任务流以流节点连接其成员，绝不展开成资源笛卡尔积，但只作为布局邻近提示，不绘制虚线、不进入画布关系说明。`dependencyDepth` 是唯一横向层级权威；每个相关簇先按“最小深度 -> 最小稳定资源 ID”排序，再在同层进行固定两轮由左至右、由右至左的中位数扫描，平局回退稳定资源 ID；同 SCC/环成员保持连续，环后资源继续按 Rust 深度推进。孤立资源是稳定单例组，紧凑排在相关簇之后，簇之间保持固定留白。当前栏目内同类型精确引用参与布局并在该栏目 SVG 中显示；跨分类引用不参与布局，也不在分栏画布中强行连线。搜索只隐藏卡片及任一端点被隐藏的橙色精确引用边，不重算组或压缩坐标。历史 `manuallyPlaced=true` 坐标继续原样保留并参与自动坐标避让。聚类是可派生表现，不新增 manifest 字段、sidecar schema、SpacetimeDB 表或第二套依赖真相。
 
 #### 3.3.2 本体化资源卡交互与性能合同
 
@@ -224,7 +224,7 @@ type ProjectWorkbenchViewState = {
 
 ### 5.2 资源画布布局（P1）
 
-实现状态（2026-08-11）：dependency / type 双模式通过项目内 CAS sidecar 独立持久化；dependency 模式由 Tauri Rust 只读构建关系拓扑与确定性依赖深度、前端 SVG 派生几何，图结构和线段均不写入布局 sidecar。依赖图加载完成前设布局初始化屏障，避免以临时 `dependencyDepth=0` 生成并持久化错误坐标。资源总览当前只允许自动布局与资源卡点击，资源卡手动拖动继续暂缓；素材创作无限画布独立支持 viewport 与图层变换，分区高度/倍率与 sidecar 完全分离。
+实现状态（2026-08-22）：dependency / type 双模式通过项目内 CAS sidecar 独立持久化；dependency 模式由 Tauri Rust 只读构建关系拓扑与确定性依赖深度、前端 SVG 派生几何，图结构和线段均不写入布局 sidecar。依赖图加载完成前设布局初始化屏障，避免以临时 `dependencyDepth=0` 生成并持久化错误坐标。非空资源总览支持自动布局、资源卡点击与手动拖动；素材创作无限画布独立支持 viewport 与图层变换，分区高度/倍率与 sidecar 完全分离。
 
 ```ts
 type ProjectResourceCanvasLayout = {
@@ -247,12 +247,12 @@ type ProjectResourceCanvasLayout = {
 
 #### 5.2.1 字段语义
 
-- `x / y` 是相对所属 `section` 内容原点的 CSS 像素坐标，落盘前四舍五入为非负整数；坐标不使用 viewport、页面或资源详情浮层坐标系。
+- `x / y` 是相对所属 `section` 内容原点的 CSS 像素坐标，落盘前四舍五入为整数；坐标不使用 viewport、页面或资源详情浮层坐标系。
 - `updatedAt` 是持久层生成的 Unix 毫秒时间戳，前端不得自行覆盖。
 - `revision` 从 `0` 开始；布局文件不存在时读取接口合成 `revision=0 / positions=[]`，首次成功写入返回 `revision=1`，后续每次成功 CAS 写入递增 `1`。JSON / Tauri / TypeScript 全链路合法范围固定为 `0..=9_007_199_254_740_991`（`Number.MAX_SAFE_INTEGER`），读取、返回或提交负数、小数、非有限值与超限整数都必须失败关闭。
 - 新资源第一次进入某个 mode 时由默认布局写入 `manuallyPlaced=false`。`manuallyPlaced=true` 仅用于兼容历史 sidecar 和保留底层合同；当前界面不会因指针操作新增该值。
 - 同一份布局中 `resourceId` 必须唯一。持久层允许暂时存在当前资源投影中没有的旧 ID，因为 Agent 文本成果等资源可能晚于 manifest 恢复；前端协调后必须在下一次成功写入中清除已确认失效的坐标。
-- 单份布局最多保存 `4096` 个位置，序列化文件不得超过 `2 MiB`；`resourceId` 最多 `512` 个 Unicode 字符，`x / y` 取值范围固定为 `0..=1_000_000`。
+- 单份布局最多保存 `4096` 个位置，序列化文件不得超过 `2 MiB`；`resourceId` 最多 `512` 个 Unicode 字符，`x / y` 取值范围固定为 `-1_000_000..=1_000_000`。
 
 #### 5.2.2 本地存储与业务边界
 
@@ -305,9 +305,9 @@ type UpdateProjectResourceCanvasLayoutResult =
 
 #### 5.2.4 前端布局与协调合同
 
-- 资源卡是可点击按钮，只负责选择资源并让中央主视窗进入当前唯一资源聚焦状态；不得绑定卡片级 `pointerdown / pointermove / pointerup / pointercancel` 拖动处理器。
-- 指针移动不得修改卡片 `x / y`、不得产生拖动预览、不得更新依赖线几何，也不得提交手动布局 CAS。卡片 title、cursor、`touch-action` 和 class 不得暗示可拖动。
-- dependency 默认布局按 Rust 返回的 `dependencyDepth` 形成横向层级；同层仅在所属固定分区内按精确引用、聚合 task-flow 的稳定邻接、连通簇和固定两轮中位数扫描确定纵向次序，随后寻找第一个不重叠位置。task-flow 只作为聚合超边参与分组和排序，不能生成资源两两边。dependency 自动布局使用专用 `48px` 列间走线区和 `40px` 行间走线区；相关簇以本簇最大层行数为高度，资源较少的层在该高度中居中，避免菱形 / 分叉关系一侧极短、另一侧过长。type 默认布局继续使用原有 `16px` 行列间距，并固定按“资源子类型 -> 媒体类型 -> 名称 -> 资源 ID”稳定排序。布局模型的 `subtype` 必填：manifest 资产使用 `asset.kind`，任务产物、导入附件与 Agent 文本成果分别使用稳定的 `task-artifact`、`attachment`、`agent-result`，不得以缺失值或显示文案兜底；资源协调签名必须包含 subtype。卡片尺寸、间距和 `0..=1_000_000` 坐标上限由前后端同名合同维护。超深依赖仍保留原始 `dependencyDepth` 业务真相，但显示坐标在上限列确定性饱和并纵向避让；自动布局在 IPC 前必须保证全部 `x / y` 合法，不能向 Tauri 永久重放必然失败的坐标。
+- 资源卡容器负责拖动，内部“打开详情”和媒体控制仍可点击。Pointer 距离小于 `5px` 时保持点击语义；超过阈值后按当前 viewport scale 换算世界坐标，乐观更新卡片 `x / y`、`is-dragging` class 与依赖线拖动预览。拖动可越过所属 section 原点，坐标允许落在 `-1_000_000..=1_000_000`。
+- 指针释放且拖动已改变时提交一次 `manuallyPlaced=true` 的布局 CAS；pointer cancel 恢复起始坐标且不提交。拖动后的释放点击被抑制，不打开资源详情。
+- dependency 默认布局按 Rust 返回的 `dependencyDepth` 形成横向层级；同层仅在所属固定分区内按精确引用、聚合 task-flow 的稳定邻接、连通簇和固定两轮中位数扫描确定纵向次序，随后寻找第一个不重叠位置。task-flow 只作为聚合超边参与分组和排序，不能生成资源两两边。dependency 自动布局使用专用 `48px` 列间走线区和 `40px` 行间走线区；相关簇以本簇最大层行数为高度，资源较少的层在该高度中居中，避免菱形 / 分叉关系一侧极短、另一侧过长。type 默认布局继续使用原有 `16px` 行列间距，并固定按“资源子类型 -> 媒体类型 -> 名称 -> 资源 ID”稳定排序。布局模型的 `subtype` 必填：manifest 资产使用 `asset.kind`，任务产物、导入附件与 Agent 文本成果分别使用稳定的 `task-artifact`、`attachment`、`agent-result`，不得以缺失值或显示文案兜底；资源协调签名必须包含 subtype。卡片尺寸、间距和 `-1_000_000..=1_000_000` 坐标范围由前后端同名合同维护。超深依赖仍保留原始 `dependencyDepth` 业务真相，但显示坐标在上限列确定性饱和并纵向避让；自动布局在 IPC 前必须保证全部 `x / y` 合法，不能向 Tauri 永久重放必然失败的坐标。
 - type 模式资源集合变化时保留全部仍存在的坐标，只为新 ID 计算默认位置，并删除已确认失效的旧 ID。dependency 模式只永久保留 `manuallyPlaced=true` 的历史坐标；`manuallyPlaced=false` 属于可派生自动位置，在 Rust 关系图首次就绪、`dependencyDepth` 或资源拓扑身份签名（精确引用端点和聚合 task-flow 成员）变化后按最终拓扑确定性重算。签名以稳定资源 ID 的规范端点 / 成员序列生成固定大小摘要，不使用显示名称或浏览器测量值；自动重算不得移动手动坐标，协调结果与持久布局逐项一致时不得产生 CAS 写入。
 - 搜索或筛选只隐藏卡片，不删除、压缩或重排其坐标；清空搜索后恢复原位置。
 - 窗口尺寸变化只改变可视范围和分区滚动边界，不回写或裁切持久坐标。当前客户端继续以 `1280×800` 横屏合同验收。
@@ -317,10 +317,10 @@ type UpdateProjectResourceCanvasLayoutResult =
 - 自动协调 CAS 冲突时直接载入返回的最新布局；仍需协调时可以基于权威 revision 最多追加 `2` 次重试，持续跨窗口写入时不得无限自旋。当前提示只说明“布局已在其他窗口更新”，不得要求用户重新拖动。
 - 缺少 Tauri bridge 的浏览器开发态可以保留当前会话内布局用于界面测试，但不得宣称已经持久保存。
 
-#### 5.2.5 暂缓的手动拖动合同
+#### 5.2.5 手动拖动合同
 
-- Pointer Events 二维拖动、移动阈值、拖动态 class、乐观手动坐标与结束时单次 CAS 提交暂缓。
-- 手动意图折叠、冲突后丢弃旧手动坐标、重新拖动提示和 4096 卡片拖动帧预算暂缓，不进入当前验收。
+- Pointer Events 使用 `5px` 移动阈值，拖动期间指针捕获到卡片，画布普通滚轮仍切栏目，`Ctrl/Cmd + wheel` 仍以真实画布指针位置缩放。
+- 拖动提交沿用现有单写者 FIFO 与 CAS 冲突重试；冲突提示沿用“布局已在其他窗口更新”，用户可重新拖动。历史 `manuallyPlaced=true` 坐标仍优先保留。
 - 已有 Hook 手动意图、命令式 SVG preview、sidecar 字段和 Rust CAS 基础设施可以保留为未接线技术资产；当前资源卡不得调用这些入口。
 
 #### 5.2.6 资源依赖关系图层
@@ -328,8 +328,8 @@ type UpdateProjectResourceCanvasLayoutResult =
 - 阶段五实现状态（2026-08-03）：dependency 自动排列同时消费任务 DAG 与精确资源引用。Rust 把可信 producer 的任务深度作为资源深度下限，再对 `asset-reference` 图做迭代式 SCC 压缩与确定性层级传播；被引用资源位于引用资源之前，同一引用环共享稳定深度，环后资源继续递增，没有引用关系的资源保持默认不重叠位置。布局深度通过独立 `dependencyDepths` 返回，不能把 producer assignment 冒充全部资源的布局结果。
 - `producerMappingTruncated=true` 只关闭依赖有界 Agent DB 审计的 `producerAssignments`、`taskFlows` 和 `cyclicTaskIds`。Rust 返回的 `dependencyDepths` 仍是 manifest / 精确引用 read model 的权威结果，前端必须过滤未知资源、负数、非整数和非安全整数后继续消费；不得因 producer 截断清空全部深度，也不得在前端重算替代深度。`referenceEdges`、connection index 中的 reference 关系、`cyclicResourceIds` 和 unresolved reference 继续保持可信。
 - 图层只在 dependency 模式挂载；type 模式不得渲染 SVG、连线或 marker。切换 mode、切换项目或卸载工作台时必须销毁旧图层，并清理尺寸观察和窗口事件监听。
-- 输入固定为当前资源投影的全部卡片身份 / 统一世界坐标与 Tauri Rust 返回的 `ProjectResourceGraph` 只读 DTO；Rust 负责资源过滤、去重、迭代式环检测、SCC 压缩后的确定性依赖深度、任务流聚合和一跳连接索引，前端只负责 DTO 防御归一化、世界 viewport 变换与原生 SVG path / marker。dependency 内容平面持有一个覆盖统一世界的 SVG，SVG 与卡片直接消费同一世界坐标和 viewport transform；端点主路径不得通过 `getBoundingClientRect` 拼接屏幕坐标。SVG 位于资源卡底层并设置 `pointer-events: none`，不得引入 D3、React Flow 等图表库，也不得阻断卡片点击。
-- `asset-reference` 表示精确资源引用；当前可见端点之间的同分类与跨分类引用都进入统一世界 SVG 和无障碍关系说明，使用明亮橙色实线与实心箭头。只有同分类引用参与自动布局邻接，跨分类引用不形成布局簇或边界偏置。`GameCreationAppAssetManifestEntry.source.referenceResourceIds` 中的外部资源 ID 必须先唯一匹配另一项资产的 `source.resourceId`，再映射为当前资源卡 ID；缺失、重复或已删除的目标均不得渲染幽灵连线。
+- 输入固定为当前栏目资源投影的卡片身份 / 栏目内坐标与 Tauri Rust 返回的 `ProjectResourceGraph` 只读 DTO；Rust 负责资源过滤、去重、迭代式环检测、SCC 压缩后的确定性依赖深度、任务流聚合和一跳连接索引，前端只负责 DTO 防御归一化、当前栏目 viewport 变换与原生 SVG path / marker。dependency 当前栏目持有一个覆盖该栏目内容的 SVG，SVG 与卡片直接消费同一坐标和 viewport transform；端点主路径不得通过 `getBoundingClientRect` 拼接屏幕坐标。SVG 位于资源卡底层并设置 `pointer-events: none`，不得引入 D3、React Flow 等图表库，也不得阻断卡片点击。
+- `asset-reference` 表示精确资源引用；当前可见且两端均属于当前栏目的引用进入该栏目 SVG 和无障碍关系说明，使用明亮橙色实线与实心箭头。只有同分类引用参与自动布局邻接，跨分类引用不形成布局簇、边界偏置或分栏连线。`GameCreationAppAssetManifestEntry.source.referenceResourceIds` 中的外部资源 ID 必须先唯一匹配另一项资产的 `source.resourceId`，再映射为当前资源卡 ID；缺失、重复或已删除的目标均不得渲染幽灵连线。
 - `task-flow` 表示同一资源类型内的任务产物流转，但资源画布不再绘制灰色虚线或任务流 marker，也不把它加入 `aria-describedby` 关系说明。它只按 `sourceTaskId -> targetTaskId + section` 作为聚合超边参与 dependency 连通簇和中位数排序，禁止对上下游资源生成笛卡尔积邻接；详情仍可展示 Rust read model 已证明的任务信息。
 - 画布资产 producer 只能来自 `agent.runtime.canvas.asset_generate` 的 `assetId -> agentId` 审计且 `agentId` 必须存在于当前 manifest；External Editor `source.taskId` 属于平台生成任务命名空间，禁止当作 manifest task ID。证据缺失、冲突或有界审计读取未覆盖时不生成对应 task flow，不猜测归属。
 - 图模型必须对资源引用图和完整任务依赖图做迭代式环检测，不得用无界递归遍历；参与环的可见边保留渲染并标记 cyclic，环本身不能造成重复生成或死循环。
@@ -337,13 +337,13 @@ type UpdateProjectResourceCanvasLayoutResult =
 - 搜索只允许为当前可见端点生成几何；任一精确引用端点隐藏时该橙线隐藏。task-flow 不产生显示几何，搜索也不因此重排布局。
 - 同类型精确引用按稳定边 ID 和对端次序为同一卡片同侧的多条边分配独立端口；横向层级可用时优先左右连接，同列或横向间隙不足时才上下连接。同轴端点直接用直线，需转向时使用正交线段与最大 `10px` 的小圆角，不使用大范围贝塞尔控制柄。端口顺序不使用显示名称、随机数或浏览器枚举顺序，相同输入必须产生相同路径。资源点击只进入中央聚焦并保留当前选中卡片，不改变依赖卡片或连线的颜色、线宽与透明度；关系线始终直接展示，不提供点击后的上下游高亮或无关线弱化。
 - 资源卡 Pointer Move 不改变基础 positions 或 SVG 几何。连线只随布局读取、资源自动协调、搜索、项目切换或 section origin 变化而更新。
-- 统一世界 dependency 平面最多构造一个 `ResizeObserver`；observer 只维护世界 viewport，不测量或重建卡片屏幕端点。世界 extent 必须为最右侧自环和箭头保留视觉 gutter，但不得修改卡片坐标或布局 sidecar。
-- 拖拽、滚轮平移、Ctrl/Meta + 滚轮缩放和窗口 resize 共用单一世界 viewport 变换；原生 `{ passive: false }` wheel 监听在 dependency 模式阻止 WebView 默认滚动或缩放，type 模式普通滚轮继续交给原生分区滚动。项目 / mode 切换或卸载时必须清理 observer、wheel 与 window resize 监听。
+- 当前 dependency 栏目平面最多构造一个 `ResizeObserver`；observer 只维护当前栏目 viewport，不测量或重建卡片屏幕端点。栏目 extent 必须为最右侧自环和箭头保留视觉 gutter，但不得修改卡片坐标或布局 sidecar。
+- 非空资源页的普通滚轮固定切换栏目；拖拽平移、Ctrl/Meta + 滚轮缩放和窗口 resize 共用当前栏目 viewport 变换。原生 `{ passive: false }` wheel 监听必须阻止 WebView 默认滚动或缩放，并对连续滚轮事件做节流。完全空项目的分区展览保留原生分区滚动。项目 / mode 切换或卸载时必须清理 observer、wheel 与 window resize 监听。
 - 阶段五不改变手动位置边界：已有 `manuallyPlaced=true` 坐标原样保留，资源引用新增或变化只允许重新派生 `manuallyPlaced=false` 的自动坐标；任务流继续按任务对与资源分区聚合，禁止为了布局分组生成资源笛卡尔积，且不进入 SVG。
 
 ### 5.3 资源类型与替换兼容性（P1）
 
-实现状态（2026-08-10）：当前资源投影已收口到固定的“文档 -> 项目版本 -> 美术资源 -> 音乐音效资源”四区。文档接收受支持的 UTF-8 文档/代码和合法 Agent 文本回执；项目版本只接收显式 `ProjectVersionResourceSummary` read model，未知任务产物不得兜底为版本；美术接收图片、SVG、动画和视频类产物；音频接收 manifest 资产、上传登记资产和已完成任务 `artifacts` 明确声明的音频产物。无法识别的二进制任务产物和附件不进入资源画布。受控读取、中央聚焦、失败空态与媒体播放不改变 manifest 真相；编辑成功后只追加新的 asset 或版本子记录。
+实现状态（2026-08-22）：当前资源投影与栏目页顺序收口为“文档 -> 美术资源 -> 音乐音效资源 -> 游戏代码 -> 项目版本”。文档接收受支持的 UTF-8 文档、代码资产中的文档类型和合法 Agent 文本回执；项目版本只接收显式 `ProjectVersionResourceSummary` read model，未知任务产物不得兜底为版本；美术接收图片、SVG、动画和视频类产物；音频接收 manifest 资产、上传登记资产和已完成任务 `artifacts` 明确声明的音频产物；游戏代码接收 Direct Codex / 任务产物登记的 HTML、CSS 和 JavaScript。无法识别的二进制任务产物和附件不进入资源画布。受控读取、中央聚焦、失败空态与媒体播放不改变 manifest 真相；编辑成功后只追加新的 asset 或版本子记录。
 
 资源身份固定使用 manifest asset ID、正式 version ID、Agent ID + run ID 或已导入资源稳定路径；显示标题、来源文案变化不得改变 `resourceId`，从而避免布局、依赖边、选择和聚焦状态因改名失效。
 
@@ -456,7 +456,7 @@ type ProjectAgentMudPointAttribution = {
 
 ### P1
 
-- 已实施依赖/类型两套坐标持久化、首次默认不重叠布局、历史坐标跨重启恢复与自动协调 CAS 冲突处理；资源卡手动拖动暂缓。
+- 已实施依赖/类型两套坐标持久化、首次默认不重叠布局、历史坐标跨重启恢复、自动协调 CAS 冲突处理与资源卡手动拖动。
 - 资源关系线在布局持久化验收通过后单独实施，不与本切片捆绑伪造完成。
 - 已实施正式版本不可变模型、版本卡、父子关系与引用资源高亮；“编辑资源”可追加继承源绑定并记录提示词的子版本，资源直接替换、运行版本切换和兼容性迁移仍待后续切片。
 - 素材创作无限画布阶段一按权威专题一次交付图片导入、编辑、生成、导出、草稿恢复、正式本地回写、即时投影和焦点竞态闭环。
@@ -490,25 +490,25 @@ type ProjectAgentMudPointAttribution = {
 
 1. 同一项目在 dependency 与 type mode 分别读取并协调布局，关闭并重启客户端后恢复各自 sidecar 坐标；历史 `manuallyPlaced=true` 坐标保持不变。
 2. 新资源进入任一 mode 时获得不重叠默认位置，现存资源坐标保持逐项不变；删除资源后，下一次成功写入不再包含已确认失效的 ID。
-3. 资源卡 title、cursor、`touch-action` 与 class 只表达可点击；Pointer Down / Move / Up / Cancel 不改变坐标、不产生拖动预览、不提交手动布局 CAS，点击仍打开当前资源详情。
+3. 资源卡 Pointer Down / Move / Up / Cancel 支持移动阈值、拖动预览、依赖线同步与结束时一次手动布局 CAS；未超过阈值或点击媒体控制时保留原点击语义。
 4. 两个窗口基于同一 revision 执行资源自动协调写入时最多一个成功；失败方收到 `conflict` 与最新完整布局，界面不静默覆盖成功方结果。
 5. 布局文件缺失的旧项目可以无迁移打开；损坏、未知 schema、身份冲突、超限和链接文件失败关闭，且原文件不被空布局覆盖。
 6. 布局读写不改变 manifest、游戏项目 mutation revision、Runtime verification、Agent 权限与预览状态。
-7. `1280×720` 最小横屏下全部资源可通过分区滚动访问，不出现页面级横向或纵向溢出，右侧对话和底部 Agent 状态栏保持可见；`1280×800` 继续作为默认窗口基线。
+7. `1280×720` 最小横屏下完全空项目可通过分区展览查看全部栏目，非空项目可通过栏目大纲和滚轮访问全部非空栏目，不出现页面级横向或纵向溢出，右侧对话和底部 Agent 状态栏保持可见；`1280×800` 继续作为默认窗口基线。
 
 ### 7.3 P1 资源依赖关系图验收
 
-1. dependency 模式在统一世界中显示当前可见端点之间的全部合法精确引用，包括跨分类引用，并使用对画布背景至少 `3:1` 对比度的橙色实线箭头；聚合任务流只参与同类型布局，不绘制灰色虚线或 marker。type 模式没有图层或连线。
+1. dependency 模式在当前栏目中显示两端均属于该栏目且当前可见的合法精确引用，并使用对画布背景至少 `3:1` 对比度的橙色实线箭头；聚合任务流只参与同类型布局，不绘制灰色虚线或 marker。type 模式没有图层或连线。
 2. 精确引用只接受唯一有效的外部资源 ID 映射，删除或不存在的资源不产生幽灵连线。
-3. 多资源任务依赖按资源类型拆分后只形成布局超边，以 `O(S+T)` 成员关系参与聚类，不产生 `S×T` 邻接、SVG 主线或端点分支；跨分类精确引用只显示，不参与布局聚类。
+3. 多资源任务依赖按资源类型拆分后只形成布局超边，以 `O(S+T)` 成员关系参与聚类，不产生 `S×T` 邻接、SVG 主线或端点分支；跨分类精确引用不参与布局聚类，也不在分栏画布中显示。
 4. 资源引用环和无资源产物参与的任务环都可被有限遍历识别，界面不死循环。
 5. 搜索触发端点过滤；资源点击不改变上下游卡片或任何连线的视觉状态，资源卡指针移动不更新线段，点击与中央聚焦行为不回归。
 6. 切换布局模式或项目后旧 SVG、ResizeObserver 与窗口监听全部清理；图层从不写入 layout sidecar、manifest 或其它持久化。
-7. 4096 资源链式 fixture 继续验证拓扑、聚合复杂度和自动布局性能；拖动局部更新与真实 Chromium 拖动帧预算暂缓，不作为当前验收条件。最右侧自环与箭头仍需完整显示。
+7. 4096 资源链式 fixture 继续验证拓扑、聚合复杂度和自动布局性能；拖动局部更新只影响当前卡片和依赖线，不重算全图布局。最右侧自环与箭头仍需完整显示。
 8. Rust 图读取延迟时，dependency sidecar 在图进入 `ready / failed` 前没有读取或写入；首次布局直接使用 Rust 返回的最终 producer 与 dependency depth。Agent DB 有界读取截断时 producer、task flow 与 `cyclicTaskIds` 失败关闭，精确 manifest 引用及 Rust 返回的合法 `dependencyDepths` 继续到达布局层。重新打开包含深度 `0 / 1 / 2` 自动坐标的旧布局时不得降成全 `0` 或持久化扁平布局；手动位置逐项不变，自动位置按最终拓扑协调且相同结果不增加 revision。
 9. 依赖 SVG 作为装饰层不可聚焦并对辅助技术隐藏；画布通过关联的视觉隐藏文本逐条说明当前可见的橙色精确引用，搜索过滤或模式切换后文本与可见关系同步变化。task-flow 不进入该关系说明。
 10. 精确引用使用橙色实线和可见箭头；dependency 自动卡片之间保留横向 `48px`、纵向 `40px` 走线区，相关簇的窄层按本簇最大层高度居中。不同横向层级且卡片间有空间时使用左右端口优先的横线，同列、同深度或横向空间不足时才使用上下端口纵向降级。同行 / 同列直接连线，需要转向时只使用正交线段与最大 `10px` 小圆角。同一卡片同侧的多条精确引用按稳定边 ID 与对端位置分配不同端口；自引用继续在卡片右侧外绕，箭头端点与卡片保留固定显示间隙。
-11. 统一世界 SVG 必须位于拥有全部 dependency 资源卡的内容平面内，以同一世界坐标随 viewport 平移和缩放同步移动；滚动 / 缩放不得通过异步 DOM 屏幕测量重新绑定端点。世界 viewport 裁剪 SVG 与卡片，搜索隐藏精确引用任一端点时整边及对应无障碍说明同时隐藏。
+11. 当前栏目 SVG 必须位于拥有该栏目 dependency 资源卡的内容平面内，以同一栏目坐标随 viewport 平移和缩放同步移动；滚动 / 缩放不得通过异步 DOM 屏幕测量重新绑定端点。栏目 viewport 裁剪 SVG 与卡片，搜索隐藏精确引用任一端点时整边及对应无障碍说明同时隐藏。
 
 ### 7.4 P1 正式项目版本阶段六验收
 
@@ -570,7 +570,7 @@ type ProjectAgentMudPointAttribution = {
 ## 8. 非目标
 
 - 当前不开放“新增资源”产品入口。图片精修候选保持私有且不污染资源总览；“设为最终图”只允许保持原 asset ID、以新正式文件和事务方式切换 manifest 指针，不原地覆写旧文件。其他资源编辑继续追加派生 asset 或子版本。
-- 资源总览不实现资源卡手动拖动、通用聚焦工具栏/侧边栏、运行版本切换、版本回滚、运行模块扩展、测试切片、运行态消费版本、数值参数或泥点归因；资源详情仅为不影响背景画板的非模态卡片。
+- 资源总览不实现通用聚焦工具栏/侧边栏、运行版本切换、版本回滚、运行模块扩展、测试切片、运行态消费版本、数值参数或泥点归因；资源详情仅为不影响背景画板的非模态卡片。
 - 素材创作不实现高级蒙版/毛发级抠图、图集、角色动画、视频时间线或音频波形级编辑；图片画布提供现役编辑闭环，其他类型使用统一非破坏性派生面板。
 - 资源聚焦、搜索、筛选、dependency/type mode 与分区滚动/倍率均为当前会话态；打开详情不得改变这些状态。素材创作 viewport、候选图层、generation 占位和最后最终图提交投影使用独立草稿 schema，不能混用资源总览 sidecar。
 - 不修改 SpacetimeDB schema。
diff --git a/docs/technical/【技术方案】GameAgent资源自由画板与快速编辑-2026-08-20.md b/docs/technical/【技术方案】GameAgent资源自由画板与快速编辑-2026-08-20.md
index 02db9d2c0..7c0001f20 100644
--- a/docs/technical/【技术方案】GameAgent资源自由画板与快速编辑-2026-08-20.md
+++ b/docs/technical/【技术方案】GameAgent资源自由画板与快速编辑-2026-08-20.md
@@ -2,7 +2,7 @@
 
 ## 目标
 
-资源管理的“按依赖”视图使用统一世界坐标的自由画板，支持拖拽平移、滚轮平移以及按住 Ctrl/Meta 的锚点缩放。资源详情是叠加在资源画板之上的非模态卡片；打开、切换和关闭详情都不得卸载背景工具栏、资源卡、依赖连线或重置 viewport、搜索和排序模式。
+资源管理在空项目中展示现有按类型式分区展览。任一栏目出现资源后，“按依赖”和“按类型”共用同一套栏目分页画布：每个非空栏目拥有一个铺满资源管理区域的独立画布，左侧显示飞书文档式栏目大纲，顶部显示当前栏目标题，底部显示下一页标题；普通滚轮切换栏目，按住 Ctrl/Meta 的滚轮以指针为锚点缩放当前画布。两种模式唯一差异是“按依赖”在当前栏目内绘制引导线。资源详情是叠加在资源画板之上的非模态卡片；打开、切换和关闭详情都不得卸载背景工具栏、资源卡、依赖连线或重置 viewport、搜索和排序模式。
 
 图片资源从“编辑资源”进入持续精修草稿后，点击任意图片直接在图片下方显示快速编辑卡。每次快速编辑创建新的候选图，不覆盖来源图层；生成任务立即在画布中创建占位并进入任务侧栏。用户显式选择候选图“设为最终图”后，保持原资产 ID 不变，以事务方式切换 manifest 指向的正式 PNG；精修草稿和其它候选图继续保留。
 
@@ -10,6 +10,12 @@
 
 ## 权威数据与持久化
 
+### 栏目分页投影与文档缺失边界
+
+- 非空栏目页只由当前权威资源投影构造：manifest assets、已完成任务的 artifacts、用户已导入附件和持久化 Agent 文本回执。前端不得扫描项目目录自行发明资源。
+- 文档栏因此只有在上述来源存在 Markdown / TXT / JSON / YAML 等文档类条目，或存在 Agent 文本回执时才出现。若 manifest 没有文档资产、任务 artifacts 未完成且没有附件 / 回执，资源页不显示文档页；这是生成或登记缺失，不由 UI 补假数据。
+- Direct Codex 的游戏生成链路以 `game/index.html`、`game/style.css`、`game/game.js` 作为代码资产登记；是否额外产出设计文档由当前任务和 Agent 决定，资源页只消费已登记结果。
+
 ### 持续精修草稿
 
 - 一个图片 `sourceAssetId` 唯一发现一个活动精修 `draftId`；重新进入时恢复原草稿，不依赖进程内状态或创建平行画布。
@@ -34,6 +40,31 @@
 - canonical 来源缓存属于本地私有恢复数据，不写入 manifest。缓存身份至少绑定平台服务身份、平台 owner、Editor Project ID、源图片 SHA256 与 canonical kind；任一身份或图片内容变化都必须重新登记。
 - 缓存命中时复用已登记资源，避免每次快速编辑重复上传。平台明确返回来源不存在或类型不支持且请求尚未入队时，可以失效缓存并重建一次；不确定受理、已受理和对账状态不得换幂等键重提。
 
+### 最终图事务恢复对账问题与修复
+
+现象：用户连续两次“设为最终图”后重新打开画布，恢复阶段返回 `reconciliation-required`，前端提示“安全恢复原任务需要对账 / 素材画布存在无法自动证明的未完成事务”。
+
+根因：
+
+- 提交成功后 transaction 目录不会归档，`recover_asset_canvas_transactions_at` 会重放全部历史事务。
+- `recover_asset_canvas_transaction_locked` 的 `ledger=Committed` 分支要求当前 manifest 中该 asset 仍指向本事务的 `finalImageRelativePath`；后续提交已把同一 asset 指向新的 `assets/canvas/<name>--<commitId>.png`，`asset_present=false` 后直接 `mark_asset_canvas_reconciliation_locked`，没有先执行 `find_superseding_asset_canvas_commit`（该检查目前只在 unresolved 分支生效）。
+- 前端 `recover()` 只要存在任一 `reconciliation-required` outcome 就把整次恢复判失败，因此一个已被后续提交取代的旧事务会阻塞整个画布打开。
+- 现有测试此前只覆盖“第一个事务被强制标记 unresolved 后由后续已提交事务取代”，缺少“两个事务都成功提交后恢复”的用例，因此未暴露。
+
+修复合同：
+
+1. `ledger=Committed` 分支在进入 reconciliation 前先执行同一套 supersede 证明；命中则把旧 journal/ledger 标记为 `Superseded`，返回 `Superseded`，不得阻塞画布打开。
+2. supersede 证明继续要求后续事务已完整提交、after manifest/revision 与当前状态一致、正式文件哈希匹配，且后续事务的 before 快照精确衔接旧事务的 after 快照；不得仅凭时间戳或路径变化猜测。
+3. 重复恢复幂等：已 `Superseded` 的事务直接返回既有状态，不再改成对账。
+4. 回归测试覆盖“两个连续成功提交后恢复”：旧事务必须收敛为 `Superseded`，新事务为 `AlreadyCommitted`，整轮恢复不得出现 `ReconciliationRequired`。
+5. 恢复失败可观测性仍保留后续增强方向：失败结果应携带 outcomes 明细（commitId、status、stage、证据摘要），前端展示具体事务并支持重试。
+
+验收：
+
+- 连续两次“设为最终图”后关闭再打开画布不再出现对账提示，且最终 manifest 指向最新提交。
+- 现有 fault-injected 恢复用例（`RevisionInstalled`、`LedgerCommitted` 等）全部保持通过，未出现新的 `ReconciliationRequired` 回归。
+- 重复恢复幂等，已 `Superseded` 事务不再重放为对账。
+
 ### 本地图片批量导入
 
 - Tauri 正式链路使用原生多选文件对话框，不以隐藏 DOM `input[type=file]` 作为唯一入口。取消选择返回受控 `cancelled`，不修改草稿。
@@ -50,11 +81,15 @@
 
 ## 操作边界
 
+- 栏目顺序固定为 `文档 -> 美术资源 -> 音乐音效资源 -> 游戏代码 -> 项目版本`。完全空项目显示全部栏目的分区展览；任一栏目出现资源后，分页大纲展示全部栏目，默认停留在该顺序中的第一个非空栏目，空栏目计数为 0 且可打开空画布。
+- 普通滚轮向下切到下一栏目、向上切到上一栏目并循环；短时间连续滚轮事件需要节流，避免触控板一次惯性滚动跨多页。点击大纲或底部“下一页”标题是显式切页入口。
+- 每个栏目画布保留独立 viewport；切换栏目后先按该栏目内容适配视口。空白处拖拽平移画布，资源卡拖拽移动卡片并更新依赖线，Ctrl/Meta 缩放只作用于当前栏目，不能牵动其它栏目。
 - 依赖画布复用 `@genarrative/image-canvas-core` 的 viewport 计算，并复用现有资源卡片、布局和依赖连线模型。
-- 依赖模式不使用资源分区滚动条、分区缩放或分区高度操作作为主要导航；分区仍是画布世界中的视觉分组。
-- 依赖画布存在不可见导航边界：以当前项目全部资源的权威布局矩形、真实卡片尺寸、分区标题和世界 extent 的并集为内容范围，再在屏幕坐标四周外扩 `96px` 安全留白。搜索、详情卡和临时隐藏不得缩小边界，只有项目资源或权威布局真正变化时才重算。
-- 滚轮平移、指针拖动画布、Ctrl/Meta 缩放、复位以及容器 resize 后都必须经过同一个 viewport 约束。缩小下限是“全部内容加安全留白刚好可见”的 fit scale；内容小于视口时居中，内容大于视口时四条边最多移动到安全留白位置，禁止把资源整体拖出屏幕。边界只约束会话 viewport，不写入 manifest 或资源布局 sidecar，也不显示可见边框。
-- 统一世界画板显示当前可见资源之间的全部合法精确引用，包括跨视觉分组引用；装饰 SVG 与视觉隐藏的关系说明消费同一组可见边，搜索隐藏任一端点时两者同步移除。任务流仍只参与同类型布局聚类，不绘线也不进入关系说明。
+- 非空状态不使用资源分区滚动条、分区缩放或分区高度操作作为主要导航；栏目通过大纲、底部下一页标题和滚轮切换。
+- 当前栏目画布背景是无限的：用户可以将 viewport 沿 x/y 任意方向平移，画布不以资源 extent 作为导航边界，也不显示可见画布边缘。资源卡片的持久化布局坐标允许落在 `-1_000_000..=1_000_000`，用于支撑元素位于世界原点左上方；超出该范围仍拒绝写入，避免持久化非法布局。这与 viewport 能否继续平移是两层独立语义。搜索、详情卡和临时隐藏不得改变 viewport。
+- 普通滚轮切换栏目，指针拖动空白平移画布，Ctrl/Meta 缩放、复位以及容器 resize 后都必须保持同一套 viewport 数据流。切换栏目、切换排序模式或显式复位时才重新适配内容；图片尺寸测量、布局拖动或资源 extent 变化只归一化当前 viewport，不得意外重置用户已经完成的平移和缩放。普通平移不夹取 x/y；缩放仍受共享画布的最小/最大比例限制，初次 fit 只使用 `96px` 内缩作为视觉留白。
+- 资源卡拖动使用 `5px` 阈值区分点击与移动；移动期间按当前 scale 乐观换算世界坐标、显示拖动态并同步依赖线，释放时提交一次 `manuallyPlaced=true` 布局 CAS，取消则回滚预览且不提交。拖动后的释放点击不打开详情。
+- 依赖模式只在当前栏目画布内显示两端都属于该栏目的合法精确引用；装饰 SVG 与视觉隐藏的关系说明消费同一组可见边，搜索隐藏任一端点时两者同步移除。任务流仍只参与同类型布局聚类，不绘线也不进入关系说明。
 - 资源详情卡包含元数据、媒体预览和“编辑资源”操作，但不使用全屏 backdrop、不声明 `aria-modal=true`、不把 `focusedResource` 作为背景工具栏渲染条件。桌面端允许继续操作背景画板；窄屏可以使用有边界的贴边卡，但背景组件必须保持挂载。
 - 资源详情卡定位相对 `.game-workbench-stage`，桌面端在中间主视窗居中并受主视窗宽高边界约束；禁止使用相对整个窗口的右上角 `position: fixed` 定位。
 - 图片选中后的浮动工具栏整体退役。普通点击图片直接打开唯一的图片下方快速编辑卡；拖动不误触发，点击另一张图片切换卡片，点击画布空白关闭卡片。
@@ -73,20 +108,22 @@
 
 ## 验收
 
-1. 在依赖视图拖拽画布可以平移，滚轮可以平移，Ctrl/Meta + 滚轮以指针位置为锚点缩放，复位按钮可以适配全部依赖内容；极端拖拽和连续缩小均停在全部资源加 `96px` 安全留白形成的隐藏边界，搜索过滤不会改变该边界。
-2. 同类型和跨视觉分组的合法精确引用均在统一世界中连线，并具有与当前可见连线一致的无障碍关系说明；搜索隐藏任一端点后连线和说明同时消失。
-3. 点击任意资源后“新增资源 / 按依赖 / 按类型 / 复位”仍保持挂载和原状态；详情为非模态独立卡片，背景画板 viewport、搜索、排序、卡片和连线不卸载、不重置。
-4. 图片资源点击“编辑资源”后恢复唯一活动 refine 草稿，入口图进入默认参考；点击任意图片直接在其下方显示快速编辑卡，图片上方不再出现浮动工具栏。
-5. 快速编辑卡底部显示适用的删除、设为最终图和修改动作。拖动图片不误触发卡片；删除只影响草稿图层；候选设为最终图后保持原 asset ID、更新正式 PNG，草稿及其它候选仍可继续编辑。
-6. 点击修改后立即创建避让现有内容的生成占位和任务侧栏记录；成功图在同一落点出现，失败只影响该占位和任务，重启后恢复原 generation/operation，不重新扣费提交。
-7. refine 请求通过严格 DTO 合同且不携带非法 `assetKind`；参数、来源类型、余额、鉴权和对账错误显示不同的安全错误码。
-8. 1:1、16:9、9:16、2:3、3:2 和极端横竖图片按真实比例显示并受边界限制；卡片不重叠，世界 extent、复位视口和依赖连线端点正确。非图片资源尺寸不变。
-9. GIF、AVIF、BMP、SVG 等不满足栅格快速编辑能力的资源继续使用能力模型中的降级编辑路径，不伪装成可提交 PNG 候选。
-10. 历史 `game-background` 等私有类型来源不得直接作为 refine 主来源；首次快速编辑完成 canonical 登记，后续同源请求复用缓存，并实际到达 `candidate-ready`。
-11. 点击导入可以原生多选图片；成功批次只推进一次草稿 revision、立即出现在当前视口并被选中，取消和失败不改变草稿且不遗留部分导入。
-12. 明确失败任务可从占位或任务侧栏归档，重启后不恢复；`reconciliation-required` 不显示删除能力。任务列表具有与现役美术画布一致的独立按钮、双 Tab、状态图标与时间/进度信息；折叠后只保留按钮且不丢任务数据，新建任务自动展开。
-13. 画布带运行中 generation 重新进入时，在远端恢复完成前已经可选图、平移和继续编辑；后台恢复继续推进原 operation，不重复 POST、不重新扣费。阻断性提交/恢复失败的遮罩覆盖整个 Tauri 窗口。
-14. 已登记 refine 资产的候选设为最终图后保持原 `assetId`、原 `source.resourceId` 与新正式 PNG 路径；`revision-installed` 中断后重新加载可前向收敛为 committed。
+1. 完全空项目在按依赖与按类型下都显示相同的分区展览；任一栏目出现资源后，两种模式都切换为栏目分页画布，大纲包含全部栏目，空栏目计数为 0 且可打开空画布。
+2. 栏目顺序为 `文档 -> 美术资源 -> 音乐音效资源 -> 游戏代码 -> 项目版本`，游戏代码不再固定在首位；普通滚轮可循环切换栏目，点击大纲和底部下一页标题也可切页。
+3. 在当前栏目内拖拽空白可以无限平移画布，拖拽资源卡可以移动卡片并同步依赖线，Ctrl/Meta + 滚轮以指针位置为锚点缩放，复位按钮可以适配当前栏目内容；普通平移不会因资源 extent、图片测量或窗口 resize 被拉回，连续缩放仍停在共享画布的最小/最大比例范围内。
+4. 按依赖模式显示当前栏目内同类型两端资源的合法精确引用，并具有与当前可见连线一致的无障碍关系说明；按类型模式不显示引导线；搜索隐藏任一端点后连线和说明同时消失。
+5. 点击任意资源后“新增资源 / 按依赖 / 按类型 / 复位”仍保持挂载和原状态；详情为非模态独立卡片，背景画板 viewport、搜索、排序、卡片和连线不卸载、不重置。
+6. 图片资源点击“编辑资源”后恢复唯一活动 refine 草稿，入口图进入默认参考；点击任意图片直接在其下方显示快速编辑卡，图片上方不再出现浮动工具栏。
+7. 快速编辑卡底部显示适用的删除、设为最终图和修改动作。拖动图片不误触发卡片；删除只影响草稿图层；候选设为最终图后保持原 asset ID、更新正式 PNG，草稿及其它候选仍可继续编辑。
+8. 点击修改后立即创建避让现有内容的生成占位和任务侧栏记录；成功图在同一落点出现，失败只影响该占位和任务，重启后恢复原 generation/operation，不重新扣费提交。
+9. refine 请求通过严格 DTO 合同且不携带非法 `assetKind`；参数、来源类型、余额、鉴权和对账错误显示不同的安全错误码。
+10. 1:1、16:9、9:16、2:3、3:2 和极端横竖图片按真实比例显示并受边界限制；卡片不重叠，当前栏目 extent、复位视口和依赖连线端点正确。非图片资源尺寸不变。
+11. GIF、AVIF、BMP、SVG 等不满足栅格快速编辑能力的资源继续使用能力模型中的降级编辑路径，不伪装成可提交 PNG 候选。
+12. 历史 `game-background` 等私有类型来源不得直接作为 refine 主来源；首次快速编辑完成 canonical 登记，后续同源请求复用缓存，并实际到达 `candidate-ready`。
+13. 点击导入可以原生多选图片；成功批次只推进一次草稿 revision、立即出现在当前视口并被选中，取消和失败不改变草稿且不遗留部分导入。
+14. 明确失败任务可从占位或任务侧栏归档，重启后不恢复；`reconciliation-required` 不显示删除能力。任务列表具有与现役美术画布一致的独立按钮、双 Tab、状态图标与时间/进度信息；折叠后只保留按钮且不丢任务数据，新建任务自动展开。
+15. 画布带运行中 generation 重新进入时，在远端恢复完成前已经可选图、平移和继续编辑；后台恢复继续推进原 operation，不重复 POST、不重新扣费。阻断性提交/恢复失败的遮罩覆盖整个 Tauri 窗口。
+16. 已登记 refine 资产的候选设为最终图后保持原 `assetId`、原 `source.resourceId` 与新正式 PNG 路径；`revision-installed` 中断后重新加载可前向收敛为 committed。
 
 ## 验证命令
 
diff --git a/packages/shared/src/contracts/gameCreationApp.ts b/packages/shared/src/contracts/gameCreationApp.ts
index bbd343775..f277611a1 100644
--- a/packages/shared/src/contracts/gameCreationApp.ts
+++ b/packages/shared/src/contracts/gameCreationApp.ts
@@ -471,6 +471,7 @@ export interface GameCreationAppAssetManifestEntry {
 export const GAME_CREATION_RESOURCE_LAYOUT_SCHEMA_VERSION =
   'game-creator-resource-layout.v1' as const;
 export const GAME_CREATION_RESOURCE_LAYOUT_MAX_SAFE_REVISION = 9_007_199_254_740_991;
+export const GAME_CREATION_RESOURCE_LAYOUT_MIN_COORDINATE = -1_000_000;
 export const GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE = 1_000_000;
 
 export function isSafeProjectResourceCanvasLayoutRevision(
@@ -490,7 +491,7 @@ export function isSafeProjectResourceCanvasCoordinate(
   return (
     typeof value === 'number' &&
     Number.isSafeInteger(value) &&
-    value >= 0 &&
+    value >= GAME_CREATION_RESOURCE_LAYOUT_MIN_COORDINATE &&
     value <= GAME_CREATION_RESOURCE_LAYOUT_MAX_COORDINATE
   );
 }
diff --git a/server-rs/crates/shared-contracts/src/game_creation_app.rs b/server-rs/crates/shared-contracts/src/game_creation_app.rs
index 13e6df9b7..3b27c0705 100644
--- a/server-rs/crates/shared-contracts/src/game_creation_app.rs
+++ b/server-rs/crates/shared-contracts/src/game_creation_app.rs
@@ -543,8 +543,8 @@ pub enum ProjectResourceCanvasSection {
 pub struct ProjectResourceCanvasPosition {
     pub resource_id: String,
     pub section: ProjectResourceCanvasSection,
-    pub x: u32,
-    pub y: u32,
+    pub x: i32,
+    pub y: i32,
     pub manually_placed: bool,
 }