@@ -136,3 +136,46 @@ describe("DueScale · 源码面判据（R5.4 的明文禁止 → 守卫）", ()
     expect(readProd(PROD[0]).stripped.join("\n").includes("@tauri-apps")).toBe(false);
   });
 });
+
+describe("DueScale · 生长落点（批 6 T30 · §8.6 #4「刻度生长」）", () => {
+  /** 句柄形态 = React 的 ref 对象（本件不碰 GSAP：动画归调用方的 `useScaleGrowth`）。 */
+  const newRef = (): { current: HTMLSpanElement | null } => ({ current: null });
+  const origins = (c: HTMLElement): string[] =>
+    [...c.querySelectorAll("[data-tick]")].map((el) => (el as HTMLElement).style.transformOrigin);
+
+  it("G1 · 目标回声 + 生长标记**只在首段**（逐序），句柄落在首段，且几何仍只由 intervals 决定", () => {
+    const growRef = newRef();
+    const { container } = render(
+      <DueScale due={3} intervals={[10, 2, 30]} granularity="exact" growTo={0.5} growRef={growRef} testId="scale" />,
+    );
+    expect(rootOf(container).getAttribute("data-grow-to")).toBe("0.5");
+    expect(attr(container, "data-grow"), "生长落点**恰**首段（逐序数组相等：集合相等测不出换位）").toEqual([
+      "1", null, null,
+    ]);
+    expect(attr(container, "data-tone"), "R3.4：#4 是「读数」面 ⇒ 首段声明 instrument").toEqual([
+      "instrument", null, null,
+    ]);
+    expect(growRef.current, "句柄必须落在首段（被动画的只有它）").toBe(container.querySelectorAll("[data-tick]")[0]);
+    expect(origins(container), "只有生长段有 transform-origin（静态样式，不进动效属性集合）").toEqual([
+      "bottom", "", "",
+    ]);
+    // 目标**不是**几何真源：段数与段高仍只由 due / intervalDays 决定（R8.4：不动 layout 属性）
+    expect(ticks(container)).toEqual(["0", "1", "2"]);
+    expect(attr(container, "data-interval")).toEqual(["10", "2", "30"]);
+  });
+
+  it("G2 · 不给 growTo ⇒ 零生长标记、零 transform-origin（T21 的静态形态逐字保留）", () => {
+    const { container, rerender } = render(<DueScale due={3} intervals={[10, 2, 30]} testId="scale" />);
+    expect(rootOf(container).getAttribute("data-grow-to")).toBeNull();
+    expect(attr(container, "data-grow")).toEqual([null, null, null]);
+    expect(attr(container, "data-tone")).toEqual([null, null, null]);
+    expect(origins(container)).toEqual(["", "", ""]);
+    const heights = [...container.querySelectorAll("[data-tick]")].map((el) => (el as HTMLElement).style.height);
+    rerender(<DueScale due={3} intervals={[10, 2, 30]} growTo={0.5} testId="scale" />);
+    expect(
+      [...container.querySelectorAll("[data-tick]")].map((el) => (el as HTMLElement).style.height),
+      "给了目标也不许改分段几何（height 不是动效属性）",
+    ).toEqual(heights);
+    expect(ticks(container)).toEqual(["0", "1", "2"]);
+  });
+});
@@ -6,8 +6,9 @@
  *              而签名动效 #4 要「生长 / 回缩」，前提是先有一个**可补间的几何量**（刻度长度）。
  *              本件就是那个承载面：长度 = 后端计数；逐段长度 = 单卡间隔。形态是 **div 条阵列**
  *              （不是内联 svg —— `ui/icons/no-inline-svg.test.ts` 明禁新增内联 svg）。
- *              🔴 交付边界：本件**只建静态形态**（承载面 + 数据接线 + 判据）。生长 / 回缩动效归
- *              **T30**（波 C）—— 本件交付时刻度是**静止的**，不许把 #4 说成已交付。
+ *              🔴 交付边界（T30 已更新本条）：本件仍是**静态承载面** —— 段数 / 段高只由 `due` 与
+ *              `intervals` 决定（零 GSAP、零 effect）；「生长 / 回缩」由**调用方**经 `growTo` + `growRef`
+ *              注入（编排在 `useScaleGrowth`，唯一 timeline），本件只提供落点（首段）与基调声明。
  * @ai-context: 数据真源（各一，且只此两处）：① 段数 = `count_due_cards` 的计数（`due` prop，由调用点
  *              透传 —— 本件**不发 IPC、不二次查询**，全件零 `@tauri-apps` 依赖）；② 逐段间隔 =
  *              `Flashcard.intervalDays`（`intervals` prop）。🔴 **禁止自造间隔**：本件不解析
@@ -23,15 +24,16 @@
  *              是 R4.5 琥珀族的**唯一**来源 —— 本件不写任何琥珀字面量，段色取 `currentColor` 继承）。
  *              基类 `ed-surface` 与它同元素（同 `ed-text--low-confidence` 的用法）；本件**不**用
  *              `<Surface>` 原语，因为新调用点要登记进 `surfaceResidual.ts`（本任务禁碰棘轮表）。
- * 副作用：**无**（纯展示：不读 store、不发 IPC、不写盘、无定时器、无 effect、无 GSAP）。
+ * 副作用：**无**（纯展示：不读 store、不发 IPC、不写盘、无定时器、无 effect、无 GSAP —— 即便 `growTo`
+ *      已给：动画由调用方的 hook 经 `growRef` 写 `transform`，本件自身不碰任何动效 API）。
  * 边界：① `due === 0` ⇒ 渲染**空刻度**（不落空态文案 —— 空态归调用点 `ReviewPage`）；
  *      ② `intervals[i] <= 0`（新卡 / 无复习记录）⇒ 画「无间隔」档，**不是** 0 长度（0 长度会让
  *      「新卡」与「这段不存在」不可分）；③ `intervals` 短于 `due`（后端队列上限 200 < 全量到期数）
  *      ⇒ 缺位段同样走「无间隔」档：「不在本轮队列里」≠「间隔为 0」，本件不替后端猜；
  *      ④ 段数多时靠 flex 压缩与裁切，**不省略 DOM 段** —— 段数恒等于 `due`（那正是判据 V1）。
  *      ⑤ 零裸 `<button>`（纯展示；`components/**` 在 `nativeButton` 棘轮域内）。
  */
-import type { CSSProperties, ReactElement } from "react";
+import type { CSSProperties, ReactElement, Ref } from "react";
 
 export interface DueScaleProps {
   /** 到期卡张数（来自 count_due_cards；**唯一**的"有多少"真源） */
@@ -44,13 +46,22 @@ export interface DueScaleProps {
    * `review_card` 返回体的**精确值**（PB2 ①域）。两个域**不得**互相冒充。
    */
   readonly granularity?: "day" | "exact";
+  /**
+   * **生长目标**（归一长度 0..1，T30/§8.6 #4）—— **受控**：由调用方从 `review_card` 的**精确**
+   * `intervalDays` 换算（`useScaleGrowth` 的 `intervalToScale`）。`null` / 缺省 ⇒ **不生长**：
+   * 刻度静止在 T21 的静态形态（本件**不**自造目标、不读 IPC）。
+   */
+  readonly growTo?: number | null;
+  /** 生长刻度的元素句柄（`useScaleGrowth` 的 `ref`）—— 被动画的**只有首段**（本轮在评的那张卡）。 */
+  readonly growRef?: Ref<HTMLSpanElement>;
 }
 
 /** 「无间隔」档的段高（px）—— 新卡 / 间隔 0 / 不在本轮队列内。**视觉常量，不是数据真源**。 */
-const TICK_NONE_PX = 6;
+export const TICK_NONE_PX = 6;
 /** 按天刻度的段高区间：1 天 ⇒ 8px，`TICK_DAY_CAP` 天及以上 ⇒ 28px（单调不减 ⇒ 间隔越长刻度越长）。 */
 const TICK_DAY_MIN_PX = 8;
-const TICK_DAY_MAX_PX = 28;
+/** 满刻度段高（px）—— **归一长度的分母**（`useScaleGrowth` 的 `intervalToScale` 复用同一个数）。 */
+export const TICK_DAY_MAX_PX = 28;
 /** 封顶天数：再长的间隔不再变高 —— 刻度要的是「可感觉」，不是「可测量」（不发明数字）。 */
 const TICK_DAY_CAP = 30;
 
@@ -59,8 +70,11 @@ function tickTier(days: number | undefined): "none" | "day" {
   return days === undefined || !Number.isFinite(days) || days <= 0 ? "none" : "day";
 }
 
-/** 一段刻度的**视觉长度**（px）。`days <= 0` 或未知 ⇒ 「无间隔」档的定长（**不是** 0 长度）。 */
-function tickHeight(days: number | undefined): number {
+/**
+ * 一段刻度的**视觉长度**（px）。`days <= 0` 或未知 ⇒ 「无间隔」档的定长（**不是** 0 长度）。
+ * **导出**给 `useScaleGrowth`：生长必须复用这**同一个**单调映射（两处各写一份必然会漂）。
+ */
+export function tickHeight(days: number | undefined): number {
   if (tickTier(days) === "none") return TICK_NONE_PX;
   const capped = Math.min(days as number, TICK_DAY_CAP);
   return Math.round(TICK_DAY_MIN_PX + ((capped - 1) / (TICK_DAY_CAP - 1)) * (TICK_DAY_MAX_PX - TICK_DAY_MIN_PX));
@@ -78,7 +92,7 @@ function tickLabel(index: number, days: number | undefined, granularity: "day" |
  *
  * 刻度底轨的琥珀来自 `ed-surface--due-glow` 的 `color: var(--ed-due)`（R4.5 的唯一合法来源）。
  */
-export default function DueScale({ due, intervals, testId, granularity = "day" }: DueScaleProps): ReactElement {
+export default function DueScale({ due, intervals, testId, granularity = "day", growTo = null, growRef }: DueScaleProps): ReactElement {
   // 段数 = 计数（防御：非有限值 / 负数 / 小数一律按 0 段或截断处理 —— 不 panic、不造幽灵段）
   const count = Number.isFinite(due) ? Math.max(0, Math.trunc(due)) : 0;
   const queueMarks = Math.min(intervals?.length ?? 0, count);
@@ -93,19 +107,34 @@ export default function DueScale({ due, intervals, testId, granularity = "day" }
     flex: "1 1 0", minWidth: 1, maxWidth: 5, background: "currentColor", borderRadius: 1,
   };
   return (
-    <div data-testid={testId} data-due={count} data-granularity={granularity} title={label} role="img" aria-label={label}>
+    <div
+      data-testid={testId}
+      data-due={count}
+      data-granularity={granularity}
+      data-grow-to={growTo === null ? undefined : String(growTo)}
+      title={label}
+      role="img"
+      aria-label={label}
+    >
       {count > 0 && (
         <div className="ed-surface ed-surface--sunken ed-surface--due-glow" style={lane}>
           {Array.from({ length: count }, (_, i) => {
             const days = intervals?.[i];
+            // 生长落点 = **首段**（当前卡的那一段）：它声明基调（R3.4：#4 = 读数面 ⇒ instrument）并接住
+            // 句柄；`transformOrigin: bottom` 是**静态**样式（不参与动画 —— 否则属性集合会多出
+            // `transform-origin`，越出 R8.4 的合成属性白名单）。
+            const grows = i === 0 && growTo !== null;
             return (
               <span
                 key={i}
+                ref={grows ? growRef : undefined}
                 data-tick={i}
                 data-tier={tickTier(days)}
+                data-grow={grows ? "1" : undefined}
+                data-tone={grows ? "instrument" : undefined}
                 data-interval={days === undefined ? undefined : String(days)}
                 title={tickLabel(i, days, granularity)}
-                style={{ ...tick, height: tickHeight(days) }}
+                style={{ ...tick, height: tickHeight(days), transformOrigin: grows ? "bottom" : undefined }}
               />
             );
           })}
 
@@ -14,6 +14,7 @@ const { invokeMock } = vi.hoisted(() => ({ invokeMock: vi.fn() }));
 vi.mock("@tauri-apps/api/core", () => ({ invoke: invokeMock }));
 
 import ReviewSessionPanel from "./ReviewSessionPanel";
+import { intervalToScale } from "./useScaleGrowth";
 
 function card(id: number, front: string, back: string, kind = "fact"): Flashcard {
   return {
@@ -125,3 +126,65 @@ describe("ReviewSessionPanel 复习流", () => {
     expect(onExit).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("ReviewSessionPanel · 刻度生长（批 6 T30 · §8.6 #4 · PB2 精确域）", () => {
+  /** 生长刻度的**受控目标回声**（`DueScale` 根上的 `data-grow-to`）—— 由 `review_card` 的精确值换算 */
+  const growToAttr = (): string | null =>
+    screen.getByTestId("session-interval-scale").getAttribute("data-grow-to");
+  const scaleTick = (): HTMLElement =>
+    screen.getByTestId("session-interval-scale").querySelector("[data-tick]") as HTMLElement;
+  /** 两张卡的队列 + 按 cardId 给不同的精确 `intervalDays`（模拟「记得 ⇒ 变长 / 忘了 ⇒ 回缩」） */
+  const mockExact = (byCard: Readonly<Record<number, number>>): void => {
+    invokeMock.mockImplementation(async (cmd: string, args: Record<string, unknown>) => {
+      const id = Number(args.cardId);
+      if (cmd === "list_due_cards") return [card(41, "甲卡", "甲背"), card(42, "乙卡", "乙背")];
+      if (cmd === "review_card") return { ...card(id, "卡", "背"), intervalDays: byCard[id] ?? 1 };
+      throw new Error(`unexpected: ${cmd}`);
+    });
+  };
+
+  it("R1 · 目标由精确 intervalDays 驱动（不是 due 计数）：返回 10 ⇒ data-grow-to == intervalToScale(10)", async () => {
+    mockExact({ 41: 10, 42: 10 });
+    renderPanel();
+    // 评分前：没有精确值 ⇒ 零目标（不猜、不预置 0）
+    expect(await screen.findByTestId("session-interval-scale")).toBeTruthy();
+    expect(growToAttr()).toBeNull();
+    expect(scaleTick().getAttribute("data-tier")).toBe("none");
+    fireEvent.click(screen.getByText("回忆完成 · 查看答案"));
+    fireEvent.click(screen.getByText("记得"));
+    await waitFor(() => expect(growToAttr()).toBe(String(intervalToScale(10))));
+    expect(growToAttr(), "若目标由 due（=1）驱动，读数会等于 intervalToScale(1)").not.toBe(
+      String(intervalToScale(1)),
+    );
+    expect(screen.getByTestId("session-interval-scale").getAttribute("data-granularity")).toBe("exact");
+    expect(screen.getByTestId("session-interval-scale").getAttribute("data-due")).toBe("1");
+    expect(scaleTick().getAttribute("data-interval"), "精确域：10 天（行派生的整天近似冒充不了它）").toBe("10");
+    expect(scaleTick().getAttribute("title"), "精确域的标签不带「约…整天粒度」").toBe("第 1 段 · 10 天");
+  });
+
+  it("R2 · 答「忘了」⇒ 目标回缩（30 → 1：终值 < 起始值的 1/2，方向断言）", async () => {
+    mockExact({ 41: 30, 42: 1 });
+    renderPanel();
+    fireEvent.click(await screen.findByText("回忆完成 · 查看答案"));
+    fireEvent.click(screen.getByText("记得"));
+    await waitFor(() => expect(growToAttr()).toBe(String(intervalToScale(30))));
+    const grown = Number(growToAttr());
+    fireEvent.click(await screen.findByText("回忆完成 · 查看答案"));
+    fireEvent.click(screen.getByText("忘了"));
+    await waitFor(() => expect(growToAttr()).toBe(String(intervalToScale(1))));
+    const shrunk = Number(growToAttr());
+    expect(shrunk, "防空真：两个目标必须不同").toBeLessThan(grown);
+    expect(shrunk, "回缩方向：终值必须不到起始值的一半").toBeLessThan(grown / 2);
+    expect(shrunk).toBeGreaterThan(0);
+  });
+
+  it("R3 · 缺 intervalDays（后端只回 true）⇒ 不生长、不抛、不猜（「缺失」≠「间隔为 0」）", async () => {
+    renderPanel();
+    fireEvent.click(await screen.findByText("回忆完成 · 查看答案"));
+    fireEvent.click(screen.getByText("记得"));
+    await waitFor(() => expect(screen.getByTestId("session-progress").textContent).toBe("2/2"));
+    expect(growToAttr(), "缺字段 ⇒ 零目标（把它当 0 天就会把刻度清零）").toBeNull();
+    expect(scaleTick().getAttribute("data-tier")).toBe("none");
+    expect(screen.queryByTestId("session-last-interval")).toBeNull();
+  });
+});
@@ -19,6 +19,8 @@ import { useCallback, useEffect, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import type { Flashcard } from "../../types/notes";
 import PromoteCardButton from "../PromoteCardButton";
+import DueScale from "./DueScale";
+import { intervalToScale, useScaleGrowth } from "./useScaleGrowth";
 import { Loading, Skeleton, StatusLine, Text } from "../../ui/primitives";
 
 /** 四档评分按钮（文案=回忆质量自评） */
@@ -89,6 +91,11 @@ export default function ReviewSessionPanel({ groupId, groupName, active = true,
 
   const current = queue[index] ?? null;
 
+  // 刻度生长的落点（§8.6 #4）：目标只由 `review_card` 的 `intervalDays`（PB2 ①域 = 精确值）驱动，
+  // **不**由 `due` 计数驱动（绑总数会出现「回缩了但数字没变」—— 本页总到期数走 token 门控重载）。
+  const growTo = intervalToScale(lastInterval);
+  const growth = useScaleGrowth(growTo);
+
   const rate = async (rating: string) => {
     if (!current) return;
     try {
@@ -129,6 +136,19 @@ export default function ReviewSessionPanel({ groupId, groupName, active = true,
         </button>
       </div>
 
+      {/* 本卡刻度生长/回缩的落点（§8.6 #4）：间隔取 `review_card` 的**精确值**（`granularity="exact"`
+          —— 行派生的整天值不许冒充精确值，PB2 双精度域）；`due` 恒 = 1 = 当前这张卡。 */}
+      <div style={{ padding: "0 16px 8px", flexShrink: 0 }}>
+        <DueScale
+          due={current ? 1 : 0}
+          intervals={lastInterval === null ? undefined : [lastInterval]}
+          granularity="exact"
+          growTo={growTo}
+          growRef={growth.ref}
+          testId="session-interval-scale"
+        />
+      </div>
+
       <div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: 24 }}>
         <div style={{ maxWidth: 640, margin: "0 auto" }}>
           {!loaded && (