@phis/ui 0.4.2 → 0.4.4

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

@@ -45,6 +45,7 @@ export declare const PHI_GALLERY_WIDGET_DEFINITION: {
     } & {
         type: "string" | "url" | "icon";
         emptyValue?: "";
+        placeholder?: string;
     }) | ({
         key: string;
         label: string;
@@ -318,30 +319,6 @@ export declare const PHI_GALLERY_WIDGET_DEFINITION: {
         editorPlacement?: "inspector" | "geometry" | "toolbar";
         visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
         heading?: string;
-    } & {
-        type: "background";
-        section?: string;
-        storage?: import("../../../../../types").PhiCmsConfigFieldValueStorage;
-    }) | ({
-        key: string;
-        label: string;
-        description?: string;
-        required?: boolean;
-        editorPlacement?: "inspector" | "geometry" | "toolbar";
-        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
-        heading?: string;
-    } & {
-        type: "border";
-        section?: string;
-        storage?: import("../../../../../types").PhiCmsConfigFieldValueStorage;
-    }) | ({
-        key: string;
-        label: string;
-        description?: string;
-        required?: boolean;
-        editorPlacement?: "inspector" | "geometry" | "toolbar";
-        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
-        heading?: string;
     } & {
         type: "surface";
         tone?: false;
@@ -354,7 +331,7 @@ export declare const PHI_GALLERY_WIDGET_DEFINITION: {
         visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
         heading?: string;
     } & {
-        type: "shadow" | "grid-placement" | "column-count";
+        type: "grid-placement" | "column-count";
         section?: string;
     }) | {
         key: string;

package/plugins/runtime-modules/core/widgets/header-navigation/client.js

@@ -28,7 +28,7 @@ export function PhiHeaderNavigationWidgetClient({ runtime, items, menuTheme, hei
                 minHeight: 0,
                 overflow: "hidden",
                 whiteSpace: "nowrap",
-                fontSize: token.fontSizeLG,
+                fontSize: token.fontSize,
             }, children: items.map((item) => (_jsx("span", { style: {
                     display: "inline-flex",
                     alignItems: "center",
@@ -46,7 +46,7 @@ export function PhiHeaderNavigationWidgetClient({ runtime, items, menuTheme, hei
             minHeight: 0,
             flex: 1,
             justifyContent: align === "center" ? "center" : "flex-start",
-        }, children: _jsx(PhiMenuControl, { mode: "horizontal", menuTheme: menuTheme, selectedKeys: selectedKeys, items: menuItems, fontSize: token.fontSizeLG, style: {
+        }, children: _jsx(PhiMenuControl, { mode: "horizontal", menuTheme: menuTheme, selectedKeys: selectedKeys, items: menuItems, fontSize: token.fontSize, style: {
                 display: "flex",
                 alignItems: "center",
                 justifyContent: align === "center" ? "center" : "flex-start",

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

@@ -11,7 +11,7 @@ export function PhiHtmlWidgetClient({ blockId, config, }) {
     const [fontSizeOverride, setFontSizeOverride] = useState(null);
     const html = typeof config?.html === "string" ? config.html.trim() : "";
     const resolvedFontFamily = resolvePhiWidgetFontFamily(fontFamilyOverride ?? config?.fontFamily, fonts, token);
-    const resolvedFontSize = resolvePhiWidgetFontSize(fontSizeOverride ?? config?.fontSize, token, "lg");
+    const resolvedFontSize = resolvePhiWidgetFontSize(fontSizeOverride ?? config?.fontSize, token, "base");
     const receiver = createPhiRenderableBlockReceiver("widget", blockId);
     usePhiRenderableBlockSignalListener(receiver, (signal) => {
         if (signal.channel === "fontFamily" && signal.action === "change") {

package/plugins/runtime-modules/core/widgets/image/config.js

@@ -5,7 +5,7 @@ import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
 import { PhiImageAssetVariantKey } from "../../../../../constants/media";
 import { readPhiMediaImageSourceConfig } from "../../../../../components/widgets/config/image-source-parser";
 import { readBoolean, readCssSize, readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
-import { normalizePhiMaskConfig, } from "../../../../../components/widgets/config/mask";
+import { readPhiMaskConfig, } from "../../../../../components/widgets/config/mask";
 function readImageSize(value) {
     if (!isPhiRecord(value)) {
         return undefined;
@@ -64,7 +64,7 @@ export function normalizePhiImageWidgetConfig(config) {
         borderTopRightRadius: readCssSize(raw.borderTopRightRadius),
         borderBottomLeftRadius: readCssSize(raw.borderBottomLeftRadius),
         borderBottomRightRadius: readCssSize(raw.borderBottomRightRadius),
-        mask: normalizePhiMaskConfig(raw.mask),
+        mask: readPhiMaskConfig(raw.mask),
     };
     /*
      * An Asset without a word about its variant gets the Card variant; `null` is a word -- the Inspector's

package/plugins/runtime-modules/core/widgets/markdown/config.d.ts

@@ -44,8 +44,15 @@ export declare const PHI_MARKDOWN_WIDGET_DEFINITION: {
         textAlign: "start";
         textBlockSpacingBefore: "none";
         textBlockSpacingAfter: "sm";
-        headingBlockSpacingBefore: "none";
+        headingBlockSpacingBefore: "sm";
         headingBlockSpacingAfter: "sm";
+        headingOffset: number;
+        list: {
+            level1: "dot";
+            level2: "circle";
+            level3: "dash";
+            gap: "xs";
+        };
     };
     contentBinding: {
         storage: "markdown";
@@ -57,7 +64,318 @@ export declare const PHI_MARKDOWN_WIDGET_DEFINITION: {
             value: string;
         };
     };
-    fields: import("../../../../../types").PhiCmsConfigField[];
+    fields: (({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "string" | "url" | "icon";
+        emptyValue?: "";
+        placeholder?: string;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "link-target";
+        clearsWhenEmpty?: readonly string[];
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "readonly";
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "data-provider";
+        providerKind?: import("../../../../../types").PhiRuntimeDataProviderKind;
+        providerKey?: import("@phis/contracts/controls").PhiRuntimeDataProviderKey;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "calendar-adapter";
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "video-provider";
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "dimension";
+        widthKey?: string;
+        heightKey?: string;
+        widthPlaceholder?: string;
+        heightPlaceholder?: string;
+        patchOnChange?: Record<string, unknown>;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "length";
+        min?: number;
+        max?: number;
+        step?: number;
+        precision?: number;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "radius";
+        topLeftKey: string;
+        topRightKey: string;
+        bottomLeftKey: string;
+        bottomRightKey: string;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "padding";
+        paddingKey?: string;
+        gapKey?: string;
+        paddingTopKey?: string;
+        paddingRightKey?: string;
+        paddingBottomKey?: string;
+        paddingLeftKey?: string;
+        section?: string;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "color";
+        mode?: import("../../../../../types").PhiCmsConfigFieldColorMode;
+        defaultToken?: import("../../../../../theme/phi-theme-tokens").PhiThemeTokenKey;
+        section?: string;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "boolean";
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "image";
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "slot-texts";
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "number-list";
+        min?: number;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "flags";
+        options: readonly {
+            value: number;
+            label: string;
+        }[];
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "number";
+        min?: number;
+        max?: number;
+        step?: number;
+        precision?: number;
+        prefix?: string;
+        presentation?: "slider";
+        suffix?: string;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "choice";
+        valueType: "number";
+        options: import("@phis/contracts/controls").PhiControlOption<number>[];
+        emptyOption?: import("@phis/contracts/controls").PhiControlOption;
+        emptyValue?: null | undefined;
+        placeholder?: string;
+        mode?: never;
+        presentation?: never;
+        optionsProvider?: never;
+        allowCustom?: never;
+        createBehavior?: never;
+        filter?: never;
+        patchOnChange?: never;
+        optionPresets?: never;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "choice";
+        mode?: import("../../../../../types").PhiCmsConfigFieldChoiceMode;
+        valueType?: Exclude<import("../../../../../types").PhiCmsConfigFieldChoiceValueType, "number">;
+        presentation?: import("../../../../../types").PhiCmsConfigFieldChoicePresentation;
+        options?: import("@phis/contracts/controls").PhiControlOption[];
+        optionsProvider?: import("@phis/contracts/controls").PhiControlOptionsProviderConfig;
+        allowCustom?: boolean;
+        createBehavior?: import("../../../../../types").PhiCmsConfigFieldChoiceCreateBehavior;
+        placeholder?: string;
+        filter?: import("../../../../../types").PhiCmsConfigFieldChoiceFilter;
+        emptyOption?: import("@phis/contracts/controls").PhiControlOption;
+        emptyValue?: null | undefined;
+        patchOnChange?: Record<string, unknown>;
+        optionPresets?: import("../../../../../types/cms-plugins").PhiCmsConfigFieldOptionPresets;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "collection";
+        itemKeyField: string;
+        itemLabelField?: string;
+        itemFields: import("../../../../../types").PhiCmsConfigField[];
+        defaultItem?: Record<string, unknown>;
+        addLabel?: string;
+        emptyLabel?: string;
+        minItems?: number;
+        maxItems?: number;
+        reorderable?: boolean;
+        presentation?: import("../../../../../types").PhiCmsConfigFieldCollectionPresentation;
+        editLabel?: string;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "surface";
+        tone?: false;
+    }) | ({
+        key: string;
+        label: string;
+        description?: string;
+        required?: boolean;
+        editorPlacement?: "inspector" | "geometry" | "toolbar";
+        visibleWhen?: import("../../../../../types").PhiCmsConfigFieldVisibilityRule | readonly import("../../../../../types").PhiCmsConfigFieldVisibilityRule[];
+        heading?: string;
+    } & {
+        type: "grid-placement" | "column-count";
+        section?: string;
+    }) | {
+        key: string;
+        type: "choice";
+        label: string;
+        emptyOption: {
+            value: string;
+            label: string;
+        };
+        options: {
+            value: PhiMarkdownImageFloat;
+            label: string;
+        }[];
+    })[];
     parseConfig: typeof parsePhiCmsMarkdownWidgetConfig;
 };
 export declare const PHI_MARKDOWN_WIDGET_PLUGIN_TYPE: string;

package/plugins/runtime-modules/core/widgets/markdown/config.js

@@ -1,7 +1,7 @@
 import { resolvePhiCmsWidgetPluginKey } from "../../../../../constants/cms-widget-types";
 import { PHI_SPACING_SCALE_KEYS } from "../../../../../components/widgets/config/spacing-options";
 import { PhiCmsWidgetType } from "../../../../../constants/cms-widget-types";
-import { buildPhiBulletListFields, readPhiBulletListStyle, } from "../../../../../components/widgets/shared/bullet-list-vocabulary";
+import { buildPhiBulletListFields, PHI_BULLET_LIST_DEFAULT_STYLE, readPhiBulletListStyle, } from "../../../../../components/widgets/shared/bullet-list-vocabulary";
 import { readNumber, readRenderableBlockConfig, readString, } from "../../../../../components/widgets/config/parser-primitives";
 const PHI_MARKDOWN_TEXT_ALIGN_OPTIONS = [
     { value: "start", label: "Start" },
@@ -81,8 +81,11 @@ export const PHI_MARKDOWN_WIDGET_DEFINITION = {
         textAlign: "start",
         textBlockSpacingBefore: "none",
         textBlockSpacingAfter: "sm",
-        headingBlockSpacingBefore: "none",
+        headingBlockSpacingBefore: "sm",
         headingBlockSpacingAfter: "sm",
+        headingOffset: 0,
+        // What the list draws with when nothing is set, so the Inspector shows it rather than empty fields.
+        list: { ...PHI_BULLET_LIST_DEFAULT_STYLE },
     },
     contentBinding: {
         storage: "markdown",
@@ -127,6 +130,8 @@ export const PHI_MARKDOWN_WIDGET_DEFINITION = {
             key: "imageFloat",
             type: "choice",
             label: "Image Float",
+            // No float is the default and stores nothing; the line says so instead of an empty picker.
+            emptyOption: { value: "none", label: "None" },
             options: PHI_MARKDOWN_IMAGE_FLOAT_OPTIONS,
         },
         {
@@ -157,12 +162,21 @@ export const PHI_MARKDOWN_WIDGET_DEFINITION = {
             key: "headingOffset",
             type: "number",
             label: "Heading Offset",
+            description: "Moves every heading of the text down by this many levels: at 1, a # heading is drawn as H2, ## as H3, and so on. For a text that stands under a page title of its own, so its first heading does not compete with it.",
             min: 0,
             max: PHI_MARKDOWN_HEADING_OFFSET_MAX,
             precision: 0,
         },
-        { key: "tocKey", type: "string", label: "TOC Key" },
-        ...buildPhiBulletListFields("list", "Lists"),
+        {
+            key: "tocKey",
+            type: "string",
+            label: "TOC Key",
+            // Empty is no key, and a TOC on "Auto" connects to the text all the same.
+            placeholder: "Auto",
+            description: "A name for this text's table of contents. A Markdown TOC widget set to Binding Mode \"Target\" with the same TOC Key lists this text's headings and no other's. Leave it empty while the page has one Markdown text: a TOC on \"Auto\" finds it by itself.",
+        },
+        // The markers are an unordered list's: a `1.` list counts, whatever its level's marker says.
+        ...buildPhiBulletListFields("list", "Unordered Lists"),
     ],
     parseConfig: parsePhiCmsMarkdownWidgetConfig,
 };

package/plugins/runtime-modules/core/widgets/markdown/editor.js

@@ -69,7 +69,15 @@ export function PhiMarkdownWidgetEditor({ blockId, config, onChange, onSourceLoc
          * On the field's own text, not on `style`: `style` places the control as a whole, and with a clear
          * button the control is a wrapper around the textarea, which is where the text is.
          */
-        inputStyle: config?.textAlign ? { textAlign: config.textAlign } : undefined, style: {
+        inputStyle: {
+            ...(config?.textAlign ? { textAlign: config.textAlign } : {}),
+            /*
+             * The text's own padding, stated, as a single-line field's would be: half of what the first line
+             * leaves of a control's height. Stated, the clear button finds the first line by it, as it does in
+             * every field that states one; left to Ant Design it hung at its own offset, half a line above.
+             */
+            paddingBlock: "calc((var(--ant-control-height) - 1lh) / 2)",
+        }, style: {
             /*
              * As wide as the slot: the Widget fills its inline axis (`fill-inline`), so the frame decides the
              * width and the editor takes it. A fixed 520px here dated from when the Widget was intrinsic and
@@ -92,10 +100,9 @@ export function PhiMarkdownWidgetEditor({ blockId, config, onChange, onSourceLoc
              * as a capsule.
              *
              * `grown-md` is what that stylesheet would have given it -- the capsule of one Control line,
-             * held at every height (THEME.md, "Control shape"). The fallback is the LARGE surface radius,
-             * because it is the one radius on this element that a component token does not redefine.
+             * held at every height (THEME.md, "Control shape").
              */
-            borderRadius: "var(--phi-control-radius-grown-md, var(--ant-border-radius-lg))",
+            borderRadius: "var(--phi-control-radius-grown-md)",
             background: "var(--ant-color-bg-container)",
             resize: "none",
             fontFamily: "var(--ant-font-family-code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace)",

package/plugins/runtime-modules/core/widgets/markdown-toc/client.js

@@ -6,11 +6,16 @@ import { usePhiConfig } from "../../../../../components/root/phi-config-provider
 import { PhiAnchorNavControl } from "../../../../../components/controls/phi-anchor-nav-control";
 import { PhiEmptyControl } from "../../../../../components/controls/phi-empty-control";
 import { PhiTypographyControl } from "../../../../../components/controls/phi-typography-control";
+/*
+ * Indented by depth below the shallowest heading listed, not below `h1`: a contents that starts at `h3`
+ * (a document whose headings moved down under a page title) would otherwise stand two steps off its line.
+ */
 function buildAnchorItems(headings, indent) {
+    const topLevel = headings.reduce((lowest, heading) => Math.min(lowest, heading.level), Infinity);
     return headings.map((heading) => ({
         key: heading.id,
         href: `#${heading.id}`,
-        title: (_jsx("span", { style: { display: "block", paddingInlineStart: (heading.level - 1) * indent }, children: heading.text })),
+        title: (_jsx("span", { style: { display: "block", paddingInlineStart: (heading.level - topLevel) * indent, minWidth: 0 }, children: _jsx(PhiTypographyControl, { ellipsis: { tooltip: heading.text }, style: { display: "block", color: "inherit", fontSize: "inherit", lineHeight: "inherit" }, children: heading.text }) })),
     }));
 }
 function filterHeadings(headings, config) {

package/plugins/runtime-modules/core/widgets/markdown-toc/config.d.ts

@@ -39,9 +39,11 @@ export declare const PHI_MARKDOWN_TOC_WIDGET_DEFINITION: {
         filter?: undefined;
         placeholder?: undefined;
         visibleWhen?: undefined;
+        description?: undefined;
         min?: undefined;
         max?: undefined;
         precision?: undefined;
+        prefix?: undefined;
     } | {
         key: string;
         type: "choice";
@@ -55,13 +57,16 @@ export declare const PHI_MARKDOWN_TOC_WIDGET_DEFINITION: {
             equals: string;
         };
         options?: undefined;
+        description?: undefined;
         min?: undefined;
         max?: undefined;
         precision?: undefined;
+        prefix?: undefined;
     } | {
         key: string;
         type: "string";
         label: string;
+        description: string;
         visibleWhen: {
             field: string;
             equals: string;
@@ -72,6 +77,7 @@ export declare const PHI_MARKDOWN_TOC_WIDGET_DEFINITION: {
         min?: undefined;
         max?: undefined;
         precision?: undefined;
+        prefix?: undefined;
     } | {
         key: string;
         type: "string";
@@ -80,9 +86,11 @@ export declare const PHI_MARKDOWN_TOC_WIDGET_DEFINITION: {
         filter?: undefined;
         placeholder?: undefined;
         visibleWhen?: undefined;
+        description?: undefined;
         min?: undefined;
         max?: undefined;
         precision?: undefined;
+        prefix?: undefined;
     } | {
         key: string;
         type: "number";
@@ -94,10 +102,14 @@ export declare const PHI_MARKDOWN_TOC_WIDGET_DEFINITION: {
         filter?: undefined;
         placeholder?: undefined;
         visibleWhen?: undefined;
+        description?: undefined;
+        prefix?: undefined;
     } | {
         key: string;
         type: "number";
         label: string;
+        description: string;
+        prefix: string;
         options?: undefined;
         filter?: undefined;
         placeholder?: undefined;
@@ -113,9 +125,11 @@ export declare const PHI_MARKDOWN_TOC_WIDGET_DEFINITION: {
         filter?: undefined;
         placeholder?: undefined;
         visibleWhen?: undefined;
+        description?: undefined;
         min?: undefined;
         max?: undefined;
         precision?: undefined;
+        prefix?: undefined;
     })[];
     parseConfig: typeof parsePhiCmsMarkdownTocWidgetConfig;
 };

package/plugins/runtime-modules/core/widgets/markdown-toc/config.js

@@ -58,11 +58,23 @@ export const PHI_MARKDOWN_TOC_WIDGET_DEFINITION = {
             placeholder: "Select widget",
             visibleWhen: { field: "bindingMode", equals: "target" },
         },
-        { key: "tocKey", type: "string", label: "TOC Key", visibleWhen: { field: "bindingMode", equals: "target" } },
+        {
+            key: "tocKey",
+            type: "string",
+            label: "TOC Key",
+            description: "The TOC Key of the Markdown widget whose headings this table of contents lists, as set in that widget's settings. Useful when a page has several Markdown texts; a Markdown Widget picked above narrows it to that one.",
+            visibleWhen: { field: "bindingMode", equals: "target" },
+        },
         { key: "title", type: "string", label: "Title" },
         { key: "minLevel", type: "number", label: "Min Heading Level", min: 1, max: 6, precision: 0 },
         { key: "maxLevel", type: "number", label: "Max Heading Level", min: 1, max: 6, precision: 0 },
-        { key: "offsetTop", type: "number", label: "Offset Top" },
+        {
+            key: "offsetTop",
+            type: "number",
+            label: "Offset Top",
+            description: "How far below the window's top edge a heading stands after a click in the contents, in pixels. Set it to the height of whatever stays fixed at the top, such as a sticky header, so the heading is not hidden beneath it.",
+            prefix: "px",
+        },
         { key: "showTitle", type: "boolean", label: "Show Title" },
     ],
     parseConfig: parsePhiCmsMarkdownTocWidgetConfig,

package/plugins/runtime-modules/core/widgets/quick-links/authoring.js

@@ -4,7 +4,8 @@ import { resolvePhiBuilderAreaAsCmsArea, } from "../../../../../constants/cms-ar
 import { getPhiBuilderNavigationDefaultScopeKey, createPhiBuilderNavigationPageLookup, resolvePhiBuilderNavigationPageTargets, } from "../../../../../helpers/cms-navigation-catalog";
 import { PhiQuickLinksWidgetClient } from "./client";
 import { PHI_QUICK_LINKS_WIDGET_DEFINITION } from "./config";
-import { mapPhiBuilderNavigationItemsToQuickLinksItems } from "./items";
+import { mapPhiNavItemsToQuickLinksItems } from "./items";
+import { mapPhiBuilderNavigationItemsToNavItems } from "../../../../../components/widgets/builder/navigation-items";
 function PhiQuickLinksWidgetBuilderEditor({ runtime, config, canvas, }) {
     if (!canvas.catalogHydrated) {
         return null;
@@ -15,7 +16,11 @@ function PhiQuickLinksWidgetBuilderEditor({ runtime, config, canvas, }) {
     if (!navigation) {
         return null;
     }
-    const items = mapPhiBuilderNavigationItemsToQuickLinksItems(resolvePhiBuilderNavigationPageTargets(currentCmsArea, navigation.items, createPhiBuilderNavigationPageLookup(canvas.pageCatalogForArea)), runtime.locale.current, currentCmsArea);
+    /*
+     * The live render's path: the draft's items as the navigation the Site would serve -- hidden ones left
+     * out -- then mapped to links the way the server maps them, so the canvas shows what the page shows.
+     */
+    const items = mapPhiNavItemsToQuickLinksItems(mapPhiBuilderNavigationItemsToNavItems(resolvePhiBuilderNavigationPageTargets(currentCmsArea, navigation.items, createPhiBuilderNavigationPageLookup(canvas.pageCatalogForArea))), runtime.locale.current, currentCmsArea, false);
     return (_jsx(PhiQuickLinksWidgetClient, { labels: { title: config.title }, config: {
             columns: config.columns ?? 2,
             separator: config.separator ?? true,