@phis/ui 0.4.3 → 0.4.4

package/components/widgets/shared/card-vocabulary.d.ts

@@ -4,7 +4,9 @@
  * `text` is a heading. `stat` is a labelled figure: the label is the heading, so a card that counts
  * something says what it counted in the same place and type a text card says what it is about, and the
  * figure is drawn by the house's one statistic Control. `list` is a heading over a few lines the caller
- * draws and hands in (`listContent`), which only a Dashboard does today. `plan` is an offer: a price
+ * draws and hands in (`listContent`), which only a Dashboard does today. `series` is a figure over time:
+ * the headline as a `stat` draws it, over a chart the caller draws and hands in the same way -- a Dashboard
+ * again, so the chart Control never loads with a Card on a Public page. `plan` is an offer: a price
  * and what it is paid per, a monthly and a yearly one of each, over a list of what the plan includes and
  * what it does not (`PhiBulletListEntry.state`). Several plan cards side by side are a Layout's row, and
  * the recommended one is the card that is `highlight`ed.
@@ -12,7 +14,7 @@
  * The body is chosen, never inferred from whether a value happens to have arrived. A card that decided
  * by presence would draw as text and reflow into a statistic the moment its figure landed.
  */
-export type PhiCardWidgetBody = "text" | "stat" | "list" | "plan";
+export type PhiCardWidgetBody = "text" | "stat" | "list" | "series" | "plan";
 /**
  * Which of a plan card's two prices it shows. A plan states one, the other, or both; one that states
  * only the monthly price shows it under `yearly` as well, so a period switch on the page never leaves a
@@ -36,6 +38,14 @@ export type PhiCardHeadingLevel = (typeof PHI_CARD_HEADING_LEVELS)[number];
 /** Logical, so `start` is the left in a left-to-right page and the right in a right-to-left one. */
 export declare const PHI_CARD_TEXT_ALIGNS: readonly ["start", "center", "end", "justify"];
 export type PhiCardTextAlign = (typeof PHI_CARD_TEXT_ALIGNS)[number];
+/**
+ * How a card's badge is drawn. `corner` is a band flush in the top end corner, `tag` a rounded mark a
+ * little down the end edge -- both inside the card. `ribbon` hangs over the end edge with a fold behind
+ * it, and needs room beside the card. `none` draws nothing and keeps the words, to hide a badge for a
+ * while. Absent is `none`: a card has a badge once a style is chosen for it.
+ */
+export declare const PHI_CARD_BADGE_STYLES: readonly ["none", "corner", "tag", "ribbon"];
+export type PhiCardBadgeStyle = (typeof PHI_CARD_BADGE_STYLES)[number];
 /**
  * Where the icon stands: before the heading, small, or at the top, large -- at the start, the middle or
  * the end of the line, over the picture when the card has one, on a ground of its own so it reads on any

package/components/widgets/shared/card-vocabulary.js

@@ -24,6 +24,13 @@ export function readPhiCardBillingPeriod(value) {
 export const PHI_CARD_HEADING_LEVELS = ["h2", "h3", "h4"];
 /** Logical, so `start` is the left in a left-to-right page and the right in a right-to-left one. */
 export const PHI_CARD_TEXT_ALIGNS = ["start", "center", "end", "justify"];
+/**
+ * How a card's badge is drawn. `corner` is a band flush in the top end corner, `tag` a rounded mark a
+ * little down the end edge -- both inside the card. `ribbon` hangs over the end edge with a fold behind
+ * it, and needs room beside the card. `none` draws nothing and keeps the words, to hide a badge for a
+ * while. Absent is `none`: a card has a badge once a style is chosen for it.
+ */
+export const PHI_CARD_BADGE_STYLES = ["none", "corner", "tag", "ribbon"];
 /**
  * Where the icon stands: before the heading, small, or at the top, large -- at the start, the middle or
  * the end of the line, over the picture when the card has one, on a ground of its own so it reads on any

package/components/widgets/shared/markdown-body-client.js

@@ -68,9 +68,16 @@ function renderInlineNodes(inlines) {
         }
     });
 }
-function renderBlocks(blocks, token, paragraphBlockStyle, headingBlockStyle, lists) {
+function renderBlocks(blocks, token, paragraphStyle, headingStyle, lists, atStart = false) {
     return blocks.map((block, index) => {
         const key = `${block.kind}-${index}`;
+        /*
+         * The first block of a text, or of a quote, keeps no space before it: the space before a block
+         * parts it from the block above, and there is none -- the Widget's own edge stands there.
+         */
+        const leading = atStart && index === 0;
+        const paragraphBlockStyle = leading ? { ...paragraphStyle, marginBlockStart: 0 } : paragraphStyle;
+        const headingBlockStyle = leading ? { ...headingStyle, paddingBlockStart: 0 } : headingStyle;
         switch (block.kind) {
             case "heading":
                 return (_jsx(PhiTypographyControl, { presentation: "title", id: block.id, level: block.level, style: headingBlockStyle, children: renderInlineNodes(block.inlines) }, key));
@@ -81,19 +88,31 @@ function renderBlocks(blocks, token, paragraphBlockStyle, headingBlockStyle, lis
                         margin: 0,
                         paddingInlineStart: PHI_SPACE.md,
                         borderInlineStart: `3px solid ${token.colorBorderSecondary}`,
-                    }, children: _jsx("div", { style: { display: "grid", gap: 0 }, children: renderBlocks(block.children, token, paragraphBlockStyle, headingBlockStyle, lists) }) }, key));
+                    }, children: _jsx("div", { style: { display: "grid", gap: 0 }, children: renderBlocks(block.children, token, paragraphStyle, headingStyle, lists, true) }) }, key));
             case "list":
                 /*
                  * The house's list, set by the Widget's list settings. A `1.` list counts whatever its level's
                  * marker says: the numbers are the text's, not a look. A list inside an entry is one level down.
                  */
-                return (_jsx(PhiBulletListControl, { listStyle: lists.style, depth: lists.depth, ordered: block.ordered, start: block.start, items: block.items.map((itemBlocks) => ({
-                        content: (_jsx("div", { style: { display: "grid", gap: PHI_SPACE.xs, minWidth: 0 }, children: renderBlocks(itemBlocks, token, paragraphBlockStyle, headingBlockStyle, { ...lists, depth: lists.depth + 1 }) })),
+                return (_jsx(PhiBulletListControl, { listStyle: lists.style, depth: lists.depth, ordered: block.ordered, start: block.start, 
+                    /*
+                     * The list stands among the text's blocks as a paragraph does: the entries draw close, but the
+                     * block after the last one keeps the text's spacing. A list inside an entry gets the entry's
+                     * zeroed spacing, so it sits in its entry's grid.
+                     */
+                    blockSpacing: {
+                        marginBlockStart: paragraphBlockStyle.marginBlockStart,
+                        marginBlockEnd: paragraphBlockStyle.marginBlockEnd,
+                    }, items: block.items.map((itemBlocks) => ({
+                        content: (_jsx("div", { style: { display: "grid", gap: PHI_SPACE.xs, minWidth: 0 }, children: renderBlocks(itemBlocks, token, { ...paragraphStyle, marginBlockStart: 0, marginBlockEnd: 0 }, headingStyle, { ...lists, depth: lists.depth + 1 }) })),
                     })) }, key));
             case "code":
                 return (_jsx("pre", { "data-phi-code-language": block.language ?? undefined, style: {
                         margin: 0,
-                        padding: PHI_SPACE.md,
+                        // A code block stands among the text's blocks as a paragraph does, with the text's spacing.
+                        marginBlockStart: paragraphBlockStyle.marginBlockStart,
+                        marginBlockEnd: paragraphBlockStyle.marginBlockEnd,
+                        padding: PHI_SPACE.base,
                         overflowX: "auto",
                         borderRadius: token.borderRadiusSM,
                         background: token.colorFillQuaternary,
@@ -157,15 +176,25 @@ export function PhiMarkdownWidgetClient({ config }) {
         marginBlockStart: resolvePhiSpacingScaleValue(config?.textBlockSpacingBefore ?? "none"),
         marginBlockEnd: resolvePhiSpacingScaleValue(config?.textBlockSpacingAfter ?? "sm"),
     };
+    /*
+     * The space before a heading is padding, not margin, so it adds to the space after the block above
+     * however the text is laid out: in the grid margins never collapse, in the flow that pictures need
+     * they would, and the same setting would part a heading from its paragraph by less there.
+     */
     const headingBlockStyle = {
         margin: 0,
-        marginBlockStart: resolvePhiSpacingScaleValue(config?.headingBlockSpacingBefore ?? "none"),
+        paddingBlockStart: resolvePhiSpacingScaleValue(config?.headingBlockSpacingBefore ?? "sm"),
         marginBlockEnd: resolvePhiSpacingScaleValue(config?.headingBlockSpacingAfter ?? "sm"),
     };
-    return (_jsx("div", { className: config?.imageFloat ? `phi-markdown-body phi-markdown-body--float-${config.imageFloat}` : undefined, style: config?.imageFloat
-            ? { display: "flow-root", width: "100%", textAlign: config.textAlign, containerType: "inline-size" }
-            : { display: "grid", gap: 0, width: "100%", textAlign: config?.textAlign }, children: renderBlocks(blocks, token, paragraphBlockStyle, headingBlockStyle, {
+    return (_jsx("div", { className: config?.imageFloat
+            ? `phi-markdown-text phi-markdown-body phi-markdown-body--float-${config.imageFloat}`
+            : "phi-markdown-text", 
+        // The text's line height for everything in it, lists included: a list entry otherwise takes the
+        // browser's `normal`, and its marker centres on a line shorter than the one its words stand on.
+        style: config?.imageFloat
+            ? { display: "flow-root", width: "100%", textAlign: config.textAlign, containerType: "inline-size", lineHeight: token.lineHeight }
+            : { display: "grid", gap: 0, width: "100%", textAlign: config?.textAlign, lineHeight: token.lineHeight }, children: renderBlocks(blocks, token, paragraphBlockStyle, headingBlockStyle, {
             style: resolvePhiBulletListStyle(config?.list),
             depth: 1,
-        }) }));
+        }, true) }));
 }

package/helpers/cms-container-chrome.js

@@ -9,7 +9,12 @@ import { resolvePhiSurfaceStyle } from "./surface-style";
  * would show through as the default after all.
  */
 export function resolvePhiCmsContainerSurface(config) {
-    const resolved = resolvePhiSurfaceStyle(config.surface, { groundLayer: false });
+    /*
+     * An Overlay draws no tone -- neither the class nor the scope -- so it does not paint a tone's ground
+     * either: without the class the ground would be the page's, laid over the Overlay's own.
+     */
+    const surface = config.surface?.tone ? { ...config.surface, tone: undefined } : config.surface;
+    const resolved = resolvePhiSurfaceStyle(surface, { groundLayer: false });
     const background = config.surface?.background
         ? normalizePhiBackgroundWidgetConfig(config.surface.background)
         : null;

package/helpers/locale.d.ts

@@ -31,6 +31,14 @@ export declare function isPhiLocaleReadableAsSource(locale: string, source: stri
 export declare function resolvePhiTranslationLocale(input: string | null | undefined): string;
 export declare function normalizeLocale(input: string | null | undefined, options?: NormalizeLocaleOptions): SiteLocale;
 export declare function localizePath(locale: SiteLocale | string, targetPath: string): string;
+/**
+ * A Public path in the language being read, unless it already names one.
+ *
+ * A path stored without a locale (`/home`) gets `locale` in front, as `/` does; one whose first segment
+ * is one of the Site's locales (`/de/home`) and an external URL stay as they are. The locales are needed
+ * to tell a locale segment from a page, which `matchPhiLocalePrefixSegment` does.
+ */
+export declare function localizePathUnlessLocalized(locale: SiteLocale | string, targetPath: string, availableLocales: readonly string[]): string;
 /**
  * The path for a staff Area, which carries no locale prefix.
  *

package/helpers/locale.js

@@ -1,4 +1,5 @@
 import { PHI_CMS_AREA_KEYS } from "../constants/cms-areas";
+import { isPhiExternalHref } from "./external-href";
 export { PHI_CANONICAL_SOURCE_LOCALE } from "@phis/contracts/locale";
 import { PHI_CANONICAL_SOURCE_LOCALE } from "@phis/contracts/locale";
 export const SUPPORTED_CMS_AREAS = PHI_CMS_AREA_KEYS;
@@ -117,6 +118,23 @@ function prefixPath(prefix, targetPath) {
 export function localizePath(locale, targetPath) {
     return prefixPath(locale, targetPath);
 }
+/**
+ * A Public path in the language being read, unless it already names one.
+ *
+ * A path stored without a locale (`/home`) gets `locale` in front, as `/` does; one whose first segment
+ * is one of the Site's locales (`/de/home`) and an external URL stay as they are. The locales are needed
+ * to tell a locale segment from a page, which `matchPhiLocalePrefixSegment` does.
+ */
+export function localizePathUnlessLocalized(locale, targetPath, availableLocales) {
+    if (isPhiExternalHref(targetPath)) {
+        return targetPath;
+    }
+    const firstSegment = targetPath.split("/").filter(Boolean)[0];
+    if (firstSegment && matchPhiLocalePrefixSegment(firstSegment, { availableLocales })) {
+        return targetPath;
+    }
+    return localizePath(locale, targetPath);
+}
 /**
  * The path for a staff Area, which carries no locale prefix.
  *

package/helpers/shell-region-style.js

@@ -209,7 +209,8 @@ export function resolvePhiShellRegionGroundStyle(ground) {
 export function resolvePhiShellSiderWidth(shellTheme) {
     return (resolvePhiShellMetric(shellTheme, "width", { family: "sider", region: "left" }) ??
         resolvePhiShellMetric(shellTheme, "width", { family: "sider", region: "right" }) ??
-        200);
+        // The scale's sider width, which the Builder's defaults and the page grid already use.
+        PHI_LAYOUT.sidebarWidth);
 }
 export function resolvePhiShellSiderCollapsedWidth(shellTheme) {
     return (resolvePhiShellMetric(shellTheme, "collapsedWidth", { family: "sider", region: "left" }) ??

package/helpers/surface-style.d.ts

@@ -50,6 +50,14 @@ export type PhiSurfaceStyleOptions = {
      */
     groundLayer?: boolean;
 };
+/** The ground a toned Surface paints where it states none: the container ground of the tone's mode. */
+export declare const PHI_SURFACE_TONE_GROUND = "var(--ant-color-bg-container)";
+/**
+ * Whether a Surface takes its tone's ground (`PHI_SURFACE_TONE_GROUND`): it asks for a mode of its own and
+ * its Background paints nothing. A stated ground wins, and the Theme's Overlay (`base.kind: "theme"`) is
+ * one. The one rule for every box with a Surface -- this resolver's and the Region shell's.
+ */
+export declare function phiSurfaceTakesToneGround(tone: PhiSurface["tone"] | null | undefined, paintsGround: boolean): boolean;
 /**
  * A Surface as CSS, in one place for every box that has one.
  *
@@ -59,5 +67,8 @@ export type PhiSurfaceStyleOptions = {
  * (a pane's) combined with the configured one.
  */
 export declare function resolvePhiSurfaceStyle(surface: PhiSurface | null | undefined, options?: PhiSurfaceStyleOptions): PhiResolvedSurface;
-/** Whether a Surface draws anything a reader could see: a ground, a line, or depth. */
+/**
+ * Whether a Surface draws anything a reader could see: a ground (its own, or its tone's), a line, or
+ * depth.
+ */
 export declare function phiSurfaceDrawsChrome(surface: PhiSurface | null | undefined): boolean;

package/helpers/surface-style.js

@@ -1,8 +1,18 @@
-import { normalizePhiBackgroundWidgetConfig, phiBackgroundWidgetConfigPaintsGround, resolvePhiBackgroundGroundFilter, resolvePhiBackgroundMotion, resolvePhiBackgroundMotionHostStyle, resolvePhiBackgroundWidgetStyle, } from "../components/widgets/config/background";
+import { PHI_BACKGROUND_CONTAINER_GROUND, normalizePhiBackgroundWidgetConfig, phiBackgroundWidgetConfigPaintsGround, resolvePhiBackgroundGroundFilter, resolvePhiBackgroundMotion, resolvePhiBackgroundMotionHostStyle, resolvePhiBackgroundWidgetStyle, } from "../components/widgets/config/background";
 import { resolvePhiCmsBorderSource } from "../types/cms-border-source";
 import { resolvePhiSurfaceToneClassName } from "../types/surface";
 import { resolvePhiSourcedBorderStyle } from "./border-widget-style";
 import { combinePhiBoxShadows, resolvePhiShadow } from "./layout-style";
+/** The ground a toned Surface paints where it states none: the container ground of the tone's mode. */
+export const PHI_SURFACE_TONE_GROUND = PHI_BACKGROUND_CONTAINER_GROUND;
+/**
+ * Whether a Surface takes its tone's ground (`PHI_SURFACE_TONE_GROUND`): it asks for a mode of its own and
+ * its Background paints nothing. A stated ground wins, and the Theme's Overlay (`base.kind: "theme"`) is
+ * one. The one rule for every box with a Surface -- this resolver's and the Region shell's.
+ */
+export function phiSurfaceTakesToneGround(tone, paintsGround) {
+    return tone != null && tone !== "inherit" && !paintsGround;
+}
 const PHI_SURFACE_EMPTY = { style: {}, ground: null, paintsGround: false };
 function resolvePhiSurfaceCorners(fallback, configured) {
     const corner = (value) => value ?? fallback ?? undefined;
@@ -30,8 +40,13 @@ export function resolvePhiSurfaceStyle(surface, options = {}) {
     const paintsGround = phiBackgroundWidgetConfigPaintsGround(background);
     const groundFilter = background ? resolvePhiBackgroundGroundFilter(background) : null;
     const motion = background ? resolvePhiBackgroundMotion(background) : null;
+    /*
+     * The Theme's Overlay never goes on a layer: it is a window onto one viewport-sized painting, so there
+     * is nothing to move or zoom, and its pane has to frost the page behind the box rather than the box.
+     */
     const needsGroundLayer = options.groundLayer !== false
         && paintsGround
+        && background?.base.kind !== "theme"
         && (groundFilter != null || motion != null || options.forceGroundLayer === true);
     const paint = background ? resolvePhiBackgroundWidgetStyle(background) : {};
     const hostPaint = needsGroundLayer
@@ -44,6 +59,12 @@ export function resolvePhiSurfaceStyle(surface, options = {}) {
             motion: motion ? background : null,
         }
         : null;
+    /*
+     * A tone turns the ground as well (LAYOUTING.md "Surface tone"): content in another mode on the page's
+     * ground would be light words on a light page. Where the Background paints nothing, the box takes the
+     * mode's own container ground, which resolves under the tone's class it carries. A stated ground wins.
+     */
+    const toneGround = phiSurfaceTakesToneGround(surface.tone, paintsGround);
     const borderSource = resolvePhiCmsBorderSource(surface.borderSource, surface.border);
     const edge = resolvePhiSourcedBorderStyle(borderSource, surface.border);
     const { border: line, ...configuredCorners } = edge;
@@ -51,6 +72,7 @@ export function resolvePhiSurfaceStyle(surface, options = {}) {
     return {
         style: {
             ...hostPaint,
+            ...(toneGround ? { backgroundColor: PHI_SURFACE_TONE_GROUND } : {}),
             ...(line == null ? {} : { border: line }),
             ...resolvePhiSurfaceCorners(options.cornerFallback, configuredCorners),
             ...(boxShadow == null ? {} : { boxShadow }),
@@ -63,12 +85,16 @@ export function resolvePhiSurfaceStyle(surface, options = {}) {
         ...(surface.tone ? { className: resolvePhiSurfaceToneClassName(surface.tone) } : {}),
     };
 }
-/** Whether a Surface draws anything a reader could see: a ground, a line, or depth. */
+/**
+ * Whether a Surface draws anything a reader could see: a ground (its own, or its tone's), a line, or
+ * depth.
+ */
 export function phiSurfaceDrawsChrome(surface) {
     if (!surface) {
         return false;
     }
     return phiBackgroundWidgetConfigPaintsGround(surface.background ?? null)
+        || (surface.tone != null && surface.tone !== "inherit")
         || resolvePhiCmsBorderSource(surface.borderSource, surface.border) !== "none"
         || (surface.shadow != null && surface.shadow !== "none");
 }

package/module-dashboard-cards.d.ts

@@ -11,5 +11,5 @@
  * headers itself, which is a copy of a protocol that is this package's to change. See DASHBOARD.md.
  */
 import "server-only";
-export { createPhiDashboardCardId, isPhiDashboardCardId, type PhiDashboardCardContext, type PhiDashboardCardDescriptor, type PhiDashboardCardForm, type PhiDashboardCardId, type PhiDashboardCardPayload, type PhiDashboardCardProvider, } from "./types/dashboard-cards";
+export { createPhiDashboardCardId, isPhiDashboardCardId, PHI_DASHBOARD_CARD_SERIES_LIMIT, type PhiDashboardCardContext, type PhiDashboardCardDescriptor, type PhiDashboardCardForm, type PhiDashboardCardId, type PhiDashboardCardPayload, type PhiDashboardCardProvider, type PhiDashboardCardSeries, type PhiDashboardCardSeriesPoint, } from "./types/dashboard-cards";
 export { fetchPhiSiteApi, type PhiSiteApiRequest } from "./gateway/site-api-request";

package/module-dashboard-cards.js

@@ -11,5 +11,5 @@
  * headers itself, which is a copy of a protocol that is this package's to change. See DASHBOARD.md.
  */
 import "server-only";
-export { createPhiDashboardCardId, isPhiDashboardCardId, } from "./types/dashboard-cards";
+export { createPhiDashboardCardId, isPhiDashboardCardId, PHI_DASHBOARD_CARD_SERIES_LIMIT, } from "./types/dashboard-cards";
 export { fetchPhiSiteApi } from "./gateway/site-api-request";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phis/ui",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"

package/plugins/runtime-modules/area-definitions.d.ts

@@ -34,20 +34,6 @@ export declare const PHI_PUBLIC_RUNTIME_AREA_DEFINITIONS: {
             readonly routePresetKey: "public-terms-page";
         }];
         readonly exportedItemKeys: readonly ["@phis/ui/modules/public/nav/terms"];
-    }, {
-        readonly navKey: "public:quicklinks";
-        readonly label: {
-            defaultMessage: string;
-        };
-        readonly items: readonly [{
-            readonly itemKey: "@phis/ui/modules/public/nav/terms";
-            readonly label: {
-                defaultMessage: string;
-            };
-            readonly icon: "antd:file-text";
-            readonly routePresetKey: "public-terms-page";
-        }];
-        readonly exportedItemKeys: readonly ["@phis/ui/modules/public/nav/terms"];
     }, PhiCmsNavigationSurfaceDescriptor];
 }[];
 export declare const PHI_APP_ACCOUNT_NAV_ITEM_KEY = "@phis/ui/modules/app/nav/account";
@@ -226,20 +212,6 @@ export declare const PHI_ALL_RUNTIME_AREA_DEFINITIONS: ({
             readonly routePresetKey: "public-terms-page";
         }];
         readonly exportedItemKeys: readonly ["@phis/ui/modules/public/nav/terms"];
-    }, {
-        readonly navKey: "public:quicklinks";
-        readonly label: {
-            defaultMessage: string;
-        };
-        readonly items: readonly [{
-            readonly itemKey: "@phis/ui/modules/public/nav/terms";
-            readonly label: {
-                defaultMessage: string;
-            };
-            readonly icon: "antd:file-text";
-            readonly routePresetKey: "public-terms-page";
-        }];
-        readonly exportedItemKeys: readonly ["@phis/ui/modules/public/nav/terms"];
     }, PhiCmsNavigationSurfaceDescriptor];
 } | {
     area: "app";
@@ -457,20 +429,6 @@ export declare function resolvePhiRuntimeAreaDefinition(area: PhiCmsAreaDefiniti
             readonly routePresetKey: "public-terms-page";
         }];
         readonly exportedItemKeys: readonly ["@phis/ui/modules/public/nav/terms"];
-    }, {
-        readonly navKey: "public:quicklinks";
-        readonly label: {
-            defaultMessage: string;
-        };
-        readonly items: readonly [{
-            readonly itemKey: "@phis/ui/modules/public/nav/terms";
-            readonly label: {
-                defaultMessage: string;
-            };
-            readonly icon: "antd:file-text";
-            readonly routePresetKey: "public-terms-page";
-        }];
-        readonly exportedItemKeys: readonly ["@phis/ui/modules/public/nav/terms"];
     }, PhiCmsNavigationSurfaceDescriptor];
 } | {
     area: "app";

package/plugins/runtime-modules/area-definitions.js

@@ -116,8 +116,9 @@ function sidebarAnchors(settingsItemKey) {
  * The Public surfaces carry one intrinsic entry, the terms, and export it as the one anchor.
  *
  * The terms are Core's, so their entry is; the contact entry hangs after it, and a Site package's
- * landing places its Home entry before it. Public has no sidebar surface: the Public Shell draws a
- * header and a footer, and a surface nothing renders is a promise nobody can see kept.
+ * landing places its Home entry before it. Public has no sidebar and no quick-links surface: the Public
+ * Shell draws a header and a footer -- the footer's Quick Links Widget reads `public:footer` -- and a
+ * surface nothing renders is a promise nobody can see kept.
  */
 const publicTermsItem = {
     itemKey: "@phis/ui/modules/public/nav/terms",
@@ -138,12 +139,6 @@ const publicNavigationSurfaces = [
         items: [publicTermsItem],
         exportedItemKeys: [publicTermsItem.itemKey],
     },
-    {
-        navKey: "public:quicklinks",
-        label: label("Public quick links"),
-        items: [publicTermsItem],
-        exportedItemKeys: [publicTermsItem.itemKey],
-    },
     accountNavigationSurface(PHI_PUBLIC_ACCOUNT_NAV_ITEM_KEY, "public:account"),
 ];
 export const PHI_PUBLIC_RUNTIME_AREA_DEFINITIONS = [

package/plugins/runtime-modules/builder/clients/inspector-config-field.js

@@ -736,7 +736,7 @@ function renderPhiInspectorConfigFieldBody({ field, value, defaultValue, config,
                 ? String(value)
                 : typeof defaultValue === "string" || typeof defaultValue === "number"
                     ? String(defaultValue)
-                    : "", disabled: disabled || !onChange, inputType: field.type === "url" ? "url" : "text", style: { width: "100%" }, onChange: (nextValue) => onChange?.({
+                    : "", disabled: disabled || !onChange, inputType: field.type === "url" ? "url" : "text", ...("placeholder" in field && field.placeholder ? { placeholder: field.placeholder } : {}), style: { width: "100%" }, onChange: (nextValue) => onChange?.({
                 [field.key]: nextValue || ("emptyValue" in field ? field.emptyValue : undefined),
             }) }));
     }
@@ -755,6 +755,25 @@ function renderPhiInspectorConfigFieldBody({ field, value, defaultValue, config,
     }
     if (field.type === "flags") {
         const mask = typeof value === "number" ? value : typeof defaultValue === "number" ? defaultValue : 0;
+        /*
+         * One flag is a yes or no, and reads as one: the field's name with a switch behind it on its row,
+         * like a boolean field, rather than a group of a single checkbox under a heading. The other bits of
+         * the mask stay as they are.
+         */
+        const [onlyOption] = field.options.length === 1 ? field.options : [];
+        if (onlyOption) {
+            return renderPhiInspectorSwitchRow({
+                key: field.key,
+                label: renderPhiInspectorConfigFieldLabel(field),
+                checked: (mask & onlyOption.value) !== 0,
+                disabled: disabled || !onChange,
+                ...(onChange
+                    ? {
+                        onChange: (checked) => onChange({ [field.key]: checked ? mask | onlyOption.value : mask & ~onlyOption.value }),
+                    }
+                    : {}),
+            });
+        }
         return renderPhiInspectorConfigFieldBlock(field, _jsx(PhiCheckboxGroupControl, { vertical: true, value: field.options.filter((option) => (mask & option.value) !== 0).map((option) => option.value), options: field.options.map((option) => ({ value: option.value, label: option.label })), disabled: disabled || !onChange, onChange: (ticked) => onChange?.({ [field.key]: ticked.reduce((next, flag) => next | flag, 0) }) }));
     }
     if (field.type === "number-list") {

package/plugins/runtime-modules/builder/clients/layout-scaffold-overlays.js

@@ -1,14 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePhiConfig } from "../../../../components/root/phi-config-provider";
+import { usePhiPageModeToken } from "../../../../components/root/phi-config-provider";
+import { usePhiPageModeTone } from "../../../../components/surface/phi-surface-tone";
 import {} from "../node-kind-theme";
 import { PhiLayoutAnchoredOverlay } from "../../../../components/layouts/clients/phi-layout-anchored-overlay";
 import { PhiLayoutConfigButtonWidget, PhiLayoutDeleteButtonWidget, PhiLayoutDragButtonWidget, PhiPlusButtonWidget, } from "./layout-scaffold-buttons";
 export function PhiLayoutPlusButtonOverlay({ slotIndex, label, onInsert, anchor, slotRole, inset, ariaLabel, dropTarget, children, }) {
-    return (_jsx(PhiLayoutAnchoredOverlay, { anchor: anchor, slotRole: slotRole, inset: inset, children: children ?? (_jsx(PhiPlusButtonWidget, { slotIndex: slotIndex, label: label, ariaLabel: ariaLabel, onInsert: onInsert, dropTarget: dropTarget })) }));
+    // In the editor's mode, not a tone's: the insert button stays the Builder's inside a toned Surface.
+    const pageModeTone = usePhiPageModeTone();
+    return (_jsx(PhiLayoutAnchoredOverlay, { anchor: anchor, slotRole: slotRole, inset: inset, children: pageModeTone.wrap(children ?? (_jsx(PhiPlusButtonWidget, { slotIndex: slotIndex, label: label, ariaLabel: ariaLabel, onInsert: onInsert, dropTarget: dropTarget }))) }));
 }
 export function PhiLayoutDeleteButtonOverlay({ onDelete, onOpenInspector, ariaLabel, inspectorAriaLabel, top, right, bottom, left, placement, transform, zIndex = 10, nodeKind, leading, children, }) {
-    const { token } = usePhiConfig();
+    // The editor's colours, not a tone's: a toolbar inside a toned Surface stays in the page's mode.
+    const token = usePhiPageModeToken();
+    const pageModeTone = usePhiPageModeTone();
     const resolvedTop = top ?? (placement ? "auto" : -10);
     const resolvedRight = right ?? (placement === "bottom-left" ? "auto" : 0);
     const resolvedBottom = bottom ?? (placement ? -10 : "auto");
@@ -42,7 +47,7 @@ export function PhiLayoutDeleteButtonOverlay({ onDelete, onOpenInspector, ariaLa
             color: "inherit",
         };
     })();
-    return (_jsx("div", { className: "phi-layout-scaffold-delete", "data-phi-builder-scaffold-action": "true", "data-phi-builder-node-kind": nodeKind ?? undefined, onClick: (event) => event.stopPropagation(), onMouseDown: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), style: {
+    return (_jsx("div", { className: pageModeTone.className ? `phi-layout-scaffold-delete ${pageModeTone.className}` : "phi-layout-scaffold-delete", "data-phi-builder-scaffold-action": "true", "data-phi-builder-node-kind": nodeKind ?? undefined, onClick: (event) => event.stopPropagation(), onMouseDown: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), style: {
             /*
              * The bar is as wide as its buttons, and it says so itself.
              *
@@ -63,7 +68,7 @@ export function PhiLayoutDeleteButtonOverlay({ onDelete, onOpenInspector, ariaLa
             "--phi-layout-scaffold-delete-border": chromeTheme.border,
             "--phi-layout-scaffold-delete-color": chromeTheme.color,
             "--phi-layout-scaffold-delete-shadow": "var(--ant-box-shadow-tertiary)",
-        }, children: children ?? (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [leading, onOpenInspector ? (_jsx(PhiLayoutConfigButtonWidget, { onOpenInspector: onOpenInspector, ariaLabel: inspectorAriaLabel })) : null, _jsx(PhiLayoutDeleteButtonWidget, { onDelete: onDelete, ariaLabel: ariaLabel })] })) }));
+        }, children: pageModeTone.wrap(children ?? (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [leading, onOpenInspector ? (_jsx(PhiLayoutConfigButtonWidget, { onOpenInspector: onOpenInspector, ariaLabel: inspectorAriaLabel })) : null, _jsx(PhiLayoutDeleteButtonWidget, { onDelete: onDelete, ariaLabel: ariaLabel })] }))) }));
 }
 export function PhiLayoutDragButtonOverlay({ dragData, ariaLabel, nodeKind, top = "50%", left = 0, zIndex = 41, }) {
     return (_jsx(PhiLayoutDeleteButtonOverlay, { onDelete: () => undefined, top: top, right: "auto", bottom: "auto", left: left, transform: "translate(-50%, -50%)", zIndex: zIndex, nodeKind: nodeKind, children: _jsx(PhiLayoutDragButtonWidget, { ariaLabel: ariaLabel, dragData: dragData }) }));

package/plugins/runtime-modules/builder/edit-scaffold-drawer.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePhiConfig } from "../../../components/root/phi-config-provider";
+import { usePhiPageModeToken } from "../../../components/root/phi-config-provider";
 import { PhiButtonControl } from "../../../components/controls/phi-button-control";
 import { usePhiDeveloperBuilderStateValue } from "./developer-workspace-store";
 import { PhiIcon } from "../../../components/shell/phi-icon";
 export function PhiEditScaffoldDrawer({ kind, nodeId, regionKey, scaffoldLabel, className, onOpenInsert, onClick, onKeyDown, children, chrome, style, }) {
-    const { token } = usePhiConfig();
+    // The editor's colours, not a tone's: a scaffold inside a toned Surface marks it in the page's mode.
+    const token = usePhiPageModeToken();
     const selected = usePhiDeveloperBuilderStateValue((state) => state.selectedRootRegionKey === regionKey &&
         state.nodeId === nodeId &&
         (state.nodeKind === "layout"));