Bound review image retention and separate CI navigation budgets

2026-10-31 03:21:23 +08:00
487 changed files with 19635 additions and 5516 deletions
@@ -0,0 +1,24 @@
+.git
+**/.next
+**/node_modules
+**/dist
+coverage
+.env
+.env.*
+!.env.example
+*.tsbuildinfo
+.DS_Store
+.agents
+.codex
+
+# Documentation and CI metadata are not application build inputs.
+/docs
+/.gitea
+/README.md
+/AGENTS.md
+
+**/__pycache__
+**/.venv
+
+# Local authoring assets are uploaded via APIs, never application build inputs.
+/content
@@ -0,0 +1,55 @@
+name: creative workspace review checks
+on:
+  pull_request:
+    branches: [main]
+    paths:
+      - 'apps/studio/**'
+      - 'apps/waterfall-wiki/**'
+      - '.gitea/workflows/**'
+      - 'scripts/*studio*'
+      - 'compose.creative-review.yml'
+      - 'scripts/integration.sh'
+      - 'scripts/cleanup-integration.sh'
+      - 'scripts/test-integration-cleanup.py'
+      - 'scripts/cleanup-review-images.sh'
+      - 'scripts/test-review-image-cleanup.py'
+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
+          bash -n scripts/integration.sh scripts/cleanup-integration.sh scripts/cleanup-review-images.sh
+          python3 scripts/test-integration-cleanup.py
+          python3 scripts/test-review-image-cleanup.py
+      - 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:
+          STUDIO_REVIEW_IMAGE: creative-studio-review:${{ gitea.sha }}
+          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
+      - name: Clean this run disposable integration resources even after cancellation
+        if: always()
+        env:
+          GITEA_RUN_ID: ${{ gitea.run_id }}
+        run: bash scripts/cleanup-integration.sh
+      - name: Remove this run disposable review image tags
+        if: always()
+        env:
+          REVIEW_SHA: ${{ gitea.sha }}
+        run: bash scripts/cleanup-review-images.sh
@@ -0,0 +1,23 @@
+name: python CI and deployment
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'apps/python/**'
+      - 'scripts/deploy-python.sh'
+      - '.gitea/workflows/python.yml'
+
+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: Build and verify python
+        run: docker build -f apps/python/Dockerfile -t "prompt-python:${{ gitea.sha }}" .
+      - name: Release python
+        if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
+        run: bash scripts/deploy-python.sh "${{ gitea.sha }}"
@@ -0,0 +1,71 @@
+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'
+      - 'scripts/deploy.sh'
+      - 'scripts/wiki-image-lifecycle.py'
+      - 'scripts/infra.sh'
+      - 'scripts/auth-admin.sh'
+      - 'scripts/integration.sh'
+      - 'scripts/cleanup-integration.sh'
+      - 'scripts/test-integration-cleanup.py'
+      - 'pnpm-workspace.yaml'
+
+jobs:
+  verify-and-deploy:
+    if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
+    runs-on: ces-control
+    timeout-minutes: 60
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Check shared content and documentation contracts
+        run: |
+          python3 scripts/test-integration-cleanup.py
+          bash -n scripts/integration.sh scripts/cleanup-integration.sh
+          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 }}
+        run: |
+          if [ "$(id -u)" -eq 0 ]; then
+            python3 scripts/wiki-image-lifecycle.py ci --sha "$RELEASE_SHA"
+          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
+      - name: Clean this run disposable integration resources even after cancellation
+        if: always()
+        env:
+          GITEA_RUN_ID: ${{ gitea.run_id }}
+        run: bash scripts/cleanup-integration.sh
@@ -0,0 +1,19 @@
+name: Wiki image retention checks
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'scripts/wiki-image-lifecycle.py'
+      - 'tests/test_wiki_image_lifecycle.py'
+      - '.gitea/workflows/wiki-image-retention-checks.yml'
+jobs:
+  retention-policy:
+    if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
+    runs-on: ces-control
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v4
+      - name: Check retention without building or accessing the Docker daemon
+        run: |
+          bash -n scripts/deploy.sh
+          PYTHONDONTWRITEBYTECODE=1 python3 -m unittest discover -s tests -p 'test_wiki_image_lifecycle.py' -v
@@ -1,6 +1,4 @@
 node_modules/
-.pnpm-store/
-.turbo/
 .next/
 coverage/
 .env*
@@ -20,13 +18,3 @@ __pycache__/
 *.webp
 *.gif
 *.avif
-
-# Approved, versioned brand resources are package source assets.
-!packages/brand/assets/**/*.png
-!packages/brand/docs/logo-preview.png
-/apps/studio/public/brand/
-/apps/studio/public/favicon.ico
-/apps/studio/public/apple-touch-icon.png
-/apps/dashboard/public/brand/
-/apps/dashboard/public/favicon.ico
-/apps/dashboard/public/apple-touch-icon.png
@@ -8,6 +8,9 @@ This block is written and re-added by `next dev` — verify at `node_modules/nex

 <!-- END:nextjs-agent-rules -->

-## 项目维护
+## 交付与视觉验收

- Wiki 和 Studio 共用 `apps/dashboard` 的 Pages Router、登录保护和品牌包。保留已发布的路由、媒体标识和数据库迁移。
+- 用户指定服务器为唯一运行与验收入口：http://8.211.154.134:18131/。
+- 页面改动必须先 push，等待 ces-control 的 CI/CD 成功部署，再直接访问服务器检查效果。
+- 不启动本地网页预览，不使用 localhost / 127.0.0.1 页面进行视觉验收，也不把本地预览链接交付给用户。
+- 类型检查、单元测试等不提供网页预览的检查可以本地执行；完整运行检查由 Docker CI 完成。
@@ -0,0 +1,40 @@
+FROM node:24-bookworm-slim AS base
+LABEL io.entroia.project="waterfall-wiki"
+ENV NEXT_TELEMETRY_DISABLED=1
+WORKDIR /app
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends ffmpeg ca-certificates chromium fonts-noto-cjk \
+    && rm -rf /var/lib/apt/lists/*
+
+FROM base AS dependencies
+LABEL io.entroia.wiki.build="true"
+RUN corepack enable && corepack prepare pnpm@11.25.0 --activate
+COPY apps/waterfall-wiki/pnpm-lock.yaml ./
+COPY pnpm-workspace.yaml /tmp/monorepo-policy.yaml
+RUN node -e "const fs=require('fs');const text=fs.readFileSync('/tmp/monorepo-policy.yaml','utf8');fs.writeFileSync('pnpm-workspace.yaml', text.slice(text.indexOf('allowBuilds:')));"
+RUN pnpm fetch --frozen-lockfile --fetch-timeout=300000 --network-concurrency=8
+COPY apps/waterfall-wiki/package.json ./
+RUN pnpm install --offline --frozen-lockfile
+
+FROM dependencies AS build
+# .dockerignore excludes docs and operational notes without extra legacy COPY snapshots.
+COPY apps/waterfall-wiki/ .
+RUN pnpm typecheck && pnpm test && pnpm build && pnpm test:smoke
+
+FROM build AS integration
+USER node
+CMD ["npm", "run", "test:integration"]
+
+FROM base AS runtime
+ENV NODE_ENV=production HOSTNAME=0.0.0.0 PORT=3000 \
+    FFMPEG_PATH=/usr/bin/ffmpeg FFPROBE_PATH=/usr/bin/ffprobe
+COPY --from=build --chown=node:node /app/.next/standalone/ ./
+COPY --from=build --chown=node:node /app/dist/worker.cjs /app/dist/bootstrap.cjs /app/dist/publish-learning-series.cjs /app/dist/auth-cli.cjs ./
+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,38 +1,104 @@
-# 啡跃 Endoleap
+# PROMPT

-啡跃把笔记、参考素材和创作工作台放在同一个 Next.js 应用里。应用位于 `apps/dashboard`，共享主题与品牌资源位于 `packages/brand`。
+把提示词、参考图、分步文档和创作工具收进同一个可连接的知识库。人可以浏览瀑布流、搜索和编辑；AI 可以从同一篇 post 读取纯文本、图片与 API 说明，再调用 Studio 生成作品。

-| 入口 | 用途 |
+**PROMPT 是网站与项目品牌；`waterfall-wiki` 是知识库应用的内部名称。** 目录、包、CI、镜像和 Compose 服务使用内部名称，网站导航与页面标题使用 PROMPT。
+
+线上入口：[PROMPT](http://8.211.154.134:18131/)。内容、媒体、API 与 Studio 共用登录入口。
+
+## 从一篇 post 开始
+
+每篇内容都有稳定的 `/explore/<id>` 地址。标题、标签、正文和封面可以修改，链接保持不变。数据库内容可以保留 24 位 public ID，内部仍使用 UUID；旧 `/p/<slug>`、`/skills/...` 等地址保留兼容跳转。
+
+- **浏览**：首页按不同笔记的反向引用数优先排序。重复引用和自引用不重复计数，代码、图片与外站链接不冒充笔记引用。详情可以查看引用来源。
+- **搜索**：标题、简介、正文、普通标签和系统标签共同匹配。支持多个关键词及双引号短语，先按相关性、再按引用数和时间排序；先筛选再分页。
+- **标签**：普通标签使用 `#中国风`、`#贴纸` 等名称，可以创建、添加或移除。系统标签是固定列表，目前为“文档入口”和“参考图”，只能搜索并勾选，不能通过 `#` 创建。系统标签显示在图片角标，普通标签显示在文字区；分类页顶部按系统标签筛选。
+- **编辑**：卡片与详情都能直接编辑标签；完整编辑器可以修改标题、简介、Markdown。保存使用 revision 检测并发冲突，避免旧窗口覆盖新修改。
+- **素材**：原件和加工结果都是普通资产，可被多篇 post 引用。文档封面与实际参考素材分开，子文档可以有自己的封面，同时保留原参考图。
+
+## 给 AI 的入口
+
+在同一个 post 地址加 `?agent_mode=True` 可以读取纯文本正文和媒体链接。业务 API 的相同参数会先返回接口说明；已有查询参数时使用 `&agent_mode=True`。这些入口同样需要登录或有效 Bearer JWT。
+
+| 地址 | 用途 |
 | --- | --- |
-| `/` | 浏览内容，打开 `/explore/<id>` 查看笔记 |
-| `/guide` | 浏览指导文档 |
-| `/graphic` | 图文排版 |
-| `/infinite_canvas` | 无限画布 |
+| `/explore/<id>` | 人看的 post；加 `?agent_mode=True` 读纯文本 |
 | `/api?agent_mode=True` | 业务 API 目录 |
-| `/studio/api` | Studio API 目录 |
+| `/api/explore-feed` | 统一搜索、系统/普通标签筛选与分页 |
+| `/api/notes/<id>` | GET 读取；PUT 编辑全文；PATCH 仅更新标签 |
+| `/api/tags` | GET 查看普通/系统标签；POST 创建或复用普通标签 |
+| `/api/upload` | 上传媒体；`assetOnly=true` 独立保存，不创建 post |
+| `/api/posts` | 用正文和已有资产创建普通 post |
+| `/api/media/<id>` | 媒体原件与衍生文件，支持 Range |
+| `/api/preview` | 有尺寸上限的 WebP 预览，不接受任意远程 URL |

-## 运行
+标签 PATCH 请求为 `{ "tags": ["标签 UUID"], "revision": "GET 返回的 revision" }`。它不会要求用户重输正文。Tag 对象的 `kind` 为 `normal` 或 `system`；系统标签还有稳定的 `system_key`。普通创建接口不允许提交 `kind` 或 `system_key`。

-准备 Node.js 24、pnpm 11.25.0、PostgreSQL、S3 兼容对象存储和 FFmpeg。参考 [环境变量示例](apps/dashboard/.env.example)，将变量注入 Web、初始化和媒体 worker 进程。邮箱注册与找回密码需要可用的 SMTP 服务。
+Wiki 中的教程是普通 post 与媒体数据，不需要为每份资料增加专用网页路由、JSON 文件端点或代码注册。

-在仓库根目录运行 `pnpm install --frozen-lockfile` 和 `pnpm build`。然后在 `apps/dashboard` 目录准备数据库和存储，初始化管理员认证并启动 Web。
+## Studio：从教程进入工具
+
+Studio 负责交互式排版与无状态渲染，知识库负责教程、来源和入口。`/studio` 返回 PROMPT 首页；请从对应 post 打开具体工具。
+
+27 套排版工具：`/studio/layouts/ref-01` 至 `/studio/layouts/ref-27`，每套对应原图 T/I/D 构件。目录与参数 API 为 `/studio/api/layouts` 和 `/studio/api/layouts/<id>`；POST 参数生成 SVG。效果通过 `/api/studio/designs` 存入 Wiki 现有 PostgreSQL，返回独立 ID，`/studio/designs/<id>` 可再次打开；PATCH 携带 revision 更新同一效果。Studio 不需要数据库连接或第二套数据库。详见 [27 套排版 API 教程](content/studio-tools/layouts-api.md)。
+
+其他试版工具：
+
+- `/studio/ideas/learning-skills-template`：ref-17 同一母版的四张占位封面。
+- `/studio/ideas/layout-selection`：ref-01、ref-07、ref-26 三种构图；可修改文字与配色，核对构件边界。
+- `/studio/api/export/<slug>`：GET 读取方案或初始 SVG；POST 校验自定义参数并生成 SVG/JSON。详细说明读取该地址的 `?agent_mode=True`。
+
+渲染不自动保存作品，也不自动发布 post。需要保留的结果应下载后再通过普通媒体和 post API 发布。原图的 T/I/D 构件、画板比例与来源保留为可读取数据；文字替换和矢量重建的范围应在教程中明确。
+
+## 仓库结构
+
+| 路径 | 职责 |
+| --- | --- |
+| `apps/waterfall-wiki` | Next.js Pages Router 知识库、搜索、标签、媒体 API、认证与后台视频加工 |
+| `apps/studio` | 独立 Next.js 创作工具与封面渲染 API |
+| `apps/python` | 按需运行的 PNG/视频导出 CLI，没有常驻网络服务 |
+| `content` | 本地作者资料、教程及排版源图，不打入 Wiki 运行镜像 |
+| `scripts` | CI 部署、运维、API 发布与作者工具 |
+| `docs` | 数据模型、接口、认证与部署说明 |
+
+两个 JavaScript 应用分别维护冻结的 pnpm 锁文件。根 Dockerfile 是 waterfall-wiki 的构建入口；应用目录的 Dockerfile 与它保持一致。
+
+## 环境与检查
+
+运行环境：Node.js 24、pnpm 11.25.0、PostgreSQL 17、S3 兼容对象存储；视频处理使用 FFmpeg，部分导出使用 Chromium。Python 工具需要 Python 3.12+。

 ```sh
-node dist/bootstrap.cjs
-node dist/auth-cli.cjs init
-pnpm start
+pnpm install
+pnpm --dir apps/waterfall-wiki typecheck
+pnpm --dir apps/waterfall-wiki test
+pnpm --dir apps/studio typecheck
+bash -n scripts/deploy.sh scripts/integration.sh scripts/deploy-studio.sh
 ```

-媒体 worker 在同一目录作为独立进程运行 `node dist/worker.cjs`。绑定管理员验证器时，在远程交互终端执行 `node dist/auth-cli.cjs qr`。已有实例复用原数据库、对象存储和私有认证文件。
+完整集成测试只针对显式隔离的数据库、对象存储和生产容器运行，覆盖存储、视频加工、编辑冲突、真实搜索与引用、标签规则和登录保护。不要把生产存储配置拿来运行集成测试。

-## Monorepo 与 Turborepo
+本项目以指定服务器为唯一网页运行与验收入口：先推送，再等待 ces-control CI/CD，最后直接检查服务器。不要启动本地网页预览，不用 localhost 页面作为视觉验收或交付入口。具体约定见 [AGENTS.md](AGENTS.md)。

-仓库在现有 pnpm workspace 上接入 Turborepo，无需运行面向新项目的 `npx create-turbo@latest`。应用仍位于 `apps/dashboard`，源码品牌包仍位于 `packages/brand`；子包脚本和应用产物路径保持原样。依赖统一锁定在根目录 `pnpm-lock.yaml`，安装从仓库根目录执行。
+## 部署与持久化

-根目录命令由 Turbo 调度：`pnpm dev` 启动开发任务，`pnpm dev:dashboard` 仅启动 Wiki，`pnpm build` 构建应用及 worker/CLI，`pnpm typecheck` 生成 Next.js 类型并检查 TypeScript。`pnpm start` 继续直接启动现有应用。也可以在子包目录使用原有命令。
+Web 应用由 `waterfall-wiki.yml` 统一发布，两个应用的路径都能触发它：先检查并构建 Studio，再完成 Wiki 的类型检查、单元测试、生产构建、冒烟及隔离 PostgreSQL/S3 集成测试并部署 Wiki，随后部署 Studio，最后在指定服务器验收。顺序在同一个 ces-control 作业内保证，避免独立作业互相等待。PR 检查也运行隔离集成测试，但不部署。Python 检查仍由 `python.yml` 承担；文档与作者数据本身不触发应用部署。

-锁文件合并保留应用原有依赖解析。唯一重叠差异是 `@tailwindcss/postcss` 的间接 PostCSS 依赖：品牌包原为 8.5.32，现在沿用应用的 8.5.31；品牌包直接声明的 PostCSS 8.5.6 不变。
+| 服务 | 入口/端口 |
+| --- | --- |
+| `waterfall-wiki` | 公网 `18131`，也是 Studio 的统一入口 |
+| PostgreSQL | `127.0.0.1:18132` |
+| 对象存储 | `127.0.0.1:18133` |
+| Studio | `127.0.0.1:18134`；编辑器公网入口为 `/graphic`、`/infinite_canvas`，资源和 API 保留 `/studio` 代理 |
+| Python | 无网络端口，按需运行 |

-迁移阶段所有任务禁用缓存，根命令使用 `--env-mode=loose` 透传既有环境变量，保留品牌资源准备步骤的每次执行。后续启用缓存前，需明确环境变量输入、跨包资源和所有输出。当前不配置 CI/CD，也不自动发布。
+生产 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`。

-仅检查任务计划、不执行编译或生成应用产物时，可运行 `pnpm build --dry=json` 和 `pnpm typecheck --dry=json`。完整构建与运行验证另行执行。
+部署在停止写入后备份数据库，再运行迁移和启动新版。失败时恢复兼容旧镜像的备份并回滚服务。生产不执行 `down -v`，也不清空对象文件。早期合集验证会遍历分页，不假定旧文章一定在第一页。
+
+## 登录与自动化
+
+共享验证器的 6 位 TOTP 动态码登录，JWT 保存在 HttpOnly Cookie 中；这属于单因素动态码登录，不是 2FA。密钥保存在服务器认证卷，不进入 Git、镜像或 HTTP 二维码接口。
+
+服务器管理员在交互式 SSH 终端运行 `sudo /opt/prompt/auth qr` 绑定验证器。不要把二维码、动态密钥或 JWT 粘贴到聊天、日志和仓库。服务端自动化可使用 `node auth-cli.cjs run <脚本>`，在进程内为本机 API 请求附加短期凭据，不输出令牌。
+
+更多说明：[登录与 SSH 绑定](docs/dynamic-code-login.md) · [API](docs/api.md) · [数据模型](docs/data-model.md) · [项目结构与部署](docs/monorepo.md)。
@@ -1,18 +0,0 @@
-# Export to the web, storage bootstrap and worker processes.
-DATABASE_URL=postgresql://endoleap:replace-me@127.0.0.1:5432/endoleap
-S3_ENDPOINT=http://127.0.0.1:9000
-S3_ACCESS_KEY=replace-me
-S3_SECRET_KEY=replace-me
-S3_BUCKET=prompt
-PORT=3000
-AUTH_CONFIG_FILE=/path/to/private/auth.json
-AUTH_COOKIE_SECURE=true
-ACCOUNT_PUBLIC_ORIGIN=https://endoleap.example
-ACCOUNT_TRUST_PROXY=false
-
-# Email verification and recovery
-SMTP_HOST=
-SMTP_PORT=465
-SMTP_USERNAME=
-SMTP_FROM=
-SMTP_PASSWORD=
@@ -1,5 +0,0 @@
-BEGIN;
-ALTER TABLE account_tokens DROP CONSTRAINT account_tokens_kind_check;
-ALTER TABLE account_tokens ADD CONSTRAINT account_tokens_kind_check CHECK (kind IN ('verify','session','reset'));
-INSERT INTO schema_migrations(version) VALUES ('017_password_reset');
-COMMIT;
@@ -1,50 +0,0 @@
-{
-  "name": "@prompt/dashboard",
-  "version": "0.1.0",
-  "private": true,
-  "engines": {
-    "node": ">=24 <25"
-  },
-  "scripts": {
-    "dev": "pnpm brand:prepare && next dev",
-    "build": "pnpm brand:prepare && next build && esbuild src/worker.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/worker.cjs && esbuild scripts/bootstrap.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/bootstrap.cjs && esbuild scripts/auth-cli.ts --bundle --platform=node --format=cjs --external:pg-native --outfile=dist/auth-cli.cjs",
-    "start": "next start",
-    "typecheck": "next typegen && tsc --noEmit",
-    "storage:prepare": "tsx scripts/bootstrap.ts",
-    "worker": "tsx src/worker.ts",
-    "brand:prepare": "node ../../packages/brand/scripts/prepare-app.mjs"
-  },
-  "dependencies": {
-    "@aws-sdk/client-s3": "3.1155.0",
-    "formidable": "3.5.4",
-    "lucide-react": "1.61.0",
-    "mdast-util-from-markdown": "2.1.0",
-    "next": "16.4.2",
-    "nodemailer": "10.2.1",
-    "pg": "8.23.1",
-    "playwright-core": "1.56.1",
-    "qrcode": "1.5.4",
-    "react": "19.3.1",
-    "react-dom": "19.3.1",
-    "react-markdown": "10.1.0",
-    "remark-gfm": "4.0.1",
-    "sharp": "0.35.5",
-    "zod": "4.6.7",
-    "@endoleap/brand": "workspace:*"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "4.3.3",
-    "@types/formidable": "3.5.1",
-    "@types/node": "24.19.2",
-    "@types/nodemailer": "7.0.4",
-    "@types/pg": "8.23.1",
-    "@types/qrcode": "1.5.6",
-    "@types/react": "19.3.0",
-    "@types/react-dom": "19.3.0",
-    "esbuild": "0.28.2",
-    "tailwindcss": "4.3.3",
-    "tsx": "4.23.15",
-    "typescript": "5.9.3"
-  },
-  "packageManager": "pnpm@11.25.0"
-}
@@ -1,4 +0,0 @@
-/** The approved mark is copied from @endoleap/brand during the remote build. */
-export function Brand({ compact = false }: { compact?: boolean }) {
-  return <span className="endoleap-brand"><img src="/brand/logo-light.svg" className="endoleap-mark endoleap-mark-light" alt="" width={32} height={32}/><img src="/brand/logo-dark.svg" className="endoleap-mark endoleap-mark-dark" alt="" width={32} height={32}/><span className="endoleap-wordmark">啡跃{!compact && <small>Endoleap</small>}</span></span>;
-}
@@ -1,25 +0,0 @@
-type Pose = "idea" | "read" | "make" | "collect" | "dream";
-
-/** Original theme-aware line drawings, independent of the fixed brand mark. */
-export function CreatorSketch({ pose }: { pose: Pose }) {
-  return <svg viewBox="0 0 200 220" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-    <path d="M13 17 185 14l3 176-174 3ZM17 202q42-3 86 0m-85 8 62 1" strokeWidth="1.5" />
-    <path d="M42 188q3-46 31-60l42 1q28 16 42 59" fill="var(--selection)" />
-    <path d="M78 64q-20-3-15-20 5-15 21-11 11-15 29-6 20 7 11 31l-18-10-15 18Z" fill="currentColor" />
-    <path d="M79 63q-11 5-5 17l8 2q1 27 21 29 21-4 21-39l-3-15m-34 52-5 20m24-18 7 18m-17-58-2 13 8 2m-9 13q9 5 17-3m-23-23h1m24-1h1" />
-    {pose === "idea" && <><path d="m117 135 17-38 13-48 11 3-7 53-14 49M68 143l-5 27 37 15" fill="var(--background)" /><path d="m141 70-8-31 26-9 11 29Z" fill="var(--selection)" /><path d="m142 42 14-5m-11 14 13-5m-10 13 12-5M151 22V12m16 14 8-7m-41 12-9-4" /></>}
-    {pose === "read" && <><path d="m49 132 49 16 46-20-4 58-41 15-46-15Z" fill="var(--background)" /><path d="m98 148 1 53m-35-54 23 8m-22 3 20 7m-19 3 16 6m28-16 20-8m-20 19 18-7m-18 17 15-6" /><path d="m50 162 12-5q8 1 5 8l-14 13m89-17-12-4q-9 0-6 7l15 12" fill="var(--background)" /></>}
-    {pose === "make" && <><path d="m99 143 65-7 15 51-68 5Z" fill="var(--background)" /><path d="m101 150-22 3-8 19 32 5m-39-6 16 7 29-2m21-12h13m-28 29H37" /><path d="m151 46 5-14 8 12 15 2-11 9 1 15-13-8-13 5 4-13-10-10Z" fill="var(--selection)" /></>}
-    {pose === "collect" && <><path d="m60 156 15-18 53 7-5 40-62-5Z" fill="var(--background)" /><path d="m76 138 8-11 19 3 7 13m-12 9a12 12 0 1 0 1 24 12 12 0 0 0-1-24m-36 10-11-5-8 8 15 15m64-21 15 9-13 11" /><path d="m143 68 25-7 7 31-25 7Zm7 14 6-6 10 9m-8-14h1" stroke="var(--primary)" /></>}
-    {pose === "dream" && <><path d="m82 136 16 30 26-6 12-36m-18 38 18 11 11-35-7-20q-4-7-8-3l-2 14-6-7m-46 26-9 25 28 14 37-13" fill="var(--background)" /><path d="m142 32 29-10-13 25-4-12-12-3 12 3 17-13m-36 25q-21 4-15 17t25 2" stroke="var(--primary)" /></>}
-  </svg>;
-}
-
-export function IdeaSketch({ kind }: { kind: "collect" | "connect" | "read" | "make" }) {
-  return <svg viewBox="0 0 140 110" fill="none" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-    {kind === "collect" && <><path d="m43 25 49-5 7 64-53 6Z" fill="var(--selection)" /><path d="m54 39 25-2m-24 14 30-3m-28 14 21-2m20-23 18-20 7 7-20 21-9 3ZM34 18l-6-8m19 3-1-10m61 62 8 3m-81 2-10 2" /></>}
-    {kind === "connect" && <><path d="M42 37q27-31 50-1m-48 8q27-17 47-1M45 62q23 28 46 2" /><path d="m18 32 29-3 3 34-31 2Zm72-8 32 4-3 33-30-3ZM52 73l32-1 2 25-32 2Z" fill="var(--selection)" /><path d="m26 43 14-1m-13 9 10-1m62-13 13 2m-13 7 11 1M62 83h13m-12 7h9" /></>}
-    {kind === "read" && <><path d="M20 30q25-8 49 7 24-17 51-10l-3 56q-24-5-48 10-22-13-47-7Z" fill="var(--selection)" /><path d="m69 37 0 56M32 42q13-1 25 5m-23 8 21 5m-21 8 20 4m27-27 24-6m-23 19 21-6m-20 18 18-4m-35-44-2-11m17 10 6-10" /></>}
-    {kind === "make" && <><path d="m24 29 85-3 5 63-86 4ZM31 41h71M45 34h1m-10 0h1m20-1h1m-18 21 21-2 1 26-22 1Zm31 0 27-1m-26 12 20-1m-19 13 24-1" /><path d="m103 14 7-11 4 12 13 2-10 8 2 11-10-6-10 7 2-12-10-7Z" fill="var(--selection)" /></>}
-  </svg>;
-}
@@ -1,7 +0,0 @@
-import { useEffect, useState } from 'react';
-export function ThemeToggle() {
-  const [dark, setDark] = useState(false);
-  const [ready, setReady] = useState(false);
-  useEffect(() => { const sync = () => setDark(document.documentElement.dataset.mode === 'dark'); sync(); setReady(true); window.addEventListener('endoleap-theme', sync); return () => window.removeEventListener('endoleap-theme', sync); }, []);
-  return <button type="button" data-theme-ready={ready} className="endoleap-theme-toggle" aria-label="切换明暗主题" title={dark ? '切换浅色模式' : '切换深色模式'} onClick={() => { const mode = document.documentElement.dataset.mode === 'dark' ? 'light' : 'dark'; const scope = document.documentElement.dataset.theme?.startsWith('canvas-') ? 'canvas' : 'home'; document.documentElement.dataset.mode = mode; document.documentElement.dataset.theme = `${scope}-${mode}`; try { localStorage.setItem('endoleap.theme', mode); } catch {} window.dispatchEvent(new Event('endoleap-theme')); }}><span aria-hidden="true">◐</span></button>;
-}
@@ -1,15 +0,0 @@
-import { useEffect } from 'react';
-import { useRouter } from 'next/router';
-import type { AppProps } from "next/app";
-import "@/styles/globals.css";
-import "@/styles/skill-docs.css";
-import "@/styles/learning-series.css";
-import "@/styles/brand.css";
-import "@/studio/styles/globals.css";
-
-export default function App({ Component, pageProps }: AppProps) {
-  const router = useRouter();
-  useEffect(() => { const scope = /^\/(?:studio\/)?(?:graphic|infinite_canvas|layouts|template-layout)(?:\/|$)/.test(router.pathname) ? 'canvas' : 'home'; document.documentElement.dataset.theme = `${scope}-${document.documentElement.dataset.mode === 'dark' ? 'dark' : 'light'}`; }, [router.pathname]);
-  const studio = /^\/(?:studio(?:\/|$)|graphic(?:\/|$)|infinite_canvas(?:\/|$))/.test(router.pathname);
-  return studio ? <div className="studio-app"><Component {...pageProps} /></div> : <Component {...pageProps} />;
-}
@@ -1,3 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document';
-const initializeTheme = String.raw`(function(){try{var mode=localStorage.getItem('endoleap.theme')==='dark'?'dark':'light';var canvas=/^\/(?:studio\/)?(?:graphic|infinite_canvas|layouts|template-layout)(?:\/|$)/.test(location.pathname);document.documentElement.dataset.mode=mode;document.documentElement.dataset.theme=(canvas?'canvas':'home')+'-'+mode;}catch(e){}})();`;
-export default function Document() { return <Html lang="zh-CN" data-theme="home-light" data-mode="light" suppressHydrationWarning><Head><link rel="icon" href="/favicon.ico?v=endoleap-1.2" sizes="any"/><link rel="icon" type="image/svg+xml" href="/brand/icon-dark.svg?v=endoleap-1.2"/><link rel="apple-touch-icon" href="/apple-touch-icon.png"/><script dangerouslySetInnerHTML={{__html:initializeTheme}}/></Head><body><Main/><NextScript/></body></Html>; }
@@ -1,135 +0,0 @@
-import { Brand } from "@/components/Brand";
-import a from "@/styles/account.module.css";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useEffect, useState, type FormEvent } from "react";
-import {
-  ArrowRight,
-  CheckCircle2,
-  Eye,
-  EyeOff,
-  LogOut,
-  MailCheck,
-} from "lucide-react";
-import GuidanceShell, { useGuidanceAccount } from "@/components/GuidanceShell";
-import s from "@/styles/guidance.module.css";
-type Mode = "login" | "register" | "resend" | "forgot" | "reset" | "verify";
-function localNext(value: string | string[] | undefined) {
-  if (
-    typeof value !== "string" ||
-    !value.startsWith("/") ||
-    value.startsWith("//") ||
-    /[\\\u0000-\u001f]/.test(value)
-  )
-    return "/workspace";
-  try {
-    const url = new URL(value, "https://local.invalid");
-    return url.origin === "https://local.invalid"
-      ? url.pathname + url.search + url.hash
-      : "/workspace";
-  } catch {
-    return "/workspace";
-  }
-}
-export default function AccountPage() {
-  return <GuidanceShell title="登录与注册" standalone><AccountContent /></GuidanceShell>;
-}
-function AccountContent() {
-  const account = useGuidanceAccount(), router = useRouter();
-  const [mode, setMode] = useState<Mode>("login");
-  const [email, setEmail] = useState(""), [password, setPassword] = useState(""), [confirm, setConfirm] = useState("");
-  const [showPassword, setShowPassword] = useState(false), [busy, setBusy] = useState(false);
-  const [token, setToken] = useState("");
-  const [feedback, setFeedback] = useState<{tone: "success" | "error"; text: string} | null>(null);
-  useEffect(() => {
-    const url = new URL(window.location.href);
-    const reset = url.searchParams.get("reset"), verify = url.searchParams.get("verify");
-    if (reset || verify) {
-      setToken(reset || verify || ""); setMode(reset ? "reset" : "verify");
-      url.searchParams.delete("reset"); url.searchParams.delete("verify");
-      window.history.replaceState({}, "", url.pathname + url.search + url.hash);
-    }
-  }, []);
-  function switchMode(value: Mode) { setMode(value); setFeedback(null); setPassword(""); setConfirm(""); setShowPassword(false); }
-  async function action(name: Mode | "logout", body: object = {}) {
-    if (busy) return;
-    setBusy(true); setFeedback(null);
-    try {
-      const response = await fetch("/api/account/" + name, {method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(body)});
-      const data = await response.json();
-      if (!response.ok) throw Error(data.error || "暂时无法完成操作，请重试");
-      if (name === "verify" || name === "reset") { setToken(""); switchMode("login"); }
-      if (name === "login" || name === "logout" || name === "reset") { setPassword(""); setConfirm(""); }
-      setFeedback({tone: "success", text: name === "verify" ? "邮箱已验证，现在可以登录。" : name === "reset" ? "密码已更新，请使用新密码登录。" : name === "login" ? "登录成功，欢迎回到啡跃。" : name === "logout" ? "已退出登录。" : data.message || "若账户符合条件，邮件将发送到你的邮箱。"});
-      if (["verify", "login", "logout", "reset"].includes(name)) await account.refresh();
-      if (name === "login") await router.push(localNext(router.query.next));
-    } catch (error) { setFeedback({tone: "error", text: error instanceof Error ? error.message : "网络异常，请稍后重试"}); }
-    finally { setBusy(false); }
-  }
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (mode === "reset" && password !== confirm) { setFeedback({tone: "error", text: "两次输入的密码不一致。"}); return; }
-    void action(mode, mode === "reset" ? {token, password} : mode === "verify" ? {token} : {email, password});
-  }
-  const user = mode === "reset" || mode === "verify" || mode === "forgot" ? null : account.user;
-  const title = user ? "你的账户" : ({login: "欢迎回来", register: "创建你的账户", resend: "重发验证邮件", forgot: "找回你的账户", reset: "设置新密码", verify: "确认验证邮箱"})[mode];
-  const description = user ? "你的知识与创作，随时继续。" : ({login: "使用邮箱与密码登录，继续你的创作。", register: "用邮箱建立你的知识与创作空间。", resend: "仅适用于尚未验证的账户，输入邮箱和原密码。", forgot: "输入注册邮箱，我们会发送重设密码链接。", reset: "由你设置新密码，原有内容会完整保留。", verify: "确认后，即可使用邮箱和密码登录。"})[mode];
-  const toast = feedback || (account.error ? {tone: "error" as const, text: account.error} : null);
-  return <div className={a.layout}>
-    <section className={a.intro} data-theme="home-dark" aria-label="啡跃创作空间">
-      <Link className={a.brand} href="/" aria-label="啡跃首页"><Brand /></Link>
-      <div className={a.story}>
-        <p className={a.eyebrow}>A SPACE FOR YOUR NEXT IDEA</p>
-        <h1>给想法留白，<br />让灵感有形。</h1>
-        <p className={a.description}>收集一闪而过的灵感，把有用的知识连接起来。下一件作品，从这里开始。</p>
-        <div className={a.art} aria-hidden="true">
-          <div className={a.orbit} />
-          <div className={a.idea}><span>01 / THE IDEA</span><strong>留住清晨<br />的一束光。</strong><i>灵感片段 · 随手记下</i></div>
-          <div className={a.work}><span>02 / IN THE MAKING</span><div className={a.artwork} /><strong>光的形状</strong><i>让一个念头，慢慢成形。</i></div>
-          <span className={a.artCaption}>COLLECT. CONNECT. CREATE.</span>
-        </div>
-      </div>
-      <p className={a.signature}>啡跃 Endoleap <span>为下一次创作，留一个起点。</span></p>
-    </section>
-    <section className={a.form} aria-label="邮箱账户">
-      <div className={a.frame}>
-        <h2 key={title}>{title}</h2><p className={a.formDescription}>{description}</p>
-        {account.loading ? <div className={a.loading} aria-busy="true">正在检查账户状态…</div> : user ? <>
-          <div className={a.accountDetails}><CheckCircle2 size={22} /><strong>{user.email}</strong><span>邮箱已验证</span></div>
-          <Link className={s.primaryButton} href={localNext(router.query.next)}>继续使用啡跃 <ArrowRight size={15} /></Link>
-          <button className={a.secondary} type="button" disabled={busy} onClick={() => void action("logout")}><LogOut size={14} />退出登录</button>
-        </> : <>
-          <div className={a.tabSlot}>
-            {(mode === "login" || mode === "register") && <nav className={a.tabs} aria-label="账户操作" data-active={mode}>
-              <button type="button" aria-pressed={mode === "login"} disabled={busy} onClick={() => switchMode("login")}>登录</button>
-              <button type="button" aria-pressed={mode === "register"} disabled={busy} onClick={() => switchMode("register")}>创建账户</button>
-            </nav>}
-          </div>
-          <form onSubmit={submit}>
-            <fieldset className={a.fieldset} disabled={busy}>
-              <div className={a.fields} key={mode}>
-                {mode !== "reset" && mode !== "verify" && <div className={a.field}>
-                  <label htmlFor="account-email">邮箱地址</label>
-                  <input id="account-email" className={s.input} type="email" name="email" autoComplete="email" placeholder="you@example.com" required maxLength={254} value={email} onChange={event => setEmail(event.target.value)} />
-                </div>}
-                {mode !== "forgot" && mode !== "verify" && <div className={a.field}>
-                  <div className={a.labelRow}><label htmlFor="account-password">{mode === "reset" ? "新密码" : "密码"}</label>{mode === "login" && <button type="button" onClick={() => switchMode("forgot")}>忘记密码？</button>}</div>
-                  <div className={s.passwordField}>
-                    <input id="account-password" className={s.input} type={showPassword ? "text" : "password"} name="password" autoComplete={mode === "register" || mode === "reset" ? "new-password" : "current-password"} placeholder={mode === "register" || mode === "reset" ? "设置至少 12 个字符的密码" : "输入你的密码"} minLength={12} maxLength={256} required value={password} onChange={event => setPassword(event.target.value)} />
-                    <button type="button" aria-label={showPassword ? "隐藏密码" : "显示密码"} onClick={() => setShowPassword(value => !value)}>{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}</button>
-                  </div>
-                </div>}
-                {mode === "reset" && <div className={a.field}><label htmlFor="account-confirm">确认新密码</label><input id="account-confirm" className={s.input} type={showPassword ? "text" : "password"} autoComplete="new-password" required minLength={12} maxLength={256} value={confirm} onChange={event => setConfirm(event.target.value)} /></div>}
-                {mode === "verify" && <div className={a.verifyInfo}><MailCheck size={28} /><p>验证链接有效期为 30 分钟。请确认这是你注册的邮箱。</p></div>}
-              </div>
-              <button className={`${s.primaryButton} ${a.submit}`} type="submit">{busy ? "正在处理…" : ({login: "登录", register: "创建账户", resend: "发送验证邮件", forgot: "发送重设链接", reset: "保存新密码", verify: "确认验证邮箱"})[mode]}{!busy && <ArrowRight size={15} />}</button>
-            </fieldset>
-          </form>
-          <div className={a.secondarySlot}>{mode === "login" || mode === "register" ? <button className={a.secondary} type="button" disabled={busy} onClick={() => switchMode("resend")}>没有收到验证邮件？重新发送</button> : <button className={a.secondary} type="button" disabled={busy} onClick={() => switchMode("login")}>返回登录</button>}</div>
-          <p className={a.footnote}>{mode === "forgot" || mode === "reset" ? "链接仅供本人使用。重设成功后，所有旧会话将退出。" : "首次注册需要验证邮箱；已验证的账户可直接登录。"}</p>
-        </>}
-      </div>
-    </section>
-    {toast && <div className={a.toast} data-tone={toast.tone} role={toast.tone === "error" ? "alert" : "status"}><span aria-hidden="true">{toast.tone === "error" ? "!" : "✓"}</span><p>{toast.text}</p><button type="button" aria-label={!feedback && account.error ? "重新连接" : "关闭提示"} onClick={() => {setFeedback(null); if (account.error) void account.refresh();}}>×</button></div>}
-  </div>;
-}
@@ -1,22 +0,0 @@
-import { ThemeToggle } from "../components/ThemeToggle";
-import { Brand } from "../components/Brand";
-import Head from 'next/head';
-import {ArrowUpRight, Workflow, Layers, ArrowRight} from 'lucide-react';
-import {CreatorSketch, IdeaSketch} from "@/components/LandingSketches";
-import s from '@/styles/landing.module.css';
-export default function Home(){return <main className={s.page}>
-<Head><title>啡跃 Endoleap · 让灵感，有形。</title><meta name="description" content="收藏灵感、连接知识，与熟悉的 Agent 一起，把想法变成作品。探索图形编辑器、无限画布与知识文档。"/></Head>
-<nav className={s.nav} aria-label="主导航"><a className={s.logo} href="/"><Brand/></a><div><a href="#tools">创作工具</a><a href="/documents">知识与教程</a><a href="#workflow">工作方式</a></div><ThemeToggle/><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.peopleStrip}><span className={s.stripNote}>每一种好奇，都有自己的起点。</span>{([
- ['collect','收藏生活的切片'],['read','遇见新的工作方法'],['idea','记下突然出现的灵感'],['dream','给想法一点自由'],['make','做一件属于你的作品']
-] as const).map(([pose,label])=><figure key={pose}><CreatorSketch pose={pose}/><figcaption>{label}</figcaption></figure>)}<span className={s.stripSpark} aria-hidden="true">✳</span></div></section>
-<section className={s.possibilities} id="possibilities" aria-labelledby="possibilities-title"><p className={s.eyebrow}>MAKE ROOM FOR WHAT COMES NEXT</p><h2 id="possibilities-title">给好奇心一点空间，<br/>让下一步<em>自然发生。</em></h2><div className={s.featureGrid}>{([
- ['collect','留住一闪而过','一句念头、一张参考图、一个还没想好的方向。先留下，再慢慢展开。'],
- ['connect','让线索相遇','把笔记、图片和提示词放上画布，用连接看见它们之间的新可能。'],
- ['read','找到有用的方法','阅读可独立使用的知识文档，需要更多背景时，沿链接继续探索。'],
- ['make','把创作继续下去','用熟悉的 coding agent 探索，再亲手调整细节，让想法成为自己的作品。']
-] as const).map(([kind,title,copy])=><article key={kind}><IdeaSketch kind={kind}/><h3>{title}</h3><p>{copy}</p></article>)}</div></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.reading} aria-labelledby="reading-title"><div><p className={s.eyebrow}>GOOD IDEAS DESERVE GOOD COMPANY</p><h2 id="reading-title">不必每一次，<br/>都从空白开始。</h2><p>把有用的工作方法，留给下一次的自己。<br/>一篇文档讲清一件事，需要时再沿着链接走远一点。</p><a href="/documents">去知识空间逛逛 <ArrowUpRight size={16}/></a></div><div className={s.readingArt} aria-hidden="true"><span>读到这里，<br/><em>想到了什么？</em></span><CreatorSketch pose="read"/><small>READ. CONNECT. MAKE.</small><svg viewBox="0 0 440 380"><path d="M35 105q-20-55 35-64m-15 0 17-2-8 17M348 267q46 33 32 68m-14-13 14 15 14-13"/></svg></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}><div className={s.endWall} aria-hidden="true">{(['collect','read','connect','make'] as const).map(kind=><div key={kind}><IdeaSketch kind={kind}/><i/><i/><i/></div>)}</div><div className={s.endContent}><p className={s.eyebrow}>YOUR NEXT IDEA STARTS HERE</p><h2>给下一个念头，<br/><em>留一个起点。</em></h2><p>不用想好全部。带着一点好奇，先开始。</p><a className={s.dark} href="/account?next=/workspace">进入你的工作台 <ArrowRight size={17}/></a><a className={s.endSecondary} href="/documents">或先读一篇有用的文档 ↗</a></div></section><footer className={s.footer}><a className={s.logo} href="/"><Brand/></a><span>给想法留白，给创作空间。</span><a href="/documents">知识与教程 ↗</a></footer></main>}
@@ -1,10 +0,0 @@
-import type {GetStaticPaths,GetStaticProps} from 'next';
-import Head from 'next/head';
-import Link from 'next/link';
-import {LayoutSelection} from '../../../studio/components/LayoutSelection';
-import {tutorialPost} from '../../../studio/content/tool-links';
-import {TemplateTrial} from '../../../studio/components/TemplateTrial';
-import {ideas,type Idea} from '../../../studio/content/ideas';
-export default function IdeaPage({idea}:{idea:Idea}){if(idea.tool==='layout-selection')return <LayoutSelection/>;if(idea.template)return <TemplateTrial idea={idea}/>;return <main className="editor"><Head><title>{idea.title} · 创作站</title><link rel="alternate" type="text/markdown" href={'/studio/api/export/'+idea.slug+'?format=markdown'}/></Head><header><a href={tutorialPost}>← 啡跃使用教程</a><a href={'/studio/api/export/'+idea.slug}>导出内容包 ↓</a><a href={'/studio/api/export/'+idea.slug+'?format=markdown'}>Markdown ↓</a><button onClick={()=>window.print()}>打印 / PDF</button></header><h1>{idea.title}</h1><p>{idea.summary}</p><div className="slides">{idea.slides.map((s,i)=><article className="slide" key={i} style={{background:s.color}}><small>ENDOLEAP / {String(i+1).padStart(2,'0')}</small><h2>{s.heading}</h2><p>{s.body}</p><footer>记录灵感 · 自由表达</footer></article>)}</div></main>}
-export const getStaticPaths:GetStaticPaths=async()=>({paths:ideas.map(i=>({params:{slug:i.slug}})),fallback:false});
-export const getStaticProps:GetStaticProps=async({params})=>{const idea=ideas.find(i=>i.slug===params?.slug);return idea?{props:{idea}}:{notFound:true}};
@@ -1,7 +0,0 @@
-import { ThemeToggle } from "../components/ThemeToggle";
-import { Brand } from "../components/Brand";
-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="/"><Brand/></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><ThemeToggle/><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>}
@@ -1,4 +0,0 @@
-/** The approved mark is copied from @endoleap/brand during the remote build. */
-export function Brand({ compact = false }: { compact?: boolean }) {
-  return <span className="endoleap-brand"><img src="/studio/brand/logo-light.svg" className="endoleap-mark endoleap-mark-light" alt="" width={32} height={32}/><img src="/studio/brand/logo-dark.svg" className="endoleap-mark endoleap-mark-dark" alt="" width={32} height={32}/><span className="endoleap-wordmark">啡跃{!compact && <small>Endoleap</small>}</span></span>;
-}
@@ -1,14 +0,0 @@
-import {referencePreview} from '../lib/layout-images-client';
-import {useState} from 'react';
-import Head from 'next/head';
-import {SourceCover,selections,type CoverValues} from './SourceCover';
-import {tutorialPost} from '../content/tool-links';
-export function LayoutSelection(){
- const [active,setActive]=useState(0),[values,setValues]=useState<CoverValues[]>(selections.map(l=>({fields:Object.fromEntries(Object.entries(l.fields).filter(([,v])=>v!==undefined)) as Record<string,string>,color:'#83918a',accent:'#c3cec5'}))),[guides,setGuides]=useState(false),[status,setStatus]=useState('');
- const layout=selections[active],current=values[active];
- function update(patch:Partial<CoverValues>){setValues(old=>old.map((v,i)=>i===active?{...v,...patch}:v));}
- async function download(format:'svg'|'json'){
-  try{setStatus('正在生成…');const r=await fetch('/studio/api/export/layout-selection?format='+format,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({layoutId:layout.id,...current})});if(!r.ok)throw Error();const url=URL.createObjectURL(await r.blob()),a=document.createElement('a');a.href=url;a.download=layout.id+'.'+format;a.click();setTimeout(()=>URL.revokeObjectURL(url),500);setStatus('已导出当前模板。')}catch{setStatus('导出失败，请重试。')}
- }
- return <main className="template-trial"><Head><title>三种排版 · 啡跃 Endoleap 工具</title></Head><header className="trial-nav"><a href={tutorialPost}>← 啡跃使用教程</a><span>STUDIO / LAYOUT SELECTION</span></header><section className="trial-intro"><div><small>REF-01 / REF-07 / REF-26</small><h1>三个构图，各有位置。</h1><p>切换真实原图对应的模板，分别试文字与配色。图位与装饰按教程构件重建为干净矢量；当前只放占位内容。</p></div></section><div className="trial-workspace"><aside className="trial-controls"><h2>选择与编辑</h2><label>排版<select value={active} onChange={e=>{setActive(Number(e.target.value));setStatus('')}}>{selections.map((l,i)=><option key={l.id} value={i}>{l.id} · {l.name}</option>)}</select></label>{layout.slots.filter(s=>s.kind==='text').map(s=><label key={s.id}>{s.id} · {s.role}<textarea rows={current.fields[s.id]?.includes('\n')?3:1} maxLength={120} value={current.fields[s.id]||''} onChange={e=>update({fields:{...current.fields,[s.id]:e.target.value}})}/></label>)}<div className="trial-colors"><label>主图色<input type="color" value={current.color} onChange={e=>update({color:e.target.value})}/></label><label>副图色<input type="color" value={current.accent} onChange={e=>update({accent:e.target.value})}/></label></div><label className="trial-switch"><input type="checkbox" checked={guides} onChange={e=>setGuides(e.target.checked)}/>显示构件边界</label><div className="trial-actions"><button className="trial-primary" onClick={()=>void download('svg')}>下载当前 SVG</button><button onClick={()=>void download('json')}>下载参数 JSON</button></div><p className="trial-help">每张模板单独保留本页修改，刷新恢复初始值。下载 SVG 为无边界线的正式图；原始低分辨率图层在 JSON 中保留作对照。</p><p role="status">{status}</p></aside><div><div className="selection-preview"><SourceCover layout={layout} values={current} guides={guides}/></div><div className="selection-thumbs">{selections.map((l,i)=><button key={l.id} aria-pressed={active===i} onClick={()=>setActive(i)}><SourceCover layout={l} values={values[i]}/><span>{l.id}</span></button>)}</div><details className="trial-reference"><summary>原图与构件坐标</summary><div className="trial-reference-body"><img src={referencePreview(layout.referenceUrl)} alt={layout.name+'原图'}/><div><a href={layout.tutorialUrl}>阅读这张原图的教程 ↗</a><table><thead><tr><th>ID</th><th>构件</th><th>x,y,w,h</th></tr></thead><tbody>{layout.slots.map(s=><tr key={s.id}><td>{s.id}</td><td>{s.role}</td><td>{s.box.join(', ')}</td></tr>)}</tbody></table></div></div></details></div></div></main>;
-}
@@ -1,7 +0,0 @@
-import { useEffect, useState } from 'react';
-export function ThemeToggle() {
-  const [dark, setDark] = useState(false);
-  const [ready, setReady] = useState(false);
-  useEffect(() => { const sync = () => setDark(document.documentElement.dataset.mode === 'dark'); sync(); setReady(true); window.addEventListener('endoleap-theme', sync); return () => window.removeEventListener('endoleap-theme', sync); }, []);
-  return <button type="button" data-theme-ready={ready} className="endoleap-theme-toggle" aria-label="切换明暗主题" title={dark ? '切换浅色模式' : '切换深色模式'} onClick={() => { const mode = document.documentElement.dataset.mode === 'dark' ? 'light' : 'dark'; const scope = document.documentElement.dataset.theme?.startsWith('canvas-') ? 'canvas' : 'home'; document.documentElement.dataset.mode = mode; document.documentElement.dataset.theme = `${scope}-${mode}`; try { localStorage.setItem('endoleap.theme', mode); } catch {} window.dispatchEvent(new Event('endoleap-theme')); }}>◐<span>{dark ? '浅色' : '深色'}</span></button>;
-}
@@ -1 +0,0 @@
-export * from '../../lib/canvas-document.ts';
@@ -1 +0,0 @@
-export * from '../../lib/layout-parameters.ts';
@@ -1 +0,0 @@
-export * from '../../lib/series.ts';
@@ -1,3 +0,0 @@
-.root{position:static}.panel{position:absolute;left:0;top:calc(100% + 12px);width:min(390px,calc(100vw - 32px));max-height:75dvh;overflow:auto;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--foreground);box-shadow:0 15px 70px var(--shadow);z-index:12;display:grid;gap:14px;font-size:12px}.panel header,.actions,.conflict{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.panel button{font-size:11px!important;padding:7px 10px!important;background:var(--surface)!important;color:inherit!important;border:1px solid var(--border)!important}.panel button:disabled{opacity:.45}.panel textarea{width:100%;height:150px;resize:vertical;background:var(--surface);color:var(--foreground);border:1px solid var(--input);border-radius:8px;padding:10px;font:10px/1.7 monospace}.panel p{margin:0;color:var(--muted-foreground);line-height:1.7}.panel small{color:var(--muted-foreground);font-size:10px}.panel label{display:grid;gap:8px}.panel select{width:100%;background:var(--surface);color:inherit;padding:8px;border-radius:6px}.panel ul{padding:0;margin:0;list-style:none;display:grid;gap:12px}.panel li{display:grid;gap:5px;border-top:1px solid var(--border);padding-top:10px}.panel li button{justify-self:start}.panel a{color:inherit!important;text-decoration:underline!important}
-
-:global(header):has(> .root .panel){z-index:12}
@@ -1,4 +0,0 @@
-.composer{position:fixed;z-index:6;left:50%;bottom:92px;transform:translateX(-50%);width:min(900px,calc(100vw - 40px));height:280px;border:1px solid var(--border);border-radius:22px;padding:20px 24px;background:var(--surface);color:var(--foreground);display:flex;flex-direction:column;box-shadow:0 15px 70px var(--shadow)}.composer[data-expanded=true]{height:min(65dvh,650px)}.composer header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.composer header>span,.composer header>div{display:flex;align-items:center;gap:8px}.composer header button,.composer footer button{background:var(--surface);border-color:var(--border);font-size:11px;padding:7px 10px}.composer textarea{display:block;flex:1;min-height:50px;width:100%;resize:none;padding:17px 0;border:0;background:transparent;color:inherit;font:inherit;line-height:1.8;outline:none}.composer footer{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted-foreground)}.references{display:flex;gap:10px;padding-top:15px;flex-shrink:0;overflow:auto}.reference{width:70px;height:65px;border:1px solid var(--border);border-radius:8px;position:relative;display:grid;place-items:center;flex-shrink:0;overflow:hidden;background:var(--surface)}.reference img{width:100%;height:100%;object-fit:cover}.reference>span{position:absolute;top:3px;left:4px;background:var(--surface);color:var(--foreground);border-radius:50%;padding:1px 4px;font-size:9px}.reference small{position:absolute;bottom:0;width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--surface);font-size:8px;padding:3px}.reference button{position:absolute;top:1px;right:1px;padding:2px!important;background:var(--surface)!important;border:0!important}.picker{position:absolute;bottom:calc(100% + 10px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px;max-height:200px;overflow:auto;display:grid;gap:5px;min-width:220px}.picker button{justify-content:flex-start;background:transparent;border:0}.picker>span{font-size:11px;padding:12px}@media(max-width:600px){.composer{width:calc(100vw - 20px);padding:15px;bottom:80px;height:260px;border-radius:16px}.composer header>span{max-width:95px;overflow:hidden;white-space:nowrap;font-size:10px}.composer header button{padding:5px;font-size:10px}.composer header{gap:4px}.composer header>div{gap:4px}}
-.composer header input{width:200px;max-width:25vw;min-width:0;border:0;background:transparent;color:inherit;font:inherit;outline:none}
-
-.composer footer>div{display:flex;gap:8px;flex-shrink:0}@media(max-width:600px){.composer footer>div{gap:4px}.composer footer button{font-size:10px;padding:6px}.composer footer>span{min-width:0}}
@@ -1,3 +0,0 @@
-.node{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:13px;color:var(--foreground);pointer-events:auto;touch-action:none;cursor:grab;outline:none}.node[data-selected=true]{border-color:var(--selection-border)}.node[data-editing=true]{border:2px solid var(--border);cursor:default}.title{position:absolute;top:-31px;left:0;right:0;display:flex;gap:7px;align-items:center;height:26px;color:var(--muted-foreground);font-size:12px;white-space:nowrap}.title>span{overflow:hidden;text-overflow:ellipsis}.title>button{margin-left:auto;padding:3px!important;background:transparent!important;border:0!important}.content,.image{height:100%;overflow:hidden;border-radius:12px}.content{padding:25px;white-space:pre-wrap;overflow:auto;scrollbar-width:thin}.content p{margin:0;line-height:1.7;pointer-events:none}.image{position:relative;display:grid;place-items:center}.image img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}.empty{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;color:var(--muted-foreground)}.empty button{background:transparent!important;border:0!important;color:var(--muted-foreground)!important;font-size:12px!important}.node>textarea{width:100%;height:100%;border:0;border-radius:12px;background:transparent;color:inherit;outline:none;resize:none;padding:25px;line-height:1.7;touch-action:auto}.format{position:absolute;bottom:calc(100% + 48px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;white-space:nowrap;z-index:3}.format input{width:24px;height:24px;padding:0;border:0;background:transparent}.format select{max-width:100px;background:transparent;color:var(--foreground);border:0;padding:6px}.format button{padding:5px!important;border:0!important;background:transparent!important}.format button[aria-pressed=true]{background:var(--selection)!important}.reference{position:absolute!important;right:-38px;top:calc(50% - 14px);width:28px;height:28px;border-radius:50%!important;border:1px solid var(--border)!important;padding:2px!important;background:var(--surface)!important;color:var(--foreground)!important}.resize{position:absolute!important;right:3px;bottom:3px;padding:3px!important;border:0!important;background:transparent!important;color:var(--muted-foreground)!important;cursor:nwse-resize!important}.upscale{position:absolute;bottom:10px;left:10px;font-size:10px!important;background:var(--surface)!important}.node:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
-.title>input{min-width:0;width:100%;border:0!important;background:transparent!important;padding:0!important;color:inherit;font:inherit;outline:none}.title>button{flex-shrink:0}
-.incoming{right:auto!important;left:-38px}
@@ -1,95 +0,0 @@
-.page { height: 100dvh; overflow: hidden; background: var(--surface); color: var(--foreground); }
-.page > main { height: 100%; min-height: 0; }
-.header { position: absolute; z-index: 2; top: 28px; right: 36px; }
-.header > div { display: flex; align-items: center; gap: 20px; font-size: 13px; color: var(--muted-foreground); }
-.header a:hover { color: var(--foreground-strong); }
-.layout { display: grid; grid-template-columns: 46% minmax(0, 1fr); height: 100%; min-height: 0; }
-.intro { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; padding: 38px clamp(32px, 5vw, 80px) 30px; overflow: hidden; background: var(--background); color: var(--foreground); }
-.intro::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 0% 35%, color-mix(in srgb, var(--el-deep-mocha) 85%, transparent), transparent 60%), radial-gradient(ellipse at 100% 92%, color-mix(in srgb, var(--primary) 45%, transparent), transparent 65%); }
-.brand { align-self: flex-start; }
-.story { margin: auto 0; padding-top: clamp(16px, 4dvh, 40px); }
-.eyebrow { margin: 0 0 20px; font-size: 10px; letter-spacing: .18em; color: var(--muted-foreground); line-height: 1.7; }
-.story h1 { margin: 0 0 22px; font-size: clamp(32px, 3.3vw, 50px); font-weight: 600; line-height: 1.3; letter-spacing: -.035em; color: var(--foreground-strong); }
-.description { margin: 0; max-width: 340px; font-size: 15px; line-height: 1.9; color: var(--foreground); }
-.signature { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 32px 0 0; font-size: 11px; line-height: 1.7; color: var(--muted-foreground); }
-.signature span { opacity: .8; }
-.art { position: relative; height: clamp(180px, 28dvh, 280px); margin: 28px -12px 0; pointer-events: none; }
-.orbit { position: absolute; width: 245px; height: 245px; left: 15%; top: 5%; border: 1px solid color-mix(in srgb, var(--foreground) 18%, transparent); border-radius: 50%; }
-.orbit::after { content: ''; position: absolute; inset: 25px -35px; border: inherit; border-radius: 50%; transform: rotate(-38deg); }
-.idea, .work { position: absolute; display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--foreground) 24%, transparent); border-radius: 14px; box-shadow: 0 20px 50px var(--shadow); }
-.idea { left: 0; top: 42px; width: 48%; min-height: 196px; padding: 22px 18px; transform: rotate(-8deg); background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(16px); }
-.idea span, .work > span { font-size: 8px; letter-spacing: .12em; line-height: 1.6; }
-.idea strong { margin: 24px 0 18px; font-size: clamp(18px, 1.8vw, 26px); font-weight: 500; line-height: 1.5; }
-.idea i, .work i { font-size: 9px; font-style: normal; line-height: 1.7; opacity: .72; }
-.work { right: 0; top: 15px; width: 51%; padding: 18px; transform: rotate(8deg); background: var(--el-cream); color: var(--el-espresso); }
-.artwork { height: 110px; margin: 16px 0 14px; overflow: hidden; border-radius: 100px 100px 8px 8px; background: radial-gradient(ellipse at 75% 20%, var(--el-cream), transparent 60%), linear-gradient(135deg, var(--el-deep-mocha), var(--el-espresso)); }
-.work strong { margin-bottom: 6px; font-size: 19px; font-weight: 500; }
-.artCaption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 8px; letter-spacing: .2em; color: var(--muted-foreground); }
-
-.form { align-self: center; justify-self: center; width: min(400px, calc(100% - 80px)); min-width: 0; padding: 0; }
-.frame { height: 560px; display: flex; flex-direction: column; justify-content: center; }
-.frame h2 { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.3; text-align: center; letter-spacing: -.04em; animation: mode-in 180ms ease-out; }
-.formDescription { height: 42px; flex-shrink: 0; margin: 10px 0 20px; font-size: 14px; line-height: 1.5; text-align: center; color: var(--muted-foreground); }
-.tabSlot { height: 44px; flex-shrink: 0; margin-bottom: 24px; }
-.tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 44px; padding: 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); isolation: isolate; }
-.tabs::before { content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 5px; background: var(--surface); box-shadow: 0 1px 3px var(--shadow); transition: transform 180ms ease; }
-.tabs[data-active='register']::before { transform: translateX(100%); }
-.tabs button { border: 0; background: transparent; font-size: 13px; color: var(--muted-foreground); }
-.tabs button[aria-pressed='true'] { color: var(--foreground-strong); font-weight: 600; }
-.fieldset { margin: 0; padding: 0; min-width: 0; border: 0; }
-.fields { height: 168px; display: flex; flex-direction: column; gap: 16px; animation: mode-in 180ms ease-out; }
-.field { min-width: 0; }
-.field label { display: block; margin-bottom: 7px; font-size: 13px; line-height: 20px; font-weight: 500; }
-.labelRow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
-.labelRow button { font-size: 12px; color: var(--muted-foreground); }
-.labelRow button:hover { color: var(--foreground-strong); }
-.page .form input { width: 100%; height: 44px; min-height: 44px; padding: 0 12px; font-size: 14px; background: var(--surface); border: 1px solid var(--input); border-radius: 8px; box-shadow: 0 1px 2px var(--shadow); }
-.page .form input[name='password'] { padding-right: 44px; }
-.page .submit { width: 100%; min-height: 44px; margin-top: 8px; font-size: 14px; border-radius: 8px; }
-.secondarySlot { min-height: 38px; display: grid; place-items: center; margin-top: 14px; }
-.secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0; font-size: 12px; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 4px; }
-.footnote { height: 60px; flex-shrink: 0; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.7; text-align: center; color: var(--muted-foreground); }
-.verifyInfo, .accountDetails { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 168px; text-align: center; color: var(--muted-foreground); }
-.accountDetails strong { color: var(--foreground-strong); overflow-wrap: anywhere; }
-.accountDetails span, .verifyInfo p { font-size: 13px; line-height: 1.8; }
-.loading { height: 320px; display: grid; place-items: center; font-size: 13px; color: var(--muted-foreground); }
-.toast { position: fixed; z-index: 50; right: 20px; bottom: 20px; width: min(420px, calc(100% - 40px)); display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--foreground); box-shadow: 0 8px 32px var(--shadow); animation: mode-in 180ms ease-out; }
-.toast > span { flex: 0 0 20px; height: 20px; text-align: center; border-radius: 50%; background: var(--success-background); color: var(--success); font-size: 13px; font-weight: 600; }
-.toast[data-tone='error'] > span { color: var(--danger); background: var(--danger-background); }
-.toast p { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
-.toast button { flex: 0 0 24px; min-height: 24px; color: var(--muted-foreground); }
-@keyframes mode-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
-@media (min-width: 1500px) { .story { max-width: 480px; width: 100%; margin-left: auto; margin-right: auto; } }
-@media (max-width: 1000px) { .intro { padding-left: 28px; padding-right: 28px; } .story h1 { font-size: 34px; } .description { font-size: 14px; } .form { width: min(380px, calc(100% - 64px)); } .header { right: 28px; } }
-@media (max-width: 760px) {
- .header { top: 20px; right: 20px; }
- .layout { grid-template-columns: minmax(0, 1fr); }
- .intro { position: absolute; top: 20px; left: 24px; padding: 0; background: transparent; overflow: visible; }
- .intro::before, .story, .signature { display: none; }
- .brand { padding: 5px; border-radius: 8px; background: var(--background); }
- .form { width: min(400px, calc(100% - 48px)); padding-top: 40px; }
- .frame h2 { font-size: 25px; }
-}
-@media (max-height: 760px) {
- .art, .signature { display: none; }
- .intro { padding-top: 24px; padding-bottom: 24px; }
- .formDescription { height: 34px; font-size: 13px; margin: 8px 0 14px; }
- .frame { height: 460px; }
- .frame h2 { font-size: 25px; }
- .tabSlot { margin-bottom: 18px; }
- .fields { height: 158px; gap: 12px; }
- .footnote { display: none; }
- .secondarySlot { margin-top: 10px; }
-}
-@media (max-height: 560px) {
- .header a { display: none; }
- .formDescription { display: none; }
- .frame { height: 340px; }
- .frame h2 { font-size: 22px; margin-bottom: 14px; }
- .tabSlot { height: 36px; margin-bottom: 14px; }
- .tabs { height: 36px; }
- .story h1 { font-size: 28px; }
- .eyebrow { display: none; }
-}
-@media (max-width: 760px) and (max-height: 760px) { .intro { padding: 0; } }
-@media (prefers-reduced-motion: reduce) { .frame h2, .fields, .toast { animation: none; } .tabs::before { transition: none; } }
@@ -1,23 +0,0 @@
-/* Shared chrome uses the canonical package tokens; artwork keeps its own palette. */
-html,body{background:var(--background);color:var(--foreground);color-scheme:inherit}
-body{margin:0}
-.endoleap-brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;line-height:1.15;vertical-align:middle;letter-spacing:normal;font-weight:650}
-.endoleap-brand .endoleap-mark{width:32px;height:32px;object-fit:contain;flex-shrink:0}
-.endoleap-mark-dark{display:none!important}
-[data-theme$="-dark"] .endoleap-mark-light{display:none!important}
-[data-theme$="-dark"] .endoleap-mark-dark{display:block!important}
-.endoleap-wordmark{display:flex!important;flex-direction:column;font-size:17px!important;color:var(--foreground-strong)!important;letter-spacing:.02em!important;margin:0!important;gap:3px}
-.endoleap-wordmark small{display:block;font-size:9px;font-weight:500;letter-spacing:.08em;color:var(--muted-foreground)}
-button.endoleap-theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;color:var(--muted-foreground);border-radius:8px;padding:8px;width:32px;height:32px;font-size:16px;line-height:1.2;flex-shrink:0;cursor:pointer}
-button.endoleap-theme-toggle:hover{background:var(--row-hover)}
-:where(a,button,input,textarea,select):focus-visible{outline:2px solid var(--ring);outline-offset:3px}
-::selection{background:var(--selection);color:var(--foreground)}
-@media(max-width:600px){.endoleap-theme-toggle span{display:inline}.endoleap-brand{gap:5px}.endoleap-brand .endoleap-mark{width:26px;height:26px}.endoleap-wordmark{font-size:14px!important}}
-
-button:disabled{cursor:default}
-input,textarea,select{accent-color:var(--primary)}
-
-.primary-button,.auth-submit{background:var(--primary);color:var(--primary-foreground)}
-.primary-button:hover,.auth-submit:hover{background:var(--primary-hover)}
-/* The legacy library rail collapses on tablets, while its mobile drawer expands. */
-@media(min-width:651px) and (max-width:950px){.sidebar .endoleap-wordmark{display:none!important}}
@@ -1 +0,0 @@
-.page{max-width:850px;margin:0 auto;padding:40px 24px 100px;color:var(--foreground-strong);font-family:system-ui,sans-serif;line-height:1.7}.page nav{margin-bottom:32px}.page a{color:var(--primary)}.page h1{font-size:36px;letter-spacing:-1px}.page label{display:block;margin:18px 0}.page input:not([type=checkbox]),.page textarea,.page select{display:block;width:100%;padding:12px;border:1px solid var(--input);border-radius:8px;background:var(--surface);color:inherit;font:inherit;box-sizing:border-box}.page button{padding:10px 18px;background:var(--primary);color:var(--primary-foreground);border:0;border-radius:7px;cursor:pointer}.page article{border-top:1px solid var(--border);padding:22px 0}.page pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--selection);padding:18px}.body{white-space:pre-wrap}.page fieldset{border:1px solid var(--border);border-radius:8px;margin:14px 0}
@@ -1,15 +0,0 @@
-.page{background:var(--background);color:var(--foreground-strong);font-family:Arial,'PingFang SC',sans-serif;overflow:clip}.page *{box-sizing:border-box}.page a{text-decoration:none;color:inherit}.page a:focus-visible{outline:2px solid var(--ring);outline-offset:5px}.page em{font-family:Georgia,'STSong','Songti SC',serif;font-weight:400}
-.nav{max-width:1320px;margin:auto;min-height:92px;display:flex;align-items:center;gap:28px;padding:20px 38px;border-bottom:1px solid var(--border)}.logo{display:inline-flex;flex-shrink:0}.nav>div{display:flex;gap:30px;flex:1;margin-left:24px;font-size:13px}.nav>a:not(.logo){font-size:13px}.dark{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:var(--primary);color:var(--primary-foreground)!important;border-radius:7px;padding:15px 22px;font-size:14px;transition:background 160ms ease}.dark:hover{background:var(--primary-hover)}
-.hero{text-align:center;padding:82px 32px 0;max-width:1320px;margin:auto}.eyebrow{font-size:10px;letter-spacing:2.2px;line-height:1.7;color:var(--muted-foreground);font-weight:500}.hero h1{font-size:clamp(36px,4.6vw,64px);line-height:1.3;letter-spacing:-.055em;font-weight:500;margin:28px 0}.hero h1>span{color:var(--primary)}.intro{font-size:16px;line-height:1.95;color:var(--muted-foreground)}.actions{display:flex;align-items:center;justify-content:center;gap:28px;margin:30px 0 48px;font-size:13px}
-.peopleStrip{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;min-height:370px;padding:26px 12px 25px;text-align:left}.peopleStrip figure{margin:0;min-width:0}.peopleStrip figure:nth-of-type(1){transform:rotate(-3deg);padding-top:5px}.peopleStrip figure:nth-of-type(2){transform:rotate(2deg);padding-top:72px}.peopleStrip figure:nth-of-type(3){transform:rotate(-2deg);padding-top:20px}.peopleStrip figure:nth-of-type(4){transform:rotate(3deg);padding-top:60px}.peopleStrip figure:nth-of-type(5){transform:rotate(-1deg);padding-top:1px}.peopleStrip svg{width:100%;height:auto;display:block}.peopleStrip figcaption{font-size:10px;line-height:1.6;color:var(--muted-foreground);padding:12px 10px}.stripNote{position:absolute;right:30px;top:-12px;transform:rotate(4deg);font-size:11px;color:var(--muted-foreground)}.stripSpark{position:absolute;left:37%;top:8px;font-size:32px;font-weight:400;color:var(--primary);transform:rotate(15deg)}
-.page h2{font-size:clamp(30px,3.5vw,46px);line-height:1.35;letter-spacing:-.045em;font-weight:500;margin:20px 0 30px}.possibilities{max-width:1160px;padding:100px 32px 50px;margin:auto;text-align:center;scroll-margin-top:30px}.featureGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px;margin-top:65px;text-align:left}.featureGrid svg{width:125px;height:100px;margin:0 0 20px -10px}.featureGrid h3{font-size:18px;font-weight:500;margin:0 0 13px;letter-spacing:-.025em}.featureGrid p{margin:0;font-size:13px;line-height:1.9;color:var(--muted-foreground)}
-.tools{max-width:1160px;padding:65px 32px 85px;margin:auto;scroll-margin-top:30px}.toolGrid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.toolGrid>a{min-width:0;border-top:1px solid var(--border);padding-top:25px}.toolGrid>a>svg{width:20px;vertical-align:middle;color:var(--muted-foreground)}.toolGrid>a>span{font-size:9px;letter-spacing:2px;margin-left:12px;color:var(--muted-foreground)}.toolGrid h3{font-size:28px;letter-spacing:-.04em;margin:25px 0 14px;font-weight:500}.toolGrid p{font-size:13px;line-height:1.9;color:var(--muted-foreground);max-width:370px}.toolGrid strong{display:flex;justify-content:space-between;font-weight:400;font-size:12px;margin-top:22px;padding-bottom:10px}.toolGrid>a:hover strong{text-decoration:underline;text-underline-offset:5px}
-.poster,.miniCanvas{height:250px;margin-top:28px;overflow:hidden;position:relative;border-radius:3px}.poster{background:var(--selection);color:var(--foreground-strong)}.poster>span{display:block;font-size:56px;letter-spacing:-3px;font-weight:700;line-height:1;padding:28px;position:relative;z-index:1}.poster i{font-family:Georgia,serif;font-weight:400}.poster>b{position:absolute;right:8px;top:25px;font-size:210px;line-height:1;font-weight:400;color:var(--primary);opacity:.4;transform:rotate(15deg)}.miniCanvas{display:flex;align-items:center;justify-content:center;gap:10px;background:radial-gradient(var(--grid) .7px,transparent .7px) 0 0/15px 15px,var(--surface)}.miniCanvas b{font-size:12px;font-weight:400;padding:25px 14px;border:1px solid var(--selection-border);background:var(--background);border-radius:4px;box-shadow:3px 4px 0 var(--selection)}.miniCanvas b:first-child{transform:translateY(-25px) rotate(-4deg)}.miniCanvas b:last-child{transform:translateY(25px) rotate(4deg)}.miniCanvas i{color:var(--muted-foreground)}
-.reading{max-width:1096px;margin:35px auto 80px;background:var(--selection);display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:54px 65px;align-items:center}.reading p:not(.eyebrow){font-size:13px;line-height:1.9;color:var(--muted-foreground)}.reading a{display:inline-flex;align-items:center;gap:10px;font-size:12px;margin-top:18px}.readingArt{position:relative;min-width:0;height:320px}.readingArt>svg:first-of-type{position:absolute;height:330px;width:300px;bottom:-78px;right:-15px;transform:rotate(5deg)}.readingArt>svg:last-child{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--foreground);stroke-width:2;pointer-events:none}.readingArt>span{display:block;position:absolute;top:-26px;left:30px;border:1px solid var(--foreground);background:var(--background);padding:20px 28px;font-size:16px;line-height:1.7;transform:rotate(-7deg);z-index:1}.readingArt>small{position:absolute;right:-12px;bottom:-57px;background:var(--background);border:1px solid var(--foreground);padding:12px 15px;font-size:8px;letter-spacing:1.5px;transform:rotate(6deg)}
-.workflow{max-width:1160px;margin:20px auto;padding:75px 32px 95px;display:grid;grid-template-columns:1fr 1fr;gap:100px;scroll-margin-top:30px}.workflow p{font-size:13px;line-height:1.9;color:var(--muted-foreground)}.workflow a{display:inline-flex;gap:10px;font-size:12px;margin-top:20px}.workflow ol{list-style:none;padding:0}.workflow li{display:flex;gap:25px;border-bottom:1px solid var(--border);padding:25px 0}.workflow li>b{font-family:Georgia,serif;font-size:22px;font-style:italic;font-weight:400;color:var(--muted-foreground);padding-top:2px}.workflow h3{font-size:18px;font-weight:500;margin:0}
-.end{position:relative;isolation:isolate;max-width:1240px;margin:0 auto 40px;text-align:center;min-height:480px;padding:100px 25px 95px}.endContent{position:relative;z-index:1}.endContent>p:not(.eyebrow){font-size:13px;color:var(--muted-foreground);line-height:1.8;margin-bottom:26px}.endSecondary{display:block;width:fit-content;margin:20px auto 0;font-size:11px;color:var(--muted-foreground)!important}.endWall{position:absolute;inset:20px 32px;display:grid;grid-template-columns:160px 160px;grid-template-rows:1fr 1fr;justify-content:space-between;gap:20px;opacity:.17;pointer-events:none;mask-image:linear-gradient(90deg,#000,transparent 40%,transparent 60%,#000)}.endWall>div{padding:10px;transform:rotate(-5deg)}.endWall>div:nth-child(even){transform:rotate(5deg)}.endWall svg{width:100%;height:110px}.endWall i{display:block;border-bottom:1px solid var(--foreground);margin:8px 0;width:90%}.endWall i:last-child{width:60%}
-.footer{max-width:1240px;display:flex;justify-content:space-between;gap:25px;align-items:center;margin:auto;padding:35px 32px;border-top:1px solid var(--border);font-size:11px;color:var(--muted-foreground)}
-@media(max-width:1000px){.nav{gap:20px;padding-left:24px;padding-right:24px}.nav>div{margin-left:8px;gap:20px}.peopleStrip{gap:12px;min-height:310px}.featureGrid{gap:28px}.reading{margin-left:32px;margin-right:32px;padding:40px}.workflow{gap:60px}}
-@media(max-width:760px){.nav{padding:16px 20px;min-height:72px;gap:14px}.nav>div{display:none}.nav .logo{flex:1}.nav .dark{padding:10px 12px}.hero{padding:48px 20px 0}.hero h1{font-size:clamp(29px,6vw,44px);letter-spacing:-.055em}.intro{font-size:13px}.actions{gap:18px;flex-wrap:wrap;margin-bottom:36px}.actions>a:not(.dark){font-size:11px}.peopleStrip{grid-template-columns:repeat(3,minmax(0,1fr));min-height:250px;gap:9px;padding:20px 0 10px}.peopleStrip figure:nth-of-type(2){padding-top:42px}.peopleStrip figure:nth-of-type(3){padding-top:8px}.peopleStrip figure:nth-of-type(4),.peopleStrip figure:nth-of-type(5){display:none}.peopleStrip figcaption{font-size:9px;padding:8px 3px}.stripNote{top:-7px;right:5px;font-size:9px}.stripSpark{left:44%;top:5px;font-size:22px}.possibilities{padding:50px 24px 25px}.page h2{font-size:30px}.featureGrid{grid-template-columns:1fr 1fr;gap:32px 25px;margin-top:38px}.featureGrid svg{width:105px;height:82px;margin-bottom:12px}.featureGrid h3{font-size:16px}.featureGrid p{font-size:12px}.tools{padding:45px 24px 50px}.toolGrid{grid-template-columns:1fr;gap:34px}.poster,.miniCanvas{height:260px}.reading{grid-template-columns:1fr;gap:20px;padding:32px 26px 44px;margin:30px 24px 55px}.readingArt{height:250px;margin-top:35px}.readingArt>svg:first-of-type{width:230px;height:260px;bottom:-50px;right:-5px}.readingArt>span{font-size:13px;padding:15px 20px;left:0}.readingArt>small{bottom:-45px;right:-7px;font-size:7px}.workflow{grid-template-columns:1fr;gap:15px;padding:40px 24px 50px}.workflow ol{margin-top:0}.end{min-height:410px;padding:70px 24px;margin-bottom:15px}.endWall{inset:20px 8px;grid-template-columns:100px 100px}.footer{padding:26px 24px;flex-wrap:wrap;gap:24px}.footer>span{display:none}}
-@media(max-width:380px){.nav{gap:10px;padding-left:16px;padding-right:16px}.nav .dark{gap:6px;font-size:11px}.hero{padding-left:16px;padding-right:16px}.hero h1{font-size:27px}.featureGrid{gap:26px 20px}.miniCanvas{gap:5px}.miniCanvas b{padding:20px 9px;font-size:10px}}
-@media(prefers-reduced-motion:reduce){.dark{transition:none}}
@@ -1,3 +0,0 @@
-.skills-masonry{columns:4 230px;column-gap:24px}.skill-pin{display:block;break-inside:avoid;margin:0 0 28px}.skill-pin-cover{background:var(--selection)!important;aspect-ratio:4/5;display:grid;place-items:center;max-height:440px}.skill-pin-cover img{width:100%;height:100%;object-fit:contain!important;padding:24px}.docs-top{display:flex;justify-content:space-between;font-size:13px;color:var(--muted-foreground);gap:15px;margin-bottom:28px}.docs-top button{display:flex;align-items:center;gap:8px}.docs-layout{max-width:1200px;margin:auto;display:grid;gap:35px;grid-template-columns:minmax(0,800px);justify-content:center}.docs-layout.with-sources{grid-template-columns:minmax(0,1fr) 340px}.docs-body{min-width:0;padding:18px 12px 70px}.docs-eyebrow{font-size:11px;color:var(--muted-foreground);letter-spacing:1.5px}.docs-body h1{font-size:38px;font-weight:700;margin:18px 0 24px;letter-spacing:-1px}.docs-body h2{font-size:23px;margin:40px 0 20px;font-weight:650}.docs-body>p{font-size:15px;color:var(--foreground);line-height:2;margin:22px 0}.docs-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px}.docs-actions button{display:flex;align-items:center;gap:8px;background:var(--surface);color:var(--foreground);padding:12px 16px;border-radius:24px}.docs-actions a{color:var(--muted-foreground)}.docs-body>.docs-hint{font-size:12px;color:var(--muted-foreground)}.docs-body pre,.docs-resource-preview pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);padding:22px;border-radius:15px;font-size:12px;line-height:1.9;color:var(--foreground)}.docs-inline-links{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.docs-inline-links a{display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:20px;padding:9px 12px;font-size:12px;color:var(--foreground)}.docs-sources{position:sticky;top:105px;align-self:start;max-height:calc(100vh - 125px);overflow:auto;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 8px 35px var(--shadow);padding:20px}.docs-sources>header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;border-bottom:1px solid var(--border);padding-bottom:18px}.docs-sources header b{font-size:16px}.docs-sources header small{display:block;font-size:11px;color:var(--muted-foreground);margin-top:7px}.docs-sources h3{font-size:12px;color:var(--muted-foreground);margin:21px 0 10px}.docs-sources section>button{display:flex;text-align:left;align-items:flex-start;gap:9px;width:100%;padding:12px 8px;border-radius:10px}.docs-sources section>button.selected,.docs-sources section>button:hover{background:var(--selection)}.docs-sources section>button>span{font-size:9px;border:1px solid var(--border);padding:3px 4px;border-radius:5px;color:var(--muted-foreground);flex-shrink:0}.docs-sources section>button>div{font-size:12px;color:var(--foreground);min-width:0}.docs-sources section small{display:block;font-size:10px;overflow-wrap:anywhere;color:var(--muted-foreground);margin-top:5px}.docs-resource-preview{border-top:1px solid var(--border);margin-top:20px}.docs-resource-preview img{width:100%;max-height:350px;object-fit:contain;background:repeating-conic-gradient(var(--surface) 0 25%,var(--surface) 0 50%) 0/16px 16px}.docs-resource-preview pre{font-size:10px;max-height:330px;overflow:auto;padding:12px}.docs-resource-preview p,.docs-resource-preview code{font-size:11px;line-height:1.8;overflow-wrap:anywhere}.docs-resource-actions{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--foreground);margin:18px 0}.docs-body a:focus-visible,.docs-sources button:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
-@media(max-width:1050px){.docs-layout.with-sources{grid-template-columns:minmax(0,1fr) 285px;gap:18px}}@media(max-width:760px){.docs-layout.with-sources{display:block}.docs-sources{position:fixed;right:12px;left:12px;top:95px;bottom:18px;max-height:none;z-index:45;box-shadow:0 0 0 100vmax var(--shadow)}.docs-body h1{font-size:30px}.docs-body{padding:10px 0 40px}.docs-body>p{font-size:14px}.skills-masonry{columns:2;column-gap:15px}.skill-pin-cover img{padding:12px}.snapshot-reader{padding:14px 8px}.snapshot-reader>header{align-items:flex-start;flex-direction:column}.snapshot-reader nav{gap:10px}.snapshot-reader nav a{font-size:11px}}
-.guidance-directory{border-top:1px solid var(--border);margin-top:24px}.guidance-directory>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--border)}.guidance-directory>div>a:first-child{font-size:15px;color:var(--foreground)}.guidance-directory small,.guidance-directory>div>a:last-child{font-size:12px;color:var(--muted-foreground)}@media(max-width:760px){.guidance-directory>div{grid-template-columns:minmax(0,1fr) auto;gap:8px}.guidance-directory small{grid-column:1;grid-row:2}.guidance-directory>div>a:last-child{grid-column:2;grid-row:1/3}}
@@ -1 +0,0 @@
-.app{display:flex;min-height:100dvh;background:var(--background);color:var(--foreground-strong);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 var(--border);background:var(--selection);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:var(--muted-foreground)}.app aside>span{font-size:10px;color:var(--muted-foreground);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:var(--selection)}.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:var(--muted-foreground);font-size:10px;letter-spacing:1px}.kicker{font-size:10px;letter-spacing:2px;color:var(--muted-foreground);margin-top:65px}.app h1{font-size:34px;font-weight:500;letter-spacing:-1px;margin:18px 0}.sub{font-size:13px;color:var(--muted-foreground)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}.grid>a{background:var(--surface);border:1px solid var(--border);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:var(--muted-foreground)}.grid>a>svg{vertical-align:middle;width:20px;color:var(--muted-foreground)}.grid h2{font-size:23px;font-weight:500;margin:24px 0 12px}.grid p{font-size:12px;color:var(--muted-foreground);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(var(--selection) 1px,transparent 1px) 0 0/18px 18px,var(--selection);color:var(--muted-foreground)}.canvas span{background:var(--surface);border:1px solid var(--selection-border);padding:20px 13px;font-size:12px;border-radius:6px;color:var(--foreground)}.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 var(--selection-border);border-radius:10px;padding:23px;margin-top:28px}.agent>svg{color:var(--muted-foreground)}.agent h3{font-size:14px;margin:0 0 8px}.agent p{font-size:11px;color:var(--muted-foreground);margin:0;line-height:1.8}.agent a{margin-left:auto;font-size:12px;white-space:nowrap}.hint{font-size:10px;color:var(--muted-foreground);margin-top:25px}.app a:focus-visible{outline:2px solid var(--ring);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 var(--border)}.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}}
@@ -0,0 +1,8 @@
+FROM python:3.12-slim
+RUN apt-get update && apt-get install -y --no-install-recommends ffmpeg fonts-noto-cjk && rm -rf /var/lib/apt/lists/*
+WORKDIR /app
+COPY apps/python/ .
+RUN pip install --no-cache-dir . && python -m unittest discover -s tests -v
+RUN useradd --create-home exporter
+USER exporter
+ENTRYPOINT ["prompt-export"]
@@ -0,0 +1,12 @@
+[build-system]
+requires = ["setuptools==75.8.0"]
+build-backend = "setuptools.build_meta"
+[project]
+name = "prompt-tools"
+version = "0.1.0"
+requires-python = ">=3.12"
+dependencies = ["Pillow==11.1.0"]
+[project.scripts]
+prompt-export = "prompt_tools.export:main"
+[tool.setuptools.packages.find]
+where = ["src"]
@@ -0,0 +1,70 @@
+"""Render a Studio JSON bundle into PNG slides and optionally MP4."""
+import argparse
+import json
+import subprocess
+from pathlib import Path
+from PIL import Image, ImageDraw, ImageFont
+
+
+def validate(bundle):
+    if bundle.get("version") != 1 or not isinstance(bundle.get("slides"), list) or not bundle["slides"]:
+        raise ValueError("Expected a version 1 Studio bundle with slides")
+    for slide in bundle["slides"]:
+        if not all(isinstance(slide.get(k), str) for k in ("heading", "body", "color")):
+            raise ValueError("Invalid slide")
+    return bundle["slides"]
+
+
+def wrap(draw, text, font, width):
+    lines = []
+    for paragraph in text.split("\n"):
+        line = ""
+        for char in paragraph:
+            if line and draw.textlength(line + char, font=font) > width:
+                lines.append(line)
+                line = ""
+            line += char
+        lines.append(line)
+    return lines
+
+
+def render(bundle, output, font_path):
+    slides = validate(bundle)
+    output.mkdir(parents=True, exist_ok=True)
+    heading = ImageFont.truetype(str(font_path), 76)
+    body = ImageFont.truetype(str(font_path), 38)
+    for index, slide in enumerate(slides, 1):
+        image = Image.new("RGB", (1080, 1440), slide["color"])
+        draw = ImageDraw.Draw(image)
+        draw.text((80, 80), f"PROMPT / {index:02}", font=body, fill="#353535")
+        y = 330
+        for text, font, gap in [(slide["heading"], heading, 108), (slide["body"], body, 65)]:
+            for line in wrap(draw, text, font, 920):
+                if y + gap > 1360:
+                    raise ValueError(f"Slide {index} overflows; split the text into more slides")
+                draw.text((80, y), line, font=font, fill="#242424")
+                y += gap
+            y += 70
+        image.save(output / f"slide-{index:03}.png")
+
+
+def main():
+    parser = argparse.ArgumentParser(description=__doc__)
+    parser.add_argument("bundle", type=Path)
+    parser.add_argument("--output", type=Path, required=True)
+    parser.add_argument("--font", type=Path, required=True, help="CJK font TTF/OTF/TTC")
+    parser.add_argument("--video", action="store_true")
+    args = parser.parse_args()
+    bundle = json.loads(args.bundle.read_text())
+    render(bundle, args.output, args.font)
+    if args.video:
+        # Use an explicit temporary input sequence so old PNGs cannot leak into a video.
+        import tempfile
+        import shutil
+        with tempfile.TemporaryDirectory() as staging:
+            for index in range(1, len(bundle["slides"]) + 1):
+                shutil.copy(args.output / f"slide-{index:03}.png", Path(staging) / f"slide-{index:03}.png")
+            subprocess.run(["ffmpeg", "-y", "-framerate", "1/4", "-i", str(Path(staging) / "slide-%03d.png"), "-vf", "fps=30,format=yuv420p", "-c:v", "libx264", "-movflags", "+faststart", str(args.output / "video.mp4")], check=True)
+
+if __name__ == "__main__":
+    main()
@@ -0,0 +1,13 @@
+import unittest
+from prompt_tools.export import validate, wrap
+class ExportTests(unittest.TestCase):
+    def test_bad_bundle(self):
+        for bundle in [{}, {"version": 1, "slides": []}, {"version": 1, "slides": [{}]}]:
+            with self.assertRaises(ValueError): validate(bundle)
+    def test_wrap_preserves_content(self):
+        class Draw:
+            def textlength(self, text, font): return len(text)
+        self.assertEqual(wrap(Draw(), "中文内容测试", None, 3), ["中文内", "容测试"])
+    def test_valid_bundle(self):
+        slides = [{"heading": "标题", "body": "正文", "color": "#fff"}]
+        self.assertEqual(validate({"version": 1, "slides": slides}), slides)
@@ -0,0 +1,23 @@
+FROM node:24-bookworm-slim AS build
+WORKDIR /app
+RUN corepack enable && corepack prepare pnpm@11.25.0 --activate
+COPY apps/studio/pnpm-lock.yaml ./
+COPY pnpm-workspace.yaml /tmp/monorepo-policy.yaml
+RUN node -e "const fs=require('fs');const text=fs.readFileSync('/tmp/monorepo-policy.yaml','utf8');fs.writeFileSync('pnpm-workspace.yaml', text.slice(text.indexOf('allowBuilds:')));"
+RUN pnpm fetch --frozen-lockfile --fetch-timeout=300000 --network-concurrency=8
+COPY apps/studio/package.json ./
+RUN pnpm install --offline --frozen-lockfile
+COPY apps/studio/ .
+# Compare the two public parameter validators inside the isolated CI build.
+COPY apps/waterfall-wiki/src/lib/layout-parameters.ts /waterfall-wiki/src/lib/layout-parameters.ts
+COPY apps/waterfall-wiki/src/lib/series.ts /waterfall-wiki/src/lib/series.ts
+COPY apps/waterfall-wiki/src/lib/canvas-document.ts /waterfall-wiki/src/lib/canvas-document.ts
+RUN pnpm typecheck && pnpm test && pnpm build && pnpm test:smoke
+FROM node:24-bookworm-slim
+WORKDIR /app
+ENV NODE_ENV=production HOSTNAME=0.0.0.0 PORT=3000
+COPY --from=build --chown=node:node /app/.next/standalone/ ./
+COPY --from=build --chown=node:node /app/.next/static/ ./.next/static/
+USER node
+EXPOSE 3000
+CMD ["node", "server.js"]
@@ -0,0 +1,163 @@
+{
+  "schemaVersion": 2,
+  "name": "把秋天装进一页 · 银杏观察手记",
+  "document": {
+    "version": 1,
+    "brief": {
+      "topic": "银杏与秋日观察手记",
+      "audience": "喜欢日常摄影与视觉手帐的小红书读者",
+      "intent": "以封面、观察方法和行动结尾组成三页可发布图文",
+      "designIntent": "奶油纸底、森林墨色、银杏金点缀；宋体大标题与克制的无衬线正文；所有页面保留相同页边距和节奏",
+      "imageStrategy": "生成一幅原创银杏静物插画作为系列母图；每页复用素材，保留裁切配置，不把正文烘焙进图片"
+    },
+    "style": {
+      "version": "autumn-journal/1",
+      "palette": {
+        "paper": "#F3EFE5",
+        "ink": "#253C32",
+        "muted": "#718074",
+        "accent": "#C3A050"
+      },
+      "typography": {
+        "title": {
+          "fontFamily": "serif",
+          "fontSize": 8.4,
+          "fontWeight": 600,
+          "lineHeight": 1.15,
+          "letterSpacing": 0
+        },
+        "body": {
+          "fontFamily": "sans",
+          "fontSize": 3.1,
+          "fontWeight": 400,
+          "lineHeight": 1.65,
+          "letterSpacing": 0
+        },
+        "caption": {
+          "fontFamily": "sans",
+          "fontSize": 1.7,
+          "fontWeight": 500,
+          "lineHeight": 1.2,
+          "letterSpacing": 0
+        }
+      },
+      "spacing": {
+        "margin": 10,
+        "gap": 4
+      }
+    },
+    "sources": [],
+    "pages": [
+      {
+        "key": "cover",
+        "role": "cover",
+        "layoutId": "standard-01",
+        "intent": "用银杏静物与两行大标题建立主题",
+        "bindings": {
+          "T01": "title",
+          "T02": "body",
+          "T03": "caption"
+        },
+        "parameters": {
+          "texts": {
+            "T01": {
+              "value": "把秋天\n装进一页"
+            },
+            "T02": {
+              "value": "不必走很远。\n一片银杏，就是今天的风景。"
+            },
+            "T03": {
+              "value": "SEASONAL NOTES / 01"
+            }
+          },
+          "images": {
+            "I01": {
+              "fit": "cover",
+              "cropX": 50,
+              "cropY": 50,
+              "zoom": 1
+            }
+          },
+          "decorations": {}
+        }
+      },
+      {
+        "key": "observe",
+        "role": "body",
+        "layoutId": "standard-01",
+        "intent": "用三个观察动作提供可实践的方法",
+        "bindings": {
+          "T01": "title",
+          "T02": "body",
+          "T03": "caption"
+        },
+        "parameters": {
+          "texts": {
+            "T01": {
+              "value": "先看见\n再记录"
+            },
+            "T02": {
+              "value": "看叶脉，看光落下的方向。\n留住一片金黄，也留出一半空白。\n把感受写成短句，画面就有了呼吸。"
+            },
+            "T03": {
+              "value": "FIELD NOTES / 02"
+            }
+          },
+          "images": {
+            "I01": {
+              "fit": "cover",
+              "cropX": 65,
+              "cropY": 40,
+              "zoom": 1.25
+            }
+          },
+          "decorations": {}
+        }
+      },
+      {
+        "key": "ending",
+        "role": "ending",
+        "layoutId": "standard-01",
+        "intent": "以轻量行动和提问收尾",
+        "bindings": {
+          "T01": "title",
+          "T02": "body",
+          "T03": "caption"
+        },
+        "parameters": {
+          "texts": {
+            "T01": {
+              "value": "留一点白\n给下一次",
+              "align": "middle"
+            },
+            "T02": {
+              "value": "今天，捡起一片叶子。\n用三个词记录它的颜色、纹理与心情。\n你的秋天，会从哪一页开始？",
+              "align": "middle"
+            },
+            "T03": {
+              "value": "YOUR TURN / 03"
+            }
+          },
+          "images": {
+            "I01": {
+              "fit": "cover",
+              "cropX": 65,
+              "cropY": 50,
+              "zoom": 1
+            }
+          },
+          "decorations": {},
+          "layers": {
+            "I01": {
+              "x": 40,
+              "y": 55,
+              "width": 40,
+              "height": 40,
+              "radius": 20
+            }
+          }
+        }
+      }
+    ]
+  }
+}
@@ -0,0 +1,3 @@
+import type { NextConfig } from "next";
+const config: NextConfig = { basePath: "/studio", output: "standalone", outputFileTracingRoot: process.cwd(), poweredByHeader: false };
+export default config;
@@ -0,0 +1,27 @@
+{
+  "name": "@prompt/studio",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start",
+    "typecheck": "next typegen && tsc --noEmit",
+    "test": "node --test tests/*.test.mjs",
+    "test:smoke": "node scripts/smoke.mjs"
+  },
+  "dependencies": {
+    "next": "16.4.2",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "lucide-react": "1.61.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "4.3.3",
+    "@types/node": "24.19.2",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "tailwindcss": "4.3.3",
+    "typescript": "5.9.3"
+  },
+  "packageManager": "pnpm@11.25.0"
+}
@@ -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,110 @@
+// Isolated browser context against the designated deployed server only.
+const {chromium}=require('playwright-core');
+const assert=require('node:assert/strict');
+const fs=require('node:fs/promises');
+(async()=>{
+ const base=process.env.BASE_URL||'http://8.211.154.134:18131';
+ assert.equal(base,'http://8.211.154.134:18131');
+ const browser=await chromium.launch(process.env.CHROMIUM_PATH?{executablePath:process.env.CHROMIUM_PATH,headless:true,args:['--no-sandbox','--disable-dev-shm-usage']}:{channel:'chrome',headless:true});
+ let page;
+ try{
+  const context=await browser.newContext({viewport:{width:1600,height:1100},storageState:process.env.STORAGE_STATE||undefined});
+  page=await context.newPage();const errors=[];let choosers=0;
+  page.on('pageerror',e=>errors.push(e.message));page.on('filechooser',()=>choosers++);
+  const snapshot=()=>page.evaluate(()=>JSON.parse(localStorage.getItem('studio.infinite-canvas.v1')));
+  const node=id=>page.locator(`[data-node-id="${id}"]`);
+  const content=id=>node(id).locator('[data-node-content]');
+  const waitField=(id,key,value)=>page.waitForFunction(({id,key,value})=>JSON.parse(localStorage.getItem('studio.infinite-canvas.v1')).cards.find(n=>n.id===id)?.[key]===value,{id,key,value});
+  const composer=page.getByRole('region',{name:'节点编辑器'});
+  const capture=async name=>{if(process.env.SCREENSHOT_DIR){await fs.mkdir(process.env.SCREENSHOT_DIR,{recursive:true});await page.screenshot({path:process.env.SCREENSHOT_DIR+'/'+name+'.png'})}};
+  async function unobstructed(id){const box=await node(id).boundingBox();assert.ok(box);for(const card of (await snapshot()).cards.filter(n=>n.id!==id)){const other=await node(card.id).boundingBox();assert.ok(other);assert.equal(box.x<other.x+other.width&&box.x+box.width>other.x&&box.y<other.y+other.height&&box.y+box.height>other.y,false,`${id} overlaps ${card.id}`)}}
+  const close=(a,b)=>assert.ok(Math.abs(a-b)<2,`${a} ≈ ${b}`);
+  async function drag(handle,dx,dy){const b=await handle.boundingBox();assert.ok(b);await page.mouse.move(b.x+b.width/2,b.y+b.height/2);await page.mouse.down();await page.mouse.move(b.x+b.width/2+dx,b.y+b.height/2+dy,{steps:12});await page.mouse.up()}
+  await page.goto(base+'/infinite_canvas');
+  await page.getByRole('button',{name:'从示例开始 ↗',exact:true}).click();
+  await page.getByRole('button',{name:'适应画布',exact:true}).click();
+  await content('brief').click({position:{x:20,y:20}});
+  assert.equal(await node('brief').getAttribute('data-selected'),'true');assert.equal(await node('brief').getAttribute('data-editing'),'false');
+  await page.waitForTimeout(700);
+  await content('brief').click({position:{x:20,y:20}});
+  await node('brief').getByRole('textbox',{name:'01 / 创意简报 内容'}).fill('选择后再次点击进入编辑');
+  await waitField('brief','text','选择后再次点击进入编辑');
+  await node('brief').getByRole('button',{name:'加粗',exact:true}).click();
+  assert.equal((await snapshot()).cards.find(n=>n.id==='brief').style.bold,true);
+  await node('brief').getByRole('button',{name:'斜体',exact:true}).click();
+  await node('brief').getByLabel('文字颜色',{exact:true}).fill('#78905e');
+  await node('brief').getByRole('combobox',{name:'文字样式',exact:true}).selectOption('24');
+  await page.waitForFunction(()=>{const n=JSON.parse(localStorage.getItem('studio.infinite-canvas.v1')).cards.find(n=>n.id==='brief');return n.style.bold&&n.style.italic&&n.style.color==='#78905e'&&n.style.size===24});
+  assert.deepEqual(await node('brief').getByRole('textbox',{name:'01 / 创意简报 内容'}).evaluate(el=>{const s=getComputedStyle(el);return {size:s.fontSize,weight:s.fontWeight,style:s.fontStyle,color:s.color}}),{size:'24px',weight:'700',style:'italic',color:'rgb(120, 144, 94)'});
+  const compact=(await snapshot()).cards.find(n=>n.id==='brief');
+  await node('brief').getByRole('button',{name:'展开文本节点',exact:true}).click();
+  const expanded=(await snapshot()).cards.find(n=>n.id==='brief');assert.ok(expanded.width>(compact.width||320)&&expanded.height>(compact.height||350));
+  await capture('canvas-text-format-desktop');
+  await page.getByRole('button',{name:'撤销',exact:true}).click();
+  assert.equal((await snapshot()).cards.find(n=>n.id==='brief').width,compact.width);assert.equal((await snapshot()).cards.find(n=>n.id==='brief').height,compact.height);
+  await page.keyboard.press('Escape');
+  const before=(await snapshot()).cards.find(n=>n.id==='brief');
+  const z=await page.locator('[class*=world]').evaluate(el=>new DOMMatrix(getComputedStyle(el).transform).a);
+  await drag(content('brief'),45,25);
+  const after=(await snapshot()).cards.find(n=>n.id==='brief');close(after.x-before.x,45/z);close(after.y-before.y,25/z);
+  assert.equal(await node('brief').getAttribute('data-editing'),'false');
+
+  await content('reference').click();assert.equal(await composer.count(),0);
+  await page.waitForTimeout(700);await content('reference').click();await composer.waitFor();assert.equal(choosers,0,'Entering image editing must not force a file picker');
+  const panelBefore=await composer.boundingBox(),imageBefore=await node('reference').boundingBox();
+  await capture('canvas-composer-desktop');
+  await page.getByRole('button',{name:'缩小',exact:true}).click();
+  const panelAfter=await composer.boundingBox(),imageAfter=await node('reference').boundingBox();
+  close(panelBefore.width,panelAfter.width);close(panelBefore.height,panelAfter.height);assert.ok(imageAfter.width<imageBefore.width);
+  const chooser=page.waitForEvent('filechooser');await composer.getByRole('button',{name:'上传图片',exact:true}).click();
+  await (await chooser).setFiles({name:'reference.png',mimeType:'image/png',buffer:Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=','base64')});
+  await page.waitForFunction(()=>!!JSON.parse(localStorage.getItem('studio.infinite-canvas.v1')).cards.find(n=>n.id==='reference').image);
+  await node('reference').getByRole('button',{name:'图片高清 ↗',exact:true}).click();
+  const upscale=(await snapshot()).cards.find(n=>n.operation==='upscale');assert.ok(upscale);
+  await unobstructed(upscale.id);
+  const download=page.waitForEvent('download');await composer.getByRole('button',{name:'导出任务',exact:true}).click();
+  const task=JSON.parse(await fs.readFile(await (await download).path(),'utf8'));
+  assert.equal(task.target.id,upscale.id);assert.equal(task.references[0].id,'reference');assert.ok(task.references[0].image);
+
+  await page.keyboard.press('Escape');await page.getByRole('button',{name:'适应画布',exact:true}).click();
+  await content('brief').click({position:{x:20,y:20}});
+  await node('brief').getByRole('button',{name:'引用 01 / 创意简报 生成',exact:true}).click();
+  await page.getByRole('dialog',{name:'画布操作'}).getByRole('button',{name:'脚本',exact:true}).click();
+  const script=(await snapshot()).cards.find(n=>n.kind==='script');assert.ok(script);
+  await unobstructed(script.id);
+  await composer.getByRole('textbox',{name:'创作要求',exact:true}).fill('基于简报写六个分镜');
+  await waitField(script.id,'instruction','基于简报写六个分镜');assert.equal((await snapshot()).cards.find(n=>n.id===script.id).text,'');
+  await composer.getByRole('button',{name:'画布参考',exact:true}).click();
+  await composer.getByRole('group',{name:'选择引用节点'}).getByRole('button',{name:'02 / 视觉参考',exact:true}).click();
+  assert.ok((await snapshot()).links.some(([a,b])=>a==='reference'&&b===script.id));
+  await composer.getByRole('button',{name:'移除引用 01 / 创意简报',exact:true}).click();
+  assert.ok(!(await snapshot()).links.some(([a,b])=>a==='brief'&&b===script.id));
+  await page.keyboard.press('Escape');
+  await page.getByRole('button',{name:'适应画布',exact:true}).click();
+  await content('reference').click();await node('reference').getByRole('button',{name:'02 / 视觉参考 操作',exact:true}).click();
+  await page.getByRole('button',{name:'删除节点',exact:true}).click();
+  assert.ok((await snapshot()).cards.some(n=>n.id===script.id));assert.ok((await snapshot()).links.every(l=>!l.includes('reference')));
+  await page.getByRole('button',{name:'撤销',exact:true}).click();assert.ok((await snapshot()).links.some(([a,b])=>a==='reference'&&b===script.id));
+  await page.keyboard.press('Escape');
+  await content('brief').click({position:{x:20,y:20}});
+  const priorWidth=(await snapshot()).cards.find(n=>n.id==='brief').width;
+  await drag(node('brief').getByRole('button',{name:'调整 01 / 创意简报 尺寸',exact:true}),50,30);
+  assert.ok((await snapshot()).cards.find(n=>n.id==='brief').width>(priorWidth||320));
+  await page.getByRole('button',{name:'撤销',exact:true}).click();assert.equal((await snapshot()).cards.find(n=>n.id==='brief').width,priorWidth);
+  await page.getByRole('button',{name:'重做',exact:true}).click();
+  await page.getByRole('button',{name:'移动画布',exact:true}).click();
+  await page.mouse.move(15,300);await page.mouse.down();await page.mouse.move(75,340,{steps:8});await page.mouse.up();
+  assert.equal(await page.evaluate(()=>{const path=[...document.querySelectorAll('svg path')].find(p=>p.getAttribute('d')?.startsWith('M '));const d=path.getAttribute('d').match(/-?\d+(?:\.\d+)?/g).map(Number),point=new DOMPoint(d[0],d[1]).matrixTransform(path.getScreenCTM()),card=document.querySelector('[data-node-id="brief"]').getBoundingClientRect();return Math.abs(point.x-card.right)<3&&Math.abs(point.y-(card.top+card.height/2))<3}),true);
+  const worldAt=()=>page.locator('[class*=world]').evaluate(el=>{const m=new DOMMatrix(getComputedStyle(el).transform);return {x:(1450-m.e)/m.a,y:(150-m.f)/m.d,z:m.a}});
+  const anchorBefore=await worldAt();await page.mouse.move(1450,150);await page.keyboard.down('Control');await page.mouse.wheel(0,-80);await page.keyboard.up('Control');
+  await page.waitForFunction(z=>new DOMMatrix(getComputedStyle(document.querySelector('[class*=world]')).transform).a!==z,anchorBefore.z);
+  const anchorAfter=await worldAt();close(anchorBefore.x,anchorAfter.x);close(anchorBefore.y,anchorAfter.y);
+  const saved=await snapshot();await page.reload();await page.waitForFunction(()=>!!localStorage.getItem('studio.infinite-canvas.v1'));assert.deepEqual(await snapshot(),saved);
+  await page.getByRole('button',{name:'切换明暗主题',exact:true}).click();await page.reload();await page.waitForFunction(()=>document.querySelector('main').dataset.theme==='light');
+  if(process.env.SCREENSHOT_DIR){await fs.mkdir(process.env.SCREENSHOT_DIR,{recursive:true});await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-nodes-desktop.png'});}
+  await page.setViewportSize({width:390,height:844});assert.ok(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth));
+  const viewport=await page.locator('[class*=viewport]').boundingBox();assert.equal(viewport.width,390);assert.equal(viewport.height,844);
+  if(process.env.SCREENSHOT_DIR)await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-nodes-mobile.png'});
+  assert.deepEqual(errors,[]);console.log('Passed: selected-node re-click editing, drag, formatting, fixed composer, upload, references, task export, deletion/undo, reload and mobile bounds');
+ }catch(error){if(process.env.SCREENSHOT_DIR&&page){await fs.mkdir(process.env.SCREENSHOT_DIR,{recursive:true});await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-failure.png'}).catch(()=>{})}throw error}finally{await browser.close()}
+})().catch(e=>{console.error(e);process.exitCode=1});
@@ -0,0 +1,29 @@
+/** CI-only isolated runtime checks, never a local preview workflow. */
+import {readFileSync} from 'node:fs';
+import {spawn} from 'node:child_process';import {once} from 'node:events';import {createServer} from 'node:net';import {createServer as createHttpServer} from 'node:http';import assert from 'node:assert/strict';import {setTimeout} from 'node:timers/promises';
+const designId='00000000-0000-4000-8000-000000000001',missingId='00000000-0000-4000-8000-000000000002';
+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,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,[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));
+}
+const complete=await fetch(base+'/studio/template-layout?id='+seriesId,{headers});assert.equal(complete.status,200);const completeHtml=await complete.text(),artwork=completeHtml.match(/<main[\s\S]*?<\/main>/)[0];assert.equal((artwork.match(/data-page-key=/g)||[]).length,3);assert.ok(artwork.includes('data-style-version="autumn-journal/1"'));assert.ok(artwork.includes('把秋天'));assert.ok(artwork.includes('先看见'));assert.ok(artwork.includes('留一点白'));assert.ok(!/button|contenteditable|workbench-top/.test(artwork));
+const second=await fetch(base+'/studio/template-layout?id='+seriesId+'&page=2&export=1',{headers});assert.equal(second.status,200);const secondHtml=(await second.text()).match(/<main[\s\S]*?<\/main>/)[0];assert.equal((secondHtml.match(/data-page-key=/g)||[]).length,1);assert.ok(secondHtml.includes('data-page="2"'));assert.ok(secondHtml.includes('height:1440px'));assert.ok(secondHtml.includes('width=2160'));assert.ok(secondHtml.includes('profile=export'));assert.ok(secondHtml.includes('Noto Serif CJK SC'));
+for(const suffix of ['0','4','bad'])assert.equal((await fetch(base+'/studio/template-layout?id='+seriesId+'&page='+suffix,{headers})).status,404);
+for(const path of ['/studio/template-layout','/studio/template-layout?id=invalid','/studio/template-layout?id='+missingId,'/studio/template-layout?id='+designId+'&id='+standardId])assert.equal((await fetch(base+path,{headers})).status,404);
+assert.equal((await fetch(base+'/studio/layouts/ref-02?id='+designId,{headers})).status,404);
+assert.equal((await fetch(base+'/studio/layouts/ref-01?id='+missingId,{headers})).status,404);
+const beforeInvalid=reads;assert.equal((await fetch(base+'/studio/layouts/ref-01?id=invalid',{headers})).status,404);assert.equal(reads,beforeInvalid);
+const legacy=await fetch(base+'/studio/designs/'+designId,{headers,redirect:'manual'});assert.equal(legacy.status,307);assert.equal(legacy.headers.get('location'),'/studio/template-layout?id='+designId);
+const old=await fetch(base+'/studio/layouts/ref-01?id='+designId,{headers,redirect:'manual'});assert.equal(old.status,307);assert.equal(old.headers.get('location'),'/studio/template-layout?id='+designId);
+assert.equal((await fetch(base+'/studio/layouts/ref-28')).status,404);assert.equal((await fetch(base+'/studio/api/layouts/ref-01',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({texts:{I01:{value:'bad'}}})})).status,400);console.log('All 27 native pages, server-loaded saved IDs, legacy redirects and render APIs passed');}finally{child.kill('SIGTERM');await once(child,'exit');await new Promise(r=>wiki.close(r))}
@@ -0,0 +1,14 @@
+import {referencePreview} from '../lib/layout-images-client';
+import {useState} from 'react';
+import Head from 'next/head';
+import {SourceCover,selections,type CoverValues} from './SourceCover';
+import {tutorialPost} from '../content/tool-links';
+export function LayoutSelection(){
+ const [active,setActive]=useState(0),[values,setValues]=useState<CoverValues[]>(selections.map(l=>({fields:Object.fromEntries(Object.entries(l.fields).filter(([,v])=>v!==undefined)) as Record<string,string>,color:'#83918a',accent:'#c3cec5'}))),[guides,setGuides]=useState(false),[status,setStatus]=useState('');
+ const layout=selections[active],current=values[active];
+ function update(patch:Partial<CoverValues>){setValues(old=>old.map((v,i)=>i===active?{...v,...patch}:v));}
+ async function download(format:'svg'|'json'){
+  try{setStatus('正在生成…');const r=await fetch('/studio/api/export/layout-selection?format='+format,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({layoutId:layout.id,...current})});if(!r.ok)throw Error();const url=URL.createObjectURL(await r.blob()),a=document.createElement('a');a.href=url;a.download=layout.id+'.'+format;a.click();setTimeout(()=>URL.revokeObjectURL(url),500);setStatus('已导出当前模板。')}catch{setStatus('导出失败，请重试。')}
+ }
+ return <main className="template-trial"><Head><title>三种排版 · Studio 工具</title></Head><header className="trial-nav"><a href={tutorialPost}>← PROMPT 使用教程</a><span>STUDIO / LAYOUT SELECTION</span></header><section className="trial-intro"><div><small>REF-01 / REF-07 / REF-26</small><h1>三个构图，各有位置。</h1><p>切换真实原图对应的模板，分别试文字与配色。图位与装饰按教程构件重建为干净矢量；当前只放占位内容。</p></div></section><div className="trial-workspace"><aside className="trial-controls"><h2>选择与编辑</h2><label>排版<select value={active} onChange={e=>{setActive(Number(e.target.value));setStatus('')}}>{selections.map((l,i)=><option key={l.id} value={i}>{l.id} · {l.name}</option>)}</select></label>{layout.slots.filter(s=>s.kind==='text').map(s=><label key={s.id}>{s.id} · {s.role}<textarea rows={current.fields[s.id]?.includes('\n')?3:1} maxLength={120} value={current.fields[s.id]||''} onChange={e=>update({fields:{...current.fields,[s.id]:e.target.value}})}/></label>)}<div className="trial-colors"><label>主图色<input type="color" value={current.color} onChange={e=>update({color:e.target.value})}/></label><label>副图色<input type="color" value={current.accent} onChange={e=>update({accent:e.target.value})}/></label></div><label className="trial-switch"><input type="checkbox" checked={guides} onChange={e=>setGuides(e.target.checked)}/>显示构件边界</label><div className="trial-actions"><button className="trial-primary" onClick={()=>void download('svg')}>下载当前 SVG</button><button onClick={()=>void download('json')}>下载参数 JSON</button></div><p className="trial-help">每张模板单独保留本页修改，刷新恢复初始值。下载 SVG 为无边界线的正式图；原始低分辨率图层在 JSON 中保留作对照。</p><p role="status">{status}</p></aside><div><div className="selection-preview"><SourceCover layout={layout} values={current} guides={guides}/></div><div className="selection-thumbs">{selections.map((l,i)=><button key={l.id} aria-pressed={active===i} onClick={()=>setActive(i)}><SourceCover layout={l} values={values[i]}/><span>{l.id}</span></button>)}</div><details className="trial-reference"><summary>原图与构件坐标</summary><div className="trial-reference-body"><img src={referencePreview(layout.referenceUrl)} alt={layout.name+'原图'}/><div><a href={layout.tutorialUrl}>阅读这张原图的教程 ↗</a><table><thead><tr><th>ID</th><th>构件</th><th>x,y,w,h</th></tr></thead><tbody>{layout.slots.map(s=><tr key={s.id}><td>{s.id}</td><td>{s.role}</td><td>{s.box.join(', ')}</td></tr>)}</tbody></table></div></div></details></div></div></main>;
+}
@@ -1,5 +1,3 @@
-import { ThemeToggle } from "./ThemeToggle";
-import { Brand } from "./Brand";
 import {CurvedCopy} from './NativeCurvedCopy';
 import {useEffect,useRef,useState,type CSSProperties,type KeyboardEvent,type PointerEvent} from 'react';
 import {ArrowLeft,MousePointer2,Type,Square,Circle,ImagePlus,Layers,SlidersHorizontal,Undo2,Redo2,Copy,Trash2,Eye,EyeOff,Lock,Unlock,ChevronUp,ChevronDown,Minus,Plus,Scan,Save} from 'lucide-react';
@@ -57,7 +55,7 @@ export function LayoutWorkbench({layout,design:initialDesign}:LayoutPageProps){
 const selectedColor=slot?(slot.kind==='text'?params.texts[slot.id]?.color||textColor(layout.id,slot):slot.kind==='image'?params.images[slot.id]?.color||String(imageShape(layout,slot).backgroundColor):params.decorations[slot.id]?.color||'#83908a'):'';
 return <main className={'native-layout-page'+(editing?' is-editing':'')}>
  <Head><title>{name} · Prompt</title><meta name="description" content={layout.name+' · 可直接编辑的排版页面'}/></Head>
-  {editing&&<header className="workbench-top"><a href="/explore/8eb8c76500580f7a4b56ba3c" aria-label="返回目录"><ArrowLeft size={18}/></a><a href="/workspace" className="studio-mark"><Brand compact/></a><ThemeToggle/><input aria-label="页面名称" value={name} maxLength={120} onChange={e=>{setName(e.target.value);setDirty(true)}}/><span className="save-indicator">{busy?'正在处理…':dirty?'有未保存的修改':design?'已保存':'尚未保存'}</span><button title="撤销 ⌘Z" disabled={!history.length||busy} onClick={undo}><Undo2 size={17}/></button><button title="重做 ⇧⌘Z" disabled={!future.length||busy} onClick={redo}><Redo2 size={17}/></button><button onClick={()=>{setEditing(false);setTextEditing(null);setSelected(null)}}>查看页面</button><button className="primary" disabled={busy||!name.trim()} onClick={()=>void save()}><Save size={15}/>保存</button></header>}
+  {editing&&<header className="workbench-top"><a href="/explore/8eb8c76500580f7a4b56ba3c" aria-label="返回目录"><ArrowLeft size={18}/></a><span className="studio-mark">P<span>STUDIO</span></span><input aria-label="页面名称" value={name} maxLength={120} onChange={e=>{setName(e.target.value);setDirty(true)}}/><span className="save-indicator">{busy?'正在处理…':dirty?'有未保存的修改':design?'已保存':'尚未保存'}</span><button title="撤销 ⌘Z" disabled={!history.length||busy} onClick={undo}><Undo2 size={17}/></button><button title="重做 ⇧⌘Z" disabled={!future.length||busy} onClick={redo}><Redo2 size={17}/></button><button onClick={()=>{setEditing(false);setTextEditing(null);setSelected(null)}}>查看页面</button><button className="primary" disabled={busy||!name.trim()} onClick={()=>void save()}><Save size={15}/>保存</button></header>}
  {editing&&<aside className={'workbench-layers '+(panel==='layers'?'mobile-open':'')} inert={busy}><div className="panel-heading"><Layers size={16}/><strong>图层与素材</strong><span>{elements.length}</span></div><div className="insert-tools"><button onClick={()=>add('text')}><Type/>文字</button><button onClick={()=>add('decoration','rectangle')}><Square/>矩形</button><button onClick={()=>add('decoration','ellipse')}><Circle/>椭圆</button><button onClick={()=>add('image')}><ImagePlus/>图片</button></div><div className="layers-caption">{layout.id.toUpperCase()} <span>从上到下排列</span></div><div className="layer-list">{[...elements].sort((a,b)=>(layer(b).z??(b.kind==='text'?3:b.kind==='image'?1:2))-(layer(a).z??(a.kind==='text'?3:a.kind==='image'?1:2))).map(s=><div key={s.id} className={'layer-row '+(selected===s.id?'active':'')+(layer(s).hidden?' muted':'')}><button className="layer-select" onClick={()=>{setSelected(s.id);setTextEditing(null)}}>{s.kind==='text'?<Type size={14}/>:s.kind==='image'?<ImagePlus size={14}/>:<Square size={14}/>}<span>{s.role}</span></button><button title="显示或隐藏图层" aria-label={s.role+'显示或隐藏'} onClick={()=>updateLayer(s,{hidden:!layer(s).hidden})}>{layer(s).hidden?<EyeOff size={13}/>:<Eye size={13}/>}</button><button title="锁定或解锁图层" aria-label={s.role+'锁定或解锁'} onClick={()=>updateLayer(s,{locked:!layer(s).locked})}>{layer(s).locked?<Lock size={13}/>:<Unlock size={13}/>}</button></div>)}</div><p className="workbench-tip">拖动移动 · 双击文字改写<br/>⌘/Ctrl D 复制 · 方向键微调<br/>Shift + 方向键移动 10 单位</p></aside>}
  <div ref={viewport} className={editing?'workbench-viewport':'page-viewport'} onClick={e=>{if(e.target===e.currentTarget){setSelected(null);setTextEditing(null)}}}>
  {editing&&<div className="canvas-caption">{layout.name}<span>{layout.width} × {layout.height}</span></div>}
@@ -12,8 +12,8 @@ export function TemplateTrial({idea}:{idea:Idea}){
 const download=(text:string,type:string,name:string)=>{const url=URL.createObjectURL(new Blob([text],{type})),a=document.createElement('a');a.href=url;a.download=name;a.click();setTimeout(()=>URL.revokeObjectURL(url),500)};
 async function exportSvg(){await document.fonts.ready;const svg=document.querySelector(`[data-proof="${selected.key}"] svg`);if(!svg)return;download(new XMLSerializer().serializeToString(svg),'image/svg+xml',`ref-17-${selected.key}.svg`);setNotice('已下载当前封面 SVG，可继续编辑文字与图形。')}
 const reset=()=>{setSlides(idea.slides);setMasthead(template.masthead);setGuides(false);setNotice('已恢复初始试版。')};
- return <main className="template-trial"><Head><title>{idea.title} · 啡跃 Endoleap</title><link rel="alternate" type="text/markdown" href={'/studio/api/export/'+idea.slug+'?format=markdown'}/></Head>
-  <header className="trial-nav"><a href={tutorialPost}>← 啡跃使用教程</a><span>STUDIO / TEMPLATE PROOF</span><a href={template.tutorialUrl} target="_blank" rel="noreferrer">排版教程 ↗</a></header>
+ return <main className="template-trial"><Head><title>{idea.title} · Studio</title><link rel="alternate" type="text/markdown" href={'/studio/api/export/'+idea.slug+'?format=markdown'}/></Head>
+  <header className="trial-nav"><a href={tutorialPost}>← PROMPT 使用教程</a><span>STUDIO / TEMPLATE PROOF</span><a href={template.tutorialUrl} target="_blank" rel="noreferrer">排版教程 ↗</a></header>
  <section className="trial-intro"><div><small>REF-17 · 同一母版 / 四张试版</small><h1>先试封面，再填内容。</h1><p>英文刊头、圆形叠标、左下主图与右侧窄栏保持同一套坐标。三组合集先用主题占位，暂不放入具体 Skills。</p></div><div className="trial-source"><b>01 母版</b><span>02 笔记复习</span><span>03 教学资料</span><span>04 英语学习</span></div></section>
  <div className="trial-workspace"><aside className="trial-controls"><h2>试一试</h2><label>当前封面<select value={active} onChange={e=>{setActive(Number(e.target.value));setNotice('')}}>{slides.map((s,i)=><option value={i} key={s.key}>{s.label}</option>)}</select></label>
   <fieldset><legend>共享英文刊头</legend><label>第一行<input value={masthead[0]} maxLength={8} onChange={e=>setMasthead([e.target.value.toUpperCase().replace(/[^A-Z ]/g,''),masthead[1]])}/></label><label>第二行<input value={masthead[1]} maxLength={8} onChange={e=>setMasthead([masthead[0],e.target.value.replace(/[^A-Za-z ]/g,'')])}/></label></fieldset>
@@ -9,7 +9,7 @@ import type {Design} from './native-layout';
 /** Only forward the session to our fixed private Wiki service, never a request Host. */
 export async function readDesign(id:unknown,req:IncomingMessage):Promise<Design|null>{
 if(!uuid(id))return null;
- const origin=process.env.STUDIO_WIKI_ORIGIN||`http://127.0.0.1:${process.env.PORT || '3000'}`;
+ const origin=process.env.STUDIO_WIKI_ORIGIN||'http://waterfall-wiki:3000';
 const headers:Record<string,string>={};
 if(req.headers.cookie)headers.cookie=req.headers.cookie;
 if(req.headers.authorization)headers.authorization=req.headers.authorization;
@@ -4,7 +4,7 @@ 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=(process.env.STUDIO_WIKI_ORIGIN||`http://127.0.0.1:${process.env.PORT || '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;
 }

@@ -14,7 +14,7 @@ export async function embedSvgMedia(req:NextApiRequest,svg:string){
 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://127.0.0.1:${process.env.PORT || '3000'}`)+path,{headers,redirect:'error',signal:AbortSignal.timeout(15000)});
+  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();
@@ -0,0 +1,3 @@
+import type { AppProps } from "next/app";
+import "../styles/globals.css";
+export default function App({Component,pageProps}:AppProps){return <Component {...pageProps}/>;}
@@ -1,11 +1,11 @@
-import {embedSvgMedia} from '../../../../studio/lib/layout-images';
+import {embedSvgMedia} from '../../../lib/layout-images';
 import {renderToStaticMarkup} from 'react-dom/server';
-import {serveApiDocumentation} from '../../../../studio/lib/api-documentation';
+import {serveApiDocumentation} from '../../../lib/api-documentation';
 import type {NextApiRequest,NextApiResponse} from 'next';
-import {ideas,ideaMarkdown} from '../../../../studio/content/ideas';
-import {selections} from '../../../../studio/components/SourceCover';
-import {renderCover} from '../../../../studio/lib/render-cover';
-import {tutorialPost} from '../../../../studio/content/tool-links';
+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 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();}
@@ -1,3 +1,3 @@
-import {serveApiDocumentation} from '../../../studio/lib/api-documentation';
+import {serveApiDocumentation} from '../../lib/api-documentation';
 import type {NextApiRequest,NextApiResponse} from "next";
 export default function handler(req:NextApiRequest,res:NextApiResponse){if(serveApiDocumentation(req,res,'/studio/api/health'))return;res.setHeader("Cache-Control","no-store");if(!["GET","HEAD"].includes(req.method||""))return res.status(405).end();return req.method==="HEAD"?res.status(200).end():res.status(200).json({status:"ok",service:"prompt-studio"});}
@@ -1,3 +1,3 @@
 import type {NextApiRequest,NextApiResponse} from 'next';
-import {ideas} from '../../../studio/content/ideas';
+import {ideas} from '../../content/ideas';
 export default function handler(_:NextApiRequest,res:NextApiResponse){res.setHeader('Content-Type','text/markdown; charset=utf-8');res.send('# 创作站\n\n- [在线画布、引用与 Agent 任务](/api/canvases?agent_mode=True)\n- [27 套排版目录与 API](/studio/api/layouts?agent_mode=True)\n- [多页作品与统一视觉](/api/studio/series?agent_mode=True)\n- [按 ID 保存效果](/api/studio/designs?agent_mode=True)\n\n'+ideas.map(i=>`- [${i.title}](/studio/ideas/${i.slug}) · [正文](/studio/api/export/${i.slug}?format=markdown)`).join('\n'));}
@@ -1,12 +1,12 @@
-import {embedSvgMedia} from '../../../../studio/lib/layout-images';
+import {embedSvgMedia} from '../../../lib/layout-images';
 import type {NextApiRequest,NextApiResponse} from 'next';
-import {embedLayoutImages} from '../../../../studio/lib/layout-images';
+import {embedLayoutImages} from '../../../lib/layout-images';
 import {createElement} from 'react';
 import {renderToStaticMarkup} from 'react-dom/server';
-import layouts from '../../../../studio/content/templates/layouts.json';
-import standardLayout from '../../../../studio/content/standard-layout.json';
-import {LayoutCanvas} from '../../../../studio/components/LayoutCanvas';
-import {parameters,LayoutParameterError} from '../../../../studio/lib/layout-parameters';
+import layouts from '../../../content/templates/layouts.json';
+import standardLayout from '../../../content/standard-layout.json';
+import {LayoutCanvas} from '../../../components/LayoutCanvas';
+import {parameters,LayoutParameterError} from '../../../lib/layout-parameters';
 const workspaceSchema={
 added:'可选数组，最多100项：{id:"user-唯一ID",kind:"text|image|decoration",role:"名称",box:[x,y,width,height],direction:"horizontal",text:"文字或null",reading:"custom",shape:"rectangle|ellipse（装饰可选）"}',
 layers:'按原生或新增元素ID索引：x/y -10000..10000，width/height 0.1..10000，rotation -360..360，opacity 0..1，radius 0..5000，z -1000..1000，hidden/locked 布尔值；坐标和字号均为模板单位',
@@ -1,6 +1,6 @@
 import type {NextApiRequest,NextApiResponse} from 'next';
-import fixed from '../../../../studio/content/templates/layouts.json';
-import standard from '../../../../studio/content/standard-layout.json';
+import fixed from '../../../content/templates/layouts.json';
+import standard from '../../../content/standard-layout.json';
 export default function handler(req:NextApiRequest,res:NextApiResponse){
 if(!['GET','HEAD'].includes(req.method||'')){res.setHeader('Allow','GET, HEAD');return res.status(405).end()}
 const entries=[standard,...fixed].map(l=>({id:l.id,name:l.name,family:l.id==='standard-01'?'standard':'fixed',url:'/studio/layouts/'+l.id,api:'/studio/api/layouts/'+l.id}));
@@ -1,11 +1,11 @@
 import type {GetServerSideProps} from 'next';
-import {readDesign} from '../../../studio/lib/design-server';
-import {designUrl} from '../../../studio/lib/native-layout';
+import {readDesign} from '../../lib/design-server';
+import {designUrl} from '../../lib/native-layout';
 export default function DesignPage(){return null}
 export const getServerSideProps:GetServerSideProps=async({params,req,res})=>{
 res.setHeader('Cache-Control','private, no-store');
 const design=await readDesign(params?.id,req);
 if(!design)return {notFound:true};
- // The unified application has no basePath; keep the full historical URL.
- return {redirect:{destination:designUrl(design.layoutId,design.id),permanent:false}};
+ // Next adds the configured /studio basePath to server redirects.
+ return {redirect:{destination:designUrl(design.layoutId,design.id).slice('/studio'.length),permanent:false}};
 };
@@ -1,11 +1,9 @@
-import { ThemeToggle } from "../../studio/components/ThemeToggle";
-import { Brand } from "../../studio/components/Brand";
 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 '../../studio/lib/native-layout';
-import styles from '../../studio/styles/graphic.module.css';
-import {parseGraphicDocument,type GraphicItem as Item,type GraphicDocument as Doc} from '../../studio/lib/graphic-document';
+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(){
@@ -36,13 +34,13 @@ export default function Graphic(){
 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 + " · 啡跃 Endoleap Graphic"}</title><meta name="description" content="在 Studio 中自由编排文字、图形与图片。"/></Head>
- <header className={styles.top}><a href="/workspace" className={styles.brand}><Brand compact/><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><ThemeToggle/><button onClick={()=>setAuth(true)} className={styles.account}>{user?user.email:'邮箱登录'}</button><button className={styles.primary} onClick={exportSVG}><Download size={15}/>导出 SVG</button></header>
+ 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}><Brand compact/></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>}
+ {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>
 }
@@ -0,0 +1,10 @@
+import type {GetStaticPaths,GetStaticProps} from 'next';
+import Head from 'next/head';
+import Link from 'next/link';
+import {LayoutSelection} from '../../components/LayoutSelection';
+import {tutorialPost} from '../../content/tool-links';
+import {TemplateTrial} from '../../components/TemplateTrial';
+import {ideas,type Idea} from '../../content/ideas';
+export default function IdeaPage({idea}:{idea:Idea}){if(idea.tool==='layout-selection')return <LayoutSelection/>;if(idea.template)return <TemplateTrial idea={idea}/>;return <main className="editor"><Head><title>{idea.title} · 创作站</title><link rel="alternate" type="text/markdown" href={'/studio/api/export/'+idea.slug+'?format=markdown'}/></Head><header><a href={tutorialPost}>← PROMPT 使用教程</a><a href={'/studio/api/export/'+idea.slug}>导出内容包 ↓</a><a href={'/studio/api/export/'+idea.slug+'?format=markdown'}>Markdown ↓</a><button onClick={()=>window.print()}>打印 / PDF</button></header><h1>{idea.title}</h1><p>{idea.summary}</p><div className="slides">{idea.slides.map((s,i)=><article className="slide" key={i} style={{background:s.color}}><small>PROMPT STUDIO / {String(i+1).padStart(2,'0')}</small><h2>{s.heading}</h2><p>{s.body}</p><footer>记录灵感 · 自由表达</footer></article>)}</div></main>}
+export const getStaticPaths:GetStaticPaths=async()=>({paths:ideas.map(i=>({params:{slug:i.slug}})),fallback:false});
+export const getStaticProps:GetStaticProps=async({params})=>{const idea=ideas.find(i=>i.slug===params?.slug);return idea?{props:{idea}}:{notFound:true}};
@@ -0,0 +1,3 @@
+import type {GetServerSideProps} from 'next';
+export default function StudioEntry(){return null}
+export const getServerSideProps:GetServerSideProps=async()=>({redirect:{destination:'/graphic',permanent:false}});
@@ -1,27 +1,25 @@
-import { ThemeToggle } from "../../studio/components/ThemeToggle";
-import { Brand } from "../../studio/components/Brand";
 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 '../../studio/styles/infinite-canvas.module.css';
-import CanvasNodeView from '../../studio/components/canvas/CanvasNodeView';
-import CanvasComposer from '../../studio/components/canvas/CanvasComposer';
-import CanvasAgentPanel,{type CanvasAgentHandle} from '../../studio/components/canvas/CanvasAgentPanel';
-import {parseCanvasDocument,deriveNode,connectNodes,removeCanvasNode,referencedNodes,agentTask,type CanvasNode as Card,type CanvasDocument as Doc} from '../../studio/lib/canvas-document';
+import s from '../../styles/infinite-canvas.module.css';
+import CanvasNodeView from '../../components/canvas/CanvasNodeView';
+import CanvasComposer from '../../components/canvas/CanvasComposer';
+import CanvasAgentPanel,{type CanvasAgentHandle} from '../../components/canvas/CanvasAgentPanel';
+import {parseCanvasDocument,deriveNode,connectNodes,removeCanvasNode,referencedNodes,agentTask,type CanvasNode as Card,type CanvasDocument as Doc} from '../../lib/canvas-document';
 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';
 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),[editing,setEditing]=useState(''),[refMenu,setRefMenu]=useState(''),[taskFeedback,setTaskFeedback]=useState(''),[composerTarget,setComposerTarget]=useState(''),[pickerRequest,setPickerRequest]=useState(0);
+ 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(''),[refMenu,setRefMenu]=useState(''),[taskFeedback,setTaskFeedback]=useState(''),[composerTarget,setComposerTarget]=useState(''),[pickerRequest,setPickerRequest]=useState(0);
 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 pickerSequence=useRef(0),agent=useRef<CanvasAgentHandle>(null);
 const active=doc.cards.find(c=>c.id===selected);
- useEffect(()=>{try{const raw=localStorage.getItem(key);if(raw){const d=parseCanvasDocument(raw);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{}setReady(true);fetch('/api/account/session').then(r=>r.ok?r.json():null).then(d=>setEmail(d?.user?.email||'')).catch(()=>{});},[]);
+ useEffect(()=>{try{const raw=localStorage.getItem(key);if(raw){const d=parseCanvasDocument(raw);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);setRefMenu('');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)}
@@ -43,8 +41,8 @@ export default function InfiniteCanvas(){
 function connect(from:string,to:string){try{const next=connectNodes(doc,from,to);if(next!==doc)commit(next);setTaskFeedback('')}catch(e){setTaskFeedback(e instanceof Error?e.message:'无法引用节点')}}
 function exportTask(id:string){try{const task=agentTask(doc,id),url=URL.createObjectURL(new Blob([JSON.stringify(task,null,2)],{type:'application/json'}));const a=document.createElement('a');a.href=url;a.download=`canvas-task-${id}.json`;a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);setTaskFeedback('Agent 任务已导出')}catch(e){setTaskFeedback(e instanceof Error?e.message:'无法导出任务')}}
 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}><Head><title>无限画布 · 啡跃 Endoleap</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}><Brand compact/></a><i/><span className={s.crumb}>工作空间 <ChevronRight size={13}/></span><strong>未命名的灵感宇宙</strong><span className={s.badge}>本机草稿</span><div className={s.spacer}/><CanvasAgentPanel ref={agent} document={doc} email={email} onLoad={next=>{setDoc(next);setPast([]);setFuture([]);setEditing('');select('')}} onFeedback={setTaskFeedback}/><ThemeToggle/><a href="/account">{email||'登录账户'}</a><button className={s.export} onClick={exportDoc}><Download size={15}/>导出项目</button></header>
+ 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}/><CanvasAgentPanel ref={agent} document={doc} email={email} onLoad={next=>{setDoc(next);setPast([]);setFuture([]);setEditing('');select('')}} onFeedback={setTaskFeedback}/><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);setRefMenu('');if(e.target===e.currentTarget){setEditing('');select('')};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}}>
@@ -1,11 +1,11 @@
 import type {GetServerSideProps} from 'next';
-import {NativeResult} from '../../../studio/components/NativeResult';
-import type {Layout} from '../../../studio/lib/layout-parameters';
-import fixedLayouts from '../../../studio/content/templates/layouts.json';
-import standardLayout from '../../../studio/content/standard-layout.json';
+import {NativeResult} from '../../components/NativeResult';
+import type {Layout} from '../../lib/layout-parameters';
+import fixedLayouts from '../../content/templates/layouts.json';
+import standardLayout from '../../content/standard-layout.json';
 const layouts=[...fixedLayouts,standardLayout];
-import {nativeLayout,designUrl} from '../../../studio/lib/native-layout';
-import {readDesign} from '../../../studio/lib/design-server';
+import {nativeLayout,designUrl} from '../../lib/native-layout';
+import {readDesign} from '../../lib/design-server';
 export default function LayoutPage({layout}:{layout:Layout}){return <NativeResult layout={layout} design={null}/>}
 export const getServerSideProps:GetServerSideProps<{layout:Layout}>=async({params,query,req,res})=>{
 res.setHeader('Cache-Control','private, no-store');
@@ -1,11 +1,11 @@
 import type {GetServerSideProps} from 'next';
-import {NativeSeries} from '../../studio/components/NativeSeries';
-import {NativeResult} from '../../studio/components/NativeResult';
-import fixedLayouts from '../../studio/content/templates/layouts.json';
-import standardLayout from '../../studio/content/standard-layout.json';
-import {readDesign} from '../../studio/lib/design-server';
-import {nativeLayout,type Design} from '../../studio/lib/native-layout';
-import type {Layout} from '../../studio/lib/layout-parameters';
+import {NativeSeries} from '../components/NativeSeries';
+import {NativeResult} from '../components/NativeResult';
+import fixedLayouts from '../content/templates/layouts.json';
+import standardLayout from '../content/standard-layout.json';
+import {readDesign} from '../lib/design-server';
+import {nativeLayout,type Design} from '../lib/native-layout';
+import type {Layout} from '../lib/layout-parameters';

 type Props={layout:Layout;design:Design;page:number|null;quality:boolean};
 export default function TemplateLayout(props:Props){return props.design.document?<NativeSeries design={props.design} page={props.page} quality={props.quality}/>:<NativeResult {...props}/>}
@@ -0,0 +1,3 @@
+.root{position:static}.panel{position:absolute;left:0;top:calc(100% + 12px);width:min(390px,calc(100vw - 32px));max-height:75dvh;overflow:auto;padding:20px;border:1px solid #414141;border-radius:16px;background:#242424;color:#ddd;box-shadow:0 15px 70px #0005;z-index:12;display:grid;gap:14px;font-size:12px}.panel header,.actions,.conflict{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.panel button{font-size:11px!important;padding:7px 10px!important;background:#333!important;color:inherit!important;border:1px solid #555!important}.panel button:disabled{opacity:.45}.panel textarea{width:100%;height:150px;resize:vertical;background:#181818;color:#ddd;border:1px solid #444;border-radius:8px;padding:10px;font:10px/1.7 monospace}.panel p{margin:0;color:#aaa;line-height:1.7}.panel small{color:#aaa;font-size:10px}.panel label{display:grid;gap:8px}.panel select{width:100%;background:#333;color:inherit;padding:8px;border-radius:6px}.panel ul{padding:0;margin:0;list-style:none;display:grid;gap:12px}.panel li{display:grid;gap:5px;border-top:1px solid #444;padding-top:10px}.panel li button{justify-self:start}.panel a{color:inherit!important;text-decoration:underline!important}:global([data-theme=light]) .panel{background:white;color:#333;border-color:#ccc}:global([data-theme=light]) .panel button{background:#f3f3f3!important;border-color:#ddd!important}
+
+:global(header):has(> .root .panel){z-index:12}
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`export * from '../../lib/canvas-document.ts';`
				`@@ -1 +0,0 @@`
				`export * from '../../lib/layout-parameters.ts';`
				`@@ -1 +0,0 @@`
				.page{max-width:850px;margin:0 auto;padding:40px 24px 100px;color:var(--foreground-strong);font-family:system-ui,sans-serif;line-height:1.7}.page nav{margin-bottom:32px}.page a{color:var(--primary)}.page h1{font-size:36px;letter-spacing:-1px}.page label{display:block;margin:18px 0}.page input:not([type=checkbox]),.page textarea,.page select{display:block;width:100%;padding:12px;border:1px solid var(--input);border-radius:8px;background:var(--surface);color:inherit;font:inherit;box-sizing:border-box}.page button{padding:10px 18px;background:var(--primary);color:var(--primary-foreground);border:0;border-radius:7px;cursor:pointer}.page article{border-top:1px solid var(--border);padding:22px 0}.page pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--selection);padding:18px}.body{white-space:pre-wrap}.page fieldset{border:1px solid var(--border);border-radius:8px;margin:14px 0}
				`@@ -1 +0,0 @@`
				.app{display:flex;min-height:100dvh;background:var(--background);color:var(--foreground-strong);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 var(--border);background:var(--selection);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:var(--muted-foreground)}.app aside>span{font-size:10px;color:var(--muted-foreground);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:var(--selection)}.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:var(--muted-foreground);font-size:10px;letter-spacing:1px}.kicker{font-size:10px;letter-spacing:2px;color:var(--muted-foreground);margin-top:65px}.app h1{font-size:34px;font-weight:500;letter-spacing:-1px;margin:18px 0}.sub{font-size:13px;color:var(--muted-foreground)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}.grid>a{background:var(--surface);border:1px solid var(--border);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:var(--muted-foreground)}.grid>a>svg{vertical-align:middle;width:20px;color:var(--muted-foreground)}.grid h2{font-size:23px;font-weight:500;margin:24px 0 12px}.grid p{font-size:12px;color:var(--muted-foreground);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(var(--selection) 1px,transparent 1px) 0 0/18px 18px,var(--selection);color:var(--muted-foreground)}.canvas span{background:var(--surface);border:1px solid var(--selection-border);padding:20px 13px;font-size:12px;border-radius:6px;color:var(--foreground)}.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 var(--selection-border);border-radius:10px;padding:23px;margin-top:28px}.agent>svg{color:var(--muted-foreground)}.agent h3{font-size:14px;margin:0 0 8px}.agent p{font-size:11px;color:var(--muted-foreground);margin:0;line-height:1.8}.agent a{margin-left:auto;font-size:12px;white-space:nowrap}.hint{font-size:10px;color:var(--muted-foreground);margin-top:25px}.app a:focus-visible{outline:2px solid var(--ring);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 var(--border)}.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}}