@fusion.dev/helix-headless 0.230.0 → 0.231.0

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.js

@@ -4,7 +4,7 @@ import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 import { fieldOf } from '../field.js';
-import { boundsOf, boxView, DragTurn, drawBox, inBox, nearestTo, SPATIAL_VIEW, turned, } from '../view.js';
+import { boundsOf, boxView, DragTurn, drawBox, inBox, nearestTo, PlotRoomWatch, SPATIAL_VIEW, turned, wordsFitted, } from '../view.js';
 const SERIES = 24;
 const TURNS = {
     ArrowDown: { across: 0, up: -1 },
@@ -22,6 +22,7 @@ let HelixHeadlessSpatialScatterChart = class HelixHeadlessSpatialScatterChart ex
         this.summaryLabel = '{count, plural, one {# point} other {# points}}: {x} across, {y} up, and {z} in depth.';
         this.rendered = false;
         this.camera = SPATIAL_VIEW;
+        this.plotRoom = new PlotRoomWatch(this);
         this.drag = new DragTurn((next) => {
             this.camera = next(this.camera);
         }, () => this.requestUpdate());
@@ -155,7 +156,7 @@ let HelixHeadlessSpatialScatterChart = class HelixHeadlessSpatialScatterChart ex
       ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
     renderFallback(field, at) {
-        const view = boxView(field.axes, this.camera, [], this.noBox);
+        const view = wordsFitted(this.plotRoom.room, (words) => boxView(field.axes, this.camera, [], this.noBox, words));
         const places = field.points.map((point, index) => {
             const box = [
                 inBox(field.axes.x, point.x),

package/dist/spatial-scatter-chart/view.d.ts

@@ -13,6 +13,7 @@
  * toward the viewer, which is the way back from the floor's back.
  */
 import { type Camera, type PagePoint, type Projection } from '@fusion.dev/helix-core';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import { type SVGTemplateResult } from 'lit';
 import type { PlotAxis } from './field.js';
 /**
@@ -52,6 +53,8 @@ export interface BoxView {
     /** The box's edges and its grid, as one path. */
     grid: string;
     labels: ViewLabel[];
+    /** How large the words are, as a share of `TICK_SIZE` and `NAME_SIZE`. */
+    words: number;
     /** A place in the box, on the page. */
     on(point: BoxPoint): PagePoint;
     /** How near the camera a place in the box stands: the larger, the nearer. */
@@ -74,7 +77,33 @@ export declare const boxView: (axes: {
     x: PlotAxis;
     y: PlotAxis;
     z: PlotAxis;
-}, camera: Camera, extra?: readonly PagePoint[], bare?: boolean) => BoxView;
+}, camera: Camera, extra?: readonly PagePoint[], bare?: boolean, words?: number) => BoxView;
+/** The drawing's box on the page, and the font size its words are measured against. */
+export interface PlotRoom {
+    font: number;
+    height: number;
+    width: number;
+}
+/**
+ * The view whose ticks stand at the box's font size or larger on the page.
+ *
+ * The drawing scales through its `viewBox`, so a tick written in the box's units
+ * shrinks with the box: measured October 2026 at 390 wide, 7.4 pixels on Scatter
+ * and Surface, under the 12 of the box's own font. The words widen the frame they
+ * are measured on, so the measure runs again on what they widened. Where nothing
+ * has measured the box, as on a server, the words stay at their written size.
+ */
+export declare const wordsFitted: (room: PlotRoom | undefined, draw: (words: number) => BoxView) => BoxView;
+/** Keeps a chart told the size and font size of the box its own drawing fills. */
+export declare class PlotRoomWatch implements ReactiveController {
+    private readonly host;
+    room: PlotRoom | undefined;
+    private box;
+    private sizes;
+    constructor(host: ReactiveControllerHost & HTMLElement);
+    hostUpdated(): void;
+    hostDisconnected(): void;
+}
 /**
  * The part of the page that holds `points`, `pad` beyond them on every side:
  * the frame of a drawing with no box, which fits its readings alone.

package/dist/spatial-scatter-chart/view.js

@@ -11,7 +11,7 @@ const WIDE = 0.58;
 export const TICK_SIZE = 0.13;
 export const NAME_SIZE = 0.15;
 const LABEL_GAP = 0.06;
-export const boxView = (axes, camera, extra = [], bare = false) => {
+export const boxView = (axes, camera, extra = [], bare = false, words = 1) => {
     const projection = projectionOf(camera);
     const [ex, ey, ez] = axes.extent ?? [1, 1, 1];
     const on = ([x, y, z]) => projection.at(x * ex, -z * ez, y * ey);
@@ -45,14 +45,18 @@ export const boxView = (axes, camera, extra = [], bare = false) => {
     }
     const text = (axis) => ({
         name: axis.name,
-        ticks: axis.ticks.map((tick, index) => ({
-            at: inBox(axis, tick),
-            text: axis.labels?.[index] ?? tickText(tick),
-        })),
+        ticks: axis.ticks.map((tick, index) => {
+            const label = axis.labels?.[index];
+            return {
+                at: inBox(axis, tick),
+                category: label !== undefined && !/\d/.test(label),
+                text: label ?? tickText(tick),
+            };
+        }),
     });
     const labels = bare
         ? []
-        : boxLabels((point) => ({ ...on(point), depth: depth(point) }), { x: text(axes.x), y: text(axes.y), z: text(axes.z) }, { gap: LABEL_GAP, name: NAME_SIZE, tick: TICK_SIZE, wide: WIDE });
+        : boxLabels((point) => ({ ...on(point), depth: depth(point) }), { x: text(axes.x), y: text(axes.y), z: text(axes.z) }, { gap: LABEL_GAP * words, name: NAME_SIZE * words, tick: TICK_SIZE * words, wide: WIDE });
     const corners = [];
     for (const x of [-1, 1]) {
         for (const y of [-1, 1]) {
@@ -62,7 +66,7 @@ export const boxView = (axes, camera, extra = [], bare = false) => {
         }
     }
     for (const one of labels) {
-        const size = one.name ? NAME_SIZE : TICK_SIZE;
+        const size = (one.name ? NAME_SIZE : TICK_SIZE) * words;
         const half = (one.text.length * size * WIDE) / 2;
         corners.push({ x: one.x - half, y: one.y - size }, { x: one.x + half, y: one.y + size });
     }
@@ -77,8 +81,51 @@ export const boxView = (axes, camera, extra = [], bare = false) => {
         labels,
         on,
         projection,
+        words,
     };
 };
+const WORD_PASSES = 4;
+const MOST_WORDS = 3;
+export const wordsFitted = (room, draw) => {
+    let view = draw(1);
+    if (!room) {
+        return view;
+    }
+    for (let pass = 0; pass < WORD_PASSES; pass += 1) {
+        const pixel = 1 / Math.min(room.width / view.bounds.width, room.height / view.bounds.height);
+        view = draw(Math.min(MOST_WORDS, Math.max(1, (room.font * pixel) / TICK_SIZE)));
+    }
+    return view;
+};
+export class PlotRoomWatch {
+    constructor(host) {
+        this.host = host;
+        host.addController(this);
+    }
+    hostUpdated() {
+        const box = this.host.shadowRoot?.querySelector('[part="fallback"]');
+        if (!box || box === this.box || typeof ResizeObserver !== 'function') {
+            return;
+        }
+        this.box = box;
+        this.sizes?.disconnect();
+        this.sizes = new ResizeObserver(([entry]) => {
+            const { height, width } = entry?.contentRect ?? { height: 0, width: 0 };
+            const font = Number.parseFloat(getComputedStyle(box).fontSize) || 16;
+            const was = this.room;
+            if (was?.width !== width || was.height !== height || was.font !== font) {
+                this.room = height > 0 && width > 0 ? { font, height, width } : undefined;
+                this.host.requestUpdate();
+            }
+        });
+        this.sizes.observe(box);
+    }
+    hostDisconnected() {
+        this.sizes?.disconnect();
+        this.sizes = undefined;
+        this.box = undefined;
+    }
+}
 export const boundsOf = (points, pad) => {
     if (points.length === 0) {
         return { height: 2 * pad, width: 2 * pad, x: -pad, y: -pad };
@@ -103,8 +150,8 @@ export const turned = (camera, across, up) => ({
     turn: camera.turn + across * VIEW_STEP,
 });
 export const drawBox = (view) => svg `<path d=${view.grid} part="grid"></path>${view.labels.map((label) => label.name
-    ? svg `<text dominant-baseline="central" font-size=${NAME_SIZE} part="axis-name" text-anchor="middle" x=${shortNumber(label.x)} y=${shortNumber(label.y)}>${label.text}</text>`
-    : svg `<text dominant-baseline="central" font-size=${TICK_SIZE} part="tick" text-anchor="middle" x=${shortNumber(label.x)} y=${shortNumber(label.y)}>${label.text}</text>`)}`;
+    ? svg `<text dominant-baseline="central" font-size=${NAME_SIZE * view.words} part="axis-name" text-anchor="middle" x=${shortNumber(label.x)} y=${shortNumber(label.y)}>${label.text}</text>`
+    : svg `<text dominant-baseline="central" font-size=${TICK_SIZE * view.words} part="tick" text-anchor="middle" x=${shortNumber(label.x)} y=${shortNumber(label.y)}>${label.text}</text>`)}`;
 export const nearestTo = (drawing, event, places, reach = 14) => {
     const matrix = drawing?.getScreenCTM?.();
     if (!matrix) {

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.d.ts

@@ -151,6 +151,7 @@ export declare class HelixHeadlessSpatialSurfaceChart extends HelixHeadlessSpati
     /** Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns. */
     private camera;
     /** A drag across the chart's own drawing, which turns its view. */
+    private readonly plotRoom;
     private readonly drag;
     /** Each reading where the chart's own drawing put it, which the pointer finds. */
     private placed;

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.js

@@ -3,7 +3,7 @@ import { AriaForwardController, CHART_PLOT, customElement, drawTooltip, formatWo
 import { html, nothing, svg, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-import { boundsOf, boxView, DragTurn, drawBox, inBox, nearestTo, SPATIAL_VIEW, shape, turned, } from '../../spatial-scatter-chart/view.js';
+import { boundsOf, boxView, DragTurn, drawBox, inBox, nearestTo, PlotRoomWatch, SPATIAL_VIEW, shape, turned, wordsFitted, } from '../../spatial-scatter-chart/view.js';
 import { levelOf, surfaceOf } from '../grid.js';
 const LIGHT = (() => {
     const [x, y, z] = [-0.45, 1, 0.35];
@@ -27,6 +27,7 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
         this.summaryLabel = '{count, plural, one {# reading} other {# readings}} of {y} over {x} and {z}, from {low} to {high}.';
         this.rendered = false;
         this.camera = SPATIAL_VIEW;
+        this.plotRoom = new PlotRoomWatch(this);
         this.drag = new DragTurn((next) => {
             this.camera = next(this.camera);
         }, () => this.requestUpdate());
@@ -162,7 +163,7 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
       ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
     renderFallback(field, at) {
-        const view = boxView(field.axes, this.camera, [], this.noBox);
+        const view = wordsFitted(this.plotRoom.room, (words) => boxView(field.axes, this.camera, [], this.noBox, words));
         const depths = field.depths.length;
         const boxed = field.cells.map((cell) => cell.value === undefined
             ? undefined

package/dist/spatial-treemap/root/spatial-treemap-root.d.ts

@@ -143,6 +143,7 @@ export declare class HelixHeadlessSpatialTreemap extends HelixHeadlessSpatialTre
     /** Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns. */
     private camera;
     /** A drag across the chart's own drawing, which turns its view. */
+    private readonly plotRoom;
     private readonly drag;
     /** Where the renderer draws the reading, which the tooltip points at. */
     private place;

package/dist/spatial-treemap/root/spatial-treemap-root.js

@@ -3,7 +3,7 @@ import { AriaForwardController, CHART_PLOT, customElement, drawTooltip, formatWo
 import { html, nothing, svg, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-import { boundsOf, boxView, DragTurn, drawBox, SPATIAL_VIEW, turned, } from '../../spatial-scatter-chart/view.js';
+import { boundsOf, boxView, DragTurn, drawBox, PlotRoomWatch, SPATIAL_VIEW, turned, wordsFitted, } from '../../spatial-scatter-chart/view.js';
 import { blocksDrawn, paintOrder, treemapOf, } from '../blocks.js';
 const TURNS = {
     ArrowDown: { across: 0, up: -1 },
@@ -21,6 +21,7 @@ let HelixHeadlessSpatialTreemap = class HelixHeadlessSpatialTreemap extends Mixi
         this.summaryLabel = '{count, plural, one {# item} other {# items}} in {groups, plural, one {# group} other {# groups}}, sized from {low} to {high}.';
         this.rendered = false;
         this.camera = SPATIAL_VIEW;
+        this.plotRoom = new PlotRoomWatch(this);
         this.drag = new DragTurn((next) => {
             this.camera = next(this.camera);
         }, () => this.requestUpdate());
@@ -155,7 +156,7 @@ let HelixHeadlessSpatialTreemap = class HelixHeadlessSpatialTreemap extends Mixi
       ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderSonify()}${this.renderTable()}`;
     }
     renderFallback(field, at) {
-        const view = boxView(field.axes, this.camera, [], this.noBox);
+        const view = wordsFitted(this.plotRoom.room, (words) => boxView(field.axes, this.camera, [], this.noBox, words));
         const blocks = blocksDrawn(field, view.projection);
         const active = blocks[at];
         const bounds = this.drag.frame(this.noBox

package/dist/table/column/table-column.d.ts

@@ -61,6 +61,10 @@ export { edgeOf } from '../edge.js';
  * current direction takes the heading's ink, so you can see which columns sort
  * and which way the table is sorted.
  *
+ * `menu` adds a small button after the chevrons, in a `DataTable`. The button
+ * opens a menu of what you can do with the column, and a press anywhere else on
+ * the heading still sorts. `DataTable` describes the rows.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Column header, Th
@@ -74,12 +78,15 @@ export { edgeOf } from '../edge.js';
  * @csspart column - The heading cell.
  * @csspart grip - The handle for moving the column, when the table allows it.
  * @csspart grip-mark - The icon on the grip.
+ * @csspart menu-button - The button that opens the column's menu, with `menu` in a `DataTable`.
+ * @csspart menu-mark - The icon on the menu button.
  * @csspart resizer - The edge that is dragged to change the width, when the column is resizable.
  * @csspart sort - The button that a sortable heading renders as.
  * @csspart sort-down - The lower chevron of `sort-mark`, which shows a descending sort.
  * @csspart sort-mark - The two chevrons on a sortable heading. To remove them, set `display: none` on this part.
  * @csspart sort-up - The upper chevron of `sort-mark`, which shows an ascending sort.
  *
+ * @cssstate has-menu - While the heading draws its menu button.
  * @cssstate sorted-ascending - While the table is sorted by this column, smallest first.
  * @cssstate sorted-descending - While the table is sorted by this column, largest first.
  */
@@ -126,6 +133,20 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * such a column is never sortable however it is marked.
      */
     field: string;
+    /**
+     * Draws a button in the heading that opens a menu of what you can do with the
+     * column, in a `DataTable`.
+     *
+     * The menu offers sorting where the column is `sortable`, moving where the
+     * table is `reorderable`, and hiding. It needs a `field`, and a `Table` ignores
+     * it.
+     */
+    menu: boolean;
+    /**
+     * The accessible name of the menu button. `{name}` is the heading text, and
+     * `{named}` is `no` for a column without one.
+     */
+    menuLabel: string;
     /**
      * The accessible name of the grip that moves the column. `{name}` is the
      * heading text, and `{named}` is `no` for a column without one, so the
@@ -281,6 +302,8 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      */
     order(row: Readonly<Record<string, unknown>>): unknown;
     protected willUpdate(changed: PropertyValues): void;
+    /** Whether the heading holds a menu button: `menu`, in a table that draws the menu. */
+    get drawsMenu(): boolean;
     /** The words of the heading, for naming the controls on it. */
     private get name();
     connectedCallback(): void;

package/dist/table/column/table-column.js

@@ -1,7 +1,7 @@
 var HelixHeadlessTableColumn_1;
 import { __decorate } from "tslib";
 import { customElement, formatWords, HelixBeforeResizeEvent, HelixElement, HelixResizedEvent, hostAria, inlineStep, internalsOf, isRtl, requestChange, valueAt, words, } from '@fusion.dev/helix-core';
-import { dotsSixVertical } from '@fusion.dev/helix-icons';
+import { dotsSixVertical, dotsThree } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -12,6 +12,8 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         this.cell = undefined;
         this.compare = undefined;
         this.field = '';
+        this.menu = false;
+        this.menuLabel = '{named, select, no {Column menu} other {{name} column menu}}';
         this.moveLabel = '{named, select, no {Move column} other {Move {name}}}';
         this.resizable = false;
         this.resizeLabel = '{named, select, no {Resize column} other {Resize {name}}}';
@@ -25,6 +27,8 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         this.gridCell = false;
         this.tabStop = false;
         this.sortWords = '';
+        this.menuDrawer = undefined;
+        this.menuFacts = '';
         this.drawn = 0;
         this.handleResizeStart = (event) => {
             if (event.button !== 0) {
@@ -84,13 +88,14 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        const named = this.movable || this.resizable;
+        const named = this.movable || this.resizable || this.drawsMenu;
         const host = !this.gridCell;
         hostAria(internalsOf(this), {
             label: host && named ? this.name : '',
             role: host ? 'columnheader' : '',
         });
         internalsOf(this).ariaSort = host && this.canSort ? (this.sorted ?? 'none') : null;
+        this.toggleState('has-menu', this.drawsMenu);
         this.toggleState('sorted-ascending', this.sorted === 'ascending');
         this.toggleState('sorted-descending', this.sorted === 'descending');
     }
@@ -98,11 +103,19 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         return this.partNamed('column');
     }
     get controls() {
-        return ['grip', 'sort', 'resizer'].flatMap((name) => {
+        return ['grip', 'sort', 'menu-button', 'resizer'].flatMap((name) => {
             const control = this.partNamed(name);
             return control ? [control] : [];
         });
     }
+    openMenu() {
+        const button = this.partNamed('menu-button');
+        button?.focus();
+        button?.click();
+    }
+    get drawsMenu() {
+        return this.menu && this.menuDrawer !== undefined;
+    }
     get name() {
         return this.textContent?.trim() ?? '';
     }
@@ -137,7 +150,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('textAlign') || changed.has('width')) {
+        if (changed.has('menu') || changed.has('textAlign') || changed.has('width')) {
             this.tellHolder();
         }
     }
@@ -169,12 +182,13 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         const grid = this.gridCell;
         const control = grid ? '-1' : nothing;
         const width = Math.min(4096, Math.max(HelixHeadlessTableColumn_1.NARROWEST, this.drawn));
+        const hasMenu = this.drawsMenu;
         return html `<span
       part="column"
       role=${grid ? 'columnheader' : nothing}
       tabindex=${grid ? (this.tabStop ? '0' : '-1') : nothing}
       aria-sort=${grid && this.canSort ? (this.sorted ?? 'none') : nothing}
-      aria-label=${grid && (this.movable || this.resizable) && name ? name : nothing}
+      aria-label=${grid && (this.movable || this.resizable || hasMenu) && name ? name : nothing}
     >${this.movable
             ? html `<button part="grip" type="button" tabindex=${control} aria-label=${formatWords(this, 'moveLabel', named)}>
             <svg aria-hidden="true" fill="currentColor" part="grip-mark" viewBox=${dotsSixVertical.viewBox}>
@@ -186,7 +200,19 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             <path d="M5.5 7.2 9 3.7l3.5 3.5" part="sort-up" />
             <path d="M5.5 10.8 9 14.3l3.5-3.5" part="sort-down" />
           </svg></button>`
-            : html `<slot></slot>`}${this.resizable
+            : html `<slot></slot>`}${hasMenu
+            ? this.menuDrawer?.(this, html `<button
+              part="menu-button"
+              slot="trigger"
+              type="button"
+              tabindex=${control}
+              aria-label=${formatWords(this, 'menuLabel', named)}
+            >
+              <svg aria-hidden="true" fill="currentColor" part="menu-mark" viewBox=${dotsThree.viewBox}>
+                ${unsafeSVG(dotsThree.content)}
+              </svg>
+            </button>`)
+            : nothing}${this.resizable
             ? html `<span
             part="resizer"
             role="separator"
@@ -215,6 +241,13 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTableColumn.prototype, "field", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTableColumn.prototype, "menu", void 0);
+__decorate([
+    words,
+    property({ attribute: 'menu-label' })
+], HelixHeadlessTableColumn.prototype, "menuLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'move-label' })
@@ -257,6 +290,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTableColumn.prototype, "sortWords", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableColumn.prototype, "menuDrawer", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableColumn.prototype, "menuFacts", void 0);
 __decorate([
     state()
 ], HelixHeadlessTableColumn.prototype, "drawn", void 0);