@phis/ui 0.1.0 → 0.2.1

package/components/forms/upload-form-control.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { PhiMediaKind } from "../../constants/media";
+import { PhiButtonControl } from "../controls/phi-button-control";
+import { PhiFileDropControl } from "../controls/phi-file-drop-control";
+import { PhiFlexControl } from "../controls/phi-flex-control";
+import { PhiProgressControl } from "../controls/phi-progress-control";
+import { PhiTagControl } from "../controls/phi-tag-control";
+import { PhiTypographyControl } from "../controls/phi-typography-control";
+import { PHI_MEDIA_UPLOAD_DEFAULT_LABELS, usePhiMediaUpload, } from "../media/phi-media-upload";
+import { PHI_FORM_UPLOAD_LABEL_KEYS } from "./form-provider-contract";
+const DEFAULT_TRIGGER_LABEL = "Choose a file";
+const DEFAULT_TOO_MANY_LABEL = "No more files fit here.";
+const MEDIA_KINDS = new Set(Object.values(PhiMediaKind));
+/**
+ * What the Form value is: the Media Asset ids the finished uploads left behind.
+ *
+ * Exported because a handler and a test read the same shape, and because the one thing a caller must not
+ * do is guess it from a sample payload.
+ */
+export function readPhiFormUploadAssetIds(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value.filter((entry) => typeof entry === "number" && Number.isInteger(entry) && entry > 0);
+}
+/**
+ * The field's own narrowing of what the Site allows.
+ *
+ * An unknown kind is dropped rather than normalized: `normalizePhiMediaKind` answers "other" for anything
+ * it does not recognize, which on a declaration would silently turn a typo into the catch-all and accept
+ * more than the Form asked for.
+ */
+function readUploadSettings(config) {
+    const declaredKinds = Array.isArray(config?.kinds)
+        ? config.kinds.filter((entry) => typeof entry === "string" && MEDIA_KINDS.has(entry))
+        : [];
+    const maxFiles = typeof config?.maxFiles === "number" && config.maxFiles >= 1
+        ? Math.trunc(config.maxFiles)
+        : null;
+    const maxBytes = typeof config?.maxBytes === "number" && config.maxBytes >= 1
+        ? Math.trunc(config.maxBytes)
+        : undefined;
+    const space = typeof config?.space === "string" && config.space.trim() ? config.space.trim() : null;
+    return { kinds: declaredKinds.length === 0 ? undefined : declaredKinds, maxFiles, maxBytes, space };
+}
+function resolveUploadLabels(labels) {
+    const read = (key, fallback) => labels?.[key]?.trim() || fallback;
+    return {
+        errorGeneric: read(PHI_FORM_UPLOAD_LABEL_KEYS.errorGeneric, PHI_MEDIA_UPLOAD_DEFAULT_LABELS.errorGeneric),
+        errorNetwork: read(PHI_FORM_UPLOAD_LABEL_KEYS.errorNetwork, PHI_MEDIA_UPLOAD_DEFAULT_LABELS.errorNetwork),
+        errorTooLarge: read(PHI_FORM_UPLOAD_LABEL_KEYS.errorTooLarge, PHI_MEDIA_UPLOAD_DEFAULT_LABELS.errorTooLarge),
+        errorDuplicate: read(PHI_FORM_UPLOAD_LABEL_KEYS.errorDuplicate, PHI_MEDIA_UPLOAD_DEFAULT_LABELS.errorDuplicate),
+        errorTypeNotAllowed: read(PHI_FORM_UPLOAD_LABEL_KEYS.errorTypeNotAllowed, PHI_MEDIA_UPLOAD_DEFAULT_LABELS.errorTypeNotAllowed),
+        errorQuotaExceeded: read(PHI_FORM_UPLOAD_LABEL_KEYS.errorQuotaExceeded, PHI_MEDIA_UPLOAD_DEFAULT_LABELS.errorQuotaExceeded),
+        errorSpaceUnavailable: read(PHI_FORM_UPLOAD_LABEL_KEYS.errorSpaceUnavailable, PHI_MEDIA_UPLOAD_DEFAULT_LABELS.errorSpaceUnavailable),
+        errorStorageUnreachable: read(PHI_FORM_UPLOAD_LABEL_KEYS.errorStorageUnreachable, PHI_MEDIA_UPLOAD_DEFAULT_LABELS.errorStorageUnreachable),
+    };
+}
+/**
+ * The shared upload field Control: attach a file, watch it arrive, take it back out again.
+ *
+ * It owns no value of its own. Every upload that finishes appends its Asset id to the Form value and
+ * every removal takes one out, which is what keeps `required`, a reset and a re-render honest -- the same
+ * arrangement the compound Table field uses for the same reason. What it does keep locally is the part
+ * that is not a value: the transfer in progress and the sentence that a refusal produced.
+ *
+ * Emptiness is `undefined` rather than `[]`. Ant Design's required rule accepts an empty array, so a
+ * Form asking for a mandatory attachment would submit without one.
+ *
+ * The file name comes from the upload that is still in this Control's hands. An id that arrived as an
+ * initial value has no name here, and inventing one would mean reading the Media Asset -- a second
+ * contract inside a field provider, which is not this Control's to open.
+ */
+export function PhiUploadFormControl({ field, value, onChange, placeholder, labels, disabled, readOnly, formContext, }) {
+    const settings = useMemo(() => readUploadSettings(field.config), [field.config]);
+    const uploadLabels = useMemo(() => resolveUploadLabels(labels), [labels]);
+    const [refusal, setRefusal] = useState(null);
+    const assetIds = readPhiFormUploadAssetIds(value);
+    const inFlight = useRef(0);
+    /*
+     * The value as the Form holds it this instant, rather than as this render received it.
+     *
+     * Two files chosen at once finish independently, and a handler appending to the list its own render
+     * started from would drop the other one's id. The Form store answers synchronously and is what
+     * `formContext` exists for, so the second upload appends to the first one's result without either of
+     * them keeping a copy. A host that renders a field Provider outside `PhiFormControl` passes no context;
+     * there the render's value is all there is, and one upload at a time is all that holds.
+     */
+    const readAssetIdsNow = () => formContext ? readPhiFormUploadAssetIds(formContext.getValues()[field.key]) : assetIds;
+    const commit = (next) => onChange?.(next.length === 0 ? undefined : [...next]);
+    const acceptance = useMemo(() => ({ kinds: settings.kinds, maxBytes: settings.maxBytes, multiple: settings.maxFiles !== 1 }), [settings]);
+    const initOptions = useMemo(() => ({ spaceAddress: settings.space }), [settings]);
+    const { accept, items, upload } = usePhiMediaUpload({
+        labels: uploadLabels,
+        acceptance,
+        initOptions,
+        onUploaded: (asset) => {
+            setRefusal(null);
+            commit([...readAssetIdsNow(), asset.id]);
+        },
+        onRejected: (message) => setRefusal(message),
+    });
+    const nameByAssetId = new Map(items
+        .filter((item) => item.assetId != null)
+        .map((item) => [item.assetId, item.file.name]));
+    const transferring = items.filter((item) => item.status === "uploading");
+    const full = settings.maxFiles != null && assetIds.length >= settings.maxFiles;
+    return (_jsxs(PhiFlexControl, { vertical: true, gap: "small", children: [assetIds.length === 0 ? null : (_jsx(PhiFlexControl, { wrap: true, gap: "small", children: assetIds.map((assetId) => (_jsx(PhiTagControl, { closable: !disabled && !readOnly, onClose: () => commit(readAssetIdsNow().filter((entry) => entry !== assetId)), children: nameByAssetId.get(assetId) ?? `#${assetId}` }, assetId))) })), transferring.map((item) => (_jsx(PhiProgressControl, { percent: Math.round(item.progress), size: "small" }, item.localId))), readOnly ? null : (_jsx(PhiFileDropControl, { accept: accept, multiple: settings.maxFiles !== 1, disabled: disabled || full, onFile: (file) => {
+                    /*
+                     * Counted rather than read off the items, because a multiple selection arrives file by file
+                     * within one tick and no state has moved yet when the second one is offered.
+                     */
+                    if (settings.maxFiles != null && readAssetIdsNow().length + inFlight.current >= settings.maxFiles) {
+                        setRefusal(labels?.[PHI_FORM_UPLOAD_LABEL_KEYS.tooMany]?.trim() || DEFAULT_TOO_MANY_LABEL);
+                        return;
+                    }
+                    inFlight.current += 1;
+                    void upload(file).finally(() => {
+                        inFlight.current -= 1;
+                    });
+                }, children: _jsx(PhiButtonControl, { label: placeholder?.trim()
+                        || labels?.[PHI_FORM_UPLOAD_LABEL_KEYS.trigger]?.trim()
+                        || DEFAULT_TRIGGER_LABEL, disabled: disabled || full, onClick: () => { } }) })), refusal ? _jsx(PhiTypographyControl, { type: "danger", children: refusal }) : null] }));
+}

package/components/layouts/clients/phi-base-layout-client.d.ts

@@ -1,18 +1,9 @@
-import { type CSSProperties, type ReactNode } from "react";
-import { type PhiBaseLayoutSlotStates, type PhiBaseLayoutSlotState } from "../phi-layout-contract";
-import { type PhiBaseLayoutProps } from "../phi-layout-view-model";
+import { type ReactNode } from "react";
+import { type PhiBaseLayoutSlotStates } from "../phi-layout-contract";
 export type { PhiBaseLayoutProps } from "../phi-layout-view-model";
-export declare function resolvePhiLayoutEmptySlotFrameStyle(options: {
-    hasContent: boolean;
-    slotState: PhiBaseLayoutSlotState;
-    frameRadius: CSSProperties["borderRadius"];
-    editFrameBackground?: CSSProperties["background"];
-    minHeight: CSSProperties["minHeight"];
-}): CSSProperties;
-export { PhiBaseLayoutSlotScope, usePhiBaseLayoutOwnSlotController, usePhiBaseLayoutSlotController, usePhiBaseLayoutSlotState, usePhiBaseLayoutSlotStates, } from "../phi-layout-slot-state";
+export { PhiBaseLayoutSlotScope, usePhiBaseLayoutOwnSlotController, usePhiBaseLayoutSlotController, usePhiBaseLayoutSlotStates, } from "../phi-layout-slot-state";
 export declare function PhiBaseLayoutSlotStateProvider({ slotCount, initialSlotStates, children, }: {
     slotCount: number;
     initialSlotStates?: PhiBaseLayoutSlotStates;
     children: ReactNode;
 }): import("react").JSX.Element;
-export declare function PhiBaseLayout({ slots, editSlotLabels, layoutKind, labelEnd, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, border, borderRadius, effect, blockId, renderMode, visibility, enabled, capabilities, runtime, debugMode, className, size, minSize, maxSize, collapsedSizeHint, zIndex, opacity, shadow, margin, gap, initialSlotStates, style, editSlotAction, editRenderInsertControl, }: PhiBaseLayoutProps): import("react").JSX.Element | null;

package/components/layouts/clients/phi-base-layout-client.js

@@ -1,37 +1,10 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useCallback, useContext, useMemo, useState, } from "react";
-import { resolvePhiLayoutBoxStyle, } from "../phi-layout-contract";
-import { resolvePhiBaseLayoutSlotStates, resolvePhiBaseLayoutChrome, } from "../phi-layout-view-model";
-import { isPhiLayoutAuthoringRender, phiLayoutDebugLayerMarker, } from "../../../helpers/layout-authoring-markers";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useContext, useMemo, useState, } from "react";
+import {} from "../phi-layout-contract";
+import { resolvePhiBaseLayoutSlotStates, } from "../phi-layout-view-model";
 import { PhiBaseLayoutSlotStateContext } from "../phi-layout-slot-state";
-function resolvePhiRenderableBlockStyleValue(value) {
-    return value == null || value === 0 || value === "0" || value === "0px" ? undefined : value;
-}
-export function resolvePhiLayoutEmptySlotFrameStyle(options) {
-    const { hasContent, slotState, frameRadius, editFrameBackground, minHeight } = options;
-    const frameBorderColor = hasContent
-        ? "rgba(0, 0, 0, 0.14)"
-        : slotState === "collapsed"
-            ? "var(--phi-debug-layer-slot-border-strong)"
-            : "var(--phi-debug-layer-slot-border)";
-    return {
-        display: "flex",
-        flexDirection: "column",
-        gap: 0,
-        minWidth: 0,
-        flex: "1 1 auto",
-        alignSelf: "stretch",
-        border: `1px dashed ${frameBorderColor}`,
-        borderRadius: frameRadius,
-        background: editFrameBackground ?? (hasContent ? "transparent" : "var(--phi-debug-layer-slot-background)"),
-        padding: 0,
-        minHeight,
-        overflow: "hidden",
-        boxShadow: "inset 0 0 0 1px var(--phi-debug-layer-slot-border-strong)",
-    };
-}
-export { PhiBaseLayoutSlotScope, usePhiBaseLayoutOwnSlotController, usePhiBaseLayoutSlotController, usePhiBaseLayoutSlotState, usePhiBaseLayoutSlotStates, } from "../phi-layout-slot-state";
+export { PhiBaseLayoutSlotScope, usePhiBaseLayoutOwnSlotController, usePhiBaseLayoutSlotController, usePhiBaseLayoutSlotStates, } from "../phi-layout-slot-state";
 function usePhiBaseLayoutSlotStateContext(slotCount, initialSlotStates) {
     const parentSlotContext = useContext(PhiBaseLayoutSlotStateContext);
     const [slotStates, setSlotStates] = useState(() => resolvePhiBaseLayoutSlotStates(slotCount, initialSlotStates));
@@ -71,136 +44,3 @@ export function PhiBaseLayoutSlotStateProvider({ slotCount, initialSlotStates, c
     const resolvedContext = usePhiBaseLayoutSlotStateContext(slotCount, initialSlotStates);
     return (_jsx(PhiBaseLayoutSlotStateContext.Provider, { value: resolvedContext, children: children }));
 }
-export function PhiBaseLayout({ slots, editSlotLabels, layoutKind, labelEnd, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, border, borderRadius, effect, blockId, renderMode, visibility, enabled, capabilities, runtime, debugMode, className, size, minSize, maxSize, collapsedSizeHint, zIndex, opacity, shadow, margin = 0, gap = 0, initialSlotStates, style, editSlotAction, editRenderInsertControl, }) {
-    const isAuthoringRender = isPhiLayoutAuthoringRender({ editSlotAction, editSlotLabels, capabilities });
-    const slotCount = slots?.length ?? 0;
-    const slotList = slots ?? [];
-    const resolvedContext = usePhiBaseLayoutSlotStateContext(slotCount, initialSlotStates);
-    const resolvedSlotStates = resolvedContext.slotStates;
-    const resolvedRenderMode = renderMode ?? "live";
-    const isEditMode = resolvedRenderMode === "editor";
-    const resolvedVisibility = visibility ?? "visible";
-    const resolvedEnabled = enabled ?? true;
-    const resolvedDebugMode = debugMode ?? false;
-    const resolvedSize = resolvedVisibility === "collapsed"
-        ? collapsedSizeHint ?? size
-        : size;
-    const resolvedMargin = resolvePhiRenderableBlockStyleValue(margin);
-    const resolvedGap = resolvePhiRenderableBlockStyleValue(gap);
-    const resolvedZIndex = resolvePhiRenderableBlockStyleValue(zIndex ?? 0);
-    const resolvedOpacity = opacity ?? 1;
-    const resolveLayoutSlotNode = (slot, index) => {
-        const slotState = resolvedSlotStates[index] ?? "expanded";
-        if (slotState === "hidden") {
-            return null;
-        }
-        if (slotState === "collapsed") {
-            if (!isValidElement(slot)) {
-                return null;
-            }
-            const elementSlot = slot;
-            const slotStyle = elementSlot.props.style;
-            return cloneElement(elementSlot, {
-                style: {
-                    ...(slotStyle ?? {}),
-                    width: 0,
-                    height: 0,
-                    minWidth: 0,
-                    minHeight: 0,
-                    flexBasis: 0,
-                    flexGrow: 0,
-                    flexShrink: 0,
-                    overflow: "hidden",
-                    opacity: 0,
-                    pointerEvents: "none",
-                },
-            });
-        }
-        return slot;
-    };
-    if (resolvedVisibility === "hidden") {
-        return null;
-    }
-    const resolvedLiveSlots = (slots ?? [])
-        .map((slot, index) => resolveLayoutSlotNode(slot, index))
-        .filter((slot) => slot !== null);
-    const resolvedEditSlots = isEditMode
-        ? (() => {
-            const rendered = [];
-            const inputSlots = slotList.length > 0 ? slotList : [null];
-            inputSlots.forEach((slot, index) => {
-                const resolvedSlot = resolveLayoutSlotNode(slot, index);
-                if (resolvedSlot !== null) {
-                    rendered.push(resolvedSlot);
-                }
-                const nextSlotIndex = slotList.length > 0 ? index + 1 : 0;
-                const insertButton = editSlotAction && editRenderInsertControl
-                    ? editRenderInsertControl({
-                        key: `insert-${index}`,
-                        presentation: "inline",
-                        slotIndex: nextSlotIndex,
-                        label: editSlotLabels?.[index],
-                        onInsert: (targetSlotIndex) => editSlotAction(targetSlotIndex, {
-                            defaultPickSection: "widget",
-                            allowWidgetSection: true,
-                            slotIndex: targetSlotIndex,
-                        }),
-                    })
-                    : null;
-                if (insertButton !== null) {
-                    rendered.push(insertButton);
-                }
-            });
-            return rendered;
-        })()
-        : resolvedLiveSlots;
-    const { style: resolvedLayoutStyle, hasExplicitLayoutBackground, } = resolvePhiBaseLayoutChrome({
-        labelEnd,
-        padding,
-        paddingTop,
-        paddingRight,
-        paddingBottom,
-        paddingLeft,
-        background,
-        border,
-        borderRadius,
-        effect,
-        shadow,
-    });
-    const resolvedContainerStyle = {
-        ...resolvePhiLayoutBoxStyle({
-            size: resolvedSize,
-            minSize,
-            maxSize,
-        }),
-        ...(resolvedZIndex == null ? {} : { zIndex: resolvedZIndex }),
-        opacity: resolvedOpacity,
-        ...(resolvedMargin == null
-            ? {}
-            : {
-                marginTop: resolvedMargin,
-                marginRight: resolvedMargin,
-                marginBottom: resolvedMargin,
-                marginLeft: resolvedMargin,
-            }),
-        ...(resolvedGap == null
-            ? {}
-            : {
-                rowGap: resolvedGap,
-                columnGap: resolvedGap,
-            }),
-        ...resolvedLayoutStyle,
-        ...(resolvedEnabled
-            ? {}
-            : {
-                opacity: 0.5,
-                pointerEvents: "none",
-            }),
-        flex: "1 1 auto",
-        minWidth: 0,
-        minHeight: 0,
-        overflow: resolvedVisibility === "collapsed" ? "hidden" : undefined,
-        ...style,
-    };
-    return (_jsx(PhiBaseLayoutSlotStateContext.Provider, { value: resolvedContext, children: _jsxs("div", { "data-phi-block-id": blockId ?? undefined, "data-layout-kind": layoutKind, "data-phi-block-render-mode": resolvedRenderMode, "data-phi-block-visibility": resolvedVisibility, "data-phi-block-enabled": resolvedEnabled ? "true" : "false", "data-phi-block-selectable": capabilities?.selectable ? "true" : undefined, "data-phi-block-draggable": capabilities?.draggable ? "true" : undefined, "data-phi-block-hoverable": capabilities?.hoverable ? "true" : undefined, "data-phi-block-activatable": capabilities?.activatable ? "true" : undefined, "data-phi-block-focusable": capabilities?.focusable ? "true" : undefined, "data-phi-block-droppable": capabilities?.droppable ? "true" : undefined, "data-phi-block-selected": runtime?.selected ? "true" : undefined, "data-phi-block-hovered": runtime?.hovered ? "true" : undefined, "data-phi-block-dragging": runtime?.dragging ? "true" : undefined, "data-phi-block-focused": runtime?.focused ? "true" : undefined, "data-phi-block-active": runtime?.active ? "true" : undefined, "data-phi-layout-debug-layer": phiLayoutDebugLayerMarker(isAuthoringRender), "data-phi-debug-scaffold": resolvedDebugMode ? "on" : undefined, "data-phi-layout-has-explicit-layout-background": hasExplicitLayoutBackground ? "true" : "false", className: ["phi-layout", className].filter(Boolean).join(" "), style: resolvedContainerStyle, children: [backgroundLayer, resolvedEditSlots] }) }));
-}

package/components/layouts/clients/phi-carousel-layout-client.d.ts

@@ -33,7 +33,6 @@ export type PhiCarouselLayoutProps = Omit<PhiBaseLayoutProps, "slots"> & {
     slots: ReactNode[];
     slotKeys: string[];
     slotMeta?: PhiCarouselLayoutSlotMeta[];
-    activeSlotKey?: string;
     defaultActiveSlotKey?: string;
     visibleSlots?: number;
     windowAnchor?: PhiSequenceAnchor;
@@ -61,4 +60,4 @@ export type PhiCarouselLayoutProps = Omit<PhiBaseLayoutProps, "slots"> & {
     editSlotAnchor?: PhiAnchorWidgetPlacement | null;
     style?: CSSProperties;
 };
-export declare function PhiCarouselLayout({ slots, slotKeys, slotMeta, activeSlotKey, defaultActiveSlotKey, visibleSlots, windowAnchor, transition, transitionDurationMs, transitionEasing, slotGap, loop, controls, controlLabels, autoplayMs, lookahead, slotAnchor, ...layoutProps }: PhiCarouselLayoutProps): import("react").JSX.Element;
+export declare function PhiCarouselLayout({ slots, slotKeys, slotMeta, defaultActiveSlotKey, visibleSlots, windowAnchor, transition, transitionDurationMs, transitionEasing, slotGap, loop, controls, controlLabels, autoplayMs, lookahead, slotAnchor, ...layoutProps }: PhiCarouselLayoutProps): import("react").JSX.Element;

package/components/layouts/clients/phi-carousel-layout-client.js

@@ -10,8 +10,9 @@ import { resolvePhiBaseLayoutChrome, } from "../phi-layout-view-model";
 import { isRenderablePhiNode } from "../phi-layout-scaffold-utils";
 import { PhiLayoutAnchoredOverlay } from "./phi-layout-anchored-overlay";
 import { PhiSequenceSlotEditor } from "./phi-sequence-slot-editor";
-import { usePhiSlotSequence } from "../use-phi-slot-sequence";
-export function PhiCarouselLayout({ slots, slotKeys, slotMeta, activeSlotKey, defaultActiveSlotKey, visibleSlots = 1, windowAnchor = "start", transition = "slide", transitionDurationMs, transitionEasing, slotGap = 0, loop = false, controls = "arrows", controlLabels, autoplayMs = 0, lookahead = 1, slotAnchor = "center", ...layoutProps }) {
+import { resolvePhiSequenceEditableSlotCount, usePhiSlotSequence } from "../use-phi-slot-sequence";
+import { resolvePhiCarouselCurrentPage, resolvePhiCarouselPageStarts, resolvePhiCarouselStep, } from "../phi-carousel-pages";
+export function PhiCarouselLayout({ slots, slotKeys, slotMeta, defaultActiveSlotKey, visibleSlots = 1, windowAnchor = "start", transition = "slide", transitionDurationMs, transitionEasing, slotGap = 0, loop = false, controls = "arrows", controlLabels, autoplayMs = 0, lookahead = 1, slotAnchor = "center", ...layoutProps }) {
     // Named fields rather than the rest object: handing the compiler a whole rest object makes every
     // value later destructured out of it look like it may change, which costs the component its memoization.
     const authoring = {
@@ -19,15 +20,18 @@ export function PhiCarouselLayout({ slots, slotKeys, slotMeta, activeSlotKey, de
         editSlotLabels: layoutProps.editSlotLabels,
         capabilities: layoutProps.capabilities,
     };
-    const { blockId, renderMode, style, layoutKind = "carousel", padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, border, borderRadius, effect, shadow, editSlotAction, editRenderInsertControl, editSlotAnchor = "center", } = layoutProps;
+    const { blockId, renderMode, style, layoutKind = "carousel", padding, paddingTop, paddingRight, paddingBottom, paddingLeft, background, backgroundLayer, borderSource, border, borderRadius, effect, shadow, editSlotAction, editRenderInsertControl, editSlotAnchor = "center", } = layoutProps;
     const isEditMode = renderMode === "editor";
+    const editableSlotCount = resolvePhiSequenceEditableSlotCount(slots, slotKeys);
     const { token } = theme.useToken();
     const { activeIndex, slotMeta: resolvedSlotMeta, setActiveIndex, } = usePhiSlotSequence({
         blockId,
         slots,
         slotKeys,
+        // While authoring, the sequence reaches one slot past the last filled one -- the empty slot the
+        // next child goes into. A page has no such slot and steps through what it holds.
+        ...(isEditMode ? { slotCount: editableSlotCount } : {}),
         ...(slotMeta ? { slotLabels: slotMeta } : {}),
-        ...(activeSlotKey === undefined ? {} : { activeSlotKey }),
         ...(defaultActiveSlotKey === undefined ? {} : { defaultActiveSlotKey }),
     });
     /*
@@ -45,22 +49,16 @@ export function PhiCarouselLayout({ slots, slotKeys, slotMeta, activeSlotKey, de
     const nextFilled = track.findIndex((entry) => entry.slotIndex >= activeIndex);
     const trackIndex = nextFilled >= 0 ? nextFilled : Math.max(track.length - 1, 0);
     const span = Math.min(Math.max(visibleSlots, 1), Math.max(track.length, 1));
-    // The last window rather than the last slot: past this the window would hang off the end, and
-    // stepping to it would move nothing.
-    const lastTrackStart = Math.max(0, track.length - span);
+    // Where the window stops: a window at a time, and the last window rather than the last slot -- past
+    // it the window would hang off the end. The arrows, the dots and the timer all read this one list.
+    const pageStarts = useMemo(() => resolvePhiCarouselPageStarts(track.length, span), [span, track.length]);
+    const lastTrackStart = pageStarts[pageStarts.length - 1] ?? 0;
     const stepTo = useCallback((nextTrackIndex) => {
         const entry = track[nextTrackIndex];
         if (entry)
             setActiveIndex(entry.slotIndex);
     }, [setActiveIndex, track]);
-    const step = useCallback((direction) => {
-        const next = trackIndex + direction * span;
-        if (next > lastTrackStart)
-            return stepTo(loop ? 0 : lastTrackStart);
-        if (next < 0)
-            return stepTo(loop ? lastTrackStart : 0);
-        return stepTo(next);
-    }, [lastTrackStart, loop, span, stepTo, trackIndex]);
+    const step = useCallback((direction) => stepTo(resolvePhiCarouselStep(pageStarts, trackIndex, direction, loop)), [loop, pageStarts, stepTo, trackIndex]);
     const advance = useCallback(() => step(1), [step]);
     /*
      * Movement nobody asked for, and the two ways to decline it.
@@ -89,22 +87,24 @@ export function PhiCarouselLayout({ slots, slotKeys, slotMeta, activeSlotKey, de
         paddingBottom,
         paddingLeft,
         background,
+        borderSource,
         border,
         borderRadius,
         effect,
         shadow,
     };
     if (isEditMode) {
-        return (_jsx(PhiSequenceSlotEditor, { slots: slots, slotKeys: slotKeys, slotLabels: resolvedSlotMeta, activeIndex: activeIndex, onActiveIndexChange: setActiveIndex, slotNoun: "carousel slot", layoutKind: layoutKind, renderMode: renderMode, authoring: authoring, chrome: chrome, backgroundLayer: backgroundLayer, editSlotAction: editSlotAction, editRenderInsertControl: editRenderInsertControl, editSlotAnchor: editSlotAnchor, style: style }));
+        return (_jsx(PhiSequenceSlotEditor, { slots: slots, slotKeys: slotKeys, slotLabels: resolvedSlotMeta, slotCount: editableSlotCount, activeIndex: activeIndex, onActiveIndexChange: setActiveIndex, slotNoun: "carousel slot", layoutKind: layoutKind, renderMode: renderMode, authoring: authoring, chrome: chrome, backgroundLayer: backgroundLayer, editSlotAction: editSlotAction, editRenderInsertControl: editRenderInsertControl, editSlotAnchor: editSlotAnchor, style: style }));
     }
     const resolvedLayoutInset = resolvePhiLayoutInset(chrome);
     /*
      * One dot per window, not per slot: with a wide window the slots move a window at a time, so a dot
      * per slot would offer positions the Carousel never stops at. Each is named after the first slot it
-     * brings into view -- the label a person gave the block, which needs no translating.
+     * brings into view -- the label a person gave the block, which needs no translating. The last dot's
+     * window is the last window, so that first slot is not always a multiple of the window.
      */
-    const pageCount = Math.ceil(track.length / span);
-    const currentPage = Math.min(Math.floor(trackIndex / span), Math.max(pageCount - 1, 0));
+    const pageCount = pageStarts.length;
+    const currentPage = resolvePhiCarouselCurrentPage(pageStarts, trackIndex);
     const slotLabelAt = (position) => {
         const entry = track[position];
         const meta = entry && resolvedSlotMeta.find((candidate) => candidate.index === entry.slotIndex);
@@ -114,18 +114,23 @@ export function PhiCarouselLayout({ slots, slotKeys, slotMeta, activeSlotKey, de
     const showDots = (controls === "dots" || controls === "both") && pageCount > 1;
     const atStart = trackIndex <= 0;
     const atEnd = trackIndex >= lastTrackStart;
-    return (_jsxs("div", { "data-layout-kind": layoutKind, "data-phi-carousel-transition": transition, "data-phi-carousel-controls": controls, onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onFocusCapture: () => setPaused(true), onBlurCapture: () => setPaused(false), style: {
+    return (_jsxs("div", { "data-layout-kind": layoutKind, "data-phi-carousel-transition": transition, "data-phi-carousel-controls": controls, onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onFocusCapture: () => setPaused(true), onBlurCapture: () => setPaused(false), 
+        /*
+         * The Layout's own box, named as one: the fill rules address `.phi-layout`
+         * (`.phi-slot-child--block-fill > .phi-layout`, styles/layout.css), and this box carried a
+         * `height: 100%` of its own instead, so the class was never missed. Without it the box would
+         * take the width its frame gives and no height at all.
+         */
+        className: "phi-layout", style: {
             position: "relative",
             display: "flex",
             flexDirection: "column",
-            width: "100%",
-            height: "100%",
             minWidth: 0,
             minHeight: 0,
             boxSizing: "border-box",
             ...resolvePhiBaseLayoutChrome(chrome).style,
             ...style,
-        }, children: [backgroundLayer, _jsxs("div", { style: { position: "relative", flex: "1 1 auto", minWidth: 0, minHeight: 0 }, children: [_jsx(PhiSequenceViewport, { items: track.map((entry) => entry.slot), activeIndex: trackIndex, visibleCount: span, anchor: windowAnchor, transition: transition, ...(transitionDurationMs === undefined ? {} : { durationMs: transitionDurationMs }), ...(transitionEasing === undefined ? {} : { easing: transitionEasing }), lookahead: lookahead, gap: slotGap, style: { width: "100%", height: "100%", minHeight: 0 }, renderItem: (slot) => (_jsx(PhiLayoutAnchoredOverlay, { anchor: slotAnchor, positionMode: "flow", fillAvailableInline: true, fillAvailableBlock: true, inset: resolvedLayoutInset, children: slot })) }), showArrows ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { position: "absolute", insetBlockStart: "50%", insetInlineStart: token.marginXS, transform: "translateY(-50%)", zIndex: 1 }, children: _jsx(PhiButtonControl, { icon: _jsx(LeftOutlined, {}), ariaLabel: controlLabels?.previous ?? "Previous", shape: "circle", disabled: atStart && !loop, onClick: () => step(-1) }) }), _jsx("div", { style: { position: "absolute", insetBlockStart: "50%", insetInlineEnd: token.marginXS, transform: "translateY(-50%)", zIndex: 1 }, children: _jsx(PhiButtonControl, { icon: _jsx(RightOutlined, {}), ariaLabel: controlLabels?.next ?? "Next", shape: "circle", disabled: atEnd && !loop, onClick: () => step(1) }) })] })) : null] }), showDots ? (_jsx("div", { style: { display: "flex", flex: "0 0 auto", justifyContent: "center", gap: token.marginXXS, paddingBlockStart: token.marginXS }, children: Array.from({ length: pageCount }, (_, page) => (_jsx("button", { type: "button", "aria-label": slotLabelAt(page * span), "aria-current": page === currentPage || undefined, onClick: () => stepTo(Math.min(page * span, lastTrackStart)), style: {
+        }, children: [backgroundLayer, _jsxs("div", { style: { position: "relative", flex: "1 1 auto", minWidth: 0, minHeight: 0 }, children: [_jsx(PhiSequenceViewport, { items: track.map((entry) => entry.slot), activeIndex: trackIndex, visibleCount: span, anchor: windowAnchor, transition: transition, ...(transitionDurationMs === undefined ? {} : { durationMs: transitionDurationMs }), ...(transitionEasing === undefined ? {} : { easing: transitionEasing }), lookahead: lookahead, gap: slotGap, style: { width: "100%", height: "100%", minHeight: 0 }, renderItem: (slot) => (_jsx(PhiLayoutAnchoredOverlay, { anchor: slotAnchor, positionMode: "flow", fillAvailableInline: true, fillAvailableBlock: true, inset: resolvedLayoutInset, children: slot })) }), showArrows ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { position: "absolute", insetBlockStart: "50%", insetInlineStart: token.marginXS, transform: "translateY(-50%)", zIndex: 1 }, children: _jsx(PhiButtonControl, { icon: _jsx(LeftOutlined, {}), ariaLabel: controlLabels?.previous ?? "Previous", shape: "circle", disabled: atStart && !loop, onClick: () => step(-1) }) }), _jsx("div", { style: { position: "absolute", insetBlockStart: "50%", insetInlineEnd: token.marginXS, transform: "translateY(-50%)", zIndex: 1 }, children: _jsx(PhiButtonControl, { icon: _jsx(RightOutlined, {}), ariaLabel: controlLabels?.next ?? "Next", shape: "circle", disabled: atEnd && !loop, onClick: () => step(1) }) })] })) : null] }), showDots ? (_jsx("div", { style: { display: "flex", flex: "0 0 auto", justifyContent: "center", gap: token.marginXXS, paddingBlockStart: token.marginXS }, children: Array.from({ length: pageCount }, (_, page) => (_jsx("button", { type: "button", "aria-label": slotLabelAt(pageStarts[page] ?? 0), "aria-current": page === currentPage || undefined, onClick: () => stepTo(pageStarts[page] ?? 0), style: {
                         width: page === currentPage ? token.controlHeightXS : token.marginXS,
                         height: token.marginXS,
                         padding: 0,

package/components/layouts/clients/phi-collapsible-layout-client.d.ts

@@ -1,4 +1,3 @@
-import type { CollapseProps } from "antd";
 import type { CSSProperties, ReactNode } from "react";
 import type { PhiRenderableBlockAnchor } from "../../../types/renderable-block";
 import type { PhiCmsInstanceId } from "../../../types/cms-instance-id";
@@ -25,14 +24,12 @@ export type PhiCollapsibleLayoutProps = Omit<PhiBaseLayoutProps, "slots"> & {
     onOpenSlotKeysChange?: (next: string[]) => void;
     defaultOpenSlotKeys?: string[];
     collapsible?: "header" | "icon" | "disabled";
-    bordered?: boolean;
     ghost?: boolean;
     expandIconPlacement?: "start" | "end";
     collapseSize?: PhiControlSize;
     titleStrong?: boolean;
     headerPadding?: CSSProperties["padding"];
     innerPadding?: CSSProperties["padding"];
-    collapseStyles?: CollapseProps["styles"];
     style?: CSSProperties;
 };
 export declare function PhiCollapsibleLayout(props: PhiCollapsibleLayoutProps): import("react").JSX.Element;