@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/root-layout/global-overlays.ts

@@ -1,50 +0,0 @@
-import { observable } from "@peers-app/peers-sdk";
-import type React from "react";
-
-/**
- * A globally-mounted overlay component contributed by a package (or peers-ui itself).
- *
- * Overlays are rendered by {@link RootLayoutHost} above every root layout (alongside the
- * command palette), so they remain visible regardless of which tab/app is active. Each
- * overlay is responsible for deciding its own visibility (e.g. returning `null` when it
- * should be hidden); the registry only controls whether the component is mounted.
- */
-export interface GlobalOverlay {
-  /** Stable id. Re-registering with the same id replaces the prior entry. */
-  id: string;
-  /** The component rendered by the host. It owns its own visibility and positioning. */
-  Component: React.ComponentType;
-}
-
-/**
- * Reactive registry of global overlays rendered by {@link RootLayoutHost}.
- *
- * This mirrors the command-palette registry pattern: a package's UI bundle calls
- * {@link registerGlobalOverlay} when it loads, and the host re-renders because this is an
- * observable. Because peers-core (and other packages) externalize `@peers-app/peers-ui`
- * to the shared `window.PeersUI` singleton, they register into this exact instance.
- */
-export const globalOverlays = observable<GlobalOverlay[]>([]);
-
-/**
- * Register a global overlay component, replacing any existing overlay with the same id.
- *
- * @param id Stable identifier for the overlay (used for replacement/removal).
- * @param Component The React component to mount globally.
- */
-export function registerGlobalOverlay(id: string, Component: React.ComponentType): void {
-  const next = globalOverlays().filter((o) => o.id !== id);
-  next.push({ id, Component });
-  globalOverlays(next);
-}
-
-/**
- * Remove a previously-registered global overlay by id. No-op if the id is not registered.
- *
- * @param id The id passed to {@link registerGlobalOverlay}.
- */
-export function unregisterGlobalOverlay(id: string): void {
-  const current = globalOverlays();
-  const next = current.filter((o) => o.id !== id);
-  if (next.length !== current.length) globalOverlays(next);
-}

package/src/root-layout/layout-picker.tsx

@@ -1,47 +0,0 @@
-/**
- * Layout picker — Settings entry point for choosing the root layout.
- *
- * Lists every registered {@link RootLayout} and writes the selection to
- * `selectedRootLayoutId` (per-device). `RootLayoutHost` subscribes to that pvar, so the
- * layout swaps live on select. Mirrors the `ColorModeDropdown` pattern.
- */
-
-import { useObservable } from "../hooks";
-import { getRootLayouts } from "./root-layout-registry";
-import { selectedRootLayoutId, setRootLayout } from "./root-layout-state";
-
-/** Dropdown that selects the active root layout. */
-export const LayoutPicker = () => {
-  const [selectedId] = useObservable(selectedRootLayoutId);
-  const layouts = getRootLayouts();
-  const active = layouts.find((layout) => layout.id === selectedId);
-
-  return (
-    <div className="dropdown">
-      <button
-        className="btn btn-secondary dropdown-toggle"
-        type="button"
-        id="layoutPickerDropdown"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-      >
-        Layout: {active?.name ?? selectedId}
-      </button>
-      <ul className="dropdown-menu" aria-labelledby="layoutPickerDropdown">
-        {layouts.map((layout) => (
-          <li key={layout.id}>
-            <button
-              type="button"
-              className="dropdown-item"
-              onClick={() => setRootLayout(layout.id)}
-            >
-              <i className={`${layout.iconClassName} me-2`} />
-              {layout.name} {layout.id === selectedId && "✓"}
-              <div className="small text-muted ms-4">{layout.description}</div>
-            </button>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};

package/src/root-layout/layouts/full-screen-layout.tsx

@@ -1,144 +0,0 @@
-/**
- * Full-screen root layout — one screen at a time, no tab strip.
- *
- * Renders only the active tab's content under a minimal header. All navigation flows
- * through the command palette (Cmd/Ctrl+K), which {@link RootLayoutHost} always mounts,
- * plus a Home button back to the app launcher. While mounted, this layout enables
- * single-tab mode (see `setSingleTabMode`) so opening an app replaces the current screen
- * instead of accumulating tabs. This is non-destructive: any tabs opened under a multi-tab
- * layout are left untouched and reappear if the user switches back.
- */
-
-import { type ReactNode, useEffect } from "react";
-import { openCommandPalette } from "../../command-palette/command-palette";
-import { GroupSwitcher } from "../../components/group-switcher";
-import { isDesktop } from "../../globals";
-import { useObservable } from "../../hooks";
-import { colorMode } from "../../screens/settings/color-mode-dropdown";
-import { TabContent, TabErrorBoundary } from "../../tabs-layout/tabs-layout";
-import {
-  activeTabId,
-  activeTabs,
-  launcherApp,
-  setSingleTabMode,
-} from "../../tabs-layout/tabs-state";
-
-const isMac =
-  typeof navigator !== "undefined" ? /Mac|iPod|iPhone|iPad/.test(navigator.userAgent) : false;
-const paletteHint = isMac ? "⌘K" : "Ctrl+K";
-
-/** The full-screen layout body: minimal header + the single active screen. */
-export function FullScreenLayout() {
-  const [mode] = useObservable(colorMode);
-  const [tabs] = useObservable(activeTabs);
-  const [activeId] = useObservable(activeTabId);
-  useObservable(isDesktop);
-  const isMobile = !isDesktop();
-
-  // Single-tab navigation while this layout is active; restore on unmount/layout swap.
-  useEffect(() => {
-    setSingleTabMode(true);
-    return () => setSingleTabMode(false);
-  }, []);
-
-  const activeTab = tabs.find((t) => t.tabId === activeId) ?? launcherApp;
-  const isLauncher = activeTab.packageId === "launcher" || activeTab.tabId === "launcher";
-  const isLight = mode === "light";
-
-  const title = isLauncher ? "Apps" : activeTab.title;
-
-  return (
-    <div
-      className="d-flex flex-column"
-      style={{ height: "calc(100vh - 25px)", overflow: "hidden" }}
-    >
-      {/* Minimal header */}
-      <div
-        className={`border-bottom d-flex align-items-center px-1 ${isLight ? "bg-light" : "bg-dark"}`}
-        style={{ height: "36px", borderBottomColor: isLight ? "#dee2e6" : "#495057" }}
-      >
-        <GroupSwitcher colorMode={mode} isMobile={isMobile} />
-
-        <HeaderButton
-          isLight={isLight}
-          active={isLauncher}
-          icon="bi-grid-3x3-gap"
-          label="Apps"
-          onClick={() => activeTabId("launcher")}
-        />
-
-        {/* Current screen title */}
-        <div className="d-flex align-items-center flex-grow-1 overflow-hidden px-2">
-          {!isLauncher && activeTab.iconClassName && (
-            <i className={`${activeTab.iconClassName} me-2`} />
-          )}
-          <span className="text-truncate fw-medium" style={{ fontSize: "13px" }}>
-            {title}
-          </span>
-        </div>
-
-        {/* Command palette (navigation) */}
-        <HeaderButton
-          isLight={isLight}
-          icon="bi-search"
-          label={`Search and navigate (${paletteHint})`}
-          onClick={openCommandPalette}
-        >
-          <span className="d-none d-md-inline ms-1" style={{ fontSize: "11px" }}>
-            {paletteHint}
-          </span>
-        </HeaderButton>
-      </div>
-
-      {/* The single active screen. Key on tabId so each screen mounts fresh (and the error
-          boundary resets) when navigating. */}
-      <div className="flex-grow-1 overflow-hidden">
-        <TabErrorBoundary key={activeTab.tabId} tabTitle={activeTab.title} tabId={activeTab.tabId}>
-          <TabContent tab={activeTab} isMobile={isMobile} isActive />
-        </TabErrorBoundary>
-      </div>
-    </div>
-  );
-}
-
-interface HeaderButtonProps {
-  isLight: boolean;
-  icon: string;
-  label: string;
-  onClick: () => void;
-  active?: boolean;
-  children?: ReactNode;
-}
-
-/** A small, transparent header button matching the tabs layout's toolbar styling. */
-function HeaderButton({ isLight, icon, label, onClick, active, children }: HeaderButtonProps) {
-  const baseColor = active ? (isLight ? "#0d6efd" : "#ffffff") : isLight ? "#6c757d" : "#adb5bd";
-  return (
-    <button
-      type="button"
-      className="btn btn-sm d-flex align-items-center"
-      onClick={onClick}
-      title={label}
-      aria-label={label}
-      style={{
-        padding: "4px 8px",
-        fontSize: "12px",
-        borderRadius: "6px",
-        border: "none",
-        background: "transparent",
-        color: baseColor,
-      }}
-      onMouseEnter={(e) => {
-        e.currentTarget.style.backgroundColor = isLight ? "#f8f9fa" : "#495057";
-        e.currentTarget.style.color = isLight ? "#0d6efd" : "#ffffff";
-      }}
-      onMouseLeave={(e) => {
-        e.currentTarget.style.backgroundColor = "transparent";
-        e.currentTarget.style.color = baseColor;
-      }}
-    >
-      <i className={icon} style={{ fontSize: "14px" }} />
-      {children}
-    </button>
-  );
-}

package/src/root-layout/layouts/tabs-with-console-layout.tsx

@@ -1,260 +0,0 @@
-/**
- * Tabs + Console root layout.
- *
- * Renders the standard tab UI and the Operator Console as two real, side-by-side panels
- * in a flex split — not an overlay. Neither panel covers the other; each scrolls
- * independently and the tab UI is sized to the space the console does not occupy.
- *
- * This layout owns everything the old overlay used to self-manage: the split sizing, the
- * drag-to-resize divider, the collapsed edge strip, and the docked edge. The console's
- * own chrome is the presentational {@link OperatorConsolePanel}. Panel state (expanded,
- * dock edge, sizes, maximized) is read reactively from `operatorConsolePanel`, the same
- * per-device state the `Ctrl+`` `` shortcut and the "Toggle Console" command drive.
- */
-
-import type React from "react";
-import { useEffect, useRef, useState } from "react";
-import { useObservable } from "../../hooks";
-import { getConsoleTheme, OperatorConsolePanel } from "../../operator-console/operator-console";
-import {
-  type ConsoleDock,
-  openConsole,
-  operatorConsolePanel,
-  setConsoleSize,
-} from "../../operator-console/operator-console-state";
-import { colorMode } from "../../screens/settings/color-mode-dropdown";
-import { TabsLayoutInternal } from "../../tabs-layout/tabs-layout";
-
-const STRIP_THICKNESS = 26;
-const HANDLE_THICKNESS = 6;
-const MIN_SIZE = 120;
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.max(min, Math.min(max, value));
-}
-
-/** Pixels occupied by the fixed titlebar (macOS = 25, hidden elsewhere). */
-function getTopOffset(): number {
-  if (typeof document === "undefined") return 0;
-  return Number.parseInt(getComputedStyle(document.body).paddingTop, 10) || 0;
-}
-
-/**
- * The `tabs-with-console` layout body. Splits its area between the tab UI and the
- * Operator Console along the docked edge, with a drag-to-resize divider. Collapses the
- * console to a thin clickable strip and supports maximizing it to fill the layout body.
- */
-export function TabsWithConsoleLayout() {
-  const [state] = useObservable(operatorConsolePanel);
-  const [mode] = useObservable(colorMode);
-  const [topOffset] = useState(getTopOffset);
-
-  const [dragSize, setDragSize] = useState<number | null>(null);
-  const [isResizing, setIsResizing] = useState(false);
-  const dragStartRef = useRef<{ startX: number; startY: number; startSize: number } | null>(null);
-  const latestSizeRef = useRef<number | null>(null);
-
-  const { expanded, dock, bottomHeight, sideWidth, maximized } = state;
-
-  useEffect(() => {
-    if (!isResizing) return;
-
-    const onMove = (e: MouseEvent) => {
-      const start = dragStartRef.current;
-      if (!start) return;
-      let next: number;
-      if (dock === "bottom") {
-        next = clamp(
-          start.startSize + (start.startY - e.clientY),
-          MIN_SIZE,
-          window.innerHeight - topOffset - MIN_SIZE,
-        );
-      } else if (dock === "left") {
-        next = clamp(
-          start.startSize + (e.clientX - start.startX),
-          MIN_SIZE,
-          window.innerWidth - MIN_SIZE,
-        );
-      } else {
-        next = clamp(
-          start.startSize + (start.startX - e.clientX),
-          MIN_SIZE,
-          window.innerWidth - MIN_SIZE,
-        );
-      }
-      latestSizeRef.current = next;
-      setDragSize(next);
-    };
-
-    const onUp = () => {
-      setIsResizing(false);
-      const finalSize = latestSizeRef.current;
-      if (finalSize != null) {
-        setConsoleSize(dock === "bottom" ? { bottomHeight: finalSize } : { sideWidth: finalSize });
-      }
-      setDragSize(null);
-      latestSizeRef.current = null;
-      dragStartRef.current = null;
-    };
-
-    document.addEventListener("mousemove", onMove);
-    document.addEventListener("mouseup", onUp);
-    return () => {
-      document.removeEventListener("mousemove", onMove);
-      document.removeEventListener("mouseup", onUp);
-    };
-  }, [isResizing, dock, topOffset]);
-
-  const theme = getConsoleTheme(mode === "dark");
-  const isVertical = dock !== "bottom";
-  const consoleSize = dragSize ?? (dock === "bottom" ? bottomHeight : sideWidth);
-
-  const onResizeStart = (e: React.MouseEvent) => {
-    e.preventDefault();
-    const startSize = dock === "bottom" ? bottomHeight : sideWidth;
-    dragStartRef.current = { startX: e.clientX, startY: e.clientY, startSize };
-    latestSizeRef.current = startSize;
-    setIsResizing(true);
-  };
-
-  // Tabs panel stays mounted across maximize so the tab subtree keeps its state; it is
-  // hidden (not unmounted) when the console is maximized.
-  const tabsHidden = expanded && maximized;
-  const tabsPanel = (
-    <div
-      key="tabs"
-      style={{
-        flex: 1,
-        minWidth: 0,
-        minHeight: 0,
-        overflow: "hidden",
-        display: tabsHidden ? "none" : "block",
-      }}
-    >
-      <TabsLayoutInternal fillContainer />
-    </div>
-  );
-
-  let consoleRegion: React.ReactNode;
-  if (!expanded) {
-    consoleRegion = <CollapsedStrip key="console" dock={dock} theme={theme} />;
-  } else if (maximized) {
-    consoleRegion = (
-      <div key="console" style={{ flex: 1, minWidth: 0, minHeight: 0 }}>
-        <OperatorConsolePanel />
-      </div>
-    );
-  } else {
-    consoleRegion = (
-      <div
-        key="console"
-        style={{
-          flex: "0 0 auto",
-          minWidth: 0,
-          minHeight: 0,
-          ...(dock === "bottom" ? { height: `${consoleSize}px` } : { width: `${consoleSize}px` }),
-        }}
-      >
-        <OperatorConsolePanel />
-      </div>
-    );
-  }
-
-  const divider =
-    expanded && !maximized ? (
-      <ResizeDivider
-        key="divider"
-        isVertical={isVertical}
-        isResizing={isResizing}
-        theme={theme}
-        onMouseDown={onResizeStart}
-      />
-    ) : null;
-
-  const children =
-    dock === "left" ? [consoleRegion, divider, tabsPanel] : [tabsPanel, divider, consoleRegion];
-
-  return (
-    <div
-      style={{
-        height: "calc(100vh - 25px)",
-        display: "flex",
-        flexDirection: isVertical ? "row" : "column",
-        overflow: "hidden",
-        userSelect: isResizing ? "none" : undefined,
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-interface CollapsedStripProps {
-  dock: ConsoleDock;
-  theme: ReturnType<typeof getConsoleTheme>;
-}
-
-/** Thin clickable edge strip shown when the console is collapsed; opens it on click. */
-function CollapsedStrip({ dock, theme }: CollapsedStripProps) {
-  const isVertical = dock !== "bottom";
-  return (
-    <button
-      type="button"
-      onClick={openConsole}
-      title="Open Console (Ctrl+`)"
-      style={{
-        flex: `0 0 ${STRIP_THICKNESS}px`,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "6px",
-        border: "none",
-        padding: 0,
-        backgroundColor: theme.headerBg,
-        color: theme.muted,
-        cursor: "pointer",
-        userSelect: "none",
-        fontSize: "12px",
-        ...(dock === "bottom"
-          ? { width: "100%", borderTop: `1px solid ${theme.border}` }
-          : dock === "left"
-            ? { height: "100%", borderRight: `1px solid ${theme.border}` }
-            : { height: "100%", borderLeft: `1px solid ${theme.border}` }),
-      }}
-    >
-      <i className="bi-terminal" style={{ fontSize: "14px" }} />
-      {!isVertical && <span>Console</span>}
-      <i className={isVertical ? "bi-chevron-left" : "bi-chevron-up"} />
-    </button>
-  );
-}
-
-interface ResizeDividerProps {
-  isVertical: boolean;
-  isResizing: boolean;
-  theme: ReturnType<typeof getConsoleTheme>;
-  onMouseDown: (e: React.MouseEvent) => void;
-}
-
-/** Drag handle between the tabs and console panels; resizes the console along the dock edge. */
-function ResizeDivider({ isVertical, isResizing, theme, onMouseDown }: ResizeDividerProps) {
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: pointer-only resize gutter; size is also adjustable via persisted state
-    <div
-      onMouseDown={onMouseDown}
-      onMouseEnter={(e) => {
-        if (!isResizing) e.currentTarget.style.backgroundColor = theme.accent;
-      }}
-      onMouseLeave={(e) => {
-        if (!isResizing) e.currentTarget.style.backgroundColor = "transparent";
-      }}
-      style={{
-        flex: `0 0 ${HANDLE_THICKNESS}px`,
-        backgroundColor: isResizing ? theme.accent : "transparent",
-        cursor: isVertical ? "ew-resize" : "ns-resize",
-      }}
-    />
-  );
-}
-
-export default TabsWithConsoleLayout;

package/src/root-layout/root-layout-host.test.tsx

@@ -1,108 +0,0 @@
-import { fireEvent, render } from "@testing-library/react";
-import { mainContentPath } from "../globals";
-import { IDENTITY_ACCEPT_PATH } from "../screens/identity/identity-routes";
-import { peekPendingInvite } from "../screens/invites/invite-capture";
-import { RootLayoutHost } from "./root-layout-host";
-
-const TOKEN = "eyJhbGciOiJub25lIn0-_abcdefghijklmnopqrstuvwxyz0123456789";
-
-jest.mock("@peers-app/peers-sdk", () => {
-  const actual = jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
-  return {
-    ...actual,
-    hasShownWelcomeModal: Object.assign(
-      jest.fn(() => true),
-      {
-        loadingPromise: Promise.resolve(),
-      },
-    ),
-    setDefaultClientUserContext: jest.fn(),
-  };
-});
-
-jest.mock("../command-palette/command-palette-ui", () => ({
-  CommandPaletteOverlay: () => null,
-}));
-
-jest.mock("../globals", () => ({
-  loadGlobals: jest.fn(async () => true),
-  mainContentPath: jest.fn(),
-}));
-
-jest.mock("../hooks", () => ({
-  useObservable: (observable: () => unknown) => [observable(), observable],
-  usePromise: (promiseOrFactory: unknown) => {
-    if (
-      typeof promiseOrFactory === "function" &&
-      Function.prototype.toString.call(promiseOrFactory).includes("getSession")
-    ) {
-      return "local-user";
-    }
-    return true;
-  },
-}));
-
-jest.mock("../screens/settings/color-mode-dropdown", () => ({
-  colorMode: jest.fn(() => "light"),
-}));
-
-jest.mock("../screens/setup-user", () => ({
-  SetupUser: () => null,
-}));
-
-jest.mock("../screens/welcome-modal", () => ({
-  WelcomeModal: () => null,
-}));
-
-jest.mock("../tabs-layout/tabs-state", () => ({
-  activeTabId: { loadingPromise: Promise.resolve() },
-  activeTabs: { loadingPromise: Promise.resolve() },
-  recentlyUsedApps: { loadingPromise: Promise.resolve() },
-}));
-
-jest.mock("../ui-router/routes-loader", () => ({
-  loadAllRoutes: jest.fn(async () => undefined),
-}));
-
-jest.mock("./global-overlays", () => ({
-  globalOverlays: jest.fn(() => []),
-}));
-
-jest.mock("./root-layout-registry", () => ({
-  DEFAULT_ROOT_LAYOUT_ID: "default",
-  getRootLayout: jest.fn(() => ({ Component: () => null })),
-}));
-
-jest.mock("./root-layout-state", () => ({
-  selectedRootLayoutId: jest.fn(() => undefined),
-}));
-
-describe("RootLayoutHost", () => {
-  beforeEach(() => {
-    sessionStorage.clear();
-    window.history.replaceState(null, "", "/");
-    jest.clearAllMocks();
-  });
-
-  it("captures and sanitizes invite links opened after startup", () => {
-    render(<RootLayoutHost />);
-    window.history.replaceState(null, "", `/?app#invite=${TOKEN}`);
-
-    fireEvent(window, new HashChangeEvent("hashchange"));
-
-    expect(window.location.hash).toBe("");
-    expect(peekPendingInvite()).toBe(TOKEN);
-    expect(mainContentPath).toHaveBeenCalledWith(IDENTITY_ACCEPT_PATH);
-    expect(mainContentPath).not.toHaveBeenCalledWith(expect.stringContaining(TOKEN));
-  });
-
-  it("ignores ordinary hash routes", () => {
-    render(<RootLayoutHost />);
-    window.history.replaceState(null, "", "/?app#groups");
-
-    fireEvent(window, new HashChangeEvent("hashchange"));
-
-    expect(window.location.hash).toBe("#groups");
-    expect(peekPendingInvite()).toBeUndefined();
-  });
-});