@formicoidea/labre-core 0.58.0 → 0.60.0

package/dist/_pkgs/affine-block-surface/framework-background/measure-text.js

@@ -0,0 +1,31 @@
+import { estimateBackgroundText } from './band-widths.js';
+/** `undefined` until first asked; `null` where there is no canvas to ask. */
+let offscreen;
+/**
+ * Measure background text with no painting context at hand — a hit test runs on
+ * a pointer event, not inside a paint — for `backgroundBandWidths`.
+ *
+ * A module-level offscreen 2D context where a document exists, so a hit box is
+ * measured with the same metrics the canvas paints with, and a band a long name
+ * widened is aimed at where it is drawn; the estimate where there is no
+ * document, or where the DOM is a test double that cannot measure.
+ *
+ * In a file of its own, out of the `./interchange` graph: `band-widths.ts` is
+ * reachable from that headless entry and must not touch the DOM
+ * (`interchange-headless.unit.spec.ts` in `affine/all`).
+ */
+export function measureBackgroundText(text, font) {
+    if (offscreen === undefined) {
+        offscreen =
+            typeof document === 'undefined'
+                ? null
+                : (document.createElement('canvas').getContext?.('2d') ?? null);
+    }
+    if (offscreen) {
+        offscreen.font = font;
+        const width = offscreen.measureText(text)?.width;
+        if (typeof width === 'number' && Number.isFinite(width))
+            return width;
+    }
+    return estimateBackgroundText(text, font);
+}

package/dist/_pkgs/affine-block-surface/framework-background/renderer.d.ts

@@ -1,8 +1,21 @@
 import type { GfxPrimitiveElementModel } from '../../std/gfx/index.js';
 import type { ElementRenderer } from '../renderer/elements/index.js';
 import type { FrameworkBackgroundDef } from './def.js';
+import { type BackgroundBandLayout } from './band-widths.js';
+/** What a framework may ask of the renderer beyond the declaration. */
+export interface FrameworkBackgroundRendererOptions<T> {
+    /**
+     * Called on every paint with the band widths that paint measured
+     * (`backgroundBandWidths`), before anything is drawn. Named consumer: the
+     * BPMN pool, which caches them on its model (`paintedBands`, a `@local()`
+     * field, never stored) so that picking — which asks the headless model —
+     * selects by the bands as painted. A consumer that writes must write only
+     * when the widths changed: a local write repaints.
+     */
+    onBands?: (model: T, layout: BackgroundBandLayout) => void;
+}
 /**
  * Build the canvas renderer of one declaration. Pure: the same declaration
  * always paints the same picture for the same model and size.
  */
-export declare function createFrameworkBackgroundRenderer<T extends GfxPrimitiveElementModel>(def: FrameworkBackgroundDef): ElementRenderer<T>;
+export declare function createFrameworkBackgroundRenderer<T extends GfxPrimitiveElementModel>(def: FrameworkBackgroundDef, options?: FrameworkBackgroundRendererOptions<T>): ElementRenderer<T>;

package/dist/_pkgs/affine-block-surface/framework-background/renderer.js

@@ -1,6 +1,8 @@
 import { TranslationProvider } from '../../affine-shared/services/index.js';
 import { notationColor, } from '../renderer/notation-tint.js';
 import { backgroundColor, backgroundInstanceZoneBand, backgroundInstanceZones, backgroundPlot, backgroundPoint, BROKEN_BACKGROUND_COLOR, DEFAULT_BACKGROUND_SURFACE, warnBrokenBackgroundColor, } from './def.js';
+import { backgroundBandWidths, backgroundFont, backgroundTextRoom, backgroundWrapLineHeight, DEFAULT_BACKGROUND_FONT_FAMILY, } from './band-widths.js';
+import { BACKGROUND_TEXT_FIT_PADDING, ellipsizeToWidth } from './ellipsis.js';
 import { backgroundInVariant, backgroundLabelText, backgroundTexts, backgroundVisible, } from './labels.js';
 /**
  * The framework-background PRIMITIVE (PF2.1): one renderer, driven entirely by
@@ -79,13 +81,6 @@ function rgba(hex, alpha) {
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgba(${r},${g},${b},${alpha})`;
 }
-function fontOf(style, fallbackFamily) {
-    const italic = style.italic ? 'italic ' : '';
-    const weight = style.weight ? `${style.weight} ` : '';
-    return `${italic}${weight}${style.size}px ${style.family ?? fallbackFamily}`;
-}
-/** The family a declaration that names none falls back to. */
-const DEFAULT_FONT_FAMILY = 'Inter, sans-serif';
 /**
  * Where an instance zone's name sits in its band when the declaration states no
  * offset: 8 model units in from the leading edge, 18 down from the top of the
@@ -103,9 +98,9 @@ const DEFAULT_INSTANCE_ZONE_LABEL_DY = 18;
  * Build the canvas renderer of one declaration. Pure: the same declaration
  * always paints the same picture for the same model and size.
  */
-export function createFrameworkBackgroundRenderer(def) {
+export function createFrameworkBackgroundRenderer(def, options = {}) {
     const palette = def.chrome?.palette;
-    const family = def.chrome?.fontFamily ?? DEFAULT_FONT_FAMILY;
+    const family = def.chrome?.fontFamily ?? DEFAULT_BACKGROUND_FONT_FAMILY;
     const surface = def.chrome?.surface ?? DEFAULT_BACKGROUND_SURFACE;
     const declared = (c) => backgroundColor(c, palette);
     const texts = backgroundTexts(def);
@@ -140,7 +135,16 @@ export function createFrameworkBackgroundRenderer(def) {
             .translateSelf(cx, cy)
             .rotateSelf(model.rotate)
             .translateSelf(-cx, -cy));
-        const plot = backgroundPlot(def, w, h);
+        // The bands as thick as their wrapped labels need, measured on this very
+        // context so the band holds exactly the lines painted in it. Every piece of
+        // chrome below paints from this plot; a declaration that wraps nothing gets
+        // its declared margin back without a measurement.
+        const layout = backgroundBandWidths(def, props, w, h, (text, font) => {
+            ctx.font = font;
+            return ctx.measureText(text).width;
+        }, translation);
+        options.onBands?.(model, layout);
+        const plot = backgroundPlot(def, w, h, layout.margin);
         const { x0, y0, x1, y1 } = plot;
         const pw = plot.width;
         const ph = plot.height;
@@ -150,26 +154,60 @@ export function createFrameworkBackgroundRenderer(def) {
             ctx.lineTo(bx, by);
             ctx.stroke();
         };
-        const drawText = (words, ax, ay, style, align, vertical) => {
+        const drawText = (words, ax, ay, style, align, vertical, 
+        /**
+         * The length the words may take, in model units; absent draws them
+         * whole. Measured AFTER the font is set, so the cut is in the font the
+         * words are drawn in.
+         */
+        room, 
+        /**
+         * The lines a wrapped label was broken into by `backgroundBandWidths`,
+         * drawn instead of `words`: stacked ACROSS the text's direction and
+         * centred on the anchor, one line height apart. Taken from the resolver
+         * rather than wrapped again here, so the band and its lines are one
+         * measurement.
+         */
+        wrapped) => {
             if (!words)
                 return;
-            if (vertical) {
-                ctx.save();
-                ctx.translate(ax, ay);
-                ctx.rotate(-Math.PI / 2);
-                ctx.font = fontOf(style, family);
+            const font = backgroundFont(style, family);
+            let shown;
+            if (wrapped)
+                shown = wrapped;
+            else if (room === undefined)
+                shown = [words];
+            else {
+                ctx.font = font;
+                shown = [ellipsizeToWidth(ctx, words, room)];
+            }
+            const lineHeight = backgroundWrapLineHeight(style);
+            shown.forEach((text, i) => {
+                if (!text)
+                    return;
+                // Zero for a single line, which is drawn exactly where it always was.
+                const across = (i - (shown.length - 1) / 2) * lineHeight;
+                if (vertical) {
+                    // Rotated -90°, the next line is to the RIGHT of the one before:
+                    // the glyphs' tops point left, so a reader turning their head reads
+                    // the lines left to right.
+                    ctx.save();
+                    ctx.translate(ax + across, ay);
+                    ctx.rotate(-Math.PI / 2);
+                    ctx.font = font;
+                    ctx.fillStyle = color(style.color);
+                    ctx.textAlign = align ?? 'center';
+                    ctx.textBaseline = style.baseline ?? 'alphabetic';
+                    ctx.fillText(text, 0, 0);
+                    ctx.restore();
+                    return;
+                }
+                ctx.font = font;
                 ctx.fillStyle = color(style.color);
-                ctx.textAlign = align ?? 'center';
+                ctx.textAlign = align ?? 'left';
                 ctx.textBaseline = style.baseline ?? 'alphabetic';
-                ctx.fillText(words, 0, 0);
-                ctx.restore();
-                return;
-            }
-            ctx.font = fontOf(style, family);
-            ctx.fillStyle = color(style.color);
-            ctx.textAlign = align ?? 'left';
-            ctx.textBaseline = style.baseline ?? 'alphabetic';
-            ctx.fillText(words, ax, ay);
+                ctx.fillText(text, ax, ay + across);
+            });
         };
         // ── 1. The card, and the bands that dress it ────────────────────────
         const border = surface.border;
@@ -330,8 +368,18 @@ export function createFrameworkBackgroundRenderer(def) {
                 continue;
             if (!visible(text.visibleProp))
                 continue;
-            const [tx, ty] = backgroundPoint(text.anchor, plot);
-            drawText(backgroundLabelText(text, props, translation), tx, ty, text.style, text.align, text.vertical === true);
+            const [px, py] = backgroundPoint(text.anchor, plot);
+            // A wrapped band label keeps its place relative to the middle of its
+            // band, however much the band grew (`BackgroundWrappedLabel.shift`).
+            const wrap = layout.labels.get(text);
+            const tx = px + (wrap?.shift[0] ?? 0);
+            const ty = py + (wrap?.shift[1] ?? 0);
+            const vertical = text.vertical === true;
+            drawText(backgroundLabelText(text, props, translation), tx, ty, text.style, text.align, vertical, 
+            // `'wrap'` on a text with no band to grow is cut like `'ellipsis'`.
+            text.fit !== undefined
+                ? backgroundTextRoom(tx, ty, text.align, vertical, w, h)
+                : undefined, wrap?.lines);
         }
         // The instance's own zone names, after the declared texts — the same order
         // the audit reports them in, and the same reason: what the framework says
@@ -350,6 +398,7 @@ export function createFrameworkBackgroundRenderer(def) {
             const dx = zoneLabel.dx ?? DEFAULT_INSTANCE_ZONE_LABEL_DX;
             const dy = zoneLabel.dy ?? DEFAULT_INSTANCE_ZONE_LABEL_DY;
             const stackY = instanceZonesDef?.stack === 'y';
+            const fitZone = zoneLabel.fit !== undefined;
             for (const zone of instanceZones) {
                 // The strip is drawn for EVERY zone, named or not: it is the lane's
                 // title band, and a lane whose name has been cleared still has one —
@@ -357,7 +406,7 @@ export function createFrameworkBackgroundRenderer(def) {
                 // a lane that silently loses its structure. The NAME is what is
                 // conditional, exactly as under the corner placement.
                 const strip = labelBand
-                    ? backgroundInstanceZoneBand(def, zone, plot)
+                    ? backgroundInstanceZoneBand(def, zone, plot, layout.zoneBandWidth)
                     : null;
                 if (strip && labelBand?.divider) {
                     const divider = labelBand.divider;
@@ -386,10 +435,14 @@ export function createFrameworkBackgroundRenderer(def) {
                     // strip, and a baseline anchor there would push the words against the
                     // divider.
                     const style = { ...zoneLabel.style, baseline: 'middle' };
-                    drawText(zone.name, strip.x + strip.w / 2, strip.y + strip.h / 2, style, 'center', stackY);
+                    drawText(zone.name, strip.x + strip.w / 2, strip.y + strip.h / 2, style, 'center', stackY, fitZone
+                        ? (stackY ? strip.h : strip.w) - 2 * BACKGROUND_TEXT_FIT_PADDING
+                        : undefined, layout.zoneLines.get(zone.id));
                     continue;
                 }
-                drawText(zone.name, x0 + zone.rect.x * pw + dx, y0 + zone.rect.y * ph + dy, zoneLabel.style, 'left', false);
+                drawText(zone.name, x0 + zone.rect.x * pw + dx, y0 + zone.rect.y * ph + dy, zoneLabel.style, 'left', false, fitZone
+                    ? zone.rect.w * pw - dx - BACKGROUND_TEXT_FIT_PADDING
+                    : undefined);
             }
         }
     };

package/dist/_pkgs/affine-block-surface/interchange-headless.d.ts

@@ -18,6 +18,8 @@
  */
 export * from './extensions/export-svg/marker-version.js';
 export * from './extensions/interchange.js';
+export * from './extensions/toolbox.js';
+export * from './extensions/legend-label.js';
 export * from './extensions/legend-role.js';
 export * from './extensions/svg-sanitize.js';
 export * from './extensions/svg-sketch.js';

package/dist/_pkgs/affine-block-surface/interchange-headless.js

@@ -18,6 +18,8 @@
  */
 export * from './extensions/export-svg/marker-version.js';
 export * from './extensions/interchange.js';
+export * from './extensions/toolbox.js';
+export * from './extensions/legend-label.js';
 export * from './extensions/legend-role.js';
 export * from './extensions/svg-sanitize.js';
 export * from './extensions/svg-sketch.js';

package/dist/_pkgs/affine-block-table/adapters/html.js

@@ -42,12 +42,12 @@ export const tableBlockHtmlAdapterMatcher = {
     fromBlockSnapshot: {
         enter: (o, context) => {
             const { walkerContext } = context;
-            const { columns, rows, cells } = o.node
+            const { columns, rows, cells, headerRow, headerColumn } = o.node
                 .props;
             const table = processTable(columns, rows, cells);
-            const createAstTableCell = (children) => ({
+            const createAstTableCell = (children, header) => ({
                 type: 'element',
-                tagName: 'td',
+                tagName: header ? 'th' : 'td',
                 properties: Object.create(null),
                 children: [
                     {
@@ -67,18 +67,30 @@ export const tableBlockHtmlAdapterMatcher = {
                 children: cells,
             });
             const { deltaConverter } = context;
-            const tableBodyAst = {
+            // ADR 0043: the header row goes in a `thead`, header cells are `th`.
+            const hasHeaderRow = headerRow === true && table.rows.length > 0;
+            const hasHeaderColumn = headerColumn === true;
+            const astRows = table.rows.map((v, rowIndex) => {
+                return createAstTableRow(v.cells.map((cell, columnIndex) => {
+                    return createAstTableCell(typeof cell.value === 'string'
+                        ? [{ type: 'text', value: cell.value }]
+                        : deltaConverter.deltaToAST(cell.value.delta), (hasHeaderRow && rowIndex === 0) ||
+                        (hasHeaderColumn && columnIndex === 0));
+                }));
+            });
+            const section = (tagName, children) => ({
                 type: 'element',
-                tagName: 'tbody',
+                tagName,
                 properties: Object.create(null),
-                children: table.rows.map(v => {
-                    return createAstTableRow(v.cells.map(cell => {
-                        return createAstTableCell(typeof cell.value === 'string'
-                            ? [{ type: 'text', value: cell.value }]
-                            : deltaConverter.deltaToAST(cell.value.delta));
-                    }));
-                }),
-            };
+                children,
+            });
+            const tableChildren = hasHeaderRow
+                ? [section('thead', astRows.slice(0, 1))]
+                : [];
+            const bodyRows = hasHeaderRow ? astRows.slice(1) : astRows;
+            if (!hasHeaderRow || bodyRows.length > 0) {
+                tableChildren.push(section('tbody', bodyRows));
+            }
             walkerContext
                 .openNode({
                 type: 'element',
@@ -87,7 +99,7 @@ export const tableBlockHtmlAdapterMatcher = {
                     border: true,
                     style: 'border-collapse: collapse;border-spacing: 0;',
                 },
-                children: [tableBodyAst],
+                children: tableChildren,
             })
                 .closeNode();
             walkerContext.skipAllChildren();

package/dist/_pkgs/affine-block-table/adapters/utils.d.ts

@@ -28,6 +28,7 @@ export declare const createTableProps: (deltasLists: RichTextType[][]) => {
 };
 export declare const parseTableFromHtml: (element: Element, astToDelta: (ast: HtmlAST) => RichTextType) => TableBlockPropsSerialized;
 export declare const parseTableFromMarkdown: (node: MarkdownTable, astToDelta: (ast: MarkdownAST) => RichTextType) => {
+    headerRow: true;
     columns: {
         [k: string]: TableColumn;
     };

package/dist/_pkgs/affine-block-table/adapters/utils.js

@@ -115,11 +115,23 @@ export const createTableProps = (deltasLists) => {
         cells,
     };
 };
+/**
+ * A row's cells in order, `td` and `th` alike: a body row may open on a `th`
+ * (a header column, which the HTML export writes since ADR 0043), and keeping
+ * only `td` dropped that cell.
+ */
+const rowCells = (tr) => tr.children.filter((child) => HastUtils.isElement(child) &&
+    (child.tagName === 'td' || child.tagName === 'th'));
 export const parseTableFromHtml = (element, astToDelta) => {
-    const headerRows = getAllTag(element, 'thead').flatMap(node => getAllTag(node, 'tr').map(tr => getAllTag(tr, 'th')));
-    const bodyRows = getAllTag(element, 'tbody').flatMap(node => getAllTag(node, 'tr').map(tr => getAllTag(tr, 'td')));
-    const footerRows = getAllTag(element, 'tfoot').flatMap(node => getAllTag(node, 'tr').map(tr => getAllTag(tr, 'td')));
+    const heads = getAllTag(element, 'thead');
+    const headerRows = heads.flatMap(node => getAllTag(node, 'tr').map(rowCells));
+    const bodyRows = getAllTag(element, 'tbody').flatMap(node => getAllTag(node, 'tr').map(rowCells));
+    const footerRows = getAllTag(element, 'tfoot').flatMap(node => getAllTag(node, 'tr').map(rowCells));
     const allRows = [...headerRows, ...bodyRows, ...footerRows];
+    // ADR 0043: a `thead` is a header row; a body whose every row opens on a
+    // `th` is a header column. `true` or absent, never `false`.
+    const headerRow = heads.length > 0;
+    const headerColumn = bodyRows.length > 0 && bodyRows.every(cells => cells[0]?.tagName === 'th');
     const rowTextLists = [];
     allRows.forEach(cells => {
         const row = [];
@@ -128,7 +140,11 @@ export const parseTableFromHtml = (element, astToDelta) => {
         });
         rowTextLists.push(row);
     });
-    return createTableProps(rowTextLists);
+    return {
+        ...createTableProps(rowTextLists),
+        ...(headerRow ? { headerRow: true } : {}),
+        ...(headerColumn ? { headerColumn: true } : {}),
+    };
 };
 /**
  * A cell holds rich text, and no inline matcher turns an `image` into a delta:
@@ -162,5 +178,7 @@ export const parseTableFromMarkdown = (node, astToDelta) => {
         });
         rowTextLists.push(rowText);
     });
-    return createTableProps(rowTextLists);
+    // GFM has no table without a header row: the first row always was one
+    // (ADR 0043).
+    return { ...createTableProps(rowTextLists), headerRow: true };
 };

package/dist/_pkgs/affine-block-table/header-menu.d.ts

@@ -0,0 +1,13 @@
+import type { BlockStdScope } from '../std/index.js';
+/**
+ * The "Header row" / "Header column" item of the first row's / first
+ * column's menu (ADR 0043): a plain action with the menu's check mark, the
+ * toggle-switch row of `menu.toggleSwitch` hands its click the value it was
+ * built with.
+ *
+ * Kept out of `table-cell.ts` on purpose: the literal guard treats every
+ * literal of a file that calls `translateKey` as covered when it equals some
+ * fallback, and the cell menus' older labels ("Copy", "Delete"…) are still
+ * untranslated literals its baseline must keep seeing.
+ */
+export declare function headerToggleMenuItem(std: BlockStdScope | undefined, kind: 'row' | 'column', on: boolean, toggle: (on: boolean) => void): (menu: import("../affine-components/context-menu/menu.js").Menu) => import("lit-html").TemplateResult<1> | undefined;

package/dist/_pkgs/affine-block-table/header-menu.js

@@ -0,0 +1,25 @@
+import { menu } from '../affine-components/context-menu/index.js';
+import { translateKey } from '../affine-shared/services/index.js';
+import { HeaderColumnIcon, HeaderRowIcon } from '@blocksuite/icons/lit';
+import { TABLE_HEADER_COLUMN, TABLE_HEADER_ROW } from './translations.js';
+/**
+ * The "Header row" / "Header column" item of the first row's / first
+ * column's menu (ADR 0043): a plain action with the menu's check mark, the
+ * toggle-switch row of `menu.toggleSwitch` hands its click the value it was
+ * built with.
+ *
+ * Kept out of `table-cell.ts` on purpose: the literal guard treats every
+ * literal of a file that calls `translateKey` as covered when it equals some
+ * fallback, and the cell menus' older labels ("Copy", "Delete"…) are still
+ * untranslated literals its baseline must keep seeing.
+ */
+export function headerToggleMenuItem(std, kind, on, toggle) {
+    const wording = kind === 'row' ? TABLE_HEADER_ROW : TABLE_HEADER_COLUMN;
+    return menu.action({
+        name: std ? translateKey(std, ...wording) : wording[1],
+        prefix: kind === 'row' ? HeaderRowIcon() : HeaderColumnIcon(),
+        isSelected: on,
+        testId: `table-header-${kind}-toggle`,
+        select: () => toggle(!on),
+    });
+}

package/dist/_pkgs/affine-block-table/selection-controller.d.ts

@@ -2,6 +2,13 @@ import type { UIEventStateContext } from '../std/index.js';
 import type { ReactiveController } from 'lit';
 import { type TableAreaSelection, TableSelectionData } from './selection-schema.js';
 import type { TableBlockComponent } from './table-block.js';
+/**
+ * The width that makes a column end where the table's scroll box ends: what
+ * the box offers minus what the other columns already take, never below
+ * `ColumnMinWidth`. `undefined` when nothing is left to give, so the caller
+ * writes nothing.
+ */
+export declare function remainingColumnWidth(available: number, otherColumnsWidth: number): number | undefined;
 export declare class SelectionController implements ReactiveController {
     readonly host: TableBlockComponent;
     constructor(host: TableBlockComponent);
@@ -16,6 +23,14 @@ export declare class SelectionController implements ReactiveController {
     private get clipboard();
     private get scale();
     widthAdjust(dragHandle: HTMLElement, event: MouseEvent): void;
+    /**
+     * Double-click on a column's resize handle: the column takes the room left
+     * between the table and the right edge of its scroll box. Measured in the
+     * table's own unscaled pixels (`clientWidth` ignores the edgeless zoom, the
+     * cells' rects do not, hence `getScale()`); the container's own padding and
+     * the virtual padding around the table are not room a column can take.
+     */
+    fitColumnToRemainingSpace(columnId: string): void;
     dragListener(): void;
     startColumnDrag(x: number, columnDragHandle: HTMLElement): {
         onMove: (x: number) => void;

package/dist/_pkgs/affine-block-table/selection-controller.js

@@ -3,9 +3,23 @@ import { IS_MOBILE } from '../global/env/index.js';
 import { computed } from '@preact/signals-core';
 import { ColumnMinWidth, DefaultColumnWidth } from './consts.js';
 import { TableSelection, TableSelectionData, } from './selection-schema.js';
+import { tableContainer } from './table-block-css.js';
 import { createColumnDragPreview, createRowDragPreview, TableCellComponentName, } from './table-cell.js';
 import { cleanSelection, isTableDragHandle } from './utils.js';
 const TEXT = 'text/plain';
+/**
+ * The width that makes a column end where the table's scroll box ends: what
+ * the box offers minus what the other columns already take, never below
+ * `ColumnMinWidth`. `undefined` when nothing is left to give, so the caller
+ * writes nothing.
+ */
+export function remainingColumnWidth(available, otherColumnsWidth) {
+    const remainder = Math.floor(available - otherColumnsWidth);
+    if (!Number.isFinite(remainder) || remainder <= 0)
+        return;
+    return Math.max(ColumnMinWidth, remainder);
+}
+const px = (value) => parseFloat(value) || 0;
 export class SelectionController {
     constructor(host) {
         this.host = host;
@@ -221,10 +235,58 @@ export class SelectionController {
         window.addEventListener('mousemove', onMove);
         window.addEventListener('mouseup', onUp);
     }
+    /**
+     * Double-click on a column's resize handle: the column takes the room left
+     * between the table and the right edge of its scroll box. Measured in the
+     * table's own unscaled pixels (`clientWidth` ignores the edgeless zoom, the
+     * cells' rects do not, hence `getScale()`); the container's own padding and
+     * the virtual padding around the table are not room a column can take.
+     */
+    fitColumnToRemainingSpace(columnId) {
+        if (this.dataManager.readonly$.peek())
+            return;
+        const container = this.host.querySelector(`.${tableContainer}`);
+        const firstRow = this.host.querySelector('tr');
+        if (!container || !firstRow)
+            return;
+        const containerStyle = getComputedStyle(container);
+        const inner = container.firstElementChild;
+        const innerStyle = inner instanceof HTMLElement ? getComputedStyle(inner) : undefined;
+        const available = container.clientWidth -
+            px(containerStyle.paddingLeft) -
+            px(containerStyle.paddingRight) -
+            px(innerStyle?.paddingLeft ?? '') -
+            px(innerStyle?.paddingRight ?? '');
+        const scale = this.scale;
+        let others = 0;
+        firstRow
+            .querySelectorAll('td[data-column-id]')
+            .forEach(cell => {
+            if (cell.dataset['columnId'] === columnId)
+                return;
+            others += cell.getBoundingClientRect().width / scale;
+        });
+        const width = remainingColumnWidth(available, others);
+        if (width === undefined)
+            return;
+        this.dataManager.setColumnWidth(columnId, width);
+    }
     dragListener() {
         if (IS_MOBILE || this.dataManager.readonly$.value) {
             return;
         }
+        this.host.disposables.addFromEvent(this.host, 'dblclick', event => {
+            const target = event.target;
+            if (!(target instanceof HTMLElement))
+                return;
+            const handle = target.closest('[data-width-adjust-column-id]');
+            const columnId = handle?.dataset['widthAdjustColumnId'];
+            if (!columnId)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.fitColumnToRemainingSpace(columnId);
+        });
         // Keep the pointer sequence inside the table too: in edgeless the canvas
         // listens for `pointerdown` and would start dragging the block.
         this.host.disposables.addFromEvent(this.host, 'pointerdown', event => {

package/dist/_pkgs/affine-block-table/table-cell-css.d.ts

@@ -1,4 +1,11 @@
 export declare const cellContainerStyle: string;
+/**
+ * A header cell (ADR 0043). Only a class, so an explicit row or column
+ * background — written inline by `tdStyle` — still wins over the tint. Not
+ * `table.headerBackground.default`: that token is the page colour in both
+ * themes, so the tint would not show.
+ */
+export declare const headerCellStyle: string;
 export declare const columnOptionsCellStyle: string;
 export declare const columnOptionsStyle: string;
 export declare const rowOptionsCellStyle: string;

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

@@ -10,6 +10,16 @@ export const cellContainerStyle = css({
     textAlign: 'start',
     verticalAlign: 'top',
 });
+/**
+ * A header cell (ADR 0043). Only a class, so an explicit row or column
+ * background — written inline by `tdStyle` — still wins over the tint. Not
+ * `table.headerBackground.default`: that token is the page colour in both
+ * themes, so the tint would not show.
+ */
+export const headerCellStyle = css({
+    fontWeight: 600,
+    backgroundColor: cssVarV2.layer.background.secondary,
+});
 export const columnOptionsCellStyle = css({
     position: 'absolute',
     height: '0',

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

@@ -23,6 +23,13 @@ export declare class TableCell extends TableCell_base {
     get hoverRowIndex$(): import("@preact/signals-core").Signal<number | undefined>;
     get inlineManager(): import("../std/inline/index.js").InlineManager<import("../affine-shared/types/index.js").AffineTextAttributes> | undefined;
     get topContenteditableElement(): import("../std/index.js").BlockComponent<import("../store/index.js").BlockModel<object>, import("../std/index.js").BlockService, string> | null | undefined;
+    /**
+     * 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.
+     */
+    private headerToggle;
+    private get isHeader();
     openColumnOptions(target: PopupTarget, column: TableColumn, columnIndex: number): void;
     openRowOptions(target: PopupTarget, row: TableRow, rowIndex: number): void;
     createColorPickerMenu(currentColor: string | undefined, select: (color?: string) => void): (menu: import("../affine-components/context-menu/menu.js").Menu) => import("lit-html").TemplateResult<1> | undefined;
@@ -43,6 +50,7 @@ export declare class TableCell extends TableCell_base {
     private readonly _handleKeyDown;
     connectedCallback(): void;
     firstUpdated(): void;
+    private tdClass;
     render(): import("lit-html").TemplateResult<1>;
 }
 export declare const createColumnDragPreview: (cells: TableCell[]) => HTMLDivElement;