@phis/ui 0.2.1 → 0.4.0

package/plugins/runtime-modules/theme/materialize-images.js

@@ -16,7 +16,15 @@ function isPhiThemeModuleImage(base) {
     return isPhiThemeCarriedSource(base.sourceUrl);
 }
 function isPhiThemeCarriedSource(source) {
-    return typeof source === "string" && (source.startsWith("data:image/") || source.startsWith("/"));
+    if (typeof source !== "string")
+        return false;
+    /*
+     * A path on this origin starts with one slash and nothing slash-like after it: `//host/x` is a
+     * scheme-relative address, and `/\host/x` is the same thing once a browser has normalised the
+     * backslash. Either would have been fetched from somebody else's server and copied into the
+     * library as if the Module had shipped it.
+     */
+    return source.startsWith("data:image/") || /^\/(?![\\/])/u.test(source);
 }
 function readPhiDataUrlContentType(source) {
     const match = source.match(/^data:([^;,]+)[;,]/);

package/plugins/runtime-modules/theme/presets.d.ts

@@ -1,2 +1,76 @@
-import type { PhiCmsRoutePresetDescriptor } from "../../../types/cms-module-descriptors";
-export declare const PHI_THEME_RUNTIME_MODULE_ROUTES: PhiCmsRoutePresetDescriptor[];
+export declare const PHI_THEME_RUNTIME_MODULE_ROUTES: {
+    tour: {
+        readonly id: "@phis/ui/modules/theme/workspace";
+        readonly version: 1;
+        readonly steps: readonly [{
+            readonly key: "theme-choice";
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}`;
+            readonly title: "What your draft starts from";
+            readonly description: "The Site's published theme, its draft, or a theme a Module brings. Picking one makes it the base of your theme draft; the Module's theme itself stays as it is.";
+            readonly placement: "bottom";
+        }, {
+            readonly key: "theme-parts";
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}`;
+            readonly title: "Four parts of the theme";
+            readonly description: "Colour, style, background and brand: each opens its own controls on the left, with the preview beside them.";
+            readonly placement: "bottom";
+        }, {
+            readonly key: string;
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}`;
+            readonly title: string;
+            readonly description: string;
+            readonly placement: "right";
+            readonly prepare: readonly [import("../../../types").PhiTourStepSignal];
+            readonly release: readonly [import("../../../types").PhiTourStepSignal];
+        }, {
+            readonly key: string;
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}`;
+            readonly title: string;
+            readonly description: string;
+            readonly placement: "right";
+            readonly prepare: readonly [import("../../../types").PhiTourStepSignal];
+            readonly release: readonly [import("../../../types").PhiTourStepSignal];
+        }, {
+            readonly key: string;
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}`;
+            readonly title: string;
+            readonly description: string;
+            readonly placement: "right";
+            readonly prepare: readonly [import("../../../types").PhiTourStepSignal];
+            readonly release: readonly [import("../../../types").PhiTourStepSignal];
+        }, {
+            readonly key: string;
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}`;
+            readonly title: string;
+            readonly description: string;
+            readonly placement: "right";
+            readonly prepare: readonly [import("../../../types").PhiTourStepSignal];
+            readonly release: readonly [import("../../../types").PhiTourStepSignal];
+        }, {
+            readonly key: "preview-mode";
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}`;
+            readonly title: "Light and dark";
+            readonly description: "See the theme in either mode. This switches the preview, not the Site.";
+            readonly placement: "bottom";
+        }, {
+            readonly key: "draft-status";
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}`;
+            readonly title: "Where your changes stand";
+            readonly description: "What you change here is a draft. The Site keeps its published theme until the draft is published.";
+            readonly placement: "bottom";
+        }];
+    };
+    ownerModuleId: import("../contracts").PhiRuntimeModuleId;
+    presetKey: string;
+    presetVersion: number;
+    area: import("@phis/contracts/cms").PhiCmsAreaKey;
+    path: string;
+    landingPage?: true;
+    title: string;
+    defaultPageFlags?: number;
+    loadTree: (context: import("../../../types").PhiCmsDescriptorBuildContext & {
+        activeModuleIds: ReadonlySet<import("../contracts").PhiRuntimeModuleId>;
+        params: Readonly<Record<string, string>>;
+    }) => import("../../../types").PhiResolvedCmsPageTree | Promise<import("../../../types").PhiResolvedCmsPageTree>;
+    navigation?: readonly import("../../../types").PhiCmsNavigationInjectionDescriptor[];
+}[];

package/plugins/runtime-modules/theme/presets.js

@@ -1,16 +1,20 @@
 import { buildPhiSidebarRoutePresetDescriptor } from "../sidebar-route";
 import { PHI_THEME_RUNTIME_MODULE_ID } from "./ids";
+import { PHI_THEME_WORKSPACE_TOUR } from "./tour";
 export const PHI_THEME_RUNTIME_MODULE_ROUTES = [
-    buildPhiSidebarRoutePresetDescriptor({
-        area: "builder",
-        anchor: "main",
-        ownerModuleId: PHI_THEME_RUNTIME_MODULE_ID,
-        presetKey: "builder-theme-page",
-        title: "Theme",
-        path: "/theme",
-        itemKey: "@phis/ui/theme/nav/builder/theme",
-        icon: "antd:skin",
-        loadTree: ({ page, runtime, catalog }) => import("./trees/phi-default-builder-theme-page-tree")
-            .then((module) => module.buildPhiDefaultBuilderThemePageTree({ page, runtime, registry: catalog })),
-    }),
+    {
+        ...buildPhiSidebarRoutePresetDescriptor({
+            area: "builder",
+            anchor: "main",
+            ownerModuleId: PHI_THEME_RUNTIME_MODULE_ID,
+            presetKey: "builder-theme-page",
+            title: "Theme",
+            path: "/theme",
+            itemKey: "@phis/ui/theme/nav/builder/theme",
+            icon: "antd:skin",
+            loadTree: ({ page, runtime, catalog }) => import("./trees/phi-default-builder-theme-page-tree")
+                .then((module) => module.buildPhiDefaultBuilderThemePageTree({ page, runtime, registry: catalog })),
+        }),
+        tour: PHI_THEME_WORKSPACE_TOUR,
+    },
 ];

package/plugins/runtime-modules/theme/tour.d.ts

@@ -0,0 +1,70 @@
+import type { PhiCmsInstanceId } from "../../../types/cms-instance-id";
+import type { PhiTourStepSignal } from "../../../types/tours";
+/**
+ * The Theme workspace's Tour (TODOS.md, "A Tour for the Theme workspace").
+ *
+ * What the workspace does not say out loud is its first step: the selector picks what a draft starts
+ * from. A Module's Theme is a base to start from, never edited through it, and installing a package
+ * that ships a look changes nothing for the Site. The rest is the order a person meets the workspace in.
+ */
+export declare const PHI_THEME_WORKSPACE_TOUR: {
+    readonly id: "@phis/ui/modules/theme/workspace";
+    readonly version: 1;
+    readonly steps: readonly [{
+        readonly key: "theme-choice";
+        readonly target: `cms:${PhiCmsInstanceId}`;
+        readonly title: "What your draft starts from";
+        readonly description: "The Site's published theme, its draft, or a theme a Module brings. Picking one makes it the base of your theme draft; the Module's theme itself stays as it is.";
+        readonly placement: "bottom";
+    }, {
+        readonly key: "theme-parts";
+        readonly target: `cms:${PhiCmsInstanceId}`;
+        readonly title: "Four parts of the theme";
+        readonly description: "Colour, style, background and brand: each opens its own controls on the left, with the preview beside them.";
+        readonly placement: "bottom";
+    }, {
+        readonly key: string;
+        readonly target: `cms:${PhiCmsInstanceId}`;
+        readonly title: string;
+        readonly description: string;
+        readonly placement: "right";
+        readonly prepare: readonly [PhiTourStepSignal];
+        readonly release: readonly [PhiTourStepSignal];
+    }, {
+        readonly key: string;
+        readonly target: `cms:${PhiCmsInstanceId}`;
+        readonly title: string;
+        readonly description: string;
+        readonly placement: "right";
+        readonly prepare: readonly [PhiTourStepSignal];
+        readonly release: readonly [PhiTourStepSignal];
+    }, {
+        readonly key: string;
+        readonly target: `cms:${PhiCmsInstanceId}`;
+        readonly title: string;
+        readonly description: string;
+        readonly placement: "right";
+        readonly prepare: readonly [PhiTourStepSignal];
+        readonly release: readonly [PhiTourStepSignal];
+    }, {
+        readonly key: string;
+        readonly target: `cms:${PhiCmsInstanceId}`;
+        readonly title: string;
+        readonly description: string;
+        readonly placement: "right";
+        readonly prepare: readonly [PhiTourStepSignal];
+        readonly release: readonly [PhiTourStepSignal];
+    }, {
+        readonly key: "preview-mode";
+        readonly target: `cms:${PhiCmsInstanceId}`;
+        readonly title: "Light and dark";
+        readonly description: "See the theme in either mode. This switches the preview, not the Site.";
+        readonly placement: "bottom";
+    }, {
+        readonly key: "draft-status";
+        readonly target: `cms:${PhiCmsInstanceId}`;
+        readonly title: "Where your changes stand";
+        readonly description: "What you change here is a draft. The Site keeps its published theme until the draft is published.";
+        readonly placement: "bottom";
+    }];
+};

package/plugins/runtime-modules/theme/tour.js

@@ -0,0 +1,74 @@
+import { PHI_CMS_SEQUENTIAL_LAYOUT_SLOTS } from "../../../constants/cms-layout-types";
+import { PHI_THEME_RUNTIME_MODULE_ID } from "./ids";
+import { PHI_THEME_PAGE_LAYOUT_IDS, PHI_THEME_PAGE_WIDGET_IDS } from "./page-ids";
+/** Turns the workspace's Stack to one of its four panels, as the Segmented above it does. */
+function showPanel(slot) {
+    return {
+        receiver: `cms:${PHI_THEME_PAGE_LAYOUT_IDS.layoutBrandStack}`,
+        channel: "activeSlotKey",
+        action: "change",
+        valueType: "string",
+        value: PHI_CMS_SEQUENTIAL_LAYOUT_SLOTS[slot].key,
+    };
+}
+/**
+ * One panel of the workspace, pointed at by its controls. The step turns the Stack to the panel and back
+ * to Color when it is left, the panel the workspace opens with; from one panel step to the next both
+ * arrive together, so the Stack simply moves on.
+ */
+function panelStep(key, slot, controls, title, description) {
+    return {
+        key,
+        target: `cms:${controls}`,
+        title,
+        description,
+        placement: "right",
+        prepare: [showPanel(slot)],
+        release: [showPanel(0)],
+    };
+}
+/**
+ * The Theme workspace's Tour (TODOS.md, "A Tour for the Theme workspace").
+ *
+ * What the workspace does not say out loud is its first step: the selector picks what a draft starts
+ * from. A Module's Theme is a base to start from, never edited through it, and installing a package
+ * that ships a look changes nothing for the Site. The rest is the order a person meets the workspace in.
+ */
+export const PHI_THEME_WORKSPACE_TOUR = {
+    id: `${PHI_THEME_RUNTIME_MODULE_ID}/workspace`,
+    version: 1,
+    steps: [
+        {
+            key: "theme-choice",
+            target: `cms:${PHI_THEME_PAGE_WIDGET_IDS.widgetBrandContextSelect}`,
+            title: "What your draft starts from",
+            description: "The Site's published theme, its draft, or a theme a Module brings. Picking one makes it the base of your theme draft; the Module's theme itself stays as it is.",
+            placement: "bottom",
+        },
+        {
+            key: "theme-parts",
+            target: `cms:${PHI_THEME_PAGE_WIDGET_IDS.widgetThemeStackSegmented}`,
+            title: "Four parts of the theme",
+            description: "Colour, style, background and brand: each opens its own controls on the left, with the preview beside them.",
+            placement: "bottom",
+        },
+        panelStep("color", 0, PHI_THEME_PAGE_WIDGET_IDS.widgetBrandThemeControls, "Colour from a few seeds", "A palette is picked whole, or each colour is set on its own. Every colour is a seed: Primary, Info, Success, Warning, Error, Link, the text and the background each grow into the shades for hover, borders and backgrounds, and Custom grows into ten steps of its own."),
+        panelStep("style", 1, PHI_THEME_PAGE_WIDGET_IDS.widgetBrandStyleControls, "Buttons and corners", "A shape sets the corners at once -- square, subtle, rounded or pill -- for buttons and fields alike. Below it the details: the buttons' shadows, the corner radius in three sizes, how tall controls are, and the fonts and their size."),
+        panelStep("background", 2, PHI_THEME_PAGE_WIDGET_IDS.widgetBrandBackgroundControls, "Behind everything", "The root background is one layer behind the whole Site: a colour, a gradient or an image, still or in parallax, with an overlay of colour, pattern or noise on top. The chrome overlay is a second ground the header, the sider and the footer share, and the chrome shadow sets how they cast onto the Page. Each is set for light and dark."),
+        panelStep("brand", 3, PHI_THEME_PAGE_WIDGET_IDS.widgetBrandIdentityControls, "The Site's own marks", "The logo, one per mode, and where a click on it leads; the wordmark, the Site's name in type; and the two short lines the Brand shows beside them."),
+        {
+            key: "preview-mode",
+            target: `cms:${PHI_THEME_PAGE_WIDGET_IDS.widgetBrandPreviewModeSwitch}`,
+            title: "Light and dark",
+            description: "See the theme in either mode. This switches the preview, not the Site.",
+            placement: "bottom",
+        },
+        {
+            key: "draft-status",
+            target: `cms:${PHI_THEME_PAGE_WIDGET_IDS.widgetDraftStatus}`,
+            title: "Where your changes stand",
+            description: "What you change here is a draft. The Site keeps its published theme until the draft is published.",
+            placement: "bottom",
+        },
+    ],
+};

package/plugins/runtime-modules/theme/trees/phi-default-builder-theme-page-tree.js

@@ -1,5 +1,5 @@
 import { PHI_CMS_DEFAULT_SLOT_INDEX, PHI_CMS_SEQUENTIAL_LAYOUT_SLOTS, PHI_CMS_THREE_COLUMN_LAYOUT_SLOT_INDEX, } from "../../../../constants/cms-layout-types";
-import { PhiCmsRegionType, PhiCmsStatus } from "../../../../constants/phi-cms";
+import { PhiCmsFlags, PhiCmsRegionType, PhiCmsStatus } from "../../../../constants/phi-cms";
 import { createPhiCmsPresetNodes } from "../../../../helpers/cms-preset-nodes";
 import { resolvePhiShellHeaderHeight } from "../../../../helpers/shell-region-style";
 import { readPhiServerApiCredentials } from "../../../../helpers/phis-server-credentials";
@@ -8,7 +8,7 @@ import { PHI_SPACE } from "../../../../theme/antd-css-var-contract";
 import { buildPhiSiteThemeSelectOptions, resolvePhiThemeSelectionValue, } from "../../../../theme/phi-theme-selection";
 import { getPhiBuilderChromeWidgetLabels } from "../../../../components/widgets/label-sets/builder-chrome";
 import { createPhiCommandToolbarId } from "../../../../components/widgets/signals/command-toolbar-address";
-import { createPhiThemeControllerAddress } from "../controller/address";
+import { PHI_THEME_CONTROLLER_INSTANCE_KEY, PHI_THEME_CONTROLLER_TYPE, createPhiThemeControllerAddress, } from "../controller/address";
 import { PHI_THEME_SIGNAL_CHANNELS } from "../controller/signals";
 import { PHI_THEME_RUNTIME_MODULE_ID } from "../ids";
 import { buildPhiThemeSetSelectOptions } from "../set-options";
@@ -40,26 +40,26 @@ function buildThemeCommandToolbarConfig(toolbarId) {
                     receiver: createPhiThemeControllerAddress(),
                 },
             ],
-            listens: [
+            listens: ["undo", "redo"].flatMap((controlKey) => [
                 {
-                    routeKey: "theme-toolbar-undo-enabled",
+                    routeKey: `theme-toolbar-${controlKey}-enabled`,
                     capabilityId: "enabled",
                     scope: "area",
                     channel: "enabled",
                     action: "change",
                     valueType: "boolean",
-                    receiver: createPhiSignalSubcontrolAddress("cms", toolbarId, "undo"),
+                    receiver: createPhiSignalSubcontrolAddress("cms", toolbarId, controlKey),
                 },
                 {
-                    routeKey: "theme-toolbar-redo-enabled",
-                    capabilityId: "enabled",
+                    routeKey: `theme-toolbar-${controlKey}-tooltip`,
+                    capabilityId: "tooltip",
                     scope: "area",
-                    channel: "enabled",
+                    channel: "tooltip",
                     action: "change",
-                    valueType: "boolean",
-                    receiver: createPhiSignalSubcontrolAddress("cms", toolbarId, "redo"),
+                    valueType: "string",
+                    receiver: createPhiSignalSubcontrolAddress("cms", toolbarId, controlKey),
                 },
-            ],
+            ]),
         },
         compact: true,
         showLabels: false,
@@ -67,26 +67,59 @@ function buildThemeCommandToolbarConfig(toolbarId) {
             {
                 key: "save",
                 emits: [{ capabilityId: "command", value: "save" }],
-                actionKey: "save",
-                variant: "normal",
+                action: "save",
             },
             {
                 key: "preview",
                 emits: [{ capabilityId: "command", value: "preview" }],
-                actionKey: "livePreview",
+                action: "livePreview",
             },
             {
                 key: "publish",
                 emits: [{ capabilityId: "command", value: "publish" }],
-                actionKey: "publish",
-                variant: "normal",
+                action: "publish",
             },
-            { key: "undo", emits: [{ capabilityId: "command", value: "undo" }], actionKey: "undo" },
-            { key: "redo", emits: [{ capabilityId: "command", value: "redo" }], actionKey: "redo" },
-            { key: "reset", emits: [{ capabilityId: "command", value: "reset" }], actionKey: "reset" },
+            { key: "undo", emits: [{ capabilityId: "command", value: "undo" }], action: "undo" },
+            { key: "redo", emits: [{ capabilityId: "command", value: "redo" }], action: "redo" },
+            { key: "reset", emits: [{ capabilityId: "command", value: "reset" }], action: "reset" },
         ],
     };
 }
+/**
+ * Whom the Theme Controller states its history into while this Page is shown: the toolbar's undo and
+ * redo. The Area runs the Controller; the Page names the receivers, which it alone holds.
+ */
+function buildThemeControllerSettings(toolbarId) {
+    return [{
+            type: PHI_THEME_CONTROLLER_TYPE,
+            instanceKey: PHI_THEME_CONTROLLER_INSTANCE_KEY,
+            mountScope: "page",
+            config: {
+                signalRoutes: {
+                    emits: ["undo", "redo"].flatMap((controlKey) => [
+                        {
+                            routeKey: `theme-controller-${controlKey}-enabled`,
+                            capabilityId: `${controlKey}Enabled`,
+                            scope: "area",
+                            channel: "enabled",
+                            action: "change",
+                            valueType: "boolean",
+                            receiver: createPhiSignalSubcontrolAddress("cms", toolbarId, controlKey),
+                        },
+                        {
+                            routeKey: `theme-controller-${controlKey}-tooltip`,
+                            capabilityId: `${controlKey}Tooltip`,
+                            scope: "area",
+                            channel: "tooltip",
+                            action: "change",
+                            valueType: "string",
+                            receiver: createPhiSignalSubcontrolAddress("cms", toolbarId, controlKey),
+                        },
+                    ]),
+                },
+            },
+        }];
+}
 /**
  * The Theme page in the Builder: the Site's Theme Set picked in the header bottom, and four panels --
  * colour, style, background, brand -- each beside its own preview, one at a time in a Stack.
@@ -110,6 +143,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
             title: { msgId: 0, source: "Theme", value: labels.pageTitles.theme },
             description: null,
         },
+        controllerSettings: buildThemeControllerSettings(themeToolbarId),
         overlays: [],
         regions: [
             nodes.region({
@@ -118,7 +152,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 rootLayoutNodeId: PHI_THEME_PAGE_LAYOUT_IDS.layoutHeaderBottom,
                 sortOrder: 5,
                 config: {
-                    sticky: true,
+                    flags: PhiCmsFlags.Sticky,
                     size: { height: `${resolvePhiShellHeaderHeight(runtime.site.theme?.shell, "bottom")}px` },
                     offsetTop: resolvePhiShellHeaderHeight(runtime.site.theme?.shell, "main"),
                 },
@@ -148,7 +182,6 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 config: {
                     balancedSides: true,
                     contentAlign: "center",
-                    style: { height: "100%" },
                 },
             }),
             // No ground of its own: the Theme's Root Background is what its panels stand on.
@@ -167,12 +200,9 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                         horizontal: "left",
                         vertical: "top",
                     },
-                    gap: PHI_SPACE.base,
+                    gap: PHI_SPACE.sm,
                     margin: 0,
                     padding: PHI_SPACE.base,
-                    background: "transparent",
-                    border: "none",
-                    borderRadius: 0,
                 },
             }),
             nodes.layout({
@@ -185,7 +215,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 config: {
                     balancedSides: true,
                     contentAlign: "center",
-                    gap: PHI_SPACE.base,
+                    gap: PHI_SPACE.sm,
                     padding: 0,
                     paddingLeft: 0,
                     paddingRight: 0,
@@ -217,7 +247,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 sortOrder: 0,
                 label: "Color",
                 config: {
-                    gap: PHI_SPACE.base,
+                    gap: PHI_SPACE.sm,
                     anchor: {
                         horizontal: "left",
                         vertical: "top",
@@ -226,9 +256,6 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                     padding: 0,
                     paddingLeft: 0,
                     paddingRight: 0,
-                    background: "transparent",
-                    border: "none",
-                    borderRadius: 0,
                 },
             }),
             nodes.layout({
@@ -240,7 +267,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 sortOrder: 1,
                 label: "Style",
                 config: {
-                    gap: PHI_SPACE.base,
+                    gap: PHI_SPACE.sm,
                     anchor: {
                         horizontal: "left",
                         vertical: "top",
@@ -249,9 +276,6 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                     padding: 0,
                     paddingLeft: 0,
                     paddingRight: 0,
-                    background: "transparent",
-                    border: "none",
-                    borderRadius: 0,
                 },
             }),
             /*
@@ -267,7 +291,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 sortOrder: 2,
                 label: "Background",
                 config: {
-                    gap: PHI_SPACE.base,
+                    gap: PHI_SPACE.sm,
                     anchor: {
                         horizontal: "left",
                         vertical: "top",
@@ -276,9 +300,6 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                     padding: 0,
                     paddingLeft: 0,
                     paddingRight: 0,
-                    background: "transparent",
-                    border: "none",
-                    borderRadius: 0,
                 },
             }),
             nodes.layout({
@@ -290,7 +311,7 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                 sortOrder: 3,
                 label: "Brand",
                 config: {
-                    gap: PHI_SPACE.base,
+                    gap: PHI_SPACE.sm,
                     anchor: {
                         horizontal: "left",
                         vertical: "top",
@@ -299,9 +320,6 @@ export async function buildPhiDefaultBuilderThemePageTree({ page, runtime, regis
                     padding: 0,
                     paddingLeft: 0,
                     paddingRight: 0,
-                    background: "transparent",
-                    border: "none",
-                    borderRadius: 0,
                 },
             }),
         ],

package/plugins/runtime-modules/theme/widgets/brand-controls/authoring.d.ts

@@ -1,10 +1,10 @@
 import { type PhiBuilderBrandWidgetConfig } from "../../../../../plugins/runtime-modules/theme/widgets/brand-controls/config";
 export declare const PHI_BUILDER_BRAND_THEME_CONTROLS_WIDGET_BUILDER_PLUGIN: {
     renderEditor: (args_0: import("../../../../../types").PhiCmsBuilderWidgetRenderArgs<PhiBuilderBrandWidgetConfig>) => import("react").ReactNode;
-    kind: "widget";
     title: string;
-    description?: string | undefined;
+    kind: "widget";
     category: import("../../../../../cms").PhiCmsPluginCategory;
+    description?: string | undefined;
     iconFamily?: string | undefined;
     pluginKey: string;
     runtimeSignals?: (import("../../../../../types").PhiSignalPluginMeta | null) | undefined;
@@ -16,10 +16,10 @@ export declare const PHI_BUILDER_BRAND_THEME_CONTROLS_WIDGET_BUILDER_PLUGIN: {
 };
 export declare const PHI_BUILDER_BRAND_THEME_PREVIEW_WIDGET_BUILDER_PLUGIN: {
     renderEditor: (args_0: import("../../../../../types").PhiCmsBuilderWidgetRenderArgs<PhiBuilderBrandWidgetConfig>) => import("react").ReactNode;
-    kind: "widget";
     title: string;
-    description?: string | undefined;
+    kind: "widget";
     category: import("../../../../../cms").PhiCmsPluginCategory;
+    description?: string | undefined;
     iconFamily?: string | undefined;
     pluginKey: string;
     runtimeSignals?: (import("../../../../../types").PhiSignalPluginMeta | null) | undefined;
@@ -31,10 +31,10 @@ export declare const PHI_BUILDER_BRAND_THEME_PREVIEW_WIDGET_BUILDER_PLUGIN: {
 };
 export declare const PHI_BUILDER_BRAND_STYLE_CONTROLS_WIDGET_BUILDER_PLUGIN: {
     renderEditor: (args_0: import("../../../../../types").PhiCmsBuilderWidgetRenderArgs<PhiBuilderBrandWidgetConfig>) => import("react").ReactNode;
-    kind: "widget";
     title: string;
-    description?: string | undefined;
+    kind: "widget";
     category: import("../../../../../cms").PhiCmsPluginCategory;
+    description?: string | undefined;
     iconFamily?: string | undefined;
     pluginKey: string;
     runtimeSignals?: (import("../../../../../types").PhiSignalPluginMeta | null) | undefined;
@@ -46,10 +46,10 @@ export declare const PHI_BUILDER_BRAND_STYLE_CONTROLS_WIDGET_BUILDER_PLUGIN: {
 };
 export declare const PHI_BUILDER_BRAND_BACKGROUND_CONTROLS_WIDGET_BUILDER_PLUGIN: {
     renderEditor: (args_0: import("../../../../../types").PhiCmsBuilderWidgetRenderArgs<PhiBuilderBrandWidgetConfig>) => import("react").ReactNode;
-    kind: "widget";
     title: string;
-    description?: string | undefined;
+    kind: "widget";
     category: import("../../../../../cms").PhiCmsPluginCategory;
+    description?: string | undefined;
     iconFamily?: string | undefined;
     pluginKey: string;
     runtimeSignals?: (import("../../../../../types").PhiSignalPluginMeta | null) | undefined;
@@ -61,10 +61,10 @@ export declare const PHI_BUILDER_BRAND_BACKGROUND_CONTROLS_WIDGET_BUILDER_PLUGIN
 };
 export declare const PHI_BUILDER_BRAND_IDENTITY_CONTROLS_WIDGET_BUILDER_PLUGIN: {
     renderEditor: (args_0: import("../../../../../types").PhiCmsBuilderWidgetRenderArgs<PhiBuilderBrandWidgetConfig>) => import("react").ReactNode;
-    kind: "widget";
     title: string;
-    description?: string | undefined;
+    kind: "widget";
     category: import("../../../../../cms").PhiCmsPluginCategory;
+    description?: string | undefined;
     iconFamily?: string | undefined;
     pluginKey: string;
     runtimeSignals?: (import("../../../../../types").PhiSignalPluginMeta | null) | undefined;

package/plugins/runtime-modules/theme/widgets/brand-controls/client.d.ts

@@ -1,12 +1,6 @@
 import type { PhiColorPickerLabels } from "../../../../../components/widgets/label-types/color-picker";
 import type { PhiBlockRuntime } from "../../../../../types/widget-runtime";
-import type { PhiControlOption } from "../../../../../components/controls/phi-control-options";
 import type { PhiBuilderBrandWidgetConfig } from "./config";
-export declare function PhiBuilderBrandThemeControllerWidgetClient({ runtime, config, setOptions, }: {
-    runtime: PhiBlockRuntime;
-    config?: PhiBuilderBrandWidgetConfig | null;
-    setOptions: readonly PhiControlOption[];
-}): null;
 export declare function PhiBuilderBrandThemeControlsWidgetClient({ runtime, config, colorPickerLabels, }: {
     runtime: PhiBlockRuntime;
     config?: PhiBuilderBrandWidgetConfig | null;