@phis/ui 0.1.0

package/plugins/runtime/layout-plugin-resolution.d.ts

@@ -0,0 +1,4 @@
+import type { PhiCmsLayoutPlugin } from "../../types";
+export type PhiRuntimeCmsLayoutPlugin = PhiCmsLayoutPlugin<unknown>;
+export declare function resolvePhiRuntimeLayoutPluginByTypeKey(type: string, pluginsByType: ReadonlyMap<string, PhiRuntimeCmsLayoutPlugin>): PhiRuntimeCmsLayoutPlugin | null;
+export declare function resolvePhiRuntimeLayoutPluginConfigParser(plugin: PhiRuntimeCmsLayoutPlugin | null | undefined): ((raw: Record<string, unknown>) => unknown) | null;

package/plugins/runtime/layout-plugin-resolution.js

@@ -0,0 +1,9 @@
+import { splitPhiCmsLayoutNamespacedTypeKey } from "../../constants/cms-layout-types";
+export function resolvePhiRuntimeLayoutPluginByTypeKey(type, pluginsByType) {
+    const { pluginKey, typeKey } = splitPhiCmsLayoutNamespacedTypeKey(type);
+    const plugin = pluginsByType.get(`${pluginKey}/${typeKey}`) ?? null;
+    return plugin;
+}
+export function resolvePhiRuntimeLayoutPluginConfigParser(plugin) {
+    return plugin?.parseConfig ?? null;
+}

package/plugins/runtime/phi-slot-child-effects-visibility-observer.d.ts

@@ -0,0 +1,3 @@
+export declare function PhiSlotChildEffectsVisibilityObserver({ once, }: {
+    once: boolean;
+}): import("react").JSX.Element;

package/plugins/runtime/phi-slot-child-effects-visibility-observer.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+const PHI_EFFECTS_VISIBLE_BOTTOM_OFFSET_PX = 30;
+function isEntryVisibleEnough(entry) {
+    if (!entry.isIntersecting) {
+        return false;
+    }
+    const viewportTop = 0;
+    const viewportBottom = window.innerHeight;
+    const visiblePastBottomOffset = viewportBottom - entry.boundingClientRect.top;
+    if (visiblePastBottomOffset < PHI_EFFECTS_VISIBLE_BOTTOM_OFFSET_PX) {
+        return false;
+    }
+    const visibleBlockSize = Math.max(0, Math.min(entry.boundingClientRect.bottom, viewportBottom) -
+        Math.max(entry.boundingClientRect.top, viewportTop));
+    const targetBlockSize = Math.max(0, entry.boundingClientRect.height);
+    if (targetBlockSize === 0) {
+        return false;
+    }
+    const requiredBlockSize = Math.min(PHI_EFFECTS_VISIBLE_BOTTOM_OFFSET_PX, targetBlockSize);
+    return visibleBlockSize >= requiredBlockSize;
+}
+export function PhiSlotChildEffectsVisibilityObserver({ once, }) {
+    const markerRef = useRef(null);
+    useEffect(() => {
+        const marker = markerRef.current;
+        const target = marker?.parentElement;
+        if (!target || typeof IntersectionObserver === "undefined") {
+            target?.setAttribute("data-phi-effects-state", "running");
+            return undefined;
+        }
+        let hasRun = false;
+        const startAnimation = () => {
+            if (once && hasRun) {
+                return;
+            }
+            hasRun = true;
+            target.setAttribute("data-phi-effects-state", "idle");
+            void target.offsetWidth;
+            target.setAttribute("data-phi-effects-state", "running");
+        };
+        const observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            if (isEntryVisibleEnough(entry)) {
+                startAnimation();
+                if (once) {
+                    observer.disconnect();
+                }
+                return;
+            }
+            if (!once) {
+                target.setAttribute("data-phi-effects-state", "idle");
+            }
+        }, {
+            rootMargin: `0px 0px -${PHI_EFFECTS_VISIBLE_BOTTOM_OFFSET_PX}px 0px`,
+            threshold: [0, 1],
+        });
+        target.setAttribute("data-phi-effects-state", "idle");
+        observer.observe(target);
+        return () => observer.disconnect();
+    }, [once]);
+    return _jsx("span", { ref: markerRef, hidden: true, "data-phi-effects-visibility-observer": "true" });
+}

package/plugins/runtime/phi-slot-child-frame-client.d.ts

@@ -0,0 +1,2 @@
+import type { PhiSlotChildFrameProps } from "./phi-slot-child-frame";
+export declare function PhiSlotChildFrameClient({ kind, blockId, config, runtime, signalScope, runtimeSignalEmissionsEnabled, chrome, children, ...viewProps }: PhiSlotChildFrameProps): import("react").JSX.Element;

package/plugins/runtime/phi-slot-child-frame-client.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveRenderableBlockEffectsAttributes, resolveRenderableBlockViewportEffects, } from "../../helpers/renderable-block-effects";
+import { PhiSlotChildEffectsVisibilityObserver } from "./phi-slot-child-effects-visibility-observer";
+import { PhiSlotChildViewportEffectsObserver } from "./phi-slot-child-viewport-effects-observer";
+import { createPhiRenderableBlockReceiver, usePhiRenderableBlockRuntime, } from "../../components/runtime/renderable-block-runtime";
+import { PhiRuntimeSignalEmissionBoundary, PhiSignalIdentityProvider, } from "../../components/runtime/runtime-signal-identity";
+import { PhiSlotChildFrameView, } from "./phi-slot-child-frame-view";
+export function PhiSlotChildFrameClient({ kind, blockId, config, runtime, signalScope, runtimeSignalEmissionsEnabled = true, chrome, children, ...viewProps }) {
+    const receiver = createPhiRenderableBlockReceiver(kind === "widget" ? "widget" : "layout", blockId);
+    const resolvedSignalScope = signalScope ?? (kind === "widget" ? "widget" : "layout");
+    const blockRuntime = usePhiRenderableBlockRuntime({
+        blockId,
+        receiver,
+        renderMode: config?.renderMode,
+        visibility: config?.visibility,
+        enabled: config?.enabled,
+        debugMode: config?.debugMode,
+        anchor: config?.anchor,
+        zIndex: config?.zIndex,
+        className: config?.className,
+        size: config?.size,
+        minSize: config?.minSize,
+        maxSize: config?.maxSize,
+        collapsedSizeHint: config?.collapsedSizeHint,
+        background: config?.background,
+        border: config?.border,
+        shadow: config?.shadow,
+        opacity: config?.opacity,
+        effects: config?.effects,
+        capabilities: config?.capabilities,
+        runtime,
+        signalScope: resolvedSignalScope,
+    });
+    const resolvedVisibility = blockRuntime.state.visibility ?? "visible";
+    const resolvedEnabled = blockRuntime.state.enabled ?? true;
+    const resolvedSize = resolvedVisibility === "collapsed"
+        ? blockRuntime.state.collapsedSizeHint ?? blockRuntime.state.size
+        : blockRuntime.state.size;
+    const resolvedConfig = {
+        ...config,
+        visibility: resolvedVisibility,
+        enabled: resolvedEnabled,
+        renderMode: blockRuntime.state.renderMode,
+        debugMode: blockRuntime.state.debugMode,
+        className: blockRuntime.state.className,
+        size: resolvedSize,
+        minSize: blockRuntime.state.minSize,
+        maxSize: blockRuntime.state.maxSize,
+        collapsedSizeHint: blockRuntime.state.collapsedSizeHint,
+        background: blockRuntime.state.background,
+        border: blockRuntime.state.border,
+        shadow: blockRuntime.state.shadow,
+        zIndex: blockRuntime.state.zIndex,
+        opacity: blockRuntime.state.opacity,
+        effects: blockRuntime.state.effects,
+        capabilities: blockRuntime.state.capabilities,
+    };
+    const effectsAttributes = viewProps.disableEffects
+        ? undefined
+        : resolveRenderableBlockEffectsAttributes(resolvedConfig);
+    const viewportEffects = viewProps.disableEffects
+        ? []
+        : resolveRenderableBlockViewportEffects(resolvedConfig);
+    const shouldObserveVisibility = effectsAttributes?.["data-phi-effects-trigger"] === "on_visible";
+    const enhancedChildren = (_jsxs(PhiSignalIdentityProvider, { value: {
+            sender: receiver,
+            receiver,
+            scope: resolvedSignalScope,
+        }, children: [_jsx(PhiRuntimeSignalEmissionBoundary, { enabled: runtimeSignalEmissionsEnabled, children: children }), chrome, shouldObserveVisibility ? (_jsx(PhiSlotChildEffectsVisibilityObserver, { once: effectsAttributes?.["data-phi-effects-once"] !== "false" })) : null, viewportEffects.length > 0 ? (_jsx(PhiSlotChildViewportEffectsObserver, { effects: viewportEffects })) : null] }));
+    return (_jsx(PhiSlotChildFrameView, { ...viewProps, kind: kind, blockId: blockId, receiver: receiver, config: resolvedConfig, effectsState: blockRuntime.state.effectsState, children: enhancedChildren }));
+}

package/plugins/runtime/phi-slot-child-frame-view.d.ts

@@ -0,0 +1,26 @@
+import type { CSSProperties, MouseEventHandler, PointerEventHandler, ReactNode } from "react";
+import type { PhiRenderableBlock, PhiSlotSizePolicy, PhiCmsInstanceId } from "../../types";
+import { type PhiSlotChildKind } from "./slot-size-policy";
+import type { PhiRenderableBlockReceiver } from "../../components/runtime/renderable-block-runtime";
+export type PhiSlotChildFrameViewProps = {
+    kind: PhiSlotChildKind;
+    slotSizePolicy?: PhiSlotSizePolicy | null;
+    blockId?: PhiCmsInstanceId | null;
+    receiver?: PhiRenderableBlockReceiver | null;
+    config?: Partial<PhiRenderableBlock> | null;
+    explicitInlineSize?: boolean;
+    explicitBlockSize?: boolean;
+    disableEffects?: boolean;
+    effectsState?: "idle" | "running";
+    className?: string;
+    style?: CSSProperties;
+    builderWidgetTitle?: string | null;
+    builderWidgetSelected?: boolean;
+    builderWidgetPopupOpen?: boolean;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    onClickCapture?: MouseEventHandler<HTMLDivElement>;
+    onPointerLeave?: PointerEventHandler<HTMLDivElement>;
+    children: ReactNode;
+};
+export declare function requiresPhiSlotChildEffectsObserver(config: Partial<PhiRenderableBlock> | null | undefined, disableEffects?: boolean): boolean;
+export declare function PhiSlotChildFrameView({ kind, slotSizePolicy, blockId, receiver, config, explicitInlineSize, explicitBlockSize, disableEffects, effectsState, className, style, builderWidgetTitle, builderWidgetSelected, builderWidgetPopupOpen, onClick, onClickCapture, onPointerLeave, children, }: PhiSlotChildFrameViewProps): import("react").JSX.Element;

package/plugins/runtime/phi-slot-child-frame-view.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveRenderableBlockEffectsAttributes, resolveRenderableBlockEffectsStyle, resolveRenderableBlockStaticEffectsStyle, resolveRenderableBlockViewportEffects, } from "../../helpers/renderable-block-effects";
+import { resolvePhiBorderWidgetStyle } from "../../helpers/border-widget-style";
+import { resolvePhiBackgroundWidgetStyle } from "../../components/widgets/config/background";
+import { combinePhiBoxShadows, resolvePhiShadow } from "../../helpers/layout-style";
+import { buildPhiSlotChildClassName, buildPhiSlotChildDataAttributes, resolvePhiSlotChildBaseStyle, resolvePhiSlotChildExplicitAxes, resolvePhiSlotSizePolicy, } from "./slot-size-policy";
+function resolvePhiSlotChildSizeStyle(config) {
+    const maxWidth = typeof config?.maxSize?.width === "number"
+        ? `min(100%, ${config.maxSize.width}px)`
+        : config?.maxSize?.width;
+    const maxHeight = typeof config?.maxSize?.height === "number"
+        ? `${config.maxSize.height}px`
+        : config?.maxSize?.height;
+    return {
+        ...(config?.size?.width == null ? {} : { width: config.size.width }),
+        ...(config?.size?.height == null ? {} : { height: config.size.height }),
+        ...(config?.minSize?.width == null ? {} : { minWidth: config.minSize.width }),
+        ...(config?.minSize?.height == null ? {} : { minHeight: config.minSize.height }),
+        ...(maxWidth == null ? {} : { maxWidth }),
+        ...(maxHeight == null ? {} : { maxHeight }),
+    };
+}
+function resolvePhiSlotChildBorderStyle(border) {
+    if (border == null) {
+        return {};
+    }
+    if (typeof border === "string") {
+        return { border };
+    }
+    return typeof border === "object" && !Array.isArray(border)
+        ? resolvePhiBorderWidgetStyle(border)
+        : {};
+}
+export function requiresPhiSlotChildEffectsObserver(config, disableEffects = false) {
+    if (disableEffects) {
+        return false;
+    }
+    const effectsAttributes = resolveRenderableBlockEffectsAttributes(config);
+    return (effectsAttributes?.["data-phi-effects-trigger"] === "on_visible" ||
+        resolveRenderableBlockViewportEffects(config).length > 0);
+}
+export function PhiSlotChildFrameView({ kind, slotSizePolicy, blockId, receiver, config, explicitInlineSize, explicitBlockSize, disableEffects = false, effectsState, className, style, builderWidgetTitle, builderWidgetSelected, builderWidgetPopupOpen, onClick, onClickCapture, onPointerLeave, children, }) {
+    const resolvedVisibility = config?.visibility ?? "visible";
+    const resolvedEnabled = config?.enabled ?? true;
+    const resolvedSize = resolvedVisibility === "collapsed"
+        ? config?.collapsedSizeHint ?? config?.size
+        : config?.size;
+    const resolvedConfig = { ...config, size: resolvedSize };
+    const policy = resolvePhiSlotSizePolicy(slotSizePolicy, kind);
+    const explicitAxes = resolvePhiSlotChildExplicitAxes(resolvedConfig);
+    const resolvedExplicitInlineSize = explicitInlineSize ?? explicitAxes.explicitInlineSize;
+    const resolvedExplicitBlockSize = explicitBlockSize ?? explicitAxes.explicitBlockSize;
+    const effectsStyle = disableEffects
+        ? resolveRenderableBlockStaticEffectsStyle(resolvedConfig)
+        : resolveRenderableBlockEffectsStyle(resolvedConfig);
+    const effectsAttributes = disableEffects
+        ? undefined
+        : resolveRenderableBlockEffectsAttributes(resolvedConfig);
+    const resolvedBackgroundStyle = resolvedConfig.background == null
+        ? {}
+        : resolvePhiBackgroundWidgetStyle(resolvedConfig.background);
+    return (_jsx("div", { hidden: resolvedVisibility === "hidden", className: [buildPhiSlotChildClassName(policy), className, resolvedConfig.className].filter(Boolean).join(" "), "data-phi-slot-child-frame": "true", "data-phi-renderable-block": "true", "data-phi-slot-child-kind": kind, "data-phi-block-id": blockId ?? undefined, "data-phi-signal-receiver": receiver ?? undefined, "data-phi-block-render-mode": resolvedConfig.renderMode, "data-phi-block-visibility": resolvedVisibility, "data-phi-viewport-flags": resolvedConfig.viewportFlags || undefined, "data-phi-block-enabled": resolvedEnabled ? "true" : "false", "data-phi-debug-scaffold": resolvedConfig.debugMode ? "on" : undefined, "data-phi-builder-widget-title": builderWidgetTitle?.trim() || undefined, "data-phi-builder-widget-selected": builderWidgetSelected ? "true" : undefined, "data-phi-builder-popup-open": builderWidgetPopupOpen ? "true" : undefined, ...effectsAttributes, "data-phi-effects-state": effectsState ?? effectsAttributes?.["data-phi-effects-state"], ...buildPhiSlotChildDataAttributes(policy, {
+            explicitInlineSize: resolvedExplicitInlineSize,
+            explicitBlockSize: resolvedExplicitBlockSize,
+            minInlineSize: resolvedConfig.minSize?.width ?? undefined,
+            minBlockSize: resolvedConfig.minSize?.height ?? undefined,
+            maxInlineSize: resolvedConfig.maxSize?.width ?? undefined,
+            maxBlockSize: resolvedConfig.maxSize?.height ?? undefined,
+        }), style: {
+            ...resolvePhiSlotChildBaseStyle(policy),
+            ...resolvePhiSlotChildSizeStyle(resolvedConfig),
+            ...resolvedBackgroundStyle,
+            ...resolvePhiSlotChildBorderStyle(resolvedConfig.border),
+            ...(resolvedConfig.zIndex == null ? {} : { zIndex: resolvedConfig.zIndex }),
+            ...(kind !== "widget"
+                ? {}
+                : {
+                    boxShadow: combinePhiBoxShadows(resolvedBackgroundStyle.boxShadow, resolvePhiShadow(resolvedConfig.shadow)),
+                }),
+            ...(resolvedConfig.opacity == null ? {} : { opacity: resolvedConfig.opacity }),
+            ...(resolvedEnabled
+                ? {}
+                : {
+                    opacity: Math.min(resolvedConfig.opacity ?? 1, 0.5),
+                    pointerEvents: "none",
+                }),
+            ...(resolvedVisibility === "collapsed" ? { overflow: "hidden" } : {}),
+            ...effectsStyle,
+            ...style,
+        }, onClick: onClick, onClickCapture: onClickCapture, onPointerLeave: onPointerLeave, children: children }));
+}

package/plugins/runtime/phi-slot-child-frame.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties, MouseEventHandler, PointerEventHandler, ReactNode } from "react";
+import type { PhiRenderableBlock, PhiRenderableBlockRuntime, PhiSignalScope, PhiSlotSizePolicy, PhiCmsInstanceId } from "../../types";
+import { type PhiSlotChildKind } from "./slot-size-policy";
+export type PhiSlotChildFrameProps = {
+    kind: PhiSlotChildKind;
+    slotSizePolicy?: PhiSlotSizePolicy | null;
+    blockId?: PhiCmsInstanceId | null;
+    config?: Partial<PhiRenderableBlock> | null;
+    runtime?: PhiRenderableBlockRuntime;
+    signalScope?: PhiSignalScope | null;
+    signalParticipant?: boolean;
+    explicitInlineSize?: boolean;
+    explicitBlockSize?: boolean;
+    disableEffects?: boolean;
+    runtimeSignalEmissionsEnabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    builderWidgetTitle?: string | null;
+    builderWidgetSelected?: boolean;
+    builderWidgetPopupOpen?: boolean;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    onClickCapture?: MouseEventHandler<HTMLDivElement>;
+    onPointerLeave?: PointerEventHandler<HTMLDivElement>;
+    chrome?: ReactNode;
+    children: ReactNode;
+};
+export declare function PhiSlotChildFrame(props: PhiSlotChildFrameProps): import("react").JSX.Element;

package/plugins/runtime/phi-slot-child-frame.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPhiSignalAddress } from "../../types/signals";
+import { PhiSlotChildFrameView, requiresPhiSlotChildEffectsObserver, } from "./phi-slot-child-frame-view";
+import { resolvePhiSlotChildSizingForConfig } from "./slot-size-policy";
+import { PhiRuntimeModuleRenderClientHost } from "../../components/runtime/runtime-module-render-client-manifest";
+import { PhiRuntimeRenderClientType } from "../../constants/runtime-render-client-types";
+function createPhiSlotChildReceiver(blockId) {
+    return blockId == null
+        ? null
+        : createPhiSignalAddress("cms", blockId);
+}
+export function PhiSlotChildFrame(props) {
+    const { kind, blockId, config, signalParticipant = false, runtimeSignalEmissionsEnabled = true, chrome, children, } = props;
+    const requiresClientEnhancement = signalParticipant ||
+        runtimeSignalEmissionsEnabled === false ||
+        chrome != null ||
+        props.onClick != null ||
+        props.onClickCapture != null ||
+        props.onPointerLeave != null ||
+        requiresPhiSlotChildEffectsObserver(config, props.disableEffects);
+    if (requiresClientEnhancement) {
+        return (_jsx(PhiRuntimeModuleRenderClientHost, { type: PhiRuntimeRenderClientType.SlotChildFrameEnhancer, componentProps: { ...props }, slotChildSizing: resolvePhiSlotChildSizingForConfig(kind, props.slotSizePolicy, config) }));
+    }
+    const receiver = createPhiSlotChildReceiver(blockId);
+    return (_jsx(PhiSlotChildFrameView, { kind: kind, slotSizePolicy: props.slotSizePolicy, blockId: blockId, receiver: receiver, config: config, explicitInlineSize: props.explicitInlineSize, explicitBlockSize: props.explicitBlockSize, disableEffects: props.disableEffects, className: props.className, style: props.style, builderWidgetTitle: props.builderWidgetTitle, builderWidgetSelected: props.builderWidgetSelected, builderWidgetPopupOpen: props.builderWidgetPopupOpen, onClick: props.onClick, onClickCapture: props.onClickCapture, onPointerLeave: props.onPointerLeave, children: children }));
+}

package/plugins/runtime/phi-slot-child-viewport-effects-observer.d.ts

@@ -0,0 +1,4 @@
+import type { PhiRenderableBlockViewportEffect } from "../../types";
+export declare function PhiSlotChildViewportEffectsObserver({ effects, }: {
+    effects: readonly PhiRenderableBlockViewportEffect[];
+}): import("react").JSX.Element;

package/plugins/runtime/phi-slot-child-viewport-effects-observer.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { PHI_RENDERABLE_BLOCK_DEFAULT_VIEWPORT_EFFECT } from "../../helpers/renderable-block-defaults";
+function resolveRangePoint(point, rect, viewportWidth, viewportHeight, axis) {
+    const viewportSize = axis === "x" ? viewportWidth : viewportHeight;
+    const targetSize = axis === "x" ? rect.width : rect.height;
+    if (typeof point === "number" && Number.isFinite(point)) {
+        return point;
+    }
+    if (point === "center") {
+        return viewportSize / 2 - targetSize / 2;
+    }
+    if (point === "exit") {
+        return targetSize > viewportSize ? 0 : -targetSize;
+    }
+    return viewportSize;
+}
+function applyEasing(progress, easing) {
+    if (easing === "ease-in") {
+        return progress * progress;
+    }
+    if (easing === "ease-out") {
+        return 1 - Math.pow(1 - progress, 2);
+    }
+    if (easing === "ease-in-out" || easing === "ease") {
+        return progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;
+    }
+    return progress;
+}
+function resolveProgress(effect, rect, viewportWidth, viewportHeight) {
+    const axis = effect.axis ?? PHI_RENDERABLE_BLOCK_DEFAULT_VIEWPORT_EFFECT.axis ?? "y";
+    const targetStart = axis === "x" ? rect.left : rect.top;
+    const rangeStart = resolveRangePoint(effect.rangeStart ?? PHI_RENDERABLE_BLOCK_DEFAULT_VIEWPORT_EFFECT.rangeStart, rect, viewportWidth, viewportHeight, axis);
+    const rangeEnd = resolveRangePoint(effect.rangeEnd ?? PHI_RENDERABLE_BLOCK_DEFAULT_VIEWPORT_EFFECT.rangeEnd, rect, viewportWidth, viewportHeight, axis);
+    const distance = rangeEnd - rangeStart;
+    const rawProgress = distance === 0 ? 1 : (targetStart - rangeStart) / distance;
+    const clampedProgress = effect.clamp === false ? rawProgress : Math.min(1, Math.max(0, rawProgress));
+    return applyEasing(clampedProgress, effect.easing ?? PHI_RENDERABLE_BLOCK_DEFAULT_VIEWPORT_EFFECT.easing);
+}
+function formatViewportEffectValue(value, unit) {
+    if (unit === "") {
+        return String(value);
+    }
+    return `${value}${unit ?? PHI_RENDERABLE_BLOCK_DEFAULT_VIEWPORT_EFFECT.unit ?? "px"}`;
+}
+function resolveViewportEffectValues(effects, target) {
+    const rect = target.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const values = {
+        x: "0px",
+        y: "0px",
+        rotateX: "0deg",
+        rotateY: "0deg",
+        rotateZ: "0deg",
+        scale: "1",
+        opacity: null,
+    };
+    for (const effect of effects) {
+        const property = effect.property ?? PHI_RENDERABLE_BLOCK_DEFAULT_VIEWPORT_EFFECT.property ?? "translate";
+        const axis = effect.axis ?? PHI_RENDERABLE_BLOCK_DEFAULT_VIEWPORT_EFFECT.axis ?? "y";
+        const from = effect.from ?? PHI_RENDERABLE_BLOCK_DEFAULT_VIEWPORT_EFFECT.from ?? 0;
+        const to = effect.to ?? PHI_RENDERABLE_BLOCK_DEFAULT_VIEWPORT_EFFECT.to ?? 0;
+        const progress = resolveProgress(effect, rect, viewportWidth, viewportHeight);
+        const nextValue = from + (to - from) * progress;
+        if (property === "opacity") {
+            values.opacity = String(nextValue);
+            continue;
+        }
+        if (property === "scale") {
+            values.scale = String(nextValue);
+            continue;
+        }
+        if (property === "rotate") {
+            const rotateValue = formatViewportEffectValue(nextValue, effect.unit ?? "deg");
+            if (axis === "x") {
+                values.rotateX = rotateValue;
+            }
+            else {
+                values.rotateY = rotateValue;
+            }
+            continue;
+        }
+        const translateValue = formatViewportEffectValue(nextValue, effect.unit ?? "px");
+        if (axis === "x") {
+            values.x = translateValue;
+        }
+        else {
+            values.y = translateValue;
+        }
+    }
+    return values;
+}
+function applyViewportEffectValues(target, values) {
+    target.style.setProperty("--phi-effects-viewport-x", values.x);
+    target.style.setProperty("--phi-effects-viewport-y", values.y);
+    target.style.setProperty("--phi-effects-viewport-rotate-x", values.rotateX);
+    target.style.setProperty("--phi-effects-viewport-rotate-y", values.rotateY);
+    target.style.setProperty("--phi-effects-viewport-rotate-z", values.rotateZ);
+    target.style.setProperty("--phi-effects-viewport-scale", values.scale);
+    if (values.opacity == null) {
+        target.style.removeProperty("--phi-effects-viewport-opacity");
+    }
+    else {
+        target.style.setProperty("--phi-effects-viewport-opacity", values.opacity);
+    }
+}
+export function PhiSlotChildViewportEffectsObserver({ effects, }) {
+    const markerRef = useRef(null);
+    useEffect(() => {
+        const marker = markerRef.current;
+        const target = marker?.parentElement;
+        if (!target || effects.length === 0 || typeof IntersectionObserver === "undefined") {
+            return undefined;
+        }
+        let active = false;
+        let frameId = null;
+        const update = () => {
+            frameId = null;
+            if (!active) {
+                return;
+            }
+            applyViewportEffectValues(target, resolveViewportEffectValues(effects, target));
+        };
+        const scheduleUpdate = () => {
+            if (frameId != null) {
+                return;
+            }
+            frameId = window.requestAnimationFrame(update);
+        };
+        const observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            active = Boolean(entry?.isIntersecting);
+            if (active) {
+                scheduleUpdate();
+                return;
+            }
+            if (frameId != null) {
+                window.cancelAnimationFrame(frameId);
+                frameId = null;
+            }
+        }, { rootMargin: "50% 50% 50% 50%", threshold: 0 });
+        const handleScrollOrResize = () => scheduleUpdate();
+        target.style.setProperty("--phi-effects-viewport-scale", "1");
+        observer.observe(target);
+        window.addEventListener("scroll", handleScrollOrResize, { passive: true });
+        window.addEventListener("resize", handleScrollOrResize);
+        scheduleUpdate();
+        return () => {
+            observer.disconnect();
+            window.removeEventListener("scroll", handleScrollOrResize);
+            window.removeEventListener("resize", handleScrollOrResize);
+            if (frameId != null) {
+                window.cancelAnimationFrame(frameId);
+            }
+        };
+    }, [effects]);
+    return _jsx("span", { ref: markerRef, hidden: true, "data-phi-effects-viewport-observer": "true" });
+}

package/plugins/runtime/slot-size-policy.d.ts

@@ -0,0 +1,52 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { PhiRenderableBlockBase, PhiSlotAxisSizePolicy, PhiSlotSizePolicy, PhiNormalizedSlotSizePolicy } from "../../types";
+export type PhiSlotChildKind = "widget" | "layout";
+export type PhiSlotChildSizing = {
+    policy: PhiNormalizedSlotSizePolicy;
+    explicitInlineSize: boolean;
+    explicitBlockSize: boolean;
+    minInlineSize?: CSSProperties["minWidth"];
+    minBlockSize?: CSSProperties["minHeight"];
+    maxInlineSize?: CSSProperties["maxWidth"];
+    maxBlockSize?: CSSProperties["maxHeight"];
+};
+export declare function resolvePhiSlotSizePolicy(policy: PhiSlotSizePolicy | null | undefined, kind: PhiSlotChildKind): PhiNormalizedSlotSizePolicy;
+export declare function resolvePhiSlotChildExplicitAxes(config: Pick<PhiRenderableBlockBase, "size"> | null | undefined): {
+    explicitInlineSize: boolean;
+    explicitBlockSize: boolean;
+};
+/**
+ * The sizing a client-enhanced slot child hands to the parent layout, resolved rather than referred.
+ *
+ * A Widget that needs a client frame is rendered through the Render Client Host, and the parent layout
+ * still has to learn how it sizes. Passing the block config along for the parent to read looked like the
+ * small move, and it put the same object in two places of one element's props. React's serializer writes
+ * the second one as a reference back into the element it is still building, to be filled in once that
+ * element exists -- and element props are frozen on creation in development, so the write can throw
+ * `Cannot assign to read only property 'config'` and take the Widget's whole render with it. The account
+ * menu was lost to exactly that shape, from a different source; see the Account Widget plugin.
+ *
+ * Six resolved values carry the same information and share nothing, so there is no reference to fill in.
+ */
+export declare function resolvePhiSlotChildSizingForConfig(kind: PhiSlotChildKind, slotSizePolicy: PhiSlotSizePolicy | null | undefined, config: Pick<PhiRenderableBlockBase, "size" | "minSize" | "maxSize"> | null | undefined): PhiSlotChildSizing;
+export declare function buildPhiSlotChildClassName(policy: PhiNormalizedSlotSizePolicy): string;
+export declare function buildPhiSlotChildDataAttributes(policy: PhiNormalizedSlotSizePolicy, options?: {
+    explicitInlineSize?: boolean;
+    explicitBlockSize?: boolean;
+    minInlineSize?: CSSProperties["minWidth"];
+    minBlockSize?: CSSProperties["minHeight"];
+    maxInlineSize?: CSSProperties["maxWidth"];
+    maxBlockSize?: CSSProperties["maxHeight"];
+}): {
+    "data-phi-slot-size-inline": PhiSlotAxisSizePolicy;
+    "data-phi-slot-size-block": PhiSlotAxisSizePolicy;
+    "data-phi-layout-fill-slot": string | undefined;
+    "data-phi-layout-explicit-width": string | undefined;
+    "data-phi-layout-explicit-height": string | undefined;
+    "data-phi-slot-min-inline-size": string | undefined;
+    "data-phi-slot-min-block-size": string | undefined;
+    "data-phi-slot-max-inline-size": string | undefined;
+    "data-phi-slot-max-block-size": string | undefined;
+};
+export declare function resolvePhiSlotChildSizing(child: ReactNode, fallbackKind?: PhiSlotChildKind): PhiSlotChildSizing;
+export declare function resolvePhiSlotChildBaseStyle(policy: PhiNormalizedSlotSizePolicy): CSSProperties;