@phis/ui 0.1.0 → 0.2.0

package/components/shell/phi-antd-icon.js

@@ -0,0 +1,192 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement, lazy, Suspense } from "react";
+/*
+ * Every Ant Design icon a Phi icon name can stand for, one chunk each.
+ *
+ * The Button Widget resolved its icon through a switch over eighteen icons, `PhiIcon` through a registry
+ * of fourteen more, and both imported every one of them: a Landing that drew one button and one link
+ * icon preloaded all thirty-two, `next/image` and the button's whole table with them. Listed here as
+ * loaders, an icon is fetched where it is drawn; rendered on the Server it is in the HTML already, and
+ * hydration waits for its chunk rather than drawing it twice.
+ *
+ * Literal imports, not a template: a computed specifier would make the bundler emit every icon the
+ * package has.
+ */
+const PHI_ANTD_ICON_LOADERS = {
+    ApartmentOutlined: () => import("@ant-design/icons/es/icons/ApartmentOutlined"),
+    ApiOutlined: () => import("@ant-design/icons/es/icons/ApiOutlined"),
+    AppleOutlined: () => import("@ant-design/icons/es/icons/AppleOutlined"),
+    AppstoreOutlined: () => import("@ant-design/icons/es/icons/AppstoreOutlined"),
+    BranchesOutlined: () => import("@ant-design/icons/es/icons/BranchesOutlined"),
+    CheckOutlined: () => import("@ant-design/icons/es/icons/CheckOutlined"),
+    ClusterOutlined: () => import("@ant-design/icons/es/icons/ClusterOutlined"),
+    CloseOutlined: () => import("@ant-design/icons/es/icons/CloseOutlined"),
+    CloudUploadOutlined: () => import("@ant-design/icons/es/icons/CloudUploadOutlined"),
+    CodeOutlined: () => import("@ant-design/icons/es/icons/CodeOutlined"),
+    ColumnWidthOutlined: () => import("@ant-design/icons/es/icons/ColumnWidthOutlined"),
+    CustomerServiceOutlined: () => import("@ant-design/icons/es/icons/CustomerServiceOutlined"),
+    DashboardOutlined: () => import("@ant-design/icons/es/icons/DashboardOutlined"),
+    DeleteOutlined: () => import("@ant-design/icons/es/icons/DeleteOutlined"),
+    DownloadOutlined: () => import("@ant-design/icons/es/icons/DownloadOutlined"),
+    EditOutlined: () => import("@ant-design/icons/es/icons/EditOutlined"),
+    EnvironmentOutlined: () => import("@ant-design/icons/es/icons/EnvironmentOutlined"),
+    ExperimentOutlined: () => import("@ant-design/icons/es/icons/ExperimentOutlined"),
+    EyeInvisibleOutlined: () => import("@ant-design/icons/es/icons/EyeInvisibleOutlined"),
+    EyeOutlined: () => import("@ant-design/icons/es/icons/EyeOutlined"),
+    FileTextOutlined: () => import("@ant-design/icons/es/icons/FileTextOutlined"),
+    FolderAddOutlined: () => import("@ant-design/icons/es/icons/FolderAddOutlined"),
+    GithubOutlined: () => import("@ant-design/icons/es/icons/GithubOutlined"),
+    GlobalOutlined: () => import("@ant-design/icons/es/icons/GlobalOutlined"),
+    GoogleOutlined: () => import("@ant-design/icons/es/icons/GoogleOutlined"),
+    HistoryOutlined: () => import("@ant-design/icons/es/icons/HistoryOutlined"),
+    HomeOutlined: () => import("@ant-design/icons/es/icons/HomeOutlined"),
+    InfoCircleOutlined: () => import("@ant-design/icons/es/icons/InfoCircleOutlined"),
+    LinkOutlined: () => import("@ant-design/icons/es/icons/LinkOutlined"),
+    LogoutOutlined: () => import("@ant-design/icons/es/icons/LogoutOutlined"),
+    MailOutlined: () => import("@ant-design/icons/es/icons/MailOutlined"),
+    MenuOutlined: () => import("@ant-design/icons/es/icons/MenuOutlined"),
+    MessageOutlined: () => import("@ant-design/icons/es/icons/MessageOutlined"),
+    MinusOutlined: () => import("@ant-design/icons/es/icons/MinusOutlined"),
+    NotificationOutlined: () => import("@ant-design/icons/es/icons/NotificationOutlined"),
+    PictureOutlined: () => import("@ant-design/icons/es/icons/PictureOutlined"),
+    PlusOutlined: () => import("@ant-design/icons/es/icons/PlusOutlined"),
+    ProfileOutlined: () => import("@ant-design/icons/es/icons/ProfileOutlined"),
+    QuestionCircleOutlined: () => import("@ant-design/icons/es/icons/QuestionCircleOutlined"),
+    ReadOutlined: () => import("@ant-design/icons/es/icons/ReadOutlined"),
+    RedoOutlined: () => import("@ant-design/icons/es/icons/RedoOutlined"),
+    ReloadOutlined: () => import("@ant-design/icons/es/icons/ReloadOutlined"),
+    SafetyCertificateOutlined: () => import("@ant-design/icons/es/icons/SafetyCertificateOutlined"),
+    SaveOutlined: () => import("@ant-design/icons/es/icons/SaveOutlined"),
+    SendOutlined: () => import("@ant-design/icons/es/icons/SendOutlined"),
+    SearchOutlined: () => import("@ant-design/icons/es/icons/SearchOutlined"),
+    SettingOutlined: () => import("@ant-design/icons/es/icons/SettingOutlined"),
+    ShoppingOutlined: () => import("@ant-design/icons/es/icons/ShoppingOutlined"),
+    SkinOutlined: () => import("@ant-design/icons/es/icons/SkinOutlined"),
+    StarOutlined: () => import("@ant-design/icons/es/icons/StarOutlined"),
+    StopOutlined: () => import("@ant-design/icons/es/icons/StopOutlined"),
+    TableOutlined: () => import("@ant-design/icons/es/icons/TableOutlined"),
+    TeamOutlined: () => import("@ant-design/icons/es/icons/TeamOutlined"),
+    TranslationOutlined: () => import("@ant-design/icons/es/icons/TranslationOutlined"),
+    UndoOutlined: () => import("@ant-design/icons/es/icons/UndoOutlined"),
+    UserAddOutlined: () => import("@ant-design/icons/es/icons/UserAddOutlined"),
+    UserOutlined: () => import("@ant-design/icons/es/icons/UserOutlined"),
+    WindowsOutlined: () => import("@ant-design/icons/es/icons/WindowsOutlined"),
+};
+const lazyIcons = new Map();
+function readLazyIcon(icon) {
+    let Icon = lazyIcons.get(icon);
+    if (!Icon) {
+        Icon = lazy(PHI_ANTD_ICON_LOADERS[icon]);
+        lazyIcons.set(icon, Icon);
+    }
+    return Icon;
+}
+/**
+ * The names `PhiIcon` resolves to an Ant Design icon, bare or after `antd:`.
+ *
+ * The navigation and management names (`dashboard`, `team`, `translation`, ...) used to sit in a second,
+ * separately loaded registry; with every icon its own chunk there is nothing left to keep apart.
+ */
+export const PHI_ANTD_ICON_NAMES = {
+    cluster: "ClusterOutlined",
+    "cluster-outlined": "ClusterOutlined",
+    send: "SendOutlined",
+    "send-outlined": "SendOutlined",
+    home: "HomeOutlined",
+    "home-outlined": "HomeOutlined",
+    mail: "MailOutlined",
+    "mail-outlined": "MailOutlined",
+    location: "EnvironmentOutlined",
+    environment: "EnvironmentOutlined",
+    "environment-outlined": "EnvironmentOutlined",
+    global: "GlobalOutlined",
+    "global-outlined": "GlobalOutlined",
+    shopping: "ShoppingOutlined",
+    "shopping-outlined": "ShoppingOutlined",
+    star: "StarOutlined",
+    "star-outlined": "StarOutlined",
+    question: "QuestionCircleOutlined",
+    "question-circle": "QuestionCircleOutlined",
+    "question-circle-outlined": "QuestionCircleOutlined",
+    info: "InfoCircleOutlined",
+    "info-circle": "InfoCircleOutlined",
+    "info-circle-outlined": "InfoCircleOutlined",
+    logout: "LogoutOutlined",
+    "logout-outlined": "LogoutOutlined",
+    user: "UserOutlined",
+    "user-outlined": "UserOutlined",
+    google: "GoogleOutlined",
+    "google-outlined": "GoogleOutlined",
+    apple: "AppleOutlined",
+    "apple-outlined": "AppleOutlined",
+    github: "GithubOutlined",
+    "github-outlined": "GithubOutlined",
+    windows: "WindowsOutlined",
+    "windows-outlined": "WindowsOutlined",
+    apartment: "ApartmentOutlined",
+    "apartment-outlined": "ApartmentOutlined",
+    api: "ApiOutlined",
+    "api-outlined": "ApiOutlined",
+    appstore: "AppstoreOutlined",
+    "appstore-outlined": "AppstoreOutlined",
+    branches: "BranchesOutlined",
+    "branches-outlined": "BranchesOutlined",
+    check: "CheckOutlined",
+    "check-outlined": "CheckOutlined",
+    close: "CloseOutlined",
+    "close-outlined": "CloseOutlined",
+    code: "CodeOutlined",
+    "code-outlined": "CodeOutlined",
+    "column-width": "ColumnWidthOutlined",
+    "column-width-outlined": "ColumnWidthOutlined",
+    "customer-service": "CustomerServiceOutlined",
+    "customer-service-outlined": "CustomerServiceOutlined",
+    dashboard: "DashboardOutlined",
+    "dashboard-outlined": "DashboardOutlined",
+    delete: "DeleteOutlined",
+    "delete-outlined": "DeleteOutlined",
+    edit: "EditOutlined",
+    "edit-outlined": "EditOutlined",
+    download: "DownloadOutlined",
+    "download-outlined": "DownloadOutlined",
+    experiment: "ExperimentOutlined",
+    "experiment-outlined": "ExperimentOutlined",
+    file: "FileTextOutlined",
+    "file-text": "FileTextOutlined",
+    "file-search": "FileTextOutlined",
+    "file-text-outlined": "FileTextOutlined",
+    history: "HistoryOutlined",
+    "history-outlined": "HistoryOutlined",
+    menu: "MenuOutlined",
+    "menu-outlined": "MenuOutlined",
+    message: "MessageOutlined",
+    "message-outlined": "MessageOutlined",
+    notification: "NotificationOutlined",
+    "notification-outlined": "NotificationOutlined",
+    picture: "PictureOutlined",
+    "picture-outlined": "PictureOutlined",
+    plus: "PlusOutlined",
+    "plus-outlined": "PlusOutlined",
+    profile: "ProfileOutlined",
+    "profile-outlined": "ProfileOutlined",
+    read: "ReadOutlined",
+    "read-outlined": "ReadOutlined",
+    "safety-certificate": "SafetyCertificateOutlined",
+    "safety-certificate-outlined": "SafetyCertificateOutlined",
+    setting: "SettingOutlined",
+    "setting-outlined": "SettingOutlined",
+    skin: "SkinOutlined",
+    "skin-outlined": "SkinOutlined",
+    table: "TableOutlined",
+    "table-outlined": "TableOutlined",
+    team: "TeamOutlined",
+    "team-outlined": "TeamOutlined",
+    translation: "TranslationOutlined",
+    "translation-outlined": "TranslationOutlined",
+    "user-add": "UserAddOutlined",
+    "user-add-outlined": "UserAddOutlined",
+};
+export function PhiAntdIcon({ icon, size = "1em", }) {
+    return (_jsx(Suspense, { fallback: _jsx("span", { className: "anticon", "aria-hidden": "true", style: { display: "inline-flex", width: size, height: size } }), children: createElement(readLazyIcon(icon), { style: size === "1em" ? undefined : { fontSize: size } }) }));
+}

package/components/shell/phi-asset-icon.d.ts

@@ -0,0 +1,5 @@
+/** An `asset:` icon: a picture from the Site's own files, at the icon's size. */
+export declare function PhiAssetIcon({ path, size }: {
+    path: string;
+    size: number | string;
+}): import("react").JSX.Element;

package/components/shell/phi-asset-icon.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Image from "next/image";
+/** An `asset:` icon: a picture from the Site's own files, at the icon's size. */
+export function PhiAssetIcon({ path, size }) {
+    const src = path.startsWith("/") ? path : `/${path}`;
+    return typeof size === "number" ? (_jsx(Image, { src: src, alt: "", width: size, height: size, "aria-hidden": "true" })) : (_jsx("span", { "aria-hidden": "true", style: {
+            display: "inline-flex",
+            width: size,
+            height: size,
+            alignItems: "center",
+            justifyContent: "center",
+        }, children: _jsx("img", { src: src, alt: "", style: {
+                width: "100%",
+                height: "100%",
+                objectFit: "contain",
+            } }) }));
+}

package/components/shell/phi-avatar.d.ts

@@ -5,13 +5,7 @@ export type PhiAvatarProps = {
     href?: string;
     src?: string;
     alt?: string;
-    /**
-     * The name the initials are taken from when there is no picture.
-     *
-     * Three steps, in this order: the picture, then initials, then the generic icon. Initials matter
-     * because "no picture" is the ordinary state -- most people never choose one -- and a row of
-     * identical grey silhouettes tells a reader nothing, while two letters tell them who.
-     */
+    /** The name the initials are taken from when there is no picture; see `PhiAvatarControl`. */
     initialsFrom?: string | null;
     icon?: ReactNode;
     size?: number;
@@ -25,12 +19,4 @@ export type PhiAvatarProps = {
     showChevron?: boolean;
     labelPill?: boolean;
 };
-/**
- * Two letters from a name: the first of the first two words, or the first two of a single word.
- *
- * Works on what it is given rather than on a first/last name pair, because the callers hold different
- * shapes -- a display name, a full name, sometimes an address local part -- and none of them should
- * have to split it themselves.
- */
-export declare function readPhiAvatarInitials(value: string | null | undefined): string | null;
 export declare function PhiAvatar({ label, href, src, alt, initialsFrom, icon, size, menuItems, className, style, triggerRef, open, onOpenChange, showLabel, showChevron, labelPill, }: PhiAvatarProps): import("react").JSX.Element;

package/components/shell/phi-avatar.js

@@ -1,35 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { UserOutlined } from "@ant-design/icons";
 import Link from "next/link";
-import { Avatar, Space } from "antd";
+import { PhiAvatarControl } from "../controls/phi-avatar-control";
+import { PhiFlexControl } from "../controls/phi-flex-control";
 import { PhiPillDropdownControl } from "../controls/phi-dropdown-control";
-/**
- * Two letters from a name: the first of the first two words, or the first two of a single word.
- *
- * Works on what it is given rather than on a first/last name pair, because the callers hold different
- * shapes -- a display name, a full name, sometimes an address local part -- and none of them should
- * have to split it themselves.
- */
-export function readPhiAvatarInitials(value) {
-    const words = (value ?? "").trim().split(/\s+/).filter(Boolean);
-    if (words.length === 0) {
-        return null;
-    }
-    const letters = words.length === 1
-        ? [...words[0]].slice(0, 2)
-        : [words[0], words[1]].map((word) => [...word][0]);
-    const initials = letters.join("").toLocaleUpperCase();
-    return initials || null;
-}
 export function PhiAvatar({ label, href, src, alt, initialsFrom, icon, size = 32, menuItems, className, style, triggerRef, open, onOpenChange, showLabel = true, showChevron = true, labelPill = false, }) {
-    const initials = src ? null : readPhiAvatarInitials(initialsFrom);
-    const avatarNode = (_jsx(Avatar, { size: size, src: src, alt: alt, 
-        // Ant Design draws `children` only when `src` is absent or fails, which is exactly the fallback
-        // order wanted here -- a broken picture lands on the initials rather than on nothing.
-        icon: src || initials ? icon : icon ?? _jsx(UserOutlined, {}), style: { flexShrink: 0 }, children: initials }));
+    const avatarNode = (_jsx(PhiAvatarControl, { size: size, src: src, alt: alt, initialsFrom: initialsFrom, icon: icon }));
     if (!href || (menuItems && menuItems.length > 0)) {
         return (_jsx(PhiPillDropdownControl, { items: menuItems ?? [], open: open, onOpenChange: onOpenChange, leading: href ? _jsx(Link, { href: href, children: avatarNode }) : avatarNode, label: showLabel ? label : null, pill: labelPill, showChevron: showChevron, triggerRef: triggerRef, className: className, style: style }));
     }
-    return (_jsx(Link, { href: href, className: className, style: style, children: _jsxs(Space, { size: 8, children: [avatarNode, showLabel && label ? _jsx("span", { children: label }) : null] }) }));
+    return (_jsx(Link, { href: href, className: className, style: style, children: _jsxs(PhiFlexControl, { align: "center", gap: 8, children: [avatarNode, showLabel && label ? _jsx("span", { children: label }) : null] }) }));
 }

package/components/shell/phi-builder-icon.d.ts

@@ -1,4 +1,4 @@
-type PhiBuilderIconMotif = "content" | "vertical" | "flex" | "stack" | "carousel" | "grid" | "masonry" | "split-card" | "three-column" | "threecol" | "structure-region";
+type PhiBuilderIconMotif = "content" | "vertical" | "flex" | "collapse" | "stack" | "carousel" | "grid" | "masonry" | "split-card" | "three-column" | "threecol" | "structure-region";
 type PhiBuilderIconProps = {
     motif: PhiBuilderIconMotif;
     size?: number | string;

package/components/shell/phi-builder-icon.js

@@ -14,8 +14,25 @@ function ContentMotif() {
 function FlexMotif() {
     return (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "4", width: "3", height: "8", rx: "0.8", fill: "currentColor", fillOpacity: "0.16" }), _jsx("rect", { x: "6.5", y: "3", width: "3", height: "10", rx: "0.8", fill: "currentColor", fillOpacity: "0.28" }), _jsx("rect", { x: "10", y: "5", width: "3", height: "6", rx: "0.8", fill: "currentColor", fillOpacity: "0.16" })] }));
 }
+/**
+ * The Flex motif turned a quarter, because that is what the Layout is.
+ *
+ * Drawn as a rotation of the same shapes rather than as three bars of its own: a Flex Vertical is a
+ * Flex laid out down instead of across, and an icon that said anything else would be claiming a
+ * difference the Layout does not have. Redraw `FlexMotif` and this follows.
+ */
 function VerticalMotif() {
-    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: "4", y: "3", width: "8", height: "2", rx: "0.8", fill: "currentColor", fillOpacity: "0.18" }), _jsx("rect", { x: "4", y: "6.5", width: "8", height: "2", rx: "0.8", fill: "currentColor", fillOpacity: "0.3" }), _jsx("rect", { x: "4", y: "10", width: "8", height: "2", rx: "0.8", fill: "currentColor", fillOpacity: "0.18" })] }));
+    return (_jsx("g", { transform: "rotate(90 8 8)", children: _jsx(FlexMotif, {}) }));
+}
+/**
+ * Two closed headers and one open panel under the middle of them.
+ *
+ * Not the Stack's pile: a Collapsible shows all of its slots at once and only one of them opened, so
+ * the motif has to say "headers, and a body belonging to one of them" rather than "one on top of
+ * another".
+ */
+function CollapseMotif() {
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "10", height: "2", rx: "0.8", fill: "currentColor", fillOpacity: "0.3" }), _jsx("rect", { x: "3", y: "6", width: "10", height: "2", rx: "0.8", fill: "currentColor", fillOpacity: "0.3" }), _jsx("rect", { x: "3", y: "9", width: "10", height: "4", rx: "0.8", fill: "currentColor", fillOpacity: "0.14" })] }));
 }
 function StackMotif() {
     return (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "4", width: "10", height: "3", rx: "1", fill: "currentColor", fillOpacity: "0.14" }), _jsx("rect", { x: "4", y: "7", width: "8", height: "3", rx: "1", fill: "currentColor", fillOpacity: "0.24" }), _jsx("rect", { x: "5", y: "10", width: "6", height: "3", rx: "1", fill: "currentColor", fillOpacity: "0.14" })] }));
@@ -40,5 +57,5 @@ function StructureRegionMotif() {
     return (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "10", height: "2", rx: "0.8", fill: "currentColor", fillOpacity: "0.2" }), _jsx("rect", { x: "3", y: "6", width: "3", height: "7", rx: "0.8", fill: "currentColor", fillOpacity: "0.18" }), _jsx("rect", { x: "7", y: "6", width: "6", height: "5", rx: "0.8", fill: "currentColor", fillOpacity: "0.24" }), _jsx("rect", { x: "7", y: "11.5", width: "6", height: "1.5", rx: "0.75", fill: "currentColor", fillOpacity: "0.16" })] }));
 }
 export function PhiBuilderIcon({ motif, size = 16 }) {
-    return (_jsxs(Frame, { size: size, children: [motif === "content" ? _jsx(ContentMotif, {}) : null, motif === "vertical" ? _jsx(VerticalMotif, {}) : null, motif === "flex" ? _jsx(FlexMotif, {}) : null, motif === "stack" ? _jsx(StackMotif, {}) : null, motif === "carousel" ? _jsx(CarouselMotif, {}) : null, motif === "grid" ? _jsx(GridMotif, {}) : null, motif === "masonry" ? _jsx(MasonryMotif, {}) : null, motif === "split-card" ? _jsx(SplitCardMotif, {}) : null, motif === "three-column" || motif === "threecol" ? _jsx(ThreeColumnMotif, {}) : null, motif === "structure-region" ? _jsx(StructureRegionMotif, {}) : null] }));
+    return (_jsxs(Frame, { size: size, children: [motif === "content" ? _jsx(ContentMotif, {}) : null, motif === "vertical" ? _jsx(VerticalMotif, {}) : null, motif === "flex" ? _jsx(FlexMotif, {}) : null, motif === "collapse" ? _jsx(CollapseMotif, {}) : null, motif === "stack" ? _jsx(StackMotif, {}) : null, motif === "carousel" ? _jsx(CarouselMotif, {}) : null, motif === "grid" ? _jsx(GridMotif, {}) : null, motif === "masonry" ? _jsx(MasonryMotif, {}) : null, motif === "split-card" ? _jsx(SplitCardMotif, {}) : null, motif === "three-column" || motif === "threecol" ? _jsx(ThreeColumnMotif, {}) : null, motif === "structure-region" ? _jsx(StructureRegionMotif, {}) : null] }));
 }

package/components/shell/phi-builder-motif-icon.js

@@ -13,6 +13,7 @@ export function PhiBuilderMotifIcon({ namespace, motif, size, }) {
         case "content":
         case "vertical":
         case "flex":
+        case "collapse":
         case "stack":
         case "carousel":
         case "grid":

package/components/shell/phi-icon.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { lazy, Suspense, useEffect, useState, } from "react";
-import { HomeOutlined, InfoCircleOutlined, LogoutOutlined, MailOutlined, EnvironmentOutlined, GlobalOutlined, QuestionCircleOutlined, ShoppingOutlined, StarOutlined, UserOutlined, } from "@ant-design/icons";
-import Image from "next/image";
+import { PHI_ANTD_ICON_NAMES, PhiAntdIcon } from "./phi-antd-icon";
 let iconifyComponentLoader = null;
 function loadIconifyComponent() {
     if (!iconifyComponentLoader) {
@@ -10,37 +9,16 @@ function loadIconifyComponent() {
     }
     return iconifyComponentLoader;
 }
-const ANTD_ICON_REGISTRY = {
-    home: HomeOutlined,
-    "home-outlined": HomeOutlined,
-    mail: MailOutlined,
-    "mail-outlined": MailOutlined,
-    location: EnvironmentOutlined,
-    environment: EnvironmentOutlined,
-    "environment-outlined": EnvironmentOutlined,
-    global: GlobalOutlined,
-    "global-outlined": GlobalOutlined,
-    shopping: ShoppingOutlined,
-    "shopping-outlined": ShoppingOutlined,
-    star: StarOutlined,
-    "star-outlined": StarOutlined,
-    question: QuestionCircleOutlined,
-    "question-circle": QuestionCircleOutlined,
-    "question-circle-outlined": QuestionCircleOutlined,
-    info: InfoCircleOutlined,
-    "info-circle": InfoCircleOutlined,
-    "info-circle-outlined": InfoCircleOutlined,
-    logout: LogoutOutlined,
-    "logout-outlined": LogoutOutlined,
-    user: UserOutlined,
-    "user-outlined": UserOutlined,
-};
-const LazyPhiManagementIcon = lazy(() => import("./phi-management-icon").then((module) => ({
-    default: module.PhiManagementIcon,
-})));
 const LazyPhiBuilderMotifIcon = lazy(() => import("./phi-builder-motif-icon").then((module) => ({
     default: module.PhiBuilderMotifIcon,
 })));
+/*
+ * `next/image` for the one namespace that needs it, which a page of Ant Design and Iconify icons never
+ * names -- it was on every first load that drew any icon at all.
+ */
+const LazyPhiAssetIcon = lazy(() => import("./phi-asset-icon").then((module) => ({
+    default: module.PhiAssetIcon,
+})));
 function renderIconFallback(size) {
     return (_jsx("span", { "aria-hidden": "true", style: {
             display: "inline-flex",
@@ -49,8 +27,8 @@ function renderIconFallback(size) {
         } }));
 }
 function renderAntdIcon(key, size) {
-    const Icon = ANTD_ICON_REGISTRY[key];
-    return Icon ? (_jsx(Icon, { style: { fontSize: size } })) : (_jsx(Suspense, { fallback: renderIconFallback(size), children: _jsx(LazyPhiManagementIcon, { name: key, size: size }) }));
+    const icon = PHI_ANTD_ICON_NAMES[key];
+    return icon ? _jsx(PhiAntdIcon, { icon: icon, size: size }) : null;
 }
 function renderBuilderIcon(namespace, motif, size) {
     const isLayoutNamespace = namespace.endsWith("/layouts");
@@ -110,17 +88,7 @@ export function PhiIcon({ name, size = 16 }) {
         case "iconify":
             return value ? _jsx(PhiIconifyIcon, { icon: value, size: resolvedSize }) : null;
         case "asset":
-            return typeof resolvedSize === "number" ? (_jsx(Image, { src: value.startsWith("/") ? value : `/${value}`, alt: "", width: resolvedSize, height: resolvedSize, "aria-hidden": "true" })) : (_jsx("span", { "aria-hidden": "true", style: {
-                    display: "inline-flex",
-                    width: resolvedSize,
-                    height: resolvedSize,
-                    alignItems: "center",
-                    justifyContent: "center",
-                }, children: _jsx("img", { src: value.startsWith("/") ? value : `/${value}`, alt: "", style: {
-                        width: "100%",
-                        height: "100%",
-                        objectFit: "contain",
-                    } }) }));
+            return (_jsx(Suspense, { fallback: renderIconFallback(resolvedSize), children: _jsx(LazyPhiAssetIcon, { path: value, size: resolvedSize }) }));
         default:
             return null;
     }

package/components/shell/phi-locale-switch.js

@@ -10,9 +10,14 @@ import { PhiPillDropdownControl } from "../controls/phi-dropdown-control";
  *
  * Written here and nowhere else: the cookie outranks the browser's Accept-Language, so it must only ever
  * hold a choice somebody made. Visiting a localized address is not one.
+ *
+ * `Secure` on https, matching what phis-server writes at sign-in: the same cookie with two attribute
+ * sets would be two different stories about one choice, and a browser keeps the secure one.
  */
 function rememberPhiLocaleChoice(locale) {
-    document.cookie = `phis_locale=${encodeURIComponent(locale)}; Path=/; Max-Age=31536000; SameSite=Lax`;
+    const secure = window.location.protocol === "https:" ? "; Secure" : "";
+    document.cookie =
+        `phis_locale=${encodeURIComponent(locale)}; Path=/; Max-Age=31536000; SameSite=Lax${secure}`;
 }
 export function PhiLocaleSwitch({ currentLocale, localeOptions, mode = "label-list", showText = true, interactive = true, }) {
     const pathname = usePathname() ?? "/";

package/components/shell/phi-widget-icon.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ApiOutlined, AppstoreOutlined, BranchesOutlined, ClusterOutlined, CodeOutlined, CustomerServiceOutlined, DashboardOutlined, EditOutlined, FileTextOutlined, HistoryOutlined, LayoutOutlined, MenuOutlined, MonitorOutlined, PictureOutlined, ReadOutlined, SettingOutlined, ShoppingOutlined, SkinOutlined, TeamOutlined, TranslationOutlined, UserOutlined, } from "@ant-design/icons";
+import { ApiOutlined, AppstoreOutlined, BranchesOutlined, ClusterOutlined, CodeOutlined, CustomerServiceOutlined, DashboardOutlined, EditOutlined, FileTextOutlined, HistoryOutlined, LayoutOutlined, MenuOutlined, MessageOutlined, MonitorOutlined, PictureOutlined, ReadOutlined, SettingOutlined, ShoppingOutlined, SkinOutlined, TeamOutlined, TranslationOutlined, UserOutlined, } from "@ant-design/icons";
 const WIDGET_ICON_REGISTRY = {
     layout: LayoutOutlined,
     content: AppstoreOutlined,
@@ -23,6 +23,7 @@ const WIDGET_ICON_REGISTRY = {
     revisions: HistoryOutlined,
     runtime: ApiOutlined,
     support: CustomerServiceOutlined,
+    threads: MessageOutlined,
     "user-management": TeamOutlined,
     brand: SkinOutlined,
     theme: SkinOutlined,

package/components/shell/shell-types.d.ts

@@ -1,3 +1,20 @@
+import type { PhiCmsAreaKey } from "../../constants/cms-areas";
+import type { PhiSignalRoute } from "../../types/signals";
+/**
+ * One Area in the account menu's list of the Areas this person may enter.
+ *
+ * It lives with the other menu shapes rather than beside the function that builds it: that function
+ * reads every Area definition, and a Client menu importing its type would pull the whole Module graph
+ * across the Server boundary with it -- a type import that is meant to disappear, from a module that
+ * cannot.
+ */
+export type PhiAccountAreaEntry = {
+    area: PhiCmsAreaKey;
+    label: string;
+    href: string;
+    /** The one the reader is standing in: shown, so the menu says where they are, and not a link. */
+    current: boolean;
+};
 export type PhiNavItem = {
     key: string;
     label: string;
@@ -16,12 +33,17 @@ export type PhiNavItem = {
      * carries no path.
      */
     overlayInstanceId?: string;
+    /**
+     * What this entry sends when it is chosen, instead of going somewhere.
+     *
+     * The entry is the sender: its `key` is the resolved instance id, and a signal address is
+     * `cms:<instanceId>`. A renderer that finds these draws a button and dispatches them; one that does
+     * not understand them draws a label that leads nowhere, which is what an entry with no href is.
+     */
+    emits?: readonly PhiSignalRoute[];
     children?: PhiNavItem[];
 };
-export type PhiShellSide = "left" | "right";
 export type PhiMenuTheme = "light" | "dark";
-export type PhiShellLayoutType = "landing" | "public" | "docs" | "shop" | "account" | "admin";
-export type PhiShellRegionKey = "header" | "leftSidebar" | "content" | "rightSidebar" | "footer" | "drawer";
 export type PhiShellRegionVariant = {
     background?: string | null;
     color?: string | null;
@@ -63,15 +85,3 @@ export type PhiShellTheme = {
         bottom?: PhiShellRegionTheme | null;
     } & PhiShellRegionMetrics | null;
 };
-export type PhiShellLayoutDefinition = {
-    type: PhiShellLayoutType;
-    regions: {
-        header: boolean;
-        leftSidebar: boolean;
-        content: boolean;
-        rightSidebar: boolean;
-        footer: boolean;
-        drawer: boolean;
-    };
-};
-export declare const PHI_SHELL_LAYOUTS: Record<PhiShellLayoutType, PhiShellLayoutDefinition>;

package/components/shell/shell-types.js

@@ -1,68 +1 @@
-export const PHI_SHELL_LAYOUTS = {
-    landing: {
-        type: "landing",
-        regions: {
-            header: true,
-            leftSidebar: false,
-            content: true,
-            rightSidebar: false,
-            footer: true,
-            drawer: false,
-        },
-    },
-    public: {
-        type: "public",
-        regions: {
-            header: true,
-            leftSidebar: true,
-            content: true,
-            rightSidebar: false,
-            footer: true,
-            drawer: false,
-        },
-    },
-    docs: {
-        type: "docs",
-        regions: {
-            header: true,
-            leftSidebar: true,
-            content: true,
-            rightSidebar: true,
-            footer: true,
-            drawer: false,
-        },
-    },
-    shop: {
-        type: "shop",
-        regions: {
-            header: true,
-            leftSidebar: true,
-            content: true,
-            rightSidebar: true,
-            footer: true,
-            drawer: true,
-        },
-    },
-    account: {
-        type: "account",
-        regions: {
-            header: true,
-            leftSidebar: true,
-            content: true,
-            rightSidebar: true,
-            footer: false,
-            drawer: false,
-        },
-    },
-    admin: {
-        type: "admin",
-        regions: {
-            header: true,
-            leftSidebar: true,
-            content: true,
-            rightSidebar: true,
-            footer: false,
-            drawer: true,
-        },
-    },
-};
+export {};

package/components/state/history-store.d.ts

@@ -22,6 +22,7 @@ export declare function createPhiHistoryStore<TSnapshot>(storeId: string, option
         canUndo: boolean;
         canRedo: boolean;
     };
+    getHead: (scopeKey: string) => PhiHistoryEntry<TSnapshot> | null;
     record: (scopeKey: string, entry: PhiHistoryEntry<TSnapshot>) => void;
     redo: (scopeKey: string, apply: (snapshot: TSnapshot) => void) => boolean;
     subscribe: (scopeKey: import("./plugin-state-store").PhiPluginStateScope, listener: () => void) => () => void;
@@ -30,4 +31,5 @@ export declare function createPhiHistoryStore<TSnapshot>(storeId: string, option
         canUndo: boolean;
         canRedo: boolean;
     };
+    useHead: (scopeKey: string) => PhiHistoryEntry<TSnapshot> | null;
 };

package/components/state/history-store.js

@@ -77,6 +77,17 @@ export function createPhiHistoryStore(storeId, options) {
             canRedo: state.future.length > 0,
         };
     }
+    /**
+     * The newest entry still standing, or null. A saved state can remember it and later ask whether the
+     * history has moved since: a new record, a gesture continuing, an undo or a redo all change it, and
+     * undoing back to where it stood brings the same entry back.
+     */
+    function getHead(scopeKey) {
+        return store.getSnapshot(scopeKey).past.at(-1) ?? null;
+    }
+    function useHead(scopeKey) {
+        return store.useStoreSelector(scopeKey, (state) => state.past.at(-1) ?? null);
+    }
     function useAvailability(scopeKey) {
         const state = store.useStore(scopeKey);
         return {
@@ -88,10 +99,12 @@ export function createPhiHistoryStore(storeId, options) {
         clear,
         endGesture,
         getAvailability,
+        getHead,
         record,
         redo,
         subscribe: store.subscribe,
         undo,
         useAvailability,
+        useHead,
     };
 }