@phis/ui 0.1.0

package/components/widgets/client/shared/phi-table-provider.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, createElement, useCallback, useContext, useMemo, } from "react";
+import { isPhiRuntimeDataProviderKey, } from "../../../../types/runtime-data-provider";
+const EMPTY_TABLE_PROVIDER_REGISTRY = new Map();
+const PhiTableProviderRegistryContext = createContext(EMPTY_TABLE_PROVIDER_REGISTRY);
+export function createPhiTableProviderClient(registration) {
+    if (!isPhiRuntimeDataProviderKey(registration.key)) {
+        throw new Error(`Invalid table provider key "${registration.key}".`);
+    }
+    assertPhiTableProviderRegistration(registration);
+    return function PhiBoundTableProviderClient({ children }) {
+        return (_jsx(PhiTableProviderClient, { registration: registration, children: children }));
+    };
+}
+export function PhiTableProviderClient({ registration, children, }) {
+    const parent = useContext(PhiTableProviderRegistryContext);
+    const registry = useMemo(() => {
+        if (!isPhiRuntimeDataProviderKey(registration.key)) {
+            throw new Error(`Invalid table provider key "${registration.key}".`);
+        }
+        assertPhiTableProviderRegistration(registration);
+        if (parent.has(registration.key)) {
+            throw new Error(`Duplicate active table provider "${registration.key}".`);
+        }
+        const next = new Map(parent);
+        next.set(registration.key, registration);
+        return next;
+    }, [parent, registration]);
+    return createElement(PhiTableProviderRegistryContext.Provider, { value: registry }, children);
+}
+export function PhiTableProviderIsolationBoundary({ children }) {
+    return createElement(PhiTableProviderRegistryContext.Provider, { value: EMPTY_TABLE_PROVIDER_REGISTRY }, children);
+}
+function assertPhiTableProviderRegistration(registration) {
+    if (registration.resources.length === 0) {
+        throw new Error(`Table provider "${registration.key}" has no resources.`);
+    }
+    const keys = new Set();
+    for (const resource of registration.resources) {
+        if (!resource.resourceKey.trim() || keys.has(resource.resourceKey)) {
+            throw new Error(`Table provider "${registration.key}" has an empty or duplicate resource key.`);
+        }
+        keys.add(resource.resourceKey);
+    }
+}
+export function usePhiTableProvider(source) {
+    const registry = useContext(PhiTableProviderRegistryContext);
+    const provider = source ? registry.get(source.providerKey) ?? null : null;
+    const resource = provider?.resources.find((candidate) => candidate.resourceKey === source?.resourceKey) ?? null;
+    return {
+        provider,
+        resource,
+        bindingError: !source
+            ? "Table data provider is not configured."
+            : !provider
+                ? `Table provider "${source.providerKey}" is not available from the active runtime modules.`
+                : !resource
+                    ? `Table resource "${source.resourceKey}" is not declared by provider "${source.providerKey}".`
+                    : null,
+    };
+}
+export function usePhiTableProviderMutation(source) {
+    const { provider, resource, bindingError } = usePhiTableProvider(source);
+    return useCallback(async (value) => {
+        if (bindingError || !provider || !source) {
+            throw new Error(bindingError ?? "Table provider is unavailable.");
+        }
+        if (!provider.mutate) {
+            throw new Error(`Table provider "${source.providerKey}" is read-only.`);
+        }
+        if (!resource?.actions?.some((action) => action.key === value.actionKey)) {
+            throw new Error(`Table action "${value.actionKey}" is not declared by resource "${source.resourceKey}".`);
+        }
+        const abortController = new AbortController();
+        return provider.mutate({
+            ...value,
+            kind: "action",
+            resourceKey: source.resourceKey,
+            params: source.params,
+            query: value.query ?? {},
+            signal: abortController.signal,
+        });
+    }, [bindingError, provider, resource, source]);
+}

package/components/widgets/client/shared/phi-tree-provider.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentType, type ReactNode } from "react";
+import { type PhiRuntimeDataProviderKey } from "../../../../types/runtime-data-provider";
+import type { PhiTreeProviderMutationRequest, PhiTreeProviderMutationResult, PhiTreeProviderQueryRequest, PhiTreeProviderQueryResult, PhiTreeProviderResourceDescriptor, PhiTreeSourceBinding } from "../../../../types/tree-widget";
+export type PhiTreeProviderRegistration = {
+    key: PhiRuntimeDataProviderKey;
+    resources: readonly PhiTreeProviderResourceDescriptor[];
+    query: (request: PhiTreeProviderQueryRequest) => Promise<PhiTreeProviderQueryResult>;
+    mutate?: (request: PhiTreeProviderMutationRequest) => Promise<PhiTreeProviderMutationResult>;
+};
+export declare function createPhiTreeProviderClient(registration: PhiTreeProviderRegistration): ComponentType<{
+    children: ReactNode;
+}>;
+export declare function PhiTreeProviderClient({ registration, children, }: {
+    registration: PhiTreeProviderRegistration;
+    children: ReactNode;
+}): import("react").FunctionComponentElement<import("react").ProviderProps<ReadonlyMap<`${string}/${string}`, PhiTreeProviderRegistration>>>;
+export declare function PhiTreeProviderIsolationBoundary({ children }: {
+    children: ReactNode;
+}): import("react").FunctionComponentElement<import("react").ProviderProps<ReadonlyMap<`${string}/${string}`, PhiTreeProviderRegistration>>>;
+export declare function usePhiTreeProvider(source: PhiTreeSourceBinding | null): {
+    provider: PhiTreeProviderRegistration | null;
+    resource: PhiTreeProviderResourceDescriptor | null;
+    bindingError: string | null;
+};

package/components/widgets/client/shared/phi-tree-provider.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, createElement, useContext, useMemo, } from "react";
+import { isPhiRuntimeDataProviderKey, } from "../../../../types/runtime-data-provider";
+const EMPTY_TREE_PROVIDER_REGISTRY = new Map();
+const PhiTreeProviderRegistryContext = createContext(EMPTY_TREE_PROVIDER_REGISTRY);
+export function createPhiTreeProviderClient(registration) {
+    assertPhiTreeProviderRegistration(registration);
+    return function PhiBoundTreeProviderClient({ children }) {
+        return _jsx(PhiTreeProviderClient, { registration: registration, children: children });
+    };
+}
+export function PhiTreeProviderClient({ registration, children, }) {
+    const parent = useContext(PhiTreeProviderRegistryContext);
+    const registry = useMemo(() => {
+        assertPhiTreeProviderRegistration(registration);
+        if (parent.has(registration.key)) {
+            throw new Error(`Duplicate active Tree provider "${registration.key}".`);
+        }
+        const next = new Map(parent);
+        next.set(registration.key, registration);
+        return next;
+    }, [parent, registration]);
+    return createElement(PhiTreeProviderRegistryContext.Provider, { value: registry }, children);
+}
+export function PhiTreeProviderIsolationBoundary({ children }) {
+    return createElement(PhiTreeProviderRegistryContext.Provider, { value: EMPTY_TREE_PROVIDER_REGISTRY }, children);
+}
+function assertPhiTreeProviderRegistration(registration) {
+    if (!isPhiRuntimeDataProviderKey(registration.key)) {
+        throw new Error(`Invalid Tree provider key "${registration.key}".`);
+    }
+    if (!registration.resources.length) {
+        throw new Error(`Tree provider "${registration.key}" has no resources.`);
+    }
+    const keys = new Set();
+    for (const resource of registration.resources) {
+        if (!resource.resourceKey.trim() || keys.has(resource.resourceKey)) {
+            throw new Error(`Tree provider "${registration.key}" has an empty or duplicate resource key.`);
+        }
+        keys.add(resource.resourceKey);
+    }
+}
+export function usePhiTreeProvider(source) {
+    const registry = useContext(PhiTreeProviderRegistryContext);
+    const provider = source ? registry.get(source.providerKey) ?? null : null;
+    const resource = provider?.resources.find((candidate) => candidate.resourceKey === source?.resourceKey) ?? null;
+    return {
+        provider,
+        resource,
+        bindingError: !source
+            ? "Tree data provider is not configured."
+            : !provider
+                ? `Tree provider "${source.providerKey}" is not available from the active runtime modules.`
+                : !resource
+                    ? `Tree resource "${source.resourceKey}" is not declared by provider "${source.providerKey}".`
+                    : null,
+    };
+}

package/components/widgets/client/shared/phi-widget-icon-picker.d.ts

@@ -0,0 +1,3 @@
+import { type PhiIconPickerControlProps } from "../../../controls/phi-icon-picker-control";
+export type PhiWidgetIconPickerButtonProps = Omit<PhiIconPickerControlProps, "getPopupContainer" | "rootClassName" | "onOpenChange"> & Pick<PhiIconPickerControlProps, "getPopupContainer">;
+export declare function PhiWidgetIconPickerButton({ getPopupContainer, ...props }: PhiWidgetIconPickerButtonProps): import("react").JSX.Element;

package/components/widgets/client/shared/phi-widget-icon-picker.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PhiIconPickerControl, } from "../../../controls/phi-icon-picker-control";
+import { usePhiWidgetScaffoldPopup } from "./phi-widget-scaffold-popup";
+export function PhiWidgetIconPickerButton({ getPopupContainer, ...props }) {
+    const popup = usePhiWidgetScaffoldPopup();
+    return (_jsx(PhiIconPickerControl, { ...props, getPopupContainer: getPopupContainer ?? popup.getPopupContainer, rootClassName: popup.rootClassName, onOpenChange: popup.setOpen }));
+}

package/components/widgets/client/shared/phi-widget-image-tool-button.d.ts

@@ -0,0 +1,30 @@
+import type { PhiImageAssetVariantKeyValue, PhiMediaAssetTile } from "../../../../types/media";
+import type { PhiCmsInstanceId } from "../../../../types/cms-instance-id";
+import type { PhiCssLength } from "../../../../types/length";
+type PhiWidgetImageToolButtonCommonPatch = {
+    trusted?: boolean;
+    overrideSize?: boolean;
+    width?: PhiCssLength;
+    height?: PhiCssLength;
+    blurDataUrl?: string;
+};
+export type PhiWidgetImageToolButtonPatch = PhiWidgetImageToolButtonCommonPatch & ({
+    sourceKind: "asset";
+    assetId: number;
+    variantKey?: PhiImageAssetVariantKeyValue | null;
+    variantVersion?: number | null;
+} | {
+    sourceKind: "url";
+    sourceUrl?: string;
+});
+export declare function PhiInternalAssetReferencePickerButton({ blockId, ariaLabel, onSelect, onClear, }: {
+    blockId: PhiCmsInstanceId;
+    ariaLabel?: string;
+    onSelect: (asset: PhiMediaAssetTile) => void;
+    onClear?: () => void;
+}): import("react").JSX.Element;
+export declare function PhiWidgetImageToolButton({ blockId, onChange, }: {
+    blockId: PhiCmsInstanceId;
+    onChange: (patch: PhiWidgetImageToolButtonPatch) => void;
+}): import("react").JSX.Element;
+export {};

package/components/widgets/client/shared/phi-widget-image-tool-button.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PictureOutlined } from "@ant-design/icons";
+import { PhiImageAssetVariantKey, PhiMediaKind, } from "../../../../constants/media";
+import { PhiMediaPickerBinding } from "../../../media/phi-media-picker-binding";
+import { PHI_MEDIA_WIDGET_DEFAULT_LABELS } from "../../../media/media-widget-labels";
+import { PHI_SEARCH_WIDGET_DEFAULT_LABELS } from "../../label-types/search";
+import { usePhiWidgetScaffoldPopup } from "./phi-widget-scaffold-popup";
+import { PhiButtonControl } from "../../../controls/phi-button-control";
+import { createPhiMediaPickerAssetControllerRoutes } from "../../../media/asset-controller-routes";
+export function PhiInternalAssetReferencePickerButton({ blockId, ariaLabel = "Select image", onSelect, onClear, }) {
+    const popup = usePhiWidgetScaffoldPopup();
+    return (_jsx(PhiMediaPickerBinding, { labels: PHI_MEDIA_WIDGET_DEFAULT_LABELS, searchLabels: PHI_SEARCH_WIDGET_DEFAULT_LABELS, config: {
+            mediaType: PhiMediaKind.Image,
+            pageSize: 12,
+            showPagination: true,
+            showGroupFilter: true,
+            showSearchBar: true,
+            signalRoutes: createPhiMediaPickerAssetControllerRoutes(`internal-asset-reference-${blockId}`, "area"),
+        }, getPopupContainer: popup.getPopupContainer, popupRootClassName: popup.rootClassName, onPopupOpenChange: popup.setOpen, trigger: _jsx("span", { style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", icon: _jsx(PictureOutlined, {}), ariaLabel: ariaLabel, style: { width: 24, minWidth: 24, height: 24, padding: 0 }, onClick: () => undefined }) }), onAssetSelect: onSelect, onAssetClear: onClear }));
+}
+export function PhiWidgetImageToolButton({ blockId, onChange, }) {
+    const selectAsset = (asset) => {
+        onChange({
+            sourceKind: "asset",
+            assetId: asset.id,
+            variantKey: PhiImageAssetVariantKey.Card,
+            variantVersion: asset.variantVersion ?? null,
+            trusted: false,
+            overrideSize: false,
+            width: undefined,
+            height: undefined,
+            blurDataUrl: asset.blurDataUrl ?? undefined,
+        });
+    };
+    return (_jsx(PhiInternalAssetReferencePickerButton, { blockId: blockId, onSelect: selectAsset, onClear: () => {
+            onChange({
+                sourceKind: "url",
+                sourceUrl: undefined,
+                overrideSize: false,
+                width: undefined,
+                height: undefined,
+                blurDataUrl: undefined,
+            });
+        } }));
+}

package/components/widgets/client/shared/phi-widget-scaffold-popup.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export declare const PHI_WIDGET_SCAFFOLD_POPUP_CLASS_NAME = "phi-builder-widget-scaffold__popup";
+declare function getPhiWidgetScaffoldPopupContainer(triggerNode: HTMLElement): HTMLElement;
+export declare function PhiWidgetScaffoldPopupProvider({ children, onOpenChange, }: {
+    children: ReactNode;
+    onOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element;
+export declare function usePhiWidgetScaffoldPopup(): {
+    getPopupContainer: typeof getPhiWidgetScaffoldPopupContainer;
+    rootClassName: string;
+    setOpen: (open: boolean) => void;
+};
+export {};

package/components/widgets/client/shared/phi-widget-scaffold-popup.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef } from "react";
+export const PHI_WIDGET_SCAFFOLD_POPUP_CLASS_NAME = "phi-builder-widget-scaffold__popup";
+const PhiWidgetScaffoldPopupContext = createContext(null);
+function getPhiWidgetScaffoldPopupContainer(triggerNode) {
+    const rootNode = triggerNode.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+        return rootNode.querySelector('[data-phi-root-layout="true"]')
+            ?? triggerNode.parentElement
+            ?? triggerNode;
+    }
+    return document.body;
+}
+export function PhiWidgetScaffoldPopupProvider({ children, onOpenChange, }) {
+    const openPopupIdsRef = useRef(new Set());
+    const setPopupOpen = useCallback((popupId, open) => {
+        const openPopupIds = openPopupIdsRef.current;
+        if (open) {
+            openPopupIds.add(popupId);
+        }
+        else {
+            openPopupIds.delete(popupId);
+        }
+        onOpenChange(openPopupIds.size > 0);
+    }, [onOpenChange]);
+    const value = useMemo(() => ({ setPopupOpen }), [setPopupOpen]);
+    useEffect(() => () => {
+        openPopupIdsRef.current.clear();
+    }, []);
+    return (_jsx(PhiWidgetScaffoldPopupContext.Provider, { value: value, children: children }));
+}
+export function usePhiWidgetScaffoldPopup() {
+    const context = useContext(PhiWidgetScaffoldPopupContext);
+    const popupId = useId();
+    const setOpen = useCallback((open) => {
+        context?.setPopupOpen(popupId, open);
+    }, [context, popupId]);
+    useEffect(() => () => {
+        context?.setPopupOpen(popupId, false);
+    }, [context, popupId]);
+    return useMemo(() => ({
+        getPopupContainer: getPhiWidgetScaffoldPopupContainer,
+        rootClassName: PHI_WIDGET_SCAFFOLD_POPUP_CLASS_NAME,
+        setOpen,
+    }), [setOpen]);
+}

package/components/widgets/client/shared/phi-widget-tool-buttons.d.ts

@@ -0,0 +1,37 @@
+import type { PhiWidgetFontFamilyKey, PhiWidgetFontSizeKey } from "../../../../types/site-theme";
+import type { PhiCmsInstanceId } from "../../../../types/cms-instance-id";
+export type PhiWidgetIconToolButtonProps = {
+    value?: string | null;
+    ariaLabel?: string;
+    onChange: (value: string | null) => void;
+};
+export declare function PhiWidgetIconToolButton({ value, ariaLabel, onChange, }: PhiWidgetIconToolButtonProps): import("react").JSX.Element;
+export type PhiWidgetColorToolButtonProps = {
+    value?: string | null;
+    ariaLabel?: string;
+    onChange: (color: string | null) => void;
+};
+export declare function PhiWidgetColorToolButton({ value, ariaLabel, onChange, }: PhiWidgetColorToolButtonProps): import("react").JSX.Element;
+export type PhiWidgetTypographyToolButtonProps = {
+    fontFamily?: PhiWidgetFontFamilyKey | null;
+    fontSize?: PhiWidgetFontSizeKey | null;
+    defaultFontSize?: PhiWidgetFontSizeKey;
+    ariaLabel?: string;
+    onChange: (patch: {
+        fontFamily?: PhiWidgetFontFamilyKey | null;
+        fontSize?: PhiWidgetFontSizeKey | null;
+    }) => void;
+};
+export declare function PhiWidgetTypographyToolButton({ fontFamily, fontSize, defaultFontSize, ariaLabel, onChange, }: PhiWidgetTypographyToolButtonProps): import("react").JSX.Element;
+export type PhiHtmlWidgetToolbarToolsProps = {
+    blockId: PhiCmsInstanceId;
+};
+export declare function PhiHtmlWidgetToolbarTools({ blockId, }: PhiHtmlWidgetToolbarToolsProps): import("react").JSX.Element;
+export declare function PhiMarkdownWidgetToolbarTools({ blockId, }: {
+    blockId: PhiCmsInstanceId;
+}): import("react").JSX.Element;
+export type PhiDescriptionWidgetItemsToolButtonProps = {
+    value?: string[] | null;
+    onChange: (value: string[]) => void;
+};
+export declare function PhiDescriptionWidgetItemsToolButton({ value, onChange, }: PhiDescriptionWidgetItemsToolButtonProps): import("react").JSX.Element;

package/components/widgets/client/shared/phi-widget-tool-buttons.js

@@ -0,0 +1,208 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { AlignCenterOutlined, AlignLeftOutlined, AlignRightOutlined, BgColorsOutlined, FontSizeOutlined, FormatPainterOutlined, LinkOutlined, MenuOutlined, } from "@ant-design/icons";
+import { formatUrl } from "@lexical/link";
+import { Flex, Typography } from "antd";
+import { createPhiAssetUri, createPhiPageUri } from "../../../../types/references";
+import { PhiBuilderPageReferencePicker } from "../../../../plugins/runtime-modules/builder/page-reference-picker";
+import { PHI_ICON_PICKER_CONTROL_DEFAULT_LABELS } from "../../../controls/phi-icon-picker-labels";
+import { PhiButtonControl } from "../../../controls/phi-button-control";
+import { PhiCheckboxControl } from "../../../controls/phi-checkbox-control";
+import { PhiNumberControl } from "../../../controls/phi-number-control";
+import { PhiPopoverControl } from "../../../controls/phi-popover-control";
+import { PhiSelectControl } from "../../../controls/phi-select-control";
+import { PhiTextControl } from "../../../controls/phi-text-control";
+import { PhiWidgetIconPickerButton } from "./phi-widget-icon-picker";
+import { PHI_HTML_WIDGET_EDITOR_EMPTY_STATE, resolvePhiHtmlWidgetEditorBridge, subscribePhiHtmlWidgetEditorBridge, } from "../html-editor-bridge";
+import { PhiColorWidget } from "../phi-color-widget";
+import { resolvePhiMarkdownWidgetEditorBridge, subscribePhiMarkdownWidgetEditorBridge, } from "../markdown-editor-bridge";
+import { usePhiWidgetScaffoldPopup } from "./phi-widget-scaffold-popup";
+import { PhiInternalAssetReferencePickerButton } from "./phi-widget-image-tool-button";
+import { PHI_Z_INDEX } from "../../../../theme/phi-tokens";
+function stopOverlayEvent(event) {
+    event.stopPropagation();
+}
+function stopOverlayMouseEvent(event) {
+    event.stopPropagation();
+}
+function preserveEditorSelectionMouseEvent(event) {
+    event.preventDefault?.();
+    event.stopPropagation();
+}
+const PHI_WIDGET_OVERLAY_Z_INDEX = PHI_Z_INDEX.authoringPopup;
+const PHI_HTML_WIDGET_TOOL_POPUP_Z_INDEX = PHI_Z_INDEX.authoringPopupNested;
+function resolveExternalOrFragmentLink(value) {
+    const normalized = value.trim();
+    if (!normalized)
+        return null;
+    if (normalized.startsWith("#"))
+        return normalized;
+    if (/^(?:\/|\.\/|\.\.\/|phis:)/iu.test(normalized))
+        return null;
+    const formatted = formatUrl(normalized);
+    try {
+        const url = new URL(formatted);
+        return ["http:", "https:", "mailto:", "sms:", "tel:"].includes(url.protocol)
+            ? formatted
+            : null;
+    }
+    catch {
+        return null;
+    }
+}
+export function PhiWidgetIconToolButton({ value, ariaLabel = "Widget icon", onChange, }) {
+    return (_jsx(PhiWidgetIconPickerButton, { value: value ?? null, buttonAriaLabel: ariaLabel, labels: PHI_ICON_PICKER_CONTROL_DEFAULT_LABELS, onChange: onChange }));
+}
+export function PhiWidgetColorToolButton({ value, ariaLabel = "Widget color", onChange, }) {
+    const currentColor = typeof value === "string" && value.trim().length > 0 ? value : undefined;
+    const popup = usePhiWidgetScaffoldPopup();
+    return (_jsx(PhiColorWidget, { value: currentColor, defaultValue: currentColor ?? "#1677ff", signalsEnabled: false, allowClear: true, getPopupContainer: popup.getPopupContainer, popupClassName: popup.rootClassName, onOpenChange: popup.setOpen, renderPanel: (panel) => (_jsx("div", { onClick: stopOverlayEvent, onMouseDown: preserveEditorSelectionMouseEvent, onPointerDown: stopOverlayEvent, onKeyDown: stopOverlayEvent, children: panel })), onChange: (css) => {
+            onChange(css);
+        }, onClear: () => {
+            onChange(null);
+        }, children: _jsx("span", { onMouseDown: preserveEditorSelectionMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: ariaLabel, icon: _jsx(BgColorsOutlined, { style: currentColor ? { color: currentColor } : undefined }), onClick: () => undefined }) }) }));
+}
+const PHI_FONT_FAMILY_OPTIONS = [
+    { value: "inherit", label: "Inherit" },
+    { value: "system", label: "System" },
+    { value: "body", label: "Body" },
+    { value: "mono", label: "Mono" },
+    { value: "serif", label: "Serif" },
+    { value: "accent", label: "Accent" },
+    { value: "display", label: "Display" },
+];
+const PHI_FONT_SIZE_OPTIONS = [
+    { value: "inherit", label: "Inherit" },
+    { value: "xs", label: "XS" },
+    { value: "sm", label: "SM" },
+    { value: "base", label: "Base" },
+    { value: "lg", label: "LG" },
+    { value: "xl", label: "XL" },
+];
+export function PhiWidgetTypographyToolButton({ fontFamily, fontSize, defaultFontSize = "inherit", ariaLabel = "Widget typography", onChange, }) {
+    const currentFontFamily = fontFamily ?? "inherit";
+    const currentFontSize = fontSize ?? defaultFontSize;
+    const popup = usePhiWidgetScaffoldPopup();
+    return (_jsx(PhiPopoverControl, { trigger: "click", placement: "bottomRight", getPopupContainer: popup.getPopupContainer, rootClassName: popup.rootClassName, onOpenChange: popup.setOpen, zIndex: PHI_Z_INDEX.authoringPopup, content: _jsxs(Flex, { vertical: true, gap: 8, style: { minWidth: 220 }, onClick: stopOverlayEvent, onMouseDown: stopOverlayMouseEvent, onPointerDown: stopOverlayEvent, children: [_jsxs("label", { children: [_jsx(Typography.Text, { style: { display: "block", marginBottom: 4 }, children: "Font" }), _jsx(PhiSelectControl, { value: currentFontFamily, options: PHI_FONT_FAMILY_OPTIONS, getPopupContainer: popup.getPopupContainer, popupRootClassName: popup.rootClassName, popupZIndex: PHI_Z_INDEX.authoringPopupNested, onChange: (nextValue) => {
+                                onChange({
+                                    fontFamily: nextValue,
+                                });
+                            }, style: { width: "100%" } })] }), _jsxs("label", { children: [_jsx(Typography.Text, { style: { display: "block", marginBottom: 4 }, children: "Size" }), _jsx(PhiSelectControl, { value: currentFontSize, options: PHI_FONT_SIZE_OPTIONS, getPopupContainer: popup.getPopupContainer, popupRootClassName: popup.rootClassName, popupZIndex: PHI_Z_INDEX.authoringPopupNested, onChange: (nextValue) => {
+                                onChange({
+                                    fontSize: nextValue,
+                                });
+                            }, style: { width: "100%" } })] })] }), children: _jsx("span", { onMouseDown: stopOverlayMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: ariaLabel, icon: _jsx(FontSizeOutlined, {}), onClick: () => undefined }) }) }));
+}
+const PHI_HTML_WIDGET_BLOCK_OPTIONS = [
+    { value: "paragraph", label: "P" },
+    { value: "h1", label: "H1" },
+    { value: "h2", label: "H2" },
+    { value: "h3", label: "H3" },
+    { value: "bullet", label: "UL" },
+    { value: "number", label: "OL" },
+];
+const PHI_HTML_WIDGET_ALIGNMENT_OPTIONS = [
+    { value: "left", label: "Align left", icon: _jsx(AlignLeftOutlined, {}) },
+    { value: "center", label: "Align center", icon: _jsx(AlignCenterOutlined, {}) },
+    { value: "right", label: "Align right", icon: _jsx(AlignRightOutlined, {}) },
+    { value: "justify", label: "Justify", icon: _jsx(MenuOutlined, {}) },
+];
+function resolvePhiHtmlWidgetAlignmentIcon(alignment) {
+    return PHI_HTML_WIDGET_ALIGNMENT_OPTIONS.find((option) => option.value === alignment)?.icon ?? _jsx(AlignLeftOutlined, {});
+}
+const PHI_HTML_WIDGET_STYLE_TOGGLES = [
+    { key: "bold", format: "bold", label: "Bold" },
+    { key: "italic", format: "italic", label: "Italic" },
+    { key: "underline", format: "underline", label: "Underline" },
+    { key: "strike", format: "strikethrough", label: "Strike" },
+    { key: "code", format: "code", label: "Code" },
+];
+function usePhiHtmlWidgetEditorState(blockId) {
+    const [state, setState] = useState(() => resolvePhiHtmlWidgetEditorBridge(blockId)?.getState() ?? null);
+    useEffect(() => {
+        return subscribePhiHtmlWidgetEditorBridge(blockId, setState);
+    }, [blockId]);
+    return {
+        bridge: resolvePhiHtmlWidgetEditorBridge(blockId),
+        state,
+    };
+}
+export function PhiHtmlWidgetToolbarTools({ blockId, }) {
+    const { bridge, state } = usePhiHtmlWidgetEditorState(blockId);
+    const blockPopup = usePhiWidgetScaffoldPopup();
+    const alignmentPopup = usePhiWidgetScaffoldPopup();
+    const stylePopup = usePhiWidgetScaffoldPopup();
+    const linkPopup = usePhiWidgetScaffoldPopup();
+    const [linkPopoverOpen, setLinkPopoverOpen] = useState(false);
+    const [linkDraft, setLinkDraft] = useState("");
+    const hasActiveTextStyle = Boolean(state?.bold || state?.italic || state?.underline || state?.strike || state?.code);
+    const handleLinkPopoverOpenChange = (open) => {
+        setLinkPopoverOpen(open);
+        linkPopup.setOpen(open);
+        if (open) {
+            setLinkDraft(state?.linkUrl ?? "");
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("span", { onClick: stopOverlayEvent, onMouseDown: stopOverlayMouseEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex", minWidth: 84 }, children: _jsx(PhiSelectControl, { size: "small", value: state?.blockType ?? PHI_HTML_WIDGET_EDITOR_EMPTY_STATE.blockType, options: PHI_HTML_WIDGET_BLOCK_OPTIONS, disabled: !bridge, popupMatchSelectWidth: false, getPopupContainer: blockPopup.getPopupContainer, popupRootClassName: blockPopup.rootClassName, popupZIndex: PHI_HTML_WIDGET_TOOL_POPUP_Z_INDEX, onOpenChange: blockPopup.setOpen, onChange: (value) => {
+                        bridge?.setBlockType(value);
+                    }, style: { minWidth: 84 } }) }), _jsx(PhiPopoverControl, { trigger: "click", placement: "bottomRight", getPopupContainer: alignmentPopup.getPopupContainer, rootClassName: alignmentPopup.rootClassName, onOpenChange: alignmentPopup.setOpen, zIndex: PHI_WIDGET_OVERLAY_Z_INDEX, content: _jsx(Flex, { gap: 4, onClick: stopOverlayEvent, onMouseDown: preserveEditorSelectionMouseEvent, onPointerDown: stopOverlayEvent, children: PHI_HTML_WIDGET_ALIGNMENT_OPTIONS.map((option) => (_jsx(PhiButtonControl, { type: (state?.alignment ?? PHI_HTML_WIDGET_EDITOR_EMPTY_STATE.alignment) === option.value ? "primary" : "text", size: "small", ariaLabel: option.label, tooltip: option.label, icon: option.icon, disabled: !bridge, onClick: () => {
+                            bridge?.setAlignment(option.value);
+                            bridge?.focus();
+                        } }, option.value))) }), children: _jsx("span", { onMouseDown: preserveEditorSelectionMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: "Text alignment", tooltip: "Text alignment", icon: resolvePhiHtmlWidgetAlignmentIcon(state?.alignment ?? PHI_HTML_WIDGET_EDITOR_EMPTY_STATE.alignment), disabled: !bridge, onClick: () => undefined }) }) }), _jsx(PhiPopoverControl, { trigger: "click", placement: "bottomRight", getPopupContainer: stylePopup.getPopupContainer, rootClassName: stylePopup.rootClassName, onOpenChange: stylePopup.setOpen, zIndex: PHI_Z_INDEX.authoringPopup, content: _jsx(Flex, { vertical: true, gap: 8, onClick: stopOverlayEvent, onMouseDown: preserveEditorSelectionMouseEvent, onPointerDown: stopOverlayEvent, children: PHI_HTML_WIDGET_STYLE_TOGGLES.map((toggle) => (_jsx("div", { onMouseDown: preserveEditorSelectionMouseEvent, children: _jsx(PhiCheckboxControl, { checked: toggle.key === "bold"
+                                ? state?.bold
+                                : toggle.key === "italic"
+                                    ? state?.italic
+                                    : toggle.key === "underline"
+                                        ? state?.underline
+                                        : toggle.key === "strike"
+                                            ? state?.strike
+                                            : state?.code, disabled: !bridge, label: toggle.label, onChange: () => {
+                                bridge?.toggleFormat(toggle.format);
+                                bridge?.focus();
+                            } }) }, toggle.key))) }), children: _jsx("span", { onMouseDown: preserveEditorSelectionMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: hasActiveTextStyle ? "primary" : "text", size: "small", ariaLabel: "Rich text styles", icon: _jsx(FormatPainterOutlined, {}), disabled: !bridge, onClick: () => undefined }) }) }), _jsx(PhiWidgetColorToolButton, { value: state?.textColor ?? null, ariaLabel: "Rich text color", onChange: (color) => {
+                    bridge?.setTextColor(color);
+                    bridge?.focus();
+                } }), _jsx(PhiInternalAssetReferencePickerButton, { blockId: blockId, ariaLabel: "Insert Site Asset", onSelect: (asset) => {
+                    bridge?.insertImage(createPhiAssetUri(asset.id), asset.altText?.trim() || asset.title?.trim() || asset.originalName);
+                    bridge?.focus();
+                } }), _jsx(PhiPopoverControl, { open: linkPopoverOpen, trigger: "click", placement: "bottomRight", onOpenChange: handleLinkPopoverOpenChange, getPopupContainer: linkPopup.getPopupContainer, rootClassName: linkPopup.rootClassName, zIndex: PHI_WIDGET_OVERLAY_Z_INDEX, content: _jsxs(Flex, { vertical: true, gap: 8, onClick: stopOverlayEvent, onMouseDown: stopOverlayMouseEvent, onPointerDown: stopOverlayEvent, children: [_jsx(PhiBuilderPageReferencePicker, { onSelect: (selection) => {
+                                bridge?.setLink(createPhiPageUri(selection.reference));
+                                bridge?.focus();
+                                handleLinkPopoverOpenChange(false);
+                            } }), _jsx(PhiTextControl, { size: "small", value: linkDraft, placeholder: "https://example.com", onChange: (nextValue) => setLinkDraft(nextValue ?? ""), onKeyDown: stopOverlayEvent }), _jsxs(Flex, { gap: 8, justify: "space-between", children: [_jsx(PhiButtonControl, { size: "small", disabled: !bridge || !state?.linkUrl, label: "Remove", onClick: () => {
+                                        bridge?.setLink(null);
+                                        bridge?.focus();
+                                        handleLinkPopoverOpenChange(false);
+                                    } }), _jsx(PhiButtonControl, { size: "small", type: "primary", disabled: !bridge, label: "Apply", onClick: () => {
+                                        const nextUrl = resolveExternalOrFragmentLink(linkDraft);
+                                        if (!nextUrl) {
+                                            return;
+                                        }
+                                        bridge?.setLink(nextUrl);
+                                        bridge?.focus();
+                                        handleLinkPopoverOpenChange(false);
+                                    } })] })] }), children: _jsx("span", { onMouseDown: stopOverlayMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: state?.linkUrl ? "primary" : "text", size: "small", ariaLabel: "Rich text link", icon: _jsx(LinkOutlined, {}), disabled: !bridge, onClick: () => undefined }) }) })] }));
+}
+export function PhiMarkdownWidgetToolbarTools({ blockId, }) {
+    const [, setRegistryVersion] = useState(0);
+    useEffect(() => subscribePhiMarkdownWidgetEditorBridge(blockId, () => setRegistryVersion((current) => current + 1)), [blockId]);
+    const bridge = resolvePhiMarkdownWidgetEditorBridge(blockId);
+    return (_jsxs(_Fragment, { children: [_jsx(PhiBuilderPageReferencePicker, { onSelect: (selection) => {
+                    const label = selection.title.replaceAll("]", "\\]");
+                    bridge?.insert(`[${label}](${createPhiPageUri(selection.reference)})`);
+                } }), _jsx(PhiInternalAssetReferencePickerButton, { blockId: blockId, ariaLabel: "Insert Site Asset", onSelect: (asset) => {
+                    const alt = (asset.altText?.trim() || asset.title?.trim() || asset.originalName)
+                        .replaceAll("]", "\\]");
+                    bridge?.insert(`![${alt}](${createPhiAssetUri(asset.id)})`);
+                } })] }));
+}
+export function PhiDescriptionWidgetItemsToolButton({ value, onChange, }) {
+    const itemCount = Array.isArray(value) ? value.length : 0;
+    const popup = usePhiWidgetScaffoldPopup();
+    return (_jsx(PhiPopoverControl, { trigger: "click", placement: "bottomRight", getPopupContainer: popup.getPopupContainer, rootClassName: popup.rootClassName, onOpenChange: popup.setOpen, zIndex: PHI_Z_INDEX.authoringPopup, content: _jsxs(Flex, { vertical: true, gap: 8, onClick: stopOverlayEvent, onMouseDown: stopOverlayMouseEvent, onPointerDown: stopOverlayEvent, children: [_jsx(Typography.Text, { type: "secondary", children: "Items" }), _jsx(PhiNumberControl, { min: 0, max: 12, precision: 0, value: itemCount, onChange: (nextValue) => {
+                        const nextCount = Math.max(0, Math.min(12, Math.trunc(nextValue ?? 0)));
+                        const nextItems = Array.from({ length: nextCount }, (_, index) => value?.[index] ?? "");
+                        onChange(nextItems);
+                    }, onKeyDown: stopOverlayEvent })] }), children: _jsx("span", { onMouseDown: stopOverlayMouseEvent, onClick: stopOverlayEvent, onPointerDown: stopOverlayEvent, style: { display: "inline-flex" }, children: _jsx(PhiButtonControl, { type: "text", size: "small", ariaLabel: "Description items", tooltip: "Description items", label: itemCount, onClick: () => undefined }) }) }));
+}

package/components/widgets/client/stack-tabs.d.ts

@@ -0,0 +1,6 @@
+import type { PhiClientBlockBaseProps, PhiNoLabels } from "../../../types";
+import type { PhiCmsTabBarWidgetConfig } from "../config/stack-tabs";
+export type PhiTabBarWidgetClientProps = PhiClientBlockBaseProps<PhiNoLabels, PhiCmsTabBarWidgetConfig>;
+export declare function PhiTabBarWidgetClient({ config, signalsEnabled, }: PhiTabBarWidgetClientProps & {
+    signalsEnabled?: boolean;
+}): import("react").JSX.Element | null;

package/components/widgets/client/stack-tabs.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { usePhiStackChoiceController } from "./shared/phi-choice-controller";
+import { PhiTabsControl } from "../../controls/phi-tabs-control";
+function resolveTabPlacement(placement) {
+    if (placement === "left") {
+        return "start";
+    }
+    if (placement === "right") {
+        return "end";
+    }
+    return placement ?? "top";
+}
+export function PhiTabBarWidgetClient({ config, signalsEnabled = true, }) {
+    const choice = usePhiStackChoiceController({
+        config,
+        signalsEnabled,
+        typeKey: "tab-bar",
+        defaultKey: "tab",
+    });
+    const items = choice.options.map((option) => ({
+        key: option.value,
+        label: option.label,
+        children: null,
+    }));
+    const tabBarStyle = useMemo(() => {
+        const longestLabelLength = items.reduce((length, item) => Math.max(length, item.label.length), 0);
+        return {
+            margin: 0,
+            ...(config?.placement === "left" || config?.placement === "right"
+                ? { width: `max(8rem, ${longestLabelLength + 3}ch)` }
+                : {}),
+        };
+    }, [config?.placement, items]);
+    if (items.length === 0) {
+        return null;
+    }
+    return (_jsx(PhiTabsControl, { className: "phi-tab-bar", items: items, value: choice.value || undefined, size: config?.controlSize, placement: resolveTabPlacement(config?.placement), tabBarStyle: tabBarStyle, onChange: choice.publish }));
+}

package/components/widgets/client/use-table-provider-mutation.d.ts

@@ -0,0 +1 @@
+export { usePhiTableProviderMutation } from "./shared/phi-table-provider";

package/components/widgets/client/use-table-provider-mutation.js

@@ -0,0 +1,2 @@
+"use client";
+export { usePhiTableProviderMutation } from "./shared/phi-table-provider";