@phis/ui 0.1.0

package/plugins/runtime-modules/builder/edit-scaffold-drawer.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, KeyboardEvent, ReactNode } from "react";
+import type { PhiCmsInstanceId } from "../../../types/cms-instance-id";
+export type PhiEditScaffoldDrawerProps = {
+    kind: "layout";
+    nodeId: PhiCmsInstanceId;
+    regionKey: string;
+    title?: ReactNode;
+    scaffoldLabel?: string | null;
+    packageName?: ReactNode;
+    className?: string;
+    onOpenInsert?: () => void;
+    onClick?: () => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+    children?: ReactNode;
+    chrome?: ReactNode;
+    style?: CSSProperties;
+};
+export declare function PhiEditScaffoldDrawer({ kind, nodeId, regionKey, scaffoldLabel, className, onOpenInsert, onClick, onKeyDown, children, chrome, style, }: PhiEditScaffoldDrawerProps): import("react").JSX.Element;

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

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme as antdTheme } from "antd";
+import { PhiButtonControl } from "../../../components/controls/phi-button-control";
+import { PlusOutlined } from "@ant-design/icons";
+import { usePhiDeveloperBuilderStateValue } from "./developer-workspace-store";
+export function PhiEditScaffoldDrawer({ kind, nodeId, regionKey, scaffoldLabel, className, onOpenInsert, onClick, onKeyDown, children, chrome, style, }) {
+    const { token } = antdTheme.useToken();
+    const selected = usePhiDeveloperBuilderStateValue("public", (state) => state.selectedRootRegionKey === regionKey &&
+        state.nodeId === nodeId &&
+        (state.nodeKind === "layout"));
+    const isEmpty = children == null;
+    const scaffoldVars = {
+        "--phi-edit-scaffold-background": "var(--phi-debug-layer-scaffold-background)",
+        "--phi-edit-scaffold-border": "var(--phi-debug-layer-scaffold-border)",
+        "--phi-edit-scaffold-background-selected": "var(--phi-debug-layer-scaffold-background-strong)",
+        "--phi-edit-scaffold-border-selected": "var(--phi-debug-layer-scaffold-border-strong)",
+        "--phi-edit-scaffold-hover-background": `color-mix(in srgb, ${token.colorSuccessBg} 50%, transparent)`,
+        "--phi-edit-scaffold-selected-background": `color-mix(in srgb, ${token.colorSuccessBg} 65%, transparent)`,
+        "--phi-edit-scaffold-kind-border": token.colorSuccessBorder,
+        "--phi-edit-scaffold-label-background": token.colorSuccessBg,
+        "--phi-edit-scaffold-label-border": token.colorSuccessBorder,
+        "--phi-edit-scaffold-label-color": token.colorSuccessText,
+    };
+    return (_jsxs("div", { className: ["phi-edit-scaffold-drawer", className].filter(Boolean).join(" "), "data-phi-edit-scaffold-kind": kind, "data-phi-edit-scaffold-selected": selected ? "true" : undefined, "data-phi-edit-scaffold-empty": isEmpty ? "true" : undefined, "data-phi-builder-layout-title": scaffoldLabel?.trim() || undefined, role: "button", tabIndex: 0, style: {
+            ...scaffoldVars,
+            cursor: onClick ? "pointer" : undefined,
+            ...style,
+        }, onClick: (event) => {
+            event.stopPropagation();
+            onClick?.();
+        }, onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ") {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            if (onKeyDown) {
+                onKeyDown(event);
+                return;
+            }
+            onClick?.();
+        }, children: [_jsx("div", { className: "phi-edit-scaffold-drawer__body", style: {
+                    ...{
+                        "--phi-edit-scaffold-body-justify": isEmpty ? "center" : "flex-start",
+                        "--phi-edit-scaffold-body-align": isEmpty ? "center" : "stretch",
+                    },
+                }, children: children ?? (_jsx("div", { style: {
+                        display: "inline-flex",
+                        padding: 0,
+                        border: `1px solid ${token.colorError}`,
+                        boxShadow: `inset 0 0 0 1px ${token.colorError}`,
+                        borderRadius: 0,
+                    }, 
+                    // The drawer is selectable; inserting into it must not select it as well.
+                    onClick: (event) => event.stopPropagation(), children: _jsx(PhiButtonControl, { type: "dashed", size: "small", icon: _jsx(PlusOutlined, {}), ariaLabel: "Insert child", onClick: () => onOpenInsert?.() }) })) }), chrome] }));
+}

package/plugins/runtime-modules/builder/effects-form-values.d.ts

@@ -0,0 +1,22 @@
+import type { PhiRenderableBlockEffects } from "../../../types/renderable-block";
+export declare const PHI_BUILDER_EFFECTS_SECTIONS: readonly ["appearance", "transitions", "viewport"];
+export type PhiBuilderEffectsSection = (typeof PHI_BUILDER_EFFECTS_SECTIONS)[number];
+export type PhiBuilderEffectsFormValuesBySection = {
+    appearance: {
+        transparency: number;
+    };
+    transitions: {
+        transitionTrigger: NonNullable<PhiRenderableBlockEffects["transitionTrigger"]>;
+        transitionOnce: boolean;
+        transitions: Record<string, unknown>[];
+    };
+    viewport: {
+        viewportEffects: Record<string, unknown>[];
+    };
+};
+export declare function splitPhiBuilderEffectsFormValues(effects: PhiRenderableBlockEffects | null | undefined): PhiBuilderEffectsFormValuesBySection;
+export declare function mergePhiBuilderEffectsFormValues(input: {
+    appearance: unknown;
+    transitions: unknown;
+    viewport: unknown;
+}): PhiRenderableBlockEffects;

package/plugins/runtime-modules/builder/effects-form-values.js

@@ -0,0 +1,54 @@
+export const PHI_BUILDER_EFFECTS_SECTIONS = ["appearance", "transitions", "viewport"];
+function withRowKeys(values, prefix) {
+    return values.map((value, index) => ({ ...value, __rowKey: `${prefix}:${index}` }));
+}
+export function splitPhiBuilderEffectsFormValues(effects) {
+    return {
+        appearance: {
+            transparency: Math.round((1 - Math.min(1, Math.max(0, effects?.opacity ?? 1))) * 100),
+        },
+        transitions: {
+            transitionTrigger: effects?.transitionTrigger ?? "on_mount",
+            transitionOnce: effects?.transitionOnce ?? true,
+            transitions: withRowKeys(effects?.transitions ?? [], "transition"),
+        },
+        viewport: {
+            viewportEffects: withRowKeys(effects?.viewportEffects ?? [], "viewport"),
+        },
+    };
+}
+function readRecord(value) {
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : {};
+}
+function withoutRowKeys(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value.flatMap((entry) => {
+        if (!entry || typeof entry !== "object" || Array.isArray(entry))
+            return [];
+        const row = { ...entry };
+        delete row.__rowKey;
+        return [row];
+    });
+}
+export function mergePhiBuilderEffectsFormValues(input) {
+    const appearance = readRecord(input.appearance);
+    const transitions = readRecord(input.transitions);
+    const viewport = readRecord(input.viewport);
+    const transparency = typeof appearance.transparency === "number"
+        ? Math.min(100, Math.max(0, appearance.transparency))
+        : 0;
+    const viewportEffects = withoutRowKeys(viewport.viewportEffects)
+        .map((effect) => effect.unit === "unitless" ? { ...effect, unit: "" } : effect);
+    return {
+        opacity: Number((1 - transparency / 100).toFixed(3)),
+        transitionTrigger: typeof transitions.transitionTrigger === "string"
+            ? transitions.transitionTrigger
+            : "on_mount",
+        transitionOnce: transitions.transitionOnce !== false,
+        transitions: withoutRowKeys(transitions.transitions),
+        viewportEffects,
+    };
+}

package/plugins/runtime-modules/builder/history.d.ts

@@ -0,0 +1,80 @@
+import type { PhiBuilderNavigationTree } from "../../../helpers/cms-navigation-catalog";
+import type { PhiAreaRootRoute, PhiAreaMeta } from "../../../helpers/cms-area-config";
+import type { PhiRuntimeModuleId } from "../../../types";
+import type { PhiDeveloperBuilderArea, PhiDeveloperBuilderRegionDraft, PhiDeveloperBuilderWorkspaceState } from "./developer-workspace-types";
+export type PhiBuilderHistoryWorkspace = "structure" | "pages" | "navigation" | "modules";
+export type PhiBuilderHistorySnapshot = {
+    kind: "regionDrafts";
+    drafts: Record<string, PhiDeveloperBuilderRegionDraft | null>;
+} | {
+    kind: "navigation";
+    navKey: string;
+    draft: PhiBuilderNavigationTree | null;
+} | {
+    kind: "workspace";
+    state: Pick<PhiDeveloperBuilderWorkspaceState, "customPages" | "deletedPageDrafts" | "pageMetaDrafts">;
+} | {
+    /**
+     * The Module selection of the Areas one edit touched, and nothing else.
+     *
+     * A `"workspace"` snapshot restores every field it captured, so bundling the selection in there
+     * would mean an unrelated Page-meta undo puts a stale selection back. This kind carries only the
+     * Areas the recorded edit actually changed: a per-Area checkbox records one, the module-wide
+     * switch records every eligible Area in a single entry, so one undo takes the whole gesture back
+     * instead of leaving the partial state the gesture was meant to avoid.
+     */
+    kind: "modules";
+    moduleIdsByArea: Readonly<Partial<Record<PhiDeveloperBuilderArea, readonly PhiRuntimeModuleId[] | null>>>;
+} | {
+    /**
+     * What the Shell says about itself, which its canvas does not carry.
+     *
+     * The root route and the SEO answers live in the Area's config rather than in its Region tree, so
+     * a `"regionDrafts"` snapshot walks straight past them -- which is why choosing a landing was the
+     * one edit in `/shells` that could not be taken back. They are two kinds rather than one because
+     * they are two sentences: an undo of the front door should not also move the Site's description.
+     *
+     * `undefined` is a value here and not an omission: it restores "this session never touched the
+     * Area", which is a different state from `null`, the Builder asking for the shipped default back.
+     */
+    kind: "areaRootRoute";
+    area: PhiDeveloperBuilderArea;
+    rootRoute: PhiAreaRootRoute | null | undefined;
+} | {
+    kind: "areaMeta";
+    area: PhiDeveloperBuilderArea;
+    meta: PhiAreaMeta | null | undefined;
+};
+export declare const phiBuilderHistory: {
+    clear: (scopeKey: string) => void;
+    endGesture: (scopeKey?: string) => void;
+    getAvailability: (scopeKey: string) => {
+        canUndo: boolean;
+        canRedo: boolean;
+    };
+    record: (scopeKey: string, entry: import("../../../components/state/history-store").PhiHistoryEntry<PhiBuilderHistorySnapshot>) => void;
+    redo: (scopeKey: string, apply: (snapshot: PhiBuilderHistorySnapshot) => void) => boolean;
+    subscribe: (scopeKey: import("../../../state").PhiPluginStateScope, listener: () => void) => () => void;
+    undo: (scopeKey: string, apply: (snapshot: PhiBuilderHistorySnapshot) => void) => boolean;
+    useAvailability: (scopeKey: string) => {
+        canUndo: boolean;
+        canRedo: boolean;
+    };
+};
+export declare function createPhiBuilderHistoryContext(input: {
+    workspace: PhiBuilderHistoryWorkspace;
+    area: PhiDeveloperBuilderArea;
+    pageKey?: string | null;
+    navKey?: string | null;
+}): string;
+export declare function createPhiBuilderRegionHistoryContext(input: {
+    area: PhiDeveloperBuilderArea;
+    pageKey: string;
+    pageScoped: boolean;
+}): string;
+export declare function capturePhiBuilderWorkspaceHistoryState(state: PhiDeveloperBuilderWorkspaceState): Extract<PhiBuilderHistorySnapshot, {
+    kind: "workspace";
+}>["state"];
+export declare function capturePhiBuilderModulesHistoryState(state: Pick<PhiDeveloperBuilderWorkspaceState, "runtimeModuleIdsByArea">, areas: readonly PhiDeveloperBuilderArea[]): Extract<PhiBuilderHistorySnapshot, {
+    kind: "modules";
+}>;

package/plugins/runtime-modules/builder/history.js

@@ -0,0 +1,38 @@
+"use client";
+import { createPhiHistoryStore } from "../../../components/state/history-store";
+export const phiBuilderHistory = createPhiHistoryStore("@phis/ui/builder-history");
+export function createPhiBuilderHistoryContext(input) {
+    if (input.workspace === "structure") {
+        return `structure:${input.area}`;
+    }
+    if (input.workspace === "navigation") {
+        return `navigation:${input.area}:${input.navKey?.trim() || "default"}`;
+    }
+    if (input.workspace === "modules") {
+        // The Modules workspace edits the site-wide activation matrix, so its history is one context:
+        // an undo there means "the last Module change", regardless of which Area it landed in.
+        return "modules:site";
+    }
+    return `pages:${input.area}:${input.pageKey?.trim() || "/"}`;
+}
+export function createPhiBuilderRegionHistoryContext(input) {
+    return createPhiBuilderHistoryContext({
+        workspace: input.pageScoped ? "pages" : "structure",
+        area: input.area,
+        pageKey: input.pageKey,
+    });
+}
+export function capturePhiBuilderWorkspaceHistoryState(state) {
+    return {
+        customPages: state.customPages,
+        deletedPageDrafts: state.deletedPageDrafts,
+        pageMetaDrafts: state.pageMetaDrafts,
+    };
+}
+export function capturePhiBuilderModulesHistoryState(state, areas) {
+    const moduleIdsByArea = {};
+    for (const area of areas) {
+        moduleIdsByArea[area] = state.runtimeModuleIdsByArea?.[area] ?? null;
+    }
+    return { kind: "modules", moduleIdsByArea };
+}

package/plugins/runtime-modules/builder/ids.d.ts

@@ -0,0 +1,17 @@
+export declare const PHI_BUILDER_RUNTIME_MODULE_ID: "@phis/ui/modules/builder";
+export declare const PHI_BUILDER_RUNTIME_DATA_PROVIDER_KEYS: {
+    readonly forms: `${string}/${string}`;
+    readonly builderPages: `${string}/${string}`;
+    readonly areaRootRoute: `${string}/${string}`;
+    readonly landingPage: `${string}/${string}`;
+    readonly builderNavigationSets: `${string}/${string}`;
+    readonly runtimeModules: `${string}/${string}`;
+    readonly runtimeModulesTable: `${string}/${string}`;
+    readonly signalSenders: `${string}/${string}`;
+    readonly signalSenderCapabilities: `${string}/${string}`;
+    readonly signalReceivers: `${string}/${string}`;
+    readonly signalReceiverCapabilities: `${string}/${string}`;
+    readonly signalRoutesTable: `${string}/${string}`;
+    readonly navigationTable: `${string}/${string}`;
+    readonly pageSourceTree: `${string}/${string}`;
+};

package/plugins/runtime-modules/builder/ids.js

@@ -0,0 +1,25 @@
+import { PHI_SHARED_PACKAGE_NAME } from "../../../types/signals";
+import { createPhiSharedRuntimeDataProviderKey } from "../../../constants/runtime-data-provider-key";
+export const PHI_BUILDER_RUNTIME_MODULE_ID = `${PHI_SHARED_PACKAGE_NAME}/modules/builder`;
+export const PHI_BUILDER_RUNTIME_DATA_PROVIDER_KEYS = {
+    forms: createPhiSharedRuntimeDataProviderKey("options", "forms"),
+    builderPages: createPhiSharedRuntimeDataProviderKey("options", "builder-pages"),
+    areaRootRoute: createPhiSharedRuntimeDataProviderKey("options", "builder-area-root-route"),
+    landingPage: createPhiSharedRuntimeDataProviderKey("options", "builder-landing-page"),
+    builderNavigationSets: createPhiSharedRuntimeDataProviderKey("options", "builder-navigation-sets"),
+    runtimeModules: createPhiSharedRuntimeDataProviderKey("options", "runtime-modules"),
+    runtimeModulesTable: createPhiSharedRuntimeDataProviderKey("tables", "runtime-modules"),
+    /*
+     * The four Signal wiring selects cascade: the capabilities offered depend on the endpoint chosen
+     * before them, and the receiver capabilities additionally have to match the sender output. The chosen
+     * values reach these providers through the wiring session in the Builder workspace store, which the
+     * Builder controller keeps in step with the form.
+     */
+    signalSenders: createPhiSharedRuntimeDataProviderKey("options", "builder-signal-senders"),
+    signalSenderCapabilities: createPhiSharedRuntimeDataProviderKey("options", "builder-signal-sender-capabilities"),
+    signalReceivers: createPhiSharedRuntimeDataProviderKey("options", "builder-signal-receivers"),
+    signalReceiverCapabilities: createPhiSharedRuntimeDataProviderKey("options", "builder-signal-receiver-capabilities"),
+    signalRoutesTable: createPhiSharedRuntimeDataProviderKey("tables", "builder-signal-routes"),
+    navigationTable: createPhiSharedRuntimeDataProviderKey("tables", "builder-navigation"),
+    pageSourceTree: createPhiSharedRuntimeDataProviderKey("trees", "builder-page-source"),
+};

package/plugins/runtime-modules/builder/inspector-actions.d.ts

@@ -0,0 +1,31 @@
+import { type PhiShadow } from "../../../types/layout-style";
+export type PhiBuilderInspectorAction = {
+    kind: "patchSelectedRegionDraft";
+    patch: Record<string, unknown>;
+} | {
+    kind: "patchSelectedWidgetConfig";
+    patch: Record<string, unknown>;
+} | {
+    kind: "patchSelectedWidgetGeometry";
+    geometry: Record<string, unknown>;
+} | {
+    kind: "patchSelectedLayoutAnchor";
+    selectedLayoutAnchor: string;
+} | {
+    kind: "patchSelectedLayoutPadding";
+    padding: Record<string, unknown> | null;
+} | {
+    kind: "patchSelectedLayoutBackground";
+    background: unknown;
+} | {
+    kind: "patchSelectedLayoutBorder";
+    border: unknown;
+} | {
+    kind: "patchSelectedLayoutShadow";
+    shadow: PhiShadow;
+} | {
+    kind: "patchSelectedLayoutConfig";
+    key: string;
+    value?: unknown;
+};
+export declare function readPhiBuilderInspectorAction(value: unknown): PhiBuilderInspectorAction | null;

package/plugins/runtime-modules/builder/inspector-actions.js

@@ -0,0 +1,51 @@
+import { readPhiShadow } from "../../../types/layout-style";
+function isRecord(value) {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function readRecord(value) {
+    return isRecord(value) ? value : null;
+}
+export function readPhiBuilderInspectorAction(value) {
+    if (!isRecord(value) || typeof value.kind !== "string") {
+        return null;
+    }
+    if (value.kind === "patchSelectedRegionDraft") {
+        const patch = readRecord(value.patch);
+        return patch ? { kind: value.kind, patch } : null;
+    }
+    if (value.kind === "patchSelectedWidgetConfig") {
+        const patch = readRecord(value.patch);
+        return patch ? { kind: value.kind, patch } : null;
+    }
+    if (value.kind === "patchSelectedWidgetGeometry") {
+        const geometry = readRecord(value.geometry);
+        return geometry ? { kind: value.kind, geometry } : null;
+    }
+    if (value.kind === "patchSelectedLayoutAnchor") {
+        return typeof value.selectedLayoutAnchor === "string"
+            ? { kind: value.kind, selectedLayoutAnchor: value.selectedLayoutAnchor }
+            : null;
+    }
+    if (value.kind === "patchSelectedLayoutPadding") {
+        const padding = value.padding == null ? null : readRecord(value.padding);
+        return value.padding == null || padding ? { kind: value.kind, padding } : null;
+    }
+    if (value.kind === "patchSelectedLayoutBackground") {
+        return { kind: value.kind, background: value.background };
+    }
+    if (value.kind === "patchSelectedLayoutBorder") {
+        return { kind: value.kind, border: value.border };
+    }
+    if (value.kind === "patchSelectedLayoutShadow") {
+        return {
+            kind: value.kind,
+            shadow: readPhiShadow(value.shadow) ?? "none",
+        };
+    }
+    if (value.kind === "patchSelectedLayoutConfig") {
+        return typeof value.key === "string"
+            ? { kind: value.kind, key: value.key, value: value.value }
+            : null;
+    }
+    return null;
+}

package/plugins/runtime-modules/builder/inspector-controller.d.ts

@@ -0,0 +1,3 @@
+import type { PhiBuilderInspectorAction } from "./inspector-actions";
+import type { PhiDeveloperBuilderArea } from "./developer-workspace-types";
+export declare function runPhiDeveloperBuilderInspectorAction(defaultArea: PhiDeveloperBuilderArea, action: PhiBuilderInspectorAction): void;