@phis/ui 0.2.0 → 0.3.0

package/plugins/runtime-modules/core/widgets/float-button/config.js

@@ -0,0 +1,129 @@
+import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
+import { readPhiLengthValue } from "../../../../../types/length";
+import { PHI_COMMAND_CONTROL_SIGNALS } from "../../../../../components/widgets/signals/control-signal-capabilities";
+import { readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
+import { parsePhiControlConfig, } from "../../../../../components/widgets/config/control-signal-config";
+import { PHI_COMMAND_BUTTONS_SIGNAL_SUBCONTROLS, buildPhiCommandButtonsField, createPhiCommandButton, readPhiCommandButtons, } from "../../../../../components/widgets/config/command-buttons";
+const PHI_FLOAT_BUTTON_PLACEMENTS = ["bottom-end", "bottom-start", "top-end", "top-start"];
+const PHI_FLOAT_BUTTON_GROUP_DIRECTIONS = ["top", "bottom", "left", "right"];
+function readOneOf(value, allowed) {
+    const text = readString(value);
+    return allowed.includes(text ?? "") ? text : undefined;
+}
+function parsePhiFloatButtonWidgetConfig(config) {
+    return {
+        ...readRenderableBlockConfig(config),
+        ...parsePhiControlConfig(config, { key: "float" }),
+        buttons: readPhiCommandButtons(config.buttons),
+        placement: readOneOf(config.placement, PHI_FLOAT_BUTTON_PLACEMENTS) ?? "bottom-end",
+        offsetBlock: readPhiLengthValue(config.offsetBlock) ?? undefined,
+        offsetInline: readPhiLengthValue(config.offsetInline) ?? undefined,
+        shape: readString(config.shape) === "square" ? "square" : "circle",
+        groupTrigger: readOneOf(config.groupTrigger, ["click", "hover"]),
+        groupIcon: readString(config.groupIcon),
+        groupDirection: readOneOf(config.groupDirection, PHI_FLOAT_BUTTON_GROUP_DIRECTIONS),
+    };
+}
+/** The entry fields offered only while the Float Button is square, read from the Widget around them. */
+const PHI_FLOAT_BUTTON_SQUARE = { field: "shape", scope: "parent", equals: "square" };
+/** A corner holds fewer buttons than a toolbar: past six, a group covers the Page it floats over. */
+export const PHI_FLOAT_BUTTON_BOUNDS = { min: 1, max: 6 };
+export const PHI_FLOAT_BUTTON_WIDGET_DEFINITION = {
+    kind: "widget",
+    pluginKey: resolvePhiCmsWidgetPluginKey("float-button"),
+    typeKey: "float-button",
+    title: "Float Button",
+    description: "Buttons fixed to a corner of the viewport, alone or as a group, emitting configured commands.",
+    category: "form",
+    icon: "antd:plus-circle-outlined",
+    iconFamily: "form",
+    slotSizePolicy: "intrinsic",
+    runtimeSignals: {
+        ...PHI_COMMAND_CONTROL_SIGNALS,
+    },
+    signalSubcontrols: PHI_COMMAND_BUTTONS_SIGNAL_SUBCONTROLS,
+    fields: [
+        /*
+         * The buttons first, as on the Command Toolbar, and what holds for all of them below. A label only
+         * where there is room for one: a round button is its icon, and the label it keeps names it in the
+         * select and the Signals panel and becomes its tooltip. No danger, which Ant Design's Float Button
+         * does not draw.
+         */
+        buildPhiCommandButtonsField({
+            omit: ["danger"],
+            labelVisibleWhen: PHI_FLOAT_BUTTON_SQUARE,
+            extraItemFields: [
+                {
+                    key: "display",
+                    type: "choice",
+                    label: "Display",
+                    visibleWhen: PHI_FLOAT_BUTTON_SQUARE,
+                    emptyOption: { value: "", label: "Icon", separator: "after" },
+                    emptyValue: undefined,
+                    options: [
+                        { value: "icon-label", label: "Icon and label" },
+                        { value: "label", label: "Label" },
+                    ],
+                },
+            ],
+        }),
+        {
+            key: "placement",
+            type: "choice",
+            label: "Corner",
+            heading: "Floating",
+            options: [
+                { value: "bottom-end", label: "Bottom end" },
+                { value: "bottom-start", label: "Bottom start" },
+                { value: "top-end", label: "Top end" },
+                { value: "top-start", label: "Top start" },
+            ],
+        },
+        { key: "offsetBlock", type: "length", label: "Distance from top or bottom", min: 0 },
+        { key: "offsetInline", type: "length", label: "Distance from the side", min: 0 },
+        {
+            key: "shape",
+            type: "choice",
+            label: "Shape",
+            options: [
+                { value: "circle", label: "Circle" },
+                { value: "square", label: "Square" },
+            ],
+        },
+        /* The group's own settings; a single button has no group to open. */
+        {
+            key: "groupTrigger",
+            type: "choice",
+            label: "Group opens",
+            heading: "Group",
+            emptyOption: { value: "", label: "Always open", separator: "after" },
+            emptyValue: undefined,
+            options: [
+                { value: "click", label: "On click" },
+                { value: "hover", label: "On hover" },
+            ],
+        },
+        { key: "groupIcon", type: "icon", label: "Group icon", visibleWhen: { field: "groupTrigger", notEquals: null } },
+        {
+            key: "groupDirection",
+            type: "choice",
+            label: "Unfolds",
+            emptyOption: { value: "", label: "Away from the edge", separator: "after" },
+            emptyValue: undefined,
+            options: [
+                { value: "top", label: "Up" },
+                { value: "bottom", label: "Down" },
+                { value: "left", label: "Left" },
+                { value: "right", label: "Right" },
+            ],
+        },
+    ],
+    defaultConfig: {
+        key: "float",
+        placement: "bottom-end",
+        shape: "circle",
+        /* One to start with, so a Float Button just placed is something to see and to select. */
+        buttons: [createPhiCommandButton([])],
+    },
+    parseConfig: parsePhiFloatButtonWidgetConfig,
+};

package/plugins/runtime-modules/core/widgets/float-button/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { PhiCmsWidgetPlugin } from "../../../../../types";
+import { type PhiFloatButtonWidgetConfig } from "./config";
+export declare const PHI_FLOAT_BUTTON_WIDGET_PLUGIN: PhiCmsWidgetPlugin<PhiFloatButtonWidgetConfig>;

package/plugins/runtime-modules/core/widgets/float-button/plugin.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
+import { PhiRuntimeModuleRenderClientHost } from "../../../../../components/runtime/runtime-module-render-client-manifest";
+import { filterPhiCommandButtonsForViewer } from "../../../../../components/widgets/config/command-buttons";
+import { getPhiCommonControlLabelsForRuntime } from "../../../../../components/widgets/label-sets/common-controls";
+import { PHI_FLOAT_BUTTON_WIDGET_DEFINITION, } from "./config";
+export const PHI_FLOAT_BUTTON_WIDGET_PLUGIN = {
+    ...PHI_FLOAT_BUTTON_WIDGET_DEFINITION,
+    render: async ({ widget, config, runtime, registry }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.FloatButton, componentProps: {
+            blockId: widget.id,
+            config: {
+                ...config,
+                buttons: filterPhiCommandButtonsForViewer(config.buttons, runtime.viewer, registry?.roleProviderIdByWidgetType.get(widget.widgetType)),
+            },
+            labels: await getPhiCommonControlLabelsForRuntime(runtime),
+        } })),
+    /* A preview shows the buttons where the Widget stands; fixed, they would float over whatever frames it. */
+    renderPreview: async ({ widget, config, runtime, registry }) => (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.FloatButton, componentProps: {
+            blockId: widget.id,
+            config: {
+                ...config,
+                buttons: filterPhiCommandButtonsForViewer(config.buttons, runtime.viewer, registry?.roleProviderIdByWidgetType.get(widget.widgetType)),
+            },
+            labels: await getPhiCommonControlLabelsForRuntime(runtime),
+            disabled: true,
+            signalsEnabled: false,
+            inPlace: true,
+        } })),
+};

package/plugins/runtime-modules/core/widgets/form/config.d.ts

@@ -6,6 +6,7 @@ export declare const PHI_FORM_WIDGET_DEFINITION: {
     title: string;
     category: "form";
     description: string;
+    icon: string;
     iconFamily: string;
     slotSizePolicy: "fill-inline";
     requiredRuntimeControllers: import("../../../../../types").PhiCmsWidgetRuntimeControllerRequirementResolver<PhiCmsFormWidgetConfig>;
@@ -179,7 +180,6 @@ export declare const PHI_FORM_WIDGET_DEFINITION: {
         maxFormWidth: 610;
         formId: null;
         submit: "external";
-        submitOnEnter: false;
         links: never[];
         formConfig: {};
         execution: {

package/plugins/runtime-modules/core/widgets/form/config.js

@@ -12,6 +12,7 @@ export const PHI_FORM_WIDGET_DEFINITION = {
     title: "Form",
     category: "form",
     description: "Renders a Preset Form contributed by an active Runtime module.",
+    icon: "antd:edit-outlined",
     iconFamily: "form",
     slotSizePolicy: "fill-inline",
     requiredRuntimeControllers: requirePhiRuntimeFormControllerForWidget,
@@ -76,6 +77,12 @@ export const PHI_FORM_WIDGET_DEFINITION = {
             { id: "command", action: "activate", valueType: "string" },
             { id: "cancel", action: "close", valueType: "none" },
             { id: "conditionStateRequest", action: "reload", valueType: "none" },
+            /*
+             * Asked once, as the Form mounts: whoever knows what it should start with answers `valuesSet`.
+             * A Form in a dialog that opens afresh is not there when the choice it depends on is made, so it
+             * has to ask rather than be told.
+             */
+            { id: "valuesRequest", action: "reload", valueType: "none" },
         ],
         listens: [
             { id: "submit", channel: "submit", action: "activate", valueType: "none" },
@@ -89,6 +96,17 @@ export const PHI_FORM_WIDGET_DEFINITION = {
             },
             { id: "close", channel: "dialog", action: "close", valueType: "none" },
             { id: "reload", channel: "reload", action: "activate", valueType: "none" },
+            /*
+             * Values laid over the ones the Form holds, for the fields they name. Not a change anybody made:
+             * the Form stays clean, and a reset returns to what it started with before them.
+             */
+            {
+                id: "valuesSet",
+                channel: "values",
+                action: "change",
+                valueType: "json",
+                valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.formValues,
+            },
             { id: "conditionStateChange", channel: "condition", action: "change", valueType: "json", valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.runtimeConditionState },
         ],
     },
@@ -175,7 +193,6 @@ export const PHI_FORM_WIDGET_DEFINITION = {
         maxFormWidth: PHI_LAYOUT.contentMax,
         formId: null,
         submit: "external",
-        submitOnEnter: false,
         links: [],
         formConfig: {},
         execution: { mode: "handler", phase: "submit" },

package/plugins/runtime-modules/core/widgets/form-preview/client.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { isPhiRecord } from "../../../../../helpers/is-record";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { buildPhiDataSourceUrl } from "../../../../../gateway/data-source";
 import { findPhiSignalRoutesByCapabilityId } from "../../../../../types/signals";
@@ -10,7 +11,7 @@ import { PhiDescriptionListControl } from "../../../../../components/controls/ph
 import { PhiSkeletonControl } from "../../../../../components/controls/phi-skeleton-control";
 import { usePhiFormRelayArea } from "../../../../../components/forms/form-relay-area";
 function readPreviewFields(value) {
-    if (!value || typeof value !== "object" || Array.isArray(value))
+    if (!isPhiRecord(value))
         return {};
     const fields = {};
     for (const [key, entry] of Object.entries(value)) {

package/plugins/runtime-modules/core/widgets/form-preview/config.d.ts

@@ -15,7 +15,7 @@ export type PhiCmsFormPreviewWidgetConfig = {
     tokenParam: string;
     signalRoutes: ReturnType<typeof readPhiSignalRouteSet>;
 };
-export declare function parsePhiFormPreviewWidgetConfig(rawConfig: Record<string, unknown>): PhiCmsFormPreviewWidgetConfig;
+declare function parsePhiFormPreviewWidgetConfig(rawConfig: Record<string, unknown>): PhiCmsFormPreviewWidgetConfig;
 export declare const PHI_FORM_PREVIEW_WIDGET_DEFINITION: {
     kind: "widget";
     pluginKey: string;
@@ -56,3 +56,4 @@ export declare const PHI_FORM_PREVIEW_WIDGET_DEFINITION: {
     };
     parseConfig: typeof parsePhiFormPreviewWidgetConfig;
 };
+export {};

package/plugins/runtime-modules/core/widgets/form-preview/config.js

@@ -2,7 +2,7 @@ import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widge
 import { isPhiFormId, normalizePhiFormId } from "../../../../../types/form-id";
 import { PHI_SIGNAL_VALUE_SCHEMAS, readPhiSignalRouteSet } from "../../../../../types/signals";
 import { PHI_AUTHORING_OPTION_PROVIDER_KEYS } from "../../../../../constants/authoring-option-provider-keys";
-export function parsePhiFormPreviewWidgetConfig(rawConfig) {
+function parsePhiFormPreviewWidgetConfig(rawConfig) {
     const normalizedFormId = typeof rawConfig.formId === "string"
         ? normalizePhiFormId(rawConfig.formId)
         : "";

package/plugins/runtime-modules/core/widgets/gallery/authoring.js

@@ -1,5 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { createPhiCmsBuilderWidgetPlugin } from "../../../../../plugins/factories/widget-builder-plugin";
-import { PhiGalleryWidget } from "./client";
+import { PhiWidgetEditorPlaceholder } from "../../../../../components/widgets/builder/widget-editor-placeholder";
 import { PHI_GALLERY_WIDGET_DEFINITION, } from "./config";
-export const PHI_GALLERY_WIDGET_BUILDER_PLUGIN = createPhiCmsBuilderWidgetPlugin(PHI_GALLERY_WIDGET_DEFINITION, ({ config }) => _jsx(PhiGalleryWidget, { config: config }));
+/**
+ * What the Builder says about pictures it must not fetch.
+ *
+ * The Folder is read when the page is drawn, and what is in it then is what a visitor sees; the canvas
+ * states the binding and leaves the reading to the page.
+ */
+function PhiGalleryWidgetEditorSummary({ config }) {
+    const folderId = config?.source?.params?.folderId;
+    return folderId == null || folderId === ""
+        ? _jsx(_Fragment, { children: "No folder chosen yet. Pick one in the inspector; its public pictures are read when the page is drawn." })
+        : _jsx(_Fragment, { children: "The public pictures of the chosen media folder, read when the page is drawn." });
+}
+export const PHI_GALLERY_WIDGET_BUILDER_PLUGIN = createPhiCmsBuilderWidgetPlugin(PHI_GALLERY_WIDGET_DEFINITION, ({ widget, config }) => (_jsx(PhiWidgetEditorPlaceholder, { widget: widget, pluginTitle: PHI_GALLERY_WIDGET_DEFINITION.title, summary: _jsx(PhiGalleryWidgetEditorSummary, { config: config ?? undefined }) })));

package/plugins/runtime-modules/core/widgets/gallery/client.d.ts

@@ -1,19 +1,10 @@
+import { type PhiGalleryWidgetLabels } from "../../../../../components/widgets/label-types/gallery";
+import type { PhiPublicMediaAssetReference } from "../../../../../types/media";
 import type { PhiCmsGalleryWidgetConfig } from "./config";
-/**
- * The words a screen reader says.
- *
- * Passed in rather than translated here, because this Widget has no server half yet to run them
- * through `trBulk`. A caller that already knows the Site's language -- the Marketplace's detail view
- * is the first -- supplies its own; the defaults keep an unwired Builder gallery usable rather than
- * silent.
- */
-export type PhiGalleryWidgetLabels = {
-    previous?: string;
-    next?: string;
-    page?: (from: number, to: number) => string;
-};
 export type PhiGalleryWidgetProps = {
     config?: PhiCmsGalleryWidgetConfig;
+    /** The server's answer to the binding: public Assets, in the order the Folder was asked for. */
+    images?: PhiPublicMediaAssetReference[];
     labels?: PhiGalleryWidgetLabels;
 };
-export declare function PhiGalleryWidget({ config, labels }: PhiGalleryWidgetProps): import("react").JSX.Element | null;
+export declare function PhiGalleryWidget({ config, images: imagesInput, labels: labelsInput }: PhiGalleryWidgetProps): import("react").JSX.Element | null;

package/plugins/runtime-modules/core/widgets/gallery/client.js

@@ -1,11 +1,17 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
-import { theme } from "antd";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { usePhiConfig } from "../../../../../components/root/phi-config-provider";
+import { useCallback, useMemo, useState } from "react";
 import { PhiSequenceViewport, resolvePhiSequenceWindowStart, } from "../../../../../components/motion/phi-sequence-viewport";
+import { usePhiSequenceAutoplay } from "../../../../../components/motion/use-phi-sequence-autoplay";
+import { usePhiSequenceGestures } from "../../../../../components/motion/use-phi-sequence-gestures";
+import { resolvePhiCarouselCurrentPage, resolvePhiCarouselPageStarts, resolvePhiCarouselStep, } from "../../../../../components/layouts/phi-carousel-pages";
 import { PhiButtonControl } from "../../../../../components/controls/phi-button-control";
-import { PhiLink } from "../../../../../components/navigation/phi-link";
+import { PhiImageControl } from "../../../../../components/controls/phi-image-control";
+import { readPhiAspectRatio, resolvePhiImagePresentation } from "../../../../../components/media/image-presentation";
+import { PhiIcon } from "../../../../../components/shell/phi-icon";
+import { PHI_GALLERY_WIDGET_DEFAULT_LABELS, } from "../../../../../components/widgets/label-types/gallery";
+import { isPhiMediaSvgContentType } from "../../../../../constants/media";
 /**
  * A run of pictures, and the two things the browser will not do for us.
  *
@@ -15,67 +21,71 @@ import { PhiLink } from "../../../../../components/navigation/phi-link";
  * hatch for a scrolling container, `lazyRoot`, is a deprecated no-op in Next 16. So the window says
  * what loads: what is mounted is wanted, and what is wanted is fetched eagerly.
  *
- * The second is stopping. Autoplay is movement nobody asked for, so it does not start under reduced
- * motion, and it pauses while somebody is pointing at it or has tabbed into it -- a picture that
- * slides away under the cursor is the reason carousels have a bad name.
+ * The second is stopping: `usePhiSequenceAutoplay` holds every way to decline movement nobody asked
+ * for, and the Pause button is the one a finger has, since a finger neither hovers nor tabs. Where
+ * the window stops -- the last window rather than the last multiple of the window -- is the Carousel
+ * Layout's list of stops (`phi-carousel-pages.ts`), read by the arrows, the dots and the timer alike.
  */
 const DEFAULT_ASPECT_RATIO = "16 / 9";
+/** The dots' label, `%1` the first and `%2` the last picture a page shows. */
+function formatPageLabel(template, from, to) {
+    return template.replace("%1", String(from)).replace("%2", String(to));
+}
 const DEFAULT_GAP = "8px";
-const defaultPageLabel = (from, to) => `Show pictures ${from} to ${to}`;
-function GalleryPicture({ image, fit }) {
-    const { token } = theme.useToken();
-    const picture = (_jsx("img", { src: image.url, alt: image.alt ?? "", 
-        // Unconditionally eager, and that is the whole mechanism: nothing outside the window and its
-        // lookahead is mounted, so reaching this line already means the picture is wanted. `lazy` would
-        // hand the decision back to a browser that cannot see a track.
-        loading: "eager", decoding: "async", style: {
-            display: "block",
-            width: "100%",
-            height: "100%",
-            objectFit: fit,
-            borderRadius: token.borderRadius,
-            background: token.colorFillQuaternary,
-        } }));
-    return image.href
-        ? _jsx(PhiLink, { href: image.href, style: { display: "block", width: "100%", height: "100%" }, children: picture })
-        : picture;
+function GalleryPicture({ image, variantKey, fit, preview, sizes, aspectRatio, }) {
+    const presentation = resolvePhiImagePresentation({
+        sourceKind: "asset",
+        assetId: image.id,
+        variantKey,
+        variantVersion: image.variantVersion,
+        deliveryRevision: image.deliveryRevision,
+        originalUrl: image.deliveryUrl,
+        focalRect: image.focalRect,
+        fit,
+        sourceWidth: image.width,
+        sourceHeight: image.height,
+        // The frame's proportion is known, so the crop can keep the whole focal rectangle in view.
+        frameAspectRatio: readPhiAspectRatio(aspectRatio),
+    });
+    // The Folder route hands out public Assets only, so a raster original may go through the optimiser.
+    const optimizable = presentation.kind === "generated-variant" || !isPhiMediaSvgContentType(image.contentType);
+    /*
+     * The frame is a block of its own inside the track item, not the item itself. A flex item that is
+     * stretched (`alignItems: stretch` on the track) has no height of its own for an aspect ratio to
+     * stand on in WebKit, which sized it by its content -- a picture at 100% of nothing -- and drew the
+     * Gallery as a strip a few pixels tall. A block in flow with a width and an aspect ratio is a
+     * definite box everywhere, and the picture fills it from the corners rather than through a chain
+     * of percentage heights.
+     */
+    return (_jsx("div", { style: { position: "relative", width: "100%", aspectRatio }, children: _jsx(PhiImageControl, { presentation: presentation, source: "asset", alt: image.altText ?? "", title: image.title ?? undefined, blurDataUrl: image.blurDataUrl, optimizable: optimizable, sizes: sizes, 
+            // Unconditionally eager, and that is the whole mechanism: nothing outside the window and its
+            // lookahead is mounted, so reaching this line already means the picture is wanted.
+            loading: "eager", preview: preview, style: { position: "absolute", inset: 0, width: "100%", height: "100%" }, imageStyle: { width: "100%", height: "100%" } }) }));
 }
-export function PhiGalleryWidget({ config, labels }) {
-    const { token } = theme.useToken();
-    const images = useMemo(() => config?.images ?? [], [config?.images]);
+export function PhiGalleryWidget({ config, images: imagesInput, labels: labelsInput }) {
+    const { token } = usePhiConfig();
+    const labels = labelsInput ?? PHI_GALLERY_WIDGET_DEFAULT_LABELS;
+    const images = useMemo(() => imagesInput ?? [], [imagesInput]);
     const visibleCount = config?.visibleCount ?? 1;
     const windowAnchor = config?.windowAnchor ?? "start";
     const loop = config?.loop ?? false;
     const controls = config?.controls ?? "both";
     const autoplayMs = config?.autoplayMs ?? 0;
     const [activeIndex, setActiveIndex] = useState(0);
-    const [paused, setPaused] = useState(false);
     const span = Math.min(visibleCount, Math.max(images.length, 1));
-    // The last window rather than the last picture: past this the window would hang off the end, and
-    // stepping to it would move nothing.
-    const lastStart = Math.max(0, images.length - span);
+    const pageStarts = useMemo(() => resolvePhiCarouselPageStarts(images.length, span), [images.length, span]);
+    const lastStart = pageStarts[pageStarts.length - 1] ?? 0;
     const step = useCallback((direction) => {
-        setActiveIndex((current) => {
-            const next = current + direction * span;
-            if (next > lastStart)
-                return loop ? 0 : lastStart;
-            if (next < 0)
-                return loop ? lastStart : 0;
-            return next;
-        });
-    }, [lastStart, loop, span]);
-    const reducedMotion = useRef(false);
-    useEffect(() => {
-        reducedMotion.current = typeof window.matchMedia === "function" &&
-            window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    }, []);
-    useEffect(() => {
-        if (autoplayMs <= 0 || paused || images.length <= span || reducedMotion.current) {
-            return undefined;
-        }
-        const timer = window.setInterval(() => step(1), autoplayMs);
-        return () => window.clearInterval(timer);
-    }, [autoplayMs, images.length, paused, span, step]);
+        setActiveIndex((current) => resolvePhiCarouselStep(pageStarts, current, direction, loop));
+    }, [loop, pageStarts]);
+    const advance = useCallback(() => step(1), [step]);
+    const autoplay = usePhiSequenceAutoplay({ intervalMs: autoplayMs, active: images.length > span, advance });
+    // A step somebody took: the next automatic one is a whole interval away again.
+    const stepByHand = useCallback((direction) => {
+        step(direction);
+        autoplay.restart();
+    }, [autoplay, step]);
+    const gestures = usePhiSequenceGestures({ step: stepByHand });
     if (images.length === 0) {
         return null;
     }
@@ -86,15 +96,25 @@ export function PhiGalleryWidget({ config, labels }) {
         anchor: windowAnchor,
     });
     const lookahead = config?.lookahead ?? 1;
-    const pageCount = Math.ceil(images.length / span);
-    const currentPage = Math.min(Math.floor(windowStart / span), pageCount - 1);
+    const pageCount = pageStarts.length;
+    const currentPage = resolvePhiCarouselCurrentPage(pageStarts, windowStart);
+    // What a picture of this window is worth of the viewport, for the optimiser's choice of rendition.
+    const sizes = span === 1 ? "100vw" : `(max-width: 768px) 100vw, ${Math.ceil(100 / span)}vw`;
+    const aspectRatio = config?.aspectRatio ?? DEFAULT_ASPECT_RATIO;
     const frameStyle = {
-        aspectRatio: config?.aspectRatio ?? DEFAULT_ASPECT_RATIO,
         minWidth: 0,
+        borderRadius: token.borderRadius,
+        overflow: "hidden",
     };
     const atStart = windowStart <= 0;
     const atEnd = windowStart >= lastStart;
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.marginXS, minWidth: 0 }, onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onFocusCapture: () => setPaused(true), onBlurCapture: () => setPaused(false), children: [_jsxs("div", { style: { position: "relative", minWidth: 0 }, children: [_jsx(PhiSequenceViewport, { items: images.map((image, index) => (_jsx(GalleryPicture, { image: image, fit: config?.fit ?? "cover" }, `${image.url}-${index}`))), activeIndex: activeIndex, visibleCount: span, anchor: windowAnchor, transition: config?.transition ?? "slide", ...(config?.durationMs === undefined ? {} : { durationMs: config.durationMs }), ...(config?.easing === undefined ? {} : { easing: config.easing }), lookahead: lookahead, mountPolicy: config?.mountPolicy ?? "lazy-keep", gap: config?.gap ?? DEFAULT_GAP, itemStyle: frameStyle }), controls === "arrows" || controls === "both" ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { position: "absolute", insetBlockStart: "50%", insetInlineStart: token.marginXS, transform: "translateY(-50%)" }, children: _jsx(PhiButtonControl, { icon: _jsx(LeftOutlined, {}), ariaLabel: labels?.previous ?? "Previous", shape: "circle", disabled: atStart && !loop, onClick: () => step(-1) }) }), _jsx("div", { style: { position: "absolute", insetBlockStart: "50%", insetInlineEnd: token.marginXS, transform: "translateY(-50%)" }, children: _jsx(PhiButtonControl, { icon: _jsx(RightOutlined, {}), ariaLabel: labels?.next ?? "Next", shape: "circle", disabled: atEnd && !loop, onClick: () => step(1) }) })] })) : null] }), (controls === "dots" || controls === "both") && pageCount > 1 ? (_jsx("div", { style: { display: "flex", justifyContent: "center", gap: token.marginXXS }, children: Array.from({ length: pageCount }, (_, page) => (_jsx("button", { type: "button", "aria-label": (labels?.page ?? defaultPageLabel)(page * span + 1, Math.min((page + 1) * span, images.length)), "aria-current": page === currentPage || undefined, onClick: () => setActiveIndex(Math.min(page * span, lastStart)), style: {
+    // Two disabled arrows over a single picture say nothing; the dots already know to stay away.
+    const showArrows = (controls === "arrows" || controls === "both") && images.length > span;
+    const showDots = (controls === "dots" || controls === "both") && pageCount > 1;
+    return (_jsxs("div", { role: "region", "aria-roledescription": "carousel", "aria-label": labels.region, style: { display: "flex", flexDirection: "column", gap: token.marginXS, width: "100%", minWidth: 0, ...gestures.style }, ...autoplay.holdHandlers, ...gestures.handlers, children: [_jsxs("div", { style: { position: "relative", minWidth: 0 }, "aria-live": autoplay.running ? "off" : "polite", children: [_jsx(PhiSequenceViewport, { items: images.map((image) => (_jsx(GalleryPicture, { image: image, variantKey: config?.variantKey, fit: config?.fit ?? "cover", preview: config?.preview === true, sizes: sizes, aspectRatio: aspectRatio }, image.id))), activeIndex: activeIndex, visibleCount: span, anchor: windowAnchor, transition: config?.transition ?? "slide", ...(config?.durationMs === undefined ? {} : { durationMs: config.durationMs }), ...(config?.easing === undefined ? {} : { easing: config.easing }), lookahead: lookahead, mountPolicy: config?.mountPolicy ?? "lazy-keep", gap: config?.gap ?? DEFAULT_GAP, itemStyle: frameStyle }), showArrows ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { position: "absolute", insetBlockStart: "50%", insetInlineStart: token.marginXS, transform: "translateY(-50%)" }, children: _jsx(PhiButtonControl, { icon: _jsx(PhiIcon, { name: "left", size: "inherit" }), ariaLabel: labels.previous, shape: "circle", disabled: atStart && !loop, onClick: () => stepByHand(-1) }) }), _jsx("div", { style: { position: "absolute", insetBlockStart: "50%", insetInlineEnd: token.marginXS, transform: "translateY(-50%)" }, children: _jsx(PhiButtonControl, { icon: _jsx(PhiIcon, { name: "right", size: "inherit" }), ariaLabel: labels.next, shape: "circle", disabled: atEnd && !loop, onClick: () => stepByHand(1) }) })] })) : null, autoplay.offered ? (_jsx("div", { style: { position: "absolute", insetBlockEnd: token.marginXS, insetInlineEnd: token.marginXS }, children: _jsx(PhiButtonControl, { icon: _jsx(PhiIcon, { name: autoplay.stopped ? "play-circle" : "pause-circle", size: "inherit" }), ariaLabel: autoplay.stopped ? labels.play : labels.pause, ariaPressed: autoplay.stopped, shape: "circle", onClick: autoplay.toggleStopped }) })) : null] }), showDots ? (_jsx("div", { role: "group", "aria-label": labels.pages, style: { display: "flex", justifyContent: "center", gap: token.marginXXS }, children: Array.from({ length: pageCount }, (_, page) => (_jsx("button", { type: "button", "aria-label": formatPageLabel(labels.page, (pageStarts[page] ?? 0) + 1, Math.min((pageStarts[page] ?? 0) + span, images.length)), "aria-current": page === currentPage || undefined, onClick: () => {
+                        setActiveIndex(pageStarts[page] ?? 0);
+                        autoplay.restart();
+                    }, style: {
                         width: page === currentPage ? token.controlHeightXS : token.marginXS,
                         height: token.marginXS,
                         padding: 0,