cotutor 0.1.0 → 0.3.0

package/cards/choice/card.md

@@ -0,0 +1,55 @@
+# choice — 选择题
+
+## 是什么
+
+一道选择题:问题 + 几个选项,答案只有你知道。孩子在舞台里点大按钮选,选了「交给老师」就到你下一轮的上下文包里。
+
+## 什么时候用 / 别用
+
+- 用:一节讲完,要孩子回答一个能选的问题;放在这节**末尾**,末句讲稿就是这个问题,停下等孩子。
+- 用:选项都短(数字、几个字)最好——短选项会横排成一行胶囊。
+- 别用:开放的问题(「你觉得为什么?」)→ 直接在讲稿里问,孩子说话答。
+- 别用:一节里放两道选择题;一节一问。
+
+## 写法
+
+第一行是问题,后面每行 `- [ ] 选项`,对的那项写 `- [x]`(标了多个就是多选)。答案孩子看不到。
+
+## 例子
+
+<!-- expect {"kind":"choice","props":{"question":"底 6 厘米、高 4 厘米的三角形,面积是多少?","options":["24 平方厘米","12 平方厘米","10 平方厘米"],"answer":[1]}} -->
+```choice
+底 6 厘米、高 4 厘米的三角形,面积是多少?
+- [ ] 24 平方厘米
+- [x] 12 平方厘米
+- [ ] 10 平方厘米
+```
+
+<!-- expect {"kind":"choice","props":{"options":["苹果","香蕉","西瓜"],"answer":[0,2],"multi":true}} -->
+```choice
+下面哪些是圆的?
+- [x] 苹果
+- [ ] 香蕉
+- [x] 西瓜
+```
+
+## 反例
+
+只有问题没有选项,解析不成,退成一段文字:
+
+<!-- expect {"kind":"text","warning":true} -->
+```choice
+只有问题没有选项?
+```
+
+## 孩子看到什么
+
+紫色卡:问题加粗,选项一行一个(都短就横排);卡上永远不画对错。点卡开舞台:大按钮,选一个(多选能选几个)就存下,底部「交给老师」。末句是问句、停下等孩子时,这张卡会自动推到舞台等答。交给老师以后这张卡锁住,改不了、不能再交;要他再选一次,出一张新卡。
+
+## 你会收回什么
+
+孩子选了、交了以后,下一条消息的上下文包 `cards:` 段里一行:`<job>/<n> choice「问题」 选了「B 12 平方厘米」(答案:「B 12 平方厘米」)`。对错由你口头说,卡上不显示。
+
+## 状态的形状
+
+`{"picked": [1]}` —— 选了的下标,按点的顺序;多选可以多个。

package/cards/code/card.css

@@ -0,0 +1,5 @@
+/* 代码(cards/code/card.md):深底等宽,原样 */
+/* 代码 */
+.c.c-code { background:#2b2b2b; border-color:#2b2b2b; color:#f6f4ee; font-family:ui-monospace,Menlo,monospace; font-size:14px; white-space:pre-wrap; }
+.c.c-code .lg { display:block; font-size:11px; color:#aaa; margin-bottom:6px; font-family:inherit; }
+#st-body .c-code { font-size:15px; }

package/cards/code/card.md

@@ -0,0 +1,46 @@
+# code — 代码或原样的文字
+
+## 是什么
+
+原样显示、不念的一块字:代码、要保留缩进与符号的东西。
+
+## 什么时候用 / 别用
+
+- 用:教编程时的代码;要孩子一字不差看的东西(竖式、表格)。
+- 别用:普通的话 → `text`;要念出来的 → `read`。
+
+## 写法
+
+- 围栏标签写语言名(```python),就是代码卡。
+- 不认识的标签,一律当代码卡原样显示,不报错。
+
+## 例子
+
+<!-- expect {"kind":"code","props":{"lang":"python","text":"print(1 + 1)"}} -->
+```python
+print(1 + 1)
+```
+
+<!-- expect {"kind":"code","props":{"lang":null}} -->
+```
+  3 4
++ 1 2
+-----
+  4 6
+```
+
+## 反例
+
+没有——什么都能进代码卡。
+
+## 孩子看到什么
+
+深色卡,等宽字,原样;不念。讲稿的 `[词]` 能落在代码上(下划线)。
+
+## 你会收回什么
+
+没有。
+
+## 状态的形状
+
+没有。

package/cards/dictation/card.css

@@ -0,0 +1,10 @@
+/* 听写(cards/dictation/card.md):首页上一张,点了去 /dictation 听写页;卡上没有字 */
+.c.c-dictation { flex-direction:row; align-items:center; gap:16px; text-decoration:none; color:var(--ink); }
+.c-dictation .tg { flex:none; display:flex; gap:4px; }
+.c-dictation .tg i { width:34px; height:34px; border:2px solid var(--tint-sand-line); border-radius:4px; background:linear-gradient(var(--tint-sand-line),var(--tint-sand-line)) center/100% 1px no-repeat, linear-gradient(var(--tint-sand-line),var(--tint-sand-line)) center/1px 100% no-repeat, #fff; }
+.c-dictation .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
+.c-dictation .tx b { font-size:19px; }
+.c-dictation .tx span { font-size:15px; color:var(--dim); }
+.c-dictation .go { flex:none; height:48px; padding:0 22px; border-radius:24px; background:#c95a22; color:#fff; font-size:17px; font-weight:600; display:flex; align-items:center; }
+/* 首页固定的「拍照听写」入口(不是发布的卡):左边一个相机 */
+.c-snap .tg { width:52px; height:52px; border-radius:14px; background:#fff3e8; color:#c95a22; align-items:center; justify-content:center; }

package/cards/dictation/card.md

@@ -0,0 +1,97 @@
+# dictation — 听写
+
+## 是什么
+
+听写卡:首页上一张,写着「听写 · 6 个词」。孩子点开,老师一个词一个词念,孩子用 Apple Pencil 在田字格里写。全部写完,书上的字淡淡叠在孩子写的上面,孩子自己对。只用在首页。
+
+## 什么时候用 / 别用
+
+- 用:孩子今天要听写生字词,家长把词表给你。
+- 用:上次听写没写全的词,排进下一次。
+- 别用:教一个字怎么写 → `tianzige`。
+- 用:英语单词听写:一张卡里都写英文单词,孩子在四线三格里写整个单词。
+- 别用:板书里 → 只能用在首页。
+
+## 写法
+
+围栏标签 `dictation <老师的键>`。老师的键可以不写,不写就用语文老师的声音。
+
+正文一行一个词:
+
+- 词是一到四个汉字,不带拼音和标点。
+- 要说明怎么念,在词后面空一格接着写。例如 `鼓励 鼓励,老师鼓励我的鼓励`。
+- 同音的、单个字的词,都写上念法。例如 `叶 树叶的叶`。
+- 念法是孩子听到的全部。它会被念两遍。
+- 最多 20 个词。
+- 英文单词前面可以配一个 emoji,如 `🚌 bus a red bus`。能画出来的东西才配,抽象的词(like、the)不配。孩子写完对答案时才看到。
+
+## 例子
+
+<!-- expect {"kind":"dictation","props":{"tutor":"chinese-tutor","words":[{"chars":"春天"},{"chars":"鼓励","say":"鼓励,老师鼓励我的鼓励"},{"chars":"叶","say":"树叶的叶"}]}} -->
+```dictation chinese-tutor
+春天
+鼓励 鼓励,老师鼓励我的鼓励
+叶 树叶的叶
+```
+
+不写老师,用语文老师的声音:
+
+<!-- expect {"kind":"dictation","props":{"words":[{"chars":"花朵"},{"chars":"雪花"}]}} -->
+```dictation
+花朵
+雪花
+```
+
+英文单词,英语老师的声音念:
+
+<!-- expect {"kind":"dictation","props":{"tutor":"english-tutor","lang":"en","words":[{"chars":"red"},{"chars":"yellow","say":"yellow, a yellow bus"},{"chars":"ice-cream","emoji":"🍦"}]}} -->
+```dictation english-tutor
+red
+yellow yellow, a yellow bus
+🍦 ice-cream
+```
+
+## 反例
+
+词里夹了拼音,解析不成,整张卡退成一段文字:
+
+<!-- expect {"kind":"text","warning":true} -->
+```dictation
+鼓励gǔlì
+```
+
+汉字的词和英文单词写在一张卡里,解析不成:
+
+<!-- expect {"kind":"text","warning":true} -->
+```dictation
+春天
+red
+```
+
+一个词超过四个字,解析不成:
+
+<!-- expect {"kind":"text","warning":true} -->
+```dictation
+画蛇添足画
+```
+
+## 孩子看到什么
+
+首页上一张卡,写着「听写」和几个词,看不到字。点开后:
+
+1. 老师念第一个词,念两遍。孩子听不清可以点「再念」。
+2. 左边是听写本,一个词一行;右边一个大田字格,一次写一个字,写好点「这个字写好了」。
+3. 不会写可以点「不会写,给答案」:书上的字一笔一笔写给他看,再照着灰色描红写一遍。
+4. 全部写完,书上的字淡淡叠在孩子写的字上。孩子点一个字,书上的字就在他写的字上一笔一笔写一遍。
+5. 少写了笔、多写了笔、空着的词,卡上问一句「这个再写一遍?」,不画叉,不打分。看过答案的词不再问。
+6. 孩子可以对任何一个词说「我想再写」。
+
+英文单词:一个单词一个四线三格,写整个单词;写完正确的单词淡淡叠在上面,配了 emoji 的放在旁边,孩子自己对,不逐个字母比,也不问「再写一遍?」,想再写自己点。
+
+## 你会收回什么
+
+孩子写的每一笔都会记下来,连同时刻。应用逐字对照书上的笔画,记下少了哪一笔、多了几笔、笔顺对不对、写得偏不偏、哪个字看了答案。家长在 `/dictation/parent` 看结果,在 `/dictation/reel` 看录像。卡上没有状态。
+
+## 状态的形状
+
+没有。

package/cards/image/card.css

@@ -0,0 +1,10 @@
+/* 图片(cards/image/card.md):图铺满 + 图注;舞台里双指缩放 .zoom */
+/* 图 */
+/* 卡自己不裁(overflow:hidden 会把右上角探出去的「再听」喇叭裁掉一半);圆角落在图上:卡圆角 16 减边 1.5 */
+.c.c-image { padding:0; gap:0; }
+.c.c-image img { display:block; width:100%; max-height:320px; object-fit:cover; border-radius:14.5px 14.5px 0 0; }
+.c.c-image:not(:has(.cap)) img { border-radius:14.5px; }
+.c.c-image .cap { padding:10px 16px; font-size:15px; color:#5a5650; white-space:pre-line; }
+/* 舞台 */
+.zoom { flex:1; min-height:0; overflow:hidden; display:grid; place-items:center; touch-action:none; }
+.zoom img { max-width:100%; max-height:100%; transform-origin:center; will-change:transform; }

package/cards/image/card.md

@@ -0,0 +1,52 @@
+# image — 图片
+
+## 是什么
+
+一张图 + 图注:孩子拍的作业、产物里的图、网上的图。
+
+## 什么时候用 / 别用
+
+- 用:讲孩子拍来的作业(上下文包 `photos:` 里的路径),指着图讲。
+- 用:一张现成的插图能说清的概念。
+- 别用:要孩子自己画 → `canvas`。
+- 别用:路径不存在的图(孩子端只会空一块)。
+
+## 写法
+
+- 第一行是图:workspace 里的相对路径,或 http(s) 地址。只认图片后缀。
+- 作业照片照 `photos:` 原样写,如 `captures/2026-09-10/1620-1.jpg`。照片在 workspace,不在 vault。
+- 后面几行是图注。
+
+## 例子
+
+<!-- expect {"kind":"image","props":{"src":"captures/2026-09-10/1620-1.jpg","caption":"你昨天写的这道题,看第二行。"}} -->
+```image
+captures/2026-09-10/1620-1.jpg
+你昨天写的这道题,看第二行。
+```
+
+<!-- expect {"kind":"image","props":{"src":"https://example.com/brain.png"}} -->
+```image
+https://example.com/brain.png
+```
+
+## 反例
+
+不是图片文件,解析不成:
+
+<!-- expect {"kind":"text","warning":true} -->
+```image
+captures/2026-09-10/笔记.md
+```
+
+## 孩子看到什么
+
+白底卡,图铺满、下面一行图注;点开能双指放大看。讲稿的 `[词]` 只能落在图注上。
+
+## 你会收回什么
+
+没有。
+
+## 状态的形状
+
+没有。

package/cards/lecture/card.css

@@ -0,0 +1,9 @@
+/* 小课堂卡(cards/lecture/card.md):课名 + 那一段末帧的画面 + 「0:19–0:30 ▷」;舞台是舞台包里的小课堂播放器(只放这一段,停在末帧) */
+.c.c-lecture { gap:8px; padding:12px 14px; }
+.c.c-lecture .sp { font-weight:600; }
+.c.c-lecture .th { position:relative; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line); height:150px; display:grid; place-items:center; color:var(--dim); font-size:15px; }
+.c.c-lecture .th svg { width:100%; height:100%; display:block; }
+.c.c-lecture .th .pl { position:absolute; right:10px; bottom:10px; background:#000000aa; color:#fff; border-radius:14px; padding:3px 10px; font-size:13px; font-variant-numeric:tabular-nums; }
+.c.c-lecture .tx { font-size:15px; color:var(--dim); }
+.c.c-lecture .th .lc-still { position:absolute; inset:6px; }
+.c.c-lecture .th video.lc-still { width:calc(100% - 12px); height:calc(100% - 12px); object-fit:contain; pointer-events:none; }

package/cards/lecture/card.md

@@ -0,0 +1,69 @@
+# lecture — 放课里的一段
+
+## 是什么
+
+孩子看过的小课堂里的一段,铺满放,带课里原来的声音。上下文包有 `lecture:` 才有课可放。
+
+## 什么时候用 / 别用
+
+- 用:孩子问的道理课里讲过。放那一段,别自己再讲一遍。
+- 用:孩子画了一处(`marks:`),放画的那一刻所在的一段。
+- 别用:上下文包里没有 `lecture:`。
+- 别用:课里没讲到他问的。这时照常讲解。
+- 别用:一节放两段。只放最要紧的那一段。
+
+## 写法
+
+- 第一行是课的 id 和一段时间,中间空一格。
+- id 照 `lecture.source` 抄,去掉前面的 `bundle ` 或 `video `。
+- 时间照 `lecture.lines` 抄:那一句的起点到下一句的起点,写成 `0:19-0:30`。
+- 只写起点,就放起点那一句。
+- 第二行可以写一句给孩子的话,写在卡上。
+- 讲稿里写 `[[play]]` 锚到它:念完这句,铺满放那一段,接着念下一句。
+- 放完画面停在那一段的末帧,不关。这句之后的话,对着末帧说。
+
+## 例子
+
+<!-- expect {"kind":"lecture","props":{"bundle":"2026-09-18-po13-jian-8","from":19000,"to":30000,"text":"再看一遍拆开那一捆。"}} -->
+```lecture
+2026-09-18-po13-jian-8 0:19-0:30
+再看一遍拆开那一捆。
+```
+
+卡后面的讲稿这样写:
+
+> 你画的就是这一捆。我们回到那里再看一遍。[[play]]
+> 拿走 8 根,这一捆还剩几根?
+
+<!-- expect {"kind":"lecture","props":{"bundle":"2026-09-18-po13-jian-8","from":30000}} -->
+```lecture
+2026-09-18-po13-jian-8 0:30
+```
+
+## 反例
+
+没写课包 id,只写了课名:
+
+<!-- expect {"kind":"text","warning":true} -->
+```lecture
+13减8 0:19-0:30
+```
+
+止写在起前面:
+
+<!-- expect {"kind":"text","warning":true} -->
+```lecture
+2026-09-18-po13-jian-8 0:30-0:19
+```
+
+## 孩子看到什么
+
+卡上是课名、那一段末尾的画面、「0:19–0:30 ▷」。点开是舞台:从那一段的开头放,带课里的声音,下面一条进度条。讲稿念到 `[[play]]` 那句,念完自己铺满放。
+
+## 你会收回什么
+
+`<job>/<n> lecture「…」 看完了这一段(0:19–0:30)` / `还没看完这一段(0:19–0:30)`。
+
+## 状态的形状
+
+`{"done": true}` —— 那一段放完过没有。

package/cards/paint/card.css

@@ -0,0 +1,20 @@
+/* 画图(cards/paint/card.md):题干、四格图(没画好时是分好的几幅)、词语宝库;宽屏上图在左、词语宝库在右(同练习册),窄了上下排;舞台里双指缩放 .zoom(同 image) */
+.c.c-paint { gap:12px; }
+.c.c-paint .pt-ask { font-size:18px; line-height:1.6; }
+.c.c-paint .pt-body { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
+/* 图最宽 520:iPad 横屏一屏放得下题干 + 图 */
+.c.c-paint .pt-art { flex:0 1 520px; min-width:0; display:flex; flex-direction:column; gap:8px; }
+.c.c-paint img { display:block; width:100%; aspect-ratio:1; border-radius:12px; animation:pt-in .9s ease; }
+@keyframes pt-in { from { opacity:0; } to { opacity:1; } }
+/* 还没画好:一幅一格,四幅时 2×2 */
+.c.c-paint .pt-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
+.c.c-paint .pt-grid.one { grid-template-columns:minmax(0, 1fr); }
+.c.c-paint .pt-cell { border:1.5px dashed var(--tint-plum-line); background:var(--tint-plum-bg); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; font-size:15px; line-height:1.55; min-height:96px; }
+.c.c-paint .pt-n { width:24px; height:24px; border-radius:12px; border:2px solid var(--pen-circle); color:var(--pen-circle); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; box-sizing:border-box; flex:none; }
+.c.c-paint .pt-wait { font-size:14px; color:var(--tint-plum-head); }
+.c.c-paint[data-drawn="drawing"] .pt-wait::after { content:'…'; animation:pt-dots 1.4s steps(4) infinite; display:inline-block; overflow:hidden; vertical-align:bottom; width:0; }
+@keyframes pt-dots { to { width:1.2em; } }
+/* 词语宝库:像练习册上贴着的那块蓝纸 */
+.c.c-paint .pt-words { flex:1 1 160px; max-width:320px; margin:0 auto; background:#dcebf8; border-radius:14px; padding:14px 22px; text-align:center; }
+.c.c-paint .pt-words b { display:block; font-size:16px; letter-spacing:3px; margin-bottom:6px; }
+.c.c-paint .pt-words span { font-size:18px; line-height:1.7; }

package/cards/paint/card.md

@@ -0,0 +1,77 @@
+# paint — 画图
+
+## 是什么
+
+孩子说清楚的一个故事,分好幅交给画家,应用画成一张连环画(四幅时 2×2,像练习册)。出题时带上题干和词语宝库,就是一道看图说话题。
+
+## 什么时候用 / 别用
+
+- 用:「你说我画」里,孩子把整段连着说过一遍、和你分好幅以后。
+- 用:「我来出题」里,词都落到了幅上、题干也定了。
+- 别用:故事还没说清楚。先接着问,画是奖励。
+- 别用:现成的图 → `image`;要孩子自己画 → `canvas`。
+
+## 写法
+
+- `题:` 题干,出题才写。
+- `词:` 词语宝库,用顿号隔开,出题才写。画不出来的词(突然、终于)也放这里。
+- `角色:` 一行一个,写成「名字:样子、颜色、衣服」。每幅都照这个样子画。孩子说的颜色就用孩子的。
+- 孩子没说样子,只写名字:`角色: 小熊`。
+- `1.` 起一幅一行,一到四幅。每幅只写看得见的:时间和天气、地方、谁、动作、表情、东西。
+- 每幅都写出角色的名字,不用「他」。
+- 不写心里想的、说的话,也不写「羞愧」这种看不见的词:写成「低着头,脸红红的」。
+- 一幅最多三个角色,一幅只画一件事。
+
+## 例子
+
+<!-- expect {"kind":"paint","props":{"panels":["春天的早上,地里。小熊弯着腰把西瓜种子埋进土里;小猴坐在树下吃桃子。","中午,大太阳。小熊提着水壶给小苗浇水;小猴躺在树荫下睡大觉。","夏天,小熊的地里结满大西瓜,小熊抱着一个笑着;小猴的地里只长了草。","小熊推着满满一车西瓜,递给小猴一个;小猴低着头,脸红红的,挠着后脑勺。"],"cast":[{"name":"小熊","look":"棕色,戴黄色草帽,穿绿色背带裤"},{"name":"小猴","look":"黄褐色,穿红背心"}]}} -->
+```paint
+角色: 小熊:棕色,戴黄色草帽,穿绿色背带裤
+角色: 小猴:黄褐色,穿红背心
+1. 春天的早上,地里。小熊弯着腰把西瓜种子埋进土里;小猴坐在树下吃桃子。
+2. 中午,大太阳。小熊提着水壶给小苗浇水;小猴躺在树荫下睡大觉。
+3. 夏天,小熊的地里结满大西瓜,小熊抱着一个笑着;小猴的地里只长了草。
+4. 小熊推着满满一车西瓜,递给小猴一个;小猴低着头,脸红红的,挠着后脑勺。
+```
+
+出题版,带题干和词语宝库:
+
+<!-- expect {"kind":"paint","props":{"ask":"图上画了谁?他们在干什么?结果怎么样?用上下面的词,写几句话。","words":["播种","睡大觉","满满","羞愧"],"panels":["春天的早上,小熊在地里播种;小猴坐在树下吃桃子。","小猴低着头,脸红红的。"]}} -->
+```paint
+题: 图上画了谁?他们在干什么?结果怎么样?用上下面的词,写几句话。
+词: 播种、睡大觉、满满、羞愧
+1. 春天的早上,小熊在地里播种;小猴坐在树下吃桃子。
+2. 小猴低着头,脸红红的。
+```
+
+## 反例
+
+没有分幅,解析不成,会退成一段文字:
+
+<!-- expect {"kind":"text","warning":true} -->
+```paint
+小熊和小猴种西瓜,小猴很懒,最后很羞愧。
+```
+
+五幅太多,解析不成:
+
+<!-- expect {"kind":"text","warning":true} -->
+```paint
+1. 早上
+2. 中午
+3. 下午
+4. 晚上
+5. 第二天
+```
+
+## 孩子看到什么
+
+题干一行;画好前是分好的几幅(孩子说的话)和「画家在画」;画好了图淡入,每格左上角一个圆圈数字;下面是词语宝库。点开铺满,能双指放大。`角色:` 不显示。没画成就一直是分好的几幅,孩子端不说没画成。
+
+## 你会收回什么
+
+孩子下一条消息的 `cards:` 里有一行:画好了,或没画成。你看不到图:想知道画得怎样,问孩子「哪里和你想的一样?哪里不一样?」。
+
+## 状态的形状
+
+没有。

package/cards/photo/card.css

@@ -0,0 +1,15 @@
+/* 拍给我看卡(cards/photo/card.md):相机 + 要拍什么;最后一节时下沿是答案栏「等你拍…」带拍照、相册,拍来的照片缩在下沿 */
+.c.c-photo { gap:6px; }
+.pc-row { display:flex; align-items:center; gap:14px; }
+.pc-ic { flex:none; width:52px; height:52px; border-radius:50%; background:#ffffff; border:1.5px solid var(--tint-plum-line); color:var(--tint-plum-head); display:inline-flex; align-items:center; justify-content:center; }
+.pc-ic svg { width:28px; height:28px; }
+.pc-t { font-size:22px; font-weight:600; line-height:1.4; }
+/* 等你拍:不等老师停下(末句不一定是问句),孩子刚发出去、在等老师时收起 */
+.kid-ans.snap { display:flex; flex-wrap:wrap; font-weight:400; color:var(--dim); cursor:default; }
+body.pending .kid-ans.snap { display:none; }
+.kid-ans.snap .ka-w { flex:1 1 auto; }
+.pc-go { display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 18px; border-radius:22px; background:var(--tint-plum-head); color:#ffffff; font-size:16px; font-weight:600; cursor:pointer; white-space:nowrap; }
+.pc-go.alt { background:#ffffff; color:var(--tint-plum-head); border:1.5px solid var(--tint-plum-line); }
+.pc-go svg { width:20px; height:20px; }
+/* 拍来的照片:缩在答案栏里,点开看大图 */
+.kid-ans .kp { flex:none; height:64px; width:auto; max-width:160px; border-radius:8px; object-fit:cover; border:1px solid var(--line); background:#ffffff; cursor:zoom-in; }

package/cards/photo/card.md

@@ -0,0 +1,61 @@
+# photo — 拍给我看
+
+## 是什么
+
+请孩子拍一张照片发给你:看图说话的那幅图、写好的那一页、做完的那道题。
+
+## 什么时候用 / 别用
+
+- 用:要看孩子手边的东西(书上的图、作业),请他拍下来发给你。
+- 用:孩子写完了、画完了,请他拍给你看。
+- 别用:只要孩子说一句话 → 末句问他就行,不用卡。
+- 别用:给孩子看一张图 → `image`。
+
+## 写法
+
+- 正文一行:要拍什么,最多 30 个字。
+- 放在一节的最后。一节只放一张。
+- 讲稿末句请孩子拍下来发给你。应用不再补提问卡。
+
+## 例子
+
+<!-- expect {"kind":"photo","props":{"text":"看图说话的那幅图"}} -->
+```photo
+看图说话的那幅图
+```
+
+<!-- expect {"kind":"photo","props":{"text":"写好的那一页"}} -->
+```photo
+写好的那一页
+```
+
+## 反例
+
+写了两行,解析不成,退成一段文字(孩子端没有拍照键):
+
+<!-- expect {"kind":"text","warning":true} -->
+```photo
+看图说话的那幅图
+拍正一点,字要清楚
+```
+
+要拍什么写成一大段,同样退成文字:
+
+<!-- expect {"kind":"text","warning":true} -->
+```photo
+请你把练习册第二十三页上面那幅小白兔和小灰兔种萝卜的四幅连环画整页拍下来发给我看看
+```
+
+## 孩子看到什么
+
+紫色卡:左边一个相机,右边大字写要拍什么。它在最后一节时,卡下沿写「等你拍…」,旁边「拍照」「相册」两颗按钮;点了进发照片屏(能裁、能圈、能配一句话),发给你。拍来的照片缩在卡下沿,配的话跟在旁边,点照片看大图。
+
+## 你会收回什么
+
+卡上没有状态。孩子拍来的照片随下一条消息到你手里,和他自己拍的作业照片一样:上下文包里有 `photos:` 与 `photoFiles:`,照板书写法的「作业照片」读。他配的话就是这条消息的字;没配就是「(拍了 N 张)」。
+
+孩子没拍、直接说话(「我找不到那幅图」),那句话也写在这张卡下沿。
+
+## 状态的形状
+
+没有。照片在消息里,不在卡上。

package/cards/read/card.css

@@ -0,0 +1,6 @@
+/* 点读卡(cards/read/card.md):一段一行,点了念,念的那段亮 */
+/* 点读:一段一行 */
+.c.c-read { gap:8px; }
+.rd { padding:12px 16px; border-radius:12px; background:#ffffff; border:1px solid var(--tint-sand-line); font-size:18px; line-height:1.6; cursor:pointer; }
+.rd.on { background:var(--hi); }
+#st-body .rd { font-size:22px; }

package/cards/read/card.md

@@ -0,0 +1,51 @@
+# read — 点读
+
+## 是什么
+
+一行一段、点哪段听哪段的卡:原文、古诗、课文、生词、单词表。每段会在后台配成一段音(你配了音色的话),孩子点了就念。
+
+## 什么时候用 / 别用
+
+- 用:要孩子反复听、跟着读的东西——古诗、课文原句、单词(英文后面可以跟中文)。
+- 用:超过两行的原文。`text` 卡是给你讲的,这张是给孩子读的。
+- 别用:你自己的解释、结论 → `text`。
+- 别用:一段里塞两句;一段就是孩子一次点的量。
+
+## 写法
+
+一行一段。英文后面可以跟中文(`apple 苹果`),念的时候整段一起念。
+
+## 例子
+
+<!-- expect {"kind":"read","props":{"segments":["床前明月光,疑是地上霜。","举头望明月,低头思故乡。"]}} -->
+```read
+床前明月光,疑是地上霜。
+举头望明月,低头思故乡。
+```
+
+<!-- expect {"kind":"read","props":{"segments":["apple 苹果","banana 香蕉","orange 橘子"]}} -->
+```read
+apple 苹果
+banana 香蕉
+orange 橘子
+```
+
+## 反例
+
+空的点读卡解析不成,会退成一段文字:
+
+<!-- expect {"kind":"text","warning":true} -->
+```read
+```
+
+## 孩子看到什么
+
+米色卡,每段一条白底的行;点一条就念那条(你配了音色就是你的声,配音还没生成好时先用浏览器的声),念的时候那条亮起来。讲稿的 `[词]` 落在段上是荧光笔。
+
+## 你会收回什么
+
+没有——点读不记状态(点了哪段不告诉你)。
+
+## 状态的形状
+
+没有。

package/cards/text/card.css

@@ -0,0 +1,3 @@
+/* 文字卡(cards/text/card.md):标题 .ct + 正文 .cb 的样子都在主题的 .c 里,这里没有要加的结构样式 */
+/* 提问卡(解析器在末句问句没配能答的卡时补的):字重同选择题的问题 .ch-q */
+.c.c-ask .cb { font-weight:600; }