Run complete workspace UI assertions in an isolated context of the integration browser

Wait for visible application readiness in workspace UI regression checks
Capture document directory network and hydration failures in CI
2026-10-30 19:37:59 +08:00 · 2026-10-30 19:07:20 +08:00 · 2026-10-30 18:37:02 +08:00 · 2026-10-30 18:13:58 +08:00 · 2026-10-30 18:07:21 +08:00 · 2026-10-30 17:44:05 +08:00
664 changed files with 6511 additions and 806 deletions
@@ -0,0 +1,34 @@
+name: creative workspace review checks
+on:
+  pull_request:
+    branches: [main]
+    paths:
+      - 'apps/studio/**'
+      - 'apps/waterfall-wiki/**'
+      - '.gitea/workflows/**'
+      - 'scripts/*studio*'
+concurrency:
+  group: creative-workspace-${{ gitea.event.pull_request.number }}
+  cancel-in-progress: true
+jobs:
+  verify:
+    runs-on: ces-control
+    timeout-minutes: 60
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Check patch formatting
+        run: git diff --check HEAD^ HEAD
+      - name: Verify Studio types, tests, build and smoke
+        run: docker build -f apps/studio/Dockerfile -t "creative-studio-review:${{ gitea.sha }}" .
+      - name: Build Wiki integration and runtime images
+        run: |
+          docker build --target integration -t "creative-wiki-tests:${{ gitea.sha }}" .
+          docker build --target runtime -t "creative-wiki-review:${{ gitea.sha }}" .
+      - name: Verify isolated PostgreSQL, S3 and browser integration
+        env:
+          WATERFALL_WIKI_IMAGE: creative-wiki-review:${{ gitea.sha }}
+          WATERFALL_WIKI_TEST_IMAGE: creative-wiki-tests:${{ gitea.sha }}
+          GITEA_RUN_ID: ${{ gitea.run_id }}
+        run: bash scripts/integration.sh
@@ -1,51 +0,0 @@
-name: studio CI and deployment
-on:
-  push:
-    branches: [main]
-    paths:
-      - 'apps/studio/**'
-      - 'scripts/deploy-studio.sh'
-      - 'scripts/verify-studio-production.sh'
-      - 'scripts/verify-studio-library.mjs'
-      - 'scripts/verify-studio-visual.cjs'
-      - '.gitea/workflows/studio.yml'
-      - 'scripts/*studio*'
-      - 'content/studio-examples/**'
-      - 'content/studio-tools/layouts-api.md'
-      - 'pnpm-workspace.yaml'
-
-jobs:
-  verify-and-deploy:
-    if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
-    runs-on: ces-control
-    timeout-minutes: 45
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Check shared content and documentation contracts
-        run: |
-          node scripts/check-studio-contracts.mjs
-          node --check scripts/export-studio-series.cjs
-          node --check scripts/save-studio-series.mjs
-          bash -n scripts/publish-studio-guide.sh scripts/deliver-studio-series.sh
-      - name: Build and verify studio
-        run: docker build -f apps/studio/Dockerfile -t "prompt-studio:${{ gitea.sha }}" .
-      - name: Release studio
-        if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
-        run: bash scripts/deploy-studio.sh "${{ gitea.sha }}"
-      - name: Verify the deployed Studio API and native pages
-        if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
-        run: bash scripts/verify-studio-production.sh
-      - name: Save server acceptance evidence
-        id: acceptance_evidence
-        if: always()
-        uses: actions/upload-artifact@v3
-        with:
-          name: studio-production-acceptance
-          path: artifacts/studio-acceptance/
-          if-no-files-found: ignore
-          retention-days: 7
-      - name: Remove temporary acceptance output after upload
-        if: always() && steps.acceptance_evidence.outcome == 'success'
-        run: rm -rf artifacts/studio-acceptance
@@ -1,9 +1,13 @@
-name: waterfall-wiki CI and deployment
+name: creative workspace CI and deployment
 on:
  push:
    branches: [main]
    paths:
      - 'apps/waterfall-wiki/**'
+      - 'apps/studio/**'
+      - 'scripts/*studio*'
+      - 'content/studio-examples/**'
+      - 'content/studio-tools/layouts-api.md'
      - '.gitea/workflows/waterfall-wiki.yml'
      - 'Dockerfile'
      - 'compose.yml'
@@ -18,11 +22,19 @@ jobs:
  verify-and-deploy:
    if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
    runs-on: ces-control
-    timeout-minutes: 45
+    timeout-minutes: 60
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
+      - name: Check shared content and documentation contracts
+        run: |
+          node scripts/check-studio-contracts.mjs
+          node --check scripts/export-studio-series.cjs
+          node --check scripts/save-studio-series.mjs
+          bash -n scripts/publish-studio-guide.sh scripts/deliver-studio-series.sh
+      - name: Build and verify Studio
+        run: docker build -f apps/studio/Dockerfile -t "prompt-studio:${{ gitea.sha }}" .
      - name: Build, verify, deploy and retain wiki images
        env:
          RELEASE_SHA: ${{ gitea.sha }}
@@ -32,3 +44,19 @@ jobs:
          else
            sudo -n python3 scripts/wiki-image-lifecycle.py ci --sha "$RELEASE_SHA"
          fi
+      - name: Release Studio after Wiki routes are deployed
+        run: bash scripts/deploy-studio.sh "${{ gitea.sha }}"
+      - name: Verify the deployed creative workspace
+        run: bash scripts/verify-studio-production.sh
+      - name: Save server acceptance evidence
+        id: acceptance_evidence
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: studio-production-acceptance
+          path: artifacts/studio-acceptance/
+          if-no-files-found: ignore
+          retention-days: 7
+      - name: Remove temporary acceptance output after upload
+        if: always() && steps.acceptance_evidence.outcome == 'success'
+        run: rm -rf artifacts/studio-acceptance
@@ -10,3 +10,11 @@ dist/
 __pycache__/
 *.egg-info/
 .venv/
+
+# Content images belong in S3; metadata lives in managed-media.json.
+*.png
+*.jpg
+*.jpeg
+*.webp
+*.gif
+*.avif
@@ -34,6 +34,7 @@ COPY --from=build --chown=node:node /app/db/ ./db/
 COPY --chown=node:node apps/waterfall-wiki/scripts/container-health.mjs ./
 COPY --chown=node:node apps/waterfall-wiki/scripts/import-character-packs.mjs apps/waterfall-wiki/scripts/verify-character-pack.mjs ./scripts/
 COPY --chown=node:node apps/waterfall-wiki/seed/characters/ ./seed/characters/
+COPY --chown=node:node apps/waterfall-wiki/src/content/managed-media.json ./src/content/managed-media.json
 USER node
 EXPOSE 3000
 CMD ["node", "server.js"]
@@ -81,14 +81,14 @@ bash -n scripts/deploy.sh scripts/integration.sh scripts/deploy-studio.sh

 ## 部署与持久化

-Gitea 工作流按应用路径触发：`waterfall-wiki.yml`、`studio.yml` 和 `python.yml`。waterfall-wiki 完成类型检查、单元测试、生产构建、冒烟和真实 PostgreSQL/S3 集成测试后部署；Studio 独立构建和部署。文档与作者数据本身不触发应用部署。
+Web 应用由 `waterfall-wiki.yml` 统一发布，两个应用的路径都能触发它：先检查并构建 Studio，再完成 Wiki 的类型检查、单元测试、生产构建、冒烟及隔离 PostgreSQL/S3 集成测试并部署 Wiki，随后部署 Studio，最后在指定服务器验收。顺序在同一个 ces-control 作业内保证，避免独立作业互相等待。PR 检查也运行隔离集成测试，但不部署。Python 检查仍由 `python.yml` 承担；文档与作者数据本身不触发应用部署。

 | 服务 | 入口/端口 |
 | --- | --- |
 | `waterfall-wiki` | 公网 `18131`，也是 Studio 的统一入口 |
 | PostgreSQL | `127.0.0.1:18132` |
 | 对象存储 | `127.0.0.1:18133` |
-| Studio | `127.0.0.1:18134`；公网通过 `/studio` 代理 |
+| Studio | `127.0.0.1:18134`；编辑器公网入口为 `/graphic`、`/infinite_canvas`，资源和 API 保留 `/studio` 代理 |
 | Python | 无网络端口，按需运行 |

 生产 Compose 项目仍为 `prompt`，部署根目录仍为 `/opt/prompt`。既有 `prompt_postgres_data`、`prompt_objects`、`prompt_auth_data` 卷与数据库身份保留；应用更名不会重新创建一套空存储。Compose 应用服务改为 `waterfall-wiki` 和 `waterfall-wiki-worker`，镜像参数为 `WATERFALL_WIKI_IMAGE` / `WATERFALL_WIKI_TEST_IMAGE`。
@@ -0,0 +1,24 @@
+const {chromium}=require('playwright-core');
+const assert=require('node:assert/strict');
+(async()=>{const browser=await chromium.launch({channel:'chrome',headless:true});try{const page=await browser.newPage({viewport:{width:1440,height:1000}});const errors=[];page.on('pageerror',e=>errors.push(e.message));
+ await page.route('**/api/account/session',r=>r.fulfill({json:{user:null}}));
+ await page.goto((process.env.STUDIO_TEST_ORIGIN||'http://8.211.154.134:18131')+'/graphic');
+ await page.getByRole('button',{name:'切换图层面板',exact:true}).click();
+ assert.equal(await page.getByRole('button',{name:'图层',exact:true}).isVisible(),false);
+ await page.getByRole('button',{name:'切换图层面板',exact:true}).click();
+ await page.getByRole('button',{name:'切换属性面板',exact:true}).click();
+ assert.equal(await page.getByRole('button',{name:'备份设计 JSON',exact:true}).isVisible(),false);
+ await page.getByRole('button',{name:'切换属性面板',exact:true}).click();
+ await page.getByRole('button',{name:'添加文字',exact:true}).click();
+ await page.getByRole('textbox',{name:'文字内容',exact:true}).fill('设计从这里开始');
+ await page.getByRole('button',{name:'添加矩形',exact:true}).click();
+ await page.getByRole('button',{name:'撤销',exact:true}).click();
+ await page.getByRole('button',{name:'重做',exact:true}).click();
+ await page.reload();await page.getByRole('button',{name:'文字',exact:true}).first().waitFor();
+ assert.ok(await page.evaluate(()=>localStorage.getItem('studio.graphic.v1').includes('设计从这里开始')));
+ const file=page.waitForEvent('download');await page.getByRole('button',{name:'导出 SVG',exact:true}).click();assert.ok((await file).suggestedFilename().endsWith('.svg'));
+ await page.getByRole('button',{name:'邮箱登录',exact:true}).click();await page.getByRole('dialog').waitFor();await page.keyboard.press('Escape');await page.getByRole('dialog').waitFor({state:'hidden'});
+ await page.screenshot({path:process.env.STUDIO_QA_SCREENSHOT||'graphic-qa.png',fullPage:true});
+ await page.setViewportSize({width:390,height:844});assert.equal(await page.evaluate(()=>document.documentElement.scrollWidth>innerWidth),false);
+ assert.deepEqual(errors,[]);console.log('Graphic editing, history, restore, SVG download, account dialog and mobile overflow checks passed.');
+ }finally{await browser.close()}})().catch(e=>{console.error(e);process.exitCode=1});
@@ -0,0 +1,91 @@
+// Supply authorized browser state for the server. Local acceptance was explicitly authorized for this revision.
+const {chromium}=require('playwright-core');
+const assert=require('node:assert/strict');
+const fs=require('node:fs/promises');
+(async()=>{
+ const base=process.env.BASE_URL;
+ assert.ok(['http://8.211.154.134:18131','http://127.0.0.1:3024'].includes(base),'Use the designated server or the explicitly authorized local preview');
+ const browser=await chromium.launch(process.env.CHROMIUM_PATH?{executablePath:process.env.CHROMIUM_PATH,headless:true}:{channel:'chrome',headless:true});
+ try{
+  const context=await browser.newContext({viewport:{width:1600,height:1100},storageState:process.env.STORAGE_STATE||undefined});
+  const page=await context.newPage(),errors=[];page.on('pageerror',e=>errors.push(e.message));
+  await page.goto(base+'/infinite_canvas');
+  assert.equal(new URL(page.url()).pathname,'/infinite_canvas','Login required; authenticate without weakening protection');
+  await page.getByRole('heading',{name:'无限画布 / Infinite canvas'}).waitFor();
+  await page.getByRole('button',{name:'从示例开始 ↗',exact:true}).click();
+  // A fresh context is used so this test cannot overwrite a human browser draft.
+  const snapshot=()=>page.evaluate(()=>JSON.parse(localStorage.getItem('studio.infinite-canvas.v1')));
+  const node=id=>page.locator(`[data-node-id="${id}"]`);
+  const close=(a,b)=>assert.ok(Math.abs(a-b)<2,`${a} ≈ ${b}`);
+  async function drag(handle,dx,dy){const box=await handle.boundingBox();assert.ok(box);await page.mouse.move(box.x+box.width/2,box.y+box.height/2);await page.mouse.down();await page.mouse.move(box.x+box.width/2+dx,box.y+box.height/2+dy,{steps:12});await page.mouse.up()}
+  for(const scale of [0,1]){
+   await page.getByRole('button',{name:'适应画布',exact:true}).click();
+   if(scale)await page.getByRole('button',{name:'放大',exact:true}).click();
+   const z=await page.locator('[class*=world]').evaluate(el=>new DOMMatrix(getComputedStyle(el).transform).a);
+   for(const id of ['brief','reference']){
+    const before=(await snapshot()).cards.find(c=>c.id===id);
+    await drag(node(id).locator(':scope > div').nth(1),45,25);
+    const after=(await snapshot()).cards.find(c=>c.id===id);close(after.x-before.x,45/z);close(after.y-before.y,25/z);
+   }
+  }
+  // Double-click content enters editing without moving or creating nodes.
+  const nodeCount=(await snapshot()).cards.length;
+  const before=(await snapshot()).cards.find(c=>c.id==='brief');
+  await node('brief').locator('textarea').dblclick({force:true});
+  assert.equal(await node('brief').locator('textarea').getAttribute('readonly'),null);
+  await node('brief').locator('textarea').fill('双击后直接编辑');
+  assert.equal((await snapshot()).cards.length,nodeCount);
+  assert.equal((await snapshot()).cards.find(c=>c.id==='brief').x,before.x);
+  assert.equal((await snapshot()).cards.find(c=>c.id==='brief').y,before.y);
+  await page.keyboard.press('Escape');
+  const chooser=page.waitForEvent('filechooser');
+  await node('reference').getByRole('button',{name:/替换.*图片/}).dblclick();
+  const imagePicker=await chooser;
+  await imagePicker.setFiles({name:'replacement.png',mimeType:'image/png',buffer:Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+jC1sAAAAASUVORK5CYII=','base64')});
+  await page.waitForFunction(()=>JSON.parse(localStorage.getItem('studio.infinite-canvas.v1')).cards.find(c=>c.id==='reference').image?.startsWith('data:image/png;base64,'));
+  assert.equal((await snapshot()).cards.length,nodeCount);
+  await page.keyboard.press('Escape');
+  assert.equal(await node('brief').locator('textarea').getAttribute('readonly'),'');await node('brief').getByRole('button',{name:/^编辑 /}).click();await node('brief').locator('textarea').fill('真实工具内编辑 · 输入不能移动节点');
+  const edited=(await snapshot()).cards.find(c=>c.id==='brief');assert.equal(edited.x,before.x);assert.equal(edited.y,before.y);
+  await drag(node('brief').locator('textarea'),20,10);const inEdit=(await snapshot()).cards.find(c=>c.id==='brief');assert.equal(inEdit.x,edited.x);assert.equal(inEdit.y,edited.y);await node('brief').getByRole('button',{name:/^完成编辑 /}).click();const resize=node('brief').getByRole('button',{name:/调整/});await drag(resize,60,40);
+  assert.ok((await snapshot()).cards.find(c=>c.id==='brief').width>320);
+  await page.getByRole('button',{name:'撤销',exact:true}).click();assert.equal((await snapshot()).cards.find(c=>c.id==='brief').width,undefined);
+  await page.getByRole('button',{name:'重做',exact:true}).click();assert.ok((await snapshot()).cards.find(c=>c.id==='brief').width>320);
+  // Each SVG endpoint must agree with the actual transformed node edge, after resize and pan.
+  async function wires(){const mismatch=await page.evaluate(()=>{
+   return [...document.querySelectorAll('svg path')].filter(p=>p.getAttribute('d')?.startsWith('M ')).slice(0,1).some(p=>{const d=p.getAttribute('d').match(/-?\d+(?:\.\d+)?/g).map(Number),world=p.closest('div').getBoundingClientRect();const matrix=p.getScreenCTM();const pt=new DOMPoint(d[0],d[1]).matrixTransform(matrix);const card=document.querySelector('[data-node-id="brief"]').getBoundingClientRect();return Math.abs(pt.x-card.right)>3||Math.abs(pt.y-(card.top+card.height/2))>3});
+  });assert.equal(mismatch,false)}
+  // The first link starts at brief; check it specifically.
+  await wires();
+  await page.getByRole('button',{name:'移动画布',exact:true}).click();
+  const viewport=page.locator('[class*="viewport"]');const box=await viewport.boundingBox();await page.mouse.move(box.x+20,box.y+20);await page.mouse.down();await page.mouse.move(box.x+100,box.y+80,{steps:8});await page.mouse.up();
+  await wires();
+  const saved=await snapshot(),view=await page.evaluate(()=>localStorage.getItem('studio.infinite-canvas.v1.view'));
+  await page.reload();await page.getByRole('heading',{name:'无限画布 / Infinite canvas'}).waitFor();assert.deepEqual(await snapshot(),saved);assert.equal(await page.evaluate(()=>localStorage.getItem('studio.infinite-canvas.v1.view')),view);
+  // Zoom must preserve the world coordinate beneath the pointer.
+  const vp=await viewport.boundingBox();assert.equal(vp.x,0);assert.equal(vp.y,0);assert.equal(vp.width,1600);assert.equal(vp.height,1100);
+  const anchor={x:vp.x+vp.width*.65,y:vp.y+vp.height*.25};
+  const worldAt=()=>page.locator('[class*=world]').evaluate((el,p)=>{const m=new DOMMatrix(getComputedStyle(el).transform);return {x:(p.x-m.e)/m.a,y:(p.y-m.f)/m.d}},anchor);
+  const point=await worldAt();await page.mouse.move(anchor.x,anchor.y);await page.keyboard.down('Control');await page.mouse.wheel(0,-80);await page.keyboard.up('Control');
+  await page.waitForFunction(old=>JSON.parse(localStorage.getItem('studio.infinite-canvas.v1.view')).zoom!==JSON.parse(old).zoom,view);
+  const pointAfter=await worldAt();close(point.x,pointAfter.x);close(point.y,pointAfter.y);
+  await page.getByRole('button',{name:'选择工具',exact:true}).click();
+  await page.getByRole('button',{name:'添加笔记',exact:true}).click();
+  assert.equal((await snapshot()).cards.length,saved.cards.length+1);
+  await page.getByRole('button',{name:/操作$/}).last().click();
+  await page.getByRole('button',{name:'复制节点',exact:true}).click();assert.equal((await snapshot()).cards.length,saved.cards.length+2);
+  await page.getByRole('button',{name:'删除节点',exact:true}).click();assert.equal((await snapshot()).cards.length,saved.cards.length+1);
+  await page.getByRole('button',{name:'撤销',exact:true}).click();assert.equal((await snapshot()).cards.length,saved.cards.length+2);
+  await page.getByRole('button',{name:'重做',exact:true}).click();assert.equal((await snapshot()).cards.length,saved.cards.length+1);
+  if(await page.getByRole('button',{name:'关闭画布操作',exact:true}).isVisible())await page.getByRole('button',{name:'关闭画布操作',exact:true}).click();
+  // Return to the saved three-node document through undo.
+  await page.getByRole('button',{name:'撤销',exact:true}).click();await page.getByRole('button',{name:'撤销',exact:true}).click();await page.getByRole('button',{name:'撤销',exact:true}).click();
+  await page.getByRole('button',{name:'适应画布',exact:true}).click();await page.reload();await page.getByRole('heading',{name:'无限画布 / Infinite canvas'}).waitFor();
+  const dock=await page.getByRole('navigation',{name:'画布工具'}).boundingBox();assert.ok(dock.y>950);assert.ok(dock.x>500);
+  await page.getByRole('button',{name:'切换明暗主题'}).click();assert.equal(await page.locator('main').getAttribute('data-theme'),'light');await page.reload();await page.waitForFunction(()=>document.querySelector('main').dataset.theme==='light');
+  if(process.env.SCREENSHOT_DIR)await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-light.png'});
+  await page.getByRole('button',{name:'切换明暗主题'}).click();
+  if(process.env.SCREENSHOT_DIR){await fs.mkdir(process.env.SCREENSHOT_DIR,{recursive:true});await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-rebuild.png'});await page.setViewportSize({width:390,height:844});assert.ok(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth));const mobile=await viewport.boundingBox();assert.equal(mobile.width,390);assert.equal(mobile.height,844);await page.getByRole('button',{name:'适应画布',exact:true}).click();await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-mobile.png'});}
+  assert.deepEqual(errors,[]);console.log('Passed: two-node drag at two scales, inline input, resize, undo/redo, wires, pan, reload, pointer zoom, CRUD and full-screen desktop/mobile');
+ }finally{await browser.close()}
+})().catch(e=>{console.error(e);process.exitCode=1});
@@ -6,13 +6,13 @@ const standardId='00000000-0000-4000-8000-000000000003';
 const seriesId='00000000-0000-4000-8000-000000000004';
 const doc=JSON.parse(readFileSync(new URL('../fixtures/autumn-journal.json',import.meta.url))).document;
 const assetId='00000000-0000-4000-8000-000000000005';doc.sources=[{assetId,author:'CI fixture',license:'test only',url:'generated',prompt:'test image',tool:'fixture'}];for(const p of doc.pages)p.parameters.images.I01.assetId=assetId;
-let reads=0;
-const wiki=createHttpServer((req,res)=>{reads++;assert.equal(req.headers.cookie,'session=smoke-test');res.setHeader('Content-Type','application/json');if(req.url.endsWith(seriesId))return res.end(JSON.stringify({design:{id:seriesId,name:'完整三页作品',layoutId:'standard-01',revision:1,url:'/studio/template-layout?id='+seriesId,parameters:doc.pages[0].parameters,document:doc}}));const standard=req.url.endsWith(standardId);if(!standard&&!req.url.endsWith(designId)){res.writeHead(404);return res.end('{}')}res.end(JSON.stringify({design:{id:standard?standardId:designId,name:'已保存的实际页面',layoutId:standard?'standard-01':'ref-01',revision:3,url:'/studio/designs/'+designId,parameters:{added:[{id:'user-smoke',kind:'text',role:'Added text',box:[10,10,20,10],direction:'horizontal',text:'新增元素已恢复',reading:'custom'}],layers:{T01:{x:12,rotation:25,opacity:.7},'user-smoke':{z:12}},texts:{T01:{value:'确定的页面文字',color:'#123456'}},images:{I01:{color:'#abcdef'}},decorations:{D01:{hidden:true}},paper:'#eeeeee'}}}))});
+let reads=0,mediaReads=0;
+const wiki=createHttpServer((req,res)=>{assert.equal(req.headers.cookie,'session=smoke-test');if(/^\/api\/media\/[0-9a-f-]{36}$/.test(req.url)){mediaReads++;res.setHeader('Content-Type','image/png');return res.end(Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+j3ioAAAAASUVORK5CYII=','base64'))}reads++;res.setHeader('Content-Type','application/json');if(req.url.endsWith(seriesId))return res.end(JSON.stringify({design:{id:seriesId,name:'完整三页作品',layoutId:'standard-01',revision:1,url:'/studio/template-layout?id='+seriesId,parameters:doc.pages[0].parameters,document:doc}}));const standard=req.url.endsWith(standardId);if(!standard&&!req.url.endsWith(designId)){res.writeHead(404);return res.end('{}')}res.end(JSON.stringify({design:{id:standard?standardId:designId,name:'已保存的实际页面',layoutId:standard?'standard-01':'ref-01',revision:3,url:'/studio/designs/'+designId,parameters:{added:[{id:'user-smoke',kind:'text',role:'Added text',box:[10,10,20,10],direction:'horizontal',text:'新增元素已恢复',reading:'custom'}],layers:{T01:{x:12,rotation:25,opacity:.7},'user-smoke':{z:12}},texts:{T01:{value:'确定的页面文字',color:'#123456'}},images:{I01:{color:'#abcdef'}},decorations:{D01:{hidden:true}},paper:'#eeeeee'}}}))});
 wiki.listen(0,'127.0.0.1');await once(wiki,'listening');
-const socket=createServer();socket.listen(0,'127.0.0.1');await once(socket,'listening');const port=socket.address().port;await new Promise(r=>socket.close(r));const child=spawn(process.execPath,['.next/standalone/server.js'],{env:{...process.env,PORT:String(port),HOSTNAME:'127.0.0.1',STUDIO_WIKI_ORIGIN:'http://127.0.0.1:'+wiki.address().port},stdio:'inherit'}),base='http://127.0.0.1:'+port;
-try{let ready=false;for(let i=0;i<60;i++){try{if((await fetch(base+'/studio/api/health')).ok){ready=true;break}}catch{}await setTimeout(250)}assert.ok(ready);const library=await fetch(base+'/studio').then(r=>r.text());assert.ok(library.includes('standard-01'));assert.ok(library.includes('ref-27'));const catalog=await fetch(base+'/studio/api/layouts').then(r=>r.json());assert.equal(catalog.layouts.length,28);
-for(const l of catalog.layouts){const page=await fetch(base+l.url);assert.equal(page.status,200,l.id);const html=await page.text();assert.ok(html.includes(l.name));assert.ok(html.includes('data-layout-id="'+l.id+'"'));assert.ok(!/<svg|<img|data:image|trial-controls|page-tools|workbench-top|contenteditable|编辑页面/.test(html),'Default page must use native elements, not source imagery');const schema=await fetch(base+l.api).then(r=>r.json());assert.equal(schema.id,l.id);for(const s of schema.elements)assert.ok(html.includes('data-element="'+s.id+'"'));if(l.family==='standard'){assert.equal((await fetch(base+l.api+'?format=svg')).status,400);continue;}const original=await fetch(base+l.api+'?format=svg').then(r=>r.text());assert.ok(original.includes('data-layout-id="'+l.id+'"'));const text=schema.elements.find(e=>e.kind==='text');const result=await fetch(base+l.api,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({texts:{[text.id]:{value:'API render <test>'}}})});assert.equal(result.status,200);assert.ok((await result.text()).includes('&lt;'));}
-assert.equal(reads,0,'Default pages never load a saved design');
+const socket=createServer();socket.listen(0,'127.0.0.1');await once(socket,'listening');const port=socket.address().port;await new Promise(r=>socket.close(r));const child=spawn(process.execPath,[process.env.STUDIO_STANDALONE_SERVER || '.next/standalone/server.js'],{env:{...process.env,PORT:String(port),HOSTNAME:'127.0.0.1',STUDIO_WIKI_ORIGIN:'http://127.0.0.1:'+wiki.address().port},stdio:'inherit'}),base='http://127.0.0.1:'+port;
+try{let ready=false;for(let i=0;i<60;i++){try{if((await fetch(base+'/studio/api/health')).ok){ready=true;break}}catch{}await setTimeout(250)}assert.ok(ready);const entry=await fetch(base+'/studio',{redirect:'manual'});assert.equal(entry.status,307);assert.equal(entry.headers.get('location'),'/studio/graphic');const library=await fetch(base+'/studio/graphic').then(r=>r.text());assert.ok(library.includes('GRAPHIC'));assert.ok(!library.includes('ref-27')); const catalog=await fetch(base+'/studio/api/layouts').then(r=>r.json());assert.equal(catalog.layouts.length,28);
+for(const l of catalog.layouts){const page=await fetch(base+l.url);assert.equal(page.status,200,l.id);const html=await page.text();assert.ok(html.includes(l.name));assert.ok(html.includes('data-layout-id="'+l.id+'"'));assert.ok(!/<svg|<img|data:image|trial-controls|page-tools|workbench-top|contenteditable|编辑页面/.test(html),'Default page must use native elements, not source imagery');const schema=await fetch(base+l.api).then(r=>r.json());assert.equal(schema.id,l.id);for(const s of schema.elements)assert.ok(html.includes('data-element="'+s.id+'"'));if(l.family==='standard'){assert.equal((await fetch(base+l.api+'?format=svg')).status,400);continue;}const original=await fetch(base+l.api+'?format=svg',{headers:{cookie:'session=smoke-test'}}).then(r=>r.text());assert.ok(original.includes('data-layout-id="'+l.id+'"'));const text=schema.elements.find(e=>e.kind==='text');const result=await fetch(base+l.api,{method:'POST',headers:{'Content-Type':'application/json',cookie:'session=smoke-test'},body:JSON.stringify({texts:{[text.id]:{value:'API render <test>'}}})});assert.equal(result.status,200);assert.ok((await result.text()).includes('&lt;'));}
+assert.equal(reads,0,'Default pages never load a saved design');assert.ok(mediaReads>0,'SVG exports load isolated media fixtures');
 const headers={cookie:'session=smoke-test'};
 for(const id of [designId,standardId]){
 const saved=await fetch(base+'/studio/template-layout?id='+id,{headers});assert.equal(saved.status,200);const savedHtml=await saved.text();assert.ok(savedHtml.includes('确定的页面文字'));assert.ok(savedHtml.includes('新增元素已恢复'));assert.ok(savedHtml.includes('data-element="user-smoke"'));assert.ok(savedHtml.includes('rotate(25deg)'));assert.ok(savedHtml.includes('opacity:0.7'));assert.ok(savedHtml.includes('data-design-id="'+id+'"'));assert.ok(savedHtml.includes('#123456'));assert.ok(!savedHtml.includes('data-element="D01"'));assert.ok(!savedHtml.includes('data:image'));assert.ok(!/page-tools|workbench-top|contenteditable|编辑页面/.test(savedHtml));
@@ -0,0 +1,19 @@
+export type GraphicItem = {
+ id:string;kind:'text'|'rect'|'ellipse'|'image';name:string;text:string;
+ x:number;y:number;w:number;h:number;fill:string;size:number;hidden:boolean;locked:boolean;src?:string;
+};
+export type GraphicDocument = {name:string;background:string;items:GraphicItem[]};
+const color=(value:unknown)=>typeof value==='string'&&/^#[a-f0-9]{6}$/i.test(value);
+/** Accept only bounded editable documents; never execute or load external assets. */
+export function parseGraphicDocument(raw:string):GraphicDocument {
+ if(raw.length>5*1024*1024)throw Error('设计文件不得超过 5MB');
+ const d=JSON.parse(raw);
+ if(!d||typeof d.name!=='string'||d.name.length>100||!color(d.background)||!Array.isArray(d.items)||d.items.length>500)throw Error('设计文件格式不正确');
+ const ids=new Set<string>();
+ for(const i of d.items){
+  if(!i||typeof i.id!=='string'||i.id.length>100||ids.has(i.id)||!['text','rect','ellipse','image'].includes(i.kind)||typeof i.name!=='string'||i.name.length>200||typeof i.text!=='string'||i.text.length>4000||!color(i.fill)||typeof i.hidden!=='boolean'||typeof i.locked!=='boolean'||![i.x,i.y,i.w,i.h,i.size].every(Number.isFinite)||Math.abs(i.x)>4000||Math.abs(i.y)>4000||i.w<1||i.h<1||i.w>4000||i.h>4000||i.size<8||i.size>240)throw Error('设计图层格式不正确');
+  if(i.kind==='image'&&(typeof i.src!=='string'||!/^data:image\/(png|jpeg|webp);base64,[A-Za-z0-9+/=]+$/.test(i.src)))throw Error('图片必须为嵌入式 PNG、JPEG 或 WebP');
+  ids.add(i.id);
+ }
+ return {name:d.name,background:d.background,items:d.items.map((i:GraphicItem)=>({id:i.id,kind:i.kind,name:i.name,text:i.text,x:i.x,y:i.y,w:i.w,h:i.h,fill:i.fill,size:i.size,hidden:i.hidden,locked:i.locked,...(i.kind==='image'?{src:i.src}:{})}))};
+}
@@ -4,6 +4,22 @@ import type {Parameters} from './layout-parameters';
 export async function embedLayoutImages(req:NextApiRequest,params:Parameters){
 const ids=[...new Set(Object.values(params.images).flatMap(v=>v.assetId?[v.assetId]:[]))],sources:Record<string,string>={};let total=0;
 const headers:Record<string,string>={};if(req.headers.authorization)headers.authorization=req.headers.authorization;if(req.headers.cookie)headers.cookie=req.headers.cookie;
- for(const id of ids){const url='http://waterfall-wiki:3000/api/preview?'+new URLSearchParams({source:'/api/media/'+id,width:'960'}),r=await fetch(url,{headers,signal:AbortSignal.timeout(15000),redirect:'error'});if(!r.ok||r.headers.get('content-type')?.split(';')[0]!=='image/webp')throw Error('图片预览不可访问，请检查图片 ID 与登录状态');const chunks:Buffer[]=[];const reader=r.body!.getReader();try{while(true){const {done,value}=await reader.read();if(done)break;total+=value.length;if(total>16*1024*1024)throw Error('图片预览总计超限');chunks.push(Buffer.from(value))}}finally{await reader.cancel()}sources[id]='data:image/webp;base64,'+Buffer.concat(chunks).toString('base64');}
+ for(const id of ids){const url=(process.env.STUDIO_WIKI_ORIGIN||'http://waterfall-wiki:3000')+'/api/preview?'+new URLSearchParams({source:'/api/media/'+id,width:'960'}),r=await fetch(url,{headers,signal:AbortSignal.timeout(15000),redirect:'error'});if(!r.ok||r.headers.get('content-type')?.split(';')[0]!=='image/webp')throw Error('图片预览不可访问，请检查图片 ID 与登录状态');const chunks:Buffer[]=[];const reader=r.body!.getReader();try{while(true){const {done,value}=await reader.read();if(done)break;total+=value.length;if(total>16*1024*1024)throw Error('图片预览总计超限');chunks.push(Buffer.from(value))}}finally{await reader.cancel()}sources[id]='data:image/webp;base64,'+Buffer.concat(chunks).toString('base64');}
 return sources;
 }
+
+/** Export a self-contained SVG without storing image bytes in template JSON. */
+export async function embedSvgMedia(req:NextApiRequest,svg:string){
+ const paths=[...new Set(svg.match(/\/api\/media\/[0-9a-f-]{36}/g)||[])];
+ const headers:Record<string,string>={};if(req.headers.authorization)headers.authorization=req.headers.authorization;if(req.headers.cookie)headers.cookie=req.headers.cookie;
+ let total=0;
+ for(const path of paths){
+  const response=await fetch((process.env.STUDIO_WIKI_ORIGIN||'http://waterfall-wiki:3000')+path,{headers,redirect:'error',signal:AbortSignal.timeout(15000)});
+  const mime=response.headers.get('content-type')?.split(';')[0];
+  if(!response.ok||!mime||!['image/png','image/jpeg','image/webp'].includes(mime))throw Error('模板图片不可访问');
+  const chunks:Uint8Array[]=[];const reader=response.body!.getReader();
+  try{while(true){const {done,value}=await reader.read();if(done)break;total+=value.length;if(total>16*1024*1024)throw Error('模板图片总计超限');chunks.push(value);}}finally{await reader.cancel();}
+  svg=svg.replaceAll(path,'data:'+mime+';base64,'+Buffer.concat(chunks).toString('base64'));
+ }
+ return svg;
+}
@@ -1,3 +1,4 @@
+import {embedSvgMedia} from '../../../lib/layout-images';
 import {renderToStaticMarkup} from 'react-dom/server';
 import {serveApiDocumentation} from '../../../lib/api-documentation';
 import type {NextApiRequest,NextApiResponse} from 'next';
@@ -5,7 +6,7 @@ import {ideas,ideaMarkdown} from '../../../content/ideas';
 import {selections} from '../../../components/SourceCover';
 import {renderCover} from '../../../lib/render-cover';
 import {tutorialPost} from '../../../content/tool-links';
-export default function handler(req:NextApiRequest,res:NextApiResponse){
+export default async function handler(req:NextApiRequest,res:NextApiResponse){
 if(serveApiDocumentation(req,res,'/studio/api/export/{slug}'))return;
 if(!['GET','POST'].includes(req.method||'')){res.setHeader('Allow','GET, POST');return res.status(405).end();}
 const slug=String(req.query.slug||''),idea=ideas.find(i=>i.slug===slug);if(!idea)return res.status(404).end();
@@ -17,7 +18,7 @@ export default function handler(req:NextApiRequest,res:NextApiResponse){
   const result=renderCover(slug,input);res.setHeader('Cache-Control','no-store');
   res.setHeader('Content-Disposition',`attachment; filename="${slug}.${req.query.format==='json'?'json':'svg'}"`);
   if(req.query.format==='json')return res.json(result.data);
-   res.setHeader('Content-Type','image/svg+xml; charset=utf-8');return res.send(renderToStaticMarkup(result.node));
+   res.setHeader('Content-Type','image/svg+xml; charset=utf-8');return res.send(await embedSvgMedia(req,renderToStaticMarkup(result.node)));
  }catch(error){return res.status(400).json({error:error instanceof Error?error.message:'无效参数'});}
 }
 if(req.query.format==='markdown'){res.setHeader('Content-Type','text/markdown; charset=utf-8');return res.send(ideaMarkdown(idea)+'\n\n使用教程：'+tutorialPost+(idea.tool?'\n\n```json\n'+JSON.stringify(selections,null,2)+'\n```':''));}
@@ -1,3 +1,4 @@
+import {embedSvgMedia} from '../../../lib/layout-images';
 import type {NextApiRequest,NextApiResponse} from 'next';
 import {embedLayoutImages} from '../../../lib/layout-images';
 import {createElement} from 'react';
@@ -25,6 +26,6 @@ export default async function handler(req:NextApiRequest,res:NextApiResponse){
  }catch(e){return res.status(400).json({error:e instanceof Error?e.message:'参数不合法'})}
 }
 if(!['GET','HEAD','POST'].includes(req.method||'')){res.setHeader('Allow','GET, HEAD, POST');return res.status(405).end()}const layout=layouts.find(l=>l.id===req.query.id);if(!layout)return res.status(404).json({error:'排版不存在'});
- try{if(req.query.format!==undefined&&!['svg','json'].includes(String(req.query.format)))throw new LayoutParameterError('format 为 svg 或 json');const params=parameters(layout,req.method==='POST'?req.body:{});if(req.method==='HEAD')return res.status(200).end();if(req.query.format==='json')return res.json({layoutId:layout.id,parameters:params});if(req.method==='POST'||req.query.format==='svg'){res.setHeader('Content-Type','image/svg+xml; charset=utf-8');return res.send(renderToStaticMarkup(createElement(LayoutCanvas,{layout,params,imageSources:await embedLayoutImages(req,params)})))}return res.json({schemaVersion:1,family:'fixed',id:layout.id,name:layout.name,width:layout.width,height:layout.height,sourceSha256:layout.sourceSha256,tutorialUrl:layout.tutorialUrl,elements:layout.elements.map(({id,kind,role,box,direction,text,reading})=>({id,kind,role,box,direction,text,reading})),parameters:params,workspaceSchema,url:'/studio/layouts/'+layout.id})}catch(e){return res.status(400).json({error:e instanceof Error?e.message:'参数不合法'})}
+ try{if(req.query.format!==undefined&&!['svg','json'].includes(String(req.query.format)))throw new LayoutParameterError('format 为 svg 或 json');const params=parameters(layout,req.method==='POST'?req.body:{});if(req.method==='HEAD')return res.status(200).end();if(req.query.format==='json')return res.json({layoutId:layout.id,parameters:params});if(req.method==='POST'||req.query.format==='svg'){res.setHeader('Content-Type','image/svg+xml; charset=utf-8');return res.send(await embedSvgMedia(req,renderToStaticMarkup(createElement(LayoutCanvas,{layout,params,imageSources:await embedLayoutImages(req,params)}))))}return res.json({schemaVersion:1,family:'fixed',id:layout.id,name:layout.name,width:layout.width,height:layout.height,sourceSha256:layout.sourceSha256,tutorialUrl:layout.tutorialUrl,elements:layout.elements.map(({id,kind,role,box,direction,text,reading})=>({id,kind,role,box,direction,text,reading})),parameters:params,workspaceSchema,url:'/studio/layouts/'+layout.id})}catch(e){return res.status(400).json({error:e instanceof Error?e.message:'参数不合法'})}
 }
 export const config={api:{bodyParser:{sizeLimit:'64kb'}}};
@@ -0,0 +1,46 @@
+import Head from 'next/head';
+import {useEffect,useRef,useState,type PointerEvent} from 'react';
+import {MousePointer2,Type,Square,Circle,Plus,Minus,Undo2,Redo2,Download,Layers,ImagePlus,Trash2,Copy,Eye,EyeOff,Lock,Unlock,Scan,ChevronRight,ArrowUpRight,PenTool,X,Hand,Link2,BookOpen,PanelLeft,PanelRight} from 'lucide-react';
+import {newElementId} from '../../lib/native-layout';
+import styles from '../../styles/graphic.module.css';
+import {parseGraphicDocument,type GraphicItem as Item,type GraphicDocument as Doc} from '../../lib/graphic-document';
+const blank:Doc={name:'未命名设计',background:'#ffffff',items:[]};
+const storage='studio.graphic.v1';
+export default function Graphic(){
+ const [doc,setDoc]=useState<Doc>(blank),[selected,setSelected]=useState(''),[past,setPast]=useState<Doc[]>([]),[future,setFuture]=useState<Doc[]>([]),[zoom,setZoom]=useState(.65),[status,setStatus]=useState('本机草稿'),[tab,setTab]=useState('图层'),[user,setUser]=useState<{email:string}|null>(null),[auth,setAuth]=useState(false),[mode,setMode]=useState('login'),[message,setMessage]=useState(''),[busy,setBusy]=useState(false);
+ const [tool,setTool]=useState('select'),[offset,setOffset]=useState({x:0,y:0}),[showLayers,setShowLayers]=useState(true),[showProps,setShowProps]=useState(true);
+ const dialog=useRef<HTMLDivElement>(null);
+ useEffect(()=>{if(!auth)return;const old=document.activeElement as HTMLElement;const box=dialog.current;box?.querySelector<HTMLElement>('button,input')?.focus();function key(e:KeyboardEvent){if(e.key==='Escape'){setAuth(false);return}if(e.key!=='Tab'||!box)return;const nodes=Array.from(box.querySelectorAll<HTMLElement>('button:not(:disabled),input,a[href]'));const first=nodes[0],last=nodes[nodes.length-1];if(e.shiftKey&&document.activeElement===first){e.preventDefault();last?.focus()}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first?.focus()}}document.addEventListener('keydown',key);return()=>{document.removeEventListener('keydown',key);old?.focus()}},[auth]);
+ const restore=useRef<HTMLInputElement>(null);
+ const board=useRef<HTMLDivElement>(null),upload=useRef<HTMLInputElement>(null),viewport=useRef<HTMLDivElement>(null),ready=useRef(false),dirty=useRef(false);
+ const item=doc.items.find(i=>i.id===selected);
+ useEffect(()=>{try{const raw=localStorage.getItem(storage);if(raw){setDoc(parseGraphicDocument(raw));}}catch{setStatus('无法读取草稿，请导出备份')}ready.current=true;void refresh();},[]);
+ useEffect(()=>{if(!ready.current)return;try{localStorage.setItem(storage,JSON.stringify(doc));setStatus('已保存到此浏览器');dirty.current=false;}catch{setStatus('本机空间不足，请导出备份');dirty.current=true;}},[doc]);
+ useEffect(()=>{const warn=(e:BeforeUnloadEvent)=>{if(dirty.current){e.preventDefault();e.returnValue=''}};window.addEventListener('beforeunload',warn);return()=>window.removeEventListener('beforeunload',warn)},[]);
+ async function refresh(){try{const r=await fetch('/api/account/session');if(r.ok)setUser((await r.json()).user);}catch{/* Guest editing remains available. */}}
+ function change(next:Doc){setPast(p=>[...p.slice(-49),doc]);setFuture([]);setDoc(next);dirty.current=true;}
+ function patch(p:Partial<Item>){if(item&&!item.locked)change({...doc,items:doc.items.map(i=>i.id===selected?{...i,...p}:i)})}
+ function add(kind:Item['kind'],src?:string){if(doc.items.length>=500){setStatus('单页最多 500 个图层');return;}const id=newElementId();const next:Item={id,kind,name:kind==='text'?'文字':kind==='image'?'图片':kind==='rect'?'矩形':'椭圆',text:'让灵感，有形。',x:90+doc.items.length*12%260,y:100+doc.items.length*12%400,w:kind==='text'?480:260,h:kind==='text'?90:220,fill:kind==='text'?'#282832':'#b8b3ff',size:52,hidden:false,locked:false,src};change({...doc,items:[...doc.items,next]});setSelected(id);setTab('图层');}
+ function undo(){if(!past.length)return;setFuture(f=>[doc,...f]);setDoc(past[past.length-1]);setPast(p=>p.slice(0,-1));}
+ function redo(){if(!future.length)return;setPast(p=>[...p,doc]);setDoc(future[0]);setFuture(f=>f.slice(1));}
+ function remove(){if(item&&!item.locked){change({...doc,items:doc.items.filter(i=>i.id!==selected)});setSelected('')}}
+ function duplicate(){if(item&&doc.items.length<500){const id=newElementId();change({...doc,items:[...doc.items,{...item,id,x:item.x+24,y:item.y+24,name:item.name+' 副本',locked:false}]});setSelected(id)}}
+ function fit(){setOffset({x:0,y:0});if(viewport.current)setZoom(Math.max(.15,Math.min(1,(viewport.current.clientWidth-100)/800,(viewport.current.clientHeight-100)/1000)))}
+ useEffect(()=>{fit();},[]);
+ useEffect(()=>{function key(e:KeyboardEvent){if((e.target as HTMLElement).closest('input,textarea,select,button'))return;if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==='z'){e.preventDefault();e.shiftKey?redo():undo()}else if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==='d'){e.preventDefault();duplicate()}else if(e.key==='Delete'||e.key==='Backspace'){e.preventDefault();remove()}else if(e.key==='Escape')setSelected('');else if(!e.ctrlKey&&!e.metaKey&&e.key.toLowerCase()==='v')setTool('select');else if(!e.ctrlKey&&!e.metaKey&&e.key.toLowerCase()==='h')setTool('hand');else if(item&&!item.locked&&e.key.startsWith('Arrow')){e.preventDefault();const step=e.shiftKey?10:1;patch({x:item.x+(e.key==='ArrowRight'?step:e.key==='ArrowLeft'?-step:0),y:item.y+(e.key==='ArrowDown'?step:e.key==='ArrowUp'?-step:0)})}}window.addEventListener('keydown',key);return()=>window.removeEventListener('keydown',key)});
+ function drag(e:PointerEvent<HTMLDivElement>,i:Item){if(tool==='hand'){panBoard(e);return}e.stopPropagation();setSelected(i.id);if(i.locked||e.button!==0)return;e.preventDefault();e.currentTarget.setPointerCapture(e.pointerId);const x=e.clientX,y=e.clientY,start=doc;let next=start;const target=e.currentTarget;const move=(p:globalThis.PointerEvent)=>{next={...start,items:start.items.map(n=>n.id===i.id?{...n,x:Math.max(-4000,Math.min(4000,i.x+(p.clientX-x)/zoom)),y:Math.max(-4000,Math.min(4000,i.y+(p.clientY-y)/zoom))}:n)};setDoc(next)};const end=()=>{target.removeEventListener('pointermove',move);target.removeEventListener('pointerup',end);target.removeEventListener('pointercancel',end);if(next!==start){setPast(p=>[...p.slice(-49),start]);setFuture([])}};target.addEventListener('pointermove',move);target.addEventListener('pointerup',end);target.addEventListener('pointercancel',end);}
+ function resize(e:PointerEvent<HTMLElement>){e.stopPropagation();if(!item||item.locked)return;e.preventDefault();const start=doc,x=e.clientX,y=e.clientY,target=e.currentTarget;target.setPointerCapture(e.pointerId);let next=start;const move=(p:globalThis.PointerEvent)=>{next={...start,items:start.items.map(i=>i.id===item.id?{...i,w:Math.max(1,Math.min(4000,item.w+(p.clientX-x)/zoom)),h:Math.max(1,Math.min(4000,item.h+(p.clientY-y)/zoom))}:i)};setDoc(next)};const end=()=>{target.removeEventListener('pointermove',move);target.removeEventListener('pointerup',end);target.removeEventListener('pointercancel',end);if(next!==start){setPast(p=>[...p.slice(-49),start]);setFuture([])}};target.addEventListener('pointermove',move);target.addEventListener('pointerup',end);target.addEventListener('pointercancel',end)}
+ function panBoard(e:PointerEvent<HTMLElement>){if(tool!=='hand')return;e.preventDefault();const x=e.clientX,y=e.clientY,start=offset,target=e.currentTarget;target.setPointerCapture(e.pointerId);const move=(p:globalThis.PointerEvent)=>setOffset({x:start.x+p.clientX-x,y:start.y+p.clientY-y});const end=()=>{target.removeEventListener('pointermove',move);target.removeEventListener('pointerup',end);target.removeEventListener('pointercancel',end)};target.addEventListener('pointermove',move);target.addEventListener('pointerup',end);target.addEventListener('pointercancel',end)}
+ function download(content:string,type:string,extension:string){const url=URL.createObjectURL(new Blob([content],{type}));const a=document.createElement('a');a.href=url;a.download=doc.name+'.'+extension;a.click();setTimeout(()=>URL.revokeObjectURL(url),1000)}
+ function exportSVG(){const esc=(s:string)=>s.replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&apos;'}[c]!));const svg=doc.items.filter(i=>!i.hidden).map(i=>i.kind==='text'?`<text x="${i.x}" y="${i.y+i.size}" font-family="sans-serif" font-size="${i.size}" fill="${esc(i.fill)}">${i.text.split('\n').map((line,n)=>`<tspan x="${i.x}" dy="${n?i.size*1.3:0}">${esc(line)}</tspan>`).join('')}</text>`:i.kind==='image'?`<image x="${i.x}" y="${i.y}" width="${i.w}" height="${i.h}" href="${esc(i.src||'')}" preserveAspectRatio="xMidYMid slice"/>`:i.kind==='ellipse'?`<ellipse cx="${i.x+i.w/2}" cy="${i.y+i.h/2}" rx="${i.w/2}" ry="${i.h/2}" fill="${esc(i.fill)}"/>`:`<rect x="${i.x}" y="${i.y}" width="${i.w}" height="${i.h}" fill="${esc(i.fill)}"/>`).join('');download(`<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1000" viewBox="0 0 800 1000"><rect width="800" height="1000" fill="${esc(doc.background)}"/>${svg}</svg>`,'image/svg+xml','svg');}
+ async function account(e:React.FormEvent<HTMLFormElement>){e.preventDefault();setBusy(true);setMessage('');const data=new FormData(e.currentTarget);try{const r=await fetch('/api/account/'+mode,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:data.get('email'),password:data.get('password')})});const d=await r.json();setMessage(d.error||d.message||'登录成功');if(r.ok){await refresh();if(mode==='login')setAuth(false);}}catch{setMessage('账户服务暂时无法连接')}finally{setBusy(false)}}
+ return <div className={styles.app} data-layers={showLayers} data-properties={showProps}><Head><title>{doc.name + " · Studio Graphic"}</title><meta name="description" content="在 Studio 中自由编排文字、图形与图片。"/></Head>
+ <header className={styles.top}><a href="/workspace" className={styles.brand}><span>✳</span> studio<span className={styles.badge}>GRAPHIC</span></a><button aria-label="切换图层面板" aria-pressed={showLayers} onClick={()=>setShowLayers(v=>!v)}><PanelLeft size={17}/></button><button aria-label="切换属性面板" aria-pressed={showProps} onClick={()=>setShowProps(v=>!v)}><PanelRight size={17}/></button><ChevronRight size={14}/><input aria-label="设计名称" value={doc.name} maxLength={100} onChange={e=>change({...doc,name:e.target.value})}/><span className={styles.saved} role="status">{status}</span><button title="撤销" aria-label="撤销" disabled={!past.length} onClick={undo}><Undo2 size={17}/></button><button title="重做" aria-label="重做" disabled={!future.length} onClick={redo}><Redo2 size={17}/></button><button onClick={()=>setAuth(true)} className={styles.account}>{user?user.email:'邮箱登录'}</button><button className={styles.primary} onClick={exportSVG}><Download size={15}/>导出 SVG</button></header>
+ <div className={styles.body}><aside className={styles.left}><div className={styles.tabs}>{['图层','素材','Agent'].map(t=><button key={t} aria-pressed={tab===t} onClick={()=>setTab(t)}>{t}</button>)}</div><div className={styles.pageTitle}><span>页面 01</span><span>800 × 1000</span></div>{tab==='Agent'?<div className={styles.agentPanel}><Link2 size={24}/><h3>与你的 Agent 一起设计</h3><p>将接入文档交给 coding agent，使用已有的模板与创作 API。</p><a href="/studio/api" target="_blank" rel="noreferrer">查看接入文档 ↗</a><a href="/documents" target="_blank" rel="noreferrer"><BookOpen size={15}/>知识与教程 ↗</a><small>在 Agent 中打开文档，查看可用的创作接口与使用方式。</small></div>:tab==='图层'?<><div className={styles.layers}>{[...doc.items].reverse().map(i=><div className={styles.layer} data-selected={i.id===selected} key={i.id}><button onClick={()=>setSelected(i.id)}>{i.kind==='text'?<Type size={14}/>:<Square size={14}/>}<span>{i.name}</span></button><button aria-label={i.hidden?'显示图层':'隐藏图层'} onClick={()=>change({...doc,items:doc.items.map(n=>n.id===i.id?{...n,hidden:!n.hidden}:n)})}>{i.hidden?<EyeOff size={13}/>:<Eye size={13}/>}</button><button aria-label={i.locked?'解锁图层':'锁定图层'} onClick={()=>change({...doc,items:doc.items.map(n=>n.id===i.id?{...n,locked:!n.locked}:n)})}>{i.locked?<Lock size={13}/>:<Unlock size={13}/>}</button></div>)}{!doc.items.length&&<div className={styles.emptyLayers}><Layers size={23}/><p>好设计，从第一笔开始</p><small>从下方工具栏添加文字与图形</small></div>}</div><button className={styles.addLayer} onClick={()=>add('text')}><Plus size={15}/>添加图层</button></>:<div className={styles.assets}><h3>基础元素</h3><button onClick={()=>add('rect')}><Square/>矩形</button><button onClick={()=>add('ellipse')}><Circle/>椭圆</button><button onClick={()=>add('text')}><Type/>文字</button><button onClick={()=>upload.current?.click()}><ImagePlus/>上传图片</button><p>你的画布，由你定义。支持 PNG、JPEG、WebP。</p></div>}<div className={styles.leftFooter}><a href="/infinite_canvas">Infinite Canvas <ArrowUpRight size={14}/></a><small>⌘ Z 撤销 · 方向键微调 · Delete 删除</small></div></aside>
+ <main ref={viewport} className={styles.viewport} onPointerDown={e=>{setSelected('');panBoard(e)}}><div className={styles.canvasLabel}>画板 01 <span>800 × 1000</span></div><div className={styles.boardWrap} style={{width:800*zoom,height:1000*zoom,transform:`translate(${offset.x}px,${offset.y}px)`}}><div ref={board} className={styles.board} style={{background:doc.background,transform:`scale(${zoom})`}}>{doc.items.filter(i=>!i.hidden).map(i=><div key={i.id} tabIndex={0} role="button" aria-label={i.name} aria-pressed={selected===i.id} onFocus={()=>setSelected(i.id)} onPointerDown={e=>drag(e,i)} className={styles.element} data-selected={selected===i.id} style={{left:i.x,top:i.y,width:i.w,height:i.h,borderRadius:i.kind==='ellipse'?'50%':0,background:i.kind==='rect'||i.kind==='ellipse'?i.fill:undefined,color:i.fill,fontSize:i.size,whiteSpace:'pre-wrap'}}>{i.kind==='text'?i.text:i.kind==='image'?<img src={i.src} alt={i.name} draggable={false}/>:null}{selected===i.id&&<><i className={styles.corner} onPointerDown={resize}/><span className={styles.measure}>{Math.round(i.w)} × {Math.round(i.h)}</span></>}</div>)}{!doc.items.length&&<div className={styles.blankHint}><PenTool size={34} strokeWidth={1}/><h1>留白，是创作的起点。</h1><p>添加文字、图形，或放入你的第一张图片。</p><button onPointerDown={e=>e.stopPropagation()} onClick={()=>add('text')}>开始设计 <ArrowUpRight size={16}/></button></div>}</div></div><div className={styles.tools} onPointerDown={e=>e.stopPropagation()}><button title="选择" aria-label="选择工具" aria-pressed={tool==='select'} onClick={()=>{setTool('select');setSelected('')}}><MousePointer2 size={20}/></button><button title="抓手工具" aria-label="抓手工具" aria-pressed={tool==='hand'} onClick={()=>setTool('hand')}><Hand size={19}/></button><button title="文字" aria-label="添加文字" onClick={()=>add('text')}><Type size={20}/></button><button title="矩形" aria-label="添加矩形" onClick={()=>add('rect')}><Square size={19}/></button><button title="椭圆" aria-label="添加椭圆" onClick={()=>add('ellipse')}><Circle size={19}/></button><button title="图片" aria-label="上传图片" onClick={()=>upload.current?.click()}><ImagePlus size={19}/></button><span/><button aria-label="缩小" onClick={()=>setZoom(z=>Math.max(.15,z-.1))}><Minus size={16}/></button><output>{Math.round(zoom*100)}%</output><button aria-label="放大" onClick={()=>setZoom(z=>Math.min(2,z+.1))}><Plus size={16}/></button><button aria-label="适应画布" onClick={fit}><Scan size={18}/></button></div></main>
+ <aside className={styles.right}><div className={styles.inspectorTitle}>设计属性<span>Design</span></div>{item?<div className={styles.props}><label>图层名称<input maxLength={200} value={item.name} disabled={item.locked} onChange={e=>patch({name:e.target.value})}/></label><h3>布局</h3><div className={styles.fields}>{(['x','y','w','h'] as const).map(k=><label key={k}>{({x:'X',y:'Y',w:'宽',h:'高'})[k]}<input type="number" value={Math.round(item[k])} disabled={item.locked} onChange={e=>{const value=Number(e.target.value);if(Number.isFinite(value))patch({[k]:k==='w'||k==='h'?Math.max(1,Math.min(4000,value)):Math.max(-4000,Math.min(4000,value))})}}/></label>)}</div>{item.kind==='text'&&<><h3>文字</h3><textarea aria-label="文字内容" value={item.text} maxLength={4000} disabled={item.locked} onChange={e=>patch({text:e.target.value})}/><label>字号<input type="number" min={8} max={240} value={item.size} disabled={item.locked} onChange={e=>patch({size:Math.max(8,Math.min(240,Number(e.target.value)||8))})}/></label></>}<h3>填色</h3><label className={styles.color}><input type="color" value={item.fill} disabled={item.locked} onChange={e=>patch({fill:e.target.value})}/>{item.fill.toUpperCase()}</label><div className={styles.actions}><button onClick={duplicate}><Copy size={15}/>复制</button><button disabled={item.locked} onClick={remove}><Trash2 size={15}/>删除</button></div><button disabled={item.locked} onClick={()=>{const n=doc.items.findIndex(i=>i.id===item.id);if(n>0){const items=[...doc.items];[items[n-1],items[n]]=[items[n],items[n-1]];change({...doc,items})}}}>下移一层</button></div>:<div className={styles.props}><h3>画板</h3><p>自由画布 · 竖版</p><div className={styles.dimensions}>W <b>800</b> H <b>1000</b></div><h3>背景颜色</h3><label className={styles.color}><input type="color" value={doc.background} onChange={e=>change({...doc,background:e.target.value})}/>{doc.background.toUpperCase()}</label><div className={styles.note}><MousePointer2 size={20}/><p>选中一个图层，<br/>调整属于它的每个细节。</p></div></div>}<div className={styles.rightFooter}><button onClick={()=>download(JSON.stringify(doc,null,2),'application/json','json')}><Download size={15}/>备份设计 JSON</button><button onClick={()=>restore.current?.click()}>导入设计 JSON</button><p>草稿仅保存在此浏览器。<br/>邮箱登录共用全站账户。</p></div></aside></div>
+ <input ref={restore} hidden type="file" accept="application/json,.json" onChange={async e=>{const f=e.target.files?.[0];e.target.value='';if(!f)return;try{if(f.size>5*1024*1024)throw Error('文件不得超过 5MB');const restored=parseGraphicDocument(await f.text());change(restored);setSelected('');}catch(error){setStatus(error instanceof Error?error.message:'导入失败')}}}/>
+ <input ref={upload} hidden type="file" accept="image/png,image/jpeg,image/webp" onChange={e=>{const f=e.target.files?.[0];if(!f)return;if(f.size>3*1024*1024||!['image/png','image/jpeg','image/webp'].includes(f.type)){setStatus('请使用 3MB 以内的 PNG / JPEG / WebP');return}const reader=new FileReader();reader.onload=()=>add('image',String(reader.result));reader.readAsDataURL(f);e.target.value=''}}/>
+ {auth&&<div className={styles.overlay}><div ref={dialog} className={styles.modal} role="dialog" aria-modal="true" aria-label="邮箱账户"><button className={styles.close} aria-label="关闭" onClick={()=>setAuth(false)}><X size={20}/></button><span className={styles.modalIcon}>✳</span><h2>{user?'你的 Studio 账户':'把灵感带进 Studio'}</h2>{user?<><p>{user.email}</p><button onClick={async()=>{try{const r=await fetch('/api/account/logout',{method:'POST',headers:{'Content-Type':'application/json'},body:'{}'});if(!r.ok)throw Error();setUser(null);setAuth(false)}catch{setMessage('退出失败，请重试')}}}>退出登录</button></>:<><p>使用知识站的同一个邮箱账户</p><div className={styles.tabs}>{[['login','登录'],['register','注册'],['resend','重发邮件']].map(([v,t])=><button key={v} aria-pressed={mode===v} onClick={()=>setMode(v)}>{t}</button>)}</div><form onSubmit={account}><label>邮箱<input autoFocus required type="email" name="email" autoComplete="email" maxLength={254}/></label><label>密码<input required type="password" name="password" minLength={12} maxLength={256} autoComplete={mode==='register'?'new-password':'current-password'}/></label><small>密码至少 12 字符；新账户需通过邮件验证。</small><button className={styles.primary} disabled={busy}>{busy?'处理中…':mode==='login'?'登录 Studio':mode==='register'?'创建账户':'重发验证邮件'}</button></form></>}<p role="status">{message}</p></div></div>}
+ </div>
+}
@@ -1,6 +1,3 @@
-import Head from 'next/head';
-import fixed from '../content/templates/layouts.json';
-import standard from '../content/standard-layout.json';
-import {nativeLayout} from '../lib/native-layout';
-import {NativePreview as Preview} from '../components/NativePreview';
-export default function StudioEntry(){return <main className="studio-library"><Head><title>Studio · 可视化排版 API 库</title></Head><nav className="library-nav"><a href="/">PROMPT / STUDIO</a><a href="/explore/8eb8c76500580f7a4b56ba3c">使用文档与工具箱</a><a href="/api/studio/designs?agent_mode=True">API 契约</a></nav><h1>用参数，编排画面。</h1><p className="library-intro">给 coding agent 文字、图片与创作意图。选择标准图文或固定构图，通过 HTTP 保存渲染描述，得到一个可持续更新的原生页面。</p><div className="library-heading"><h2>标准排版</h2><a href="/studio/api/layouts/standard-01">参数</a></div><div className="library-standard"><a href="/studio/layouts/standard-01"><Preview layout={standard}/></a><div><h2>一页，一件事。</h2><p>沿用 Studio 标题、正文与页脚的图文结构，增加可配置图片位。文字、颜色、图片和几何坐标共用一套参数，也可添加原生元素。</p><code>layoutId: standard-01</code><p><a href="/studio/layouts/standard-01">打开原生页面</a></p></div></div><div className="library-heading"><h2>固定排版 · 27 套</h2><a href="/explore/8eb8c76500580f7a4b56ba3c">使用文档</a></div><div className="library-grid">{fixed.map(l=><article className="library-item" key={l.id}><a href={'/studio/layouts/'+l.id}><Preview layout={nativeLayout(l)}/><h3>{l.name}</h3><p>{l.id.toUpperCase()}</p></a></article>)}</div></main>}
+import type {GetServerSideProps} from 'next';
+export default function StudioEntry(){return null}
+export const getServerSideProps:GetServerSideProps=async()=>({redirect:{destination:'/graphic',permanent:false}});
@@ -0,0 +1,43 @@
+import Head from 'next/head';
+import {useEffect,useRef,useState} from 'react';
+import {ArrowLeft,Plus,MousePointer2,Hand,ImagePlus,Type,Workflow,Undo2,Redo2,Minus,Maximize,Download,Upload,Trash2,Link2,Sparkles,ChevronRight,Sun,Moon} from 'lucide-react';
+import s from '../../styles/infinite-canvas.module.css';
+type Card={id:string;kind:'text'|'image'|'prompt';title:string;text:string;x:number;y:number;image?:string;width?:number;height?:number};
+type Doc={version:1;cards:Card[];links:[string,string][]};
+const example:Doc={version:1,cards:[{id:'brief',kind:'text',title:'01 / 创意简报',text:'把日常，拍成一场电影。\n\n一段关于城市清晨的视觉散文。低饱和色彩、自然光与细腻颗粒，让每一帧都有呼吸感。',x:70,y:140},{id:'reference',kind:'image',title:'02 / 视觉参考',text:'晨光 · 建筑 · 胶片质感\n上传你的参考图片',x:460,y:80},{id:'shot',kind:'prompt',title:'03 / 镜头构思',text:'清晨，阳光穿过窗边的植物，落在安静的房间里。缓慢推进镜头，35mm 胶片，温暖柔和的光线。',x:850,y:160}],links:[['brief','reference'],['reference','shot']]};
+const initial:Doc={version:1,cards:[],links:[]};
+const key='studio.infinite-canvas.v1';
+function valid(v:unknown):v is Doc{const d=v as Doc;return !!d&&d.version===1&&Array.isArray(d.cards)&&d.cards.length<=80&&d.cards.every(c=>c&&typeof c.id==='string'&&c.id.length<100&&['text','image','prompt'].includes(c.kind)&&typeof c.title==='string'&&c.title.length<=200&&typeof c.text==='string'&&c.text.length<=10000&&Number.isFinite(c.x)&&Number.isFinite(c.y)&&Math.abs(c.x)<100000&&Math.abs(c.y)<100000&& (c.width===undefined||(Number.isFinite(c.width)&&c.width>=260&&c.width<=1200))&&(c.height===undefined||(Number.isFinite(c.height)&&c.height>=300&&c.height<=1200))&&(!c.image||(/^data:image\/(png|jpeg|webp);base64,/.test(c.image)&&c.image.length<3000000)))&&new Set(d.cards.map(c=>c.id)).size===d.cards.length&&Array.isArray(d.links)&&d.links.length<=200&&d.links.every(l=>Array.isArray(l)&&l.length===2&&l[0]!==l[1]&&l.every(id=>d.cards.some(c=>c.id===id)));}
+export default function InfiniteCanvas(){
+ const [doc,setDoc]=useState<Doc>(initial),[selected,select]=useState('shot'),[zoom,setZoom]=useState(.8),[pan,setPan]=useState({x:0,y:0}),[tool,setTool]=useState('select'),[past,setPast]=useState<Doc[]>([]),[future,setFuture]=useState<Doc[]>([]),[status,setStatus]=useState('示例项目 · 尚未保存'),[ready,setReady]=useState(false),[email,setEmail]=useState(''),[link,setLink]=useState(''),[menu,setMenu]=useState<{x:number;y:number}|null>(null),[theme,setTheme]=useState<'light'|'dark'>('dark'),[editing,setEditing]=useState('');
+ const file=useRef<HTMLInputElement>(null),json=useRef<HTMLInputElement>(null),viewport=useRef<HTMLDivElement>(null),drag=useRef<{id:string;x:number;y:number;ox:number;oy:number;before:Doc;resize?:boolean}|null>(null);
+ const active=doc.cards.find(c=>c.id===selected);
+ useEffect(()=>{try{const raw=localStorage.getItem(key);if(raw){const d=JSON.parse(raw);if(valid(d)){setDoc(d);setStatus('已恢复本机草稿')}}}catch{setStatus('草稿读取失败，可导入 JSON 恢复')}try{const v=JSON.parse(localStorage.getItem(key+'.view')||'null');if(v&&Number.isFinite(v.zoom)&&v.zoom>=.2&&v.zoom<=2&&Number.isFinite(v.x)&&Number.isFinite(v.y)){setZoom(v.zoom);setPan({x:v.x,y:v.y})}}catch{}try{const t=localStorage.getItem(key+'.theme');setTheme(t==='light'?'light':'dark')}catch{}setReady(true);fetch('/api/account/session').then(r=>r.ok?r.json():null).then(d=>setEmail(d?.user?.email||'')).catch(()=>{});},[]);
+ useEffect(()=>{if(!ready)return;try{localStorage.setItem(key,JSON.stringify(doc));setStatus('已保存到此浏览器')}catch{setStatus('本机空间不足，请导出项目备份')}},[doc,ready]);
+ useEffect(()=>{if(ready)try{localStorage.setItem(key+'.view',JSON.stringify({...pan,zoom}))}catch{}},[pan,zoom,ready]);
+ useEffect(()=>{const el=viewport.current;if(!el)return;const block=(e:WheelEvent)=>{if(!(e.target as HTMLElement).closest('textarea,input,select'))e.preventDefault()};el.addEventListener('wheel',block,{passive:false});return()=>el.removeEventListener('wheel',block)},[]);
+ useEffect(()=>{const keys=(e:KeyboardEvent)=>{if(e.key==='Escape'){setMenu(null);setEditing('');return}if((e.target as HTMLElement).closest('input,textarea,select,[contenteditable]'))return;if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='z'){e.preventDefault();if(e.shiftKey)redo();else undo()}if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='d'){e.preventDefault();duplicate()}};window.addEventListener('keydown',keys);return()=>window.removeEventListener('keydown',keys)});
+ useEffect(()=>{if(ready)try{localStorage.setItem(key+'.theme',theme)}catch{}},[theme,ready]);
+ function scaleAt(next:number,cx?:number,cy?:number){const el=viewport.current;if(!el)return;const r=el.getBoundingClientRect(),x=cx===undefined?r.width/2:cx-r.left,y=cy===undefined?r.height/2:cy-r.top;const z=Math.max(.2,Math.min(2,next));setPan({x:x-(x-pan.x)*z/zoom,y:y-(y-pan.y)*z/zoom});setZoom(z)}
+ function duplicate(){if(!active||doc.cards.length>=80)return;const id=Array.from(crypto.getRandomValues(new Uint8Array(16)),b=>b.toString(16).padStart(2,'0')).join('');commit({...doc,cards:[...doc.cards,{...active,id,title:active.title.slice(0,197)+' 副本',x:active.x+40,y:active.y+40}]});select(id)}
+ function commit(next:Doc){setPast(p=>[...p.slice(-29),doc]);setFuture([]);setDoc(next)}
+ function add(kind:Card['kind'],image?:string){if(doc.cards.length>=80){setStatus('最多 80 个节点');return}const id=Array.from(crypto.getRandomValues(new Uint8Array(16)),b=>b.toString(16).padStart(2,'0')).join('');const rect=viewport.current?.getBoundingClientRect();commit({...doc,cards:[...doc.cards,{id,kind,title:kind==='text'?'灵感笔记':kind==='image'?'参考素材':'生成提示词',text:'',x:((menu?.x??(rect?.width||700)/2)-pan.x)/zoom-160,y:((menu?.y??(rect?.height||600)/2)-pan.y)/zoom-100,image}]});select(id)}
+ function change(field:'title'|'text',value:string,id=selected){setDoc(d=>({...d,cards:d.cards.map(c=>c.id===id?{...c,[field]:value}:c)}))}
+ function beginEdit(){setPast(p=>[...p.slice(-29),doc]);setFuture([])}
+ function undo(){if(!past.length)return;setFuture(f=>[doc,...f]);setDoc(past[past.length-1]);setPast(p=>p.slice(0,-1))}
+ function redo(){if(!future.length)return;setPast(p=>[...p,doc]);setDoc(future[0]);setFuture(f=>f.slice(1))}
+ function fit(){const el=viewport.current;if(!el||!doc.cards.length)return;const minX=Math.min(...doc.cards.map(c=>c.x)),minY=Math.min(...doc.cards.map(c=>c.y));const w=Math.max(...doc.cards.map(c=>c.x+(c.width||320)))-minX,h=Math.max(...doc.cards.map(c=>c.y+(c.height||350)))-minY;const z=Math.max(.2,Math.min(1,(el.clientWidth-80)/w,(el.clientHeight-100)/h));setZoom(z);setPan({x:(el.clientWidth-w*z)/2-minX*z,y:(el.clientHeight-h*z)/2-minY*z})}
+ function exportDoc(){const url=URL.createObjectURL(new Blob([JSON.stringify(doc,null,2)],{type:'application/json'}));const a=document.createElement('a');a.href=url;a.download='studio-canvas.json';a.click();setTimeout(()=>URL.revokeObjectURL(url),1000)}
+ return <main className={s.app} data-theme={theme}><Head><title>无限画布 · Studio</title><meta name="description" content="在无限画布上组织灵感、参考素材与镜头提示词"/></Head>
+ <header className={s.header}><a href="/workspace" className={s.back} aria-label="返回 Studio"><ArrowLeft size={18}/></a><a href="/workspace" className={s.brand}>STUDIO<span>✳</span></a><i/><span className={s.crumb}>工作空间 <ChevronRight size={13}/></span><strong>未命名的灵感宇宙</strong><span className={s.badge}>本机草稿</span><div className={s.spacer}/><button aria-label="切换明暗主题" title={theme==='dark'?'切换浅色模式':'切换深色模式'} onClick={()=>setTheme(t=>t==='dark'?'light':'dark')}>{theme==='dark'?<Sun size={17}/>:<Moon size={17}/>}</button><a href="/account">{email||'登录账户'}</a><button className={s.export} onClick={exportDoc}><Download size={15}/>导出项目</button></header>
+ <div className={s.workspace}><nav className={s.rail} aria-label="画布工具"><button title="选择工具" aria-label="选择工具" aria-pressed={tool==='select'} onClick={()=>setTool('select')}><MousePointer2/></button><button title="移动画布" aria-label="移动画布" aria-pressed={tool==='hand'} onClick={()=>setTool('hand')}><Hand/></button><hr/><button title="添加笔记" aria-label="添加笔记" onClick={()=>add('text')}><Type/></button><button title="上传图片" aria-label="上传图片" onClick={()=>file.current?.click()}><ImagePlus/></button><button title="添加提示词" aria-label="添加提示词" onClick={()=>add('prompt')}><Sparkles/></button><button title="导入项目" aria-label="导入项目" onClick={()=>json.current?.click()}><Upload/></button><div className={s.spacer}/><span>∞</span></nav>
+ <section className={s.canvasArea}>{!doc.cards.length&&<div className={s.startPanel}><span>YOUR NEXT IDEA STARTS HERE</span><h2>给想法，一个无限的空间。</h2><p>双击画布添加节点，或选择一个起点。</p><div><button onClick={()=>add('text')}><Type size={19}/>灵感笔记</button><button onClick={()=>file.current?.click()}><ImagePlus size={19}/>参考图片</button><button onClick={()=>add('prompt')}><Sparkles size={19}/>创作提示词</button></div><button onClick={()=>{commit(example);select('');setPan({x:0,y:0});setZoom(.7)}}>从示例开始 ↗</button><a href="/studio/api" target="_blank" rel="noreferrer">连接你的 coding agent · 接入文档 ↗</a></div>}<div className={s.canvasTitle}><span className={s.eyebrow}>YOUR IDEAS, CONNECTED</span><h1>无限画布<span> / Infinite canvas</span></h1><p>从一个灵感，连接所有可能。</p></div>
+ <div className={s.viewport} style={{backgroundPosition:`${pan.x}px ${pan.y}px`,backgroundSize:`${24*zoom*Math.max(1,2**Math.ceil(Math.log2(1/zoom)))}px ${24*zoom*Math.max(1,2**Math.ceil(Math.log2(1/zoom)))}px`}} ref={viewport} onDoubleClick={e=>{if(e.target===e.currentTarget){setMenu(null);add('text')}}} onContextMenu={e=>{e.preventDefault();const id=(e.target as HTMLElement).closest('[data-node-id]')?.getAttribute('data-node-id');select(id||'');setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-330)})}} onWheel={e=>{const target=e.target as HTMLElement;if(drag.current)return;if(target.closest('textarea,input,select'))return;if(e.ctrlKey||e.metaKey){scaleAt(zoom*Math.exp(-e.deltaY*.002),e.clientX,e.clientY)}else setPan(p=>({x:p.x-e.deltaX,y:p.y-e.deltaY}))}} onPointerDown={e=>{setMenu(null);if(e.target===e.currentTarget)setEditing('');if(e.target===e.currentTarget||(tool==='hand'&&!(e.target as HTMLElement).closest('input,textarea,button,select'))||e.button===1){e.currentTarget.setPointerCapture(e.pointerId);drag.current={id:'pan',x:e.clientX,y:e.clientY,ox:pan.x,oy:pan.y,before:doc}}}} onPointerMove={e=>{const d=drag.current;if(!d)return;if(d.id==='pan')setPan({x:d.ox+e.clientX-d.x,y:d.oy+e.clientY-d.y});else {if(!d.resize&&Math.hypot(e.clientX-d.x,e.clientY-d.y)<4)return;e.currentTarget.setPointerCapture(e.pointerId);setDoc({...d.before,cards:d.before.cards.map(c=>c.id===d.id?(d.resize?{...c,width:Math.max(260,Math.min(1200,d.ox+(e.clientX-d.x)/zoom)),height:Math.max(300,Math.min(1200,d.oy+(e.clientY-d.y)/zoom))}:{...c,x:d.ox+(e.clientX-d.x)/zoom,y:d.oy+(e.clientY-d.y)/zoom}):c)})}}} onPointerUp={e=>{const d=drag.current;if(d?.id==='pan'&&tool==='select'&&Math.hypot(e.clientX-d.x,e.clientY-d.y)<4){select('');setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-230)})}if(d&&d.id!=='pan'&&doc!==d.before){setPast(p=>[...p.slice(-29),d.before]);setFuture([])}drag.current=null}} onPointerCancel={()=>{if(drag.current?.id!=='pan'&&drag.current)setDoc(drag.current.before);drag.current=null}}>
+ <div className={s.world} style={{transform:`translate(${pan.x}px,${pan.y}px) scale(${zoom})`}}><svg className={s.wires} aria-hidden="true">{doc.links.map(([a,b])=>{const from=doc.cards.find(c=>c.id===a),to=doc.cards.find(c=>c.id===b);if(!from||!to)return null;return <path key={a+b} d={`M ${from.x+(from.width||320)} ${from.y+(from.height||350)/2} C ${from.x+(from.width||320)+70} ${from.y+(from.height||350)/2},${to.x-45} ${to.y+(to.height||350)/2},${to.x} ${to.y+(to.height||350)/2}`}/>})}</svg>
+ {doc.cards.map(c=><article key={c.id} className={`${s.card} ${selected===c.id?s.selected:''} ${editing===c.id?s.editing:s.preview}`} data-node-id={c.id} style={{left:c.x,top:c.y,width:c.width||320,height:c.height||350}} onPointerDown={e=>{if(editing===c.id||tool==='hand'||e.button!==0||(e.target as HTMLElement).closest('button'))return;e.stopPropagation();setMenu(null);select(c.id);setEditing('');drag.current={id:c.id,x:e.clientX,y:e.clientY,ox:c.x,oy:c.y,before:doc}}} onClick={()=>select(c.id)}><div className={s.cardHead} title="拖动手柄 · 移动工具" aria-label={`移动 ${c.title}`} onPointerDown={e=>{if(tool==='hand'||e.button!==0)return;e.stopPropagation();viewport.current?.setPointerCapture(e.pointerId);select(c.id);drag.current={id:c.id,x:e.clientX,y:e.clientY,ox:c.x,oy:c.y,before:doc}}}><span>{c.kind==='text'?<Type size={15}/>:c.kind==='image'?<ImagePlus size={15}/>:<Sparkles size={15}/>} {c.title}</span><span>⠿</span></div>{c.kind==='image'?<div className={s.image} role="button" tabIndex={0} aria-label={`替换 ${c.title} 图片`} onDoubleClick={e=>{e.stopPropagation();select(c.id);setEditing(c.id);setTool('select');setMenu(null);file.current?.click()}} onKeyDown={e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();select(c.id);setEditing(c.id);file.current?.click()}}}>{c.image?<img src={c.image} alt={c.title}/>:<><div className={s.landscape}><span>REF.</span><b>光的形状</b><small>LIGHT / SPACE / EMOTION</small></div><span className={s.sample}>双击替换参考图</span></>}</div>:<div className={s.cardBody} onDoubleClick={e=>{e.stopPropagation();if(editing===c.id)return;select(c.id);setEditing(c.id);setTool('select');setMenu(null);const body=e.currentTarget;const name=body.querySelector('input');const field=name&&e.clientY<=name.getBoundingClientRect().bottom?name:body.querySelector('textarea');requestAnimationFrame(()=>field?.focus())}}><span className={s.nodeType}>{c.kind==='prompt'?'PROMPT / 提示词':'NOTE / 灵感笔记'}</span><input readOnly={editing!==c.id} tabIndex={editing===c.id?0:-1} aria-label={`${c.title} 名称`} value={c.title} maxLength={200} onFocus={beginEdit} onChange={e=>change('title',e.target.value,c.id)}/><textarea readOnly={editing!==c.id} tabIndex={editing===c.id?0:-1} aria-label={`${c.title} 内容`} value={c.text} maxLength={10000} placeholder="在工具内直接编辑…" onFocus={beginEdit} onChange={e=>change('text',e.target.value,c.id)}/></div>}{c.kind==='prompt'&&<div className={s.disconnected}>提示词已备好，交给你的 Agent 继续创作。</div>}<footer>{c.kind==='image'?'视觉素材':c.kind==='prompt'?'镜头设计':'创作起点'}<button aria-label={`${editing===c.id?'完成编辑':'编辑'} ${c.title}`} onClick={e=>{e.stopPropagation();select(c.id);setEditing(editing===c.id?'':c.id)}}>{editing===c.id?'完成':'编辑'}</button><button aria-label={`${c.title} 操作`} onClick={e=>{e.stopPropagation();select(c.id);setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-330)})}}>•••</button></footer><span className={s.inputPort}/><span className={s.outputPort}/><button className={s.resize} aria-label={`调整 ${c.title} 尺寸`} onPointerDown={e=>{e.stopPropagation();viewport.current?.setPointerCapture(e.pointerId);select(c.id);drag.current={id:c.id,x:e.clientX,y:e.clientY,ox:c.width||320,oy:c.height||350,before:doc,resize:true}}}>↘</button></article>)}
+ </div></div><div className={s.canvasBottom}><span role="status">● {status}</span><div className={s.controls}><button aria-label="撤销" disabled={!past.length} onClick={undo}><Undo2 size={16}/></button><button aria-label="重做" disabled={!future.length} onClick={redo}><Redo2 size={16}/></button><i/><button aria-label="缩小" onClick={()=>scaleAt(zoom-.1)}><Minus size={16}/></button><span>{Math.round(zoom*100)}%</span><button aria-label="放大" onClick={()=>scaleAt(zoom+.1)}><Plus size={16}/></button><button aria-label="适应画布" onClick={fit}><Maximize size={16}/></button></div></div></section>
+ {menu&&<div className={s.contextMenu} role="dialog" aria-label="画布操作" style={{left:Math.max(8,menu.x),top:Math.max(8,menu.y)}}><div className={s.menuTitle}>{active?active.title:'添加到画布'}<button aria-label="关闭画布操作" onClick={()=>setMenu(null)}>×</button></div>{active?<><button onClick={duplicate}>复制节点</button><button onClick={()=>{commit({...doc,cards:doc.cards.filter(c=>c.id!==selected),links:doc.links.filter(l=>!l.includes(selected))});select('');setMenu(null)}}>删除节点</button><label>连接到<select value={link} onChange={e=>setLink(e.target.value)}><option value="">选择目标节点</option>{doc.cards.filter(c=>c.id!==selected).map(c=><option key={c.id} value={c.id}>{c.title}</option>)}</select></label><button disabled={!link} onClick={()=>{if(!doc.links.some(l=>l[0]===selected&&l[1]===link))commit({...doc,links:[...doc.links,[selected,link]]});setLink('')}}>连接节点</button>{doc.links.filter(l=>l.includes(selected)).map(([a,b])=><button key={a+b} onClick={()=>commit({...doc,links:doc.links.filter(l=>l[0]!==a||l[1]!==b)})}>断开：{doc.cards.find(c=>c.id===(a===selected?b:a))?.title}</button>)}</>:<><button onClick={()=>{add('text');setMenu(null)}}>添加笔记</button><button onClick={()=>{add('image');setMenu(null)}}>添加图片</button><button onClick={()=>{add('prompt');setMenu(null)}}>添加提示词</button></>}</div>}</div>
+ <input hidden ref={file} type="file" accept="image/png,image/jpeg,image/webp" onChange={async e=>{const f=e.target.files?.[0];e.target.value='';if(!f)return;if(!['image/png','image/jpeg','image/webp'].includes(f.type)||f.size>2000000){setStatus('请选择 2MB 以内的 PNG、JPEG 或 WebP');return}const reader=new FileReader();reader.onload=()=>{const image=String(reader.result);if(active?.kind==='image')commit({...doc,cards:doc.cards.map(c=>c.id===selected?{...c,image}:c)});else add('image',image)};reader.readAsDataURL(f)}}/>
+ <input hidden ref={json} type="file" accept="application/json,.json" onChange={async e=>{const f=e.target.files?.[0];e.target.value='';if(!f)return;try{if(f.size>15000000)throw Error();const d=JSON.parse(await f.text());if(!valid(d))throw Error();commit(d);select(d.cards[0]?.id||'');setPan({x:0,y:0});setStatus('项目已导入')}catch{setStatus('无法导入：项目格式错误或文件过大')}}}/>
+ </main>;
+}
@@ -0,0 +1,8 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {parseGraphicDocument} from '../src/lib/graphic-document.ts';
+const item={id:'one',kind:'text',name:'标题',text:'<script>文本</script>',x:20,y:20,w:300,h:100,fill:'#123456',size:32,hidden:false,locked:false};
+const doc={name:'作品',background:'#ffffff',items:[item]};
+test('graphic backup restores editable text and ignores unrelated properties',()=>{assert.deepEqual(parseGraphicDocument(JSON.stringify({...doc,extra:'ignored'})),doc)});
+test('graphic backup rejects corrupted layers, duplicate IDs and unbounded geometry',()=>{for(const items of [[{...item,text:null}],[item,item],[{...item,x:Infinity}],[{...item,w:-1}],[{...item,fill:'url(https://example.com)'}]])assert.throws(()=>parseGraphicDocument(JSON.stringify({...doc,items})));});
+test('graphic backup disallows active SVG and remote image loads',()=>{for(const src of ['https://example.com/image.png','javascript:alert(1)','data:image/svg+xml;base64,PHN2Zz4='])assert.throws(()=>parseGraphicDocument(JSON.stringify({...doc,items:[{...item,kind:'image',src}]})));});
@@ -0,0 +1,27 @@
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {embedSvgMedia} from '../src/lib/layout-images.ts';
+const id='a05dc841-240a-5a3a-b01b-d589fc21cd36';
+test('SVG export fetches each internal media once with the caller authentication',async()=>{
+ const original=globalThis.fetch;let calls=0;
+ try{
+  globalThis.fetch=async(url,options)=>{calls++;assert.equal(url,'http://waterfall-wiki:3000/api/media/'+id);assert.equal(options.headers.cookie,'session=fixture');assert.equal(options.redirect,'error');return new Response(Buffer.from('fixture'),{headers:{'content-type':'image/png'}});};
+  const svg=await embedSvgMedia({headers:{cookie:'session=fixture'}},`<svg><image href="/api/media/${id}"/><image href="/api/media/${id}"/></svg>`);
+  assert.equal(calls,1);assert.equal((svg.match(/data:image\/png;base64,Zml4dHVyZQ==/g)||[]).length,2);assert.ok(!svg.includes('/api/media/'));
+ }finally{globalThis.fetch=original;}
+});
+test('SVG export rejects unavailable or non-image objects',async()=>{
+ const original=globalThis.fetch;
+ try{for(const response of [new Response('missing',{status:404}),new Response('<svg/>',{headers:{'content-type':'image/svg+xml'}})]){
+  globalThis.fetch=async()=>response;await assert.rejects(()=>embedSvgMedia({headers:{}},`<image href="/api/media/${id}"/>`),/模板图片不可访问/);
+ }}finally{globalThis.fetch=original;}
+});
+test('SVG exports without managed images do not access storage',async()=>{
+ assert.equal(await embedSvgMedia({headers:{}},'<svg><text>Title</text></svg>'),'<svg><text>Title</text></svg>');
+});
+
+test('SVG export uses the configured isolated Wiki origin',async()=>{
+ const original=globalThis.fetch,previous=process.env.STUDIO_WIKI_ORIGIN;
+ try{process.env.STUDIO_WIKI_ORIGIN='http://127.0.0.1:19000';globalThis.fetch=async url=>{assert.equal(url,'http://127.0.0.1:19000/api/media/'+id);return new Response('fixture',{headers:{'content-type':'image/png'}})};assert.ok((await embedSvgMedia({headers:{}},`<image href="/api/media/${id}"/>`)).includes('data:image/png;base64,'));}
+ finally{globalThis.fetch=original;if(previous===undefined)delete process.env.STUDIO_WIKI_ORIGIN;else process.env.STUDIO_WIKI_ORIGIN=previous;}
+});
@@ -1,7 +1,7 @@
 import {test} from 'node:test';import assert from 'node:assert/strict';import {readFileSync} from 'node:fs';
 import {parameters} from '../src/lib/layout-parameters.ts';
 const layouts=JSON.parse(readFileSync(new URL('../src/content/templates/layouts.json',import.meta.url)));
-test('27 layouts preserve unique typed source slots and complete shapes',()=>{assert.equal(layouts.length,27);for(const [i,l] of layouts.entries()){assert.equal(l.id,'ref-'+String(i+1).padStart(2,'0'));assert.equal(new Set(l.elements.map(s=>s.id)).size,l.elements.length);for(const s of l.elements){assert.match(s.id,/^[TID]\d{2}$/);assert.equal(s.kind,({T:'text',I:'image',D:'decoration'})[s.id[0]]);assert.ok(s.box[0]>=0&&s.box[1]>=0&&s.box[0]+s.box[2]<=l.width&&s.box[1]+s.box[3]<=l.height);assert.match(s.raster,/^data:image\/png;base64,/);if(s.kind==='image')assert.match(s.shape,/^data:image\/png;base64,/)}assert.deepEqual(parameters(l,{}),{texts:{},images:{},decorations:{}})}});
+test('27 layouts preserve unique typed source slots and complete shapes',()=>{assert.equal(layouts.length,27);for(const [i,l] of layouts.entries()){assert.equal(l.id,'ref-'+String(i+1).padStart(2,'0'));assert.equal(new Set(l.elements.map(s=>s.id)).size,l.elements.length);for(const s of l.elements){assert.match(s.id,/^[TID]\d{2}$/);assert.equal(s.kind,({T:'text',I:'image',D:'decoration'})[s.id[0]]);assert.ok(s.box[0]>=0&&s.box[1]>=0&&s.box[0]+s.box[2]<=l.width&&s.box[1]+s.box[3]<=l.height);assert.match(s.raster,/^\/api\/media\/[a-f0-9-]{36}$/);if(s.kind==='image')assert.match(s.shape,/^\/api\/media\/[a-f0-9-]{36}$/)}assert.deepEqual(parameters(l,{}),{texts:{},images:{},decorations:{}})}});
 test('parameters reject mismatched slots, unsafe URLs and excessive text',()=>{const l=layouts[0];for(const input of [{texts:{I01:{value:'bad'}}},{images:{I01:{url:'https://evil.test'}}},{texts:{T01:{value:'x',scale:3}}},{texts:{T01:{value:'x'.repeat(501)}}},{paper:'url(x)'},{decorations:{D01:{hidden:'true'}}},null,[]])assert.throws(()=>parameters(l,input));const p=parameters(l,{texts:{T01:{value:'<script>not markup</script>',scale:1.2,align:'middle'}},images:{I01:{color:'#abcdef',fit:'contain'}},decorations:{D01:{hidden:true}}});assert.equal(p.texts.T01.value,'<script>not markup</script>');assert.equal(p.decorations.D01.hidden,true)});
 test('workspace parameters round-trip identically through Studio and Wiki validation',async()=>{const {parameters:wiki}=await import('../../waterfall-wiki/src/lib/layout-parameters.ts');for(const l of layouts){const added={id:'user-example',kind:'text',role:'Added text',box:[3,4,20,12],direction:'horizontal',text:'Hello',reading:'custom'};const input={added:[added],layers:{T01:{x:2,y:4,width:15,height:10,rotation:25,opacity:.7,radius:2,z:10,hidden:false,locked:true},'user-example':{x:8,z:20}},texts:{T01:{value:'Updated',fontFamily:'serif',fontSize:4,fontWeight:700,lineHeight:1.6,letterSpacing:.2},'user-example':{value:'Hello'}},images:{I01:{fit:'cover',cropX:15,cropY:85,zoom:2}}};assert.deepEqual(parameters(l,input),wiki(l,input));assert.deepEqual(parameters(l,parameters(l,input)),parameters(l,input))}});
 test('workspace validation rejects unbounded, mismatched and executable properties',()=>{const l=layouts[0];for(const input of [{layers:{unknown:{x:2}}},{layers:{T01:{rotation:Infinity}}},{layers:{T01:{width:0}}},{layers:{T01:{opacity:2}}},{layers:{T01:{locked:'yes'}}},{texts:{T01:{value:'x',fontFamily:'url(evil)'}}},{images:{I01:{cropX:101}}},{images:{I01:{zoom:0}}},{added:[{id:'T01'}]},{added:Array(101).fill({})},{layers:{T01:{onClick:'evil'}}}])assert.throws(()=>parameters(l,input))});
@@ -32,6 +32,7 @@ COPY --from=build --chown=node:node /app/db/ ./db/
 COPY --chown=node:node apps/waterfall-wiki/scripts/container-health.mjs ./
 COPY --chown=node:node apps/waterfall-wiki/scripts/import-character-packs.mjs apps/waterfall-wiki/scripts/verify-character-pack.mjs ./scripts/
 COPY --chown=node:node apps/waterfall-wiki/seed/characters/ ./seed/characters/
+COPY --chown=node:node apps/waterfall-wiki/src/content/managed-media.json ./src/content/managed-media.json
 USER node
 EXPOSE 3000
 CMD ["node", "server.js"]
@@ -1,8 +1,17 @@
 import type { NextConfig } from "next";
+import managedMedia from "./src/content/managed-media.json";

 const nextConfig: NextConfig = {
  serverExternalPackages: ["playwright-core"],
+  async redirects(){return [
+    {source:'/studio/graphic',destination:'/graphic',permanent:true},
+    {source:'/studio/infinite_canvas',destination:'/infinite_canvas',permanent:true},
+    {source:'/studio',destination:'/workspace',permanent:false},
+  ]},
  async rewrites(){return [
+    ...Object.entries(managedMedia).filter(([path])=>path.startsWith("apps/waterfall-wiki/public/")).map(([path,asset])=>({source:"/"+path.slice("apps/waterfall-wiki/public/".length),destination:"/api/media/"+asset.id})),
+    {source:'/graphic',destination:'http://prompt-studio:3000/studio/graphic'},
+    {source:'/infinite_canvas',destination:'http://prompt-studio:3000/studio/infinite_canvas'},
    {source:"/studio/:path*",destination:"http://prompt-studio:3000/studio/:path*"},
    {source:"/index.md",destination:"/api/agent-index"},
    {source:"/skills/index.md",destination:"/api/guidance/skills"},
@@ -47,13 +47,15 @@ async function main() {
 if (command === 'verify' || command === 'exercise') {
  const request = (path:string,init:RequestInit={}) => fetch(base+path,{...init,redirect:'manual'});
  const buildId = readFileSync('.next/BUILD_ID','utf8').trim();
-  assert.equal((await request('/')).status,200,'Public knowledge homepage');
+  for(const path of ['/','/workspace','/documents','/account'])assert.equal((await request(path)).status,200,'Public shell '+path);
+  const studio=await request('/studio');assert.equal(studio.status,307);assert.equal(studio.headers.get('location'),'/workspace');
+  for(const [from,to] of [['/studio/graphic','/graphic'],['/studio/infinite_canvas','/infinite_canvas']]){const r=await request(from);assert.equal(r.status,308);assert.equal(r.headers.get('location'),to)}
  assert.equal((await request('/account')).status,200,'Public account page');
  const homeData = await request(`/_next/data/${buildId}/index.json`);
  assert.ok([200,404].includes(homeData.status),'Public homepage data is readable or absent for static pages');
  assert.ok(!isLoginRedirect(homeData.headers.get('location') || homeData.headers.get('x-nextjs-redirect'),base));
  assert.equal((await request('/api/posts',{method:'POST',headers:{Cookie:'wiki_account='+ 'a'.repeat(64)},body:'{}'})).status,401,'Account cookies never grant admin rights');
-  for (const path of ['/library/import','/skills/shadow-puppet/egret-example.png','/studio',`/_next/data/${buildId}/library/import.json`]) {
+  for (const path of ['/library/import','/skills/shadow-puppet/egret-example.png','/studio/layouts/ref-01',`/_next/data/${buildId}/library/import.json`]) {
   const response = await request(path); assert.equal(response.status,307,path); const destination = response.headers.get('location') || response.headers.get('x-nextjs-redirect'); assert.ok(isLoginRedirect(destination,base),path+' must redirect to login: '+destination);
  }
  for (const path of ['/api/feed','/api/upload','/studio/api/export/test','/api/media/missing']) assert.equal((await request(path)).status,401,path);
@@ -1,17 +1,19 @@
-import {readFile,readdir} from 'node:fs/promises';
+import {readFile} from 'node:fs/promises';
 import {fileURLToPath} from 'node:url';
 import {join,dirname} from 'node:path';
 import {createHash} from 'node:crypto';
 import {requiredPackImages} from './verify-character-pack.mjs';
 const root=join(dirname(fileURLToPath(import.meta.url)),'..','seed','characters');
 const base=process.env.PROMPT_IMPORT_BASE_URL||'http://127.0.0.1:3000';
+const media=JSON.parse(await readFile(join(root,'..','..','src','content','managed-media.json'),'utf8'));
+const packFiles=pack=>Object.entries(media).filter(([name])=>name.startsWith(`apps/waterfall-wiki/seed/characters/${pack.directory}/`)).sort(([a],[b])=>a.localeCompare(b));
 const packs=JSON.parse(await readFile(join(root,'packs.json'),'utf8'));
 async function verify(pack){
 let cursor='',post;const seen=new Set();
 do{const response=await fetch(base+'/api/feed?'+new URLSearchParams({section:'images',...(cursor?{cursor}:{})}));if(!response.ok)throw Error('Cannot verify character feed: '+response.status);const page=await response.json();post=page.posts.find(p=>p.slug===pack.slug);cursor=page.nextCursor||'';if(cursor&&seen.has(cursor))throw Error('Character feed cursor did not advance');seen.add(cursor);}while(!post&&cursor);
 if(!post)throw Error('Character pack missing: '+pack.slug);
- const files=(await readdir(join(root,pack.directory))).filter(n=>n.endsWith('.png')).sort();if(files.length!==pack.count)throw Error('Seed file count mismatch: '+pack.slug);
- const hashes=await Promise.all(files.map(async file=>createHash('sha256').update(await readFile(join(root,pack.directory,file))).digest('hex')));
+ const files=packFiles(pack);if(files.length!==pack.count)throw Error('Seed file count mismatch: '+pack.slug);
+ const hashes=files.map(([,asset])=>asset.sha256);
 const originals=requiredPackImages(hashes,post.assets.filter(a=>a.kind==='image'));
 for(const image of originals){const media=await fetch(`${base}/api/media/${image.id}`,{method:'HEAD'});if(!media.ok||media.headers.get('content-type')!=='image/png')throw Error('Original PNG unavailable');}
 console.log(`Verified: /p/${pack.slug} (${originals.length} original PNGs preserved; editorial covers allowed)`);
@@ -20,10 +22,14 @@ for(const pack of packs){
 const existing=await fetch(`${base}/p/${pack.slug}`);
 if(existing.ok){console.log(`Already imported: /p/${pack.slug}`);await verify(pack);continue;}
 if(existing.status!==404)throw new Error(`Cannot check pack ${pack.slug}: ${existing.status}`);
- const files=(await readdir(join(root,pack.directory))).filter(n=>n.endsWith('.png')).sort();
+ const files=packFiles(pack);
 if(files.length!==pack.count)throw new Error(`Expected ${pack.count} PNGs for ${pack.slug}, got ${files.length}`);
 const data=new FormData();data.set('title',pack.title);data.set('slug',pack.slug);data.set('description',pack.description);
- for(const file of files)data.append('files',new Blob([await readFile(join(root,pack.directory,file))],{type:'image/png'}),file);
+ for(const [name,asset] of files){
+  const response=await fetch(`${base}/api/media/${asset.id}`);if(!response.ok)throw Error('Cannot read migrated original: '+name);
+  const bytes=Buffer.from(await response.arrayBuffer());if(bytes.length!==asset.bytes||createHash('sha256').update(bytes).digest('hex')!==asset.sha256)throw Error('Original checksum mismatch: '+name);
+  data.append('files',new Blob([bytes],{type:'image/png'}),name.split('/').pop());
+ }
 const response=await fetch(`${base}/api/skills/street-people`,{method:'POST',body:data});
 if(response.status!==201&&response.status!==409)throw new Error(`Import ${pack.slug}: ${response.status} ${await response.text()}`);
 if(response.status===409&&!(await fetch(`${base}/p/${pack.slug}`)).ok)throw new Error(`Conflicting import ${pack.slug}`);
@@ -1,3 +1,5 @@
+import {writeFile,unlink} from 'node:fs/promises';
+import sharp from 'sharp';
 import { spawn } from "node:child_process";
 import assert from "node:assert/strict";
 import { setTimeout } from "node:timers/promises";
@@ -15,6 +17,8 @@ async function availablePort() {

 const port = process.env.SMOKE_PORT || await availablePort();
 const release = "smoke-test";
+const previewFixture='.next/standalone/public/__smoke-preview.png';
+await writeFile(previewFixture,await sharp({create:{width:48,height:48,channels:3,background:'#eee'}}).png().toBuffer());
 const child = spawn(process.execPath, [".next/standalone/server.js"], {
  // This loopback-only child checks retained resources without production credentials.
  // Production keeps failing closed; the bypass requires both explicit test settings.
@@ -42,10 +46,17 @@ try {
  const id=indexText.match(/\/explore\/([a-f0-9]{24})/)?.[1];assert.ok(id);
  const agent=await fetch(`http://127.0.0.1:${port}/explore/${id}?agent_mode=True`);
  assert.equal(agent.status,200);assert.match(agent.headers.get('content-type'),/text\/plain/);const agentText=await agent.text();assert.match(agentText,/^# /);assert.doesNotMatch(agentText,/^\s*(?:<!doctype html|<html)/i);
-  const preview=await fetch(`http://127.0.0.1:${port}/api/preview?source=${encodeURIComponent('/skills/shadow-puppet/egret-example.png')}&width=480`);
+  const preview=await fetch(`http://127.0.0.1:${port}/api/preview?source=${encodeURIComponent('/__smoke-preview.png')}&width=480`);
  assert.equal(preview.status,200);assert.match(preview.headers.get('content-type'),/image\/webp/);assert.ok((await preview.arrayBuffer()).byteLength<=100000);
-  console.log("Production smoke test passed");
+  const home=await fetch(`http://127.0.0.1:${port}/`).then(r=>r.text());
+  for(const href of ['/graphic','/infinite_canvas','/account?next=/workspace'])assert.ok(home.includes(`href="${href}"`),href);
+  for(const [legacy,canonical] of [['/studio/graphic','/graphic'],['/studio/infinite_canvas','/infinite_canvas']]){
+    const redirect=await fetch(`http://127.0.0.1:${port}${legacy}`,{redirect:'manual'});
+    assert.equal(redirect.status,308);assert.equal(redirect.headers.get('location'),canonical);
+  }
+  console.log("Production smoke test passed, including landing entry points and canonical redirects");
 } finally {
+  await unlink(previewFixture);
  if (child.exitCode === null && child.signalCode === null) {
    const exited = once(child, "exit");
    child.kill("SIGTERM");
@@ -1,4 +1,6 @@
 import sharp from 'sharp';
+import managedMedia from '../content/managed-media.json';
+import {getObject} from './storage';
 import {createHash} from 'node:crypto';
 import {mkdir,readFile,writeFile,rename,stat,readdir,unlink,realpath} from 'node:fs/promises';
 import {resolve,sep,join} from 'node:path';
@@ -11,4 +13,7 @@ async function limited<T>(work:()=>Promise<T>){if(active>=3){if(waiting.length>=
 const pending=new Map<string,Promise<Buffer>>();const cache=join(tmpdir(),'prompt-previews-v1');let writes=0;
 export async function compressPreview(input:Buffer,width:number){const max=width<=480?100_000:220_000;let size=width,quality=72;let output:Buffer;do{output=await sharp(input,{limitInputPixels:40_000_000,animated:false}).rotate().resize({width:size,withoutEnlargement:true}).webp({quality,effort:3}).toBuffer();if(output.length<=max)return output;size=Math.max(240,Math.floor(size*.8));quality=Math.max(30,quality-10);}while(size>240||quality>30);return sharp(input,{limitInputPixels:40_000_000}).rotate().resize({width:240,withoutEnlargement:true}).webp({quality:30}).toBuffer();}
 export async function cachedPreview(identity:string,width:number,load:()=>Promise<Buffer>,quality=false){const key=createHash('sha256').update(identity+':'+width+(quality?':export-v1':':webp-v1')).digest('hex');const file=join(cache,key+'.webp');try{return {bytes:await readFile(file),etag:'"'+key+'"'};}catch{/* cache miss */}let task=pending.get(key);if(!task){task=limited(async()=>{await mkdir(cache,{recursive:true});const input=await load();const bytes=quality?await sharp(input,{limitInputPixels:40_000_000,animated:false}).rotate().resize({width,withoutEnlargement:true}).webp({quality:95,effort:4}).toBuffer():await compressPreview(input,width);const temp=file+'.'+process.pid+'.tmp';await writeFile(temp,bytes);await rename(temp,file);if(++writes%32===0){const files=await readdir(cache);if(files.length>1024){const dates=await Promise.all(files.map(async name=>({name,time:(await stat(join(cache,name)).catch(()=>({mtimeMs:0}))).mtimeMs})));await Promise.all(dates.sort((a,b)=>a.time-b.time).slice(0,files.length-1024).map(f=>unlink(join(cache,f.name)).catch(()=>{})));}}return bytes;});pending.set(key,task);}try{return {bytes:await task,etag:'"'+key+'"'};}finally{pending.delete(key);}}
-export async function loadStaticPreview(source:string){const root=await realpath(join(process.cwd(),'public'));const file=await realpath(staticPreviewPath(source,root));if(!file.startsWith(root+sep))throw Error('Invalid source');const info=await stat(file);if(info.size>64*1024*1024)throw Error('Image too large');return {identity:file+':'+info.mtimeMs,load:()=>readFile(file)};}
+export async function loadStaticPreview(source:string){
+ const asset=(managedMedia as Record<string,{key:string;sha256:string;bytes:number}>)["apps/waterfall-wiki/public"+source];
+ if(asset){return {identity:asset.key,load:async()=>{const object=await getObject(asset.key);if(asset.bytes>64*1024*1024)throw Error("Image too large");const bytes=Buffer.from(await object.Body!.transformToByteArray());if(bytes.length!==asset.bytes||createHash("sha256").update(bytes).digest("hex")!==asset.sha256)throw Error("Stored image checksum mismatch");return bytes;}};}
+const root=await realpath(join(process.cwd(),'public'));const file=await realpath(staticPreviewPath(source,root));if(!file.startsWith(root+sep))throw Error('Invalid source');const info=await stat(file);if(info.size>64*1024*1024)throw Error('Image too large');return {identity:file+':'+info.mtimeMs,load:()=>readFile(file)};}
@@ -1,10 +1,10 @@
 import { createHash } from "node:crypto";
-import { readFile } from "node:fs/promises";
+import managedMedia from "../content/managed-media.json";
 import {guidanceDocuments} from "../content/skills/guidance";
 import {wikiPages} from "../content/wiki";
 import { chapters } from "../content/learning-skills/data";
 import { transaction } from "./db";
-import { putFile } from "./storage";
+import { getObject } from "./storage";

 function stableId(name: string) {
  const bytes=createHash("sha256").update(`prompt:learning-series:${name}`).digest().subarray(0,16);
@@ -13,12 +13,13 @@ function stableId(name: string) {
 }
 // Explicit editorial publication, never part of the generic storage bootstrap.
 // Re-running updates these three authored posts without duplicating posts or media.
-export async function publishLearningSeries() {
-  const path="public/learning-skills/cover.png";
-  const cover=await readFile(path);const digest=createHash("sha256").update(cover).digest("hex");
-  const storageKey=`editorial/learning-skills/${digest}.png`;
-  const coverId=stableId("cover");
-  await putFile(storageKey,path,"image/png");
+export async function publishLearningSeries(asset=managedMedia["apps/waterfall-wiki/public/learning-skills/cover.png"]) {
+  const object=await getObject(asset.key);
+  const cover=Buffer.from(await object.Body!.transformToByteArray());
+  const digest=createHash("sha256").update(cover).digest("hex");
+  if(digest!==asset.sha256||cover.length!==asset.bytes)throw Error("Learning cover checksum mismatch");
+  const storageKey=asset.key;
+  const coverId=asset.id;
  return transaction(async client=>{
    await client.query("SELECT pg_advisory_xact_lock(18131002)");
    await client.query(`INSERT INTO assets(id,kind,filename,storage_key,mime_type,byte_size,sha256,width,height)
@@ -24,14 +24,14 @@ function localNext(value: string | string[] | undefined) {
    value.startsWith("//") ||
    /[\\\u0000-\u001f]/.test(value)
  )
-    return "/write";
+    return "/workspace";
  try {
    const url = new URL(value, "https://local.invalid");
    return url.origin === "https://local.invalid"
      ? url.pathname + url.search + url.hash
-      : "/write";
+      : "/workspace";
  } catch {
-    return "/write";
+    return "/workspace";
  }
 }
 export default function AccountPage() {
@@ -93,6 +93,7 @@ function AccountContent() {
            "如果信息符合条件，验证邮件已发送。请检查收件箱和垃圾邮件。",
        });
      await account.refresh();
+      if (name === "login") await router.push(localNext(router.query.next));
    } catch (e) {
      setFeedback({
        tone: "error",
@@ -1,4 +1,10 @@
-import DocumentDirectory from "@/components/DocumentDirectory";
-export default function Home() {
-  return <DocumentDirectory />;
-}
+import Head from 'next/head';
+import {ArrowUpRight, MousePointer2, Plus, Type, Image, Sparkles, Workflow, Layers, ArrowRight} from 'lucide-react';
+import s from '@/styles/landing.module.css';
+export default function Home(){return <main className={s.page}>
+<Head><title>织页 Studio · 让灵感，有形。</title><meta name="description" content="连接你的 coding agent，在图形编辑器与无限画布中，把想法组织成作品。"/></Head>
+<nav className={s.nav}><a className={s.logo} href="/">✳ <b>织页</b><span>STUDIO</span></a><div><a href="#tools">创作工具</a><a href="/documents">知识与教程</a><a href="#workflow">工作方式</a></div><a href="/account?next=/workspace">登录</a><a className={s.dark} href="/account?next=/workspace">进入工作台 <ArrowUpRight size={15}/></a></nav>
+<section className={s.hero}><p className={s.eyebrow}>A SPACE FOR HUMAN IDEAS & AGENTS</p><h1>想法不该停在对话里。<br/><span>让灵感，有形。</span></h1><p className={s.intro}>从一闪而过的念头，到值得分享的作品。<br/>连接你的 coding agent，在一张画布上，把创作继续下去。</p><div className={s.actions}><a className={s.dark} href="/account?next=/workspace">开始创作 <ArrowRight size={17}/></a><a href="#tools">探索你的创作空间 ↓</a></div><div className={s.product}><div className={s.productBar}><b>✳ STUDIO</b><span>日常的另一种可能 / 创意探索</span><span>本机草稿</span></div><div className={s.demo}><aside>工作空间<hr/>图层与素材<p>◈ 创意简报</p><p>▧ 视觉探索</p><p>✳ 镜头构思</p><small>把线索连接起来</small></aside><div className={s.demoWorld}><svg viewBox="0 0 800 330" preserveAspectRatio="none"><path d="M190 170 C300 170 260 120 360 120 S520 240 620 240"/></svg><article className={s.note}><small>01 / THE IDEA</small><h3>把日常，<br/>拍成一场电影。</h3><p>自然光、细腻颗粒，<br/>让每一帧都有呼吸感。</p></article><article className={s.art}><small>02 / VISUAL STUDY</small><div className={s.orbit}/><h3>光的形状</h3><span>LIGHT / SPACE / EMOTION</span></article><article className={s.prompt}><Sparkles size={17}/><small>03 / PROMPT</small><h3>留住清晨的光。</h3><p>窗边的植物，安静的房间。<br/>35mm 胶片，缓慢推进。</p></article><div className={s.dock}><MousePointer2/><Plus/><Type/><Image/><Sparkles/></div></div></div></div><p className={s.caption}>一个创作场景示意。你的想法、素材与工具，在这里相遇。</p></section>
+<section className={s.tools} id="tools"><p className={s.eyebrow}>TWO TOOLS. ONE CREATIVE FLOW.</p><h2>给不同的想法，<br/>恰好的空间。</h2><div className={s.toolGrid}><a href="/graphic"><Layers/><span>01 / GRAPHIC</span><h3>把灵感排成作品。</h3><p>文字、图形与图片自由编排。精确调整图层和位置，把设计导出为 SVG。</p><div className={s.poster}><span>MAKE<br/>ROOM<br/><i>for ideas.</i></span><b>✳</b></div><strong>打开图形编辑器 <ArrowUpRight size={17}/></strong></a><a href="/infinite_canvas"><Workflow/><span>02 / INFINITE CANVAS</span><h3>让思路，自由生长。</h3><p>把笔记、参考图与提示词连成线索。在无限画布上平移、缩放，整理下一次创作。</p><div className={s.miniCanvas}><b>一个念头</b><i>⟶</i><b>一张参考</b><i>⟶</i><b>新的可能</b></div><strong>打开无限画布 <ArrowUpRight size={17}/></strong></a></div></section>
+<section className={s.workflow} id="workflow"><div><p className={s.eyebrow}>YOUR AGENT. YOUR WORKFLOW.</p><h2>用熟悉的 Agent，<br/>继续你的创作。</h2><p>通过项目已有的 API 与文档，让 coding agent 理解模板和创作内容。画布负责呈现，你来决定下一步。</p><a href="/studio/api">查看 Agent 接入文档 <ArrowUpRight size={16}/></a></div><ol><li><b>01</b><div><h3>找到起点</h3><p>从空白设计、素材或一段灵感出发。</p></div></li><li><b>02</b><div><h3>连接工作方式</h3><p>将接入文档交给你的 coding agent。</p></div></li><li><b>03</b><div><h3>亲手打磨，保存作品</h3><p>在编辑器中调整细节，导出并保留备份。</p></div></li></ol></section>
+<section className={s.end}><span>✳</span><h2>下一件作品，<br/>从这里开始。</h2><a className={s.dark} href="/account?next=/workspace">进入你的工作台 <ArrowRight size={17}/></a></section><footer className={s.footer}><a className={s.logo} href="/">✳ 织页 STUDIO</a><span>给想法留白，给创作空间。</span><a href="/documents">知识与教程 ↗</a></footer></main>}
@@ -0,0 +1,5 @@
+import Head from 'next/head';
+import {useEffect,useState} from 'react';
+import {ArrowUpRight, Layers, Workflow, BookOpen, Link2} from 'lucide-react';
+import s from '@/styles/workspace.module.css';
+export default function Workspace(){const [email,setEmail]=useState(''),[state,setState]=useState('loading');useEffect(()=>{fetch('/api/account/session').then(async r=>{if(!r.ok)throw Error();const d=await r.json();if(!d.user){window.location.replace('/account?next=/workspace');return}setEmail(d.user.email);setState('ready')}).catch(()=>setState('error'))},[]);return <main className={s.app}><Head><title>工作台 · 织页 Studio</title></Head><aside><a className={s.brand} href="/">✳ 织页 <small>STUDIO</small></a><span>你的工作空间</span><a aria-current="page" href="/workspace">◈ 创作概览</a><a href="/graphic"><Layers size={16}/>图形设计</a><a href="/infinite_canvas"><Workflow size={16}/>无限画布</a><a href="/documents"><BookOpen size={16}/>知识与教程</a><a href="/studio/api"><Link2 size={16}/>Agent 接入文档</a><a className={s.account} href="/account">{email||'账户设置'} ↗</a></aside><section>{state==='loading'?<p role="status">正在打开你的工作台…</p>:state==='error'?<p role="alert">暂时无法读取账户。<a href="/account?next=/workspace">重新登录</a></p>:<><header><span>WORKSPACE / OVERVIEW</span><a href="/account">账户设置 ↗</a></header><p className={s.kicker}>MAKE SOMETHING THAT MATTERS.</p><h1>今天，让哪个想法成形？</h1><p className={s.sub}>选一个空间，开始你的下一次创作。</p><div className={s.grid}><a href="/graphic"><Layers/><small>GRAPHIC</small><h2>图形设计</h2><p>在文字、图形与图像之间，找到你的表达。</p><div className={s.poster}>Ideas,<br/><i>in shape.</i><b>✳</b></div><strong>打开编辑器 <ArrowUpRight size={18}/></strong></a><a href="/infinite_canvas"><Workflow/><small>INFINITE CANVAS</small><h2>无限画布</h2><p>收集灵感、连接参考，让思路自由生长。</p><div className={s.canvas}><span>灵感</span>⟶<span>参考</span>⟶<span>作品</span></div><strong>打开画布 <ArrowUpRight size={18}/></strong></a></div><div className={s.agent}><Link2/><div><h3>带上你的 coding agent</h3><p>从接入文档开始，使用已有的创作 API。连接由你的 Agent 发起。</p></div><a href="/studio/api">查看文档 ↗</a></div><p className={s.hint}>编辑器草稿保存在当前浏览器。更换设备前，请先导出项目备份。</p></>}</section></main>}
@@ -4,7 +4,7 @@ export function proxy(request: NextRequest) {
 const path = request.nextUrl.pathname;
 const responseHeaders = {'Cache-Control':'private, no-store', 'Referrer-Policy':'same-origin'};
 // Public knowledge pages are read-only. Account handlers enforce their own origin and session checks.
- const publicRead = ['GET','HEAD'].includes(request.method) && (path === '/' || path === '/protocol' || ['/llms.txt','/index.md','/agent','/agent/index.md','/api/agent-index','/api/guides'].includes(path) || path.startsWith('/guide/') || path.startsWith('/api/guides/'));
+ const publicRead = ['GET','HEAD'].includes(request.method) && (path === '/' || ['/workspace','/graphic','/infinite_canvas','/studio','/studio/graphic','/studio/infinite_canvas','/studio/api'].includes(path) || path.startsWith('/studio/_next/') || path === '/protocol' || ['/llms.txt','/index.md','/agent','/agent/index.md','/api/agent-index','/api/guides'].includes(path) || path.startsWith('/guide/') || path.startsWith('/api/guides/'));
 if (path === '/write' || path === '/documents' || path.startsWith('/documents/') || path === '/api/documents' || path.startsWith('/api/documents/') || publicRead || path === '/account' || path.startsWith('/api/account/')) return NextResponse.next({headers:{...responseHeaders,'Referrer-Policy':'no-referrer'}});
 if (path === '/brand-mark.svg' || path === '/login' || path === '/api/auth/login' || path === '/api/auth/logout' || path === '/api/health' || path === '/api/ready' || path.startsWith('/_next/static/')) return NextResponse.next({headers:responseHeaders});
 let config;
@@ -0,0 +1 @@
+.app{display:flex;min-height:100dvh;background:#fafaf8;color:#30352c;font-family:Arial,'PingFang SC',sans-serif}.app *{box-sizing:border-box}.app a{color:inherit;text-decoration:none}.app>aside{width:230px;flex-shrink:0;border-right:1px solid #e0e3da;background:#f3f4ef;padding:30px 20px;display:flex;flex-direction:column;gap:9px}.brand{font-size:22px;font-weight:600;margin-bottom:45px}.brand small{font-size:9px;letter-spacing:1px;color:#87917c}.app aside>span{font-size:10px;color:#99a08f;margin-bottom:10px;padding-left:10px}.app aside>a:not(.brand){display:flex;align-items:center;gap:12px;font-size:12px;padding:12px;border-radius:7px}.app aside>a[aria-current]{background:#e5eadb}.app aside>.account{margin-top:auto;overflow-wrap:anywhere}.app>section{padding:35px 55px;max-width:1250px;width:100%;margin:auto;min-height:100dvh}.app header{display:flex;justify-content:space-between;color:#8d9582;font-size:10px;letter-spacing:1px}.kicker{font-size:10px;letter-spacing:2px;color:#8a9876;margin-top:65px}.app h1{font-size:34px;font-weight:500;letter-spacing:-1px;margin:18px 0}.sub{font-size:13px;color:#929887}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}.grid>a{background:white;border:1px solid #dfe3d6;border-radius:12px;padding:26px;transition:transform .2s}.grid>a:hover{transform:translateY(-3px)}.grid small{font-size:9px;letter-spacing:1.5px;margin-left:12px;color:#909b82}.grid>a>svg{vertical-align:middle;width:20px;color:#7b8c65}.grid h2{font-size:23px;font-weight:500;margin:24px 0 12px}.grid p{font-size:12px;color:#929a87;line-height:1.8}.poster,.canvas{height:190px;margin:25px 0;background:#ecf0e3;position:relative;overflow:hidden;border-radius:5px}.poster{padding:25px;font-size:40px;line-height:1;font-weight:600;letter-spacing:-2px}.poster i{font-family:Georgia,serif;font-weight:400}.poster b{position:absolute;right:0;top:12px;font-size:155px;color:#a7b88b}.canvas{display:flex;align-items:center;justify-content:center;gap:12px;background:radial-gradient(#c5cfb8 1px,transparent 1px) 0 0/18px 18px,#f3f5ef;color:#91a276}.canvas span{background:white;border:1px solid #d5ddc9;padding:20px 13px;font-size:12px;border-radius:6px;color:#59684a}.grid strong{display:flex;justify-content:space-between;font-size:12px;font-weight:400}.agent{display:flex;align-items:center;gap:18px;border:1px solid #dde3d1;border-radius:10px;padding:23px;margin-top:28px}.agent>svg{color:#83956c}.agent h3{font-size:14px;margin:0 0 8px}.agent p{font-size:11px;color:#8a947d;margin:0;line-height:1.8}.agent a{margin-left:auto;font-size:12px;white-space:nowrap}.hint{font-size:10px;color:#a1a793;margin-top:25px}.app a:focus-visible{outline:2px solid #718358;outline-offset:4px}@media(max-width:850px){.app>aside{width:180px}.app>section{padding:30px 25px}.grid{gap:15px}.grid>a{padding:20px}.app h1{font-size:28px}.canvas{gap:5px}.canvas span{padding:15px 8px}}@media(max-width:600px){.app{display:block}.app>aside{width:100%;flex-direction:row;flex-wrap:wrap;padding:18px;gap:5px;border-right:0;border-bottom:1px solid #ddd}.brand{margin:0;width:100%}.app aside>span,.app aside>.account{display:none}.app aside>a:not(.brand){padding:8px;font-size:10px}.grid{grid-template-columns:1fr}.kicker{margin-top:35px}.agent{flex-wrap:wrap}.agent a{margin-left:0}}
@@ -30,13 +30,18 @@ test('cookies are HTTP-only and secure by default; redirects stay local',()=>{
 for(const path of ['https://evil.test','//evil.test','/\\evil.test','/login?next=/','/\nLocation: bad']) assert.equal(safeReturn(path),'/');
 assert.equal(safeReturn('/explore/123?q=test'),'/explore/123?q=test');
 });
-test('proxy protects APIs, data routes, static content and Studio; fails closed',()=>{
+test('proxy exposes creative entry pages while protecting APIs, data and Studio documents; fails closed',()=>{
 const temp=mkdtempSync(join(tmpdir(),'prompt-auth-')); const old=process.env.AUTH_CONFIG_FILE;
 try{
  const config=newAuthConfig(); process.env.AUTH_CONFIG_FILE=join(temp,'config.json'); writeFileSync(process.env.AUTH_CONFIG_FILE,JSON.stringify(config));
-  for(const path of ['/library/import','/skills/example.png','/_next/data/build/library/import.json','/studio']) assert.equal(proxy(new NextRequest('http://wiki.test'+path)).status,307,path);
-  for(const path of ['/api/upload','/studio/api/export','/api/feed']) assert.equal(proxy(new NextRequest('http://wiki.test'+path)).status,401,path);
+  for(const path of ['/library/import','/skills/example.png','/_next/data/build/library/import.json','/studio/layouts/ref-01']) assert.equal(proxy(new NextRequest('http://wiki.test'+path)).status,307,path);
+  for(const path of ['/api/upload','/studio/api/export','/studio/api/layouts','/api/feed']) assert.equal(proxy(new NextRequest('http://wiki.test'+path)).status,401,path);
  for(const path of ['/','/_next/data/build/index.json','/llms.txt','/index.md','/agent','/agent/index.md','/api/agent-index','/api/guides','/write','/documents','/api/documents','/api/documents/preview','/guide/welcome','/protocol','/api/guides/welcome','/account','/api/account/session','/login','/brand-mark.svg','/_next/static/chunk.js','/api/health','/api/ready']) assert.equal(proxy(new NextRequest('http://wiki.test'+path)).status,200,path);
+  const creativeEntries=['/workspace','/graphic','/infinite_canvas','/studio','/studio/graphic','/studio/infinite_canvas','/studio/api','/studio/_next/static/chunk.js'];
+  for(const path of creativeEntries){
+   for(const method of ['GET','HEAD'])assert.equal(proxy(new NextRequest('http://wiki.test'+path,{method})).status,200,`${method} ${path}`);
+   assert.equal(proxy(new NextRequest('http://wiki.test'+path,{method:'POST'})).status,401,`POST ${path} must not bypass authentication`);
+  }
  const headers={cookie:'prompt_session='+signSession(config),host:'wiki.test'};
  assert.equal(proxy(new NextRequest('http://wiki.test/api/feed',{headers})).status,200);
  assert.equal(proxy(new NextRequest('http://wiki.test/api/posts',{method:'POST',headers:{...headers,origin:'http://evil.test'}})).status,403);
@@ -1,4 +1,5 @@
 import assert from 'node:assert/strict';
+import {verifyGuidanceWorkspaceUI} from './guidance-workspace-ui';
 import {chromium} from 'playwright-core';
 import {randomUUID} from 'node:crypto';
 import {newToken,tokenDigest,ACCOUNT_COOKIE} from '../src/lib/account-crypto';
@@ -30,12 +31,22 @@ export async function verifyGuidancePublishing(base:string){
 const own=await fetch(base+'/api/documents?author='+owner).then(r=>r.json());assert.ok(own.documents.some((d:{id:string})=>d.id===httpDoc.id));assert.ok(own.documents.every((d:{author:string})=>d.author===owner));assert.equal((await fetch(base+'/api/documents?author=invalid')).status,400);
 const xml=await fetch(base+'/api/documents/'+httpDoc.id+'?revision=1&format=xml');assert.equal(xml.status,200);assert.match(await xml.text(),/<tag>往返标签<\/tag>/);
 const page=await fetch(base+'/documents/'+httpDoc.id+'?revision=1');assert.equal(page.status,200);assert.ok((await page.text()).includes('实际数据库文档'));
- // The homepage and discovery list hydrate from the real API, so verify them in Chromium on the CI runner.
+ const directory=await fetch(base+'/api/documents');assert.equal(directory.status,200);assert.ok((await directory.json()).documents.some((d:{id:string})=>d.id===httpDoc.id),'Published document must appear in the public API');
+ // The document discovery list hydrates from the real API; the homepage is the product landing page.
 const browser=await chromium.launch({executablePath:process.env.CHROMIUM_PATH||'/usr/bin/chromium',headless:true,args:['--no-sandbox','--disable-dev-shm-usage']});
 try{
  const page=await browser.newPage();
+  const navigationDiagnostics:string[]=[],inflight=new Set<string>();
+  const record=(value:string)=>{navigationDiagnostics.push(value.slice(0,1800));if(navigationDiagnostics.length>24)navigationDiagnostics.shift();};
+  page.on('pageerror',error=>record('pageerror: '+error.message));
+  page.on('console',message=>{if(message.type()==='error')record('console: '+message.text());});
+  page.on('request',request=>inflight.add(request.url()));
+  page.on('requestfinished',request=>inflight.delete(request.url()));
+  page.on('requestfailed',request=>{inflight.delete(request.url());record('requestfailed: '+new URL(request.url()).pathname+' '+request.failure()?.errorText)});
+  page.on('response',response=>{const path=new URL(response.url()).pathname;if(path.startsWith('/api/')||path.includes('/_next/data/'))void response.text().then(body=>record(`data ${response.status()} ${path}: ${body.slice(0,1400)}`)).catch(()=>{});else if(response.status()>=400||response.request().resourceType()==='script')record(`resource ${response.status()} ${path}`);});
+  try{
  const link=`a[href="/documents/${httpDoc.id}?revision=1"]`;
-  await page.goto(base+'/',{waitUntil:'domcontentloaded'});
+  const navigation=await page.goto(base+'/documents',{waitUntil:'domcontentloaded'});record('directory HTTP '+navigation?.status());
  await page.locator(link).waitFor({state:'visible'});assert.equal(await page.locator(link).getByRole('heading').textContent(),httpDoc.title);
  // Published matches must not inherit the examples' empty state; submitted filters survive reload.
  const search=page.getByRole('textbox',{name:'搜索文档'});
@@ -54,8 +65,15 @@ export async function verifyGuidancePublishing(base:string){
  await page.locator(link).waitFor({state:'visible'});
  assert.equal(await search.inputValue(),'');
  await page.getByRole('navigation',{name:'主导航',exact:true}).getByRole('link',{name:'社区文档',exact:true}).click();await page.locator(link).waitFor({state:'visible'});
-  await page.locator(link).click();await page.locator('h1').waitFor();assert.equal(await page.locator('h1').textContent(),httpDoc.title);
+  await page.locator(link).click();
+  await page.waitForURL(url=>url.pathname==='/documents/'+httpDoc.id&&url.searchParams.get('revision')==='1');
+  await page.getByRole('heading',{name:httpDoc.title,exact:true,level:1}).waitFor();
+  assert.equal(await page.locator('h1').textContent(),httpDoc.title);
  await page.goto(base+'/write',{waitUntil:'domcontentloaded'});assert.equal(await page.locator('h1').textContent(),'发布独立文档');
+  }catch(error){console.error('Document navigation diagnostics',JSON.stringify({url:page.url(),headings:await page.locator('h1').allTextContents(),body:(await page.locator('body').innerText()).slice(0,2200),inflight:[...inflight].map(url=>new URL(url).pathname),events:navigationDiagnostics}));throw error;}
+  await page.close();
+  await verifyGuidanceWorkspaceUI(base,browser);
+  console.log('Workspace desktop/mobile, filters, reading, account and publishing assertions passed in a fresh browser context');
 }finally{await browser.close();}
 assert.equal((await request('/'+httpDoc.id,'DELETE',undefined,{cookie:''})).status,401);
 assert.equal((await request('/'+httpDoc.id,'DELETE')).status,200);
@@ -0,0 +1,325 @@
+/** UI fixtures run in a fresh context; real storage and authentication have separate coverage. */
+import assert from "node:assert/strict";
+import { mkdir } from "node:fs/promises";
+import type { Browser } from "playwright-core";
+import { documentInput, parseDocumentXml } from "../src/lib/guidance-input";
+import { guidanceXml, type Guidance } from "../src/content/guides/catalog";
+const owner = "11111111-1111-4111-8111-111111111111";
+const authored: Guidance = {
+  id: "user-" + owner + "-review",
+  revision: 1,
+  kind: "guide",
+  title: "准备一次清晰的代码审查",
+  summary: "用明确的问题和证据，完成一次有用的代码审查。",
+  applies: "提交合并请求前",
+  body: "先理解改动目标，再核对实现与验证。",
+  steps: [],
+  checks: [],
+  links: [],
+  tags: [],
+};
+export async function verifyGuidanceWorkspaceUI(base: string, browser: Browser) {
+  const context = await browser.newContext({
+    viewport: { width: 1440, height: 1000 },
+  });
+  let signedIn = false,
+    previewError = false,
+    requestedAuthor: string | null = null,
+    published: Guidance | null = null;
+  const errors: string[] = [];
+  try {
+    await context.route("**/api/account/session", (route) =>
+      route.fulfill({
+        json: {
+          user: signedIn
+            ? {
+                id: owner,
+                email: "editor@example.com",
+                verified_at: "2026-10-29T00:00:00Z",
+              }
+            : null,
+        },
+      }),
+    );
+    await context.route(
+      (url) => url.pathname === "/api/documents",
+      async (route) => {
+        if (route.request().method() === "GET") {
+          requestedAuthor = new URL(route.request().url()).searchParams.get(
+            "author",
+          );
+          return route.fulfill({
+            json: { documents: [{ ...authored, author: owner }] },
+          });
+        }
+        published = documentInput.parse(route.request().postDataJSON());
+        return route.fulfill({ status: 201, json: { document: published } });
+      },
+    );
+    await context.route("**/api/documents/preview", (route) => {
+      if (previewError)
+        return route.fulfill({
+          status: 400,
+          json: { error: "输入不符合协议", fields: ["applies"] },
+        });
+      let document: Guidance;
+      try {
+        document =
+          route.request().headers()["content-type"] === "application/xml"
+            ? parseDocumentXml(route.request().postData() || "")
+            : documentInput.parse(route.request().postDataJSON());
+      } catch {
+        return route.fulfill({
+          status: 400,
+          json: { error: "输入不符合协议" },
+        });
+      }
+      return route.fulfill({
+        json: {
+          document,
+          xml: guidanceXml(document),
+          links: document.links.map((link) => ({ ...link, resolved: true })),
+        },
+      });
+    });
+    await context.route("**/api/documents/" + authored.id, (route) =>
+      route.fulfill({ json: { document: authored } }),
+    );
+    const page = await context.newPage();
+    page.setDefaultTimeout(10000);
+    page.on("pageerror", (error) => errors.push(error.message));
+    page.on("crash", () => errors.push("Browser renderer crashed"));
+    const pending = new Set<string>(), network: string[] = [];
+    page.on("request", request => pending.add(request.url()));
+    page.on("requestfinished", request => pending.delete(request.url()));
+    page.on("requestfailed", request => {pending.delete(request.url());network.push(new URL(request.url()).pathname+": "+request.failure()?.errorText);});
+    async function navigate(url: string, reload = false) {
+      const session = page.waitForResponse(response => new URL(response.url()).pathname === "/api/account/session" && response.status() === 200);
+      try {
+        const [navigation] = await Promise.all([reload ? page.reload({waitUntil:"domcontentloaded"}) : page.goto(url,{waitUntil:"domcontentloaded"}),session]);
+        assert.ok(navigation?.ok(), "Navigation returns a successful document");
+        await page.getByText(signedIn ? "editor@example.com" : "登录你的账户",{exact:true}).first().waitFor({state:"attached"});
+      } catch (error) {
+        const probeStarted=Date.now();
+        const server=await fetch(url,{signal:AbortSignal.timeout(3000)}).then(async response=>{await response.body?.cancel();return {status:response.status,elapsedMs:Date.now()-probeStarted}}).catch(error=>({error:error instanceof Error?error.name:"unknown",elapsedMs:Date.now()-probeStarted}));
+        console.error("Workspace UI navigation diagnostics",JSON.stringify({url:page.url(),browserConnected:browser.isConnected(),server,pending:[...pending].map(value=>new URL(value).pathname),network:network.slice(-20),errors,body:(await page.locator("body").innerText().catch(()=>"unavailable")).slice(0,1600)}));
+        throw error;
+      }
+    }
+
+    await navigate(base + "/documents");
+    await page
+      .getByRole("heading", { name: authored.title, exact: true })
+      .waitFor();
+    assert.equal(await page.title(), "社区文档 · 织页");
+    const search = page.getByRole("textbox", { name: "搜索文档" });
+    await search.fill("不存在的文档");
+    await search.press("Enter");
+    await page
+      .getByRole("heading", { name: "没有匹配文档", exact: true })
+      .waitFor();
+    await navigate(page.url(), true);
+    await page.getByRole("heading",{name:"没有匹配文档",exact:true}).waitFor();
+    assert.equal(await search.inputValue(), "不存在的文档");
+    await page
+      .getByRole("button", { name: "清除所有筛选", exact: true })
+      .click();
+    await page
+      .getByRole("heading", { name: authored.title, exact: true })
+      .waitFor();
+    await page.getByRole("tab", { name: /事实依据/ }).focus();
+    await page.keyboard.press("Home");
+    await page.getByRole("tab", { name: /全部文档/ }).waitFor();
+    if (process.env.WORKSPACE_SCREENSHOT_DIR) {
+      await mkdir(process.env.WORKSPACE_SCREENSHOT_DIR, { recursive: true });
+      await page.screenshot({
+        path: process.env.WORKSPACE_SCREENSHOT_DIR + "/directory.png",
+        fullPage: true,
+      });
+    }
+    await navigate(base + "/guide/review-changes?revision=1");
+    await page.getByRole("tab", { name: "XML 源文档" }).click();
+    assert.match(await page.locator("pre").innerText(), /linked-guidance/);
+    await page.getByRole("tab", { name: /版本记录/ }).click();
+    await page.getByText("当前阅读", { exact: true }).waitFor();
+    await page.getByRole("tab", { name: "文档概览" }).click();
+    if (process.env.WORKSPACE_SCREENSHOT_DIR)
+      await page.screenshot({
+        path: process.env.WORKSPACE_SCREENSHOT_DIR + "/reader.png",
+        fullPage: true,
+      });
+    await navigate(base + "/account");
+    await page.getByRole("button", { name: "创建账户", exact: true }).click();
+    await page.getByRole("heading", { name: "创建你的账户" }).waitFor();
+    await page
+      .getByLabel("密码", { exact: true })
+      .fill("a-long-example-password");
+    await page.getByRole("button", { name: "显示密码" }).click();
+    assert.equal(
+      await page.getByLabel("密码", { exact: true }).getAttribute("type"),
+      "text",
+    );
+    await page.getByRole("button", { name: "隐藏密码" }).click();
+    await page.getByLabel("密码", { exact: true }).fill("");
+    if (process.env.WORKSPACE_SCREENSHOT_DIR)
+      await page.screenshot({
+        path: process.env.WORKSPACE_SCREENSHOT_DIR + "/account.png",
+        fullPage: true,
+      });
+    await navigate(base + "/write");
+    await page.getByRole("heading", { name: "登录后开始编写" }).waitFor();
+    signedIn = true;
+    await navigate(page.url(), true);
+    await page.getByLabel("文档短名", { exact: true }).fill("workspace-test");
+    await page.getByLabel("标题", { exact: false }).fill("界面回归验证文档");
+    await page
+      .getByLabel("一句话摘要", { exact: false })
+      .fill("可独立使用的指导");
+    await page
+      .getByLabel("适用条件", { exact: false })
+      .fill("检查界面流程时");
+    await page
+      .getByLabel("正文", { exact: false })
+      .fill("先判断适用条件，再阅读正文。");
+    await page
+      .getByLabel("建议步骤", { exact: true })
+      .fill("第一步\n\n第二步");
+    previewError = true;
+    await page
+      .getByRole("button", { name: "校验并预览", exact: true })
+      .click();
+    await page.getByRole("alert").filter({ hasText: "适用条件" }).waitFor();
+    previewError = false;
+    await page
+      .getByRole("button", { name: "校验并预览", exact: true })
+      .click();
+    await page.getByRole("dialog").waitFor({ state: "visible" });
+    await page.getByRole("button", { name: "返回编辑" }).click();
+    assert.equal(
+      await page.getByLabel("正文", { exact: false }).inputValue(),
+      "先判断适用条件，再阅读正文。",
+    );
+    await page.getByRole("button", { name: "添加条件链接" }).click();
+    await page.getByRole("button", { name: "移除关联文档 1" }).click();
+    if (process.env.WORKSPACE_SCREENSHOT_DIR) {
+      await page.evaluate(() => window.scrollTo(0, 0));
+      await page.screenshot({
+        path: process.env.WORKSPACE_SCREENSHOT_DIR + "/editor.png",
+        fullPage: true,
+      });
+    }
+    await page.getByRole("button", { name: "发布文档", exact: true }).click();
+    await page
+      .getByRole("status")
+      .filter({ hasText: "已公开发布" })
+      .waitFor();
+    assert.ok(published);
+    assert.deepEqual((published as Guidance).steps, ["第一步", "第二步"]);
+    assert.equal(
+      (published as Guidance).id,
+      "user-" + owner + "-workspace-test",
+    );
+    await navigate(base + "/documents?scope=mine");
+    await page
+      .getByRole("heading", { name: authored.title, exact: true })
+      .waitFor();
+    assert.equal(requestedAuthor, owner);
+    await navigate(base + "/write?id=" + authored.id);
+    await page.waitForFunction(title=>Array.from(document.querySelectorAll<HTMLInputElement>("input")).some(input=>input.value===title),authored.title);
+    assert.equal(
+      await page.getByLabel("文档短名", { exact: true }).isDisabled(),
+      true,
+    );
+    assert.equal(
+      await page.getByLabel("标题", { exact: false }).inputValue(),
+      authored.title,
+    );
+    await page.getByRole("button", { name: "协议 XML", exact: true }).click();
+    const xmlInput = page.getByLabel("XML 输入");
+    assert.match(await xmlInput.inputValue(), /revision="2"/);
+    await xmlInput.fill(
+      (await xmlInput.inputValue()).replace(
+        authored.title,
+        "通过 XML 更新的文档",
+      ),
+    );
+    await page
+      .getByRole("button", { name: "可视化编辑", exact: true })
+      .click();
+    assert.equal(
+      await page.getByLabel("标题", { exact: false }).inputValue(),
+      "通过 XML 更新的文档",
+    );
+    await page.setViewportSize({ width: 390, height: 844 });
+    await navigate(base + "/documents");
+    assert.equal(
+      await page.evaluate(
+        () => document.documentElement.scrollWidth <= window.innerWidth,
+      ),
+      true,
+    );
+    await page.getByRole("button", { name: "打开导航" }).click();
+    await page
+      .getByRole("dialog", { name: "工作区导航" })
+      .waitFor({ state: "visible" });
+    await page.keyboard.press("Escape");
+    assert.equal(
+      await page.getByRole("dialog", { name: "工作区导航" }).isVisible(),
+      false,
+    );
+    if (process.env.WORKSPACE_SCREENSHOT_DIR)
+      await page.screenshot({
+        path: process.env.WORKSPACE_SCREENSHOT_DIR + "/mobile-directory.png",
+        fullPage: true,
+      });
+    await navigate(base + "/guide/review-changes?revision=1");
+    assert.equal(
+      await page.evaluate(
+        () => document.documentElement.scrollWidth <= window.innerWidth,
+      ),
+      true,
+    );
+    if (process.env.WORKSPACE_SCREENSHOT_DIR)
+      await page.screenshot({
+        path: process.env.WORKSPACE_SCREENSHOT_DIR + "/mobile-reader.png",
+        fullPage: true,
+      });
+    await navigate(base + "/account");
+    assert.equal(
+      await page.evaluate(
+        () => document.documentElement.scrollWidth <= window.innerWidth,
+      ),
+      true,
+    );
+    await navigate(base + "/write");
+    await page.getByLabel("文档短名", { exact: true }).waitFor();
+    await page.getByRole("button", { name: "协议 XML", exact: true }).click();
+    await page.getByLabel("XML 输入").waitFor();
+    assert.equal(
+      await page.evaluate(
+        () => document.documentElement.scrollWidth <= window.innerWidth,
+      ),
+      true,
+    );
+    if (process.env.WORKSPACE_SCREENSHOT_DIR)
+      await page.screenshot({
+        path: process.env.WORKSPACE_SCREENSHOT_DIR + "/mobile-editor.png",
+        fullPage: true,
+      });
+    await navigate(base + "/protocol");
+    assert.equal(
+      await page.evaluate(
+        () => document.documentElement.scrollWidth <= window.innerWidth,
+      ),
+      true,
+    );
+    if (process.env.WORKSPACE_SCREENSHOT_DIR)
+      await page.screenshot({
+        path: process.env.WORKSPACE_SCREENSHOT_DIR + "/mobile-protocol.png",
+        fullPage: true,
+      });
+    assert.deepEqual(errors, []);
+  } finally {
+    await context.close();
+  }
+}
@@ -1,326 +1,13 @@
-/** UI contract checks use isolated API fixtures; real storage/auth remain covered by guidance-integration.ts. */
-import assert from "node:assert/strict";
 import { test } from "node:test";
-import { mkdir } from "node:fs/promises";
 import { chromium } from "playwright-core";
-import { documentInput, parseDocumentXml } from "../src/lib/guidance-input";
-import { guidanceXml, type Guidance } from "../src/content/guides/catalog";
+import { verifyGuidanceWorkspaceUI } from "./guidance-workspace-ui";
 const base = process.env.WORKSPACE_TEST_URL;
-const owner = "11111111-1111-4111-8111-111111111111";
-const authored: Guidance = {
-  id: "user-" + owner + "-review",
-  revision: 1,
-  kind: "guide",
-  title: "准备一次清晰的代码审查",
-  summary: "用明确的问题和证据，完成一次有用的代码审查。",
-  applies: "提交合并请求前",
-  body: "先理解改动目标，再核对实现与验证。",
-  steps: [],
-  checks: [],
-  links: [],
-  tags: [],
-};
-test(
-  "workspace filters, reading tabs, account states and editor work on desktop and mobile",
-  { skip: !base },
-  async () => {
-    const browser = await chromium.launch({
-      executablePath:
-        process.env.CHROMIUM_PATH ||
-        "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
-      headless: true,
-      args: ["--no-sandbox"],
-    });
-    const context = await browser.newContext({
-      viewport: { width: 1440, height: 1000 },
-    });
-    let signedIn = false,
-      previewError = false,
-      requestedAuthor: string | null = null,
-      published: Guidance | null = null;
-    const errors: string[] = [];
-    try {
-      await context.route("**/api/account/session", (route) =>
-        route.fulfill({
-          json: {
-            user: signedIn
-              ? {
-                  id: owner,
-                  email: "editor@example.com",
-                  verified_at: "2026-10-29T00:00:00Z",
-                }
-              : null,
-          },
-        }),
-      );
-      await context.route(
-        (url) => url.pathname === "/api/documents",
-        async (route) => {
-          if (route.request().method() === "GET") {
-            requestedAuthor = new URL(route.request().url()).searchParams.get(
-              "author",
-            );
-            return route.fulfill({
-              json: { documents: [{ ...authored, author: owner }] },
-            });
-          }
-          published = documentInput.parse(route.request().postDataJSON());
-          return route.fulfill({ status: 201, json: { document: published } });
-        },
-      );
-      await context.route("**/api/documents/preview", (route) => {
-        if (previewError)
-          return route.fulfill({
-            status: 400,
-            json: { error: "输入不符合协议", fields: ["applies"] },
-          });
-        let document: Guidance;
-        try {
-          document =
-            route.request().headers()["content-type"] === "application/xml"
-              ? parseDocumentXml(route.request().postData() || "")
-              : documentInput.parse(route.request().postDataJSON());
-        } catch {
-          return route.fulfill({
-            status: 400,
-            json: { error: "输入不符合协议" },
-          });
-        }
-        return route.fulfill({
-          json: {
-            document,
-            xml: guidanceXml(document),
-            links: document.links.map((link) => ({ ...link, resolved: true })),
-          },
-        });
-      });
-      await context.route("**/api/documents/" + authored.id, (route) =>
-        route.fulfill({ json: { document: authored } }),
-      );
-      const page = await context.newPage();
-      page.setDefaultTimeout(10000);
-      page.on("pageerror", (error) => errors.push(error.message));
-      await page.goto(base!, { waitUntil: "networkidle" });
-      await page
-        .getByRole("heading", { name: authored.title, exact: true })
-        .waitFor();
-      assert.equal(await page.title(), "探索文档 · 织页");
-      const search = page.getByRole("textbox", { name: "搜索文档" });
-      await search.fill("不存在的文档");
-      await search.press("Enter");
-      await page
-        .getByRole("heading", { name: "没有匹配文档", exact: true })
-        .waitFor();
-      await page.reload({ waitUntil: "networkidle" });
-      assert.equal(await search.inputValue(), "不存在的文档");
-      await page
-        .getByRole("button", { name: "清除所有筛选", exact: true })
-        .click();
-      await page
-        .getByRole("heading", { name: authored.title, exact: true })
-        .waitFor();
-      await page.getByRole("tab", { name: /事实依据/ }).focus();
-      await page.keyboard.press("Home");
-      await page.getByRole("tab", { name: /全部文档/ }).waitFor();
-      if (process.env.WORKSPACE_SCREENSHOT_DIR) {
-        await mkdir(process.env.WORKSPACE_SCREENSHOT_DIR, { recursive: true });
-        await page.screenshot({
-          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/directory.png",
-          fullPage: true,
-        });
-      }
-      await page.goto(base + "/guide/review-changes?revision=1", {
-        waitUntil: "networkidle",
-      });
-      await page.getByRole("tab", { name: "XML 源文档" }).click();
-      assert.match(await page.locator("pre").innerText(), /linked-guidance/);
-      await page.getByRole("tab", { name: /版本记录/ }).click();
-      await page.getByText("当前阅读", { exact: true }).waitFor();
-      await page.getByRole("tab", { name: "文档概览" }).click();
-      if (process.env.WORKSPACE_SCREENSHOT_DIR)
-        await page.screenshot({
-          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/reader.png",
-          fullPage: true,
-        });
-      await page.goto(base + "/account", { waitUntil: "networkidle" });
-      await page.getByRole("button", { name: "创建账户", exact: true }).click();
-      await page.getByRole("heading", { name: "创建你的账户" }).waitFor();
-      await page
-        .getByLabel("密码", { exact: true })
-        .fill("a-long-example-password");
-      await page.getByRole("button", { name: "显示密码" }).click();
-      assert.equal(
-        await page.getByLabel("密码", { exact: true }).getAttribute("type"),
-        "text",
-      );
-      await page.getByRole("button", { name: "隐藏密码" }).click();
-      await page.getByLabel("密码", { exact: true }).fill("");
-      if (process.env.WORKSPACE_SCREENSHOT_DIR)
-        await page.screenshot({
-          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/account.png",
-          fullPage: true,
-        });
-      await page.goto(base + "/write", { waitUntil: "networkidle" });
-      await page.getByRole("heading", { name: "登录后开始编写" }).waitFor();
-      signedIn = true;
-      await page.reload({ waitUntil: "networkidle" });
-      await page.getByLabel("文档短名", { exact: true }).fill("workspace-test");
-      await page.getByLabel("标题", { exact: false }).fill("界面回归验证文档");
-      await page
-        .getByLabel("一句话摘要", { exact: false })
-        .fill("可独立使用的指导");
-      await page
-        .getByLabel("适用条件", { exact: false })
-        .fill("检查界面流程时");
-      await page
-        .getByLabel("正文", { exact: false })
-        .fill("先判断适用条件，再阅读正文。");
-      await page
-        .getByLabel("建议步骤", { exact: true })
-        .fill("第一步\n\n第二步");
-      previewError = true;
-      await page
-        .getByRole("button", { name: "校验并预览", exact: true })
-        .click();
-      await page.getByRole("alert").filter({ hasText: "适用条件" }).waitFor();
-      previewError = false;
-      await page
-        .getByRole("button", { name: "校验并预览", exact: true })
-        .click();
-      await page.getByRole("dialog").waitFor({ state: "visible" });
-      await page.getByRole("button", { name: "返回编辑" }).click();
-      assert.equal(
-        await page.getByLabel("正文", { exact: false }).inputValue(),
-        "先判断适用条件，再阅读正文。",
-      );
-      await page.getByRole("button", { name: "添加条件链接" }).click();
-      await page.getByRole("button", { name: "移除关联文档 1" }).click();
-      if (process.env.WORKSPACE_SCREENSHOT_DIR) {
-        await page.evaluate(() => window.scrollTo(0, 0));
-        await page.screenshot({
-          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/editor.png",
-          fullPage: true,
-        });
-      }
-      await page.getByRole("button", { name: "发布文档", exact: true }).click();
-      await page
-        .getByRole("status")
-        .filter({ hasText: "已公开发布" })
-        .waitFor();
-      assert.ok(published);
-      assert.deepEqual((published as Guidance).steps, ["第一步", "第二步"]);
-      assert.equal(
-        (published as Guidance).id,
-        "user-" + owner + "-workspace-test",
-      );
-      await page.goto(base + "/documents?scope=mine", {
-        waitUntil: "networkidle",
-      });
-      assert.equal(requestedAuthor, owner);
-      await page
-        .getByRole("heading", { name: authored.title, exact: true })
-        .waitFor();
-      await page.goto(base + "/write?id=" + authored.id, {
-        waitUntil: "networkidle",
-      });
-      assert.equal(
-        await page.getByLabel("文档短名", { exact: true }).isDisabled(),
-        true,
-      );
-      assert.equal(
-        await page.getByLabel("标题", { exact: false }).inputValue(),
-        authored.title,
-      );
-      await page.getByRole("button", { name: "协议 XML", exact: true }).click();
-      const xmlInput = page.getByLabel("XML 输入");
-      assert.match(await xmlInput.inputValue(), /revision="2"/);
-      await xmlInput.fill(
-        (await xmlInput.inputValue()).replace(
-          authored.title,
-          "通过 XML 更新的文档",
-        ),
-      );
-      await page
-        .getByRole("button", { name: "可视化编辑", exact: true })
-        .click();
-      assert.equal(
-        await page.getByLabel("标题", { exact: false }).inputValue(),
-        "通过 XML 更新的文档",
-      );
-      await page.setViewportSize({ width: 390, height: 844 });
-      await page.goto(base!, { waitUntil: "networkidle" });
-      assert.equal(
-        await page.evaluate(
-          () => document.documentElement.scrollWidth <= window.innerWidth,
-        ),
-        true,
-      );
-      await page.getByRole("button", { name: "打开导航" }).click();
-      await page
-        .getByRole("dialog", { name: "工作区导航" })
-        .waitFor({ state: "visible" });
-      await page.keyboard.press("Escape");
-      assert.equal(
-        await page.getByRole("dialog", { name: "工作区导航" }).isVisible(),
-        false,
-      );
-      if (process.env.WORKSPACE_SCREENSHOT_DIR)
-        await page.screenshot({
-          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/mobile-directory.png",
-          fullPage: true,
-        });
-      await page.goto(base + "/guide/review-changes?revision=1", {
-        waitUntil: "networkidle",
-      });
-      assert.equal(
-        await page.evaluate(
-          () => document.documentElement.scrollWidth <= window.innerWidth,
-        ),
-        true,
-      );
-      if (process.env.WORKSPACE_SCREENSHOT_DIR)
-        await page.screenshot({
-          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/mobile-reader.png",
-          fullPage: true,
-        });
-      await page.goto(base + "/account", { waitUntil: "networkidle" });
-      assert.equal(
-        await page.evaluate(
-          () => document.documentElement.scrollWidth <= window.innerWidth,
-        ),
-        true,
-      );
-      await page.goto(base + "/write", { waitUntil: "networkidle" });
-      await page.getByLabel("文档短名", { exact: true }).waitFor();
-      await page.getByRole("button", { name: "协议 XML", exact: true }).click();
-      await page.getByLabel("XML 输入").waitFor();
-      assert.equal(
-        await page.evaluate(
-          () => document.documentElement.scrollWidth <= window.innerWidth,
-        ),
-        true,
-      );
-      if (process.env.WORKSPACE_SCREENSHOT_DIR)
-        await page.screenshot({
-          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/mobile-editor.png",
-          fullPage: true,
-        });
-      await page.goto(base + "/protocol", { waitUntil: "networkidle" });
-      assert.equal(
-        await page.evaluate(
-          () => document.documentElement.scrollWidth <= window.innerWidth,
-        ),
-        true,
-      );
-      if (process.env.WORKSPACE_SCREENSHOT_DIR)
-        await page.screenshot({
-          path: process.env.WORKSPACE_SCREENSHOT_DIR + "/mobile-protocol.png",
-          fullPage: true,
-        });
-      assert.deepEqual(errors, []);
-    } finally {
-      await context.close();
-      await browser.close();
-    }
-  },
-);
+test("workspace filters, reading tabs, account states and editor work on desktop and mobile", {skip: !base}, async () => {
+  const browser = await chromium.launch({
+    executablePath: process.env.CHROMIUM_PATH || "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+    headless: true,
+    args: ["--no-sandbox", "--disable-dev-shm-usage"],
+  });
+  try { await verifyGuidanceWorkspaceUI(base!, browser); }
+  finally { await browser.close(); }
+});
@@ -7,7 +7,9 @@ import {setTimeout} from 'node:timers/promises';
 import {mkdtemp,readFile,writeFile,rm} from 'node:fs/promises';
 import {tmpdir} from 'node:os';
 import {join} from 'node:path';
-import {randomUUID} from 'node:crypto';
+import {randomUUID,createHash} from 'node:crypto';
+import {putFile} from '../src/lib/storage';
+import managedMedia from '../src/content/managed-media.json';
 import sharp from 'sharp';
 import {db} from '../src/lib/db';
 import {probe,run} from '../src/lib/probe';
@@ -31,8 +33,6 @@ test('real PostgreSQL + S3 notes, flat tags, resource sharing and video processi
  for(const route of ['/','/images','/videos','/audio','/articles','/motion','/library/import','/tools/doodle','/tools/skills','/tools/skills/street-people','/tools/skills/shadow-puppet'])assert.equal((await fetch(base+route)).status,200,route);
  await verifyEmailAccounts();
  await verifyGuidancePublishing(base);
-  const workspaceUI=spawn(process.execPath,['--import','tsx','--test','tests/guidance-workspace.test.ts'],{env:{...process.env,WORKSPACE_TEST_URL:base},timeout:90000,stdio:'inherit'});
-  const [workspaceExit]=await once(workspaceUI,'exit');assert.equal(workspaceExit,0,'SaaS workspace UI regression checks');
  await verifyFlatNoteMigration();
  const root=await request('/api/tags',{name:'线条',slug:'lines'});const child=await request('/api/tags',{name:'白色',slug:'white'});
  const sameTag=await request('/api/tags',{name:'#线条'});assert.equal(sameTag.id,root.id,'Hashtag creation reuses the globally unique tag');
@@ -134,7 +134,14 @@ test('real PostgreSQL + S3 notes, flat tags, resource sharing and video processi
  for(const body of [{layoutId:'ref-28',name:'bad',parameters:{}},{layoutId:'ref-01',name:'bad',parameters:{texts:{I01:{value:'wrong kind'}}}},{layoutId:'ref-01',name:'bad',parameters:{images:{I01:{assetId:randomUUID()}}}}])assert.equal((await fetch(base+'/api/studio/designs',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)})).status,400);
  assert.equal((await fetch(base+'/api/studio/designs/'+randomUUID())).status,404);
  assert.ok((await fetch(base+'/api/studio/designs?agent_mode=True').then(r=>r.text())).includes('revision'));
-  const published=await publishLearningSeries();await publishLearningSeries();
+  // Isolated S3 uses synthetic fixtures, never credentials or production objects.
+  const testCoverFile=join(dir,'learning-cover.png');
+  const testCoverBytes=await sharp({create:{width:1080,height:1440,channels:3,background:'#e8eadc'}}).png().toBuffer();
+  await writeFile(testCoverFile,testCoverBytes);
+  const testCover={...managedMedia['apps/waterfall-wiki/public/learning-skills/cover.png'],id:randomUUID(),key:'integration/learning-cover.png',sha256:createHash('sha256').update(testCoverBytes).digest('hex'),bytes:testCoverBytes.length};
+  await putFile(testCover.key,testCoverFile,'image/png');
+  const publishTestSeries=()=>publishLearningSeries(testCover);
+  const published=await publishTestSeries();await publishTestSeries();
  const articles=(await request('/api/feed?section=articles&path=learning-skills')).posts;
  assert.equal(articles.length,3,'Repeated publication must not duplicate posts');
  assert.equal(new Set(articles.map((p:{cover_asset_id:string})=>p.cover_asset_id)).size,1,'Three posts share one independent image asset');
@@ -173,7 +180,7 @@ test('real PostgreSQL + S3 notes, flat tags, resource sharing and video processi
  assert.equal((await request('/api/notes/'+captionReuse.id)).entry.editableMarkdown,'可以复用的独立文字','Editing one note must not mutate shared text');
  const authored=(await request('/api/feed?section=articles')).posts.find((p:{slug:string})=>p.slug===published.published[0]);const authoredState=await request('/api/notes/'+authored.id);
  assert.equal((await edit(authored.id,{title:'保留用户修改',description:'部署不能覆盖',markdown:'手动修改的正文',tags:[newTag.id],revision:authoredState.entry.revision})).status,200);
-  await publishLearningSeries();const retained=await request('/api/notes/'+authored.id);assert.equal(retained.entry.title,'保留用户修改');assert.equal(retained.entry.editableMarkdown,'手动修改的正文');
+  await publishTestSeries();const retained=await request('/api/notes/'+authored.id);assert.equal(retained.entry.title,'保留用户修改');assert.equal(retained.entry.editableMarkdown,'手动修改的正文');
  assert.equal((await request('/api/notes/'+note.id)).entry.title,payload.title,'Static edits outlive content publication');
  assert.equal((await fetch(base+'/api/notes/missing')).status,404);
  assert.equal((await fetch(base+'/api/notes/'+note.id,{method:'DELETE'})).status,405);
@@ -208,6 +215,11 @@ test('real PostgreSQL + S3 notes, flat tags, resource sharing and video processi
   const head=await fetch(base+path,{method:'HEAD'});assert.equal(head.status,200);assert.equal(await head.text(),'');
   if(doc!=='SKILL')assert.equal((await fetch(base+'/tools/skills/shadow-puppet/'+doc)).status,200);
  }
+  for(const image of ['egret-example','dancer-example']){
+   const asset=managedMedia[`apps/waterfall-wiki/public/skills/shadow-puppet/${image}.png` as keyof typeof managedMedia];
+   const key='integration/legacy-'+asset.id+'.png';await putFile(key,testCoverFile,'image/png');
+   await db().query("INSERT INTO assets(id,kind,filename,storage_key,mime_type,byte_size,sha256) VALUES($1,'image',$2,$3,'image/png',$4,$5)",[asset.id,image+'.png',key,testCoverBytes.length,testCover.sha256]);
+  }
  for(const image of ['egret-example','dancer-example'])assert.equal((await fetch(base+`/skills/shadow-puppet/${image}.png`,{method:'HEAD'})).status,200);
  for(const path of ['/skills/missing/SKILL.md','/skills/shadow-puppet/missing.md','/tools/skills/shadow-puppet/missing'])assert.equal((await fetch(base+path)).status,404,path);
  assert.equal((await fetch(base+'/api/skill-docs/shadow-puppet/SKILL',{method:'POST'})).status,405);
@@ -216,8 +228,11 @@ test('real PostgreSQL + S3 notes, flat tags, resource sharing and video processi
  }
  const machineIndex=await fetch(base+'/api/guides');assert.equal(machineIndex.status,200);assert.equal((await machineIndex.json()).protocol,'linked-guidance/0.1');
  const home=await fetch(base+'/').then(r=>r.text());
-  for(const href of ['/documents','/write','/protocol','/guide/review-changes?revision=1'])assert.ok(home.includes('href=\"'+href+'\"'),`Guidance homepage links to ${href}`);
-  assert.ok(home.includes('社区发布'));assert.ok(home.includes('协议样例'));
+  for(const href of ['/documents','/graphic','/infinite_canvas','/account?next=/workspace'])assert.ok(home.includes('href="'+href+'"'),`Landing page links to ${href}`);
+  assert.ok(home.includes('让灵感，有形。'));
+  for(const [oldPath,newPath] of [['/studio/graphic','/graphic'],['/studio/infinite_canvas','/infinite_canvas']]){
+   const response=await fetch(base+oldPath,{redirect:'manual'});assert.equal(response.status,308);assert.equal(response.headers.get('location'),newPath);
+  }
  // Legacy media and skill functionality stays covered by its own routes above and below.

  const spec=await request('/api/skills/street-people');assert.equal(spec.generation.executor,'coding-agent');
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
codex-bot	429e78c722	Run complete workspace UI assertions in an isolated context of the integration browser creative workspace review checks / verify (pull_request) Successful in 23m26s Details	2026-10-30 19:37:59 +08:00
codex-bot	4faef8b766	Wait for visible application readiness in workspace UI regression checks creative workspace review checks / verify (pull_request) Failing after 19m53s Details	2026-10-30 19:07:20 +08:00
codex-bot	d8c06d6cc6	Capture document directory network and hydration failures in CI creative workspace review checks / verify (pull_request) Failing after 19m53s Details	2026-10-30 18:37:02 +08:00
codex-bot	cad84f8a67	Run nested UI checks and align authentication assertions with public workspace routes creative workspace review checks / verify (pull_request) Failing after 19m41s Details	2026-10-30 18:13:58 +08:00
codex-bot	33405b7d8b	Exercise document directory at its canonical entry in UI regression tests	2026-10-30 18:07:21 +08:00
codex-bot	cfc6686904	Capture document client navigation failures in CI creative workspace review checks / verify (pull_request) Failing after 20m32s Details	2026-10-30 17:44:05 +08:00
codex-bot	40a6076961	Wait for document navigation before asserting its rendered heading creative workspace review checks / verify (pull_request) Failing after 17m59s Details	2026-10-30 17:18:42 +08:00
codex-bot	53a4103308	Sequence creative workspace releases and verify document discovery at its new entry creative workspace review checks / verify (pull_request) Failing after 17m42s Details	2026-10-30 16:57:48 +08:00
Zayden-Jung	ea7bbebb3e	Merge pull request 'Redesign creative landing page, workspace and editor entry points' (#27 ) from codex/landing-workspace into main studio CI and deployment / verify-and-deploy (push) Failing after 11m29s Details waterfall-wiki CI and deployment / verify-and-deploy (push) Failing after 19m46s Details Reviewed-on: #27	2026-10-30 07:17:43 +00:00
codex-bot	94193d485b	Cover public creative entries while retaining protected Studio API checks creative workspace review checks / verify (pull_request) Successful in 13m24s Details	2026-10-30 14:43:06 +08:00
codex-bot	265cd7444b	Describe external agent workflow in creator-facing editor copy creative workspace review checks / verify (pull_request) Has been cancelled Details	2026-10-30 14:38:28 +08:00
codex-bot	f1c794654e	Edit canvas text and replace images directly on double click creative workspace review checks / verify (pull_request) Has been cancelled Details	2026-10-30 14:32:32 +08:00
codex-bot	fd9b8640b7	Keep graphic toolbar and header within narrow viewports creative workspace review checks / verify (pull_request) Has been cancelled Details	2026-10-30 14:29:36 +08:00
codex-bot	4791729b65	Make graphic panels collapsible and fix hand panning over layers creative workspace review checks / verify (pull_request) Has been cancelled Details	2026-10-30 14:28:28 +08:00
codex-bot	d362e1a975	Verify landing redirects and wait for cross-app route deployment creative workspace review checks / verify (push) Has been cancelled Details creative workspace review checks / verify (pull_request) Has been cancelled Details	2026-10-30 14:21:12 +08:00
codex-bot	924724c5e4	Align server visual acceptance with canonical editor routes and canvas onboarding creative workspace review checks / verify (pull_request) Has been cancelled Details creative workspace review checks / verify (push) Has been cancelled Details	2026-10-30 14:16:14 +08:00
codex-bot	eed5d43e21	Fetch review history before checking the patch creative workspace review checks / verify (push) Failing after 27m59s Details creative workspace review checks / verify (pull_request) Failing after 2m20s Details	2026-10-30 14:13:03 +08:00
codex-bot	5a0554b3b1	Introduce creative landing page and workspace with focused editor layouts creative workspace review checks / verify (push) Failing after 4s Details creative workspace review checks / verify (pull_request) Failing after 2s Details	2026-10-30 14:10:40 +08:00
Zayden-Jung	82bef38536	Merge pull request 'Allow whole-card dragging outside explicit edit mode' (#26 ) from codex/canvas-card-drag into main studio CI and deployment / verify-and-deploy (push) Successful in 8m42s Details Reviewed-on: #26	2026-10-29 18:14:12 +00:00
codex-bot	d050e06870	Drag canvas cards from their whole surface outside explicit edit mode	2026-10-30 02:03:34 +08:00
Zayden-Jung	045c3d8188	Merge pull request 'Fix Studio release smoke after S3 template migration' (#25 ) from codex/studio-release-fix into main studio CI and deployment / verify-and-deploy (push) Successful in 8m53s Details Reviewed-on: #25	2026-10-29 17:08:33 +00:00
codex-bot	f3e9f5a3fb	Use isolated Wiki media fixtures in Studio release smoke checks	2026-10-30 00:59:58 +08:00
codex-bot	922c7bd0d0	Merge pull request 'Move repository images and embedded template bitmaps to S3' (#23 ) from codex/s3-media into main studio CI and deployment / verify-and-deploy (push) Failing after 4m49s Details waterfall-wiki CI and deployment / verify-and-deploy (push) Failing after 18m8s Details	2026-10-29 16:43:28 +00:00
codex-bot	3f8bd11a17	Merge pull request 'Rebuild Studio infinite canvas as full-screen movable tools' (#24 ) from codex/canvas-rebuild into main studio CI and deployment / verify-and-deploy (push) Failing after 8m37s Details	2026-10-29 16:43:24 +00:00
codex-bot	e2bc4ae6bd	Add light and dark canvas themes with floating dock and contextual actions	2026-10-30 00:42:33 +08:00
codex-bot	ef66f687bd	Expand dotted canvas to full screen and verify real tool gestures	2026-10-30 00:34:49 +08:00
codex-bot	f5422b1541	Make canvas nodes editable resizable tools with anchored navigation	2026-10-30 00:26:01 +08:00
codex-bot	19bba57561	Move repository content images to S3-backed media references	2026-10-29 23:03:11 +08:00
Zayden-Jung	906c6985cb	Merge pull request 'Fix Studio production acceptance after graphic workspace replaces catalog' (#22 ) from codex/studio-acceptance into main studio CI and deployment / verify-and-deploy (push) Successful in 4m16s Details Reviewed-on: #22	2026-10-29 14:40:04 +00:00
codex-bot	8649af1b37	Update production visual acceptance for new Studio workspaces	2026-10-29 22:18:17 +08:00
Zayden-Jung	bcdcd0906b	Merge pull request 'Unify guidance wiki SaaS and Studio Graphic workspaces' (#21 ) from codex/studio-graphic into main studio CI and deployment / verify-and-deploy (push) Failing after 8m18s Details waterfall-wiki CI and deployment / verify-and-deploy (push) Failing after 18m24s Details Reviewed-on: #21	2026-10-29 14:04:25 +00:00
codex-bot	cbf70936ab	Combine guidance wiki and Studio workspaces for unified review	2026-10-29 21:45:12 +08:00
codex-bot	1a3a335aae	Merge remote-tracking branch 'origin/main' into codex/studio-graphic	2026-10-29 21:34:23 +08:00
codex-bot	900fd89af9	Add Studio Graphic workspace and reuse email account service	2026-10-29 21:34:23 +08:00
Zayden-Jung	9b81cad9f9	Merge pull request 'Add Studio infinite canvas with local creative workflow' (#19 ) from codex/studio-infinite-canvas into main studio CI and deployment / verify-and-deploy (push) Successful in 16m0s Details Reviewed-on: #19	2026-10-29 13:30:19 +00:00
codex-bot	8c5d838944	Add infinite canvas workspace with local drafts and connected nodes	2026-10-29 19:50:59 +08:00
				`@@ -0,0 +1 @@`
				.app{display:flex;min-height:100dvh;background:#fafaf8;color:#30352c;font-family:Arial,'PingFang SC',sans-serif}.app *{box-sizing:border-box}.app a{color:inherit;text-decoration:none}.app>aside{width:230px;flex-shrink:0;border-right:1px solid #e0e3da;background:#f3f4ef;padding:30px 20px;display:flex;flex-direction:column;gap:9px}.brand{font-size:22px;font-weight:600;margin-bottom:45px}.brand small{font-size:9px;letter-spacing:1px;color:#87917c}.app aside>span{font-size:10px;color:#99a08f;margin-bottom:10px;padding-left:10px}.app aside>a:not(.brand){display:flex;align-items:center;gap:12px;font-size:12px;padding:12px;border-radius:7px}.app aside>a[aria-current]{background:#e5eadb}.app aside>.account{margin-top:auto;overflow-wrap:anywhere}.app>section{padding:35px 55px;max-width:1250px;width:100%;margin:auto;min-height:100dvh}.app header{display:flex;justify-content:space-between;color:#8d9582;font-size:10px;letter-spacing:1px}.kicker{font-size:10px;letter-spacing:2px;color:#8a9876;margin-top:65px}.app h1{font-size:34px;font-weight:500;letter-spacing:-1px;margin:18px 0}.sub{font-size:13px;color:#929887}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}.grid>a{background:white;border:1px solid #dfe3d6;border-radius:12px;padding:26px;transition:transform .2s}.grid>a:hover{transform:translateY(-3px)}.grid small{font-size:9px;letter-spacing:1.5px;margin-left:12px;color:#909b82}.grid>a>svg{vertical-align:middle;width:20px;color:#7b8c65}.grid h2{font-size:23px;font-weight:500;margin:24px 0 12px}.grid p{font-size:12px;color:#929a87;line-height:1.8}.poster,.canvas{height:190px;margin:25px 0;background:#ecf0e3;position:relative;overflow:hidden;border-radius:5px}.poster{padding:25px;font-size:40px;line-height:1;font-weight:600;letter-spacing:-2px}.poster i{font-family:Georgia,serif;font-weight:400}.poster b{position:absolute;right:0;top:12px;font-size:155px;color:#a7b88b}.canvas{display:flex;align-items:center;justify-content:center;gap:12px;background:radial-gradient(#c5cfb8 1px,transparent 1px) 0 0/18px 18px,#f3f5ef;color:#91a276}.canvas span{background:white;border:1px solid #d5ddc9;padding:20px 13px;font-size:12px;border-radius:6px;color:#59684a}.grid strong{display:flex;justify-content:space-between;font-size:12px;font-weight:400}.agent{display:flex;align-items:center;gap:18px;border:1px solid #dde3d1;border-radius:10px;padding:23px;margin-top:28px}.agent>svg{color:#83956c}.agent h3{font-size:14px;margin:0 0 8px}.agent p{font-size:11px;color:#8a947d;margin:0;line-height:1.8}.agent a{margin-left:auto;font-size:12px;white-space:nowrap}.hint{font-size:10px;color:#a1a793;margin-top:25px}.app a:focus-visible{outline:2px solid #718358;outline-offset:4px}@media(max-width:850px){.app>aside{width:180px}.app>section{padding:30px 25px}.grid{gap:15px}.grid>a{padding:20px}.app h1{font-size:28px}.canvas{gap:5px}.canvas span{padding:15px 8px}}@media(max-width:600px){.app{display:block}.app>aside{width:100%;flex-direction:row;flex-wrap:wrap;padding:18px;gap:5px;border-right:0;border-bottom:1px solid #ddd}.brand{margin:0;width:100%}.app aside>span,.app aside>.account{display:none}.app aside>a:not(.brand){padding:8px;font-size:10px}.grid{grid-template-columns:1fr}.kicker{margin-top:35px}.agent{flex-wrap:wrap}.agent a{margin-left:0}}