@formicoidea/labre-core 0.58.0 → 0.60.0

package/dist/_pkgs/affine-block-table/table-cell.js

@@ -46,12 +46,14 @@ import { computed, effect, signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { colorList } from './color.js';
 import { ColumnMaxWidth, DefaultColumnWidth } from './consts.js';
+import { headerToggleMenuItem } from './header-menu.js';
 import { TableSelectionData, } from './selection-schema.js';
-import { cellContainerStyle, columnLeftIndicatorStyle, columnOptionsCellStyle, columnOptionsStyle, columnRightIndicatorStyle, rowBottomIndicatorStyle, rowOptionsCellStyle, rowOptionsStyle, rowTopIndicatorStyle, threePointerIconDotStyle, threePointerIconStyle, } from './table-cell-css.js';
+import { cellContainerStyle, columnLeftIndicatorStyle, columnOptionsCellStyle, columnOptionsStyle, columnRightIndicatorStyle, headerCellStyle, rowBottomIndicatorStyle, rowOptionsCellStyle, rowOptionsStyle, rowTopIndicatorStyle, threePointerIconDotStyle, threePointerIconStyle, } from './table-cell-css.js';
 export const TableCellComponentName = 'affine-table-cell';
 let TableCell = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
@@ -196,6 +198,22 @@ let TableCell = (() => {
             return this.closest('affine-table')
                 ?.topContenteditableElement;
         }
+        /**
+         * The header toggle sits in the first row's / first column's menu only: the
+         * header is positional (ADR 0043), so no other row could be the one it
+         * marks.
+         */
+        headerToggle(kind) {
+            const std = this.closest('affine-table')?.std;
+            const dataManager = this.dataManager;
+            return kind === 'row'
+                ? headerToggleMenuItem(std, kind, dataManager.headerRow$.peek(), on => dataManager.setHeaderRow(on))
+                : headerToggleMenuItem(std, kind, dataManager.headerColumn$.peek(), on => dataManager.setHeaderColumn(on));
+        }
+        get isHeader() {
+            return ((this.rowIndex === 0 && this.dataManager.headerRow$.value) ||
+                (this.columnIndex === 0 && this.dataManager.headerColumn$.value));
+        }
         openColumnOptions(target, column, columnIndex) {
             this.selectionController.setSelected({
                 type: 'column',
@@ -232,6 +250,7 @@ let TableCell = (() => {
                                         })),
                                     },
                                 }),
+                                ...(columnIndex === 0 ? [this.headerToggle('column')] : []),
                                 ...(column.backgroundColor
                                     ? [
                                         menu.action({
@@ -345,6 +364,7 @@ let TableCell = (() => {
                                         })),
                                     },
                                 }),
+                                ...(rowIndex === 0 ? [this.headerToggle('row')] : []),
                                 ...(row.backgroundColor
                                     ? [
                                         menu.action({
@@ -706,9 +726,20 @@ let TableCell = (() => {
             })
                 .catch(console.error);
         }
+        tdClass() {
+            return classMap({
+                [cellContainerStyle]: true,
+                [headerCellStyle]: this.isHeader,
+            });
+        }
         render() {
+            const header = this.isHeader ? '' : undefined;
             if (!this.text) {
-                return html `<td class=${cellContainerStyle} style=${this.tdStyle()}>
+                return html `<td
+        class=${this.tdClass()}
+        data-header=${ifDefined(header)}
+        style=${this.tdStyle()}
+      >
         <div
           style=${styleMap({
                     padding: '8px 12px',
@@ -729,7 +760,8 @@ let TableCell = (() => {
                 this.tdMouseLeave();
             }}
         @contextmenu=${this.onContextMenu}
-        class=${cellContainerStyle}
+        class=${this.tdClass()}
+        data-header=${ifDefined(header)}
         style=${this.tdStyle()}
       >
         <rich-text

package/dist/_pkgs/affine-block-table/table-data-manager.d.ts

@@ -20,6 +20,9 @@ export declare class TableDataManager {
         width: number;
     } | undefined>;
     readonly cellCountTips$: ReadonlySignal<string>;
+    /** ADR 0043: anything but a stored `true` reads as off. */
+    readonly headerRow$: ReadonlySignal<boolean>;
+    readonly headerColumn$: ReadonlySignal<boolean>;
     readonly rows$: ReadonlySignal<import("../affine-model/index.js").TableRow[]>;
     readonly columns$: ReadonlySignal<import("../affine-model/index.js").TableColumn[]>;
     readonly uiRows$: ReadonlySignal<(import("../affine-model/index.js").TableRow | {
@@ -43,7 +46,18 @@ export declare class TableDataManager {
     updateColumnOrder(columnId: string, newOrder: string): void;
     setRowBackgroundColor(rowId: string, color?: string): void;
     setColumnBackgroundColor(columnId: string, color?: string): void;
+    /**
+     * One call per gesture (a resize drag writes once, on release; a fit writes
+     * once), so the `captureSync` here makes each gesture its own undo step.
+     */
     setColumnWidth(columnId: string, width: number): void;
+    setHeaderRow(on: boolean): void;
+    setHeaderColumn(on: boolean): void;
+    /**
+     * `true` or absent, never `false` (ADR 0043): turning a header off deletes
+     * the key, so an off table stores exactly what a pre-0043 table stored.
+     */
+    private setHeader;
     clearRow(rowId: string): void;
     clearColumn(columnId: string): void;
     clearCellsBySelection(selection: TableAreaSelection): void;

package/dist/_pkgs/affine-block-table/table-data-manager.js

@@ -19,6 +19,9 @@ export class TableDataManager {
         this.virtualRowCount$ = signal(0);
         this.virtualWidth$ = signal();
         this.cellCountTips$ = computed(() => `${this.virtualRowCount$.value + this.rows$.value.length} x ${this.virtualColumnCount$.value + this.columns$.value.length}`);
+        /** ADR 0043: anything but a stored `true` reads as off. */
+        this.headerRow$ = computed(() => this.model.props.headerRow$.value === true);
+        this.headerColumn$ = computed(() => this.model.props.headerColumn$.value === true);
         this.rows$ = computed(() => {
             return Object.values(this.model.props.rows$.value).sort((a, b) => a.order > b.order ? 1 : -1);
         });
@@ -201,10 +204,48 @@ export class TableDataManager {
             }
         });
     }
+    /**
+     * One call per gesture (a resize drag writes once, on release; a fit writes
+     * once), so the `captureSync` here makes each gesture its own undo step.
+     */
     setColumnWidth(columnId, width) {
-        this.model.store.transact(() => {
-            if (this.model.props.columns[columnId]) {
-                this.model.props.columns[columnId].width = width;
+        const store = this.model.store;
+        if (store.readonly)
+            return;
+        const column = this.model.props.columns[columnId];
+        if (!column || column.width === width)
+            return;
+        store.captureSync();
+        store.transact(() => {
+            const target = this.model.props.columns[columnId];
+            if (target) {
+                target.width = width;
+            }
+        });
+    }
+    setHeaderRow(on) {
+        this.setHeader('headerRow', on);
+    }
+    setHeaderColumn(on) {
+        this.setHeader('headerColumn', on);
+    }
+    /**
+     * `true` or absent, never `false` (ADR 0043): turning a header off deletes
+     * the key, so an off table stores exactly what a pre-0043 table stored.
+     */
+    setHeader(key, on) {
+        const store = this.model.store;
+        if (store.readonly)
+            return;
+        if ((this.model.props[key] === true) === on)
+            return;
+        store.captureSync();
+        store.transact(() => {
+            if (on) {
+                this.model.props[key] = true;
+            }
+            else {
+                delete this.model.props[key];
             }
         });
     }

package/dist/_pkgs/affine-block-table/translations.d.ts

@@ -0,0 +1,14 @@
+import type { ChromeWording } from '../affine-shared/services/index.js';
+/**
+ * This package's own wordings, declared beside the code that renders them —
+ * the two header toggles of the row and column menus (ADR 0043). The menus'
+ * older labels ("Insert Left", "Delete"…) are still literals held by
+ * `literals.baseline.json`; they move here in their own pass.
+ */
+export declare const TABLE_HEADER_ROW: ChromeWording;
+export declare const TABLE_HEADER_COLUMN: ChromeWording;
+/**
+ * Every wording declared above, in declaration order — walked by
+ * `PACKAGE_WORDINGS` in `packages/affine/all/src/translations.ts`.
+ */
+export declare const TABLE_WORDINGS: readonly ChromeWording[];

package/dist/_pkgs/affine-block-table/translations.js

@@ -0,0 +1,22 @@
+/**
+ * This package's own wordings, declared beside the code that renders them —
+ * the two header toggles of the row and column menus (ADR 0043). The menus'
+ * older labels ("Insert Left", "Delete"…) are still literals held by
+ * `literals.baseline.json`; they move here in their own pass.
+ */
+export const TABLE_HEADER_ROW = [
+    'com.labre.table.header-row',
+    'Header row',
+];
+export const TABLE_HEADER_COLUMN = [
+    'com.labre.table.header-column',
+    'Header column',
+];
+/**
+ * Every wording declared above, in declaration order — walked by
+ * `PACKAGE_WORDINGS` in `packages/affine/all/src/translations.ts`.
+ */
+export const TABLE_WORDINGS = [
+    TABLE_HEADER_ROW,
+    TABLE_HEADER_COLUMN,
+];

package/dist/_pkgs/affine-components/highlight-dropdown-menu/highlight-duotone-icon.js

@@ -1,14 +1,14 @@
 import { HighLightDuotoneIcon } from '@blocksuite/icons/lit';
 import { css, LitElement } from 'lit';
 export class HighlightDuotoneIcon extends LitElement {
-    static { this.styles = css `
-    svg {
-      display: flex;
-      font-size: 20px;
-    }
-    svg > path:nth-child(1) {
-      fill: var(--color, unset);
-    }
+    static { this.styles = css `
+    svg {
+      display: flex;
+      font-size: 20px;
+    }
+    svg > path:nth-child(1) {
+      fill: var(--color, unset);
+    }
   `; }
     render() {
         return HighLightDuotoneIcon();

package/dist/_pkgs/affine-components/highlight-dropdown-menu/text-duotone-icon.js

@@ -1,17 +1,17 @@
 import { TextBackgroundDuotoneIcon } from '@blocksuite/icons/lit';
 import { css, LitElement } from 'lit';
 export class TextDuotoneIcon extends LitElement {
-    static { this.styles = css `
-    svg {
-      display: flex;
-      font-size: 20px;
-    }
-    svg > path:nth-child(1) {
-      fill: var(--background, unset);
-    }
-    svg > path:nth-child(3) {
-      fill: var(--color, unset);
-    }
+    static { this.styles = css `
+    svg {
+      display: flex;
+      font-size: 20px;
+    }
+    svg > path:nth-child(1) {
+      fill: var(--background, unset);
+    }
+    svg > path:nth-child(3) {
+      fill: var(--color, unset);
+    }
   `; }
     render() {
         return TextBackgroundDuotoneIcon();

package/dist/_pkgs/affine-gfx-mindmap/toolbar/mindmap-tool-button.d.ts

@@ -1,4 +1,4 @@
-import { EmptyTool } from '../../affine-gfx-pointer/index.js';
+import { TextTool } from '../../affine-gfx-text/index.js';
 import { EdgelessDraggableElementController } from '../../affine-widget-edgeless-toolbar/index.js';
 import { LitElement } from 'lit';
 import { type DraggableTool } from './basket-elements.js';
@@ -8,7 +8,7 @@ export declare class EdgelessMindmapToolButton extends EdgelessMindmapToolButton
     private readonly _style$;
     draggableController: EdgelessDraggableElementController<DraggableTool>;
     enableActiveBackground: boolean;
-    type: (typeof EmptyTool)[];
+    type: (typeof TextTool)[];
     get draggableTools(): DraggableTool[];
     get mindmaps(): import("./assets.js").ToolbarMindmapItem[];
     get crud(): import("../../affine-block-surface/index.js").EdgelessCRUDExtension;

package/dist/_pkgs/affine-gfx-template/builtin/other.d.ts

@@ -1,2 +1,6 @@
+import { type ChromeWording, type TranslationParams } from '../../affine-shared/services/index.js';
+import type { BlockStdScope } from '../../std/index.js';
 import type { TemplateCategory } from '../toolbar/template-type.js';
+/** Resolve a wording through the host, or its English fallback with no host. */
+export declare function tr(std: BlockStdScope | undefined, wording: ChromeWording, params?: TranslationParams): string;
 export declare const otherTemplateCategory: TemplateCategory;

package/dist/_pkgs/affine-gfx-template/builtin/other.js

@@ -66,7 +66,7 @@ function line(x1, y1, x2, y2, opts = {}) {
     };
 }
 /** Resolve a wording through the host, or its English fallback with no host. */
-function tr(std, wording, params) {
+export function tr(std, wording, params) {
     return std
         ? translateKey(std, ...wording, params)
         : fillPlaceholders(wording[1], params);

package/dist/_pkgs/affine-gfx-template/builtin/slides/build.d.ts

@@ -0,0 +1,81 @@
+import type { BlockStdScope } from '../../../std/index.js';
+import { type SurfaceChildBlockJSON, type SurfaceElementsJSON } from '../../make-snapshot.js';
+import { type SlideTextRole } from './consts.js';
+import type { SlideMask } from './masks.js';
+/**
+ * The one builder of the slide masks: a mask declaration (`masks.ts`) in, a
+ * template snapshot (one 1600 x 900 frame and the elements it holds) and a
+ * tile preview out. Nothing here knows a particular mask.
+ */
+/** The map key of the slide number, the LAST element of every mask. */
+export declare const SLIDE_NUMBER_KEY = "number";
+/** The map key of the footer line. */
+export declare const SLIDE_FOOTER_KEY = "footer";
+/** A text box's height for the lines it is sized for. */
+export declare function slideTextHeight(role: SlideTextRole, lines?: number): number;
+/** The elements of one mask, footer and slide number last, in paint order. */
+export declare function slideElements(mask: SlideMask, std?: BlockStdScope): SurfaceElementsJSON;
+/** The template content of one mask: a page, its surface, the frame. */
+export declare function slideSnapshot(mask: SlideMask, std?: BlockStdScope): {
+    type: string;
+    meta: {
+        id: string;
+        title: string;
+        createDate: number;
+        tags: never[];
+    };
+    blocks: {
+        type: string;
+        id: string;
+        flavour: string;
+        props: {
+            title: {
+                '$blocksuite:internal:text$': boolean;
+                delta: {
+                    insert: string;
+                }[];
+            };
+        };
+        children: {
+            type: string;
+            id: string;
+            flavour: string;
+            props: {
+                elements: SurfaceElementsJSON;
+            };
+            children: SurfaceChildBlockJSON[];
+        }[];
+    };
+};
+/**
+ * Write the slide number once, at placement: the inserted frame's rank among
+ * the document's frames in presentation order (`presentationIndex`, the
+ * legacy frames without one after the keyed ones, as the frame manager
+ * orders them). Later reordering does not renumber: the number is the
+ * author's text from then on.
+ *
+ * ponytail: the template snapshot carries no `presentationIndex`, so the
+ * inserted frame takes the schema default, `generateKeyBetweenV2(null,
+ * null)`, whose random suffix ranks it anywhere among the frames: the number
+ * is the frame's true rank, but that rank is arbitrary until the template
+ * job's `presentationIndex` middleware (a key after the last frame) lands,
+ * after which the new slide is always last. Nothing here changes then.
+ */
+export declare function numberSlide(std: BlockStdScope, insertedIds: string[]): void;
+/** The fields of a frame the slide number is ranked by. */
+type RankedFrame = {
+    props: {
+        presentationIndex?: string;
+    };
+};
+/** A frame's 1-based rank among `frames`; ties count as before it. */
+export declare function slideNumberOf<T extends RankedFrame>(own: T, frames: T[]): number;
+/**
+ * The tile: the slide itself, drawn from its own declaration at 1/10th, so a
+ * preview can never drift from what the mask inserts. Texts are bars, the
+ * light side of every colour is used (a tile is chrome on the panel's own
+ * paper), and the slide gets a hairline so a white slide shows on a white
+ * panel.
+ */
+export declare function slidePreview(mask: SlideMask): string;
+export {};

package/dist/_pkgs/affine-gfx-template/builtin/slides/build.js

@@ -0,0 +1,276 @@
+import { ColorScheme, ConnectorMode, FontFamily, PointStyle, resolveColor, ShapeStyle, StrokeStyle, TextAlign, } from '../../../affine-model/index.js';
+import { GfxControllerIdentifier } from '../../../std/gfx/index.js';
+import * as Y from 'yjs';
+import { makeTemplateSnapshot, surfaceText, } from '../../make-snapshot.js';
+import { SLIDE_SEED_FOOTER, SLIDE_SEED_IMAGE } from '../../translations.js';
+import { tr } from '../other.js';
+import { SLIDE_FOOTER_Y, SLIDE_HAIRLINE_WIDTH, SLIDE_HEIGHT, SLIDE_LINE_HEIGHT, SLIDE_MARGIN, SLIDE_PALETTES, SLIDE_RADIUS, SLIDE_TYPE, SLIDE_WIDTH, SLIDE_ZONE_STROKE_WIDTH, } from './consts.js';
+/**
+ * The one builder of the slide masks: a mask declaration (`masks.ts`) in, a
+ * template snapshot (one 1600 x 900 frame and the elements it holds) and a
+ * tile preview out. Nothing here knows a particular mask.
+ */
+/** The map key of the slide number, the LAST element of every mask. */
+export const SLIDE_NUMBER_KEY = 'number';
+/** The map key of the footer line. */
+export const SLIDE_FOOTER_KEY = 'footer';
+const xywh = (x, y, w, h) => `[${x},${y},${w},${h}]`;
+/** A text box's height for the lines it is sized for. */
+export function slideTextHeight(role, lines = 1) {
+    return Math.ceil(lines * SLIDE_TYPE[role].fontSize * SLIDE_LINE_HEIGHT);
+}
+const ALIGN = {
+    left: TextAlign.Left,
+    center: TextAlign.Center,
+    right: TextAlign.Right,
+};
+function textElement(zone, words, palette) {
+    const type = SLIDE_TYPE[zone.role];
+    return {
+        type: 'text',
+        text: surfaceText(words),
+        color: zone.tone === 'muted' ? palette.muted : palette.ink,
+        fontFamily: FontFamily.Inter,
+        fontSize: type.fontSize,
+        fontWeight: type.fontWeight,
+        textAlign: ALIGN[zone.align ?? 'left'],
+        hasMaxWidth: true,
+        xywh: xywh(zone.x, zone.y, zone.w, slideTextHeight(zone.role, zone.lines)),
+    };
+}
+function shapeElement(x, y, w, h, opts) {
+    const element = {
+        type: 'shape',
+        shapeType: opts.shapeType,
+        filled: opts.fill !== null,
+        fillColor: opts.fill ?? SLIDE_PALETTES.paper.paper,
+        strokeColor: opts.stroke,
+        strokeWidth: opts.dash ? SLIDE_ZONE_STROKE_WIDTH : SLIDE_HAIRLINE_WIDTH,
+        strokeStyle: opts.dash ? StrokeStyle.Dash : StrokeStyle.Solid,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        radius: opts.shapeType === 'rect' ? opts.radius : 0,
+        xywh: xywh(x, y, w, h),
+    };
+    if (opts.label !== undefined) {
+        const type = SLIDE_TYPE[opts.labelRole ?? 'caption'];
+        element.text = surfaceText(opts.label);
+        element.color = opts.labelColor;
+        element.fontFamily = FontFamily.Inter;
+        element.fontSize = type.fontSize;
+        element.fontWeight = type.fontWeight;
+        element.textAlign = TextAlign.Center;
+    }
+    return element;
+}
+/** A fill zone touching the frame's edge bleeds: no rounded corner there. */
+function bleeds(zone) {
+    return (zone.x <= 0 ||
+        zone.y <= 0 ||
+        zone.x + zone.w >= SLIDE_WIDTH ||
+        zone.y + zone.h >= SLIDE_HEIGHT);
+}
+function zoneElement(zone, palette, std) {
+    switch (zone.kind) {
+        case 'text':
+            return textElement(zone, zone.seed ? tr(std, zone.seed, zone.params) : (zone.digits ?? ''), palette);
+        case 'image':
+            return shapeElement(zone.x, zone.y, zone.w, zone.h, {
+                shapeType: zone.shape ?? 'rect',
+                fill: palette.hairline,
+                stroke: palette.zoneStroke,
+                dash: true,
+                radius: bleeds(zone) ? 0 : SLIDE_RADIUS,
+                label: tr(std, zone.label ?? SLIDE_SEED_IMAGE),
+                labelRole: 'body',
+                labelColor: palette.ink,
+            });
+        case 'card':
+            return shapeElement(zone.x, zone.y, zone.w, zone.h, {
+                shapeType: zone.shape ?? 'rect',
+                fill: zone.filled ? palette.hairline : null,
+                stroke: zone.stroke === 'muted' ? palette.muted : palette.hairline,
+                dash: false,
+                radius: SLIDE_RADIUS,
+                label: zone.label ? tr(std, zone.label, zone.params) : undefined,
+                labelRole: 'body',
+                labelColor: palette.ink,
+            });
+        case 'dot':
+            return shapeElement(zone.x, zone.y, zone.size, zone.size, {
+                shapeType: 'ellipse',
+                fill: palette.ink,
+                stroke: palette.ink,
+                dash: false,
+                radius: 0,
+            });
+        case 'line':
+            return {
+                type: 'connector',
+                mode: ConnectorMode.Straight,
+                stroke: palette.muted,
+                strokeWidth: SLIDE_HAIRLINE_WIDTH,
+                strokeStyle: StrokeStyle.Solid,
+                frontEndpointStyle: PointStyle.None,
+                rearEndpointStyle: zone.arrow ? PointStyle.Triangle : PointStyle.None,
+                source: { position: zone.from },
+                target: { position: zone.to },
+            };
+    }
+}
+/** The elements of one mask, footer and slide number last, in paint order. */
+export function slideElements(mask, std) {
+    const palette = SLIDE_PALETTES[mask.variant];
+    const elements = {};
+    mask.zones.forEach((zone, i) => {
+        elements[`z${i}`] = zoneElement(zone, palette, std);
+    });
+    const footerWidth = 800;
+    const numberWidth = 200;
+    elements[SLIDE_FOOTER_KEY] = textElement({
+        kind: 'text',
+        role: 'caption',
+        x: SLIDE_MARGIN,
+        y: SLIDE_FOOTER_Y,
+        w: footerWidth,
+        tone: 'muted',
+    }, tr(std, SLIDE_SEED_FOOTER), palette);
+    // The digits are rewritten at placement by `numberSlide`; "1" is what a
+    // copy shows before (and what `content`, the English build, carries).
+    elements[SLIDE_NUMBER_KEY] = textElement({
+        kind: 'text',
+        role: 'caption',
+        x: SLIDE_WIDTH - SLIDE_MARGIN - numberWidth,
+        y: SLIDE_FOOTER_Y,
+        w: numberWidth,
+        align: 'right',
+        tone: 'muted',
+    }, '1', palette);
+    return elements;
+}
+/**
+ * The mask's frame: the slide itself. Its title is the tile's name, resolved
+ * once at placement (a frame title is document content, ADR 0023). No
+ * `presentationIndex`: the schema default applies, like a pasted frame.
+ */
+function slideFrame(mask, elements, std) {
+    const name = tr(std, mask.name);
+    return {
+        type: 'block',
+        id: `block:slide-${mask.id}`,
+        flavour: 'affine:frame',
+        props: {
+            title: {
+                '$blocksuite:internal:text$': true,
+                delta: [{ insert: name }],
+            },
+            background: SLIDE_PALETTES[mask.variant].paper,
+            xywh: xywh(0, 0, SLIDE_WIDTH, SLIDE_HEIGHT),
+            index: 'a0',
+            childElementIds: Object.fromEntries(Object.keys(elements).map(id => [id, true])),
+        },
+        children: [],
+    };
+}
+/** The template content of one mask: a page, its surface, the frame. */
+export function slideSnapshot(mask, std) {
+    const elements = slideElements(mask, std);
+    return makeTemplateSnapshot(elements, mask.name[1], [
+        slideFrame(mask, elements, std),
+    ]);
+}
+/* ── Slide number ─────────────────────────────────────────────────────── */
+/**
+ * Write the slide number once, at placement: the inserted frame's rank among
+ * the document's frames in presentation order (`presentationIndex`, the
+ * legacy frames without one after the keyed ones, as the frame manager
+ * orders them). Later reordering does not renumber: the number is the
+ * author's text from then on.
+ *
+ * ponytail: the template snapshot carries no `presentationIndex`, so the
+ * inserted frame takes the schema default, `generateKeyBetweenV2(null,
+ * null)`, whose random suffix ranks it anywhere among the frames: the number
+ * is the frame's true rank, but that rank is arbitrary until the template
+ * job's `presentationIndex` middleware (a key after the last frame) lands,
+ * after which the new slide is always last. Nothing here changes then.
+ */
+export function numberSlide(std, insertedIds) {
+    if (std.store.readonly)
+        return;
+    const numberId = insertedIds.at(-1);
+    if (!numberId)
+        return;
+    const frames = std.store.getModelsByFlavour('affine:frame');
+    const own = frames.find(frame => frame.childIds.includes(numberId));
+    if (!own)
+        return;
+    std.get(GfxControllerIdentifier).updateElement(numberId, {
+        text: new Y.Text(String(slideNumberOf(own, frames))),
+    });
+}
+/** A frame's 1-based rank among `frames`; ties count as before it. */
+export function slideNumberOf(own, frames) {
+    const rank = (frame) => frame.props.presentationIndex || '\uffff';
+    const ownRank = rank(own);
+    return (1 + frames.filter(frame => frame !== own && rank(frame) <= ownRank).length);
+}
+/* ── Preview ──────────────────────────────────────────────────────────── */
+const light = (color) => resolveColor(color, ColorScheme.Light);
+/** A text line drawn as a bar, the width of its English words (roughly). */
+function textBars(zone, words, palette) {
+    const { fontSize } = SLIDE_TYPE[zone.role];
+    const height = Math.max(6, fontSize * 0.55);
+    const step = fontSize * SLIDE_LINE_HEIGHT;
+    const full = words.length * fontSize * 0.5;
+    const lines = Math.max(1, Math.min(zone.lines ?? 1, Math.ceil(full / zone.w)));
+    const fill = light(zone.tone === 'muted' ? palette.muted : palette.ink);
+    let out = '';
+    for (let i = 0; i < lines; i++) {
+        const remaining = full - i * zone.w;
+        const w = Math.max(fontSize, Math.min(zone.w, remaining));
+        const x = zone.align === 'center'
+            ? zone.x + (zone.w - w) / 2
+            : zone.align === 'right'
+                ? zone.x + zone.w - w
+                : zone.x;
+        out += `<rect x="${x}" y="${zone.y + i * step + (step - height) / 2}" width="${w}" height="${height}" rx="${height / 2}" fill="${fill}"/>`;
+    }
+    return out;
+}
+function previewZone(zone, palette) {
+    switch (zone.kind) {
+        case 'text':
+            return textBars(zone, zone.seed?.[1] ?? zone.digits ?? '', palette);
+        case 'image':
+        case 'card': {
+            const filled = zone.kind === 'image' || (zone.kind === 'card' && zone.filled);
+            const fill = filled ? light(palette.hairline) : 'none';
+            const stroke = light(zone.kind === 'card' && zone.stroke === 'muted'
+                ? palette.muted
+                : zone.kind === 'image'
+                    ? palette.zoneStroke
+                    : palette.hairline);
+            const dash = zone.kind === 'image' ? ' stroke-dasharray="16 12"' : '';
+            if (zone.shape === 'ellipse') {
+                return `<ellipse cx="${zone.x + zone.w / 2}" cy="${zone.y + zone.h / 2}" rx="${zone.w / 2}" ry="${zone.h / 2}" fill="${fill}" stroke="${stroke}" stroke-width="6"${dash}/>`;
+            }
+            return `<rect x="${zone.x}" y="${zone.y}" width="${zone.w}" height="${zone.h}" rx="${SLIDE_RADIUS}" fill="${fill}" stroke="${stroke}" stroke-width="6"${dash}/>`;
+        }
+        case 'dot':
+            return `<circle cx="${zone.x + zone.size / 2}" cy="${zone.y + zone.size / 2}" r="${zone.size / 2}" fill="${light(palette.ink)}"/>`;
+        case 'line':
+            return `<path d="M${zone.from[0]} ${zone.from[1]} L${zone.to[0]} ${zone.to[1]}" stroke="${light(palette.muted)}" stroke-width="6"/>`;
+    }
+}
+/**
+ * The tile: the slide itself, drawn from its own declaration at 1/10th, so a
+ * preview can never drift from what the mask inserts. Texts are bars, the
+ * light side of every colour is used (a tile is chrome on the panel's own
+ * paper), and the slide gets a hairline so a white slide shows on a white
+ * panel.
+ */
+export function slidePreview(mask) {
+    const palette = SLIDE_PALETTES[mask.variant];
+    const body = mask.zones.map(zone => previewZone(zone, palette)).join('');
+    return `<svg width="100%" height="100%" viewBox="-20 -20 ${SLIDE_WIDTH + 40} ${SLIDE_HEIGHT + 40}" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="${SLIDE_WIDTH}" height="${SLIDE_HEIGHT}" rx="16" fill="${light(palette.paper)}" stroke="${light(SLIDE_PALETTES.paper.hairline)}" stroke-width="8"/>${body}</svg>`;
+}