@phis/ui 0.1.0 → 0.2.0

package/next/runtime-module-client-boundary.js

@@ -5,7 +5,8 @@ import { PhiRuntimeModuleRenderClientManifestProvider } from "../components/runt
 import { PhiRuntimeModuleDataProviderClientManifestProvider } from "../components/runtime/runtime-module-data-provider-client-manifest";
 import { PhiRuntimeModuleAuthoringClientManifestProvider } from "../components/runtime/runtime-module-authoring-client-manifest";
 import { PhiRuntimeModuleCalendarAdapterClientManifestProvider } from "../components/runtime/runtime-module-calendar-adapter-client-manifest";
-export function PhiNextRuntimeModuleClientBoundary({ children, controllerManifest, renderManifest, dataProviderManifest, authoringManifest, calendarAdapterManifest, }) {
+import { PhiRuntimeModuleUiProviderClientManifestProvider, } from "../components/runtime/runtime-module-ui-provider-client-manifest";
+export function PhiNextRuntimeModuleClientBoundary({ children, controllerManifest, renderManifest, dataProviderManifest, authoringManifest, calendarAdapterManifest, uiProviderManifest, }) {
     const content = authoringManifest ? (_jsx(PhiRuntimeModuleAuthoringClientManifestProvider, { manifest: authoringManifest, children: children })) : children;
-    return (_jsx(PhiRuntimeModuleControllerClientManifestProvider, { manifest: controllerManifest, children: _jsx(PhiRuntimeModuleRenderClientManifestProvider, { manifest: renderManifest, children: _jsx(PhiRuntimeModuleCalendarAdapterClientManifestProvider, { manifest: calendarAdapterManifest, children: _jsx(PhiRuntimeModuleDataProviderClientManifestProvider, { manifest: dataProviderManifest, children: content }) }) }) }));
+    return (_jsx(PhiRuntimeModuleControllerClientManifestProvider, { manifest: controllerManifest, children: _jsx(PhiRuntimeModuleRenderClientManifestProvider, { manifest: renderManifest, children: _jsx(PhiRuntimeModuleCalendarAdapterClientManifestProvider, { manifest: calendarAdapterManifest, children: _jsx(PhiRuntimeModuleDataProviderClientManifestProvider, { manifest: dataProviderManifest, children: _jsx(PhiRuntimeModuleUiProviderClientManifestProvider, { manifest: uiProviderManifest, children: content }) }) }) }) }));
 }

package/next/seo-routes.js

@@ -135,7 +135,6 @@ async function buildPhiSitemapXml(bridge, context, activeModuleIds) {
         catalog: resolvePhiCmsDescriptorCatalog(bridge.runtimeModuleCatalog),
         area: "public",
         activeModuleIds,
-        viewer: requestContext.viewer,
         publicRoutePaths: readPhiAreaPublicRoutePaths(areaPreset?.preset.preset.config),
         landingSelection: readPhiAreaLandingSelection(areaPreset?.preset.preset.config),
     });
@@ -187,7 +186,7 @@ export function buildPhiSitemapRouteHandler({ bridge }) {
         if (!context?.sitemapEnabled || !publicBase) {
             return new Response("Not Found", { status: 404, headers: { "cache-control": "no-store" } });
         }
-        const activeModuleIds = resolveActivePresetModuleKeys(bridge.runtimeModuleCatalog, "public", context.areaPreset ? { preset: context.areaPreset.preset } : null, context.requestContext.serverCapabilities, context.requestContext.viewer);
+        const activeModuleIds = resolveActivePresetModuleKeys(bridge.runtimeModuleCatalog, "public", context.areaPreset ? { preset: context.areaPreset.preset } : null, context.requestContext.serverCapabilities);
         const xml = await cache.resolve(buildPhiSitemapFingerprint(context, activeModuleIds), () => buildPhiSitemapXml(bridge, { ...context, publicBase }, activeModuleIds));
         return new Response(xml, {
             headers: { "content-type": "application/xml; charset=utf-8", "cache-control": "no-store" },

package/next/site-proxy.js

@@ -1,13 +1,15 @@
 import { NextRequest, NextResponse } from "next/server";
+import { isPhiAssetOrBackendPath } from "./static-asset-path";
 import { PHI_CMS_SPECIAL_ROOTS } from "../helpers/cms-routing";
 import { localizePath } from "../helpers/locale";
 import { extractLocalePrefix, } from "../helpers/site-locale-config";
 import { readPhiSiteRuntimeConfigSync } from "../helpers/site-runtime";
 import { fetchResolvedSiteLocale, fetchSiteLocaleConfig } from "../server-helpers/site-locale";
-import { PHIS_REQUEST_PATH_HEADER, PHIS_REQUEST_SEARCH_HEADER } from "../constants/http-headers";
+import { PHIS_CLIENT_NAVIGATION_HEADER, PHIS_REQUEST_PATH_HEADER, PHIS_REQUEST_SEARCH_HEADER, } from "../constants/http-headers";
+import { peekPhiAreaRootDoor } from "../gateway/area-root-door";
 import { readPhiServerApiCredentials } from "../helpers/phis-server-credentials";
 import { getResolvedSiteConfig } from "../gateway/site-config";
-import { PHI_COLOR_SCHEME_COOKIE, normalizePhiColorSchemeHint } from "../theme/phi-theme-mode";
+import { PHI_COLOR_SCHEME_COOKIE, PHI_THEME_MODE_COOKIE, normalizePhiColorSchemeHint, normalizePhiThemeModePreference, resolvePhiThemeMode, } from "../theme/phi-theme-mode";
 /** Where the static route tree lives. Only the proxy may send a request there; see below. */
 export const PHI_STATIC_RENDER_PREFIX = "/static-render";
 const PHI_SITE_SESSION_COOKIE = "phis_session";
@@ -26,14 +28,25 @@ const KNOWN_SPECIAL_ROOTS = new Set(PHI_CMS_SPECIAL_ROOTS);
  * preview -- into a choice nobody made, and from then on `/` sent a German browser to `/en/`. The
  * cookie is written where a viewer chooses: the locale switch.
  */
-function isAssetOrBackendPath(pathname) {
-    return (pathname.startsWith("/_next") ||
-        pathname.startsWith("/api") ||
-        pathname.startsWith("/media") ||
-        pathname.startsWith("/favicon.ico") ||
-        pathname.startsWith("/robots.txt") ||
-        pathname.startsWith("/sitemap.xml") ||
-        /\.[\w-]+$/.test(pathname));
+/**
+ * Whether the browser is navigating within the app rather than asking for a document.
+ *
+ * Not `RSC` and not `_rsc`. Both were measured absent here: Next consumes its own routing markers before
+ * the proxy runs, and strips the query parameter from `request.url` as well -- so the header a Server
+ * Component cannot read is one the proxy cannot read either. What survives is the browser's own
+ * `Sec-Fetch-Dest`, which says `document` for a navigation the browser performs and `empty` for a fetch
+ * the app performs, and which nothing in between rewrites.
+ *
+ * Absent is read as a document, which is the safe answer: it keeps the status line for anything that is
+ * not a browser -- a crawler, `curl`, a health check -- and the status line is what a forwarding Area root
+ * needs so it is not filed as a page.
+ *
+ * Only `empty` is the app's fetch. Every other value is the browser loading something as itself -- an
+ * `iframe` or `embed` is a document in a frame, a Builder preview among them -- and wants the same
+ * status line a top-level document gets.
+ */
+function isPhiClientNavigation(request) {
+    return request.headers.get("sec-fetch-dest") === "empty";
 }
 function readSiteRuntime() {
     return readPhiSiteRuntimeConfigSync();
@@ -80,8 +93,12 @@ function isPhiStaticRenderRequest(request) {
  *
  * The marker is what makes a publish visible. It joins the Site's read marker with its translation
  * markers, so any published change, or any translation, names a new address -- a page cached under the
- * old one is never asked for again, in this process or any other, without anybody telling them. The
- * mode is the colour scheme the browser reported through its hint cookie, light until it has.
+ * old one is never asked for again, in this process or any other, without anybody telling them.
+ *
+ * The mode is what this viewer chose, and the colour scheme their browser reported where they chose
+ * nothing -- the same question `resolvePhiThemeMode` answers for a dynamic render, asked here so both
+ * trees agree. It stays two renders per page either way: the preference decides which of the two a
+ * viewer is handed, never how many there are.
  */
 async function resolvePhiStaticRenderUrl(request, runtimeConfig) {
     const credentials = readPhiServerApiCredentials();
@@ -93,7 +110,7 @@ async function resolvePhiStaticRenderUrl(request, runtimeConfig) {
     const marker = [site.readMarker, site.translationMarkers.global, site.translationMarkers.site]
         .map((part) => String(part).replace(/[^A-Za-z0-9-]/g, "_"))
         .join(".");
-    const mode = normalizePhiColorSchemeHint(request.cookies.get(PHI_COLOR_SCHEME_COOKIE)?.value) ?? "light";
+    const mode = resolvePhiThemeMode(normalizePhiThemeModePreference(request.cookies.get(PHI_THEME_MODE_COOKIE)?.value), normalizePhiColorSchemeHint(request.cookies.get(PHI_COLOR_SCHEME_COOKIE)?.value));
     return new URL(`${PHI_STATIC_RENDER_PREFIX}/${marker}/${mode}${request.nextUrl.pathname}`, request.url);
 }
 const PHI_STATIC_RENDER_PASS_HEADER = "x-phis-static-render";
@@ -123,13 +140,21 @@ export async function proxyPhiNextSiteRequest(request) {
             ? NextResponse.next()
             : new NextResponse(null, { status: 404 });
     }
-    if (isAssetOrBackendPath(pathname)) {
+    if (isPhiAssetOrBackendPath(pathname)) {
         return NextResponse.next();
     }
     const runtimeConfig = readSiteRuntime();
     const localeConfig = await readLocaleConfig(runtimeConfig);
     const requestHeaders = new Headers(request.headers);
     requestHeaders.delete("x-locale");
+    /*
+     * The one fact a Server Component cannot ask for: whether this is a client navigation.
+     *
+     * Next consumes `RSC` before `headers()` sees it -- measured -- so it is copied under a name of our own
+     * (constants/http-headers.ts). Set on every branch that forwards the request into the app, and set to
+     * `0` rather than left out, because absent and false are different answers everywhere else in this file.
+     */
+    requestHeaders.set(PHIS_CLIENT_NAVIGATION_HEADER, isPhiClientNavigation(request) ? "1" : "0");
     const prefixedLocale = extractLocalePrefix(pathname, localeConfig);
     if (prefixedLocale) {
         // The static tree names the locale by its own segment, so only an exact one goes there.
@@ -157,6 +182,30 @@ export async function proxyPhiNextSiteRequest(request) {
         return NextResponse.redirect(new URL(localizePath(preferredLocale, publicPath) + search, request.url), 307);
     }
     if (KNOWN_SPECIAL_ROOTS.has(firstSegment)) {
+        /*
+         * An Area root forwards, and here is the cheapest place to do it.
+         *
+         * Only when a render already worked out where this Area's door leads (gateway/area-root-door.ts).
+         * Cold, or after a publish swept the cache, this knows nothing and the render below forwards as it
+         * always did -- so nothing depends on the cache being warm, and one request is all it costs to warm
+         * it.
+         *
+         * The point is the status line's position rather than its number. A forward decided inside the
+         * render reaches a client navigation as a serialised redirect, and applying one across a change of
+         * Area leaves Next's router asking for the same address at request speed. Issued here it is an
+         * ordinary HTTP 307, answered before there is a router state tree to disagree with: one navigation
+         * instead of dozens, and an unchanged document path.
+         *
+         * Access is not decided here and must not be -- this runs without a descriptor catalog and without
+         * an Area preset. The destination is inside the same Area as the address asked for, so whatever the
+         * Area would have refused, it still refuses one hop later.
+         */
+        if (pathname.replace(/\/+$/u, "").toLowerCase() === `/${firstSegment}`) {
+            const door = await peekPhiAreaRootDoor(firstSegment);
+            if (door && door !== pathname) {
+                return NextResponse.redirect(new URL(door + search, request.url), 307);
+            }
+        }
         /**
          * Protected roots are forwarded rather than gated here. This runs in middleware, with no descriptor
          * catalog and no Area preset, so it cannot know whether an Auth Module owns `/login` on this Site --

package/next/static-asset-path.d.ts

@@ -0,0 +1 @@
+export declare function isPhiAssetOrBackendPath(pathname: string): boolean;

package/next/static-asset-path.js

@@ -0,0 +1,23 @@
+/**
+ * The file types a Site serves as files, as opposed to pages whose last segment happens to hold a dot.
+ *
+ * Any suffix used to count: `/en/team/jane.doe` and `/en/docs/v1.2` went through as assets, without the
+ * locale the proxy sets and without the request path the page reads, and rendered the Area root. A page
+ * path may carry a dot; a file this proxy has to let past is one of these.
+ */
+const PHI_STATIC_FILE_EXTENSIONS = new Set([
+    "avif", "bmp", "css", "eot", "gif", "ico", "jpeg", "jpg", "js", "json", "map", "mjs", "mp3", "mp4",
+    "otf", "pdf", "png", "svg", "ttf", "txt", "wasm", "webm", "webmanifest", "webp", "woff", "woff2", "xml",
+]);
+export function isPhiAssetOrBackendPath(pathname) {
+    if (pathname.startsWith("/_next") ||
+        pathname === "/api" ||
+        pathname.startsWith("/api/") ||
+        pathname.startsWith("/favicon.ico") ||
+        pathname.startsWith("/robots.txt") ||
+        pathname.startsWith("/sitemap.xml")) {
+        return true;
+    }
+    const extension = /\.([a-z0-9]+)$/i.exec(pathname)?.[1]?.toLowerCase();
+    return extension != null && PHI_STATIC_FILE_EXTENSIONS.has(extension);
+}

package/package.json

@@ -1,10 +1,18 @@
 {
   "name": "@phis/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/phis-dev/phis-ui.git"
+  },
+  "homepage": "https://github.com/phis-dev/phis-ui#readme",
+  "bugs": {
+    "url": "https://github.com/phis-dev/phis-ui/issues"
+  },
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",
@@ -20,6 +28,11 @@
       "import": "./widgets.js",
       "default": "./widgets.js"
     },
+    "./core-widgets": {
+      "types": "./core-widgets.d.ts",
+      "import": "./core-widgets.js",
+      "default": "./core-widgets.js"
+    },
     "./controls": {
       "types": "./controls.d.ts",
       "import": "./controls.js",
@@ -45,16 +58,16 @@
       "import": "./references.js",
       "default": "./references.js"
     },
+    "./forms/client": {
+      "types": "./forms-client.d.ts",
+      "import": "./forms-client.js",
+      "default": "./forms-client.js"
+    },
     "./forms": {
       "types": "./forms.d.ts",
       "import": "./forms.js",
       "default": "./forms.js"
     },
-    "./builder": {
-      "types": "./builder.d.ts",
-      "import": "./builder.js",
-      "default": "./builder.js"
-    },
     "./builder-api-route": {
       "types": "./builder-api-route.d.ts",
       "import": "./builder-api-route.js",
@@ -85,6 +98,11 @@
       "import": "./next/runtime-module-client-boundary.js",
       "default": "./next/runtime-module-client-boundary.js"
     },
+    "./next/global-error": {
+      "types": "./next/global-error.d.ts",
+      "import": "./next/global-error.js",
+      "default": "./next/global-error.js"
+    },
     "./next/root-route": {
       "types": "./next/root-route.d.ts",
       "import": "./next/root-route.js",
@@ -94,6 +112,21 @@
       "import": "./next/cache-handler.mjs",
       "default": "./next/cache-handler.mjs"
     },
+    "./next/overlay-zones-client": {
+      "types": "./components/overlays/phi-overlay-zones-loader.d.ts",
+      "import": "./components/overlays/phi-overlay-zones-loader.js",
+      "default": "./components/overlays/phi-overlay-zones-loader.js"
+    },
+    "./next/overlay-zones": {
+      "types": "./next/overlay-zones.d.ts",
+      "import": "./next/overlay-zones.js",
+      "default": "./next/overlay-zones.js"
+    },
+    "./next/route-handlers": {
+      "types": "./next/route-handlers.d.ts",
+      "import": "./next/route-handlers.js",
+      "default": "./next/route-handlers.js"
+    },
     "./next/site-proxy": {
       "types": "./next/site-proxy.d.ts",
       "import": "./next/site-proxy.js",
@@ -104,16 +137,6 @@
       "import": "./next/proxy-runtime.js",
       "default": "./next/proxy-runtime.js"
     },
-    "./next/module-diagnostics-route": {
-      "types": "./next/module-diagnostics-route.d.ts",
-      "import": "./next/module-diagnostics-route.js",
-      "default": "./next/module-diagnostics-route.js"
-    },
-    "./next/navigation-target-route": {
-      "types": "./next/navigation-target-route.d.ts",
-      "import": "./next/navigation-target-route.js",
-      "default": "./next/navigation-target-route.js"
-    },
     "./next/seo-routes": {
       "types": "./next/seo-routes.d.ts",
       "import": "./next/seo-routes.js",
@@ -234,6 +257,11 @@
       "import": "./module-authoring-client.js",
       "default": "./module-authoring-client.js"
     },
+    "./module/labels": {
+      "types": "./module-labels.d.ts",
+      "import": "./module-labels.js",
+      "default": "./module-labels.js"
+    },
     "./module/projection": {
       "types": "./module-projection.d.ts",
       "import": "./module-projection.js",
@@ -334,6 +362,11 @@
       "import": "./runtime-signal-client.js",
       "default": "./runtime-signal-client.js"
     },
+    "./runtime/user-state-client": {
+      "types": "./runtime-user-state-client.d.ts",
+      "import": "./runtime-user-state-client.js",
+      "default": "./runtime-user-state-client.js"
+    },
     "./cms": {
       "types": "./cms.d.ts",
       "import": "./cms.js",
@@ -418,51 +451,6 @@
       "types": "./net.d.ts",
       "import": "./net.js",
       "default": "./net.js"
-    },
-    "./gateway": {
-      "types": "./gateway.d.ts",
-      "import": "./gateway.js",
-      "default": "./gateway.js"
-    },
-    "./gateway/auth-proxy": {
-      "types": "./gateway/auth-proxy.d.ts",
-      "import": "./gateway/auth-proxy.js",
-      "default": "./gateway/auth-proxy.js"
-    },
-    "./gateway/site-form-route": {
-      "types": "./gateway/site-form-route.d.ts",
-      "import": "./gateway/site-form-route.js",
-      "default": "./gateway/site-form-route.js"
-    },
-    "./gateway/media-proxy": {
-      "types": "./gateway/media-proxy.d.ts",
-      "import": "./gateway/media-proxy.js",
-      "default": "./gateway/media-proxy.js"
-    },
-    "./gateway/site-proxy": {
-      "types": "./gateway/site-proxy.d.ts",
-      "import": "./gateway/site-proxy.js",
-      "default": "./gateway/site-proxy.js"
-    },
-    "./gateway/data-source": {
-      "types": "./gateway/data-source.d.ts",
-      "import": "./gateway/data-source.js",
-      "default": "./gateway/data-source.js"
-    },
-    "./gateway/data-source-fetch": {
-      "types": "./gateway/data-source-fetch.d.ts",
-      "import": "./gateway/data-source-fetch.js",
-      "default": "./gateway/data-source-fetch.js"
-    },
-    "./gateway/mutation": {
-      "types": "./gateway/mutation.d.ts",
-      "import": "./gateway/mutation.js",
-      "default": "./gateway/mutation.js"
-    },
-    "./gateway/mutation-fetch": {
-      "types": "./gateway/mutation-fetch.d.ts",
-      "import": "./gateway/mutation-fetch.js",
-      "default": "./gateway/mutation-fetch.js"
     }
   },
   "files": [
@@ -494,7 +482,7 @@
     "@lexical/rich-text": "0.50.0",
     "@lexical/selection": "0.50.0",
     "@lexical/utils": "0.50.0",
-    "@phis/contracts": "^0.3.1",
+    "@phis/contracts": "^0.5.0",
     "dayjs": "^1.11.23",
     "dom-serializer": "^2.0.0",
     "htmlparser2": "^10.1.0",

package/plugins/registries/runtime-controllers.js

@@ -1,7 +1,5 @@
+import { isPhiRecord } from "../../helpers/is-record";
 export { buildPhiRuntimeControllerDefinitionMap, buildPhiRuntimeControllerDefinitionType, buildPhiRuntimeControllerPluginMap, buildPhiRuntimeControllerPluginType, hasPhiRuntimeControllerFlag, parsePhiRuntimeControllerConfig, resolvePhiRuntimeControllerInstanceKey, resolvePhiRuntimeControllerMount, resolvePhiRuntimeControllerSignalScope, } from "./runtime-controller-core";
-function isRecord(value) {
-    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
-}
 function readMountScope(value) {
     return value === "site" || value === "area" || value === "page" ? value : null;
 }
@@ -11,7 +9,7 @@ export function readPhiRuntimeControllerSettings(value) {
     }
     const settings = value
         .map((item) => {
-        if (!isRecord(item)) {
+        if (!isPhiRecord(item)) {
             return null;
         }
         const type = typeof item.type === "string" ? item.type.trim() : "";
@@ -27,7 +25,7 @@ export function readPhiRuntimeControllerSettings(value) {
             instanceKey,
             mountScope,
             enabled: typeof item.enabled === "boolean" ? item.enabled : undefined,
-            config: isRecord(item.config) ? item.config : null,
+            config: isPhiRecord(item.config) ? item.config : null,
         };
     })
         .filter((setting) => setting != null);

package/plugins/runtime/phi-effects-ready-trigger.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Releases an entrance that waits for the page, the counterpart of the visibility Observer.
+ *
+ * A Widget whose content the server produces asynchronously arrives in a segment of its own: until it
+ * lands its box is empty, and everything after it stands too high and then moves. An entrance held at
+ * its first frame until the document has been parsed covers exactly that, because parsing is over only
+ * once the last segment has been placed -- and the Block then enters from where it truly belongs.
+ *
+ * A frame is let past before the animation starts, so the layout the arriving segments changed is
+ * settled rather than being measured mid-move. On a Site navigation the document is long since parsed
+ * and this is a frame's wait, which is what it should be: there is no stream left to wait for.
+ */
+export declare function PhiEffectsReadyTrigger(): import("react").JSX.Element;

package/plugins/runtime/phi-effects-ready-trigger.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+/**
+ * Releases an entrance that waits for the page, the counterpart of the visibility Observer.
+ *
+ * A Widget whose content the server produces asynchronously arrives in a segment of its own: until it
+ * lands its box is empty, and everything after it stands too high and then moves. An entrance held at
+ * its first frame until the document has been parsed covers exactly that, because parsing is over only
+ * once the last segment has been placed -- and the Block then enters from where it truly belongs.
+ *
+ * A frame is let past before the animation starts, so the layout the arriving segments changed is
+ * settled rather than being measured mid-move. On a Site navigation the document is long since parsed
+ * and this is a frame's wait, which is what it should be: there is no stream left to wait for.
+ */
+export function PhiEffectsReadyTrigger() {
+    const markerRef = useRef(null);
+    useEffect(() => {
+        const target = markerRef.current?.parentElement;
+        if (!target) {
+            return undefined;
+        }
+        let frame = 0;
+        let cancelled = false;
+        const start = () => {
+            if (cancelled) {
+                return;
+            }
+            frame = window.requestAnimationFrame(() => {
+                if (!cancelled) {
+                    target.setAttribute("data-phi-effects-state", "running");
+                }
+            });
+        };
+        if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", start, { once: true });
+        }
+        else {
+            start();
+        }
+        return () => {
+            cancelled = true;
+            window.cancelAnimationFrame(frame);
+            document.removeEventListener("DOMContentLoaded", start);
+        };
+    }, []);
+    return _jsx("span", { ref: markerRef, hidden: true, "data-phi-effects-ready-trigger": "true" });
+}

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { resolveRenderableBlockEffectsAttributes, resolveRenderableBlockViewportEffects, } from "../../helpers/renderable-block-effects";
+import { PhiEffectsReadyTrigger } from "./phi-effects-ready-trigger";
 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";
@@ -34,9 +35,6 @@ export function PhiSlotChildFrameClient({ kind, blockId, config, runtime, signal
     });
     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,
@@ -44,7 +42,7 @@ export function PhiSlotChildFrameClient({ kind, blockId, config, runtime, signal
         renderMode: blockRuntime.state.renderMode,
         debugMode: blockRuntime.state.debugMode,
         className: blockRuntime.state.className,
-        size: resolvedSize,
+        size: blockRuntime.state.size,
         minSize: blockRuntime.state.minSize,
         maxSize: blockRuntime.state.maxSize,
         collapsedSizeHint: blockRuntime.state.collapsedSizeHint,
@@ -62,11 +60,13 @@ export function PhiSlotChildFrameClient({ kind, blockId, config, runtime, signal
     const viewportEffects = viewProps.disableEffects
         ? []
         : resolveRenderableBlockViewportEffects(resolvedConfig);
-    const shouldObserveVisibility = effectsAttributes?.["data-phi-effects-trigger"] === "on_visible";
+    const effectsTrigger = effectsAttributes?.["data-phi-effects-trigger"];
+    const shouldObserveVisibility = effectsTrigger === "on_visible";
+    const shouldWaitForReady = effectsTrigger === "on_ready";
     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] }));
+        }, children: [_jsx(PhiRuntimeSignalEmissionBoundary, { enabled: runtimeSignalEmissionsEnabled, children: children }), chrome, shouldObserveVisibility ? (_jsx(PhiSlotChildEffectsVisibilityObserver, { once: effectsAttributes?.["data-phi-effects-once"] !== "false" })) : null, shouldWaitForReady ? _jsx(PhiEffectsReadyTrigger, {}) : 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.js

@@ -3,23 +3,8 @@ import { resolveRenderableBlockEffectsAttributes, resolveRenderableBlockEffectsS
 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 }),
-    };
-}
+import { buildPhiSlotChildClassName, buildPhiSlotChildDataAttributes, resolvePhiEffectiveSlotSizePolicy, resolvePhiSlotChildBaseStyle, resolvePhiSlotChildExplicitAxes, resolvePhiSlotChildSizeConstraints, resolvePhiSlotChildSizeStyle, resolvePhiSlotSizePolicy, } from "./slot-size-policy";
+import { resolvePhiRenderableBlockGeometry } from "../../types/renderable-block-geometry";
 function resolvePhiSlotChildBorderStyle(border) {
     if (border == null) {
         return {};
@@ -36,20 +21,28 @@ export function requiresPhiSlotChildEffectsObserver(config, disableEffects = fal
         return false;
     }
     const effectsAttributes = resolveRenderableBlockEffectsAttributes(config);
-    return (effectsAttributes?.["data-phi-effects-trigger"] === "on_visible" ||
+    const trigger = effectsAttributes?.["data-phi-effects-trigger"];
+    return (trigger === "on_visible" ||
+        trigger === "on_ready" ||
         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 resolvedConfig = { ...config, visibility: resolvedVisibility };
+    const geometry = resolvePhiRenderableBlockGeometry(resolvedConfig);
+    const explicitAxes = resolvePhiSlotChildExplicitAxes(geometry);
     const resolvedExplicitInlineSize = explicitInlineSize ?? explicitAxes.explicitInlineSize;
     const resolvedExplicitBlockSize = explicitBlockSize ?? explicitAxes.explicitBlockSize;
+    /*
+     * The effective policy, not the declared one -- the frame is what states the policy to the CSS and to
+     * whatever reads its attributes, and a frame carrying a width of its own while announcing "fill"
+     * makes every reader below it wrong in the same way at once.
+     */
+    const policy = resolvePhiEffectiveSlotSizePolicy(resolvePhiSlotSizePolicy(slotSizePolicy, kind), {
+        explicitInlineSize: resolvedExplicitInlineSize,
+        explicitBlockSize: resolvedExplicitBlockSize,
+    });
     const effectsStyle = disableEffects
         ? resolveRenderableBlockStaticEffectsStyle(resolvedConfig)
         : resolveRenderableBlockEffectsStyle(resolvedConfig);
@@ -62,13 +55,10 @@ export function PhiSlotChildFrameView({ kind, slotSizePolicy, blockId, receiver,
     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,
+            ...resolvePhiSlotChildSizeConstraints(geometry),
         }), style: {
             ...resolvePhiSlotChildBaseStyle(policy),
-            ...resolvePhiSlotChildSizeStyle(resolvedConfig),
+            ...resolvePhiSlotChildSizeStyle(geometry, policy),
             ...resolvedBackgroundStyle,
             ...resolvePhiSlotChildBorderStyle(resolvedConfig.border),
             ...(resolvedConfig.zIndex == null ? {} : { zIndex: resolvedConfig.zIndex }),