@fusion.dev/helix-headless 0.197.1 → 0.199.0

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

@@ -0,0 +1,249 @@
+import { __decorate } from "tslib";
+import { AriaForwardController, CHART_PLOT, customElement, drawTooltip, formatWords, HelixElement, HelixPlotChangeEvent, HelixPlotTurnEvent, HelixReadingChangeEvent, HelixReadingPressEvent, isRtl, MixinChartSource, MixinChartStatus, spokenReading, words, } from '@fusion.dev/helix-core';
+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 { blocksDrawn, paintOrder, treemapOf, } from '../blocks.js';
+const TURNS = {
+    ArrowDown: { across: 0, up: -1 },
+    ArrowLeft: { across: -1, up: 0 },
+    ArrowRight: { across: 1, up: 0 },
+    ArrowUp: { across: 0, up: 1 },
+};
+const SERIES = 24;
+let HelixHeadlessSpatialTreemap = class HelixHeadlessSpatialTreemap extends MixinChartStatus(MixinChartSource(HelixElement)) {
+    constructor() {
+        super(...arguments);
+        this.groupBy = '';
+        this.noBox = false;
+        this.plotLabel = '3D treemap';
+        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.drag = new DragTurn((next) => {
+            this.camera = next(this.camera);
+        }, () => this.requestUpdate());
+        this.told = -1;
+        this.aria = new AriaForwardController(this, {
+            target: () => this.partNamed('plot'),
+        });
+        this.onPlotKeydown = (event) => {
+            const turn = TURNS[event.key];
+            if (!event.shiftKey || !turn || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.camera = turned(this.camera, turn.across, turn.up);
+            this.dispatchEvent(new HelixPlotTurnEvent(turn));
+        };
+        this.onDrawingMove = (event) => {
+            if (this.drag.move(event)) {
+                return;
+            }
+            if (event.pointerType === 'touch') {
+                return;
+            }
+            this.requestActive(this.blockAt(event), event.pointerType === 'pen' ? 'pen' : 'mouse');
+        };
+        this.onDrawingDown = (event) => {
+            this.drag.down(event);
+        };
+        this.onDrawingCancel = (event) => {
+            this.drag.up(event);
+        };
+        this.onDrawingLeave = (event) => {
+            if (event.pointerType !== 'touch') {
+                this.requestActive(-1, 'mouse');
+            }
+        };
+        this.onDrawingTap = (event) => {
+            if (this.drag.up(event)) {
+                return;
+            }
+            if (event.pointerType === 'touch') {
+                this.requestActive(this.blockAt(event), 'touch');
+            }
+        };
+    }
+    static { this.words = 'helix-spatial-treemap'; }
+    get field() {
+        const rows = this.sourceRows;
+        const columns = this.plottedColumns;
+        if (this.memo?.rows !== rows ||
+            this.memo.columns !== columns ||
+            this.memo.groupBy !== this.groupBy) {
+            this.memo = {
+                columns,
+                field: treemapOf(rows, columns, this.groupBy),
+                groupBy: this.groupBy,
+                rows,
+            };
+        }
+        return this.memo.field;
+    }
+    get active() {
+        return this.pointer.at;
+    }
+    get readings() {
+        return this.field.blocks.length;
+    }
+    rendererDrawn(on = true) {
+        this.rendered = on;
+        this.toggleState('drawn', on);
+    }
+    requestActive(index, kind = 'mouse') {
+        if (kind === 'touch') {
+            this.pointer.tapTo(index);
+        }
+        else if (index >= 0 || !this.pointer.keyed) {
+            this.pointer.set(index);
+        }
+    }
+    placeReading(at) {
+        this.place = at;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.pointer.axis = 'none';
+        this.pointer.onReading = (heard, detail) => {
+            const block = this.field.blocks[detail.index];
+            const told = { ...detail, index: block?.row ?? -1, label: block?.label ?? '' };
+            this.dispatchEvent(heard === 'press' ? new HelixReadingPressEvent(told) : new HelixReadingChangeEvent(told));
+        };
+    }
+    updated(changed) {
+        super.updated(changed);
+        const field = this.field;
+        if (field !== this.last) {
+            this.last = field;
+            this.dispatchEvent(new HelixPlotChangeEvent({ kind: 'data' }));
+        }
+        if (this.pointer.at !== this.told) {
+            this.told = this.pointer.at;
+            this.dispatchEvent(new HelixPlotChangeEvent({ kind: 'focus' }));
+        }
+        if (changed.has('place')) {
+            ;
+            this.renderRoot.querySelector('[for="helix-chart-mark"]')?.reposition?.();
+        }
+    }
+    blockAt(event) {
+        const block = event.composedPath()[0]?.closest?.('[data-index]');
+        const index = Number(block?.getAttribute('data-index') ?? -1);
+        return Number.isInteger(index) ? index : -1;
+    }
+    render() {
+        const field = this.field;
+        const readable = field.blocks.length > 0;
+        const at = this.pointer.at;
+        return html `<div
+        aria-describedby=${readable ? 'helix-chart-summary' : nothing}
+        aria-label=${this.named || this.plotLabel}
+        id=${CHART_PLOT}
+        part="plot"
+        role=${readable ? 'application' : 'img'}
+        tabindex=${readable ? '0' : nothing}
+        @keydown=${this.onPlotKeydown}
+      >
+        <slot></slot>
+        ${readable ? this.renderFallback(field, at) : nothing}
+        ${readable ? this.renderLive(field, at) : nothing}
+        ${this.renderTooltip(field.blocks[at]?.row)}
+      </div>
+      ${readable ? this.renderSummary(field) : this.renderStatus()}${this.renderTable()}`;
+    }
+    renderFallback(field, at) {
+        const view = boxView(field.axes, this.camera, [], this.noBox);
+        const blocks = blocksDrawn(field, view.projection);
+        const active = blocks[at];
+        const bounds = this.drag.frame(this.noBox
+            ? boundsOf(blocks.flatMap((block) => block.corners), 0.1)
+            : view.bounds, view.on([0, 0, 0]));
+        return html `<div aria-hidden="true" dir="ltr" ?hidden=${this.rendered} part="fallback">
+      <svg
+        part="drawing"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}"
+        xmlns="http://www.w3.org/2000/svg"
+        @click=${this.drag.click}
+        @pointercancel=${this.onDrawingCancel}
+        @pointerdown=${this.onDrawingDown}
+        @pointerleave=${this.onDrawingLeave}
+        @pointermove=${this.onDrawingMove}
+        @pointerup=${this.onDrawingTap}
+      >${this.noBox ? nothing : drawBox(view)}${paintOrder(view.projection, blocks).map((block) => svg `${this.renderBlock(field, block, at)}${block === active ? svg `<path d=${active.drawn.outline} part="ring"></path>` : nothing}`)}${active
+            ? svg `<foreignObject height="0.001" overflow="visible" width="0.001" x=${active.drawn.peak.x} y=${active.drawn.peak.y}>${this.renderOwnTooltip(field.blocks[at]?.row)}</foreignObject>`
+            : nothing}</svg>
+    </div>`;
+    }
+    renderBlock(field, block, at) {
+        const group = field.blocks[block.index]?.groupIndex ?? 0;
+        const short = (value) => Math.round(value * 1000) / 1000;
+        return svg `<g data-index=${block.index} part="block${block.index === at ? ' block-active' : ''}" style="--chart-series: var(--chart-series-${(group % SERIES) + 1})">${block.drawn.faces.map((face) => svg `<path d=${face.d} part="face" style="--spatial-treemap-shade: ${short(face.darken)}"></path>`)}</g>`;
+    }
+    renderLive(field, at) {
+        const row = this.sourceRows[field.blocks[at]?.row ?? -1];
+        const said = this.pointer.keyed && row
+            ? spokenReading(row, this.pointer.column, (cell) => this.pointer.shows(cell), this.pointer.position)
+            : '';
+        return html `<span aria-live="polite" part="live" role="status">${said}</span>`;
+    }
+    renderOwnTooltip(row) {
+        if (this.rendered || row === undefined || !this.sourceRows[row]) {
+            return nothing;
+        }
+        return drawTooltip(this.sourceRows, row, this.tag('tooltip'), { dir: isRtl(this) ? 'rtl' : 'ltr', fixed: true, placement: 'top', x: '0%', y: '0%' }, () => undefined);
+    }
+    renderTooltip(row) {
+        const place = this.place;
+        if (!this.rendered || !place || row === undefined || !this.sourceRows[row]) {
+            return nothing;
+        }
+        return drawTooltip(this.sourceRows, row, this.tag('tooltip'), {
+            dir: isRtl(this) ? 'rtl' : 'ltr',
+            fixed: true,
+            placement: 'top',
+            x: `${place.x * 100}%`,
+            y: `${place.y * 100}%`,
+        }, () => undefined);
+    }
+    renderSummary(field) {
+        const sizes = field.blocks.map((block) => block.size);
+        const said = formatWords(this, 'summaryLabel', {
+            count: field.blocks.length,
+            groups: field.groups.length,
+            high: Math.max(...sizes),
+            low: Math.min(...sizes),
+        });
+        return html `<p id="helix-chart-summary" part="summary">${said}</p>`;
+    }
+};
+__decorate([
+    property({ attribute: 'group-by' })
+], HelixHeadlessSpatialTreemap.prototype, "groupBy", void 0);
+__decorate([
+    property({ attribute: 'no-box', reflect: true, type: Boolean })
+], HelixHeadlessSpatialTreemap.prototype, "noBox", void 0);
+__decorate([
+    words,
+    property({ attribute: 'plot-label' })
+], HelixHeadlessSpatialTreemap.prototype, "plotLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'summary-label' })
+], HelixHeadlessSpatialTreemap.prototype, "summaryLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialTreemap.prototype, "rendered", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialTreemap.prototype, "camera", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialTreemap.prototype, "place", void 0);
+HelixHeadlessSpatialTreemap = __decorate([
+    customElement('helix-headless-spatial-treemap')
+], HelixHeadlessSpatialTreemap);
+export { HelixHeadlessSpatialTreemap };

package/dist/video/root/video-root.d.ts

@@ -196,6 +196,12 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * permitted is the browser's policy, and what follows a refused autoplay is a
      * paused player showing its start control, which is the correct thing to be
      * looking at.
+     *
+     * **Not where the reader asked for less motion**, or while the page has
+     * paused its motion, through `pauseMotion` or `Motion Toggle`: the player
+     * waits on its start control. A page that pauses its motion pauses a video
+     * that started itself, and one that lets it run again plays it again. A
+     * video the reader started is theirs, and neither touches it.
      */
     autoplay: boolean;
     /**
@@ -842,6 +848,14 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * render that draws them.
      */
     protected willUpdate(changed: PropertyValues): void;
+    /** What stops hearing the page's pause. */
+    private unpaused;
+    /** Whether the page's pause stopped a video that started itself, which letting motion run starts again. */
+    private heldByPage;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The page paused its motion, or let it run again, which a video that started itself follows. */
+    private readonly handlePageMotion;
     protected firstUpdated(changed: PropertyValues): void;
     /**
      * Mirrors playback onto the host as `data-playing`.

package/dist/video/root/video-root.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { activeCue, adoptTrack, auditName, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, formatWords, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, reportRuntime, SKIP_SECONDS, sameCopies, showCaption, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { activeCue, adoptTrack, auditName, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, formatWords, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, motionPaused, onMotionChange, onUnlessFalse, RemotePlaybackController, reducedMotion, reportRuntime, SKIP_SECONDS, sameCopies, showCaption, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { airplay, arrowClockwise, arrowCounterClockwise, closedCaptioning, cornersIn, cornersOut, dotsThreeVertical, download, gauge, pause, pictureInPicture, play, skipBack, skipForward, speakerHigh, speakerX, } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -216,6 +216,21 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         };
         this.said = '';
         this.captions = [];
+        this.heldByPage = false;
+        this.handlePageMotion = (paused) => {
+            const video = this.video;
+            if (!video || !this.autoplay) {
+                return;
+            }
+            if (paused && !video.paused) {
+                this.heldByPage = true;
+                video.pause();
+            }
+            else if (!paused && this.heldByPage) {
+                this.heldByPage = false;
+                void this.play();
+            }
+        };
     }
     static { this.words = 'helix-video'; }
     get conditions() {
@@ -456,9 +471,22 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             this.captionCount = this.captions.length;
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.unpaused ??= onMotionChange(this.handlePageMotion);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unpaused?.();
+        this.unpaused = undefined;
+    }
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
         this.finishHydration();
+        if (this.autoplay && (reducedMotion() || motionPaused())) {
+            this.heldByPage = motionPaused();
+            this.video?.pause();
+        }
         auditName(this, () => null, 'video', () => this.label !== '');
         const video = this.video;
         if (video) {
@@ -867,7 +895,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         poster=${this.poster || nothing}
         preload=${this.preload}
         crossorigin=${this.crossOrigin ?? nothing}
-        ?autoplay=${this.autoplay}
+        ?autoplay=${this.autoplay && !reducedMotion() && !motionPaused()}
         ?controls=${this.controls}
         ?disablepictureinpicture=${this.disablePictureInPicture}
         ?disableremoteplayback=${this.disableRemotePlayback}