@hybridlabor-api/aos 4.6.5 → 4.7.0

package/skills/global_config/editable-design/assets/poster-starter/README.md

@@ -0,0 +1,92 @@
+# poster-starter
+
+A fixed-canvas poster project. The visual system may combine generated artwork,
+live typography, and HTML geometry, and the included scripts make the render
+reproducible.
+
+## Prerequisites
+
+- A Chromium-based browser (Google Chrome, Chromium, Edge, Brave)
+- Set `POSTER_BROWSER=<path to executable>` if it is somewhere unusual
+
+## Quick start
+
+```bash
+scripts/check-poster.sh index.html
+scripts/render-poster.sh index.html                # defaults to out/poster.png
+scripts/render-poster.sh index.html out/print.png --dpi 300
+scripts/render-poster.sh --probe
+```
+
+`scripts/render-poster.sh` reads the PNG's real pixel dimensions back and compares them
+with `poster.json`. A browser silently returns a different size when the window
+and the content disagree, and the image looks perfectly normal, so this check is
+not optional.
+
+## What is here
+
+- `index.html` — one file, CSS inline, zero external requests. Absolute
+  positioning inside the canvas, fixed px for every layout dimension
+- `poster.json` — canvas size, render scale, print DPI. The renderer takes its
+  expected dimensions from here
+- `assets/` — generated or provided visual assets, referenced by relative path
+- `reference/` — optional non-shipping composition references
+- `scripts/` — local validation, asset import, tracing, and PNG rendering tools
+- `editor.html` — generated at delivery time; drag layers, resize width and
+  height with eight handles, double-click text, adjust type, delete, undo, scan
+  and dynamically spread/collapse the layers, and download clean edited or
+  exploded HTML
+- `layers.html` — standalone animated layer breakdown generated at delivery
+- `brief.md` — written at the start of a real run from the active user request;
+  the starter does not ship a placeholder because Replay evidence must be real
+- `replay/` — generated after verification; a fixed offline viewer populated
+  from the run's real prompts, plans, assets, code, review, and layer output
+
+Import a selected generated image immediately rather than leaving the project
+dependent on an image-generator cache path:
+
+```bash
+scripts/import-asset.sh /path/to/generated.png assets/visual-01.png
+```
+
+After the final render has passed visual review, create the editor companion:
+
+```bash
+node scripts/wire-editor.mjs index.html
+```
+
+The complete editor runtime is bundled with `poster-building` and copied into
+the project during initialization, so no second skill is required and the
+project remains usable offline. The original `index.html` is never modified by
+editor wiring.
+
+After verification, generate and check the Agent Design Replay:
+
+```bash
+node scripts/build-replay.mjs .
+node scripts/verify-replay.mjs replay/index.html
+```
+
+## Contract
+
+- The root element carries `data-canvas-width` / `data-canvas-height`, its
+  `width`/`height` are the same px values, and it is `position: relative`
+- Fixed px for every dimension, position, and gap that carries layout. No
+  vw/vh/vmin/vmax/%. Decorative values (gradient stops, radii, shadow spread,
+  texture sizes) are unrestricted
+- No interactivity, no media queries, no CDN
+- Nothing extends past the canvas edge
+
+## The placeholder layout is temporary
+
+`.preview-frame`, `.preview-status`, and the placeholder strings are scaffolding,
+not product. Once the first real version replaces them, delete those blocks and
+their CSS, delete `<meta name="poster-preview">`, replace `<title>` and the
+placeholder strings with the poster's real title and live HTML text, and delete
+every unreferenced file in `assets/`. Record the sweep in
+`cleanup-checklist.json`.
+
+The preview demonstrates the fixed canvas and safe area only. It is not a
+recommendation for a full-bleed image, banded composition, asset count, text
+placement, or final geometry. Build those decisions from the brief and visual
+reference.

package/skills/global_config/editable-design/assets/poster-starter/index.html

@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Your poster is taking shape</title>
+<meta name="poster-preview" content="placeholder">
+<style>
+  /* Palette and font stacks live here and are referenced throughout.
+     Replace them with the poster's own values. */
+  :root {
+    --ink: #f2ede3;
+    --ink-dim: #a9a196;
+    --ground: #14171a;
+    --accent: #b4472a;
+
+    --font-display: "PingFang SC", "Hiragino Sans GB", Georgia, serif;
+    --font-body: "PingFang SC", "Hiragino Sans GB", Helvetica, sans-serif;
+  }
+
+  /* border-box everywhere. A layer with padding measures wider than its `width`
+     under content-box, and anything that writes the measured width back - an
+     editor converting the layout to absolute positioning, for instance - adds
+     the padding a second time. */
+  * { box-sizing: border-box; }
+
+  html, body { margin: 0; padding: 0; background: #0c0e10; }
+
+  .poster {
+    position: relative;
+    width: 1200px;
+    height: 1600px;
+    overflow: hidden;
+    background: var(--ground);
+    font-family: var(--font-body);
+  }
+
+  /* Preview scaffolding only. Delete it before delivery and do not infer the
+     final composition or asset topology from it. */
+  .preview-frame {
+    position: absolute;
+    left: 72px;
+    top: 72px;
+    width: 1056px;
+    height: 1456px;
+    border: 2px dashed rgba(242, 237, 227, 0.22);
+  }
+
+  .preview-status {
+    position: absolute;
+    left: 300px;
+    top: 650px;
+    width: 600px;
+    text-align: center;
+  }
+
+  .preview-status p {
+    margin: 0 0 24px;
+    color: var(--accent);
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+
+  .preview-status h1 {
+    margin: 0 0 22px;
+    color: var(--ink);
+    font-family: var(--font-display);
+    font-size: 58px;
+    font-weight: 600;
+    line-height: 1.12;
+  }
+
+  .preview-status span {
+    color: var(--ink-dim);
+    font-size: 25px;
+    line-height: 1.45;
+  }
+</style>
+</head>
+<body>
+  <div class="poster" data-canvas-width="1200" data-canvas-height="1600">
+    <div class="preview-frame"></div>
+    <div class="preview-status">
+      <p>Fixed canvas · 1200 × 1600</p>
+      <h1>Your poster is taking shape</h1>
+      <span>Composition will follow the brief and visual reference</span>
+    </div>
+  </div>
+</body>
+</html>

package/skills/global_config/editable-design/assets/poster-starter/poster.json

@@ -0,0 +1,6 @@
+{
+  "canvas": { "width": 1200, "height": 1600 },
+  "scale": 2,
+  "dpi": null,
+  "zones": null
+}

package/skills/global_config/editable-design/assets/poster-starter/reference/.gitkeep

@@ -0,0 +1 @@
+

package/skills/global_config/editable-design/assets/replay/index.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Agent 创意轨迹</title>
+  <link rel="stylesheet" href="replay.css">
+</head>
+<body>
+  <header class="replay-header">
+    <div class="brand-mark" aria-hidden="true"><span></span><span></span><span></span></div>
+    <div class="replay-title">
+      <strong id="project-title">Agent 创意轨迹</strong>
+      <span id="project-status">已完成</span>
+    </div>
+    <div class="view-controls" aria-label="画布控制">
+      <button type="button" class="play-replay" id="play-replay" aria-label="播放完整创意轨迹"><span aria-hidden="true">▶</span><b>播放轨迹</b></button>
+      <button type="button" id="fit-view">全览</button>
+      <button type="button" id="zoom-out" aria-label="缩小">−</button>
+      <output id="zoom-label">100%</output>
+      <button type="button" id="zoom-in" aria-label="放大">+</button>
+    </div>
+  </header>
+
+  <main class="replay-shell">
+    <section class="canvas-viewport" id="canvas-viewport" aria-label="Agent 创意流程画布">
+      <div class="canvas-world" id="canvas-world">
+        <nav class="phase-nav" id="phase-nav" aria-label="创意阶段">
+          <button type="button" data-stage="input" data-phase="think">
+            <img src="icons/plan.png" alt=""><span>01</span><strong>理解与规划</strong><small>01—03</small>
+          </button>
+          <button type="button" data-stage="assets" data-phase="make">
+            <img src="icons/html.png" alt=""><span>02</span><strong>生成与构建</strong><small>04—05</small>
+          </button>
+          <button type="button" data-stage="review" data-phase="prove">
+            <img src="icons/review.png" alt=""><span>03</span><strong>观察与修正</strong><small>06—07</small>
+          </button>
+        </nav>
+        <svg class="flow-lines" id="flow-lines" viewBox="0 0 2540 1780" aria-hidden="true"></svg>
+        <div id="stage-layer"></div>
+        <div id="artifact-layer"></div>
+      </div>
+    </section>
+    <aside class="detail-panel" id="detail-panel" aria-live="polite" aria-label="节点详情">
+      <button type="button" class="detail-close" id="detail-close" aria-label="关闭详情">×</button>
+      <div id="detail-content"></div>
+    </aside>
+    <div class="media-lightbox" id="media-lightbox" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="media-lightbox-title">
+      <button type="button" class="media-lightbox-close" id="media-lightbox-close" aria-label="关闭放大预览">×</button>
+      <div class="media-lightbox-frame" id="media-lightbox-frame"></div>
+      <div class="media-lightbox-caption"><strong id="media-lightbox-title"></strong><span id="media-lightbox-note"></span></div>
+    </div>
+  </main>
+
+  <script src="data.js"></script>
+  <script src="replay.js"></script>
+  <script src="replay-motion.js"></script>
+</body>
+</html>