@xenide-io/the-old-ui-theme 0.9.18 → 0.11.0

package/src/suite/components/suite-clients-projects-directory.tsx

@@ -117,7 +117,7 @@ function DirectoryIconPicker({
   return (
     <div className="space-y-2">
       <span className="mb-1.5 block text-sm font-medium text-ph-ink">Icon</span>
-      <div className="rounded-lg border border-ph-border bg-ph-muted p-3">
+      <div className="rounded-[var(--ph-radius-surface)] border border-ph-border bg-[var(--ph-surface-inset)] p-3">
         <div className="flex items-center gap-3">
           <SuiteEntityIcon
             imageUrl={preview}
@@ -178,7 +178,7 @@ function DirectoryIcon({
       color={item.color}
       tinted
       className="h-8 w-8 text-sm"
-      roundedClass="rounded-lg"
+      roundedClass="rounded-[var(--ph-radius-control)]"
     />
   );
 }
@@ -458,7 +458,7 @@ export function SuiteClientsProjectsDirectory({
       {loading ? (
         <p className="text-sm text-ph-mutedtext">Loading directory...</p>
       ) : (
-        <div className="overflow-hidden rounded-xl border border-ph-border bg-ph-surface lg:grid lg:min-h-[22rem] lg:grid-cols-[minmax(14rem,18rem)_1fr]">
+        <div className="overflow-hidden rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface lg:grid lg:min-h-[22rem] lg:grid-cols-[minmax(14rem,18rem)_1fr]">
           <section
             className={cn(
               "border-ph-border lg:border-r",
@@ -515,7 +515,7 @@ export function SuiteClientsProjectsDirectory({
                           clientButtonRefs.current[client.id] = element;
                         }}
                         className={cn(
-                          "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left",
+                          "flex w-full items-center gap-2.5 rounded-[var(--ph-radius-control)] px-2.5 py-2 text-left",
                           selected ? "bg-ph-muted" : "hover:bg-ph-canvas",
                         )}
                       >
@@ -627,12 +627,12 @@ export function SuiteClientsProjectsDirectory({
                 selectedProjects.map((project) => (
                   <li key={project.id}>
                     <div
-                      className="flex items-center gap-3 rounded-lg px-2 py-1 hover:bg-ph-canvas"
+                      className="flex items-center gap-3 rounded-[var(--ph-radius-control)] px-2 py-1 hover:bg-ph-canvas"
                       onClick={() => openEdit(project, "project")}
                     >
                       <button
                         type="button"
-                        className="flex min-w-0 flex-1 items-center gap-3 rounded-lg py-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+                        className="flex min-w-0 flex-1 items-center gap-3 rounded-[var(--ph-radius-control)] py-1 text-left focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]"
                         onClick={() => openEdit(project, "project")}
                       >
                         <DirectoryIcon item={project} />

package/src/suite/components/suite-integration-picker.tsx

@@ -91,7 +91,7 @@ const DESCRIPTION_LIMIT = 90;
 function IntegrationSkeletonCard() {
   return (
     <div
-      className="flex min-h-36 min-w-0 animate-pulse flex-col justify-between rounded-xl border border-ph-border bg-ph-surface p-4"
+      className="flex min-h-36 min-w-0 animate-pulse flex-col justify-between rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface p-4"
       aria-hidden="true"
     >
       <div className="flex items-start gap-3">
@@ -608,7 +608,7 @@ export function SuiteIntegrationPicker({
               </button>
               {categoryMenuOpen ? (
                 <div
-                  className="absolute z-20 mt-2 max-h-[min(22rem,calc(100dvh-12rem))] w-full max-w-full overflow-hidden rounded-lg border border-ph-border bg-ph-surface p-2 shadow-lg"
+                  className="absolute z-20 mt-2 max-h-[min(22rem,calc(100dvh-12rem))] w-full max-w-full overflow-hidden rounded-[var(--ph-radius-overlay)] border border-[var(--ph-border-control)] bg-[var(--ph-surface-overlay)] p-2 shadow-[var(--ph-shadow-floating)]"
                 >
                   <Input
                     ref={categorySearchRef}
@@ -643,7 +643,7 @@ export function SuiteIntegrationPicker({
                         ref={(element) => {
                           categoryOptionRefs.current[value] = element;
                         }}
-                        className={`flex w-full min-w-0 items-center rounded-md px-3 py-2 text-left text-sm break-words ${activeCategory === value ? "bg-ph-brand text-[var(--ph-on-accent)]" : "text-ph-ink hover:bg-ph-muted"}`}
+                        className={`flex w-full min-w-0 items-center rounded-[var(--ph-radius-control)] px-3 py-2 text-left text-sm break-words focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)] ${activeCategory === value ? "bg-[var(--ph-selected-bg)] text-[var(--ph-selected-text)] shadow-[inset_0_0_0_1px_var(--ph-selected-border)]" : "text-ph-ink hover:bg-[var(--ph-surface-hover)]"}`}
                         onClick={() => selectCategory(value)}
                         onKeyDown={(event) => {
                           if (event.key === "Escape") {
@@ -692,7 +692,7 @@ export function SuiteIntegrationPicker({
                   return (
                     <div
                       key={item.id}
-                      className="flex min-h-36 min-w-0 flex-col justify-between rounded-xl border border-ph-border bg-ph-surface p-4"
+                      className="flex min-h-36 min-w-0 flex-col justify-between rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface p-4"
                     >
                       <button
                         type="button"
@@ -701,7 +701,7 @@ export function SuiteIntegrationPicker({
                           longDescription &&
                           setExpanded(isExpanded ? null : item.id)
                         }
-                        aria-expanded={isExpanded}
+                        aria-expanded={longDescription ? isExpanded : undefined}
                       >
                         <span className="flex items-start gap-3">
                           <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-ph-muted text-ph-ink">
@@ -801,7 +801,7 @@ export function SuiteIntegrationPicker({
               {connectedItems.map((item) => (
                 <div
                   key={item.id}
-                  className="flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted p-3"
+                  className="flex items-center justify-between gap-3 rounded-[var(--ph-radius-surface)] border border-ph-border bg-[var(--ph-surface-inset)] p-3"
                 >
                   <span className="flex min-w-0 items-center gap-2 text-sm text-ph-ink">
                     {item.icon}
@@ -885,7 +885,7 @@ export function SuiteIntegrationPicker({
               <button
                 key={scheme}
                 type="button"
-                className="flex w-full items-center justify-between rounded-lg border border-ph-border bg-ph-surface px-3 py-3 text-left text-sm text-ph-ink transition hover:border-ph-brand hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+                className="flex w-full items-center justify-between rounded-[var(--ph-radius-control)] border border-ph-border bg-ph-surface px-3 py-3 text-left text-sm text-ph-ink transition-[background-color,border-color,box-shadow] hover:border-[var(--ph-selected-border)] hover:bg-[var(--ph-surface-hover)] focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]"
                 onClick={() => void prepareConnection(methodItem, scheme)}
                 data-test={`${dataTest}-choose-${scheme.toLowerCase()}`}
               >

package/src/suite/components/suite-integration-rules.tsx

@@ -221,7 +221,7 @@ export function SuiteIntegrationRules({
           <p className="mt-4 text-sm text-ph-subtle">Loading rules...</p>
         ) : rules.length === 0 ? (
           <div
-            className="mt-4 rounded-lg border border-dashed border-ph-border px-4 py-6 text-center"
+            className="mt-4 rounded-[var(--ph-radius-surface)] border border-dashed border-ph-border bg-[var(--ph-surface-inset)] px-4 py-6 text-center"
             data-test={`${dataTest}-empty`}
           >
             <p className="text-sm text-ph-subtle">
@@ -234,7 +234,7 @@ export function SuiteIntegrationRules({
             {rules.map((rule) => (
               <li
                 key={rule.id}
-                className="flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted px-3 py-3"
+                className="flex items-center justify-between gap-3 rounded-[var(--ph-radius-surface)] border border-ph-border bg-[var(--ph-surface-inset)] px-3 py-3"
                 data-test={`${dataTest}-rule-${rule.id}`}
               >
                 <div className="min-w-0">
@@ -282,7 +282,7 @@ export function SuiteIntegrationRules({
 
         {canManage && formOpen && onCreate ? (
           <form
-            className="mt-4 space-y-3 rounded-lg border border-ph-border bg-ph-surface p-4"
+            className="mt-4 space-y-3 rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface p-4"
             onSubmit={(event) => void submitForm(event)}
             data-test={`${dataTest}-form`}
           >
@@ -435,7 +435,7 @@ export function SuiteIntegrationRules({
         </p>
         {events.length === 0 ? (
           <p
-            className="mt-4 rounded-lg border border-dashed border-ph-border px-4 py-6 text-center text-sm text-ph-subtle"
+            className="mt-4 rounded-[var(--ph-radius-surface)] border border-dashed border-ph-border bg-[var(--ph-surface-inset)] px-4 py-6 text-center text-sm text-ph-subtle"
             data-test={`${dataTest}-events-empty`}
           >
             No integration events yet.
@@ -445,7 +445,7 @@ export function SuiteIntegrationRules({
             {events.map((event) => (
               <li
                 key={event.id}
-                className="flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted px-3 py-2"
+                className="flex items-center justify-between gap-3 rounded-[var(--ph-radius-surface)] border border-ph-border bg-[var(--ph-surface-inset)] px-3 py-2"
               >
                 <div className="min-w-0">
                   <p className="truncate text-sm text-ph-ink">

package/src/suite/components/suite-layout.test.tsx

@@ -1,7 +1,11 @@
-import { cleanup, render, screen, within } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 
-import { sidebarColumnWidth } from "../lib/use-sidebar-width";
+import {
+  SIDEBAR_MAX_WIDTH,
+  SIDEBAR_RAIL_WIDTH,
+  sidebarColumnWidth,
+} from "../lib/use-sidebar-width";
 import { SuiteAppLayout } from "./suite-app-layout";
 import { SuitePageHeader } from "./suite-layout";
 
@@ -36,6 +40,31 @@ describe("sidebar resize handle", () => {
     expect(handle?.previousElementSibling).toHaveClass("isolate");
     expect(handle).toHaveClass("z-20");
   });
+
+  it("supports range-style keyboard minimum, maximum, and steps", () => {
+    const onResizeBy = vi.fn();
+    render(
+      <SuiteAppLayout
+        sidebarWidth={240}
+        onStartResize={() => {}}
+        onResizeBy={onResizeBy}
+        sidebar={<div>Sidebar</div>}
+      >
+        Page
+      </SuiteAppLayout>,
+    );
+
+    const handle = screen.getByRole("separator", { name: "Resize sidebar" });
+    fireEvent.keyDown(handle, { key: "Home" });
+    fireEvent.keyDown(handle, { key: "End" });
+    fireEvent.keyDown(handle, { key: "ArrowLeft" });
+    fireEvent.keyDown(handle, { key: "ArrowRight" });
+
+    expect(onResizeBy).toHaveBeenNthCalledWith(1, SIDEBAR_RAIL_WIDTH - 240);
+    expect(onResizeBy).toHaveBeenNthCalledWith(2, SIDEBAR_MAX_WIDTH - 240);
+    expect(onResizeBy).toHaveBeenNthCalledWith(3, -16);
+    expect(onResizeBy).toHaveBeenNthCalledWith(4, 16);
+  });
 });
 
 describe("suite scroll ownership", () => {

package/src/suite/components/suite-layout.tsx

@@ -192,7 +192,7 @@ export function SuitePageHeader({
       data-test={dataTest}
       data-stuck={sticky ? (stuck ? 'true' : 'false') : undefined}
       className={cn(
-        'flex min-w-0 shrink-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3',
+        'suite-page-header flex min-w-0 shrink-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3',
         // No extra pt here — page inset sets the shared title baseline.
         sticky && 'suite-page-header-sticky',
         className,
@@ -213,7 +213,7 @@ export function SuitePageHeader({
         <div className="flex min-w-0 items-center gap-3">
           {resolvedIcon ? (
             <div
-              className="hidden shrink-0 sm:flex sm:items-center [&_svg]:h-6 [&_svg]:w-6"
+              className="suite-page-header__icon hidden shrink-0 sm:flex sm:items-center [&_svg]:h-6 [&_svg]:w-6"
               aria-hidden="true"
             >
               {resolvedIcon}
@@ -222,14 +222,14 @@ export function SuitePageHeader({
           <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
             <h1
               className={cn(
-                'min-w-0 break-words font-display text-[1.375rem] font-semibold leading-tight tracking-tight text-ph-ink text-balance sm:text-2xl',
+                'ph-page-title min-w-0 break-words font-display font-semibold text-ph-ink text-balance',
                 titleClassName,
               )}
             >
               {title}
             </h1>
             {badge ? (
-              <span className="rounded-md bg-ph-muted px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-ph-subtle">
+              <span className="rounded-[var(--ph-radius-control)] bg-ph-muted px-2 py-0.5 text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-wide text-ph-subtle">
                 {badge}
               </span>
             ) : null}

package/src/suite/components/suite-mobile-drawer.tsx

@@ -98,7 +98,7 @@ export function SuiteMobileDrawer({
             data-test={panelDataTest}
             aria-modal="true"
             className={cn(
-              "fixed inset-y-0 left-0 z-50 flex h-dvh max-h-dvh w-[86%] max-w-72 flex-col overflow-hidden bg-ph-surface shadow-xl outline-none motion-safe:transition-transform motion-safe:ease-spring-fast lg:hidden",
+              "fixed inset-y-0 left-0 z-50 flex h-dvh max-h-dvh w-[86%] max-w-72 flex-col overflow-hidden border-r border-ph-border bg-ph-surface shadow-[var(--ph-shadow-floating)] outline-none motion-safe:transition-transform motion-safe:ease-spring-fast lg:hidden",
               side === "right" && "left-auto right-0",
               shown
                 ? "translate-x-0"
@@ -127,7 +127,7 @@ export function SuiteMobileDrawer({
                     type="button"
                     id={closeButtonId}
                     data-test={closeButtonDataTest}
-                    className="-mr-1.5 inline-flex h-11 w-11 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+                    className="ph-btn ph-btn-ghost ph-btn-square -mr-1.5 h-11 w-11 text-ph-mutedtext"
                     aria-label={closeLabel}
                   >
                     <X className="h-4 w-4" aria-hidden />

package/src/suite/components/suite-mobile-header.tsx

@@ -54,7 +54,7 @@ export function SuiteMobileHeader({
           type="button"
           id={menuId}
           data-test={menuDataTest}
-          className="suite-press inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+          className="ph-btn ph-btn-ghost ph-btn-square suite-press h-11 w-11 shrink-0 text-ph-ink"
           onClick={onMenuClick}
           aria-label={menuLabel}
         >

package/src/suite/components/suite-notification-bell.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { Bell } from "iconoir-react";
 
+import { trackSuiteEvent } from "../../lib/suite-analytics";
 import type { SuiteDropdownMenuComponent } from "../lib/injected";
 import { useSuiteNotifications } from "../lib/suite-notifications";
 
@@ -50,7 +51,14 @@ export function SuiteNotificationBell({
 
   const onOpenChange = (next: boolean) => {
     setOpen(next);
-    if (next) refresh();
+    if (next) {
+      trackSuiteEvent("UI Opened", {
+        view: "notification_bell",
+        kind: "notifications",
+        unread_count: unread,
+      });
+      refresh();
+    }
   };
 
   return (
@@ -65,7 +73,7 @@ export function SuiteNotificationBell({
       open={open}
       onOpenChange={onOpenChange}
       trigger={
-        <span className="relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
+        <span className="relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink">
           <span className="relative inline-flex h-5 w-5">
             <Bell className="h-5 w-5" strokeWidth={1.75} aria-hidden />
             {unread > 0 ? (
@@ -84,8 +92,14 @@ export function SuiteNotificationBell({
             type="button"
             id={`${dataTest}-mark-all`}
             data-test={`${dataTest}-mark-all`}
-            onClick={markAllRead}
-            className="text-xs font-medium text-ph-brand hover:underline"
+            onClick={() => {
+              trackSuiteEvent("Notification Read", {
+                operation: "all",
+                count: unread,
+              });
+              markAllRead();
+            }}
+            className="ph-btn ph-btn-link ph-btn-xs text-xs"
           >
             Mark all read
           </button>
@@ -104,9 +118,16 @@ export function SuiteNotificationBell({
               data-test={`${dataTest}-item-${n.id}`}
               onClick={() => {
                 setOpen(false);
+                trackSuiteEvent("Notification Read", {
+                  operation: "read",
+                  notification_id: n.id,
+                  kind: n.kind,
+                  source_app: n.source_app,
+                  unread: !n.read_at,
+                });
                 select(n);
               }}
-              className="flex w-full flex-col gap-0.5 px-3 py-2 text-left transition hover:bg-ph-muted"
+              className="ph-dropdown-item flex w-full flex-col items-stretch gap-0.5 px-3 py-2 text-left"
             >
               <span className="flex items-center gap-2">
                 {!n.read_at ? (
@@ -124,7 +145,7 @@ export function SuiteNotificationBell({
                   {n.body}
                 </span>
               ) : null}
-              <span className="text-[11px] uppercase tracking-wide text-ph-subtle">
+              <span className="text-xs text-ph-subtle">
                 {n.source_app} · {timeAgo(n.created_at)}
               </span>
             </button>

package/src/suite/components/suite-notification-settings.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Alert, Badge, Button, Card } from "@/components/ui";
+import { trackSuiteEvent } from "../../lib/suite-analytics";
+
+export type SuiteWebPushState =
+  | "unsupported"
+  | "unconfigured"
+  | "default"
+  | "granted"
+  | "denied"
+  | "subscribed";
+
+/** Structural contract matching `createWebPushClient` from @xenide-io/suite-client. */
+export interface SuiteWebPushController {
+  supported(): boolean;
+  getState(): Promise<SuiteWebPushState>;
+  enable(): Promise<void>;
+  disable(): Promise<void>;
+}
+
+export interface SuiteNotificationSettingsProps {
+  controller: SuiteWebPushController;
+  title?: string;
+  description?: string;
+  dataTest?: string;
+  className?: string;
+}
+
+const STATUS_COPY: Record<SuiteWebPushState, string> = {
+  unsupported: "This browser does not support browser notifications.",
+  unconfigured: "Browser notifications are not configured on the server yet.",
+  default: "Get notified on this device when a suite notification arrives.",
+  granted: "Permission granted — turn on browser notifications for this device.",
+  denied:
+    "Notifications are blocked for this site. Allow them in your browser's site settings, then try again.",
+  subscribed: "This device receives browser notifications.",
+};
+
+/**
+ * Settings card that lets a user enable or disable browser notifications for
+ * this device. State and delivery live in the app's suite-client web push
+ * controller; this component is presentational.
+ */
+export function SuiteNotificationSettings({
+  controller,
+  title = "Notifications",
+  description = "Get suite notifications — tasks, documents and AI runs — as OS notifications on this device, even when the app is closed.",
+  dataTest = "suite-notification-settings",
+  className,
+}: SuiteNotificationSettingsProps) {
+  const [state, setState] = useState<SuiteWebPushState | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  const refresh = useCallback(async () => {
+    setState(await controller.getState());
+  }, [controller]);
+
+  useEffect(() => {
+    let active = true;
+    controller.getState().then((next) => {
+      if (active) setState(next);
+    });
+    return () => {
+      active = false;
+    };
+  }, [controller]);
+
+  const handleEnable = async () => {
+    setBusy(true);
+    setError("");
+    try {
+      await controller.enable();
+      await refresh();
+      trackSuiteEvent("Push Notifications Configured", {
+        enabled: true,
+        permission:
+          typeof Notification !== "undefined" ? Notification.permission : "unknown",
+      });
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not enable notifications.",
+      );
+      await refresh();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleDisable = async () => {
+    setBusy(true);
+    setError("");
+    try {
+      await controller.disable();
+      await refresh();
+      trackSuiteEvent("Push Notifications Configured", {
+        enabled: false,
+        permission:
+          typeof Notification !== "undefined" ? Notification.permission : "unknown",
+      });
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not disable notifications.",
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const subscribed = state === "subscribed";
+  const canEnable = state === "default" || state === "granted";
+
+  return (
+    <div className={className}>
+      <div>
+        <h2 className="text-xl font-semibold text-ph-ink">{title}</h2>
+        <p className="mt-1 text-sm text-ph-subtle">{description}</p>
+      </div>
+
+      {error ? (
+        <Alert
+          id={`${dataTest}-error`}
+          data-test={`${dataTest}-error`}
+          className="mt-4"
+          status="danger"
+          title="Notifications unavailable"
+          description={error}
+          live="assertive"
+        />
+      ) : null}
+
+      <Card
+        id={`${dataTest}-card`}
+        data-test={`${dataTest}-card`}
+        variant="outlined"
+        bodyClassName="p-5"
+        className="mt-4"
+      >
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-2">
+            <p className="text-sm font-medium text-ph-ink">
+              Browser notifications
+            </p>
+            {subscribed ? <Badge variant="success">On</Badge> : null}
+          </div>
+
+          {controller.supported() && canEnable ? (
+            <Button
+              id={`${dataTest}-enable`}
+              data-test={`${dataTest}-enable`}
+              variant="primary"
+              size="sm"
+              disabled={busy}
+              onClick={handleEnable}
+            >
+              {busy ? "Enabling…" : "Enable on this device"}
+            </Button>
+          ) : null}
+
+          {subscribed ? (
+            <Button
+              id={`${dataTest}-disable`}
+              data-test={`${dataTest}-disable`}
+              variant="secondary"
+              size="sm"
+              disabled={busy}
+              onClick={handleDisable}
+            >
+              {busy ? "Disabling…" : "Disable"}
+            </Button>
+          ) : null}
+        </div>
+
+        <p className="mt-3 text-sm text-ph-subtle">
+          {state === null ? "Checking this device…" : STATUS_COPY[state]}
+        </p>
+      </Card>
+    </div>
+  );
+}

package/src/suite/components/suite-palette-library.test.tsx

@@ -0,0 +1,46 @@
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { SuitePaletteLibrary } from "./suite-palette-library";
+
+vi.mock("@/suite/lib/palette-api", () => ({
+  fetchPaletteLibrary: vi.fn().mockResolvedValue({
+    collections: [
+      {
+        slug: "office",
+        name: "Office",
+        style: "line",
+        featured: true,
+        count: 1,
+        preview: ["/office.svg"],
+      },
+    ],
+  }),
+  fetchPaletteCollection: vi.fn(),
+  findPaletteIcons: vi.fn(),
+}));
+
+afterEach(cleanup);
+
+describe("SuitePaletteLibrary", () => {
+  it("moves from search into options and restores trigger focus on Escape", async () => {
+    const user = userEvent.setup();
+    render(<SuitePaletteLibrary onPick={vi.fn()} />);
+
+    const trigger = screen.getByRole("button", { name: "All libraries" });
+    await user.click(trigger);
+    await waitFor(() => expect(screen.getByText("Office")).toBeInTheDocument());
+
+    const search = screen.getByRole("searchbox", { name: "Search libraries" });
+    expect(search).toHaveFocus();
+    await user.keyboard("{ArrowDown}");
+    expect(screen.getByRole("option", { name: "All libraries" })).toHaveFocus();
+    await user.keyboard("{ArrowDown}");
+    expect(screen.getByRole("option", { name: /Office/ })).toHaveFocus();
+    await user.keyboard("{Escape}");
+
+    await waitFor(() => expect(trigger).toHaveFocus());
+    expect(screen.queryByRole("listbox", { name: "Libraries" })).not.toBeInTheDocument();
+  });
+});