@phis/ui 0.2.1 → 0.4.0

package/plugins/runtime-modules/shell-tree-composition.js

@@ -1,6 +1,7 @@
 import { prunePhiSignalRoutesFromConfig } from "../../helpers/signal-route-lifecycle";
 import { createPhiPresetCmsInstanceId, } from "../../types/cms-instance-id";
 import { PHI_SIGNAL_SCOPES, createPhiSignalAddress } from "../../types/signals";
+import { concatPhiCmsTreeControllerSettings } from "../../helpers/cms-tree-controller-settings";
 export function omitPhiCmsShellCompositionNodes(tree, sourceIdentity, omitRegionTypes, omitNodeKeys) {
     const omittedTypes = new Set(omitRegionTypes);
     const explicitOmittedIds = new Set(omitNodeKeys.map((nodeKey) => createPhiPresetCmsInstanceId({
@@ -99,5 +100,6 @@ export function mergePhiCmsShellTrees(base, overlay) {
         overlays: [...base.overlays, ...overlay.overlays],
         layoutNodes: [...base.layoutNodes, ...overlay.layoutNodes],
         contentWidgets: [...base.contentWidgets, ...overlay.contentWidgets],
+        controllerSettings: concatPhiCmsTreeControllerSettings(base.controllerSettings, overlay.controllerSettings, "Area shell composition"),
     };
 }

package/plugins/runtime-modules/sidebar-route.d.ts

@@ -32,8 +32,8 @@ export type PhiSidebarAreaKey = keyof typeof PHI_SIDEBAR_AREA_ROUTE_DEFAULTS;
  * A Page a Module contributes together with its entry in an Area sidebar.
  *
  * The entry is placed by role, never by somebody else's item key: `start`, `main`, `settings` or `end`,
- * and the Area decides where that is. `settings` also mounts the route in the Area's Settings mount,
- * as every Settings Page does, and takes the Area's policy for who sees Settings entries.
+ * and the Area decides where that is. `settings` is the Area's Settings container, and an entry there
+ * takes the Area's policy for who sees Settings entries.
  *
  * The entry's label is the Page's title, and it names the route by its preset key. Further entries for
  * the same Page -- one in the account menu, say -- follow it unchanged.

package/plugins/runtime-modules/sidebar-route.js

@@ -22,8 +22,8 @@ const PHI_SIDEBAR_AREA_ROUTE_DEFAULTS = {
  * A Page a Module contributes together with its entry in an Area sidebar.
  *
  * The entry is placed by role, never by somebody else's item key: `start`, `main`, `settings` or `end`,
- * and the Area decides where that is. `settings` also mounts the route in the Area's Settings mount,
- * as every Settings Page does, and takes the Area's policy for who sees Settings entries.
+ * and the Area decides where that is. `settings` is the Area's Settings container, and an entry there
+ * takes the Area's policy for who sees Settings entries.
  *
  * The entry's label is the Page's title, and it names the route by its preset key. Further entries for
  * the same Page -- one in the account menu, say -- follow it unchanged.
@@ -39,7 +39,6 @@ export function buildPhiSidebarRoutePresetDescriptor({ area, anchor, ownerModule
         area,
         title,
         path,
-        ...(settings ? { mount: { mountKey: "settings" } } : {}),
         navigation: [{
                 navKey: resolvePhiAreaRootRouteNavKey(area),
                 anchor,

package/plugins/runtime-modules/site-module-client-manifests.d.ts

@@ -6,7 +6,7 @@ import type { PhiRuntimeModuleControllerClientManifest } from "../../components/
 import { type PhiRuntimeModuleUiProviderClientManifest } from "../../components/runtime/runtime-module-ui-provider-client-manifest";
 import type { PhiRuntimeModuleAuthoringClientContribution } from "./authoring-contributions-client";
 import type { PhiSiteModuleAuthoringContributions } from "./site-modules-authoring-client";
-import type { PhiSiteModuleClientAreaContributions, PhiSiteModuleClientContributions } from "./site-modules-client";
+import type { PhiSiteModuleClientContributions } from "./site-modules-client";
 /**
  * Adding what a Site's own Modules contribute to the first-party Client manifests.
  *
@@ -27,7 +27,6 @@ export type PhiSiteModuleClientManifests = {
     calendarAdapter: PhiRuntimeModuleCalendarAdapterClientManifest;
     uiProvider: PhiRuntimeModuleUiProviderClientManifest;
 };
-export declare function readPhiSiteModuleClientAreaContributions(contributions: PhiSiteModuleClientContributions, area: PhiCmsAreaKey): PhiSiteModuleClientAreaContributions;
 export declare function extendWithPhiSiteModuleClientManifests(contributions: PhiSiteModuleClientContributions, area: PhiCmsAreaKey, base: PhiSiteModuleClientManifests): PhiSiteModuleClientManifests;
 /**
  * The Site's own Authoring contributions, for the Builder.

package/plugins/runtime-modules/site-module-client-manifests.js

@@ -4,7 +4,7 @@ import { extendPhiRuntimeModuleDataProviderClientManifest, } from "../../compone
 import { extendPhiRuntimeModuleRenderClientManifest, } from "../../components/runtime/runtime-module-render-client-manifest";
 import { extendPhiRuntimeModuleUiProviderClientManifest, } from "../../components/runtime/runtime-module-ui-provider-client-manifest";
 import { extendPhiRuntimeModuleControllerClientManifest } from "./area-contributions-controller-client";
-export function readPhiSiteModuleClientAreaContributions(contributions, area) {
+function readPhiSiteModuleClientAreaContributions(contributions, area) {
     return contributions.areas[area] ?? {};
 }
 export function extendWithPhiSiteModuleClientManifests(contributions, area, base) {

package/plugins/runtime-modules/theme/brand-theme-model.d.ts

@@ -0,0 +1,170 @@
+import type { PhiBlockRuntime } from "../../../types/widget-runtime";
+import type { PhiCmsAreaKey } from "../../../constants/cms-areas";
+import { type PhiThemePresetPlugin } from "../../../theme/phi-theme-presets";
+import type { PhiBuilderBrandWidgetConfig } from "./widgets/brand-controls/config";
+import type { PhiHistoryAction, PhiHistoryLabels } from "../../../components/widgets/label-types/history";
+export type ThemePayload = NonNullable<PhiBlockRuntime["site"]["theme"]>;
+export declare const phiThemeHistory: {
+    clear: (scopeKey: string) => void;
+    endGesture: (scopeKey?: string) => void;
+    getAvailability: (scopeKey: string) => {
+        canUndo: boolean;
+        canRedo: boolean;
+        undoAction: PhiHistoryAction | null;
+        redoAction: PhiHistoryAction | null;
+    };
+    getHead: (scopeKey: string) => {
+        action: PhiHistoryAction;
+        before: Omit<import("../../../types/site-config").PhiSiteTheme, "mode"> & {
+            mode: import("../../../types").PhiWidgetThemeMode;
+        };
+        after: Omit<import("../../../types/site-config").PhiSiteTheme, "mode"> & {
+            mode: import("../../../types").PhiWidgetThemeMode;
+        };
+        coalesceKey?: string;
+    } | null;
+    record: (scopeKey: string, entry: {
+        action: PhiHistoryAction;
+        before: Omit<import("../../../types/site-config").PhiSiteTheme, "mode"> & {
+            mode: import("../../../types").PhiWidgetThemeMode;
+        };
+        after: Omit<import("../../../types/site-config").PhiSiteTheme, "mode"> & {
+            mode: import("../../../types").PhiWidgetThemeMode;
+        };
+        coalesceKey?: string;
+    }) => void;
+    redo: (scopeKey: string, apply: (snapshot: Omit<import("../../../types/site-config").PhiSiteTheme, "mode"> & {
+        mode: import("../../../types").PhiWidgetThemeMode;
+    }) => void) => {
+        action: PhiHistoryAction;
+        before: Omit<import("../../../types/site-config").PhiSiteTheme, "mode"> & {
+            mode: import("../../../types").PhiWidgetThemeMode;
+        };
+        after: Omit<import("../../../types/site-config").PhiSiteTheme, "mode"> & {
+            mode: import("../../../types").PhiWidgetThemeMode;
+        };
+        coalesceKey?: string;
+    } | null;
+    subscribe: (scopeKey: import("../../../state").PhiPluginStateScope, listener: () => void) => () => void;
+    undo: (scopeKey: string, apply: (snapshot: Omit<import("../../../types/site-config").PhiSiteTheme, "mode"> & {
+        mode: import("../../../types").PhiWidgetThemeMode;
+    }) => void) => {
+        action: PhiHistoryAction;
+        before: Omit<import("../../../types/site-config").PhiSiteTheme, "mode"> & {
+            mode: import("../../../types").PhiWidgetThemeMode;
+        };
+        after: Omit<import("../../../types/site-config").PhiSiteTheme, "mode"> & {
+            mode: import("../../../types").PhiWidgetThemeMode;
+        };
+        coalesceKey?: string;
+    } | null;
+    useAvailability: (scopeKey: string) => {
+        canUndo: boolean;
+        canRedo: boolean;
+        undoAction: PhiHistoryAction | null;
+        redoAction: PhiHistoryAction | null;
+    };
+    useHead: (scopeKey: string) => {
+        action: PhiHistoryAction;
+        before: Omit<import("../../../types/site-config").PhiSiteTheme, "mode"> & {
+            mode: import("../../../types").PhiWidgetThemeMode;
+        };
+        after: Omit<import("../../../types/site-config").PhiSiteTheme, "mode"> & {
+            mode: import("../../../types").PhiWidgetThemeMode;
+        };
+        coalesceKey?: string;
+    } | null;
+};
+/**
+ * One Theme edit as a history step: the parts of the Theme it changed, named in the author's language.
+ * A field that was only reordered is not a change; fields are compared by value.
+ */
+export declare function resolvePhiThemeHistoryAction(before: ThemePayload, after: ThemePayload, labels: PhiHistoryLabels): PhiHistoryAction;
+export type ThemeReadResponse = {
+    key?: string;
+    published?: ThemePayload;
+    publishedRevisionId?: number | null;
+    workingDraftRevisionId?: number | null;
+    draft?: {
+        revisionId?: number | null;
+        theme?: {
+            theme?: ThemePayload;
+            key?: string;
+        } | null;
+    } | null;
+};
+export type ThemeWriteResponse = {
+    key?: string;
+    revisionId?: number | null;
+    theme?: {
+        theme?: ThemePayload;
+        key?: string;
+    } | null;
+    error?: string;
+};
+export type BrandThemeState = {
+    key: string;
+    published: ThemePayload;
+    draft: ThemePayload;
+    revisionId: number | null;
+    hasPublishedThemeRevision: boolean;
+    publishedRevisionId: number | null;
+};
+export declare const DEFAULT_THEME_KEY = "default";
+/** The record without the named fields, for the places where a part of the Theme is handed back to its block. */
+export declare function omitThemeFields(theme: ThemePayload, ...fields: ReadonlyArray<keyof ThemePayload>): ThemePayload;
+export declare function resolveThemeKey(config?: PhiBuilderBrandWidgetConfig | null): string;
+export declare function normalizeTheme(input: unknown, fallback: ThemePayload): ThemePayload;
+/**
+ * A fresh draft names its blocks and owns nothing: the proportions come from the style block at
+ * resolve time, the colour from the palette block, and nothing is copied in that a reset would later
+ * have to know how to take away.
+ */
+export declare function resolveInitialTheme(runtime: PhiBlockRuntime): ThemePayload;
+export declare function clearThemeControlShape(theme: ThemePayload): ThemePayload;
+export declare function resolveThemePayloadPreset(theme: ThemePayload, presets: readonly PhiThemePresetPlugin[]): PhiThemePresetPlugin;
+/**
+ * Picking a palette block drops the author's own palette, exactly as picking a ground or a style drops
+ * theirs: somebody choosing another palette means to see it, and their seeds laid over it would hide
+ * the very thing they asked for.
+ */
+export declare function applyThemePreset(theme: ThemePayload, preset: PhiThemePresetPlugin): ThemePayload;
+/** Back to the blocks alone: the palette, the proportions, the Button shadows and the component overrides all go. */
+export declare function resetThemeToPreset(theme: ThemePayload, presets: readonly PhiThemePresetPlugin[], preset?: PhiThemePresetPlugin): ThemePayload;
+export declare function buildThemeReviewHref({ area, revisionId, themeKey, }: {
+    area: PhiCmsAreaKey;
+    revisionId: number;
+    themeKey: string;
+}): string;
+/**
+ * What a Widget knows before the Controller has told it anything: the theme the Site was rendered with.
+ *
+ * It used to consult a module variable the Widgets kept between them, because a Widget mounting late
+ * had no other way to learn about an unsaved draft. That variable answered for the browser tab, while
+ * the draft belongs to the Area the Controller is mounted in -- so it was right by coincidence and
+ * silently wrong wherever the two differed. A Widget asks now, and this is only the starting point.
+ */
+export declare function createInitialBrandThemeState(themeKey: string, fallbackTheme: ThemePayload): BrandThemeState;
+export declare function isSameThemePayload(left: ThemePayload, right: ThemePayload): boolean;
+/**
+ * Where a draft stands in a continuous edit.
+ *
+ * A colour picker or a slider sends a draft for every value it passes over, and none of those is a
+ * decision: the decision is taking the value -- closing the picker, letting go of the slider -- or
+ * putting it back with Escape.
+ * `live` is a step shown in the preview and kept out of the history; `commit` ends the edit with one
+ * entry from where it started; `discard` ends it with none and the Theme as it was before it opened.
+ */
+export type PhiThemeDraftEdit = "live" | "commit" | "discard";
+/**
+ * A Set decides all three parts, so it clears all three: the parts picked one by one, because a Set is
+ * what somebody falls back on when they stop deciding each part, and the values authored on top of
+ * them, for the same reason picking a single block clears its own. The Control shape belongs to the
+ * style, so it goes with the style tokens.
+ */
+export declare function mergeThemeSetChoice(theme: ThemePayload, set: {
+    key: string;
+    version: number;
+}): ThemePayload;
+/** Every ground value an author set, in both modes, so the chosen block is what shows. */
+export declare function clearThemeAuthoredGround(theme: ThemePayload): ThemePayload;

package/plugins/runtime-modules/theme/brand-theme-model.js

@@ -0,0 +1,164 @@
+/*
+ * The Brand Theme as the Theme Controller and the Brand Widgets both read it: the payload, the Theme
+ * history, and the few pure steps the Controller takes on a draft that the Widgets take too. It lives
+ * beside both, because the Controller is not a Widget and the Widgets do not own the draft.
+ */
+import { isPhiRecord } from "../../../helpers/is-record";
+import { PHI_DEFAULT_THEME_PRESET_KEY, PHI_DEFAULT_THEME_PRESET_VERSION, resolvePhiThemePresetPlugin, } from "../../../theme/phi-theme-presets";
+import { createPhiHistoryStore } from "../../../components/state/history-store";
+export const phiThemeHistory = createPhiHistoryStore("@phis/ui/theme-history");
+/*
+ * Which part of a Theme each of its fields belongs to, as an undo names it. Stated for every field, so
+ * a field added to the Theme has to say where it belongs before it can be edited at all.
+ */
+const PHI_THEME_HISTORY_PART_BY_FIELD = {
+    mode: "mode",
+    blocks: "palette",
+    derivedFrom: "palette",
+    preset: "palette",
+    presetVersion: "palette",
+    palette: "palette",
+    shape: "style",
+    style: "style",
+    buttons: "style",
+    fonts: "fonts",
+    typography: "fonts",
+    contact: "contact",
+    brand: "brand",
+    widgets: "widgets",
+    shell: "shell",
+    root: "root",
+    components: "components",
+};
+/**
+ * One Theme edit as a history step: the parts of the Theme it changed, named in the author's language.
+ * A field that was only reordered is not a change; fields are compared by value.
+ */
+export function resolvePhiThemeHistoryAction(before, after, labels) {
+    const parts = new Set();
+    for (const [field, part] of Object.entries(PHI_THEME_HISTORY_PART_BY_FIELD)) {
+        if (JSON.stringify(before[field] ?? null) !== JSON.stringify(after[field] ?? null))
+            parts.add(part);
+    }
+    return {
+        key: "changeTheme",
+        subject: [...parts].map((part) => labels.themeParts[part]).join(labels.listSeparator),
+    };
+}
+export const DEFAULT_THEME_KEY = "default";
+/** The record without the named fields, for the places where a part of the Theme is handed back to its block. */
+export function omitThemeFields(theme, ...fields) {
+    return Object.fromEntries(Object.entries(theme).filter(([key]) => !fields.includes(key)));
+}
+export function resolveThemeKey(config) {
+    return config?.themeKey?.trim() || DEFAULT_THEME_KEY;
+}
+export function normalizeTheme(input, fallback) {
+    if (!isPhiRecord(input)) {
+        return fallback;
+    }
+    return input;
+}
+/**
+ * A fresh draft names its blocks and owns nothing: the proportions come from the style block at
+ * resolve time, the colour from the palette block, and nothing is copied in that a reset would later
+ * have to know how to take away.
+ */
+export function resolveInitialTheme(runtime) {
+    return normalizeTheme(runtime.site.theme, {
+        mode: "light",
+        preset: PHI_DEFAULT_THEME_PRESET_KEY,
+        presetVersion: PHI_DEFAULT_THEME_PRESET_VERSION,
+    });
+}
+export function clearThemeControlShape(theme) {
+    const shape = Object.fromEntries(Object.entries(theme.shape ?? {}).filter(([key]) => key !== "controls"));
+    return Object.keys(shape).length > 0 ? { ...theme, shape } : omitThemeFields(theme, "shape");
+}
+export function resolveThemePayloadPreset(theme, presets) {
+    return resolvePhiThemePresetPlugin(presets, theme.preset);
+}
+/**
+ * Picking a palette block drops the author's own palette, exactly as picking a ground or a style drops
+ * theirs: somebody choosing another palette means to see it, and their seeds laid over it would hide
+ * the very thing they asked for.
+ */
+export function applyThemePreset(theme, preset) {
+    return {
+        ...omitThemeFields(theme, "palette"),
+        preset: preset.key,
+        presetVersion: preset.version,
+    };
+}
+/** Back to the blocks alone: the palette, the proportions, the Button shadows and the component overrides all go. */
+export function resetThemeToPreset(theme, presets, preset = resolveThemePayloadPreset(theme, presets)) {
+    return {
+        ...omitThemeFields(theme, "palette", "style", "buttons", "components"),
+        preset: preset.key,
+        presetVersion: preset.version,
+    };
+}
+function buildThemeReviewRoutePath(area) {
+    return area === "public" ? "/public" : `/${area}`;
+}
+export function buildThemeReviewHref({ area, revisionId, themeKey, }) {
+    const url = new URL(buildThemeReviewRoutePath(area), window.location.origin);
+    url.searchParams.set("reviewKind", "theme");
+    url.searchParams.set("reviewRevision", String(revisionId));
+    url.searchParams.set("reviewArea", area);
+    url.searchParams.set("reviewPage", "/");
+    url.searchParams.set("reviewThemeKey", themeKey);
+    return `${url.pathname}${url.search}`;
+}
+/**
+ * What a Widget knows before the Controller has told it anything: the theme the Site was rendered with.
+ *
+ * It used to consult a module variable the Widgets kept between them, because a Widget mounting late
+ * had no other way to learn about an unsaved draft. That variable answered for the browser tab, while
+ * the draft belongs to the Area the Controller is mounted in -- so it was right by coincidence and
+ * silently wrong wherever the two differed. A Widget asks now, and this is only the starting point.
+ */
+export function createInitialBrandThemeState(themeKey, fallbackTheme) {
+    return {
+        key: themeKey,
+        published: fallbackTheme,
+        draft: fallbackTheme,
+        revisionId: null,
+        hasPublishedThemeRevision: false,
+        publishedRevisionId: null,
+    };
+}
+export function isSameThemePayload(left, right) {
+    return JSON.stringify(left) === JSON.stringify(right);
+}
+/**
+ * A Set decides all three parts, so it clears all three: the parts picked one by one, because a Set is
+ * what somebody falls back on when they stop deciding each part, and the values authored on top of
+ * them, for the same reason picking a single block clears its own. The Control shape belongs to the
+ * style, so it goes with the style tokens.
+ */
+export function mergeThemeSetChoice(theme, set) {
+    return clearThemeAuthoredFonts(clearThemeAuthoredGround(clearThemeControlShape(clearThemeStyleTokens({
+        ...theme,
+        blocks: { set: { key: set.key, version: set.version } },
+    }))));
+}
+/** Every font slot an author set, so the Set's fonts block is what shows. */
+function clearThemeAuthoredFonts(theme) {
+    return omitThemeFields(theme, "fonts");
+}
+/** Every ground value an author set, in both modes, so the chosen block is what shows. */
+export function clearThemeAuthoredGround(theme) {
+    const root = Object.fromEntries(Object.entries(theme.root ?? {}).filter(([key]) => key !== "background" && key !== "chrome"));
+    return { ...theme, root };
+}
+/**
+ * Dropping every structural override, so the style block shows through again.
+ *
+ * Colour stays: the two tabs are two decisions, and somebody resetting the proportions did not ask to
+ * lose the brand colour they picked. The record keeps them apart -- `palette` and `style` -- so taking
+ * the one away never touches the other.
+ */
+function clearThemeStyleTokens(theme) {
+    return omitThemeFields(theme, "style");
+}

package/plugins/runtime-modules/theme/controller/client.d.ts

@@ -1,9 +1,10 @@
 import { type PhiThemeRuntimeControllerConfig, type PhiThemeRuntimeControllerPreload } from "./definition";
 export declare const PHI_THEME_RUNTIME_CONTROLLER_PLUGIN: {
-    renderController: ({ runtime, preloadData }: import("../../../../types").PhiRuntimeControllerRenderArgs<PhiThemeRuntimeControllerConfig, PhiThemeRuntimeControllerPreload>) => import("react").FunctionComponentElement<{
+    renderController: ({ runtime, config, preloadData }: import("../../../../types").PhiRuntimeControllerRenderArgs<PhiThemeRuntimeControllerConfig, PhiThemeRuntimeControllerPreload>) => import("react").FunctionComponentElement<{
         runtime: import("../../../../types").PhiBlockRuntime;
-        config?: import("../widgets/brand-controls/config").PhiBuilderBrandWidgetConfig | null;
+        config: PhiThemeRuntimeControllerConfig;
         setOptions: readonly import("@phis/contracts/controls").PhiControlOption[];
+        historyLabels: import("../../../../components/widgets/label-types/history").PhiHistoryLabels;
     }>;
     kind: "controller";
     pluginKey: string;
@@ -35,12 +36,6 @@ export declare const PHI_THEME_RUNTIME_CONTROLLER_PLUGIN: {
             action: "change";
             valueType: "json";
             valueSchema: `${string}/signals/${string}`;
-        } | {
-            id: string;
-            channel: "brandPreviewThemeMode";
-            action: "change";
-            valueType: "boolean";
-            valueSchema?: undefined;
         } | {
             id: string;
             channel: "select";
@@ -62,6 +57,6 @@ export declare const PHI_THEME_RUNTIME_CONTROLLER_PLUGIN: {
         })[];
     };
     defaultConfig: {};
-    parseConfig: typeof import("./definition").parsePhiThemeRuntimeControllerConfig;
+    parseConfig: (raw: Record<string, unknown>) => PhiThemeRuntimeControllerConfig;
 };
 export declare const PhiThemeRuntimeControllerClient: (props: import("../../contracts").PhiRuntimeModuleControllerClientProps) => import("react").JSX.Element;

package/plugins/runtime-modules/theme/controller/client.js

@@ -1,17 +1,19 @@
 "use client";
 import { createElement } from "react";
 import { createPhiRuntimeControllerClient } from "../../../../components/runtime/runtime-controller-client-factory";
-import { PhiBuilderBrandThemeControllerWidgetClient } from "../widgets/brand-controls/client";
+import { PhiThemeControllerRuntime } from "./runtime";
 import { PHI_THEME_RUNTIME_CONTROLLER_DEFINITION, } from "./definition";
 export const PHI_THEME_RUNTIME_CONTROLLER_PLUGIN = {
     ...PHI_THEME_RUNTIME_CONTROLLER_DEFINITION,
-    renderController: ({ runtime, preloadData }) => {
-        if (!preloadData?.setOptions) {
-            throw new Error("Theme controller preload is missing its Set options.");
+    renderController: ({ runtime, config, preloadData }) => {
+        if (!preloadData?.setOptions || !preloadData.historyLabels) {
+            throw new Error("Theme controller preload is missing its Set options or its history labels.");
         }
-        return createElement(PhiBuilderBrandThemeControllerWidgetClient, {
+        return createElement(PhiThemeControllerRuntime, {
             runtime,
+            config,
             setOptions: preloadData.setOptions,
+            historyLabels: preloadData.historyLabels,
         });
     },
 };

package/plugins/runtime-modules/theme/controller/definition.d.ts

@@ -1,5 +1,14 @@
+import { type PhiSignalRouteSet } from "../../../../types/signals";
 import type { PhiControlOption } from "../../../../components/controls/phi-control-options";
-export type PhiThemeRuntimeControllerConfig = Record<string, never>;
+import type { PhiHistoryLabels } from "../../../../components/widgets/label-types/history";
+/**
+ * Whom the Controller states its history into: the undo and redo commands of the Page that shows them.
+ * The Area runs this Controller; the Theme Page names its toolbar while it is shown (`controllerSettings`),
+ * and anywhere else the history is kept and told to nobody.
+ */
+export type PhiThemeRuntimeControllerConfig = {
+    signalRoutes: PhiSignalRouteSet | null;
+};
 /**
  * The Sets this Site offers, worked out on the server where the installed Modules are known.
  *
@@ -9,8 +18,10 @@ export type PhiThemeRuntimeControllerConfig = Record<string, never>;
  */
 export type PhiThemeRuntimeControllerPreload = {
     setOptions: PhiControlOption[];
+    /** What the Theme history says about its steps, in the author's language. */
+    historyLabels: PhiHistoryLabels;
 };
-export declare function parsePhiThemeRuntimeControllerConfig(): PhiThemeRuntimeControllerConfig;
+declare function parsePhiThemeRuntimeControllerConfig(raw: Record<string, unknown>): PhiThemeRuntimeControllerConfig;
 export declare const PHI_THEME_RUNTIME_CONTROLLER_DEFINITION: {
     kind: "controller";
     pluginKey: string;
@@ -42,12 +53,6 @@ export declare const PHI_THEME_RUNTIME_CONTROLLER_DEFINITION: {
             action: "change";
             valueType: "json";
             valueSchema: `${string}/signals/${string}`;
-        } | {
-            id: string;
-            channel: "brandPreviewThemeMode";
-            action: "change";
-            valueType: "boolean";
-            valueSchema?: undefined;
         } | {
             id: string;
             channel: "select";
@@ -71,3 +76,4 @@ export declare const PHI_THEME_RUNTIME_CONTROLLER_DEFINITION: {
     defaultConfig: {};
     parseConfig: typeof parsePhiThemeRuntimeControllerConfig;
 };
+export {};

package/plugins/runtime-modules/theme/controller/definition.js

@@ -1,8 +1,8 @@
-import { PHI_SIGNAL_VALUE_SCHEMAS, } from "../../../../types/signals";
+import { PHI_SIGNAL_VALUE_SCHEMAS, readPhiSignalRouteSet, } from "../../../../types/signals";
 import { PHI_THEME_CONTROLLER_KEY, PHI_THEME_CONTROLLER_PLUGIN_KEY } from "./address";
 import { PHI_THEME_SIGNAL_CHANNELS } from "./signals";
-export function parsePhiThemeRuntimeControllerConfig() {
-    return {};
+function parsePhiThemeRuntimeControllerConfig(raw) {
+    return { signalRoutes: readPhiSignalRouteSet(raw.signalRoutes) };
 }
 export const PHI_THEME_RUNTIME_CONTROLLER_DEFINITION = {
     kind: "controller",
@@ -37,11 +37,11 @@ export const PHI_THEME_RUNTIME_CONTROLLER_DEFINITION = {
                 valueType: "json",
                 valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.controlOptions,
             },
-            {
-                id: "commandEnabled",
-                action: "change",
-                valueType: "boolean",
-            },
+            { id: "undoEnabled", action: "change", valueType: "boolean" },
+            { id: "redoEnabled", action: "change", valueType: "boolean" },
+            // What the next undo and redo would move, as the buttons' tooltips name it.
+            { id: "undoTooltip", action: "change", valueType: "string" },
+            { id: "redoTooltip", action: "change", valueType: "string" },
         ],
         listens: [
             {
@@ -51,12 +51,6 @@ export const PHI_THEME_RUNTIME_CONTROLLER_DEFINITION = {
                 valueType: "json",
                 valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.brandTheme,
             },
-            {
-                id: "previewThemeMode",
-                channel: PHI_THEME_SIGNAL_CHANNELS.previewThemeMode,
-                action: "change",
-                valueType: "boolean",
-            },
             {
                 id: "presetSelect",
                 channel: PHI_THEME_SIGNAL_CHANNELS.presetSelect,

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

@@ -0,0 +1,11 @@
+import type { PhiBlockRuntime } from "../../../../types/widget-runtime";
+import type { PhiControlOption } from "../../../../components/controls/phi-control-options";
+import type { PhiThemeRuntimeControllerConfig } from "./definition";
+import { type PhiHistoryLabels } from "../../../../components/widgets/label-types/history";
+export declare function PhiThemeControllerRuntime({ runtime, config, setOptions, historyLabels, }: {
+    runtime: PhiBlockRuntime;
+    config: PhiThemeRuntimeControllerConfig;
+    setOptions: readonly PhiControlOption[];
+    /** What an undo or redo, and the toolbar's tooltips, say about a Theme edit. */
+    historyLabels: PhiHistoryLabels;
+}): null;