@phis/ui 0.3.0 → 0.4.1

package/plugins/runtime-modules/core/widgets/entry-list/server.js

@@ -5,10 +5,11 @@ import { getPhiContentEntryReaderLabels } from "../../../../../components/widget
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { fetchPhiSiteContentEntries } from "../../../../../gateway/content-entries";
 import { phiRuntime } from "../../../../../server-helpers/phi-runtime";
-import { trBulk } from "../../../../../server-helpers/translate";
+import { trBulkForLocale } from "../../../../../server-helpers/translate";
 import { readPhiBoundContentEntry } from "../../content-entries/record-source.server";
 import { buildPhiEntryViews } from "./view.server";
 import { normalizePhiEntryListWidgetConfig } from "./config";
+import { pickPhiSequenceSettings } from "../../../../../components/widgets/config/sequence-settings";
 /**
  * One kind's published entries, read while the page is drawn (`CONTENT_ENTRIES.md`).
  *
@@ -73,11 +74,12 @@ export async function PhiEntryListWidget({ config, runtime, registry, links, tra
         // A stacked entry's title is an `h2`; its text's headings start under it.
         headingOffset: 2,
     });
-    const [title] = settings.title && translate ? await trBulk([settings.title]) : [settings.title];
+    const [title] = settings.title && translate ? await trBulkForLocale(locale, [settings.title]) : [settings.title];
     return (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiCmsWidgetType.EntryList, componentProps: {
             entries: views,
             labels,
             presentation: settings.presentation,
+            ...(settings.presentation === "slideshow" ? { sequence: pickPhiSequenceSettings(settings) } : {}),
             parts: settings.show,
             ...(title ? { title } : {}),
             emptyBehavior: related ? "hide" : "say",

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

@@ -1,18 +1,70 @@
 "use client";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { usePhiConfig } from "../../../../../components/root/phi-config-provider";
+import { PhiTypographyControl } from "../../../../../components/controls/phi-typography-control";
+import { PhiIcon } from "../../../../../components/shell/phi-icon";
 import { createPhiCmsBuilderWidgetPlugin } from "../../../../../plugins/factories/widget-builder-plugin";
-import { PhiWidgetEditorPlaceholder } from "../../../../../components/widgets/builder/widget-editor-placeholder";
 import { PHI_GALLERY_WIDGET_DEFINITION, } from "./config";
+import { resolvePhiSpacingScaleValue } from "../../../../../components/widgets/config/spacing-options";
+import { PHI_SEQUENCE_SETTINGS_DEFAULTS } from "../../../../../components/widgets/config/sequence-settings";
+import { resolvePhiGalleryFrame } from "./defaults";
+/** How many dots stand for "more than one page" on the canvas, which does not know how many pictures there are. */
+const EDITOR_DOT_COUNT = 3;
 /**
- * What the Builder says about pictures it must not fetch.
+ * The Gallery's window, drawn empty.
  *
- * 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.
+ * The Folder is read when the page is drawn, and what is in it then is what a visitor sees, so the
+ * canvas fetches nothing. What it can show is everything the author set: as many frames as pictures
+ * stand side by side, in the variant's proportion or the one set for originals, at their distance,
+ * with the arrows and dots the controls ask for. A change in the Inspector is a change on the canvas,
+ * which a sentence never was.
  */
-function PhiGalleryWidgetEditorSummary({ config }) {
+function PhiGalleryWidgetEditor({ config }) {
+    const { token } = usePhiConfig();
+    const visibleCount = config?.visibleCount ?? PHI_SEQUENCE_SETTINGS_DEFAULTS.visibleCount;
+    const controls = config?.controls ?? PHI_SEQUENCE_SETTINGS_DEFAULTS.controls;
+    const showArrows = controls === "arrows" || controls === "both";
+    const showDots = controls === "dots" || controls === "both";
     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." });
+    const hasFolder = folderId != null && folderId !== "";
+    const { aspectRatio } = resolvePhiGalleryFrame(config);
+    const arrowStyle = {
+        position: "absolute",
+        insetBlockStart: "50%",
+        transform: "translateY(-50%)",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: token.controlHeight,
+        height: token.controlHeight,
+        borderRadius: "50%",
+        background: token.colorBgElevated,
+        boxShadow: token.boxShadowTertiary,
+        color: token.colorTextSecondary,
+        pointerEvents: "none",
+    };
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.marginXS, width: "100%", minWidth: 0 }, children: [_jsxs("div", { style: { position: "relative", minWidth: 0 }, children: [_jsx("div", { style: { display: "flex", gap: resolvePhiSpacingScaleValue(config?.gap ?? PHI_SEQUENCE_SETTINGS_DEFAULTS.gap), minWidth: 0 }, children: Array.from({ length: visibleCount }, (_, index) => (_jsxs("div", { style: {
+                                flex: "1 1 0",
+                                minWidth: 0,
+                                aspectRatio,
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                gap: token.marginXXS,
+                                borderRadius: token.borderRadius,
+                                border: `1px dashed ${token.colorBorder}`,
+                                background: token.colorFillQuaternary,
+                                color: token.colorTextTertiary,
+                                fontSize: token.fontSizeLG,
+                                overflow: "hidden",
+                            }, children: [_jsx(PhiIcon, { name: "picture", size: "inherit" }), _jsx("span", { style: { fontSize: token.fontSizeSM }, children: index + 1 })] }, index))) }), showArrows ? (_jsxs(_Fragment, { children: [_jsx("span", { style: { ...arrowStyle, insetInlineStart: token.marginXS }, children: _jsx(PhiIcon, { name: "left", size: "inherit" }) }), _jsx("span", { style: { ...arrowStyle, insetInlineEnd: token.marginXS }, children: _jsx(PhiIcon, { name: "right", size: "inherit" }) })] })) : null] }), showDots ? (_jsx("div", { style: { display: "flex", justifyContent: "center", gap: token.marginXXS }, children: Array.from({ length: EDITOR_DOT_COUNT }, (_, page) => (_jsx("span", { style: {
+                        width: page === 0 ? token.controlHeightXS : token.marginXS,
+                        height: token.marginXS,
+                        borderRadius: token.borderRadiusSM,
+                        background: page === 0 ? token.colorPrimary : token.colorFill,
+                    } }, page))) })) : null, _jsx(PhiTypographyControl, { type: "secondary", style: { fontSize: token.fontSizeSM }, children: hasFolder
+                    ? "The public pictures of the chosen media folder, read when the page is drawn."
+                    : "No folder chosen yet. Pick one in the inspector; its public pictures are 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 }) })));
+export const PHI_GALLERY_WIDGET_BUILDER_PLUGIN = createPhiCmsBuilderWidgetPlugin(PHI_GALLERY_WIDGET_DEFINITION, ({ config }) => _jsx(PhiGalleryWidgetEditor, { config: config ?? undefined }));

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

@@ -1,10 +1,15 @@
 import { type PhiGalleryWidgetLabels } from "../../../../../components/widgets/label-types/gallery";
 import type { PhiPublicMediaAssetReference } from "../../../../../types/media";
 import type { PhiCmsGalleryWidgetConfig } from "./config";
+/**
+ * A run of pictures. How it moves and stops is `PhiSequenceRun`'s; what is here is the picture: its
+ * rendition, its frame, and that it loads eagerly -- the run mounts only what its window wants, so
+ * reaching a picture already means it is wanted.
+ */
 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, images: imagesInput, labels: labelsInput }: PhiGalleryWidgetProps): import("react").JSX.Element | null;
+export declare function PhiGalleryWidget({ config, images: imagesInput, labels: labelsInput }: PhiGalleryWidgetProps): import("react").JSX.Element;

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

@@ -1,37 +1,13 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 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 { useMemo } from "react";
+import { PhiSequenceRun, resolvePhiSequenceRunSpan } from "../../../../../components/motion/phi-sequence-run";
 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.
- *
- * The first is knowing which picture is next. Native lazy loading decides from an element's distance
- * to the viewport, so on a fade -- where every picture sits in the same place -- it loads all of them
- * at once, and on a slide it loads the next one as it arrives, during the transition. Next's escape
- * 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: `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";
+import { resolvePhiGalleryFrame } from "./defaults";
 function GalleryPicture({ image, variantKey, fit, preview, sizes, aspectRatio, }) {
     const presentation = resolvePhiImagePresentation({
         sourceKind: "asset",
@@ -66,62 +42,14 @@ export function PhiGalleryWidget({ config, images: imagesInput, labels: labelsIn
     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 span = Math.min(visibleCount, Math.max(images.length, 1));
-    const pageStarts = useMemo(() => resolvePhiCarouselPageStarts(images.length, span), [images.length, span]);
-    const lastStart = pageStarts[pageStarts.length - 1] ?? 0;
-    const step = useCallback((direction) => {
-        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;
-    }
-    const windowStart = resolvePhiSequenceWindowStart({
-        activeIndex: activeIndex,
-        visibleCount: span,
-        itemCount: images.length,
-        anchor: windowAnchor,
-    });
-    const lookahead = config?.lookahead ?? 1;
-    const pageCount = pageStarts.length;
-    const currentPage = resolvePhiCarouselCurrentPage(pageStarts, windowStart);
+    const span = resolvePhiSequenceRunSpan(config?.visibleCount, images.length);
     // 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 { aspectRatio, fit } = resolvePhiGalleryFrame(config);
     const frameStyle = {
         minWidth: 0,
         borderRadius: token.borderRadius,
         overflow: "hidden",
     };
-    const atStart = windowStart <= 0;
-    const atEnd = windowStart >= lastStart;
-    // 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,
-                        border: "none",
-                        cursor: "pointer",
-                        borderRadius: token.borderRadiusSM,
-                        background: page === currentPage ? token.colorPrimary : token.colorFill,
-                        transition: `width ${token.motionDurationMid}, background ${token.motionDurationMid}`,
-                    } }, page))) })) : null] }));
+    return (_jsx(PhiSequenceRun, { items: images.map((image) => (_jsx(GalleryPicture, { image: image, variantKey: config?.variantKey, fit: fit, preview: config?.preview === true, sizes: sizes, aspectRatio: aspectRatio }, image.id))), settings: config, labels: labels, itemStyle: frameStyle }));
 }