@elizaos/ui 2.0.3-beta.2 → 2.0.3-beta.4

package/components/pages/SettingsView.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isViewVisible } from "@elizaos/core";
 import { ArrowLeft } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
@@ -9,10 +10,12 @@ import { listExtraSettingsGroups } from "../../cloud/settings/index.js";
 import { useMediaQuery } from "../../hooks/useMediaQuery.js";
 import { ContentLayout } from "../../layouts/content-layout/index.js";
 import { cn } from "../../lib/utils.js";
-import { useApp } from "../../state/index.js";
-import { PagePanel } from "../composites/page-panel/index.js";
+import { isAndroidCloudBuild } from "../../platform/android-runtime.js";
+import { useAppSelectorShallow } from "../../state/index.js";
+import { useEnabledViewKinds } from "../../state/useViewKinds.js";
 import { SettingsGroup, SettingsRow, SettingsStack, } from "../settings/settings-layout.js";
-import { getAllSettingsSections, readSettingsHashSection, replaceSettingsHash, SECTION_HUE_MEDALLION_CLASS, SETTINGS_GROUP_LABEL, SETTINGS_GROUP_ORDER, settingsSectionLabel, settingsSectionTitle, } from "../settings/settings-sections.js";
+import { getAllSettingsSections, readSettingsHashSection, replaceSettingsHash, SECTION_TONE_ICON_CLASS, SETTINGS_GROUP_LABEL, SETTINGS_GROUP_ORDER, settingsSectionLabel, settingsSectionTitle, } from "../settings/settings-sections.js";
+import { ErrorBoundary } from "../ui/error-boundary.js";
 import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
 /**
  * Group sections for display. Built-in groups keep their pinned order + labels;
@@ -62,7 +65,7 @@ function sectionChip(section, walletEnabled) {
     return null;
 }
 function Chip({ children }) {
-    return (_jsx("span", { className: "inline-flex items-center rounded-full bg-accent/12 px-2 py-0.5 text-[11px] font-medium text-accent ring-1 ring-accent/20", children: children }));
+    return (_jsx("span", { className: "inline-flex items-center rounded-full bg-accent/12 px-2 py-0.5 text-[11px] font-medium text-accent  ", children: children }));
 }
 /**
  * One navigation entry. Renders as a tappable list row on mobile and a compact
@@ -80,13 +83,9 @@ function SettingsNavItem({ section, label, chip, active, variant, onSelect, }) {
     });
     const Icon = section.icon;
     if (variant === "list") {
-        return (_jsx(SettingsRow, { icon: Icon, iconClassName: SECTION_HUE_MEDALLION_CLASS[section.hue], label: label, onClick: () => onSelect(section.id), buttonRef: ref, buttonProps: agentProps, trailing: chip ? _jsx(Chip, { children: chip }) : undefined, chevron: !chip }));
+        return (_jsx(SettingsRow, { icon: Icon, iconClassName: SECTION_TONE_ICON_CLASS[section.tone], label: label, onClick: () => onSelect(section.id), buttonRef: ref, buttonProps: agentProps, trailing: chip ? _jsx(Chip, { children: chip }) : undefined, chevron: !chip }));
     }
-    return (_jsxs("button", { ref: ref, type: "button", onClick: () => onSelect(section.id), "aria-current": active ? "page" : undefined, className: cn("flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm transition-colors", active
-            ? "bg-accent/12 font-medium text-accent"
-            : "text-txt hover:bg-surface"), ...agentProps, children: [_jsx("span", { className: cn("flex h-7 w-7 shrink-0 items-center justify-center rounded-md", active
-                    ? "bg-accent/15 text-accent"
-                    : SECTION_HUE_MEDALLION_CLASS[section.hue]), children: _jsx(Icon, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), chip ? _jsx(Chip, { children: chip }) : null] }));
+    return (_jsxs("button", { ref: ref, type: "button", onClick: () => onSelect(section.id), "aria-current": active ? "page" : undefined, className: cn("flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm transition-colors", active ? "font-medium text-accent" : "text-txt hover:bg-surface"), ...agentProps, children: [_jsx(Icon, { className: cn("h-4 w-4 shrink-0", active ? "text-accent" : SECTION_TONE_ICON_CLASS[section.tone]), "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), chip ? _jsx(Chip, { children: chip }) : null] }));
 }
 function SectionBackButton({ onBack }) {
     const { ref, agentProps } = useAgentElement({
@@ -96,14 +95,26 @@ function SectionBackButton({ onBack }) {
         description: "Return to the settings hub",
         onActivate: onBack,
     });
-    return (_jsxs("button", { ref: ref, type: "button", onClick: onBack, className: "-mx-2 inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-muted transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40", ...agentProps, children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Settings"] }));
+    return (_jsxs("button", { ref: ref, type: "button", onClick: onBack, className: "-mx-2 inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium text-muted transition-colors hover:text-accent   ", ...agentProps, children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Settings"] }));
 }
 /** The active section's body: optional back, header (icon + title), content. */
 function SettingsSectionContent({ section, t, onBack, }) {
     const Component = section.Component;
     const Icon = section.icon;
     const title = settingsSectionTitle(section, t);
-    return (_jsxs("div", { id: section.id, children: [onBack ? (_jsx("div", { className: "mb-2.5", children: _jsx(SectionBackButton, { onBack: onBack }) })) : null, _jsxs("div", { className: "mb-3 flex items-center gap-3", children: [_jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-md", SECTION_HUE_MEDALLION_CLASS[section.hue]), children: _jsx(Icon, { className: "h-5 w-5", "aria-hidden": true }) }), _jsx("h1", { className: "text-xl font-semibold tracking-tight text-txt-strong", children: title })] }), _jsx(PagePanel, { variant: "section", children: _jsx("div", { className: cn("p-4 sm:p-5", section.bodyClassName), children: _jsx(Component, {}) }) })] }));
+    return (_jsxs("div", { id: section.id, children: [onBack ? (_jsx("div", { className: "mb-1.5", children: _jsx(SectionBackButton, { onBack: onBack }) })) : null, _jsxs("div", { className: "mb-5 flex items-center gap-2.5", children: [_jsx(Icon, { className: "h-5 w-5 shrink-0 text-muted/80", "aria-hidden": true }), _jsx("h1", { className: "text-lg font-semibold tracking-tight text-txt-strong", children: title })] }), _jsx("div", { className: section.bodyClassName, children: _jsx(ErrorBoundary, { fallback: (error, reset) => (_jsx(SettingsSectionFallback, { title: title, error: error, onRetry: reset, t: t })), children: _jsx(Component, {}) }, section.id) })] }));
+}
+/**
+ * Inline per-section error fallback. A section that throws on mount/render must
+ * degrade to this card — never blank the whole shell — so the settings nav rail
+ * and every other section stay interactive. Uses the settings `warn` token
+ * vocabulary for visual consistency with the rest of the surface.
+ */
+function SettingsSectionFallback({ title, error, onRetry, t, }) {
+    return (_jsxs("div", { role: "alert", "data-testid": "settings-section-error", className: "flex flex-col items-start gap-2 rounded-md border border-warn/30 bg-warn/12 p-4 text-left", children: [_jsx("p", { className: "text-sm font-semibold text-warn", children: t("settings.sectionFailed", {
+                    defaultValue: "{{title}} failed to load",
+                    title,
+                }) }), _jsx("p", { className: "text-xs-tight text-muted max-w-prose break-words", children: error.message }), _jsx("button", { type: "button", onClick: onRetry, className: "mt-1 inline-flex h-9 items-center rounded-md border border-border bg-card px-3 text-xs font-medium text-txt transition-colors hover:border-accent hover:text-accent   ", children: t("settings.sectionRetry", { defaultValue: "Retry" }) })] }));
 }
 function MobileHub({ grouped, t, walletEnabled, onSelect, }) {
     return (_jsxs("div", { className: "w-full pb-32", children: [_jsx("h1", { className: "mb-4 text-2xl font-semibold tracking-tight text-txt-strong", children: t("nav.settings", { defaultValue: "Settings" }) }), _jsx(SettingsStack, { children: grouped.map(({ group, label, items }) => (_jsx(SettingsGroup, { title: label, children: items.map((section) => (_jsx(SettingsNavItem, { section: section, label: settingsSectionLabel(section, t), chip: sectionChip(section, walletEnabled), active: false, variant: "list", onSelect: onSelect }, section.id))) }, group))) })] }));
@@ -112,16 +123,25 @@ function DesktopLayout({ grouped, t, walletEnabled, activeId, activeSection, onS
     return (_jsxs("div", { className: "flex w-full gap-7 pb-32", children: [_jsx("nav", { className: "w-60 shrink-0", "aria-label": "Settings sections", children: _jsxs("div", { className: "sticky top-2 space-y-5", children: [_jsx("h1", { className: "px-2.5 text-lg font-semibold tracking-tight text-txt-strong", children: t("nav.settings", { defaultValue: "Settings" }) }), grouped.map(({ group, label, items }) => (_jsxs("div", { children: [_jsx("h2", { className: "mb-1 px-2.5 text-xs font-medium text-muted", children: label }), _jsx("div", { className: "space-y-0.5", children: items.map((section) => (_jsx(SettingsNavItem, { section: section, label: settingsSectionLabel(section, t), chip: sectionChip(section, walletEnabled), active: section.id === activeId, variant: "rail", onSelect: onSelect }, section.id))) })] }, group)))] }) }), _jsx("div", { className: "min-w-0 flex-1", children: activeSection ? (_jsx(SettingsSectionContent, { section: activeSection, t: t })) : null })] }));
 }
 export function SettingsView({ inModal, initialSection, } = {}) {
-    const { t, loadPlugins, walletEnabled } = useApp();
+    const { t, loadPlugins, walletEnabled } = useAppSelectorShallow((s) => ({
+        t: s.t,
+        loadPlugins: s.loadPlugins,
+        walletEnabled: s.walletEnabled,
+    }));
     const isDesktop = useMediaQuery("(min-width: 1024px)");
+    const enabledKinds = useEnabledViewKinds();
     const [activeSection, setActiveSection] = useState(() => initialSection ?? readSettingsHashSection());
     const visibleSections = useMemo(() => {
         return getAllSettingsSections().filter((section) => {
             if (section.id === "wallet-rpc" && walletEnabled === false)
                 return false;
+            if (!isViewVisible(section, enabledKinds))
+                return false;
+            if (section.hideOnCloud && isAndroidCloudBuild())
+                return false;
             return true;
         });
-    }, [walletEnabled]);
+    }, [walletEnabled, enabledKinds]);
     const visibleSectionIds = useMemo(() => new Set(visibleSections.map((section) => section.id)), [visibleSections]);
     const grouped = useMemo(() => groupSections(visibleSections), [visibleSections]);
     useEffect(() => {

package/components/pages/SkillsView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SkillsView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAkHrE,wBAAgB,UAAU,CAAC,EACzB,aAAa,EACb,OAAO,GACR,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,2CAGL"}
+{"version":3,"file":"SkillsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SkillsView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAmH3E,wBAAgB,UAAU,CAAC,EACzB,aAAa,EACb,OAAO,GACR,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,2CAGL"}

package/components/pages/SkillsView.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Brain, Store } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
+import { useIntervalWhenDocumentVisible } from "../../hooks/useDocumentVisibility.js";
 import { PageLayout } from "../../layouts/page-layout/page-layout.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
 import { ChatSearchHint } from "../composites/chat-search-hint.js";
 import { PagePanel } from "../composites/page-panel/index.js";
@@ -35,7 +36,7 @@ function SkillFilterTab({ tabKey, label, isActive, onSelect, }) {
             ? "border-accent/30 bg-accent/10 text-txt"
             : "border-border/45 text-muted hover:border-border/70 hover:bg-bg/35 hover:text-txt"}`, onClick: onSelect, ...agentProps, children: label }));
 }
-function SkillRowButton({ skill, active, enabled, icon, description, onLabel, offLabel, attentionLabel, onSelect, }) {
+const SkillRowButton = memo(function SkillRowButton({ skill, active, enabled, icon, description, onLabel, offLabel, attentionLabel, onSelect, }) {
     const { agentProps } = useAgentElement({
         id: `skill-${skill.id}`,
         role: "button",
@@ -46,7 +47,7 @@ function SkillRowButton({ skill, active, enabled, icon, description, onLabel, of
         onActivate: onSelect,
     });
     return (_jsx("div", { ...agentProps, children: _jsx(SkillSidebarItem, { active: active, testId: `skill-row-${skill.id}`, enabled: enabled, icon: icon, name: skill.name, description: description, onLabel: onLabel, offLabel: offLabel, onSelect: onSelect, attentionLabel: attentionLabel }) }));
-}
+});
 /* ── Main Skills View ───────────────────────────────────────────────── */
 export function SkillsView({ contentHeader, inModal, } = {}) {
     if (inModal)
@@ -55,7 +56,39 @@ export function SkillsView({ contentHeader, inModal, } = {}) {
 }
 /* ── Full-Page Skills View ─────────────────────────────────────────── */
 function SkillsFullView({ contentHeader } = {}) {
-    const { skills, skillCreateFormOpen, skillCreateName, skillCreateDescription, skillCreating, skillReviewReport, skillReviewId, skillReviewLoading, skillToggleAction, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, loadSkills, refreshSkills, handleSkillToggle, handleCreateSkill, handleDeleteSkill, handleReviewSkill, handleAcknowledgeSkill, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, enableMarketplaceSkill, disableMarketplaceSkill, copyMarketplaceSkillSource, setState, t, } = useApp();
+    const { skills, skillCreateFormOpen, skillCreateName, skillCreateDescription, skillCreating, skillReviewReport, skillReviewId, skillReviewLoading, skillToggleAction, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, loadSkills, refreshSkills, handleSkillToggle, handleCreateSkill, handleDeleteSkill, handleReviewSkill, handleAcknowledgeSkill, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, enableMarketplaceSkill, disableMarketplaceSkill, copyMarketplaceSkillSource, setState, t, } = useAppSelectorShallow((s) => ({
+        skills: s.skills,
+        skillCreateFormOpen: s.skillCreateFormOpen,
+        skillCreateName: s.skillCreateName,
+        skillCreateDescription: s.skillCreateDescription,
+        skillCreating: s.skillCreating,
+        skillReviewReport: s.skillReviewReport,
+        skillReviewId: s.skillReviewId,
+        skillReviewLoading: s.skillReviewLoading,
+        skillToggleAction: s.skillToggleAction,
+        skillsMarketplaceQuery: s.skillsMarketplaceQuery,
+        skillsMarketplaceResults: s.skillsMarketplaceResults,
+        skillsMarketplaceError: s.skillsMarketplaceError,
+        skillsMarketplaceLoading: s.skillsMarketplaceLoading,
+        skillsMarketplaceAction: s.skillsMarketplaceAction,
+        skillsMarketplaceManualGithubUrl: s.skillsMarketplaceManualGithubUrl,
+        loadSkills: s.loadSkills,
+        refreshSkills: s.refreshSkills,
+        handleSkillToggle: s.handleSkillToggle,
+        handleCreateSkill: s.handleCreateSkill,
+        handleDeleteSkill: s.handleDeleteSkill,
+        handleReviewSkill: s.handleReviewSkill,
+        handleAcknowledgeSkill: s.handleAcknowledgeSkill,
+        searchSkillsMarketplace: s.searchSkillsMarketplace,
+        installSkillFromMarketplace: s.installSkillFromMarketplace,
+        uninstallMarketplaceSkill: s.uninstallMarketplaceSkill,
+        installSkillFromGithubUrl: s.installSkillFromGithubUrl,
+        enableMarketplaceSkill: s.enableMarketplaceSkill,
+        disableMarketplaceSkill: s.disableMarketplaceSkill,
+        copyMarketplaceSkillSource: s.copyMarketplaceSkillSource,
+        setState: s.setState,
+        t: s.t,
+    }));
     const [installModalOpen, setInstallModalOpen] = useState(false);
     const [filterText, setFilterText] = useState("");
     const [filterTab, setFilterTab] = useState("all");
@@ -74,15 +107,16 @@ function SkillsFullView({ contentHeader } = {}) {
     }, [loadSkills]);
     // The skills list polls itself in the background instead of exposing a manual
     // refresh control — silently revalidate on a slow interval and on window focus.
+    // The interval is gated on document visibility so a backgrounded window goes
+    // quiet; the focus listener still gives an immediate refresh on return.
     useEffect(() => {
         const poll = () => void refreshSkills();
         window.addEventListener("focus", poll);
-        const interval = window.setInterval(poll, 20_000);
         return () => {
             window.removeEventListener("focus", poll);
-            window.clearInterval(interval);
         };
     }, [refreshSkills]);
+    useIntervalWhenDocumentVisible(() => void refreshSkills(), 20_000);
     const filteredSkills = useMemo(() => {
         const query = filterText.toLowerCase();
         return skills.filter((skill) => {
@@ -106,6 +140,8 @@ function SkillsFullView({ contentHeader } = {}) {
     const selectedSkill = selectedSkillId
         ? (skills.find((skill) => skill.id === selectedSkillId) ?? null)
         : null;
+    const enabledSkillCount = useMemo(() => skills.filter((skill) => skill.enabled).length, [skills]);
+    const disabledSkillCount = skills.length - enabledSkillCount;
     const filterTabs = [
         {
             key: "all",
@@ -113,11 +149,11 @@ function SkillsFullView({ contentHeader } = {}) {
         },
         {
             key: "on",
-            label: `${t("common.on")} (${skills.filter((skill) => skill.enabled).length})`,
+            label: `${t("common.on")} (${enabledSkillCount})`,
         },
         {
             key: "off",
-            label: `${t("common.off")} (${skills.filter((skill) => !skill.enabled).length})`,
+            label: `${t("common.off")} (${disabledSkillCount})`,
         },
     ];
     const handleDismissReview = () => {
@@ -261,13 +297,13 @@ function SkillsFullView({ contentHeader } = {}) {
                                     }), description: t("skillsview.noSkillsMatchFilter", {
                                         defaultValue: 'No skills match "{{filter}}"',
                                         filter: filterText,
-                                    }) })) : skillCreateFormOpen ? (_jsxs(PagePanel, { variant: "surface", className: "overflow-hidden", children: [_jsx(PagePanel.Header, { heading: t("skillsview.CreateNewSkill") }), _jsx("div", { className: "bg-bg/18 px-4 py-4 sm:px-5", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsxs("span", { className: "mb-1 block text-xs-tight font-medium text-muted", children: [t("skillsview.SkillName"), " ", _jsx("span", { className: "text-danger", children: "*" })] }), _jsx(Input, { ref: createNameInput.ref, className: "w-full border-border/50 bg-bg/50 focus-visible:ring-accent", placeholder: t("skillsview.eGMyAwesomeSkil"), value: skillCreateName, onChange: (event) => setState("skillCreateName", event.target.value), ...createNameInput.agentProps, onKeyDown: (event) => {
+                                    }) })) : skillCreateFormOpen ? (_jsxs(PagePanel, { variant: "surface", className: "overflow-hidden", children: [_jsx(PagePanel.Header, { heading: t("skillsview.CreateNewSkill") }), _jsx("div", { className: "bg-bg/18 px-4 py-4 sm:px-5", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsxs("span", { className: "mb-1 block text-xs-tight font-medium text-muted", children: [t("skillsview.SkillName"), " ", _jsx("span", { className: "text-danger", children: "*" })] }), _jsx(Input, { ref: createNameInput.ref, className: "w-full border-border/50 bg-bg/50 ", placeholder: t("skillsview.eGMyAwesomeSkil"), value: skillCreateName, onChange: (event) => setState("skillCreateName", event.target.value), ...createNameInput.agentProps, onKeyDown: (event) => {
                                                                     if (event.key === "Enter" &&
                                                                         skillCreateName.trim() &&
                                                                         !skillCreating) {
                                                                         handleCreateSkill();
                                                                     }
-                                                                } })] }), _jsxs("div", { children: [_jsx("span", { className: "mb-1 block text-xs-tight font-medium text-muted", children: t("common.description") }), _jsx(Input, { ref: createDescriptionInput.ref, className: "w-full border-border/50 bg-bg/50 focus-visible:ring-accent", placeholder: t("skillsview.BriefDescriptionOf"), value: skillCreateDescription, onChange: (event) => setState("skillCreateDescription", event.target.value), ...createDescriptionInput.agentProps, onKeyDown: (event) => {
+                                                                } })] }), _jsxs("div", { children: [_jsx("span", { className: "mb-1 block text-xs-tight font-medium text-muted", children: t("common.description") }), _jsx(Input, { ref: createDescriptionInput.ref, className: "w-full border-border/50 bg-bg/50 ", placeholder: t("skillsview.BriefDescriptionOf"), value: skillCreateDescription, onChange: (event) => setState("skillCreateDescription", event.target.value), ...createDescriptionInput.agentProps, onKeyDown: (event) => {
                                                                     if (event.key === "Enter" &&
                                                                         skillCreateName.trim() &&
                                                                         !skillCreating) {

package/components/pages/Springboard.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Springboard — iOS-like app/view launcher.
+ *
+ * Renders every available view as a names-only icon on swipeable pages plus a
+ * pinned favorites dock. Tap launches; long-press enters edit mode where icons
+ * can be reordered (drag), favorited into the dock, and — for manageable
+ * (dynamic developer) views — edited or deleted. Page order is persisted via
+ * the pure `springboard-layout` model. Favorites are
+ * controlled-optional: when `onToggleFavorite` is supplied the dock reflects the
+ * caller's `favoriteIds`; otherwise favorites are kept locally. Fully
+ * token-themed (light/dark + overrides) and renders no background of its own —
+ * the shared root `AppBackground` shows through, matching the home screen.
+ */
+import type { ViewEntry } from "../../hooks/view-catalog.js";
+export interface SpringboardProps {
+    entries: ViewEntry[];
+    loading?: boolean;
+    onLaunch: (entry: ViewEntry) => void;
+    onEdgeSwipeRight?: () => void;
+    /** When set, favorites are controlled by the caller (e.g. desktop tabs). */
+    favoriteIds?: string[];
+    onToggleFavorite?: (id: string) => void;
+    /** Per-tile management for dynamic views, shown in edit mode when allowed. */
+    canManageView?: (id: string) => boolean;
+    onEditView?: (id: string) => void;
+    onDeleteView?: (id: string) => void;
+    /**
+     * Controlled active page index. When provided the page is owned by the caller
+     * (the shell-surface store, via SpringboardSurface); when omitted it is local
+     * state so the component stays usable standalone (stories / isolated tests).
+     */
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Fires with the rendered page count whenever it changes, so an outer surface
+     *  can size the unified page indicator. */
+    onPageCountChange?: (count: number) => void;
+    /** Controlled edit mode. When omitted, edit mode is local state. */
+    editing?: boolean;
+    onEditingChange?: (editing: boolean) => void;
+    /**
+     * Render the inner per-page dots. Off when an outer surface (the rail) owns
+     * the single unified indicator — this is what prevents two stacked dot strips
+     * (#4). Defaults to true for standalone usage.
+     */
+    showPageDots?: boolean;
+    className?: string;
+}
+export declare function Springboard({ entries, loading, onLaunch, onEdgeSwipeRight, favoriteIds, onToggleFavorite, canManageView, onEditView, onDeleteView, page: pageProp, onPageChange, onPageCountChange, editing: editingProp, onEditingChange, showPageDots, className, }: SpringboardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Springboard.d.ts.map

package/components/pages/Springboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Springboard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/Springboard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAKH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAc1D,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8EAA8E;IAC9E,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACxC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;+CAC2C;IAC3C,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmKD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,OAAe,EACf,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,iBAAiB,EACjB,OAAO,EAAE,WAAW,EACpB,eAAe,EACf,YAAmB,EACnB,SAAS,GACV,EAAE,gBAAgB,2CA0SlB"}

package/components/pages/Springboard.js

@@ -0,0 +1,238 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Springboard — iOS-like app/view launcher.
+ *
+ * Renders every available view as a names-only icon on swipeable pages plus a
+ * pinned favorites dock. Tap launches; long-press enters edit mode where icons
+ * can be reordered (drag), favorited into the dock, and — for manageable
+ * (dynamic developer) views — edited or deleted. Page order is persisted via
+ * the pure `springboard-layout` model. Favorites are
+ * controlled-optional: when `onToggleFavorite` is supplied the dock reflects the
+ * caller's `favoriteIds`; otherwise favorites are kept locally. Fully
+ * token-themed (light/dark + overrides) and renders no background of its own —
+ * the shared root `AppBackground` shows through, matching the home screen.
+ */
+import { Pencil, Trash2 } from "lucide-react";
+import { motion, Reorder } from "motion/react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "../../lib/utils.js";
+import { moveIcon, readSpringboardLayout, reconcileLayout, SPRINGBOARD_DOCK_LIMIT, toggleFavorite, writeSpringboardLayout, } from "../../state/springboard-layout.js";
+import { emitViewInteraction } from "../../view-telemetry.js";
+import { ViewTileImage } from "../views/ViewTileImage.js";
+const LONG_PRESS_MS = 450;
+/** Finger travel (px) that aborts a long-press — a pan/swipe is not a press, so
+ *  a horizontal swipe-back can never ghost-fire edit mode mid-gesture. */
+const LONG_PRESS_MOVE_SLOP = 10;
+/** Horizontal drag distance (px) needed to flip to the adjacent page. */
+const SWIPE_THRESHOLD = 60;
+// Memoized so a layout reconcile (install/uninstall/sort) re-renders only the
+// tiles whose props actually changed, not all ~20 on a page.
+const IconTile = memo(function IconTile({ entry, editing, favorited, manageable, onLaunch, onToggleFavorite, onEdit, onDelete, onLongPress, }) {
+    const timer = useRef(null);
+    const pressStart = useRef(null);
+    const clear = () => {
+        if (timer.current !== null) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+        pressStart.current = null;
+    };
+    return (_jsxs("div", { className: "flex flex-col items-center gap-1.5 select-none", "data-testid": `springboard-tile-${entry.id}`, children: [_jsxs("div", { className: "relative", children: [_jsx("button", { type: "button", "aria-label": entry.label, onClick: () => {
+                            if (!editing)
+                                onLaunch(entry);
+                        }, onPointerDown: (event) => {
+                            clear();
+                            pressStart.current = { x: event.clientX, y: event.clientY };
+                            timer.current = setTimeout(onLongPress, LONG_PRESS_MS);
+                        }, 
+                        // A long-press requires a near-stationary finger: once movement passes
+                        // LONG_PRESS_MOVE_SLOP the press is a pan/swipe, so cancel the timer.
+                        // This is what stops a horizontal swipe-back (which keeps the pointer
+                        // over the translating tile) from ghost-firing edit mode (#3).
+                        onPointerMove: (event) => {
+                            const start = pressStart.current;
+                            if (!start)
+                                return;
+                            if (Math.hypot(event.clientX - start.x, event.clientY - start.y) >
+                                LONG_PRESS_MOVE_SLOP) {
+                                clear();
+                            }
+                        }, onPointerUp: clear, onPointerLeave: clear, 
+                        // pointercancel (not pointerup) fires when a touch scroll or system
+                        // gesture interrupts the press — clear the timer so a long-press never
+                        // ghost-fires edit mode after the user finishes scrolling.
+                        onPointerCancel: clear, className: cn(
+                        // ViewTileImage handles image-vs-glyph internally, so the button is
+                        // one constant surface. The hero image (object-cover) covers the
+                        // tile when it loads; this dark neutral fill + white glyph is the
+                        // fallback so a tile reads as a real app icon (not a bare glyph
+                        // floating on the background) even before/without the image. Filter
+                        // effects (#9281) and focus rings (#9292) were removed on develop.
+                        "h-16 w-16 overflow-hidden rounded-2xl border border-white/10 bg-black/35 text-white transition-colors hover:bg-black/45", editing && "animate-pulse"), children: _jsx(ViewTileImage, { entry: entry, source: "springboard", containerClassName: "grid h-full w-full place-items-center", glyphClassName: "h-7 w-7", imageTestId: `springboard-image-${entry.id}` }) }), editing ? (_jsx("button", { type: "button", "aria-label": favorited ? `Unpin ${entry.label}` : `Pin ${entry.label}`, "data-testid": `springboard-fav-${entry.id}`, onClick: (e) => {
+                            e.stopPropagation();
+                            onToggleFavorite(entry.id);
+                        }, className: cn(
+                        // Filled chips stay legible across image and dark tile backgrounds.
+                        "absolute -right-1.5 -top-1.5 grid h-5 w-5 place-items-center rounded-full border text-[11px] font-bold shadow-md", favorited
+                            ? "border-black/20 bg-accent text-white"
+                            : "border-black/15 bg-white text-neutral-900"), children: favorited ? "★" : "+" })) : null, editing && manageable ? (_jsxs("div", { className: "absolute -left-1.5 -top-1.5 flex gap-1", children: [onEdit ? (_jsx("button", { type: "button", "aria-label": `Edit ${entry.label}`, "data-testid": `springboard-edit-${entry.id}`, onClick: (e) => {
+                                    e.stopPropagation();
+                                    onEdit(entry.id);
+                                }, className: "grid h-5 w-5 place-items-center rounded-full bg-bg-accent text-foreground", children: _jsx(Pencil, { className: "h-3 w-3", "aria-hidden": "true" }) })) : null, onDelete ? (_jsx("button", { type: "button", "aria-label": `Delete ${entry.label}`, "data-testid": `springboard-delete-${entry.id}`, onClick: (e) => {
+                                    e.stopPropagation();
+                                    onDelete(entry.id);
+                                }, className: "grid h-5 w-5 place-items-center rounded-full bg-destructive/80 text-destructive-foreground", children: _jsx(Trash2, { className: "h-3 w-3", "aria-hidden": "true" }) })) : null] })) : null] }), _jsx("span", { className: "max-w-[4.5rem] truncate text-center text-[11px] font-medium leading-tight text-white [text-shadow:0_1px_3px_rgba(0,0,0,0.55)]", children: entry.label })] }));
+});
+export function Springboard({ entries, loading = false, onLaunch, onEdgeSwipeRight, favoriteIds, onToggleFavorite, canManageView, onEditView, onDeleteView, page: pageProp, onPageChange, onPageCountChange, editing: editingProp, onEditingChange, showPageDots = true, className, }) {
+    const availableIds = useMemo(() => entries.map((e) => e.id), [entries]);
+    const byId = useMemo(() => new Map(entries.map((e) => [e.id, e])), [entries]);
+    const controlled = onToggleFavorite != null;
+    const favorites = useMemo(() => (controlled ? (favoriteIds ?? []) : null), [controlled, favoriteIds]);
+    const [layout, setLayout] = useState(() => {
+        const stored = readSpringboardLayout();
+        return reconcileLayout({ favorites: favorites ?? stored.favorites, pages: stored.pages }, entries.map((e) => e.id));
+    });
+    // Active page index + edit mode are CONTROLLED when the caller (the
+    // shell-surface store, via SpringboardSurface) supplies them, and local
+    // otherwise — so the app has one source of truth (the store enforces the
+    // "leaving the springboard clears edit mode + page" invariant) while the
+    // component stays usable standalone (stories / isolated tests).
+    const pageControlled = pageProp !== undefined;
+    const [localPage, setLocalPage] = useState(0);
+    const activePage = pageProp ?? localPage;
+    const setActivePage = useCallback((next) => {
+        if (pageControlled)
+            onPageChange?.(next);
+        else
+            setLocalPage(next);
+    }, [pageControlled, onPageChange]);
+    const editingControlled = editingProp !== undefined;
+    const [localEditing, setLocalEditing] = useState(false);
+    const editing = editingProp ?? localEditing;
+    const setEditingState = useCallback((next) => {
+        if (editingControlled)
+            onEditingChange?.(next);
+        else
+            setLocalEditing(next);
+    }, [editingControlled, onEditingChange]);
+    // Re-reconcile when the available views or controlled favorites change.
+    useEffect(() => {
+        setLayout((prev) => reconcileLayout({ favorites: favorites ?? prev.favorites, pages: prev.pages }, availableIds));
+    }, [availableIds, favorites]);
+    // Keep the LOCAL active page index in range when pages shrink (views removed).
+    // When controlled, the store clamps the page, so this only guards the
+    // standalone path.
+    useEffect(() => {
+        if (pageControlled)
+            return;
+        const pageCount = layout.pages.length > 0 ? layout.pages.length : 1;
+        setLocalPage((p) => (p > pageCount - 1 ? pageCount - 1 : p));
+    }, [layout.pages.length, pageControlled]);
+    const commit = useCallback((next) => {
+        setLayout(next);
+        writeSpringboardLayout(next);
+    }, []);
+    const toggleFav = useCallback((id) => {
+        const wasFavorited = (favorites ?? layout.favorites).includes(id);
+        emitViewInteraction({
+            source: "springboard",
+            action: wasFavorited ? "unfavorite" : "favorite",
+            viewId: id,
+        });
+        if (controlled) {
+            onToggleFavorite?.(id);
+            return;
+        }
+        commit(reconcileLayout(toggleFavorite(layout, id), availableIds));
+    }, [controlled, onToggleFavorite, commit, layout, availableIds, favorites]);
+    const handleLaunch = useCallback((entry) => {
+        emitViewInteraction({
+            source: "springboard",
+            action: "launch",
+            viewId: entry.id,
+        });
+        onLaunch(entry);
+    }, [onLaunch]);
+    const toggleEditMode = useCallback(() => {
+        emitViewInteraction({
+            source: "springboard",
+            action: editing ? "edit-mode-exit" : "edit-mode-enter",
+        });
+        setEditingState(!editing);
+    }, [editing, setEditingState]);
+    const pages = useMemo(() => (layout.pages.length > 0 ? layout.pages : [[]]), [layout.pages]);
+    // Report the page count up so an outer surface (the rail) can size the single
+    // unified page indicator. Fires only on an actual count change.
+    useEffect(() => {
+        onPageCountChange?.(pages.length);
+    }, [pages.length, onPageCountChange]);
+    const clampedPage = Math.min(activePage, pages.length - 1);
+    // Cap the rendered dock at SPRINGBOARD_DOCK_LIMIT in BOTH modes. The
+    // uncontrolled path already enforces it via toggleFavorite; controlled
+    // (desktop-tab) favorites are capped at the pinning source too, but clamp
+    // here as defense so the dock can never overflow regardless of caller.
+    const favoriteIdList = useMemo(() => (favorites ?? layout.favorites).slice(0, SPRINGBOARD_DOCK_LIMIT), [favorites, layout.favorites]);
+    const favoriteEntries = useMemo(() => favoriteIdList
+        .map((id) => byId.get(id))
+        .filter((e) => e != null), [byId, favoriteIdList]);
+    // O(1) dock-membership check inside the tile map instead of Array.includes.
+    const favoriteSet = useMemo(() => new Set(favoriteIdList), [favoriteIdList]);
+    const handleReorder = useCallback((pageIndex, nextIds) => {
+        // Rebuild the layout for this page from the reordered id list.
+        let next = layout;
+        nextIds.forEach((id, index) => {
+            next = moveIcon(next, id, pageIndex, index);
+        });
+        emitViewInteraction({
+            source: "springboard",
+            action: "reorder",
+            count: pageIndex,
+        });
+        commit(next);
+    }, [layout, commit]);
+    const renderTile = useCallback((entry, favorited) => (_jsx(IconTile, { entry: entry, editing: editing, favorited: favorited, manageable: canManageView?.(entry.id) ?? false, onLaunch: handleLaunch, onToggleFavorite: toggleFav, onEdit: onEditView, onDelete: onDeleteView, onLongPress: toggleEditMode })), [
+        editing,
+        canManageView,
+        handleLaunch,
+        toggleFav,
+        onEditView,
+        onDeleteView,
+        toggleEditMode,
+    ]);
+    return (_jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col", className), "data-testid": "springboard", children: [favoriteEntries.length > 0 ? (_jsx("div", { "data-testid": "springboard-dock", className: "mx-3 mt-2 mb-3 flex items-center justify-center gap-3 rounded-3xl border border-white/10 bg-black/45 px-3 py-3 sm:mx-4 sm:gap-4 sm:px-6", children: favoriteEntries.map((entry) => (_jsx("div", { children: renderTile(entry, true) }, `dock-${entry.id}`))) })) : null, _jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col overflow-hidden", children: [_jsx(motion.div
+                    // A stable identity (NOT `key={clampedPage}`): keying on the page
+                    // index forced a full unmount/remount of the page — Reorder.Group and
+                    // every tile — on each swipe, which janks the paging. The page content
+                    // already swaps via `pages[clampedPage]`, and `dragSnapToOrigin`
+                    // animates the drag back to origin, so the swap is smooth without a
+                    // remount (#9304).
+                    , { drag: editing ? false : "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 0.2, dragSnapToOrigin: true, onDragEnd: (_event, info) => {
+                            if (editing)
+                                return;
+                            if (info.offset.x < -SWIPE_THRESHOLD &&
+                                clampedPage < pages.length - 1) {
+                                setActivePage(clampedPage + 1);
+                                emitViewInteraction({
+                                    source: "springboard",
+                                    action: "page-swipe",
+                                    count: clampedPage + 1,
+                                });
+                            }
+                            else if (info.offset.x > SWIPE_THRESHOLD && clampedPage > 0) {
+                                setActivePage(clampedPage - 1);
+                                emitViewInteraction({
+                                    source: "springboard",
+                                    action: "page-swipe",
+                                    count: clampedPage - 1,
+                                });
+                            }
+                            else if (info.offset.x > SWIPE_THRESHOLD && clampedPage === 0) {
+                                onEdgeSwipeRight?.();
+                            }
+                        }, className: "flex min-h-0 flex-1 items-start justify-center overflow-y-auto px-6 pt-2 pb-8", children: loading && entries.length === 0 ? (_jsx("div", { className: "grid w-full max-w-2xl grid-cols-4 gap-x-4 gap-y-5 sm:grid-cols-5", children: ["a", "b", "c", "d", "e", "f", "g", "h"].map((id) => (_jsxs("div", { className: "flex flex-col items-center gap-1.5 opacity-60", children: [_jsx("div", { className: "h-16 w-16 rounded-2xl bg-bg-accent/50" }), _jsx("div", { className: "h-2.5 w-12 rounded-full bg-bg-accent/50" })] }, id))) })) : (_jsx(Reorder.Group, { axis: "y", values: pages[clampedPage] ?? [], onReorder: (next) => handleReorder(clampedPage, next), className: "grid w-full max-w-2xl grid-cols-4 gap-x-4 gap-y-5 sm:grid-cols-5", children: (pages[clampedPage] ?? []).map((id) => {
+                                const entry = byId.get(id);
+                                if (!entry)
+                                    return null;
+                                return (_jsx(Reorder.Item, { value: id, drag: editing, dragListener: editing, className: "flex justify-center", children: renderTile(entry, favoriteSet.has(id)) }, id));
+                            }) })) }, "springboard-page"), showPageDots && pages.length > 1 ? (_jsx("div", { className: "flex items-center justify-center gap-2 pb-3", children: pages.map((pageIds, index) => (_jsx("button", { type: "button", "aria-label": `Page ${index + 1}`, "aria-current": index === clampedPage, onClick: () => setActivePage(index), className: cn("h-2 w-2 rounded-full transition-colors", index === clampedPage ? "bg-accent" : "bg-border") }, `dot-${index}-${pageIds[0] ?? "empty"}`))) })) : null] })] }));
+}

package/components/pages/SpringboardSurface.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface SpringboardSurfaceProps {
+    onNavigateHomeFromEdge?: () => void;
+}
+export declare const SpringboardSurface: React.MemoExoticComponent<({ onNavigateHomeFromEdge, }: SpringboardSurfaceProps) => React.JSX.Element>;
+//# sourceMappingURL=SpringboardSurface.d.ts.map

package/components/pages/SpringboardSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpringboardSurface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SpringboardSurface.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2F/B,MAAM,WAAW,uBAAuB;IACtC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,kBAAkB,0DAE5B,uBAAuB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgF5C,CAAC"}