@open-slide/core 1.1.0 → 1.2.0

package/dist/{config-C7vMYzFD.d.ts → config-CtT8K4VF.d.ts}

@@ -1,4 +1,4 @@
-import { Locale } from "./types-DYgVpIGo.js";
+import { Locale } from "./types-CRHIeoNq.js";
 
 //#region src/config.d.ts
 type OpenSlideBuildConfig = {

package/dist/{dev-B_GVbr11.js → dev-C9eLmUEq.js}

@@ -1,5 +1,5 @@
 import "./design-C13iz9_4.js";
-import { createViteConfig } from "./config-KdiYeWtK.js";
+import { createViteConfig } from "./config-AxZ5OE1u.js";
 import { createServer, mergeConfig } from "vite";
 
 //#region src/cli/dev.ts

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { Locale, Plural } from "./types-DYgVpIGo.js";
-import { OpenSlideConfig } from "./config-C7vMYzFD.js";
+import { Locale, Plural } from "./types-CRHIeoNq.js";
+import { OpenSlideConfig } from "./config-CtT8K4VF.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { CSSProperties, ComponentType, HTMLAttributes } from "react";
 

package/dist/locale/index.d.ts

@@ -1,4 +1,4 @@
-import { Locale, Plural } from "../types-DYgVpIGo.js";
+import { Locale, Plural } from "../types-CRHIeoNq.js";
 
 //#region src/locale/en.d.ts
 declare const en: Locale;

package/dist/locale/index.js

@@ -78,6 +78,8 @@ const en = {
 	slide: {
 		home: "Home",
 		backToHome: "Back to home",
+		agentConnected: "Agent connected",
+		agentConnectedTooltip: "The dev server is publishing your current slide and inspector selection to your agent. Ask \"this slide\" or \"this element\" in chat and it will resolve. Disappears in production builds.",
 		download: "Download",
 		exportAsHtml: "Export as HTML",
 		exportAsPdf: "Export as PDF",
@@ -148,6 +150,8 @@ const en = {
 	inspector: {
 		inspect: "Inspect",
 		deselect: "Deselect",
+		agentWatching: "Agent is watching",
+		agentWatchingTooltip: "Your agent already sees the selected element via the dev server — just ask it in chat. Leave comments here only when you want to queue a few before asking.",
 		contentSection: "Content",
 		typographySection: "Typography",
 		colorSection: "Color",
@@ -184,10 +188,10 @@ const en = {
 		cropFitContain: "Fit",
 		cropApply: "Apply",
 		cropResetAria: "Reset crop",
-		noteForAgent: "Note for the agent",
-		noteAgentPlaceholder: "Describe a change for the agent…",
-		noteShortcutHint: "⌘↵ to send",
-		addNote: "Add note",
+		leaveComment: "Leave a comment",
+		commentPlaceholder: "Describe a change for the agent…",
+		commentShortcutHint: "⌘↵ to add",
+		addComment: "Add comment",
 		unsavedChanges: {
 			one: "{count} unsaved change",
 			other: "{count} unsaved changes"
@@ -279,7 +283,14 @@ const en = {
 	},
 	thumbnailRail: {
 		pages: "Pages",
-		goToPageAria: "Go to page {n}"
+		goToPageAria: "Go to page {n}",
+		duplicatePage: "Duplicate",
+		deletePage: "Delete",
+		pageActionsAria: "Page {n} actions",
+		toastDuplicated: "Duplicated page {n}",
+		toastDeleted: "Deleted page {n}",
+		toastDuplicateFailed: "Could not duplicate page",
+		toastDeleteFailed: "Could not delete page"
 	},
 	pdfToast: {
 		title: "Exporting PDF",
@@ -297,6 +308,14 @@ const en = {
 	clickNav: {
 		prevAria: "Previous page",
 		nextAria: "Next page"
+	},
+	notesDrawer: {
+		toggle: "Notes",
+		pageLabel: "page {n}/{total}",
+		placeholder: "Write speaker notes for this slide…",
+		statusSaving: "Saving…",
+		statusSaved: "Saved",
+		statusError: "Save failed: {msg}"
 	}
 };
 
@@ -391,6 +410,8 @@ const ja = {
 		pickIcon: "アイコンを選択"
 	},
 	slide: {
+		agentConnected: "エージェント接続中",
+		agentConnectedTooltip: "現在のスライドと Inspector の選択状態を dev server がエージェントに公開しています。チャットで「このスライド」「この要素」と言えば認識されます。本番ビルドでは表示されません。",
 		home: "ホーム",
 		backToHome: "ホームへ戻る",
 		download: "ダウンロード",
@@ -499,10 +520,12 @@ const ja = {
 		cropFitContain: "全体表示",
 		cropApply: "適用",
 		cropResetAria: "トリミングをリセット",
-		noteForAgent: "エージェントへのメモ",
-		noteAgentPlaceholder: "エージェントに依頼する変更を記述…",
-		noteShortcutHint: "⌘↵ で送信",
-		addNote: "メモを追加",
+		agentWatching: "エージェント監視中",
+		agentWatchingTooltip: "エージェントは選択中の要素を dev server 経由で把握しています。直接チャットで頼めます。ここにコメントを残すのは、複数の依頼をまとめて出したいときだけで OK。",
+		leaveComment: "コメントを残す",
+		commentPlaceholder: "エージェントに依頼する変更を記述…",
+		commentShortcutHint: "⌘↵ で追加",
+		addComment: "コメントを追加",
 		unsavedChanges: {
 			one: "未保存の変更 {count} 件",
 			other: "未保存の変更 {count} 件"
@@ -594,7 +617,14 @@ const ja = {
 	},
 	thumbnailRail: {
 		pages: "ページ",
-		goToPageAria: "ページ {n} へ移動"
+		goToPageAria: "ページ {n} へ移動",
+		duplicatePage: "複製",
+		deletePage: "削除",
+		pageActionsAria: "ページ {n} の操作",
+		toastDuplicated: "ページ {n} を複製しました",
+		toastDeleted: "ページ {n} を削除しました",
+		toastDuplicateFailed: "ページを複製できませんでした",
+		toastDeleteFailed: "ページを削除できませんでした"
 	},
 	pdfToast: {
 		title: "PDF を書き出し中",
@@ -612,6 +642,14 @@ const ja = {
 	clickNav: {
 		prevAria: "前のページ",
 		nextAria: "次のページ"
+	},
+	notesDrawer: {
+		toggle: "発表者ノート",
+		pageLabel: "{n} / {total} ページ",
+		placeholder: "このスライドの発表者ノートを記入…",
+		statusSaving: "保存中…",
+		statusSaved: "保存済み",
+		statusError: "保存に失敗しました: {msg}"
 	}
 };
 
@@ -694,6 +732,8 @@ const zhCN = {
 		pickIcon: "选择图标"
 	},
 	slide: {
+		agentConnected: "Agent 已连接",
+		agentConnectedTooltip: "Dev server 正在把你目前在哪张 slide、Inspector 选了哪个元素发布给 agent。直接到聊天说\"这张 slide\"或\"这个元素\"就行。Production build 不会出现。",
 		home: "首页",
 		backToHome: "返回首页",
 		download: "下载",
@@ -802,10 +842,12 @@ const zhCN = {
 		cropFitContain: "完整显示",
 		cropApply: "应用",
 		cropResetAria: "重置裁剪",
-		noteForAgent: "给代理的备注",
-		noteAgentPlaceholder: "描述你希望代理执行的更改…",
-		noteShortcutHint: "⌘↵ 发送",
-		addNote: "添加备注",
+		agentWatching: "Agent 正在关注",
+		agentWatchingTooltip: "Agent 已经通过 dev server 看到你选的元素了，直接到聊天请它修改就行。想累积几个再一次问才需要在这里留 comments。",
+		leaveComment: "留个 comment",
+		commentPlaceholder: "描述你希望代理执行的更改…",
+		commentShortcutHint: "⌘↵ 添加",
+		addComment: "添加 comment",
 		unsavedChanges: {
 			one: "{count} 项未保存的更改",
 			other: "{count} 项未保存的更改"
@@ -897,7 +939,14 @@ const zhCN = {
 	},
 	thumbnailRail: {
 		pages: "页面",
-		goToPageAria: "前往第 {n} 页"
+		goToPageAria: "前往第 {n} 页",
+		duplicatePage: "复制",
+		deletePage: "删除",
+		pageActionsAria: "第 {n} 页的操作",
+		toastDuplicated: "已复制第 {n} 页",
+		toastDeleted: "已删除第 {n} 页",
+		toastDuplicateFailed: "无法复制页面",
+		toastDeleteFailed: "无法删除页面"
 	},
 	pdfToast: {
 		title: "导出 PDF",
@@ -915,6 +964,14 @@ const zhCN = {
 	clickNav: {
 		prevAria: "上一页",
 		nextAria: "下一页"
+	},
+	notesDrawer: {
+		toggle: "演讲备注",
+		pageLabel: "第 {n} / {total} 页",
+		placeholder: "为这一页撰写演讲备注…",
+		statusSaving: "保存中…",
+		statusSaved: "已保存",
+		statusError: "保存失败：{msg}"
 	}
 };
 
@@ -997,6 +1054,8 @@ const zhTW = {
 		pickIcon: "選擇圖示"
 	},
 	slide: {
+		agentConnected: "Agent 已連線",
+		agentConnectedTooltip: "Dev server 正在把你目前在哪張 slide、Inspector 選了哪個元素發布給 agent。直接到聊天說「這張 slide」或「這個元素」就行。Production build 不會出現。",
 		home: "首頁",
 		backToHome: "返回首頁",
 		download: "下載",
@@ -1105,10 +1164,12 @@ const zhTW = {
 		cropFitContain: "完整顯示",
 		cropApply: "套用",
 		cropResetAria: "重設裁切",
-		noteForAgent: "給代理的備註",
-		noteAgentPlaceholder: "描述你希望代理進行的修改…",
-		noteShortcutHint: "⌘↵ 送出",
-		addNote: "新增備註",
+		agentWatching: "Agent 正在關注",
+		agentWatchingTooltip: "Agent 已經透過 dev server 看到你選的元素了，直接到聊天請它修改就行。想累積幾個再一次問才需要在這裡留 comments。",
+		leaveComment: "留個 comment",
+		commentPlaceholder: "描述你希望代理進行的修改…",
+		commentShortcutHint: "⌘↵ 新增",
+		addComment: "新增 comment",
 		unsavedChanges: {
 			one: "{count} 項未儲存的變更",
 			other: "{count} 項未儲存的變更"
@@ -1200,7 +1261,14 @@ const zhTW = {
 	},
 	thumbnailRail: {
 		pages: "頁面",
-		goToPageAria: "前往第 {n} 頁"
+		goToPageAria: "前往第 {n} 頁",
+		duplicatePage: "複製",
+		deletePage: "刪除",
+		pageActionsAria: "第 {n} 頁的操作",
+		toastDuplicated: "已複製第 {n} 頁",
+		toastDeleted: "已刪除第 {n} 頁",
+		toastDuplicateFailed: "無法複製頁面",
+		toastDeleteFailed: "無法刪除頁面"
 	},
 	pdfToast: {
 		title: "匯出 PDF",
@@ -1218,6 +1286,14 @@ const zhTW = {
 	clickNav: {
 		prevAria: "上一頁",
 		nextAria: "下一頁"
+	},
+	notesDrawer: {
+		toggle: "講稿",
+		pageLabel: "第 {n} / {total} 頁",
+		placeholder: "為這一頁撰寫演講備忘…",
+		statusSaving: "儲存中…",
+		statusSaved: "已儲存",
+		statusError: "儲存失敗：{msg}"
 	}
 };
 

package/dist/{preview-D_mxhj7w.js → preview-Cunm-f4i.js}

@@ -1,5 +1,5 @@
 import "./design-C13iz9_4.js";
-import { createViteConfig } from "./config-KdiYeWtK.js";
+import { createViteConfig } from "./config-AxZ5OE1u.js";
 import { mergeConfig, preview as preview$1 } from "vite";
 
 //#region src/cli/preview.ts

package/dist/{types-DYgVpIGo.d.ts → types-CRHIeoNq.d.ts}

@@ -85,6 +85,8 @@ type Locale = {
   slide: {
     home: string;
     backToHome: string;
+    agentConnected: string;
+    agentConnectedTooltip: string;
     download: string;
     exportAsHtml: string;
     exportAsPdf: string;
@@ -157,6 +159,8 @@ type Locale = {
   inspector: {
     inspect: string;
     deselect: string;
+    agentWatching: string;
+    agentWatchingTooltip: string;
     contentSection: string;
     typographySection: string;
     colorSection: string;
@@ -194,10 +198,10 @@ type Locale = {
     cropFitContain: string;
     cropApply: string;
     cropResetAria: string;
-    noteForAgent: string;
-    noteAgentPlaceholder: string;
-    noteShortcutHint: string;
-    addNote: string;
+    leaveComment: string;
+    commentPlaceholder: string;
+    commentShortcutHint: string;
+    addComment: string;
     /** templates: "{count} unsaved change" / "{count} unsaved changes" */
     unsavedChanges: Plural;
     /** templates: "{count} comment" / "{count} comments" */
@@ -300,6 +304,16 @@ type Locale = {
     pages: string;
     /** template: "Go to page {n}" */
     goToPageAria: string;
+    duplicatePage: string;
+    deletePage: string;
+    /** template: "Page {n} actions" */
+    pageActionsAria: string;
+    /** template: "Duplicated page {n}" */
+    toastDuplicated: string;
+    /** template: "Deleted page {n}" */
+    toastDeleted: string;
+    toastDuplicateFailed: string;
+    toastDeleteFailed: string;
   };
   pdfToast: {
     title: string;
@@ -319,5 +333,15 @@ type Locale = {
     prevAria: string;
     nextAria: string;
   };
+  notesDrawer: {
+    toggle: string;
+    /** template: "page {n}/{total}" */
+    pageLabel: string;
+    placeholder: string;
+    statusSaving: string;
+    statusSaved: string;
+    /** template: "Save failed: {msg}" */
+    statusError: string;
+  };
 }; //#endregion
 export { Locale, Plural };

package/dist/vite/index.d.ts

@@ -1,5 +1,5 @@
-import "../types-DYgVpIGo.js";
-import { OpenSlideConfig } from "../config-C7vMYzFD.js";
+import "../types-CRHIeoNq.js";
+import { OpenSlideConfig } from "../config-CtT8K4VF.js";
 import { InlineConfig } from "vite";
 
 //#region src/vite/config.d.ts

package/dist/vite/index.js

@@ -1,4 +1,4 @@
 import "../design-C13iz9_4.js";
-import { createViteConfig } from "../config-KdiYeWtK.js";
+import { createViteConfig } from "../config-AxZ5OE1u.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {

package/skills/current-slide/SKILL.md

@@ -0,0 +1,110 @@
+---
+name: current-slide
+description: Resolve which slide, page, and (optionally) selected element the user is currently viewing in the open-slide dev server. Consult this whenever the user references "this page", "this slide", "this element", "the slide I'm on", "the current page", or any deictic reference to slide content without naming it. Re-read `node_modules/.open-slide/current.json` at the start of every such turn — the user navigates between turns, so a value you read earlier in the conversation is almost certainly stale.
+---
+
+# Where is the user right now?
+
+When the user says "fix this page", "tweak this heading", or "the slide I'm looking at", they almost never name the slide id, page number, or element — they mean wherever they are in the dev viewer. Before asking "which slide?" or "which element?", check the file the dev server writes on every navigation and inspector pick.
+
+## Re-read on every deictic turn — never reuse a prior read
+
+`current.json` is a live cursor, not a fact about the conversation. The user moves between slides, pages, and elements freely between your turns — including while you were doing other work. **Read the file fresh at the start of every new turn that uses a deictic reference**, even if:
+
+- you already read it earlier in this same conversation,
+- you just finished editing the slide it pointed to,
+- the user's new message sounds like a continuation ("now make it bigger", "also fix this one", "keep going").
+
+A "continue editing" follow-up is exactly the case where the user has likely just navigated to a different slide or picked a different element. Trusting your last read here will silently edit the wrong file. Re-read, compare `slideId` / `pageIndex` / `selection` against what you used last time, and act on the new values.
+
+## How to read it
+
+```
+node_modules/.open-slide/current.json
+```
+
+Path is relative to the project root (the user's `cwd`, the directory that contains `slides/` and `package.json`). Use the `Read` tool. The file is JSON.
+
+## What you get
+
+```json
+{
+  "slideId": "q2-roadmap",
+  "pageIndex": 2,
+  "pageNumber": 3,
+  "totalPages": 8,
+  "slideTitle": "Q2 Roadmap",
+  "view": "slides",
+  "pagePath": "slides/q2-roadmap/index.tsx",
+  "selection": {
+    "line": 42,
+    "column": 6,
+    "tagName": "h1",
+    "text": "Q2 Roadmap"
+  },
+  "updatedAt": "2026-05-09T14:32:11.123Z"
+}
+```
+
+- `slideId` — folder name under `slides/`. Use as-is for any `/__slides/<id>/...` API or as the URL segment.
+- `pageIndex` — 0-based, for use with the page array in `index.tsx` (`export default [Cover, Body, ...]`).
+- `pageNumber` — 1-based, for use in messages to the user ("page 3 of 8") and for the URL `?p=N`.
+- `pagePath` — relative path to the slide source. Hand straight to `Read` / `Edit`.
+- `view` — `"slides"` (canvas view) or `"assets"` (asset manager). If `"assets"`, the user is browsing files for that slide rather than viewing a page.
+- `selection` — `null` if nothing is selected. Otherwise, the JSX element the user picked in the inspector overlay:
+  - `line` (1-indexed) and `column` (0-indexed) point to the JSX opening tag inside `pagePath`. This is the canonical handle — match against the source line, not the rendered DOM.
+  - `tagName` is the rendered DOM tag, lowercased (`"h1"`, `"div"`, `"img"`).
+  - `text` is a trimmed text snippet (≤120 chars) from the element's `textContent`, useful as a sanity check that you're looking at the right node.
+  - Selection auto-clears whenever the user navigates to a different slide or page.
+- `updatedAt` — ISO timestamp of the last navigation or selection change. Use it to detect staleness.
+
+## When to use this
+
+- The user references the current slide/page deictically: "this", "here", "the page I'm on", "the slide I'm looking at", "what I'm working on".
+- The user references a specific element: "this heading", "this image", "the button I just clicked", "tighten this", "change the color of this". If `selection` is non-null, that's the element they mean.
+- Before asking "which slide?" or "which element?" as a clarifying question — check this file first.
+- Before guessing from `git log`, recently-edited files, or the most recent slide folder.
+
+## When NOT to use this
+
+- The user names a slide explicitly ("edit `q2-roadmap`") — use that name directly.
+- The `apply-comments` workflow already finds the right file via `@slide-comment` markers; it doesn't need this skill.
+- For listing or discovering slides — read `slides/` directly.
+
+## Staleness — verify before acting
+
+`updatedAt` is the last time the user navigated. Treat it like a cache:
+
+- **Fresh (under ~5 minutes old)**: trust it. Open `pagePath`, do the work.
+- **Older than ~5 minutes, or older than your last interaction with the user**: confirm with the user before editing. The dev server may not be running; the user may have switched contexts.
+- **Hours/days old**: ignore it. Ask the user which slide they mean.
+
+A *newer* `updatedAt` than the one you saw last turn is the normal signal that the user has moved — switch to the new `slideId` / `pageIndex` / `selection` without asking.
+
+## When the file is missing
+
+- The dev server hasn't been opened on a slide yet, or has never run.
+- Don't create the file or guess. Ask the user which slide they mean, or suggest they open the slide in the dev server first.
+
+## Example — page-level reference
+
+User: "tighten the spacing on this page"
+
+1. Read `node_modules/.open-slide/current.json`.
+2. Check `updatedAt` is recent.
+3. Read `pagePath` (e.g. `slides/q2-roadmap/index.tsx`).
+4. Identify the page at `pageIndex` in the default-exported array.
+5. Consult the `slide-authoring` skill for spacing rules, then edit that page in place.
+
+If `current.json` is missing or stale, ask: "Which slide and page should I tighten? The dev server hasn't published a current page recently."
+
+## Example — element-level reference
+
+User: "make this bigger"
+
+1. Read `node_modules/.open-slide/current.json`.
+2. If `selection` is non-null, the user means that element. Read `pagePath`, jump to `selection.line`, and find the JSX opening tag near that line/column. Confirm with the snippet in `selection.text` and the `tagName`.
+3. Consult `slide-authoring` for type-scale and layout rules before editing.
+4. Edit the JSX node in place.
+
+If `selection` is null, fall back to the page-level flow above — and consider asking "which element?" since the user used a deictic but hasn't picked one in the inspector.

package/skills/slide-authoring/SKILL.md

@@ -9,6 +9,7 @@ This skill is the **technical reference** for everything that happens inside `sl
 
 - `create-slide` owns "draft a new deck" — it asks the user scoping questions, then delegates the *how* to this skill.
 - `apply-comments` owns "process inspector markers" — it finds markers and applies edits, but the edits themselves follow the rules here.
+- `current-slide` resolves deictic references ("this page", "the slide I'm on") to a concrete `slideId` + `pageIndex`. Consult it **first** when the user references the current slide without naming it, then come back here for how to edit it.
 - Any ad-hoc slide edit (manual tweak, one-off fix) should also consult this skill before touching the file.
 
 When any of those paths reach the point of *writing React code for a page*, this is the source of truth. Do not duplicate the knowledge below into other skills — link here instead.
@@ -19,7 +20,7 @@ When any of those paths reach the point of *writing React code for a page*, this
 - Entry is `slides/<id>/index.tsx`. Images/videos/fonts go under `slides/<id>/assets/`.
 - Do **not** touch `package.json`, `open-slide.config.ts`, or other slides.
 - Do not add dependencies. Only `react` and standard web APIs are available.
-- Do not create `README.md` or other prose files inside the slide folder — just `index.tsx` + `assets/`.
+- A slide is **one `index.tsx` plus `assets/`** — nothing else. Do not create sibling `.tsx`/`.ts` files (`Card.tsx`, `components/`, `helpers.ts`, etc.); helper components and constants go inside `index.tsx`. Do not create `README.md` or other prose files either.
 
 ## File contract
 
@@ -264,6 +265,50 @@ The user uploads the real file via the Assets panel, then clicks the placeholder
 
 Size the placeholder to the slot it occupies. Pass `width`/`height` when the layout has a fixed image box; omit them when the placeholder fills a flex/grid cell. The `hint` should describe the *content* the user needs ("Q3 revenue chart") not the *role* ("hero image").
 
+## Repeated elements: component, not `map`
+
+When a page has visually repeated items — cards, logo rows, gallery tiles, list rows, step indicators — **define a small component and instantiate it once per item**. Do **not** render the group with `array.map` over a data array.
+
+Define the component **in the same `index.tsx`**, alongside the `Page` components. Never split it into a sibling file like `Card.tsx` — a slide is always a single `index.tsx` plus its `assets/`.
+
+```tsx
+// ✅ Each card is its own JSX node — inspector edits one at a time.
+const Card = ({ src, label }: { src: string; label: string }) => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+    <img src={src} style={{ width: 320, height: 320, objectFit: 'cover', borderRadius: 12 }} />
+    <p style={{ fontSize: 32 }}>{label}</p>
+  </div>
+);
+
+<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 64 }}>
+  <Card src={alpha} label="Alpha" />
+  <Card src={beta}  label="Beta"  />
+  <Card src={gamma} label="Gamma" />
+</div>
+```
+
+```tsx
+// ❌ One shared template — replacing the image or text in the inspector
+//    changes every rendered card at once.
+const items = [
+  { src: alpha, label: 'Alpha' },
+  { src: beta,  label: 'Beta'  },
+  { src: gamma, label: 'Gamma' },
+];
+items.map((item) => (
+  <div>
+    <img src={item.src} />
+    <p>{item.label}</p>
+  </div>
+));
+```
+
+The inspector edits source JSX in place. A `map` body is **one source location** shared by every rendered instance, so when the user replaces an image or tweaks a label there, every card mutates together. Explicit instances give each card its own JSX node and its own props — the unit the inspector can target.
+
+The component definition stays the single source of truth for layout/styling (change it once → all cards update). Only the per-instance data — `src`, `label`, accent color — lives at the call site.
+
+This applies whenever the *visual element* repeats, not whenever the *data* does. Pure-text lists (`<ul><li>` bullets) are fine: each `<li>` is already its own JSX node, so plain literal markup is the correct shape — no need to wrap them in a component.
+
 ## Runtime behavior you get for free
 
 - Home page lists every folder under `slides/`.
@@ -282,6 +327,7 @@ Size the placeholder to the slot it occupies. Pass `width`/`height` when the lay
 - [ ] One coherent visual direction across every page (palette + type scale).
 - [ ] Slide declares a top-level `export const design: DesignSystem = { … }` and references the values via `var(--osd-X)` (use `design.X` only when you need a JS number for arithmetic). Only omit the `design` const for a one-off slide whose palette is intentionally locked.
 - [ ] One idea per page.
+- [ ] Visually repeated elements (cards, tiles, logo rows) are rendered as explicit `<Component />` instances, not via `array.map` over a data list.
 - [ ] All imported assets exist on disk under `slides/<id>/assets/`.
 - [ ] Every `<ImagePlaceholder>` corresponds to a real image the user must supply — not decorative filler. If it could be replaced by typography or layout, it should be.
 - [ ] Nothing outside `slides/<id>/` was edited.
@@ -302,3 +348,4 @@ Size the placeholder to the slot it occupies. Pass `width`/`height` when the lay
 - ❌ Editing `package.json`, `open-slide.config.ts`, or other slides.
 - ❌ Sprinkling `<ImagePlaceholder>` across pages "for visual interest". Placeholders are for content the user owns; they're not stock-photo slots.
 - ❌ Using a placeholder for an icon or decorative shape — those are typography/SVG problems, not asset problems.
+- ❌ Rendering visually repeated elements with `array.map(...)` over a data array. Define a component and instantiate it explicitly per item (`<Card />`, `<Card />`, `<Card />`) so the inspector can edit each independently — a shared `map` body mutates every instance at once.