@xenide-io/the-old-ui-theme 0.9.17 → 0.10.0

package/dist/suite.mjs

@@ -12,7 +12,7 @@ import {
   Toggle,
   Tooltip,
   cn
-} from "./chunk-6SVJAU5K.mjs";
+} from "./chunk-LHE4ROON.mjs";
 import {
   SUITE_THEME_CHANNEL,
   SUITE_THEME_COOKIE,
@@ -441,7 +441,7 @@ function SourceAppGlyph({
       {
         src: SOURCE_APP_LOGOS[app],
         alt: "",
-        className: cn2("h-7 w-7 shrink-0 rounded-lg object-contain", className)
+        className: cn2("h-7 w-7 shrink-0 rounded-[var(--ph-radius-control)] object-contain", className)
       }
     )
   );
@@ -564,8 +564,8 @@ function TodayTopBar({
     /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 items-center gap-3", children: [
       /* @__PURE__ */ jsx4("div", { className: "hidden shrink-0 sm:block", "aria-hidden": "true", children: icon }),
       /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
-        /* @__PURE__ */ jsx4("h1", { className: "font-display text-[1.625rem] font-bold leading-tight tracking-tight text-ph-ink sm:text-[2.25rem]", children: "Today" }),
-        appName ? /* @__PURE__ */ jsx4("span", { className: "rounded-md bg-ph-muted px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-ph-subtle", children: appName }) : null,
+        /* @__PURE__ */ jsx4("h1", { className: "ph-page-title font-display font-semibold text-ph-ink", children: "Today" }),
+        appName ? /* @__PURE__ */ jsx4("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", children: appName }) : null,
         /* @__PURE__ */ jsx4("span", { className: "text-sm text-ph-subtle", children: formatLongDate() })
       ] })
     ] }),
@@ -575,7 +575,7 @@ function TodayTopBar({
         type: "button",
         onClick: onRefresh,
         disabled: refreshing || loading,
-        className: "press-subtle inline-flex h-10 w-10 items-center justify-center rounded-lg text-ph-subtle transition hover:bg-ph-surface hover:text-ph-ink disabled:opacity-50",
+        className: "ph-btn ph-btn-ghost ph-btn-square press-subtle h-10 w-10 text-ph-subtle",
         "data-test": "today-refresh",
         "aria-label": "Refresh today",
         children: /* @__PURE__ */ jsx4(
@@ -649,14 +649,14 @@ function TodayPrimaryAction({
   dataTest = "today-primary-action"
 }) {
   const classes = cn2(
-    "today-primary-action group relative flex w-full max-w-md items-center gap-3 overflow-hidden rounded-xl px-3.5 py-2.5 text-left transition sm:px-4 sm:py-3",
+    "today-primary-action group relative flex w-full max-w-md items-center gap-3 overflow-hidden rounded-[var(--ph-radius-surface)] px-3.5 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)] sm:px-4 sm:py-3",
     `today-primary-action--${accent}`,
     active && "today-primary-action--active",
     loading && "pointer-events-none opacity-70",
     className
   );
   const body = /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx4("span", { className: "today-primary-action__icon inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg sm:h-10 sm:w-10", children: icon }),
+    /* @__PURE__ */ jsx4("span", { className: "today-primary-action__icon inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--ph-radius-control)] sm:h-10 sm:w-10", children: icon }),
     /* @__PURE__ */ jsxs4("span", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ jsx4("span", { className: "block text-sm font-semibold tracking-tight sm:text-base", children: label }),
       description ? /* @__PURE__ */ jsx4("span", { className: "mt-0.5 block text-xs opacity-80 sm:text-sm", children: description }) : null
@@ -664,7 +664,7 @@ function TodayPrimaryAction({
     /* @__PURE__ */ jsx4(
       "span",
       {
-        className: "today-primary-action__chevron shrink-0 text-base opacity-60 transition group-hover:translate-x-0.5 group-hover:opacity-100",
+        className: "today-primary-action__chevron shrink-0 text-base opacity-60 transition-[transform,opacity] group-hover:translate-x-0.5 group-hover:opacity-100",
         "aria-hidden": true,
         children: "\u2192"
       }
@@ -706,7 +706,7 @@ function TodayEmptyAction({
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: "rounded-lg border border-dashed border-ph-border/80 bg-ph-muted/30 px-4 py-4 text-center",
+      className: "rounded-[var(--ph-radius-surface)] border border-dashed border-ph-border/80 bg-[var(--ph-surface-inset)] px-4 py-4 text-center",
       "data-test": dataTest,
       children: [
         /* @__PURE__ */ jsx4("p", { className: "text-sm font-semibold text-ph-ink", children: title }),
@@ -761,7 +761,7 @@ function TodayAskAiCard({
   href
 }) {
   const classes = cn2(
-    "group flex w-full items-start gap-3.5 rounded-2xl border border-ph-border/70 bg-ph-surface px-4 py-3.5 text-left shadow-[0_1px_12px_-8px_rgba(15,23,42,0.1)] transition hover:border-ph-brand/35 hover:bg-[color-mix(in_oklab,var(--ph-accent)_6%,var(--ph-surface))] sm:px-5",
+    "suite-press group flex w-full items-start gap-3.5 rounded-[var(--ph-radius-surface)] border border-ph-border/70 bg-ph-surface px-4 py-3.5 text-left transition-[background-color,border-color,box-shadow] hover:border-ph-brand/35 hover:bg-[var(--ph-surface-hover)] hover:shadow-[var(--ph-shadow-raised)] focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)] sm:px-5",
     className
   );
   const body = /* @__PURE__ */ jsxs4(Fragment2, { children: [
@@ -815,7 +815,7 @@ function TodaySection({
           "span",
           {
             className: cn2(
-              "inline-flex h-10 w-10 sm:h-11 sm:w-11 shrink-0 items-center justify-center rounded-2xl shadow-sm ring-1 ring-black/[0.06]",
+              "inline-flex h-10 w-10 sm:h-11 sm:w-11 shrink-0 items-center justify-center rounded-[var(--ph-radius-surface)] border border-ph-border/70 shadow-[var(--ph-shadow-control)]",
               iconClassName != null ? iconClassName : "bg-ph-muted text-ph-ink"
             ),
             children: /* @__PURE__ */ jsx4(Icon, { className: "h-5 w-5", "aria-hidden": true })
@@ -839,7 +839,7 @@ function TodayPanel({
     "div",
     {
       className: cn2(
-        "border-ph-border/70 rounded-2xl border bg-ph-surface p-5 shadow-[0_1px_16px_-8px_rgba(15,23,42,0.12)] sm:p-5",
+        "rounded-[var(--ph-radius-surface)] border border-ph-border/70 bg-ph-surface p-5 sm:p-5",
         className
       ),
       children
@@ -850,7 +850,7 @@ function TodayEmptyState({
   title,
   description
 }) {
-  return /* @__PURE__ */ jsxs4("div", { className: "border-ph-border/80 rounded-xl border border-dashed px-5 py-8 text-center", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "rounded-[var(--ph-radius-surface)] border border-dashed border-ph-border/80 bg-[var(--ph-surface-inset)] px-5 py-8 text-center", children: [
     /* @__PURE__ */ jsx4("p", { className: "text-sm font-semibold text-ph-ink", children: title }),
     description ? /* @__PURE__ */ jsx4("p", { className: "mt-1.5 text-sm leading-relaxed text-ph-subtle", children: description }) : null
   ] });
@@ -863,16 +863,16 @@ import { NavArrowDown as ChevronDown, OpenNewWindow } from "iconoir-react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function appSwitcherTriggerClass(open, collapsed = false) {
   return cn2(
-    "group flex min-w-0 items-center gap-2 rounded-lg border px-2 py-1.5 text-left transition-all duration-200",
+    "group flex min-w-0 items-center gap-2 rounded-[var(--ph-radius-control)] border px-2 py-1.5 text-left transition-[color,background-color,border-color,box-shadow] duration-150",
     collapsed ? "h-11 w-11 justify-center px-0 py-0" : "w-full",
-    open ? "border-ph-brand/30 bg-ph-muted shadow-[0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-ph-brand/15" : "border-transparent hover:border-ph-border hover:bg-ph-muted/80 hover:shadow-sm"
+    open ? "border-[var(--ph-selected-border)] bg-[var(--ph-selected-bg)] shadow-[var(--ph-shadow-control)]" : "border-transparent hover:border-ph-border hover:bg-[var(--ph-surface-hover)]"
   );
 }
 function appSwitcherMarkClass() {
-  return "h-8 w-8 shrink-0 rounded-lg";
+  return "h-8 w-8 shrink-0 rounded-[var(--ph-radius-control)]";
 }
 function appSwitcherMenuItemClass() {
-  return "rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80 focus-visible:shadow-none";
+  return "px-2 py-2";
 }
 function AppSwitcherMark({
   children,
@@ -898,7 +898,7 @@ function AppSwitcherChevron({
       "span",
       {
         className: cn2(
-          "absolute bottom-0 right-0 flex h-3 w-3 items-center justify-center rounded-full border border-ph-border bg-ph-surface shadow-sm transition-colors",
+          "absolute bottom-0 right-0 flex h-3 w-3 items-center justify-center rounded-full border border-ph-border bg-ph-surface transition-colors",
           open && "border-ph-brand/40 bg-ph-brand/10"
         ),
         "aria-hidden": true,
@@ -918,7 +918,7 @@ function AppSwitcherChevron({
     "span",
     {
       className: cn2(
-        "border-ph-border/80 flex h-5 w-5 shrink-0 items-center justify-center rounded-lg border bg-ph-canvas shadow-sm transition-all duration-200",
+        "border-ph-border/80 flex h-5 w-5 shrink-0 items-center justify-center rounded-[var(--ph-radius-control)] border bg-ph-canvas transition-[color,background-color,border-color] duration-150",
         open ? "border-ph-brand/35 bg-ph-brand/10 text-ph-brand" : "text-ph-mutedtext group-hover:border-ph-border group-hover:bg-ph-surface"
       ),
       "aria-hidden": true,
@@ -974,7 +974,7 @@ function AppSwitcher({
         }
       ),
       children: /* @__PURE__ */ jsxs5("div", { id: "app-switcher-menu", className: "p-1", "data-test": "app-switcher-menu", children: [
-        /* @__PURE__ */ jsx5("p", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext", children: "Switch application" }),
+        /* @__PURE__ */ jsx5("p", { className: "px-3 py-2 text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-[0.08em] text-ph-mutedtext", children: "Switch application" }),
         apps.filter((app) => app.slug !== currentApp).map((app) => /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
           /* @__PURE__ */ jsx5(
             DropdownItem2,
@@ -1016,7 +1016,7 @@ function AppSwitcher({
                 setOpen(false);
                 onSelect(app, { newTab: true });
               },
-              className: "absolute right-1.5 top-1/2 z-[1] flex h-8 -translate-y-1/2 justify-center rounded-md p-0 text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:shadow-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ph-brand/35",
+              className: "absolute right-1.5 top-1/2 z-[1] flex h-8 -translate-y-1/2 justify-center p-0 text-ph-mutedtext",
               style: { width: "2rem" },
               children: /* @__PURE__ */ jsx5(OpenNewWindow, { className: "h-4 w-4", "aria-hidden": "true" })
             }
@@ -1352,7 +1352,7 @@ function SuiteNotificationBell({
       panelClassName: "w-80 overflow-hidden p-0",
       open,
       onOpenChange,
-      trigger: /* @__PURE__ */ jsx7("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", children: /* @__PURE__ */ jsxs6("span", { className: "relative inline-flex h-5 w-5", children: [
+      trigger: /* @__PURE__ */ jsx7("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", children: /* @__PURE__ */ jsxs6("span", { className: "relative inline-flex h-5 w-5", children: [
         /* @__PURE__ */ jsx7(Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
         unread > 0 ? /* @__PURE__ */ jsx7("span", { className: "pointer-events-none absolute -right-2 -top-2 z-[1] flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-[var(--ph-on-accent)] ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
       ] }) }),
@@ -1366,7 +1366,7 @@ function SuiteNotificationBell({
               id: `${dataTest}-mark-all`,
               "data-test": `${dataTest}-mark-all`,
               onClick: markAllRead,
-              className: "text-xs font-medium text-ph-brand hover:underline",
+              className: "ph-btn ph-btn-link ph-btn-xs text-xs",
               children: "Mark all read"
             }
           ) : null
@@ -1380,7 +1380,7 @@ function SuiteNotificationBell({
               setOpen(false);
               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",
             children: [
               /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
                 !n.read_at ? /* @__PURE__ */ jsx7(
@@ -1393,7 +1393,7 @@ function SuiteNotificationBell({
                 /* @__PURE__ */ jsx7("span", { className: "truncate text-sm font-medium text-ph-ink", children: n.title })
               ] }),
               n.body ? /* @__PURE__ */ jsx7("span", { className: "line-clamp-2 text-xs text-ph-mutedtext", children: n.body }) : null,
-              /* @__PURE__ */ jsxs6("span", { className: "text-[11px] uppercase tracking-wide text-ph-subtle", children: [
+              /* @__PURE__ */ jsxs6("span", { className: "text-xs text-ph-subtle", children: [
                 n.source_app,
                 " \xB7 ",
                 timeAgo(n.created_at)
@@ -1407,9 +1407,136 @@ function SuiteNotificationBell({
   );
 }
 
+// src/suite/components/suite-notification-settings.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState4 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var STATUS_COPY = {
+  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 \u2014 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."
+};
+function SuiteNotificationSettings({
+  controller,
+  title = "Notifications",
+  description = "Get suite notifications \u2014 tasks, documents and AI runs \u2014 as OS notifications on this device, even when the app is closed.",
+  dataTest = "suite-notification-settings",
+  className
+}) {
+  const [state, setState] = useState4(null);
+  const [busy, setBusy] = useState4(false);
+  const [error, setError] = useState4("");
+  const refresh = useCallback2(async () => {
+    setState(await controller.getState());
+  }, [controller]);
+  useEffect2(() => {
+    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();
+    } 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();
+    } 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 /* @__PURE__ */ jsxs7("div", { className, children: [
+    /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsx8("h2", { className: "text-xl font-semibold text-ph-ink", children: title }),
+      /* @__PURE__ */ jsx8("p", { className: "mt-1 text-sm text-ph-subtle", children: description })
+    ] }),
+    error ? /* @__PURE__ */ jsx8(
+      Alert,
+      {
+        id: `${dataTest}-error`,
+        "data-test": `${dataTest}-error`,
+        className: "mt-4",
+        status: "danger",
+        title: "Notifications unavailable",
+        description: error,
+        live: "assertive"
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs7(
+      Card,
+      {
+        id: `${dataTest}-card`,
+        "data-test": `${dataTest}-card`,
+        variant: "outlined",
+        bodyClassName: "p-5",
+        className: "mt-4",
+        children: [
+          /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium text-ph-ink", children: "Browser notifications" }),
+              subscribed ? /* @__PURE__ */ jsx8(Badge, { variant: "success", children: "On" }) : null
+            ] }),
+            controller.supported() && canEnable ? /* @__PURE__ */ jsx8(
+              Button,
+              {
+                id: `${dataTest}-enable`,
+                "data-test": `${dataTest}-enable`,
+                variant: "primary",
+                size: "sm",
+                disabled: busy,
+                onClick: handleEnable,
+                children: busy ? "Enabling\u2026" : "Enable on this device"
+              }
+            ) : null,
+            subscribed ? /* @__PURE__ */ jsx8(
+              Button,
+              {
+                id: `${dataTest}-disable`,
+                "data-test": `${dataTest}-disable`,
+                variant: "secondary",
+                size: "sm",
+                disabled: busy,
+                onClick: handleDisable,
+                children: busy ? "Disabling\u2026" : "Disable"
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx8("p", { className: "mt-3 text-sm text-ph-subtle", children: state === null ? "Checking this device\u2026" : STATUS_COPY[state] })
+        ]
+      }
+    )
+  ] });
+}
+
 // src/suite/components/command-palette-host.tsx
-import { useEffect as useEffect2, useState as useState4 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useState as useState5 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function isEditableTarget() {
   if (typeof document === "undefined") return false;
   const el = document.activeElement;
@@ -1429,8 +1556,8 @@ function CommandPaletteHost({
   inputDataTest,
   commandPalette: CommandPalette
 }) {
-  const [open, setOpen] = useState4(false);
-  useEffect2(() => {
+  const [open, setOpen] = useState5(false);
+  useEffect3(() => {
     const onKey = (e) => {
       if (!((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k")) return;
       if (!open && isEditableTarget()) return;
@@ -1441,7 +1568,7 @@ function CommandPaletteHost({
     return () => window.removeEventListener("keydown", onKey);
   }, [open]);
   if (!isAuthenticated) return null;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     CommandPalette,
     {
       items,
@@ -1457,10 +1584,10 @@ function CommandPaletteHost({
 }
 
 // src/suite/lib/use-idle-mount.ts
-import { useEffect as useEffect3, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
 function useIdleMount(timeoutMs = 1200) {
-  const [ready, setReady] = useState5(false);
-  useEffect3(() => {
+  const [ready, setReady] = useState6(false);
+  useEffect4(() => {
     let timeoutId = 0;
     let idleId = 0;
     const activate = () => setReady(true);
@@ -1475,18 +1602,18 @@ function useIdleMount(timeoutMs = 1200) {
 }
 
 // src/suite/components/deferred-chrome.tsx
-import { Fragment as Fragment3, jsx as jsx9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10 } from "react/jsx-runtime";
 function DeferredChrome({ children }) {
   const ready = useIdleMount();
   if (!ready) return null;
-  return /* @__PURE__ */ jsx9(Fragment3, { children });
+  return /* @__PURE__ */ jsx10(Fragment3, { children });
 }
 
 // src/suite/components/suite-mobile-drawer.tsx
 import * as Dialog from "@radix-ui/react-dialog";
-import { useEffect as useEffect4, useState as useState6 } from "react";
+import { useEffect as useEffect5, useState as useState7 } from "react";
 import { Xmark as X } from "iconoir-react";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function SuiteMobileDrawer({
   open,
   onClose,
@@ -1506,9 +1633,9 @@ function SuiteMobileDrawer({
   closeButtonDataTest,
   panelClassName
 }) {
-  const [rendered, setRendered] = useState6(open);
-  const [shown, setShown] = useState6(open);
-  useEffect4(() => {
+  const [rendered, setRendered] = useState7(open);
+  const [shown, setShown] = useState7(open);
+  useEffect5(() => {
     if (open) {
       queueMicrotask(() => setRendered(true));
       let inner = 0;
@@ -1525,8 +1652,8 @@ function SuiteMobileDrawer({
     return () => window.clearTimeout(timeout);
   }, [open, durationMs]);
   if (!rendered) return null;
-  return /* @__PURE__ */ jsx10(Dialog.Root, { open, onOpenChange: (nextOpen) => !nextOpen && onClose(), children: /* @__PURE__ */ jsxs7(Dialog.Portal, { forceMount: true, children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(Dialog.Root, { open, onOpenChange: (nextOpen) => !nextOpen && onClose(), children: /* @__PURE__ */ jsxs8(Dialog.Portal, { forceMount: true, children: [
+    /* @__PURE__ */ jsx11(
       Dialog.Overlay,
       {
         forceMount: true,
@@ -1540,22 +1667,22 @@ function SuiteMobileDrawer({
         style: { transitionDuration: `${durationMs}ms` }
       }
     ),
-    /* @__PURE__ */ jsx10(Dialog.Content, { forceMount: true, asChild: true, children: /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx11(Dialog.Content, { forceMount: true, asChild: true, children: /* @__PURE__ */ jsxs8(
       "aside",
       {
         role: "dialog",
         "data-test": panelDataTest,
         "aria-modal": "true",
         className: cn2(
-          "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" : side === "right" ? "translate-x-full" : "-translate-x-full",
           panelClassName
         ),
         style: { transitionDuration: `${durationMs}ms` },
         children: [
-          /* @__PURE__ */ jsx10(Dialog.Title, { className: "sr-only", children: dialogLabel }),
-          showCloseButton ? /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsx11(Dialog.Title, { className: "sr-only", children: dialogLabel }),
+          showCloseButton ? /* @__PURE__ */ jsxs8(
             "div",
             {
               className: cn2(
@@ -1563,22 +1690,22 @@ function SuiteMobileDrawer({
                 title ? "justify-between" : "justify-end"
               ),
               children: [
-                title ? /* @__PURE__ */ jsx10("span", { className: "truncate text-sm font-semibold text-ph-ink", children: title }) : null,
-                /* @__PURE__ */ jsx10(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx10(
+                title ? /* @__PURE__ */ jsx11("span", { className: "truncate text-sm font-semibold text-ph-ink", children: title }) : null,
+                /* @__PURE__ */ jsx11(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx11(
                   "button",
                   {
                     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,
-                    children: /* @__PURE__ */ jsx10(X, { className: "h-4 w-4", "aria-hidden": true })
+                    children: /* @__PURE__ */ jsx11(X, { className: "h-4 w-4", "aria-hidden": true })
                   }
                 ) })
               ]
             }
           ) : null,
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "div",
             {
               "data-test": "suite-mobile-drawer-body",
@@ -1594,7 +1721,7 @@ function SuiteMobileDrawer({
 
 // src/suite/components/suite-mobile-header.tsx
 import { Menu } from "iconoir-react";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function SuiteMobileHeader({
   onMenuClick,
   menuIcon: MenuIcon = Menu,
@@ -1606,7 +1733,7 @@ function SuiteMobileHeader({
   dataTest,
   className
 }) {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "header",
     {
       "data-test": dataTest,
@@ -1615,19 +1742,19 @@ function SuiteMobileHeader({
         className
       ),
       children: [
-        onMenuClick ? /* @__PURE__ */ jsx11(
+        onMenuClick ? /* @__PURE__ */ jsx12(
           "button",
           {
             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,
-            children: /* @__PURE__ */ jsx11(MenuIcon, { className: "h-5 w-5", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx12(MenuIcon, { className: "h-5 w-5", "aria-hidden": true })
           }
         ) : null,
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "div",
           {
             className: cn2(
@@ -1637,7 +1764,7 @@ function SuiteMobileHeader({
             children: title
           }
         ),
-        actions ? /* @__PURE__ */ jsx11("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
+        actions ? /* @__PURE__ */ jsx12("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
       ]
     }
   );
@@ -1645,24 +1772,24 @@ function SuiteMobileHeader({
 
 // src/suite/components/suite-layout.tsx
 import {
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useRef,
-  useState as useState7
+  useState as useState8
 } from "react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function SuiteBreadcrumbs({ items, className }) {
-  return /* @__PURE__ */ jsx12("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx12("ol", { className: "flex min-w-0 items-center gap-1.5", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx13("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx13("ol", { className: "flex min-w-0 items-center gap-1.5", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxs9("li", { className: "flex min-w-0 items-center gap-1.5", children: [
-      index > 0 ? /* @__PURE__ */ jsx12("span", { className: "select-none text-ph-border", "aria-hidden": "true", children: "/" }) : null,
-      item.href && !isLast ? /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsxs10("li", { className: "flex min-w-0 items-center gap-1.5", children: [
+      index > 0 ? /* @__PURE__ */ jsx13("span", { className: "select-none text-ph-border", "aria-hidden": "true", children: "/" }) : null,
+      item.href && !isLast ? /* @__PURE__ */ jsx13(
         "a",
         {
           href: item.href,
           className: "truncate transition hover:text-ph-ink",
           children: item.label
         }
-      ) : /* @__PURE__ */ jsx12(
+      ) : /* @__PURE__ */ jsx13(
         "span",
         {
           className: cn2(
@@ -1687,7 +1814,7 @@ function SuitePage({
   role,
   "aria-live": ariaLive
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     Component,
     {
       id,
@@ -1728,8 +1855,8 @@ function SuitePageHeader({
   sticky = true
 }) {
   const headerRef = useRef(null);
-  const [stuck, setStuck] = useState7(false);
-  useEffect5(() => {
+  const [stuck, setStuck] = useState8(false);
+  useEffect6(() => {
     if (!sticky) return;
     if (typeof IntersectionObserver === "undefined") return;
     const el = headerRef.current;
@@ -1755,7 +1882,7 @@ function SuitePageHeader({
       sentinel.remove();
     };
   }, [sticky]);
-  const resolvedIcon = todayIcon ? /* @__PURE__ */ jsx12(
+  const resolvedIcon = todayIcon ? /* @__PURE__ */ jsx13(
     TodayTimeIcon,
     {
       className: cn2(
@@ -1764,46 +1891,46 @@ function SuitePageHeader({
       )
     }
   ) : icon;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "header",
     {
       ref: headerRef,
       "data-test": dataTest,
       "data-stuck": sticky ? stuck ? "true" : "false" : void 0,
       className: cn2(
-        "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
       ),
       children: [
-        /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
-          eyebrow ? /* @__PURE__ */ jsx12("div", { className: "mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle", children: eyebrow }) : null,
-          breadcrumb ? /* @__PURE__ */ jsx12("div", { className: "mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle", children: breadcrumb }) : null,
-          /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 items-center gap-3", children: [
-            resolvedIcon ? /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsxs10("div", { className: "min-w-0 flex-1", children: [
+          eyebrow ? /* @__PURE__ */ jsx13("div", { className: "mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle", children: eyebrow }) : null,
+          breadcrumb ? /* @__PURE__ */ jsx13("div", { className: "mb-0.5 flex min-w-0 items-center gap-1.5 text-xs text-ph-subtle", children: breadcrumb }) : null,
+          /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 items-center gap-3", children: [
+            resolvedIcon ? /* @__PURE__ */ jsx13(
               "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",
                 children: resolvedIcon
               }
             ) : null,
-            /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
-              /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
+              /* @__PURE__ */ jsx13(
                 "h1",
                 {
                   className: cn2(
-                    "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
                   ),
                   children: title
                 }
               ),
-              badge ? /* @__PURE__ */ jsx12("span", { className: "rounded-md bg-ph-muted px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-ph-subtle", children: badge }) : null
+              badge ? /* @__PURE__ */ jsx13("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", children: badge }) : null
             ] })
           ] }),
-          description ? /* @__PURE__ */ jsx12(
+          description ? /* @__PURE__ */ jsx13(
             "div",
             {
               className: cn2(
@@ -1814,7 +1941,7 @@ function SuitePageHeader({
             }
           ) : null
         ] }),
-        actions ? /* @__PURE__ */ jsx12("div", { className: "flex max-w-full items-center gap-2 self-stretch overflow-x-auto pb-1 sm:shrink-0 sm:self-center sm:overflow-visible sm:pb-0", children: actions }) : null
+        actions ? /* @__PURE__ */ jsx13("div", { className: "flex max-w-full items-center gap-2 self-stretch overflow-x-auto pb-1 sm:shrink-0 sm:self-center sm:overflow-visible sm:pb-0", children: actions }) : null
       ]
     }
   );
@@ -1825,7 +1952,7 @@ function SuiteToolbar({
   label = "Page tools",
   dataTest
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       role: "toolbar",
@@ -1842,7 +1969,7 @@ function SuiteTabList({
   label,
   dataTest
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "nav",
     {
       "aria-label": label,
@@ -1861,7 +1988,7 @@ function SuiteSectionHeader({
   action,
   className
 }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: cn2(
@@ -1869,18 +1996,18 @@ function SuiteSectionHeader({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx12("h2", { className: "font-display text-balance text-lg font-semibold tracking-tight text-ph-ink sm:text-xl", children: title }),
-          description ? /* @__PURE__ */ jsx12("div", { className: "mt-1 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle", children: description }) : null
+        /* @__PURE__ */ jsxs10("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx13("h2", { className: "font-display text-balance text-lg font-semibold tracking-tight text-ph-ink sm:text-xl", children: title }),
+          description ? /* @__PURE__ */ jsx13("div", { className: "mt-1 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle", children: description }) : null
         ] }),
-        action ? /* @__PURE__ */ jsx12("div", { className: "flex min-h-[44px] shrink-0 items-center", children: action }) : null
+        action ? /* @__PURE__ */ jsx13("div", { className: "flex min-h-[44px] shrink-0 items-center", children: action }) : null
       ]
     }
   );
 }
 
 // src/suite/components/suite-settings-layout.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function SuiteSettingsLayout({
   children,
   sidebar,
@@ -1894,13 +2021,13 @@ function SuiteSettingsLayout({
   className,
   contentClassName
 }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     SuitePage,
     {
       dataTest,
       className: cn2("flex h-full flex-col overflow-hidden", className),
       children: [
-        header != null ? header : /* @__PURE__ */ jsx13(
+        header != null ? header : /* @__PURE__ */ jsx14(
           SuitePageHeader,
           {
             sticky: true,
@@ -1909,18 +2036,18 @@ function SuiteSettingsLayout({
             description
           }
         ),
-        loading != null ? loading : /* @__PURE__ */ jsxs10("div", { className: "suite-page-body mt-6 flex min-h-0 flex-1 flex-col", children: [
-          mobileNav ? /* @__PURE__ */ jsx13("div", { className: "sticky top-0 z-20 mb-2 shrink-0 bg-ph-canvas/95 backdrop-blur lg:hidden", children: mobileNav }) : null,
-          /* @__PURE__ */ jsxs10("div", { className: "flex min-h-0 flex-1 flex-col gap-6 lg:flex-row lg:gap-8", children: [
-            /* @__PURE__ */ jsx13(
+        loading != null ? loading : /* @__PURE__ */ jsxs11("div", { className: "suite-page-body mt-6 flex min-h-0 flex-1 flex-col", children: [
+          mobileNav ? /* @__PURE__ */ jsx14("div", { className: "suite-settings-mobile-bar sticky top-0 z-20 mb-2 shrink-0 lg:hidden", children: mobileNav }) : null,
+          /* @__PURE__ */ jsxs11("div", { className: "flex min-h-0 flex-1 flex-col gap-6 lg:flex-row lg:gap-8", children: [
+            /* @__PURE__ */ jsx14(
               "aside",
               {
                 "aria-label": "Settings",
-                className: "hidden w-56 shrink-0 bg-transparent lg:block lg:self-stretch lg:overflow-y-auto lg:overscroll-contain",
+                className: "suite-settings-sidebar hidden w-56 shrink-0 lg:block lg:self-stretch lg:overflow-y-auto lg:overscroll-contain",
                 children: sidebar
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               "div",
               {
                 className: cn2(
@@ -1941,7 +2068,7 @@ function SuiteSettingsLayout({
 import Image2 from "next/image";
 import { useRouter as useRouter2 } from "next/navigation";
 import { LogOut, Settings } from "iconoir-react";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function computeInitials(name, email) {
   const source = (name || email || "?").trim();
   return source.split(/[\s@]+/).filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
@@ -1979,7 +2106,7 @@ function SuiteUserMenu({
   const router = useRouter2();
   const initials = fallbackInitials != null ? fallbackInitials : computeInitials(name, email);
   const fallbackColor = avatarColorClass(email || name || "?");
-  const avatar = /* @__PURE__ */ jsx14("span", { className: "inline-flex h-10 w-10 items-center justify-center", children: /* @__PURE__ */ jsx14("span", { className: "inline-flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border border-ph-border", children: image ? /* @__PURE__ */ jsx14(
+  const avatar = /* @__PURE__ */ jsx15("span", { className: "inline-flex h-10 w-10 items-center justify-center", children: /* @__PURE__ */ jsx15("span", { className: "inline-flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border border-ph-border", children: image ? /* @__PURE__ */ jsx15(
     Image2,
     {
       src: image,
@@ -1989,7 +2116,7 @@ function SuiteUserMenu({
       className: "h-full w-full object-cover",
       unoptimized: true
     }
-  ) : /* @__PURE__ */ jsx14(
+  ) : /* @__PURE__ */ jsx15(
     "span",
     {
       className: cn2(
@@ -1999,14 +2126,14 @@ function SuiteUserMenu({
       children: initials
     }
   ) }) });
-  const trigger = showDetails ? /* @__PURE__ */ jsxs11("span", { className: "flex min-w-0 items-center gap-2", children: [
+  const trigger = showDetails ? /* @__PURE__ */ jsxs12("span", { className: "flex min-w-0 items-center gap-2", children: [
     avatar,
-    /* @__PURE__ */ jsxs11("span", { className: "flex min-w-0 flex-col text-left", children: [
-      /* @__PURE__ */ jsx14("span", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
-      subtitle ? /* @__PURE__ */ jsx14("span", { className: "truncate text-xs text-ph-mutedtext", children: subtitle }) : null
+    /* @__PURE__ */ jsxs12("span", { className: "flex min-w-0 flex-col text-left", children: [
+      /* @__PURE__ */ jsx15("span", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
+      subtitle ? /* @__PURE__ */ jsx15("span", { className: "truncate text-xs text-ph-mutedtext", children: subtitle }) : null
     ] })
   ] }) : avatar;
-  const accountMenu = /* @__PURE__ */ jsxs11(
+  const accountMenu = /* @__PURE__ */ jsxs12(
     DropdownMenu,
     {
       trigger,
@@ -2020,29 +2147,29 @@ function SuiteUserMenu({
       modal: false,
       className: cn2(
         "[&_.ph-dropdown-trigger]:rounded-full",
-        showDetails && "min-w-0 flex-1 [&_.ph-dropdown-trigger]:w-full [&_.ph-dropdown-trigger]:justify-start [&_.ph-dropdown-trigger]:rounded-lg",
+        showDetails && "min-w-0 flex-1 [&_.ph-dropdown-trigger]:w-full [&_.ph-dropdown-trigger]:justify-start [&_.ph-dropdown-trigger]:rounded-[var(--ph-radius-control)]",
         showSignOutAction ? void 0 : className
       ),
       "data-test": dataTest,
       children: [
-        /* @__PURE__ */ jsxs11("div", { className: "px-2 py-1.5", children: [
-          /* @__PURE__ */ jsx14("p", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
-          email ? /* @__PURE__ */ jsx14("p", { className: "truncate text-xs text-ph-mutedtext", children: email }) : null
+        /* @__PURE__ */ jsxs12("div", { className: "px-2 py-1.5", children: [
+          /* @__PURE__ */ jsx15("p", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
+          email ? /* @__PURE__ */ jsx15("p", { className: "truncate text-xs text-ph-mutedtext", children: email }) : null
         ] }),
-        /* @__PURE__ */ jsx14("div", { className: "my-1 border-t border-ph-border" }),
-        /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsx15("div", { className: "my-1 border-t border-ph-border" }),
+        /* @__PURE__ */ jsxs12(
           DropdownItem,
           {
             "data-test": `${dataTest}-settings`,
             onClick: () => router.push(settingsHref),
             children: [
-              /* @__PURE__ */ jsx14(Settings, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
+              /* @__PURE__ */ jsx15(Settings, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
               "Profile settings"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs11(DropdownItem, { "data-test": `${dataTest}-sign-out`, onClick: onSignOut, children: [
-          /* @__PURE__ */ jsx14(LogOut, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs12(DropdownItem, { "data-test": `${dataTest}-sign-out`, onClick: onSignOut, children: [
+          /* @__PURE__ */ jsx15(LogOut, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
           "Sign out"
         ] })
       ]
@@ -2051,7 +2178,7 @@ function SuiteUserMenu({
   if (!showSignOutAction) {
     return accountMenu;
   }
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: cn2(
@@ -2059,17 +2186,17 @@ function SuiteUserMenu({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx14("div", { className: "shrink-0", children: accountMenu }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15("div", { className: "shrink-0", children: accountMenu }),
+        /* @__PURE__ */ jsx15(
           "button",
           {
             type: "button",
             "data-test": `${dataTest}-visible-sign-out`,
             title: "Sign out",
             "aria-label": "Sign out",
-            className: "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-focus-ring",
+            className: "ph-btn ph-btn-ghost ph-btn-square h-10 w-10 shrink-0 text-ph-mutedtext",
             onClick: onSignOut,
-            children: /* @__PURE__ */ jsx14(LogOut, { className: "h-4 w-4", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx15(LogOut, { className: "h-4 w-4", "aria-hidden": true })
           }
         )
       ]
@@ -2079,7 +2206,7 @@ function SuiteUserMenu({
 
 // src/suite/components/suite-bottom-nav.tsx
 import Link from "next/link";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function SuiteBottomNav({
   items,
   ariaLabel = "Primary navigation",
@@ -2092,8 +2219,8 @@ function SuiteBottomNav({
     );
   }
   const activeIndex = items.findIndex((item) => item.active);
-  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
+    /* @__PURE__ */ jsx16(
       "div",
       {
         "aria-hidden": true,
@@ -2101,7 +2228,7 @@ function SuiteBottomNav({
         style: { height: "calc(60px + env(safe-area-inset-bottom))" }
       }
     ),
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsxs13(
       "nav",
       {
         "aria-label": ariaLabel,
@@ -2116,12 +2243,12 @@ function SuiteBottomNav({
           "--suite-nav-active": activeIndex >= 0 ? activeIndex : 0
         },
         children: [
-          activeIndex >= 0 ? /* @__PURE__ */ jsx15("span", { "aria-hidden": true, className: "suite-bottom-nav__indicator" }) : null,
+          activeIndex >= 0 ? /* @__PURE__ */ jsx16("span", { "aria-hidden": true, className: "suite-bottom-nav__indicator" }) : null,
           items.map((item) => {
             var _a2;
             const Icon = item.icon;
             const active = Boolean(item.active);
-            return /* @__PURE__ */ jsxs12(
+            return /* @__PURE__ */ jsxs13(
               Link,
               {
                 href: item.href,
@@ -2129,18 +2256,18 @@ function SuiteBottomNav({
                 "data-test": (_a2 = item.dataTest) != null ? _a2 : `suite-nav-${item.label.toLowerCase().replace(/\s+/g, "-")}`,
                 "aria-current": active ? "page" : void 0,
                 className: cn2(
-                  "suite-bottom-nav__item relative flex min-h-[60px] min-w-0 flex-col items-center justify-center gap-1 px-1 pb-1.5 pt-2 text-[10px] font-medium leading-none text-ph-mutedtext transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ph-brand motion-reduce:transition-none",
+                  "suite-bottom-nav__item relative flex min-h-[60px] min-w-0 flex-col items-center justify-center gap-1 px-1 pb-1.5 pt-2 text-[length:var(--ph-type-overline)] font-medium leading-none text-ph-mutedtext transition-colors duration-200 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_3px_color-mix(in_oklab,var(--ph-focus-ring)_30%,transparent)] motion-reduce:transition-none",
                   active && "font-semibold text-ph-brand"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx16(
                     "span",
                     {
                       className: cn2(
                         "suite-bottom-nav__icon relative z-10 inline-flex items-center justify-center",
                         active && "suite-bottom-nav__icon--active"
                       ),
-                      children: /* @__PURE__ */ jsx15(
+                      children: /* @__PURE__ */ jsx16(
                         Icon,
                         {
                           className: "h-6 w-6",
@@ -2150,7 +2277,7 @@ function SuiteBottomNav({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx15("span", { className: "relative z-10 max-w-full truncate", children: item.label })
+                  /* @__PURE__ */ jsx16("span", { className: "relative z-10 max-w-full truncate", children: item.label })
                 ]
               },
               item.href
@@ -2164,7 +2291,7 @@ function SuiteBottomNav({
 
 // src/suite/components/today-calibrating.tsx
 import { Refresh as RefreshCw2, SunLight as Sun } from "iconoir-react";
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function TodayCalibrating({
   onRetry,
   retrying = false,
@@ -2174,35 +2301,35 @@ function TodayCalibrating({
   retrySpinnerClassName = "text-ph-brand"
 }) {
   void _variant;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: cn2(
-        "suite-auth-handoff relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-2xl border border-ph-border bg-ph-surface px-5 py-8 text-center shadow-sm",
+        "suite-auth-handoff relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface px-5 py-8 text-center",
         className
       ),
       "data-test": "today-calibrating",
       children: [
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           "div",
           {
             className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,rgba(251,191,36,0.1),transparent_55%)]",
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ jsx16("div", { className: "relative mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-ph-border bg-ph-surface text-ph-ink shadow-sm", children: /* @__PURE__ */ jsx16(Sun, { className: "h-8 w-8", strokeWidth: 2, "aria-hidden": true }) }),
-        /* @__PURE__ */ jsx16("h2", { className: "relative text-base font-semibold tracking-tight text-ph-ink sm:text-lg md:text-xl", children: "Calibrating your day" }),
-        /* @__PURE__ */ jsx16("p", { className: "relative mt-1.5 max-w-sm text-sm sm:text-[15px] leading-relaxed text-ph-subtle", children: "Pulling together tasks, time and updates from your workspace\u2026" }),
-        /* @__PURE__ */ jsx16("div", { className: "relative mt-5 flex justify-center", children: /* @__PURE__ */ jsx16(Spinner, { size: "sm", className: "opacity-70", label: "Loading today" }) }),
-        onRetry ? /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsx17("div", { className: "relative mb-5 flex h-14 w-14 items-center justify-center rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface text-ph-ink shadow-[var(--ph-shadow-control)]", children: /* @__PURE__ */ jsx17(Sun, { className: "h-8 w-8", strokeWidth: 2, "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx17("h2", { className: "relative text-base font-semibold tracking-tight text-ph-ink sm:text-lg md:text-xl", children: "Calibrating your day" }),
+        /* @__PURE__ */ jsx17("p", { className: "relative mt-1.5 max-w-sm text-sm sm:text-[15px] leading-relaxed text-ph-subtle", children: "Pulling together tasks, time and updates from your workspace\u2026" }),
+        /* @__PURE__ */ jsx17("div", { className: "relative mt-5 flex justify-center", children: /* @__PURE__ */ jsx17(Spinner, { size: "sm", className: "opacity-70", label: "Loading today" }) }),
+        onRetry ? /* @__PURE__ */ jsxs14(
           "button",
           {
             type: "button",
             onClick: onRetry,
             disabled: retrying,
-            className: "relative mt-6 inline-flex items-center gap-2 rounded-xl border border-ph-border bg-ph-canvas px-4 py-2 text-sm font-medium text-ph-ink transition hover:bg-ph-muted disabled:opacity-60",
+            className: "ph-btn ph-btn-secondary relative mt-6",
             children: [
-              retrying ? /* @__PURE__ */ jsx16(Spinner, { size: "sm", className: retrySpinnerClassName }) : /* @__PURE__ */ jsx16(RefreshCw2, { className: "h-4 w-4", "aria-hidden": true }),
+              retrying ? /* @__PURE__ */ jsx17(Spinner, { size: "sm", className: retrySpinnerClassName }) : /* @__PURE__ */ jsx17(RefreshCw2, { className: "h-4 w-4", "aria-hidden": true }),
               "Try again"
             ]
           }
@@ -2215,12 +2342,12 @@ function TodayCalibrating({
 // src/suite/components/theme-provider.tsx
 import {
   createContext as createContext2,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useContext as useContext2,
-  useEffect as useEffect6,
+  useEffect as useEffect7,
   useMemo as useMemo2,
   useRef as useRef2,
-  useState as useState8
+  useState as useState9
 } from "react";
 
 // src/suite/lib/cookies.ts
@@ -2270,7 +2397,7 @@ function clearCookie(name) {
 }
 
 // src/suite/components/theme-provider.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var SuiteThemeContext = createContext2(null);
 var suiteThemeChannel = null;
 function broadcastTheme(theme) {
@@ -2337,7 +2464,7 @@ function SuiteThemeProvider({
   config,
   children
 }) {
-  const [state, setState] = useState8(() => {
+  const [state, setState] = useState9(() => {
     const theme = readStoredTheme(config.storageKey);
     if (typeof document === "undefined") {
       return { theme, resolvedTheme: config.fallbackTheme };
@@ -2348,13 +2475,13 @@ function SuiteThemeProvider({
   });
   const themeRef = useRef2(state.theme);
   themeRef.current = state.theme;
-  useEffect6(() => {
+  useEffect7(() => {
     applyTheme(state.theme, config);
   }, [state.theme, config]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (readSharedTheme() == null) writeSharedTheme(state.theme);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (state.theme !== "system") return;
     const media = window.matchMedia("(prefers-color-scheme: dark)");
     const update = () => {
@@ -2364,7 +2491,7 @@ function SuiteThemeProvider({
     media.addEventListener("change", update);
     return () => media.removeEventListener("change", update);
   }, [state.theme, config]);
-  useEffect6(() => {
+  useEffect7(() => {
     let channel = null;
     try {
       channel = new BroadcastChannel(SUITE_THEME_CHANNEL);
@@ -2418,7 +2545,7 @@ function SuiteThemeProvider({
       stopPolling();
     };
   }, [config]);
-  const setTheme = useCallback2(
+  const setTheme = useCallback3(
     (next) => {
       const resolved = applyTheme(next, config);
       setState({ theme: next, resolvedTheme: resolved });
@@ -2431,7 +2558,7 @@ function SuiteThemeProvider({
     },
     [config]
   );
-  const toggleTheme = useCallback2(() => {
+  const toggleTheme = useCallback3(() => {
     const next = resolveTheme(themeRef.current, config.fallbackTheme) === "dark" ? "light" : "dark";
     setTheme(next);
   }, [config, setTheme]);
@@ -2439,7 +2566,7 @@ function SuiteThemeProvider({
     () => ({ theme: state.theme, resolvedTheme: state.resolvedTheme, setTheme, toggleTheme }),
     [state.theme, state.resolvedTheme, setTheme, toggleTheme]
   );
-  return /* @__PURE__ */ jsx17(SuiteThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx18(SuiteThemeContext.Provider, { value, children });
 }
 function useSuiteTheme() {
   const ctx = useContext2(SuiteThemeContext);
@@ -2451,12 +2578,12 @@ function useSuiteTheme() {
 import {
   lazy,
   Suspense,
-  useCallback as useCallback3,
-  useEffect as useEffect7,
+  useCallback as useCallback4,
+  useEffect as useEffect8,
   useId,
   useLayoutEffect,
   useRef as useRef3,
-  useState as useState9
+  useState as useState10
 } from "react";
 import {
   ArrowDown,
@@ -2469,7 +2596,7 @@ import {
   Square,
   WarningTriangle
 } from "iconoir-react";
-import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var SuiteAiMarkdownMessage = lazy(() => import("./ai-message-markdown-AUEMCO7K.mjs"));
 var SUITE_OPEN_ASK_AI_EVENT = "shellstack:open-ask-ai";
 var SUITE_ASK_AI_OPEN_KEY = "shellstack:shelly-open";
@@ -2558,10 +2685,10 @@ function SuiteAiPanel({
   isWaitingForReply = false
 }) {
   const inputId = useId();
-  const [uncontrolledOpen, setUncontrolledOpen] = useState9(false);
-  const [resolvingId, setResolvingId] = useState9("");
+  const [uncontrolledOpen, setUncontrolledOpen] = useState10(false);
+  const [resolvingId, setResolvingId] = useState10("");
   const open = openProp != null ? openProp : uncontrolledOpen;
-  const setOpen = useCallback3(
+  const setOpen = useCallback4(
     (next) => {
       persistSuiteAskAiOpen(next);
       if (openProp === void 0) setUncontrolledOpen(next);
@@ -2569,21 +2696,21 @@ function SuiteAiPanel({
     },
     [onOpenChange, openProp]
   );
-  const [prompt, setPrompt] = useState9("");
-  const [messages, setMessages] = useState9([]);
-  const [loading, setLoading] = useState9(false);
-  const [hydrating, setHydrating] = useState9(false);
-  const [error, setError] = useState9("");
-  const [atBottom, setAtBottom] = useState9(true);
+  const [prompt, setPrompt] = useState10("");
+  const [messages, setMessages] = useState10([]);
+  const [loading, setLoading] = useState10(false);
+  const [hydrating, setHydrating] = useState10(false);
+  const [error, setError] = useState10("");
+  const [atBottom, setAtBottom] = useState10(true);
   const scrollerRef = useRef3(null);
   const textareaRef = useRef3(null);
   const abortRef = useRef3(null);
   const pendingPromptRef = useRef3(null);
-  const [editingIndex, setEditingIndex] = useState9(null);
-  const [editDraft, setEditDraft] = useState9("");
-  const [copiedIndex, setCopiedIndex] = useState9(null);
+  const [editingIndex, setEditingIndex] = useState10(null);
+  const [editDraft, setEditDraft] = useState10("");
+  const [copiedIndex, setCopiedIndex] = useState10(null);
   const waiting = loading || isWaitingForReply;
-  useEffect7(() => {
+  useEffect8(() => {
     function onOpen(event) {
       var _a2;
       const detail = event.detail;
@@ -2597,19 +2724,19 @@ function SuiteAiPanel({
     window.addEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
     return () => window.removeEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
   }, [setOpen]);
-  const scrollToBottom = useCallback3((behavior = "auto") => {
+  const scrollToBottom = useCallback4((behavior = "auto") => {
     const el = scrollerRef.current;
     if (!el) return;
     el.scrollTo({ top: el.scrollHeight, behavior });
     setAtBottom(true);
   }, []);
-  const handleScroll = useCallback3(() => {
+  const handleScroll = useCallback4(() => {
     const el = scrollerRef.current;
     if (!el) return;
     const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
     setAtBottom(distance < 64);
   }, []);
-  const hydrate = useCallback3(async () => {
+  const hydrate = useCallback4(async () => {
     var _a2, _b, _c;
     setHydrating(true);
     setError("");
@@ -2632,7 +2759,7 @@ function SuiteAiPanel({
       setHydrating(false);
     }
   }, [fetchChat]);
-  useEffect7(() => {
+  useEffect8(() => {
     var _a2;
     if (!open) return;
     const queued = (_a2 = pendingPromptRef.current) != null ? _a2 : consumePendingAskAiPrompt();
@@ -2643,14 +2770,14 @@ function SuiteAiPanel({
       if (pending) setPrompt(pending);
     });
   }, [open, hydrate]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (open && atBottom) scrollToBottom();
   }, [messages, waiting, open, atBottom, scrollToBottom]);
-  useEffect7(() => {
+  useEffect8(() => {
     var _a2;
     if (open && !hydrating) (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
   }, [open, hydrating]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!open) return;
     void import("./ai-message-markdown-AUEMCO7K.mjs").catch(() => {
     });
@@ -2838,32 +2965,32 @@ function SuiteAiPanel({
     -1
   );
   const Icon = BrandIcon != null ? BrandIcon : Sparks;
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "aside",
     {
       className: "flex h-full min-h-0 flex-col bg-ph-canvas",
       "data-test": "suite-ask-ai-panel",
       "aria-label": title,
       children: [
-        /* @__PURE__ */ jsxs14("header", { className: "flex items-center gap-2 px-2 pb-2", children: [
-          /* @__PURE__ */ jsx18("h2", { className: "sr-only", children: title }),
-          messages.length > 0 ? /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15("header", { className: "flex items-center gap-2 px-2 pb-2", children: [
+          /* @__PURE__ */ jsx19("h2", { className: "sr-only", children: title }),
+          messages.length > 0 ? /* @__PURE__ */ jsxs15(
             "button",
             {
               type: "button",
               onClick: () => void handleClear(),
               disabled: waiting,
-              className: "ml-auto inline-flex h-9 items-center gap-1.5 rounded-lg px-2 text-xs font-medium text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
+              className: "ph-btn ph-btn-ghost ph-btn-sm ml-auto h-9 text-xs text-ph-subtle",
               "data-test": "ask-ai-clear",
               children: [
-                /* @__PURE__ */ jsx18(Erase, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ jsx19(Erase, { className: "h-3.5 w-3.5" }),
                 "Clear"
               ]
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "relative min-h-0 flex-1", children: [
-          /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15("div", { className: "relative min-h-0 flex-1", children: [
+          /* @__PURE__ */ jsxs15(
             "div",
             {
               ref: scrollerRef,
@@ -2874,25 +3001,25 @@ function SuiteAiPanel({
               "aria-label": "Conversation",
               className: "suite-scroll-lock h-full space-y-5 overflow-y-auto px-2 py-3",
               children: [
-                hydrating && messages.length === 0 ? /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 text-sm text-ph-subtle", children: [
-                  /* @__PURE__ */ jsx18(Spinner, { className: "h-4 w-4 animate-spin" }),
+                hydrating && messages.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-sm text-ph-subtle", children: [
+                  /* @__PURE__ */ jsx19(Spinner, { className: "h-4 w-4 animate-spin" }),
                   "Loading your chat\u2026"
                 ] }) : null,
-                !hydrating && messages.length === 0 && !error ? /* @__PURE__ */ jsxs14("div", { className: "mx-auto mt-4 flex max-w-sm flex-col items-center px-1 text-center", children: [
-                  /* @__PURE__ */ jsx18("span", { className: "flex h-10 w-10 items-center justify-center rounded-2xl bg-ph-brand/10 text-ph-brand", children: /* @__PURE__ */ jsx18(Icon, { className: "h-5 w-5" }) }),
-                  /* @__PURE__ */ jsx18("p", { className: "mt-3 font-display text-base font-semibold text-ph-ink", children: "How can I help?" }),
-                  /* @__PURE__ */ jsx18("p", { className: "mt-1 text-sm leading-relaxed text-ph-subtle", children: emptyState }),
-                  presets.length > 0 ? /* @__PURE__ */ jsx18("div", { className: "mt-4 flex w-full flex-col gap-2", children: presets.map((preset) => /* @__PURE__ */ jsxs14(
+                !hydrating && messages.length === 0 && !error ? /* @__PURE__ */ jsxs15("div", { className: "mx-auto mt-4 flex max-w-sm flex-col items-center px-1 text-center", children: [
+                  /* @__PURE__ */ jsx19("span", { className: "flex h-10 w-10 items-center justify-center rounded-[var(--ph-radius-surface)] bg-ph-brand/10 text-ph-brand", children: /* @__PURE__ */ jsx19(Icon, { className: "h-5 w-5" }) }),
+                  /* @__PURE__ */ jsx19("p", { className: "mt-3 font-display text-base font-semibold text-ph-ink", children: "How can I help?" }),
+                  /* @__PURE__ */ jsx19("p", { className: "mt-1 text-sm leading-relaxed text-ph-subtle", children: emptyState }),
+                  presets.length > 0 ? /* @__PURE__ */ jsx19("div", { className: "mt-4 flex w-full flex-col gap-2", children: presets.map((preset) => /* @__PURE__ */ jsxs15(
                     "button",
                     {
                       type: "button",
                       onClick: () => void ask(preset.prompt),
                       disabled: waiting || hydrating,
-                      className: "group flex w-full items-center gap-2 rounded-xl border border-ph-border bg-ph-surface px-3 py-2 text-left text-sm text-ph-ink transition-colors hover:border-ph-brand/40 hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
+                      className: "group flex w-full items-center gap-2 rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface px-3 py-2 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)] disabled:opacity-40",
                       children: [
-                        /* @__PURE__ */ jsx18(Sparks, { className: "h-4 w-4 shrink-0 text-ph-brand" }),
-                        /* @__PURE__ */ jsx18("span", { className: "min-w-0 flex-1 truncate", children: preset.label }),
-                        /* @__PURE__ */ jsx18(ArrowUp, { className: "h-3.5 w-3.5 shrink-0 rotate-45 text-ph-mutedtext transition-transform group-hover:translate-x-0.5" })
+                        /* @__PURE__ */ jsx19(Sparks, { className: "h-4 w-4 shrink-0 text-ph-brand" }),
+                        /* @__PURE__ */ jsx19("span", { className: "min-w-0 flex-1 truncate", children: preset.label }),
+                        /* @__PURE__ */ jsx19(ArrowUp, { className: "h-3.5 w-3.5 shrink-0 rotate-45 text-ph-mutedtext transition-transform group-hover:translate-x-0.5" })
                       ]
                     },
                     preset.label
@@ -2903,13 +3030,13 @@ function SuiteAiPanel({
                   const isUser = message.role === "user";
                   if (isUser) {
                     if (editingIndex === index) {
-                      return /* @__PURE__ */ jsx18(
+                      return /* @__PURE__ */ jsx19(
                         "div",
                         {
                           className: "suite-msg-in suite-msg-in--user flex justify-end",
                           "data-test": "ask-ai-user",
-                          children: /* @__PURE__ */ jsxs14("div", { className: "w-full max-w-[85%] space-y-2", children: [
-                            /* @__PURE__ */ jsx18(
+                          children: /* @__PURE__ */ jsxs15("div", { className: "w-full max-w-[85%] space-y-2", children: [
+                            /* @__PURE__ */ jsx19(
                               "textarea",
                               {
                                 autoFocus: true,
@@ -2927,11 +3054,11 @@ function SuiteAiPanel({
                                 },
                                 rows: 2,
                                 "data-test": "ask-ai-edit-input",
-                                className: "w-full resize-none rounded-2xl rounded-br-md border border-ph-border bg-ph-surface px-3 py-2 text-sm leading-relaxed text-ph-ink outline-none focus-visible:border-ph-brand/45 focus-visible:ring-2 focus-visible:ring-ph-focus/35"
+                                className: "w-full resize-none rounded-2xl rounded-br-md border border-ph-border bg-ph-surface px-3 py-2 text-sm leading-relaxed text-ph-ink outline-none focus-visible:border-[var(--ph-selected-border)] focus-visible:shadow-[var(--ph-focus-halo)]"
                               }
                             ),
-                            /* @__PURE__ */ jsxs14("div", { className: "flex justify-end gap-2", children: [
-                              /* @__PURE__ */ jsx18(
+                            /* @__PURE__ */ jsxs15("div", { className: "flex justify-end gap-2", children: [
+                              /* @__PURE__ */ jsx19(
                                 "button",
                                 {
                                   type: "button",
@@ -2939,18 +3066,18 @@ function SuiteAiPanel({
                                     setEditingIndex(null);
                                     setEditDraft("");
                                   },
-                                  className: "inline-flex min-h-8 items-center rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
+                                  className: "ph-btn ph-btn-secondary ph-btn-xs",
                                   children: "Cancel"
                                 }
                               ),
-                              /* @__PURE__ */ jsx18(
+                              /* @__PURE__ */ jsx19(
                                 "button",
                                 {
                                   type: "button",
                                   "data-test": "ask-ai-edit-save",
                                   disabled: !editDraft.trim() || waiting,
                                   onClick: () => void saveEdit(index),
-                                  className: "inline-flex min-h-8 items-center rounded-lg bg-ph-brand px-2.5 text-xs font-medium text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
+                                  className: "ph-btn ph-btn-primary ph-btn-xs",
                                   children: "Save"
                                 }
                               )
@@ -2960,25 +3087,25 @@ function SuiteAiPanel({
                         `user-${index}`
                       );
                     }
-                    return /* @__PURE__ */ jsx18(
+                    return /* @__PURE__ */ jsx19(
                       "div",
                       {
                         className: "suite-msg-in suite-msg-in--user flex justify-end",
                         "data-test": "ask-ai-user",
-                        children: /* @__PURE__ */ jsxs14("div", { className: "group flex items-end gap-1.5", children: [
-                          !waiting ? /* @__PURE__ */ jsxs14("div", { className: "mb-0.5 flex items-center gap-0.5 opacity-100 transition-opacity [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:opacity-100", children: [
-                            /* @__PURE__ */ jsx18(
+                        children: /* @__PURE__ */ jsxs15("div", { className: "group flex items-end gap-1.5", children: [
+                          !waiting ? /* @__PURE__ */ jsxs15("div", { className: "mb-0.5 flex items-center gap-0.5 opacity-100 transition-opacity [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:opacity-100", children: [
+                            /* @__PURE__ */ jsx19(
                               "button",
                               {
                                 type: "button",
                                 onClick: () => void handleCopy(index, message.content),
                                 "aria-label": copiedIndex === index ? "Copied" : "Copy message",
                                 "data-test": "ask-ai-copy",
-                                className: "flex h-7 w-7 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-focus",
-                                children: copiedIndex === index ? /* @__PURE__ */ jsx18(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx18(Copy, { className: "h-3.5 w-3.5" })
+                                className: "ph-btn ph-btn-ghost ph-btn-square ph-btn-xs h-7 w-7 text-ph-mutedtext",
+                                children: copiedIndex === index ? /* @__PURE__ */ jsx19(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx19(Copy, { className: "h-3.5 w-3.5" })
                               }
                             ),
-                            /* @__PURE__ */ jsx18(
+                            /* @__PURE__ */ jsx19(
                               "button",
                               {
                                 type: "button",
@@ -2988,42 +3115,42 @@ function SuiteAiPanel({
                                 },
                                 "aria-label": "Edit message",
                                 "data-test": "ask-ai-edit",
-                                className: "flex h-7 w-7 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-focus",
-                                children: /* @__PURE__ */ jsx18(EditPencil, { className: "h-3.5 w-3.5" })
+                                className: "ph-btn ph-btn-ghost ph-btn-square ph-btn-xs h-7 w-7 text-ph-mutedtext",
+                                children: /* @__PURE__ */ jsx19(EditPencil, { className: "h-3.5 w-3.5" })
                               }
                             )
                           ] }) : null,
-                          /* @__PURE__ */ jsx18("div", { className: "w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]", children: message.content })
+                          /* @__PURE__ */ jsx19("div", { className: "w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]", children: message.content })
                         ] })
                       },
                       `user-${index}`
                     );
                   }
-                  return /* @__PURE__ */ jsxs14(
+                  return /* @__PURE__ */ jsxs15(
                     "div",
                     {
                       className: "flex items-end gap-2",
                       "data-test": "ask-ai-assistant",
                       children: [
-                        /* @__PURE__ */ jsx18(
+                        /* @__PURE__ */ jsx19(
                           "span",
                           {
                             className: "suite-msg-avatar mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand",
                             "aria-hidden": true,
-                            children: /* @__PURE__ */ jsx18(Icon, { className: "h-3.5 w-3.5" })
+                            children: /* @__PURE__ */ jsx19(Icon, { className: "h-3.5 w-3.5" })
                           }
                         ),
-                        /* @__PURE__ */ jsxs14("div", { className: "suite-msg-bubble min-w-0 max-w-[85%] space-y-2", children: [
-                          /* @__PURE__ */ jsx18("div", { className: "rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink", children: /* @__PURE__ */ jsx18(
+                        /* @__PURE__ */ jsxs15("div", { className: "suite-msg-bubble min-w-0 max-w-[85%] space-y-2", children: [
+                          /* @__PURE__ */ jsx19("div", { className: "rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink", children: /* @__PURE__ */ jsx19(
                             Suspense,
                             {
                               fallback: (
                                 // The chunk is pre-warmed above, so this only shows on a
                                 // cold cache. Keep it invisible — a skeleton here reads
                                 // as if it were part of the answer.
-                                /* @__PURE__ */ jsx18("span", { className: "sr-only", role: "status", children: "Rendering response\u2026" })
+                                /* @__PURE__ */ jsx19("span", { className: "sr-only", role: "status", children: "Rendering response\u2026" })
                               ),
-                              children: /* @__PURE__ */ jsx18(
+                              children: /* @__PURE__ */ jsx19(
                                 SuiteAiMarkdownMessage,
                                 {
                                   markdown: message.content,
@@ -3032,43 +3159,43 @@ function SuiteAiPanel({
                               )
                             }
                           ) }),
-                          ((_a2 = message.actions) != null ? _a2 : []).map((action) => /* @__PURE__ */ jsxs14(
+                          ((_a2 = message.actions) != null ? _a2 : []).map((action) => /* @__PURE__ */ jsxs15(
                             "div",
                             {
                               "data-test": "ask-ai-action",
                               "data-status": action.status,
-                              className: "rounded-xl border border-ph-border bg-ph-surface px-3 py-2 text-sm text-ph-ink",
+                              className: "rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface px-3 py-2 text-sm text-ph-ink",
                               children: [
-                                /* @__PURE__ */ jsx18("p", { className: "font-medium", children: action.summary }),
-                                action.status === "proposed" ? /* @__PURE__ */ jsxs14("div", { className: "mt-2 flex flex-wrap gap-2", children: [
-                                  /* @__PURE__ */ jsx18(
+                                /* @__PURE__ */ jsx19("p", { className: "font-medium", children: action.summary }),
+                                action.status === "proposed" ? /* @__PURE__ */ jsxs15("div", { className: "mt-2 flex flex-wrap gap-2", children: [
+                                  /* @__PURE__ */ jsx19(
                                     "button",
                                     {
                                       type: "button",
                                       "data-test": "ask-ai-action-confirm",
                                       disabled: Boolean(resolvingId) || !resolveAction,
                                       onClick: () => void handleResolve(action.id, "confirm"),
-                                      className: "inline-flex min-h-8 items-center rounded-lg bg-ph-brand px-2.5 text-xs font-medium text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
+                                      className: "ph-btn ph-btn-primary ph-btn-xs",
                                       children: resolvingId === action.id ? "Working\u2026" : "Confirm"
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx18(
+                                  /* @__PURE__ */ jsx19(
                                     "button",
                                     {
                                       type: "button",
                                       "data-test": "ask-ai-action-cancel",
                                       disabled: Boolean(resolvingId) || !resolveAction,
                                       onClick: () => void handleResolve(action.id, "cancel"),
-                                      className: "inline-flex min-h-8 items-center rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
+                                      className: "ph-btn ph-btn-secondary ph-btn-xs",
                                       children: "Cancel"
                                     }
                                   )
                                 ] }) : null,
-                                action.status === "applied" ? /* @__PURE__ */ jsxs14("p", { className: "mt-1 text-xs text-ph-subtle", children: [
+                                action.status === "applied" ? /* @__PURE__ */ jsxs15("p", { className: "mt-1 text-xs text-ph-subtle", children: [
                                   "Done",
-                                  action.href ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
+                                  action.href ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
                                     " \xB7 ",
-                                    /* @__PURE__ */ jsx18(
+                                    /* @__PURE__ */ jsx19(
                                       "a",
                                       {
                                         href: action.href,
@@ -3078,8 +3205,8 @@ function SuiteAiPanel({
                                     )
                                   ] }) : null
                                 ] }) : null,
-                                action.status === "cancelled" ? /* @__PURE__ */ jsx18("p", { className: "mt-1 text-xs text-ph-subtle", children: "Cancelled" }) : null,
-                                action.status === "failed" ? /* @__PURE__ */ jsx18("p", { className: "mt-1 text-xs text-ph-danger", children: action.error || "Could not apply that." }) : null
+                                action.status === "cancelled" ? /* @__PURE__ */ jsx19("p", { className: "mt-1 text-xs text-ph-subtle", children: "Cancelled" }) : null,
+                                action.status === "failed" ? /* @__PURE__ */ jsx19("p", { className: "mt-1 text-xs text-ph-danger", children: action.error || "Could not apply that." }) : null
                               ]
                             },
                             action.id
@@ -3090,32 +3217,32 @@ function SuiteAiPanel({
                     `assistant-${index}`
                   );
                 }),
-                waiting ? /* @__PURE__ */ jsxs14("div", { className: "flex items-end gap-2", "aria-hidden": true, children: [
-                  /* @__PURE__ */ jsx18("span", { className: "mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand", children: /* @__PURE__ */ jsx18(Icon, { className: "h-3.5 w-3.5" }) }),
-                  /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1.5 rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2.5", children: [
-                    /* @__PURE__ */ jsx18("span", { className: "suite-think-dot h-1.5 w-1.5 rounded-full bg-ph-mutedtext" }),
-                    /* @__PURE__ */ jsx18("span", { className: "suite-think-dot suite-think-dot--2 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" }),
-                    /* @__PURE__ */ jsx18("span", { className: "suite-think-dot suite-think-dot--3 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" })
+                waiting ? /* @__PURE__ */ jsxs15("div", { className: "flex items-end gap-2", "aria-hidden": true, children: [
+                  /* @__PURE__ */ jsx19("span", { className: "mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand", children: /* @__PURE__ */ jsx19(Icon, { className: "h-3.5 w-3.5" }) }),
+                  /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1.5 rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2.5", children: [
+                    /* @__PURE__ */ jsx19("span", { className: "suite-think-dot h-1.5 w-1.5 rounded-full bg-ph-mutedtext" }),
+                    /* @__PURE__ */ jsx19("span", { className: "suite-think-dot suite-think-dot--2 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" }),
+                    /* @__PURE__ */ jsx19("span", { className: "suite-think-dot suite-think-dot--3 h-1.5 w-1.5 rounded-full bg-ph-mutedtext" })
                   ] })
                 ] }) : null,
-                waiting ? /* @__PURE__ */ jsx18("span", { className: "sr-only", "aria-live": "polite", children: "Assistant is responding\u2026" }) : null,
-                error ? /* @__PURE__ */ jsxs14(
+                waiting ? /* @__PURE__ */ jsx19("span", { className: "sr-only", "aria-live": "polite", children: "Assistant is responding\u2026" }) : null,
+                error ? /* @__PURE__ */ jsxs15(
                   "div",
                   {
                     role: "alert",
-                    className: "flex items-start gap-2 rounded-xl border border-ph-danger/30 bg-ph-danger/10 px-3 py-2.5 text-sm text-ph-ink",
+                    className: "flex items-start gap-2 rounded-[var(--ph-radius-surface)] border border-ph-danger/30 bg-ph-danger/10 px-3 py-2.5 text-sm text-ph-ink",
                     children: [
-                      /* @__PURE__ */ jsx18(WarningTriangle, { className: "mt-0.5 h-4 w-4 shrink-0 text-ph-danger" }),
-                      /* @__PURE__ */ jsxs14("div", { className: "min-w-0 flex-1", children: [
-                        /* @__PURE__ */ jsx18("p", { className: "font-medium text-ph-danger", children: "Something went wrong" }),
-                        /* @__PURE__ */ jsx18("p", { className: "mt-0.5 text-ph-subtle", children: error }),
-                        /* @__PURE__ */ jsx18(
+                      /* @__PURE__ */ jsx19(WarningTriangle, { className: "mt-0.5 h-4 w-4 shrink-0 text-ph-danger" }),
+                      /* @__PURE__ */ jsxs15("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx19("p", { className: "font-medium text-ph-danger", children: "Something went wrong" }),
+                        /* @__PURE__ */ jsx19("p", { className: "mt-0.5 text-ph-subtle", children: error }),
+                        /* @__PURE__ */ jsx19(
                           "button",
                           {
                             type: "button",
                             onClick: retry,
                             disabled: waiting,
-                            className: "mt-2 inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
+                            className: "ph-btn ph-btn-secondary ph-btn-xs mt-2 gap-1.5",
                             children: "Try again"
                           }
                         )
@@ -3126,20 +3253,20 @@ function SuiteAiPanel({
               ]
             }
           ),
-          !atBottom ? /* @__PURE__ */ jsx18("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx18(Tooltip, { content: "Scroll to latest", children: /* @__PURE__ */ jsx18(
+          !atBottom ? /* @__PURE__ */ jsx19("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx19(Tooltip, { content: "Scroll to latest", children: /* @__PURE__ */ jsx19(
             "button",
             {
               type: "button",
               onClick: () => scrollToBottom("smooth"),
-              className: "flex h-9 w-9 items-center justify-center rounded-full border border-ph-border bg-ph-surface text-ph-subtle shadow-ph-md transition-colors hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
+              className: "ph-btn ph-btn-ghost ph-btn-circle h-9 w-9 border border-ph-border bg-ph-surface text-ph-subtle shadow-[var(--ph-shadow-floating)]",
               "aria-label": "Scroll to latest",
-              children: /* @__PURE__ */ jsx18(ArrowDown, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx19(ArrowDown, { className: "h-4 w-4" })
             }
           ) }) }) : null
         ] }),
-        /* @__PURE__ */ jsx18("div", { className: "px-2 pt-2 pb-[max(2rem,calc(env(safe-area-inset-bottom)+1rem))]", children: /* @__PURE__ */ jsxs14("div", { className: "flex items-end gap-1.5 rounded-2xl border border-ph-border bg-ph-surface px-1.5 py-1 transition-colors focus-within:border-ph-brand/45 focus-within:ring-2 focus-within:ring-ph-focus/35", children: [
-          /* @__PURE__ */ jsx18("label", { htmlFor: inputId, className: "sr-only", children: "Ask a question" }),
-          /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19("div", { className: "px-2 pt-2 pb-[max(2rem,calc(env(safe-area-inset-bottom)+1rem))]", children: /* @__PURE__ */ jsxs15("div", { className: "suite-ai-composer flex items-end gap-1.5 border bg-ph-surface px-1.5 py-1", children: [
+          /* @__PURE__ */ jsx19("label", { htmlFor: inputId, className: "sr-only", children: "Ask a question" }),
+          /* @__PURE__ */ jsx19(
             "textarea",
             {
               id: inputId,
@@ -3158,26 +3285,26 @@ function SuiteAiPanel({
               className: "max-h-36 min-h-10 flex-1 resize-none bg-transparent px-1.5 py-2 text-sm leading-relaxed text-ph-ink outline-none placeholder:text-ph-mutedtext"
             }
           ),
-          waiting ? /* @__PURE__ */ jsx18(Tooltip, { content: "Stop generating", children: /* @__PURE__ */ jsx18(
+          waiting ? /* @__PURE__ */ jsx19(Tooltip, { content: "Stop generating", children: /* @__PURE__ */ jsx19(
             "button",
             {
               type: "button",
               onClick: stop,
               "data-test": "ask-ai-stop",
-              className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ph-muted text-ph-ink transition-colors hover:bg-ph-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
+              className: "ph-btn ph-btn-ghost ph-btn-circle h-9 w-9 shrink-0 bg-ph-muted text-ph-ink",
               "aria-label": "Stop generating",
-              children: /* @__PURE__ */ jsx18(Square, { className: "h-3.5 w-3.5 fill-current" })
+              children: /* @__PURE__ */ jsx19(Square, { className: "h-3.5 w-3.5 fill-current" })
             }
-          ) }) : /* @__PURE__ */ jsx18(Tooltip, { content: "Send message", children: /* @__PURE__ */ jsx18(
+          ) }) : /* @__PURE__ */ jsx19(Tooltip, { content: "Send message", children: /* @__PURE__ */ jsx19(
             "button",
             {
               type: "button",
               onClick: () => void ask(prompt),
               disabled: !prompt.trim(),
               "data-test": "ask-ai-send",
-              className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ph-brand text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
+              className: "ph-btn ph-btn-primary ph-btn-circle h-9 w-9 shrink-0",
               "aria-label": "Send message",
-              children: /* @__PURE__ */ jsx18(ArrowUp, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx19(ArrowUp, { className: "h-4 w-4" })
             }
           ) })
         ] }) })
@@ -3187,9 +3314,9 @@ function SuiteAiPanel({
 }
 
 // src/suite/components/workspace-switcher.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { Building, Check as Check2, NavArrowDown } from "iconoir-react";
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function SuiteWorkspaceSwitcher({
   workspaces = [],
   groups,
@@ -3205,9 +3332,9 @@ function SuiteWorkspaceSwitcher({
   footer
 }) {
   var _a2;
-  const [open, setOpen] = useState10(false);
+  const [open, setOpen] = useState11(false);
   const sections = (_a2 = groups == null ? void 0 : groups.filter((group) => group.workspaces.length > 0)) != null ? _a2 : workspaces.length > 0 ? [{ id: "workspaces", label: "Switch workspace", workspaces }] : [];
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     DropdownMenu2,
     {
       "aria-label": "Switch workspace",
@@ -3218,20 +3345,20 @@ function SuiteWorkspaceSwitcher({
       align: "start",
       open,
       onOpenChange: setOpen,
-      trigger: /* @__PURE__ */ jsxs15(
+      trigger: /* @__PURE__ */ jsxs16(
         "span",
         {
           className: cn2(
-            "flex min-w-0 max-w-full items-center gap-2 rounded-lg border border-ph-border bg-ph-muted text-left transition-colors hover:bg-ph-muted",
+            "flex min-w-0 max-w-full items-center gap-2 rounded-[var(--ph-radius-control)] border border-ph-border bg-[var(--ph-surface-inset)] text-left transition-colors hover:bg-[var(--ph-surface-hover)]",
             collapsed ? "h-10 w-10 justify-center p-0" : "w-full px-3 py-2",
-            open && "border-ph-brand/40"
+            open && "border-[var(--ph-selected-border)] bg-[var(--ph-selected-bg)]"
           ),
           "data-test": "workspace-switcher-trigger",
           children: [
-            /* @__PURE__ */ jsx19(Building, { className: "h-4 w-4 shrink-0 text-ph-ink", "aria-hidden": true }),
-            !collapsed ? /* @__PURE__ */ jsxs15(Fragment6, { children: [
-              /* @__PURE__ */ jsx19("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink", children: name }),
-              /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20(Building, { className: "h-4 w-4 shrink-0 text-ph-ink", "aria-hidden": true }),
+            !collapsed ? /* @__PURE__ */ jsxs16(Fragment6, { children: [
+              /* @__PURE__ */ jsx20("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink", children: name }),
+              /* @__PURE__ */ jsx20(
                 NavArrowDown,
                 {
                   className: cn2(
@@ -3245,16 +3372,16 @@ function SuiteWorkspaceSwitcher({
           ]
         }
       ),
-      children: /* @__PURE__ */ jsxs15(
+      children: /* @__PURE__ */ jsxs16(
         "div",
         {
           id: "workspace-switcher-menu",
           className: "p-1",
           "data-test": "workspace-switcher-menu",
           children: [
-            sections.length === 0 ? /* @__PURE__ */ jsx19("p", { className: "px-3 py-2 text-sm text-ph-mutedtext", children: emptyLabel }) : sections.map((section) => /* @__PURE__ */ jsxs15("div", { children: [
-              /* @__PURE__ */ jsx19("p", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext", children: section.label }),
-              section.workspaces.map((workspace) => /* @__PURE__ */ jsx19(
+            sections.length === 0 ? /* @__PURE__ */ jsx20("p", { className: "px-3 py-2 text-sm text-ph-mutedtext", children: emptyLabel }) : sections.map((section) => /* @__PURE__ */ jsxs16("div", { children: [
+              /* @__PURE__ */ jsx20("p", { className: "px-3 py-2 text-[length:var(--ph-type-overline)] font-semibold uppercase tracking-[0.08em] text-ph-mutedtext", children: section.label }),
+              section.workspaces.map((workspace) => /* @__PURE__ */ jsx20(
                 DropdownItem2,
                 {
                   id: `workspace-option-${workspace.id}`,
@@ -3267,12 +3394,12 @@ function SuiteWorkspaceSwitcher({
                     onSelect(workspace);
                   },
                   className: appSwitcherMenuItemClass(),
-                  children: /* @__PURE__ */ jsxs15("span", { className: "flex min-w-0 w-full items-center gap-3", children: [
-                    /* @__PURE__ */ jsxs15("span", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx19("span", { className: "block truncate text-sm font-medium text-ph-ink", children: workspace.name }),
-                      workspace.description ? /* @__PURE__ */ jsx19("span", { className: "block truncate text-xs text-ph-mutedtext", children: workspace.description }) : null
+                  children: /* @__PURE__ */ jsxs16("span", { className: "flex min-w-0 w-full items-center gap-3", children: [
+                    /* @__PURE__ */ jsxs16("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx20("span", { className: "block truncate text-sm font-medium text-ph-ink", children: workspace.name }),
+                      workspace.description ? /* @__PURE__ */ jsx20("span", { className: "block truncate text-xs text-ph-mutedtext", children: workspace.description }) : null
                     ] }),
-                    workspace.id === currentId ? /* @__PURE__ */ jsx19(
+                    workspace.id === currentId ? /* @__PURE__ */ jsx20(
                       Check2,
                       {
                         className: "h-4 w-4 shrink-0 text-ph-brand",
@@ -3284,7 +3411,7 @@ function SuiteWorkspaceSwitcher({
                 workspace.id
               ))
             ] }, section.id)),
-            footer ? /* @__PURE__ */ jsx19("div", { className: "mt-1 border-t border-ph-border pt-1", children: footer }) : null
+            footer ? /* @__PURE__ */ jsx20("div", { className: "mt-1 border-t border-ph-border pt-1", children: footer }) : null
           ]
         }
       )
@@ -3293,7 +3420,7 @@ function SuiteWorkspaceSwitcher({
 }
 
 // src/suite/icons/suite-icon.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var TODAY_SUN_STYLE = `
 @media (prefers-reduced-motion: no-preference) {
   .suite-icon-today-sun-rays {
@@ -3319,7 +3446,7 @@ function SuiteIcon({
   const glyph = SUITE_GLYPHS[name];
   const accentHex = accent ? APP_ACCENTS[accent].accent : void 0;
   const mergedStyle = accentHex ? __spreadProps(__spreadValues({}, style), { "--suite-icon-accent": accentHex }) : style;
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "svg",
     {
       width: size,
@@ -3336,8 +3463,8 @@ function SuiteIcon({
       "aria-label": label,
       "aria-hidden": label ? void 0 : true,
       children: [
-        glyph.animatedAccent && animated ? /* @__PURE__ */ jsx20("style", { children: TODAY_SUN_STYLE }) : null,
-        /* @__PURE__ */ jsx20(
+        glyph.animatedAccent && animated ? /* @__PURE__ */ jsx21("style", { children: TODAY_SUN_STYLE }) : null,
+        /* @__PURE__ */ jsx21(
           GlyphParts,
           {
             elements: glyph.elements,
@@ -3351,9 +3478,9 @@ function SuiteIcon({
 
 // src/suite/lib/use-sidebar-width.ts
 import {
-  useCallback as useCallback4,
+  useCallback as useCallback5,
   useLayoutEffect as useLayoutEffect2,
-  useState as useState11
+  useState as useState12
 } from "react";
 var SIDEBAR_RAIL_WIDTH = 56;
 var SIDEBAR_COLLAPSE_THRESHOLD = 80;
@@ -3439,8 +3566,8 @@ function resetSuiteSidebarWidth() {
 }
 function useSidebarWidth(storageKey = SUITE_SIDEBAR_WIDTH_KEY, defaultWidth = SIDEBAR_DEFAULT_WIDTH) {
   const fallbackWidth = snapWidth(clampWidth(defaultWidth));
-  const [width, setWidth] = useState11(fallbackWidth);
-  const [narrowViewport, setNarrowViewport] = useState11(false);
+  const [width, setWidth] = useState12(fallbackWidth);
+  const [narrowViewport, setNarrowViewport] = useState12(false);
   const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
   useLayoutEffect2(() => {
     const sync = () => {
@@ -3465,13 +3592,13 @@ function useSidebarWidth(storageKey = SUITE_SIDEBAR_WIDTH_KEY, defaultWidth = SI
     media.addEventListener("change", sync);
     return () => media.removeEventListener("change", sync);
   }, []);
-  const persist = useCallback4(
+  const persist = useCallback5(
     (value) => {
       persistSidebarWidth(storageKey, value);
     },
     [storageKey]
   );
-  const setCollapsed = useCallback4(
+  const setCollapsed = useCallback5(
     (value) => {
       setWidth((current) => {
         const next = value ? SIDEBAR_RAIL_WIDTH : current <= SIDEBAR_COLLAPSE_THRESHOLD ? fallbackWidth : snapWidth(current);
@@ -3481,11 +3608,11 @@ function useSidebarWidth(storageKey = SUITE_SIDEBAR_WIDTH_KEY, defaultWidth = SI
     },
     [fallbackWidth, persist]
   );
-  const resetWidth = useCallback4(() => {
+  const resetWidth = useCallback5(() => {
     setWidth(fallbackWidth);
     persist(fallbackWidth);
   }, [fallbackWidth, persist]);
-  const startResize = useCallback4(
+  const startResize = useCallback5(
     (event) => {
       event.preventDefault();
       const startX = event.clientX;
@@ -3507,7 +3634,7 @@ function useSidebarWidth(storageKey = SUITE_SIDEBAR_WIDTH_KEY, defaultWidth = SI
     },
     [persist, width]
   );
-  const resizeBy = useCallback4(
+  const resizeBy = useCallback5(
     (delta) => {
       setWidth((current) => {
         const next = clampWidth(current + delta);
@@ -3522,9 +3649,9 @@ function useSidebarWidth(storageKey = SUITE_SIDEBAR_WIDTH_KEY, defaultWidth = SI
 
 // src/suite/lib/motion.tsx
 import { LazyMotion, domAnimation, m } from "motion/react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function SuiteMotionProvider({ children }) {
-  return /* @__PURE__ */ jsx21(LazyMotion, { features: domAnimation, strict: true, children });
+  return /* @__PURE__ */ jsx22(LazyMotion, { features: domAnimation, strict: true, children });
 }
 var SUITE_SPRINGS = {
   /** Snappy panel/sheet entrances — small overshoot. */
@@ -3536,24 +3663,24 @@ var SUITE_SPRINGS = {
 };
 
 // src/suite/components/suite-skeleton.tsx
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 function SuiteSkeleton({
   className,
   lines = 1,
   circle,
   width
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: cn2("space-y-2", circle ? "flex flex-col items-center" : ""),
       "aria-hidden": true,
-      children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx22(
+      children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx23(
         "div",
         {
           className: "animate-[skeleton-stagger_0.6s_ease-out_both]",
           style: { animationDelay: `${index * 80}ms` },
-          children: /* @__PURE__ */ jsx22(
+          children: /* @__PURE__ */ jsx23(
             "div",
             {
               className: cn2(
@@ -3577,35 +3704,35 @@ function SuiteSkeletonCard({
   rows = 3,
   header = true
 }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: cn2(
-        "ph-skeleton-card animate-[skeleton-stagger_0.5s_ease-out_both] rounded-2xl border border-ph-border bg-ph-surface p-6 shadow-sm",
+        "ph-skeleton-card animate-[skeleton-stagger_0.5s_ease-out_both] rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface p-6",
         className
       ),
       "aria-hidden": true,
       children: [
-        header ? /* @__PURE__ */ jsxs17(
+        header ? /* @__PURE__ */ jsxs18(
           "div",
           {
             className: "mb-5 flex items-center gap-3 animate-[skeleton-stagger_0.5s_ease-out_both]",
             style: { animationDelay: "100ms" },
             children: [
-              /* @__PURE__ */ jsx22("div", { className: "ph-skeleton h-10 w-10 rounded-xl" }),
-              /* @__PURE__ */ jsxs17("div", { className: "flex-1 space-y-2", children: [
-                /* @__PURE__ */ jsx22("div", { className: "ph-skeleton h-4 w-1/3" }),
-                /* @__PURE__ */ jsx22("div", { className: "ph-skeleton h-3 w-1/2" })
+              /* @__PURE__ */ jsx23("div", { className: "ph-skeleton h-10 w-10 rounded-[var(--ph-radius-control)]" }),
+              /* @__PURE__ */ jsxs18("div", { className: "flex-1 space-y-2", children: [
+                /* @__PURE__ */ jsx23("div", { className: "ph-skeleton h-4 w-1/3" }),
+                /* @__PURE__ */ jsx23("div", { className: "ph-skeleton h-3 w-1/2" })
               ] })
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx22("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx23(
           "div",
           {
             className: "animate-[skeleton-stagger_0.5s_ease-out_both]",
             style: { animationDelay: `${200 + index * 80}ms` },
-            children: /* @__PURE__ */ jsx22(
+            children: /* @__PURE__ */ jsx23(
               "div",
               {
                 className: "ph-skeleton h-3",
@@ -3623,16 +3750,16 @@ function SuiteSkeletonList({
   className,
   items = 4
 }) {
-  return /* @__PURE__ */ jsx22("div", { className: cn2("space-y-3", className), "aria-hidden": true, children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23("div", { className: cn2("space-y-3", className), "aria-hidden": true, children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx23(
     "div",
     {
       className: "animate-[skeleton-stagger_0.6s_ease-out_both]",
       style: { animationDelay: `${index * 100}ms` },
-      children: /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3 rounded-xl border border-ph-border bg-ph-surface p-4", children: [
-        /* @__PURE__ */ jsx22("div", { className: "ph-skeleton h-10 w-10 rounded-lg" }),
-        /* @__PURE__ */ jsxs17("div", { className: "min-w-0 flex-1 space-y-2", children: [
-          /* @__PURE__ */ jsx22("div", { className: "ph-skeleton h-3.5 w-3/4" }),
-          /* @__PURE__ */ jsx22("div", { className: "ph-skeleton h-3 w-1/2" })
+      children: /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3 rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface p-4", children: [
+        /* @__PURE__ */ jsx23("div", { className: "ph-skeleton h-10 w-10 rounded-[var(--ph-radius-control)]" }),
+        /* @__PURE__ */ jsxs18("div", { className: "min-w-0 flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx23("div", { className: "ph-skeleton h-3.5 w-3/4" }),
+          /* @__PURE__ */ jsx23("div", { className: "ph-skeleton h-3 w-1/2" })
         ] })
       ] })
     },
@@ -3647,22 +3774,22 @@ function SuiteEmptyState({
   className,
   size = "md"
 }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: cn2(
-        "relative overflow-hidden rounded-2xl border border-ph-border bg-ph-surface text-center",
+        "relative overflow-hidden rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-surface text-center",
         size === "sm" ? "px-5 py-8" : "px-6 py-12 sm:px-10 sm:py-16",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs17("div", { className: "pointer-events-none absolute inset-0 overflow-hidden opacity-60", "aria-hidden": true, children: [
-          /* @__PURE__ */ jsx22("div", { className: "absolute -left-10 -top-10 h-40 w-40 rounded-full bg-ph-brand/10 blur-3xl" }),
-          /* @__PURE__ */ jsx22("div", { className: "absolute -bottom-10 -right-10 h-40 w-40 rounded-full bg-ph-accent/10 blur-3xl" })
+        /* @__PURE__ */ jsxs18("div", { className: "pointer-events-none absolute inset-0 overflow-hidden opacity-60", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx23("div", { className: "absolute -left-10 -top-10 h-40 w-40 rounded-full bg-ph-brand/10 blur-3xl" }),
+          /* @__PURE__ */ jsx23("div", { className: "absolute -bottom-10 -right-10 h-40 w-40 rounded-full bg-ph-accent/10 blur-3xl" })
         ] }),
-        /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
-          icon ? /* @__PURE__ */ jsx22("div", { className: "mx-auto mb-4 inline-flex items-center justify-center rounded-2xl bg-ph-muted p-3 shadow-sm ring-1 ring-black/[0.06]", children: icon }) : null,
-          /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsxs18("div", { className: "relative", children: [
+          icon ? /* @__PURE__ */ jsx23("div", { className: "mx-auto mb-4 inline-flex items-center justify-center rounded-[var(--ph-radius-surface)] border border-ph-border bg-ph-muted p-3 shadow-[var(--ph-shadow-control)]", children: icon }) : null,
+          /* @__PURE__ */ jsx23(
             "h2",
             {
               className: cn2(
@@ -3672,8 +3799,8 @@ function SuiteEmptyState({
               children: title
             }
           ),
-          description ? /* @__PURE__ */ jsx22("p", { className: "mx-auto mt-2 max-w-sm text-sm leading-relaxed text-ph-subtle", children: description }) : null,
-          action ? /* @__PURE__ */ jsx22("div", { className: "mt-5 flex flex-wrap items-center justify-center gap-2", children: action }) : null
+          description ? /* @__PURE__ */ jsx23("p", { className: "mx-auto mt-2 max-w-sm text-sm leading-relaxed text-ph-subtle", children: description }) : null,
+          action ? /* @__PURE__ */ jsx23("div", { className: "mt-5 flex flex-wrap items-center justify-center gap-2", children: action }) : null
         ] })
       ]
     }
@@ -3682,7 +3809,7 @@ function SuiteEmptyState({
 
 // src/suite/components/suite-settings-mobile-nav.tsx
 import { isValidElement } from "react";
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 function SuiteSettingsMobileNav({
   items,
   activeHref,
@@ -3691,26 +3818,26 @@ function SuiteSettingsMobileNav({
   ariaLabel = "Settings sections",
   className
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "nav",
     {
       "data-test": dataTest,
       "aria-label": ariaLabel,
       className: cn2("suite-settings-mobile-nav lg:hidden", className),
-      children: /* @__PURE__ */ jsx23("div", { className: "flex snap-x gap-2 overflow-x-auto pb-3 pt-1 scrollbar-hide [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item) => {
+      children: /* @__PURE__ */ jsx24("div", { className: "flex snap-x gap-2 overflow-x-auto pb-3 pt-1 scrollbar-hide [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item) => {
         const Icon = item.icon;
         const active = activeHref === item.href || activeHref.startsWith(`${item.href}/`);
-        const iconNode = isValidElement(item.icon) ? item.icon : /* @__PURE__ */ jsx23(
+        const iconNode = isValidElement(item.icon) ? item.icon : /* @__PURE__ */ jsx24(
           Icon,
           {
             className: cn2(
-              "h-4 w-4 shrink-0 transition",
-              active ? "text-ph-surface" : "text-ph-mutedtext"
+              "h-4 w-4 shrink-0 transition-colors",
+              active ? "text-[var(--ph-selected-text)]" : "text-ph-mutedtext"
             ),
             "aria-hidden": true
           }
         );
-        return /* @__PURE__ */ jsxs18(
+        return /* @__PURE__ */ jsxs19(
           "button",
           {
             type: "button",
@@ -3719,14 +3846,12 @@ function SuiteSettingsMobileNav({
             onClick: () => onSelect(item.href),
             "aria-current": active ? "page" : void 0,
             className: cn2(
-              "group relative flex shrink-0 snap-start items-center gap-2 rounded-full px-3.5 py-2.5 text-sm font-medium transition-colors",
-              "min-h-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
-              active ? "bg-ph-ink text-ph-surface shadow-sm" : "bg-ph-surface text-ph-subtle ring-1 ring-ph-border hover:bg-ph-muted hover:text-ph-ink"
+              "group relative flex min-h-[44px] shrink-0 snap-start items-center gap-2 rounded-[var(--ph-radius-control)] border px-3.5 py-2.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]",
+              active ? "border-[var(--ph-selected-border)] bg-[var(--ph-selected-bg)] text-[var(--ph-selected-text)]" : "border-ph-border bg-ph-surface text-ph-subtle hover:bg-[var(--ph-surface-hover)] hover:text-ph-ink"
             ),
             children: [
               iconNode,
-              /* @__PURE__ */ jsx23("span", { className: "whitespace-nowrap", children: item.label }),
-              active ? /* @__PURE__ */ jsx23("span", { className: "absolute inset-x-0 -bottom-3 h-0.5 rounded-full bg-ph-ink lg:hidden" }) : null
+              /* @__PURE__ */ jsx24("span", { className: "whitespace-nowrap", children: item.label })
             ]
           },
           item.href
@@ -3738,9 +3863,9 @@ function SuiteSettingsMobileNav({
 
 // src/suite/components/suite-sidebar.tsx
 import Link2 from "next/link";
-import { useCallback as useCallback5, useEffect as useEffect8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9, useRef as useRef4 } from "react";
 import { NavArrowLeft, Sparks as Sparks2 } from "iconoir-react";
-import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 function renderNode(node, collapsed) {
   if (typeof node === "function") return node(collapsed);
   return node;
@@ -3763,14 +3888,17 @@ function SuiteSidebar({
 }) {
   const showAskAi = Boolean(onAskAiOpenChange && askAi);
   const chatOpen = showAskAi && askAiOpen && !collapsed;
-  const setAskAi = useCallback5(
+  const askAiButtonRef = useRef4(null);
+  const askAiBackRef = useRef4(null);
+  const restoreAskAiFocusRef = useRef4(false);
+  const setAskAi = useCallback6(
     (next) => {
       persistSuiteAskAiOpen(next);
       onAskAiOpenChange == null ? void 0 : onAskAiOpenChange(next);
     },
     [onAskAiOpenChange]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (!onAskAiOpenChange) return;
     function onOpen() {
       onRequestExpand == null ? void 0 : onRequestExpand();
@@ -3779,49 +3907,69 @@ function SuiteSidebar({
     window.addEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
     return () => window.removeEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
   }, [onAskAiOpenChange, onRequestExpand, setAskAi]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!chatOpen) return;
     function onKey(event) {
-      if (event.key === "Escape") setAskAi(false);
+      if (event.key === "Escape") {
+        restoreAskAiFocusRef.current = true;
+        setAskAi(false);
+      }
     }
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [chatOpen, setAskAi]);
+  useEffect9(() => {
+    const frame = requestAnimationFrame(() => {
+      var _a2, _b;
+      if (chatOpen) {
+        (_a2 = askAiBackRef.current) == null ? void 0 : _a2.focus();
+      } else if (restoreAskAiFocusRef.current) {
+        restoreAskAiFocusRef.current = false;
+        (_b = askAiButtonRef.current) == null ? void 0 : _b.focus();
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [chatOpen]);
+  function closeAskAi() {
+    restoreAskAiFocusRef.current = true;
+    setAskAi(false);
+  }
   function toggleAskAi() {
     if (askAiOpen) {
-      setAskAi(false);
+      closeAskAi();
       return;
     }
     if (collapsed) onRequestExpand == null ? void 0 : onRequestExpand();
     setAskAi(true);
   }
-  const askAiButton = /* @__PURE__ */ jsx24(
+  const askAiButton = /* @__PURE__ */ jsx25(
     "button",
     {
+      ref: askAiButtonRef,
       type: "button",
       "data-test": "suite-ask-ai-toggle",
       "aria-pressed": askAiOpen,
       "aria-label": askAiOpen ? "Back to navigation" : "Shelly AI",
       onClick: toggleAskAi,
       className: cn2(
-        "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-focus-ring",
+        "ph-btn ph-btn-ghost ph-btn-square h-10 w-10 shrink-0",
         askAiOpen ? "bg-ph-brand/10 text-ph-brand" : "text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink"
       ),
-      children: /* @__PURE__ */ jsx24(Sparks2, { className: "h-4 w-4", "aria-hidden": true })
+      children: /* @__PURE__ */ jsx25(Sparks2, { className: "h-4 w-4", "aria-hidden": true })
     }
   );
   if (chatOpen) {
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs20(
       "div",
       {
         "data-suite-chat-open": "",
+        "data-surface": surface ? "true" : "false",
         className: cn2(
-          "flex h-full w-full min-w-0 flex-col text-ph-ink",
-          surface ? "bg-ph-surface" : "bg-ph-canvas",
+          "suite-sidebar flex h-full w-full min-w-0 flex-col text-ph-ink",
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsxs20(
             "div",
             {
               className: cn2(
@@ -3829,60 +3977,59 @@ function SuiteSidebar({
                 surface ? "bg-ph-surface" : "bg-ph-canvas"
               ),
               children: [
-                /* @__PURE__ */ jsx24(
+                /* @__PURE__ */ jsx25(
                   "button",
                   {
+                    ref: askAiBackRef,
                     type: "button",
                     "data-test": "suite-ask-ai-back",
                     "aria-label": "Back to navigation",
-                    onClick: () => setAskAi(false),
-                    className: "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
-                    children: /* @__PURE__ */ jsx24(NavArrowLeft, { className: "h-4 w-4", "aria-hidden": true })
+                    onClick: closeAskAi,
+                    className: "ph-btn ph-btn-ghost ph-btn-square h-10 w-10 shrink-0 text-ph-subtle",
+                    children: /* @__PURE__ */ jsx25(NavArrowLeft, { className: "h-4 w-4", "aria-hidden": true })
                   }
                 ),
-                /* @__PURE__ */ jsx24("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink", children: "Shelly AI" })
+                /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink", children: "Shelly AI" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx24("div", { className: "min-h-0 flex-1", children: askAi })
+          /* @__PURE__ */ jsx25("div", { className: "min-h-0 flex-1", children: askAi })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
+      "data-surface": surface ? "true" : "false",
       className: cn2(
-        "flex h-full w-full min-w-0 flex-col text-ph-ink",
-        surface ? "bg-ph-surface" : "bg-ph-canvas",
+        "suite-sidebar flex h-full w-full min-w-0 flex-col text-ph-ink",
         className
       ),
       children: [
-        appSwitcher || notificationBell ? /* @__PURE__ */ jsxs19(
+        appSwitcher || notificationBell ? /* @__PURE__ */ jsxs20(
           "div",
           {
             className: cn2(
               "flex shrink-0 border-b border-ph-border",
-              surface ? "bg-ph-surface" : "bg-ph-canvas",
               collapsed ? "flex-col items-center gap-1 px-1 py-2" : "h-14 items-center justify-between gap-2 px-3"
             ),
             children: [
-              /* @__PURE__ */ jsx24("div", { className: cn2("min-w-0", collapsed ? "shrink-0" : "flex-1"), children: renderNode(appSwitcher, collapsed) }),
-              collapsed ? null : /* @__PURE__ */ jsx24("div", { className: "shrink-0", children: renderNode(notificationBell, collapsed) })
+              /* @__PURE__ */ jsx25("div", { className: cn2("min-w-0", collapsed ? "shrink-0" : "flex-1"), children: renderNode(appSwitcher, collapsed) }),
+              collapsed ? null : /* @__PURE__ */ jsx25("div", { className: "shrink-0", children: renderNode(notificationBell, collapsed) })
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsxs20(
           "div",
           {
             className: cn2(
               "flex min-h-0 flex-1 flex-col",
-              surface ? "bg-ph-surface" : "bg-ph-canvas",
               chatOpen ? "min-h-0" : "overflow-y-auto",
               collapsed ? "px-1.5 py-2" : "p-3"
             ),
             children: [
-              contextSwitcher ? /* @__PURE__ */ jsx24(
+              contextSwitcher ? /* @__PURE__ */ jsx25(
                 "div",
                 {
                   className: cn2(
@@ -3892,30 +4039,30 @@ function SuiteSidebar({
                   children: renderNode(contextSwitcher, collapsed)
                 }
               ) : null,
-              chatOpen ? /* @__PURE__ */ jsxs19("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-                /* @__PURE__ */ jsxs19("div", { className: "mb-2 flex shrink-0 items-center gap-1", children: [
-                  /* @__PURE__ */ jsxs19(
+              chatOpen ? /* @__PURE__ */ jsxs20("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+                /* @__PURE__ */ jsxs20("div", { className: "mb-2 flex shrink-0 items-center gap-1", children: [
+                  /* @__PURE__ */ jsxs20(
                     "button",
                     {
                       type: "button",
                       "data-test": "suite-ask-ai-back",
-                      onClick: () => setAskAi(false),
-                      className: "inline-flex h-9 items-center gap-1 rounded-lg px-2 text-sm font-medium text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
+                      onClick: closeAskAi,
+                      className: "ph-btn ph-btn-ghost ph-btn-sm h-9 text-ph-subtle",
                       children: [
-                        /* @__PURE__ */ jsx24(NavArrowLeft, { className: "h-4 w-4", "aria-hidden": true }),
+                        /* @__PURE__ */ jsx25(NavArrowLeft, { className: "h-4 w-4", "aria-hidden": true }),
                         "Nav"
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx24("span", { className: "truncate text-sm font-semibold text-ph-ink", children: "Shelly AI" })
+                  /* @__PURE__ */ jsx25("span", { className: "truncate text-sm font-semibold text-ph-ink", children: "Shelly AI" })
                 ] }),
-                /* @__PURE__ */ jsx24("div", { className: "min-h-0 flex-1", children: askAi })
-              ] }) : /* @__PURE__ */ jsxs19(Fragment7, { children: [
-                /* @__PURE__ */ jsx24("nav", { "aria-label": "Pages", className: "shrink-0 space-y-1", children: /* @__PURE__ */ jsx24("div", { className: "space-y-1", children: navItems.map((item) => {
+                /* @__PURE__ */ jsx25("div", { className: "min-h-0 flex-1", children: askAi })
+              ] }) : /* @__PURE__ */ jsxs20(Fragment7, { children: [
+                /* @__PURE__ */ jsx25("nav", { "aria-label": "Pages", className: "shrink-0 space-y-1", children: /* @__PURE__ */ jsx25("div", { className: "space-y-1", children: navItems.map((item) => {
                   var _a2;
                   const Icon = item.icon;
                   const active = Boolean(item.active);
-                  const link = /* @__PURE__ */ jsxs19(
+                  const link = /* @__PURE__ */ jsxs20(
                     Link2,
                     {
                       href: item.href,
@@ -3924,12 +4071,12 @@ function SuiteSidebar({
                       "aria-current": active ? "page" : void 0,
                       onClick: item.onClick,
                       className: cn2(
-                        "group relative flex min-h-11 touch-manipulation items-center gap-2.5 rounded-[var(--ph-radius-app)] text-sm font-medium transition-colors",
-                        active ? "bg-ph-muted" : "text-ph-subtle hover:bg-ph-muted hover:text-ph-ink",
+                        "group relative flex min-h-11 touch-manipulation items-center gap-2.5 rounded-[var(--ph-radius-control)] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]",
+                        active ? "bg-[var(--ph-selected-bg)] text-[var(--ph-selected-text)] shadow-[inset_0_0_0_1px_var(--ph-selected-border)]" : "text-ph-subtle hover:bg-[var(--ph-surface-hover)] hover:text-ph-ink",
                         collapsed ? "mx-auto size-11 shrink-0 justify-center gap-0 px-0 py-0" : "w-full px-2.5 py-2"
                       ),
                       children: [
-                        /* @__PURE__ */ jsx24(
+                        /* @__PURE__ */ jsx25(
                           "span",
                           {
                             className: cn2(
@@ -3937,7 +4084,7 @@ function SuiteSidebar({
                               item.iconClassName
                             ),
                             "aria-hidden": true,
-                            children: /* @__PURE__ */ jsx24(
+                            children: /* @__PURE__ */ jsx25(
                               Icon,
                               {
                                 className: "h-full w-full",
@@ -3946,25 +4093,25 @@ function SuiteSidebar({
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsx24(
+                        /* @__PURE__ */ jsx25(
                           "span",
                           {
                             className: cn2(
                               "relative truncate",
-                              active ? "text-ph-ink" : "text-ph-subtle group-hover:text-ph-ink",
+                              active ? "text-[var(--ph-selected-text)]" : "text-ph-subtle group-hover:text-ph-ink",
                               collapsed && "sr-only"
                             ),
                             children: item.label
                           }
                         ),
-                        !collapsed && item.badge ? /* @__PURE__ */ jsx24("span", { className: "relative ml-auto shrink-0", children: item.badge }) : null
+                        !collapsed && item.badge ? /* @__PURE__ */ jsx25("span", { className: "relative ml-auto shrink-0", children: item.badge }) : null
                       ]
                     },
                     item.label
                   );
-                  return collapsed ? /* @__PURE__ */ jsx24(Tooltip, { content: item.label, side: "right", children: link }, item.label) : link;
+                  return collapsed ? /* @__PURE__ */ jsx25(Tooltip, { content: item.label, side: "right", children: link }, item.label) : link;
                 }) }) }),
-                secondaryNav ? /* @__PURE__ */ jsx24(
+                secondaryNav ? /* @__PURE__ */ jsx25(
                   "div",
                   {
                     className: "min-h-0 flex-1",
@@ -3976,15 +4123,14 @@ function SuiteSidebar({
             ]
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "div",
           {
             className: cn2(
               "shrink-0 border-t border-ph-border",
-              surface ? "bg-ph-surface" : "bg-ph-canvas",
               collapsed ? "p-1.5" : "p-3"
             ),
-            children: /* @__PURE__ */ jsxs19(
+            children: /* @__PURE__ */ jsxs20(
               "div",
               {
                 className: cn2(
@@ -3993,8 +4139,8 @@ function SuiteSidebar({
                 ),
                 children: [
                   renderNode(userMenu, collapsed),
-                  showAskAi ? /* @__PURE__ */ jsx24("div", { className: cn2("shrink-0", collapsed ? "mt-2" : "ml-auto"), children: /* @__PURE__ */ jsx24(Tooltip, { content: "Shelly AI", side: collapsed ? "right" : "top", children: askAiButton }) }) : footerExtras ? /* @__PURE__ */ jsx24("div", { className: cn2("shrink-0", collapsed ? "mt-2" : "ml-auto"), children: renderNode(footerExtras, collapsed) }) : null,
-                  showAskAi && footerExtras ? /* @__PURE__ */ jsx24("div", { className: cn2("shrink-0", collapsed && "mt-2"), children: renderNode(footerExtras, collapsed) }) : null
+                  showAskAi ? /* @__PURE__ */ jsx25("div", { className: cn2("shrink-0", collapsed ? "mt-2" : "ml-auto"), children: /* @__PURE__ */ jsx25(Tooltip, { content: "Shelly AI", side: collapsed ? "right" : "top", children: askAiButton }) }) : footerExtras ? /* @__PURE__ */ jsx25("div", { className: cn2("shrink-0", collapsed ? "mt-2" : "ml-auto"), children: renderNode(footerExtras, collapsed) }) : null,
+                  showAskAi && footerExtras ? /* @__PURE__ */ jsx25("div", { className: cn2("shrink-0", collapsed && "mt-2"), children: renderNode(footerExtras, collapsed) }) : null
                 ]
               }
             )
@@ -4006,7 +4152,7 @@ function SuiteSidebar({
 }
 
 // src/suite/components/suite-app-layout.tsx
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function SuiteAppLayout({
   sidebar,
   children,
@@ -4020,7 +4166,7 @@ function SuiteAppLayout({
   onResetWidth,
   className
 }) {
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       "data-test": "app-shell",
@@ -4029,16 +4175,16 @@ function SuiteAppLayout({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs20(
+        /* @__PURE__ */ jsxs21(
           "aside",
           {
             "aria-label": "Sidebar",
-            className: "relative hidden shrink-0 flex-col overflow-visible border-r border-ph-border ease-out lg:flex",
+            className: "suite-app-layout__sidebar relative hidden shrink-0 flex-col overflow-visible border-r ease-out lg:flex",
             style: { width: `${sidebarWidth}px` },
             "data-collapsed": collapsed ? "true" : "false",
             children: [
-              /* @__PURE__ */ jsx25("div", { className: "relative z-0 h-full min-h-0 isolate", children: sidebar }),
-              onStartResize ? /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx26("div", { className: "relative z-0 h-full min-h-0 isolate", children: sidebar }),
+              onStartResize ? /* @__PURE__ */ jsx26(
                 "div",
                 {
                   role: "separator",
@@ -4055,7 +4201,10 @@ function SuiteAppLayout({
                   onKeyDown: (event) => {
                     if (event.key === "Home") {
                       event.preventDefault();
-                      onResetWidth == null ? void 0 : onResetWidth();
+                      onResizeBy == null ? void 0 : onResizeBy(SIDEBAR_RAIL_WIDTH - sidebarWidth);
+                    } else if (event.key === "End") {
+                      event.preventDefault();
+                      onResizeBy == null ? void 0 : onResizeBy(SIDEBAR_MAX_WIDTH - sidebarWidth);
                     } else if (event.key === "ArrowLeft") {
                       event.preventDefault();
                       onResizeBy == null ? void 0 : onResizeBy(-16);
@@ -4064,29 +4213,29 @@ function SuiteAppLayout({
                       onResizeBy == null ? void 0 : onResizeBy(16);
                     }
                   },
-                  className: "absolute inset-y-0 right-0 z-20 w-2 cursor-col-resize touch-none transition-colors before:absolute before:-left-2 before:-right-2 before:inset-y-0 before:content-[''] hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
+                  className: "suite-sidebar-resize-handle absolute inset-y-0 right-0 z-20 w-2 cursor-col-resize touch-none before:absolute before:-left-2 before:-right-2 before:inset-y-0 before:content-['']"
                 }
               ) : null
             ]
           }
         ),
-        /* @__PURE__ */ jsxs20("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
-          mobileHeader ? /* @__PURE__ */ jsx25("div", { className: "shrink-0 lg:hidden", children: mobileHeader }) : null,
-          /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsxs21("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
+          mobileHeader ? /* @__PURE__ */ jsx26("div", { className: "shrink-0 lg:hidden", children: mobileHeader }) : null,
+          /* @__PURE__ */ jsx26(
             "main",
             {
               id: "main-content",
               tabIndex: 0,
               "data-lock-scroll": lockMainScroll ? "true" : void 0,
               className: cn2(
-                "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ph-focus",
+                "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none",
                 "suite-app-layout__main",
                 lockMainScroll ? "overflow-hidden" : "overflow-y-auto"
               ),
               children
             }
           ),
-          bottomNav ? /* @__PURE__ */ jsx25("div", { className: "shrink-0 lg:hidden", children: bottomNav }) : null
+          bottomNav ? /* @__PURE__ */ jsx26("div", { className: "shrink-0 lg:hidden", children: bottomNav }) : null
         ] })
       ]
     }
@@ -4095,10 +4244,10 @@ function SuiteAppLayout({
 
 // src/suite/components/suite-integration-picker.tsx
 import {
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useMemo as useMemo3,
-  useRef as useRef4,
-  useState as useState12
+  useRef as useRef5,
+  useState as useState13
 } from "react";
 import {
   Bridge3d,
@@ -4109,24 +4258,24 @@ import {
   Search,
   Xmark
 } from "iconoir-react";
-import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 var DESCRIPTION_LIMIT = 90;
 function IntegrationSkeletonCard() {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "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",
       children: [
-        /* @__PURE__ */ jsxs21("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx26("div", { className: "h-8 w-8 shrink-0 rounded-md bg-ph-muted" }),
-          /* @__PURE__ */ jsxs21("div", { className: "min-w-0 flex-1 space-y-2 pt-1", children: [
-            /* @__PURE__ */ jsx26("div", { className: "h-4 w-3/5 rounded bg-ph-muted" }),
-            /* @__PURE__ */ jsx26("div", { className: "h-3 w-full rounded bg-ph-muted" }),
-            /* @__PURE__ */ jsx26("div", { className: "h-3 w-4/5 rounded bg-ph-muted" })
+        /* @__PURE__ */ jsxs22("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx27("div", { className: "h-8 w-8 shrink-0 rounded-md bg-ph-muted" }),
+          /* @__PURE__ */ jsxs22("div", { className: "min-w-0 flex-1 space-y-2 pt-1", children: [
+            /* @__PURE__ */ jsx27("div", { className: "h-4 w-3/5 rounded bg-ph-muted" }),
+            /* @__PURE__ */ jsx27("div", { className: "h-3 w-full rounded bg-ph-muted" }),
+            /* @__PURE__ */ jsx27("div", { className: "h-3 w-4/5 rounded bg-ph-muted" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx26("div", { className: "mt-3 h-9 w-20 rounded bg-ph-muted" })
+        /* @__PURE__ */ jsx27("div", { className: "mt-3 h-9 w-20 rounded bg-ph-muted" })
       ]
     }
   );
@@ -4188,34 +4337,34 @@ function SuiteIntegrationPicker({
   description = "Connect an app to this workspace securely.",
   dataTest = "suite-integration-picker"
 }) {
-  const [query, setQuery] = useState12("");
-  const [category, setCategory] = useState12("all");
-  const [categoryQuery, setCategoryQuery] = useState12("");
-  const [categoryMenuOpen, setCategoryMenuOpen] = useState12(false);
-  const [expanded, setExpanded] = useState12(null);
-  const [bridgeOnlyInternal, setBridgeOnlyInternal] = useState12(false);
-  const categoryMenuRef = useRef4(null);
-  const categoryTriggerRef = useRef4(null);
-  const categorySearchRef = useRef4(null);
-  const categoryOptionRefs = useRef4({});
-  const pendingCategoryFocus = useRef4(
+  const [query, setQuery] = useState13("");
+  const [category, setCategory] = useState13("all");
+  const [categoryQuery, setCategoryQuery] = useState13("");
+  const [categoryMenuOpen, setCategoryMenuOpen] = useState13(false);
+  const [expanded, setExpanded] = useState13(null);
+  const [bridgeOnlyInternal, setBridgeOnlyInternal] = useState13(false);
+  const categoryMenuRef = useRef5(null);
+  const categoryTriggerRef = useRef5(null);
+  const categorySearchRef = useRef5(null);
+  const categoryOptionRefs = useRef5({});
+  const pendingCategoryFocus = useRef5(
     null
   );
-  const scrollViewportRef = useRef4(null);
-  const loadMoreSentinelRef = useRef4(null);
-  const loadMoreInFlightRef = useRef4(false);
-  const sentinelVisibleRef = useRef4(false);
-  const authRequestRef = useRef4(0);
-  const [methodItem, setMethodItem] = useState12(null);
-  const [authItem, setAuthItem] = useState12(null);
-  const [authValues, setAuthValues] = useState12({});
-  const [authLoading, setAuthLoading] = useState12(false);
-  const [authSubmitting, setAuthSubmitting] = useState12(false);
-  const [authError, setAuthError] = useState12(null);
-  const [connectionError, setConnectionError] = useState12(null);
-  const [itemToDisconnect, setItemToDisconnect] = useState12(null);
-  const [disconnecting, setDisconnecting] = useState12(false);
-  const [disconnectError, setDisconnectError] = useState12(null);
+  const scrollViewportRef = useRef5(null);
+  const loadMoreSentinelRef = useRef5(null);
+  const loadMoreInFlightRef = useRef5(false);
+  const sentinelVisibleRef = useRef5(false);
+  const authRequestRef = useRef5(0);
+  const [methodItem, setMethodItem] = useState13(null);
+  const [authItem, setAuthItem] = useState13(null);
+  const [authValues, setAuthValues] = useState13({});
+  const [authLoading, setAuthLoading] = useState13(false);
+  const [authSubmitting, setAuthSubmitting] = useState13(false);
+  const [authError, setAuthError] = useState13(null);
+  const [connectionError, setConnectionError] = useState13(null);
+  const [itemToDisconnect, setItemToDisconnect] = useState13(null);
+  const [disconnecting, setDisconnecting] = useState13(false);
+  const [disconnectError, setDisconnectError] = useState13(null);
   const itemCategories = useMemo3(
     () => Array.from(
       new Set(items.flatMap((item) => {
@@ -4406,7 +4555,7 @@ function SuiteIntegrationPicker({
       setAuthSubmitting(false);
     }
   }
-  useEffect9(() => {
+  useEffect10(() => {
     if (!categoryMenuOpen) return;
     const handlePointerDown = (event) => {
       var _a2;
@@ -4424,7 +4573,7 @@ function SuiteIntegrationPicker({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [categoryMenuOpen]);
-  useEffect9(() => {
+  useEffect10(() => {
     var _a2, _b, _c;
     const target = pendingCategoryFocus.current;
     if (!target) return;
@@ -4433,10 +4582,10 @@ function SuiteIntegrationPicker({
     else if (target === "search") (_b = categorySearchRef.current) == null ? void 0 : _b.focus();
     else (_c = categoryOptionRefs.current[target]) == null ? void 0 : _c.focus();
   }, [activeCategory, categoryMenuOpen, categoryQuery, visibleCategories]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!loadingMore) loadMoreInFlightRef.current = false;
   }, [loadingMore]);
-  useEffect9(() => {
+  useEffect10(() => {
     const root = scrollViewportRef.current;
     const sentinel = loadMoreSentinelRef.current;
     if (!open || !root || !sentinel) {
@@ -4462,8 +4611,8 @@ function SuiteIntegrationPicker({
     observer.observe(sentinel);
     return () => observer.disconnect();
   }, [catalogLoading, hasMore, loading, loadingMore, onEndReached, open]);
-  return /* @__PURE__ */ jsxs21(Fragment8, { children: [
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs22(Fragment8, { children: [
+    /* @__PURE__ */ jsx27(
       Modal,
       {
         open,
@@ -4473,15 +4622,15 @@ function SuiteIntegrationPicker({
         size: "xl",
         dataTest,
         bodyClassName: "!overflow-hidden",
-        children: /* @__PURE__ */ jsxs21("div", { className: "space-y-4", children: [
-          connectionError ? /* @__PURE__ */ jsx26("p", { className: "text-sm text-ph-danger", role: "alert", children: connectionError }) : null,
-          /* @__PURE__ */ jsxs21(
+        children: /* @__PURE__ */ jsxs22("div", { className: "space-y-4", children: [
+          connectionError ? /* @__PURE__ */ jsx27("p", { className: "text-sm text-ph-danger", role: "alert", children: connectionError }) : null,
+          /* @__PURE__ */ jsxs22(
             "label",
             {
               className: "inline-flex w-fit cursor-pointer items-center gap-2 text-sm text-ph-ink",
               "data-test": `${dataTest}-bridge-only`,
               children: [
-                /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx27(
                   "input",
                   {
                     type: "checkbox",
@@ -4492,27 +4641,27 @@ function SuiteIntegrationPicker({
                     "aria-label": "Shelly Bridge only"
                   }
                 ),
-                /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx27(
                   Bridge3d,
                   {
                     className: "h-4 w-4 shrink-0 text-ph-subtle",
                     "aria-hidden": true
                   }
                 ),
-                /* @__PURE__ */ jsx26("span", { children: "Shelly Bridge only" })
+                /* @__PURE__ */ jsx27("span", { children: "Shelly Bridge only" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs21("div", { className: "grid gap-4 md:grid-cols-2", children: [
-            /* @__PURE__ */ jsxs21("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsxs22("div", { className: "grid gap-4 md:grid-cols-2", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx27(
                 Search,
                 {
                   className: "pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-ph-subtle",
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx27(
                 Input,
                 {
                   value: activeSearch,
@@ -4526,8 +4675,8 @@ function SuiteIntegrationPicker({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs21("div", { ref: categoryMenuRef, className: "relative", children: [
-              /* @__PURE__ */ jsxs21(
+            /* @__PURE__ */ jsxs22("div", { ref: categoryMenuRef, className: "relative", children: [
+              /* @__PURE__ */ jsxs22(
                 "button",
                 {
                   ref: categoryTriggerRef,
@@ -4544,17 +4693,17 @@ function SuiteIntegrationPicker({
                   },
                   onKeyDown: handleCategoryTriggerKeyDown,
                   children: [
-                    /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx27(
                         Filter,
                         {
                           className: "h-4 w-4 shrink-0 text-ph-subtle",
                           "aria-hidden": true
                         }
                       ),
-                      /* @__PURE__ */ jsx26("span", { children: activeCategory === "all" ? "All apps" : categoryLabel(activeCategory) })
+                      /* @__PURE__ */ jsx27("span", { children: activeCategory === "all" ? "All apps" : categoryLabel(activeCategory) })
                     ] }),
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx27(
                       NavArrowDown2,
                       {
                         className: `h-4 w-4 transition-transform ${categoryMenuOpen ? "rotate-180" : ""}`,
@@ -4564,12 +4713,12 @@ function SuiteIntegrationPicker({
                   ]
                 }
               ),
-              categoryMenuOpen ? /* @__PURE__ */ jsxs21(
+              categoryMenuOpen ? /* @__PURE__ */ jsxs22(
                 "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)]",
                   children: [
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx27(
                       Input,
                       {
                         ref: categorySearchRef,
@@ -4589,7 +4738,7 @@ function SuiteIntegrationPicker({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx27(
                       "div",
                       {
                         id: `${dataTest}-category-options`,
@@ -4597,7 +4746,7 @@ function SuiteIntegrationPicker({
                         "aria-label": "Integration categories",
                         className: "mt-2 max-h-52 overflow-y-auto",
                         "data-test": "integration-category-options",
-                        children: categoryValues.map((value) => /* @__PURE__ */ jsx26(
+                        children: categoryValues.map((value) => /* @__PURE__ */ jsx27(
                           "button",
                           {
                             type: "button",
@@ -4607,7 +4756,7 @@ 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") {
@@ -4629,20 +4778,20 @@ function SuiteIntegrationPicker({
               ) : null
             ] })
           ] }),
-          /* @__PURE__ */ jsxs21(
+          /* @__PURE__ */ jsxs22(
             "div",
             {
               ref: scrollViewportRef,
               className: "min-h-0 max-h-[min(60vh,32rem)] w-full overflow-y-auto pr-1",
               children: [
-                loading || catalogLoading ? /* @__PURE__ */ jsx26(
+                loading || catalogLoading ? /* @__PURE__ */ jsx27(
                   "div",
                   {
                     className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3",
                     "aria-label": "Loading apps",
-                    children: Array.from({ length: SKELETON_COUNT }, (_, index) => /* @__PURE__ */ jsx26(IntegrationSkeletonCard, {}, index))
+                    children: Array.from({ length: SKELETON_COUNT }, (_, index) => /* @__PURE__ */ jsx27(IntegrationSkeletonCard, {}, index))
                   }
-                ) : /* @__PURE__ */ jsxs21("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: [
+                ) : /* @__PURE__ */ jsxs22("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: [
                   filtered.map((item) => {
                     var _a2, _b;
                     const isExpanded = expanded === item.id;
@@ -4650,33 +4799,33 @@ function SuiteIntegrationPicker({
                     const bridgeApps = suiteAppsForIntegration(item);
                     const schemes = authSchemesFor(item);
                     const text = isExpanded || !longDescription ? item.description : `${item.description.slice(0, DESCRIPTION_LIMIT).trimEnd()}...`;
-                    return /* @__PURE__ */ jsxs21(
+                    return /* @__PURE__ */ jsxs22(
                       "div",
                       {
-                        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",
                         children: [
-                          /* @__PURE__ */ jsx26(
+                          /* @__PURE__ */ jsx27(
                             "button",
                             {
                               type: "button",
                               className: "min-w-0 text-left",
                               onClick: () => longDescription && setExpanded(isExpanded ? null : item.id),
-                              "aria-expanded": isExpanded,
-                              children: /* @__PURE__ */ jsxs21("span", { className: "flex items-start gap-3", children: [
-                                /* @__PURE__ */ jsx26("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-ph-muted text-ph-ink", children: (_a2 = item.icon) != null ? _a2 : /* @__PURE__ */ jsx26(Plug, { className: "h-4 w-4", "aria-hidden": true }) }),
-                                /* @__PURE__ */ jsxs21("span", { className: "min-w-0", children: [
-                                  /* @__PURE__ */ jsx26("span", { className: "block truncate font-medium text-ph-ink", children: item.label }),
-                                  /* @__PURE__ */ jsx26("span", { className: "mt-1 block text-xs text-ph-subtle", children: text }),
-                                  longDescription ? /* @__PURE__ */ jsxs21("span", { className: "mt-1 block text-xs font-medium text-ph-brand", children: [
+                              "aria-expanded": longDescription ? isExpanded : void 0,
+                              children: /* @__PURE__ */ jsxs22("span", { className: "flex items-start gap-3", children: [
+                                /* @__PURE__ */ jsx27("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-ph-muted text-ph-ink", children: (_a2 = item.icon) != null ? _a2 : /* @__PURE__ */ jsx27(Plug, { className: "h-4 w-4", "aria-hidden": true }) }),
+                                /* @__PURE__ */ jsxs22("span", { className: "min-w-0", children: [
+                                  /* @__PURE__ */ jsx27("span", { className: "block truncate font-medium text-ph-ink", children: item.label }),
+                                  /* @__PURE__ */ jsx27("span", { className: "mt-1 block text-xs text-ph-subtle", children: text }),
+                                  longDescription ? /* @__PURE__ */ jsxs22("span", { className: "mt-1 block text-xs font-medium text-ph-brand", children: [
                                     isExpanded ? "See less" : "See more",
                                     " ",
-                                    isExpanded ? /* @__PURE__ */ jsx26(NavArrowUp, { className: "inline h-3 w-3" }) : /* @__PURE__ */ jsx26(NavArrowDown2, { className: "inline h-3 w-3" })
+                                    isExpanded ? /* @__PURE__ */ jsx27(NavArrowUp, { className: "inline h-3 w-3" }) : /* @__PURE__ */ jsx27(NavArrowDown2, { className: "inline h-3 w-3" })
                                   ] }) : null
                                 ] })
                               ] })
                             }
                           ),
-                          bridgeApps.length > 0 ? /* @__PURE__ */ jsx26(
+                          bridgeApps.length > 0 ? /* @__PURE__ */ jsx27(
                             "div",
                             {
                               className: "mt-3 flex flex-wrap items-center gap-1.5",
@@ -4684,7 +4833,7 @@ function SuiteIntegrationPicker({
                               children: bridgeApps.map((app) => {
                                 const mark = BRIDGE_MARK[app];
                                 if (!mark) return null;
-                                return /* @__PURE__ */ jsx26(
+                                return /* @__PURE__ */ jsx27(
                                   "img",
                                   {
                                     src: mark.src,
@@ -4698,12 +4847,12 @@ function SuiteIntegrationPicker({
                               })
                             }
                           ) : null,
-                          schemes.length > 0 ? /* @__PURE__ */ jsx26(
+                          schemes.length > 0 ? /* @__PURE__ */ jsx27(
                             "div",
                             {
                               className: "mt-3 flex flex-wrap gap-1.5",
                               "aria-label": "Connection methods",
-                              children: schemes.map((scheme) => /* @__PURE__ */ jsx26(
+                              children: schemes.map((scheme) => /* @__PURE__ */ jsx27(
                                 "span",
                                 {
                                   className: "rounded-full border border-ph-border bg-ph-muted px-2 py-1 text-[0.6875rem] font-medium text-ph-subtle",
@@ -4714,7 +4863,7 @@ function SuiteIntegrationPicker({
                               ))
                             }
                           ) : null,
-                          /* @__PURE__ */ jsx26(
+                          /* @__PURE__ */ jsx27(
                             Button,
                             {
                               type: "button",
@@ -4722,8 +4871,8 @@ function SuiteIntegrationPicker({
                               className: "mt-3 self-start",
                               disabled: Boolean(item.unavailableReason) || item.connecting,
                               onClick: () => connectItem(item),
-                              children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
-                                /* @__PURE__ */ jsx26(Plug, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+                              children: /* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-1.5", children: [
+                                /* @__PURE__ */ jsx27(Plug, { className: "h-3.5 w-3.5", "aria-hidden": true }),
                                 item.connecting ? "Connecting..." : (_b = item.unavailableReason) != null ? _b : "Connect"
                               ] })
                             }
@@ -4733,31 +4882,31 @@ function SuiteIntegrationPicker({
                       item.id
                     );
                   }),
-                  loadingMore ? Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx26(IntegrationSkeletonCard, {}, `loading-${index}`)) : null
+                  loadingMore ? Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx27(IntegrationSkeletonCard, {}, `loading-${index}`)) : null
                 ] }),
-                /* @__PURE__ */ jsx26("div", { ref: loadMoreSentinelRef, className: "h-1", "aria-hidden": "true" })
+                /* @__PURE__ */ jsx27("div", { ref: loadMoreSentinelRef, className: "h-1", "aria-hidden": "true" })
               ]
             }
           ),
-          connectedItems.length > 0 && onDisconnect ? /* @__PURE__ */ jsxs21("div", { className: "space-y-2 border-t border-ph-border pt-4", children: [
-            /* @__PURE__ */ jsx26("h3", { className: "font-medium text-ph-ink", children: "Connected apps" }),
-            connectedItems.map((item) => /* @__PURE__ */ jsxs21(
+          connectedItems.length > 0 && onDisconnect ? /* @__PURE__ */ jsxs22("div", { className: "space-y-2 border-t border-ph-border pt-4", children: [
+            /* @__PURE__ */ jsx27("h3", { className: "font-medium text-ph-ink", children: "Connected apps" }),
+            connectedItems.map((item) => /* @__PURE__ */ jsxs22(
               "div",
               {
-                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",
                 children: [
-                  /* @__PURE__ */ jsxs21("span", { className: "flex min-w-0 items-center gap-2 text-sm text-ph-ink", children: [
+                  /* @__PURE__ */ jsxs22("span", { className: "flex min-w-0 items-center gap-2 text-sm text-ph-ink", children: [
                     item.icon,
-                    /* @__PURE__ */ jsx26("span", { className: "truncate", children: item.label })
+                    /* @__PURE__ */ jsx27("span", { className: "truncate", children: item.label })
                   ] }),
-                  /* @__PURE__ */ jsx26(
+                  /* @__PURE__ */ jsx27(
                     Button,
                     {
                       type: "button",
                       variant: "danger",
                       onClick: () => requestDisconnect(item),
-                      children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
-                        /* @__PURE__ */ jsx26(Xmark, { className: "h-4 w-4", "aria-hidden": true }),
+                      children: /* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx27(Xmark, { className: "h-4 w-4", "aria-hidden": true }),
                         "Disconnect"
                       ] })
                     }
@@ -4770,7 +4919,7 @@ function SuiteIntegrationPicker({
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsxs22(
       Modal,
       {
         open: itemToDisconnect !== null,
@@ -4782,8 +4931,8 @@ function SuiteIntegrationPicker({
         size: "sm",
         zIndex: 220,
         dataTest: `${dataTest}-disconnect-confirmation`,
-        footer: /* @__PURE__ */ jsxs21("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx26(
+        footer: /* @__PURE__ */ jsxs22("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx27(
             Button,
             {
               type: "button",
@@ -4793,7 +4942,7 @@ function SuiteIntegrationPicker({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             Button,
             {
               type: "button",
@@ -4806,8 +4955,8 @@ function SuiteIntegrationPicker({
           )
         ] }),
         children: [
-          disconnectError ? /* @__PURE__ */ jsx26("p", { className: "text-sm text-ph-danger", role: "alert", children: disconnectError }) : null,
-          /* @__PURE__ */ jsxs21("p", { className: "text-sm text-ph-ink", children: [
+          disconnectError ? /* @__PURE__ */ jsx27("p", { className: "text-sm text-ph-danger", role: "alert", children: disconnectError }) : null,
+          /* @__PURE__ */ jsxs22("p", { className: "text-sm text-ph-ink", children: [
             "Disconnect ",
             itemToDisconnect == null ? void 0 : itemToDisconnect.label,
             "? You can reconnect it later."
@@ -4815,7 +4964,7 @@ function SuiteIntegrationPicker({
         ]
       }
     ),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       Modal,
       {
         open: Boolean(methodItem),
@@ -4825,23 +4974,23 @@ function SuiteIntegrationPicker({
         size: "sm",
         zIndex: 200,
         dataTest: `${dataTest}-auth-method`,
-        children: methodItem ? /* @__PURE__ */ jsx26("div", { className: "space-y-2", children: authSchemesFor(methodItem).map((scheme) => /* @__PURE__ */ jsxs21(
+        children: methodItem ? /* @__PURE__ */ jsx27("div", { className: "space-y-2", children: authSchemesFor(methodItem).map((scheme) => /* @__PURE__ */ jsxs22(
           "button",
           {
             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()}`,
             children: [
-              /* @__PURE__ */ jsx26("span", { className: "font-medium", children: authSchemeLabel(scheme) }),
-              /* @__PURE__ */ jsx26("span", { className: "text-xs text-ph-subtle", children: "Select" })
+              /* @__PURE__ */ jsx27("span", { className: "font-medium", children: authSchemeLabel(scheme) }),
+              /* @__PURE__ */ jsx27("span", { className: "text-xs text-ph-subtle", children: "Select" })
             ]
           },
           scheme
         )) }) : null
       }
     ),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       Modal,
       {
         open: Boolean(authItem),
@@ -4851,14 +5000,14 @@ function SuiteIntegrationPicker({
         size: "md",
         zIndex: 210,
         dataTest: `${dataTest}-auth-form`,
-        children: authLoading ? /* @__PURE__ */ jsx26("p", { className: "text-sm text-ph-subtle", children: "Loading authentication fields..." }) : authItem ? /* @__PURE__ */ jsxs21(
+        children: authLoading ? /* @__PURE__ */ jsx27("p", { className: "text-sm text-ph-subtle", children: "Loading authentication fields..." }) : authItem ? /* @__PURE__ */ jsxs22(
           "form",
           {
             className: "space-y-4",
             onSubmit: (event) => void submitAuthForm(event),
             children: [
-              authError ? /* @__PURE__ */ jsx26("p", { className: "text-sm text-ph-danger", role: "alert", children: authError }) : null,
-              authItem.fields.length === 0 && authError ? /* @__PURE__ */ jsx26(
+              authError ? /* @__PURE__ */ jsx27("p", { className: "text-sm text-ph-danger", role: "alert", children: authError }) : null,
+              authItem.fields.length === 0 && authError ? /* @__PURE__ */ jsx27(
                 Button,
                 {
                   type: "button",
@@ -4869,7 +5018,7 @@ function SuiteIntegrationPicker({
               ) : null,
               authItem.fields.map((field) => {
                 var _a2, _b;
-                return /* @__PURE__ */ jsx26(
+                return /* @__PURE__ */ jsx27(
                   Input,
                   {
                     label: field.label,
@@ -4885,8 +5034,8 @@ function SuiteIntegrationPicker({
                   field.name
                 );
               }),
-              /* @__PURE__ */ jsxs21("div", { className: "flex justify-end gap-2 border-t border-ph-border pt-4", children: [
-                /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsxs22("div", { className: "flex justify-end gap-2 border-t border-ph-border pt-4", children: [
+                /* @__PURE__ */ jsx27(
                   Button,
                   {
                     type: "button",
@@ -4896,7 +5045,7 @@ function SuiteIntegrationPicker({
                     children: "Cancel"
                   }
                 ),
-                /* @__PURE__ */ jsx26(Button, { type: "submit", variant: "primary", disabled: authSubmitting, children: authSubmitting ? "Connecting..." : "Connect" })
+                /* @__PURE__ */ jsx27(Button, { type: "submit", variant: "primary", disabled: authSubmitting, children: authSubmitting ? "Connecting..." : "Connect" })
               ] })
             ]
           }
@@ -4907,9 +5056,9 @@ function SuiteIntegrationPicker({
 }
 
 // src/suite/components/suite-integration-rules.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { Plus, Xmark as Xmark2 } from "iconoir-react";
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var ACTION_LABELS = {
   create_tides_task: "Create a Tides task",
   draft_time_entry: "Draft a time entry",
@@ -4939,18 +5088,18 @@ function SuiteIntegrationRules({
   onRefresh,
   dataTest = "integration-rules"
 }) {
-  const [formOpen, setFormOpen] = useState13(false);
-  const [name, setName] = useState13("");
-  const [trigger, setTrigger] = useState13("");
-  const [actionType, setActionType] = useState13("create_tides_task");
-  const [projectId, setProjectId] = useState13("");
-  const [minutes, setMinutes] = useState13("");
-  const [priority, setPriority] = useState13("low");
-  const [submitting, setSubmitting] = useState13(false);
-  const [formError, setFormError] = useState13(null);
-  const [busyId, setBusyId] = useState13(null);
-  const [ruleToDelete, setRuleToDelete] = useState13(null);
-  const [deleteError, setDeleteError] = useState13(null);
+  const [formOpen, setFormOpen] = useState14(false);
+  const [name, setName] = useState14("");
+  const [trigger, setTrigger] = useState14("");
+  const [actionType, setActionType] = useState14("create_tides_task");
+  const [projectId, setProjectId] = useState14("");
+  const [minutes, setMinutes] = useState14("");
+  const [priority, setPriority] = useState14("low");
+  const [submitting, setSubmitting] = useState14(false);
+  const [formError, setFormError] = useState14(null);
+  const [busyId, setBusyId] = useState14(null);
+  const [ruleToDelete, setRuleToDelete] = useState14(null);
+  const [deleteError, setDeleteError] = useState14(null);
   const needsProject = actionType === "create_tides_task" || actionType === "draft_time_entry";
   async function submitForm(event) {
     event.preventDefault();
@@ -5015,20 +5164,20 @@ function SuiteIntegrationRules({
       setBusyId(null);
     }
   }
-  return /* @__PURE__ */ jsxs22("section", { className: "space-y-4", "data-test": dataTest, children: [
-    /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23("section", { className: "space-y-4", "data-test": dataTest, children: [
+    /* @__PURE__ */ jsxs23(
       Card,
       {
         variant: "outlined",
         bodyClassName: "p-5",
         "data-test": `${dataTest}-card`,
         children: [
-          /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
-            /* @__PURE__ */ jsxs22("div", { children: [
-              /* @__PURE__ */ jsx27("h3", { className: "font-medium text-ph-ink", children: "Automation rules" }),
-              /* @__PURE__ */ jsx27("p", { className: "mt-1 text-sm text-ph-subtle", children: "Turn incoming integration events into tasks, time entries, or notifications for this workspace." })
+          /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+            /* @__PURE__ */ jsxs23("div", { children: [
+              /* @__PURE__ */ jsx28("h3", { className: "font-medium text-ph-ink", children: "Automation rules" }),
+              /* @__PURE__ */ jsx28("p", { className: "mt-1 text-sm text-ph-subtle", children: "Turn incoming integration events into tasks, time entries, or notifications for this workspace." })
             ] }),
-            canManage && onCreate ? /* @__PURE__ */ jsx27(
+            canManage && onCreate ? /* @__PURE__ */ jsx28(
               Button,
               {
                 type: "button",
@@ -5036,14 +5185,14 @@ function SuiteIntegrationRules({
                 size: "sm",
                 onClick: () => setFormOpen((open) => !open),
                 "data-test": `${dataTest}-new`,
-                children: /* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ jsx27(Plus, { className: "h-4 w-4", "aria-hidden": true }),
+                children: /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx28(Plus, { className: "h-4 w-4", "aria-hidden": true }),
                   "New rule"
                 ] })
               }
             ) : null
           ] }),
-          error ? /* @__PURE__ */ jsx27(
+          error ? /* @__PURE__ */ jsx28(
             Alert,
             {
               status: "danger",
@@ -5051,36 +5200,36 @@ function SuiteIntegrationRules({
               description: error
             }
           ) : null,
-          loading ? /* @__PURE__ */ jsx27("p", { className: "mt-4 text-sm text-ph-subtle", children: "Loading rules..." }) : rules.length === 0 ? /* @__PURE__ */ jsx27(
+          loading ? /* @__PURE__ */ jsx28("p", { className: "mt-4 text-sm text-ph-subtle", children: "Loading rules..." }) : rules.length === 0 ? /* @__PURE__ */ jsx28(
             "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`,
-              children: /* @__PURE__ */ jsxs22("p", { className: "text-sm text-ph-subtle", children: [
+              children: /* @__PURE__ */ jsxs23("p", { className: "text-sm text-ph-subtle", children: [
                 "No automation rules yet.",
                 canManage ? " Create one to get started." : ""
               ] })
             }
-          ) : /* @__PURE__ */ jsx27("ul", { className: "mt-4 space-y-2", "data-test": `${dataTest}-list`, children: rules.map((rule) => /* @__PURE__ */ jsxs22(
+          ) : /* @__PURE__ */ jsx28("ul", { className: "mt-4 space-y-2", "data-test": `${dataTest}-list`, children: rules.map((rule) => /* @__PURE__ */ jsxs23(
             "li",
             {
-              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}`,
               children: [
-                /* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx27("p", { className: "truncate text-sm font-medium text-ph-ink", children: rule.name }),
-                  /* @__PURE__ */ jsxs22("p", { className: "mt-0.5 truncate text-xs text-ph-subtle", children: [
+                /* @__PURE__ */ jsxs23("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx28("p", { className: "truncate text-sm font-medium text-ph-ink", children: rule.name }),
+                  /* @__PURE__ */ jsxs23("p", { className: "mt-0.5 truncate text-xs text-ph-subtle", children: [
                     rule.trigger_event_type,
                     " \u2192 ",
                     actionLabel(rule.action_type)
                   ] }),
-                  /* @__PURE__ */ jsxs22("p", { className: "mt-0.5 truncate text-xs text-ph-subtle", children: [
+                  /* @__PURE__ */ jsxs23("p", { className: "mt-0.5 truncate text-xs text-ph-subtle", children: [
                     "Last fired: ",
                     formatDateTime(rule.last_fired_at)
                   ] })
                 ] }),
-                canManage ? /* @__PURE__ */ jsxs22("div", { className: "flex shrink-0 items-center gap-2", children: [
-                  /* @__PURE__ */ jsx27(
+                canManage ? /* @__PURE__ */ jsxs23("div", { className: "flex shrink-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx28(
                     Toggle,
                     {
                       checked: rule.enabled,
@@ -5089,7 +5238,7 @@ function SuiteIntegrationRules({
                       "aria-label": `Enable ${rule.name}`
                     }
                   ),
-                  /* @__PURE__ */ jsx27(
+                  /* @__PURE__ */ jsx28(
                     Button,
                     {
                       type: "button",
@@ -5098,10 +5247,10 @@ function SuiteIntegrationRules({
                       disabled: busyId === rule.id,
                       onClick: () => requestDelete(rule),
                       "aria-label": `Delete ${rule.name}`,
-                      children: /* @__PURE__ */ jsx27(Xmark2, { className: "h-4 w-4", "aria-hidden": true })
+                      children: /* @__PURE__ */ jsx28(Xmark2, { className: "h-4 w-4", "aria-hidden": true })
                     }
                   )
-                ] }) : /* @__PURE__ */ jsx27(
+                ] }) : /* @__PURE__ */ jsx28(
                   Badge,
                   {
                     variant: rule.enabled ? "success" : "neutral",
@@ -5113,15 +5262,15 @@ function SuiteIntegrationRules({
             },
             rule.id
           )) }),
-          canManage && formOpen && onCreate ? /* @__PURE__ */ jsxs22(
+          canManage && formOpen && onCreate ? /* @__PURE__ */ jsxs23(
             "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`,
               children: [
-                formError ? /* @__PURE__ */ jsx27("p", { className: "text-sm text-ph-danger", role: "alert", children: formError }) : null,
-                /* @__PURE__ */ jsx27(
+                formError ? /* @__PURE__ */ jsx28("p", { className: "text-sm text-ph-danger", role: "alert", children: formError }) : null,
+                /* @__PURE__ */ jsx28(
                   Input,
                   {
                     label: "Rule name",
@@ -5132,7 +5281,7 @@ function SuiteIntegrationRules({
                     "data-test": `${dataTest}-name`
                   }
                 ),
-                /* @__PURE__ */ jsx27(
+                /* @__PURE__ */ jsx28(
                   Input,
                   {
                     label: "Trigger event type",
@@ -5144,7 +5293,7 @@ function SuiteIntegrationRules({
                     "data-test": `${dataTest}-trigger`
                   }
                 ),
-                /* @__PURE__ */ jsx27(
+                /* @__PURE__ */ jsx28(
                   Select,
                   {
                     label: "Action",
@@ -5153,10 +5302,10 @@ function SuiteIntegrationRules({
                       event.target.value
                     ),
                     "data-test": `${dataTest}-action`,
-                    children: Object.entries(ACTION_LABELS).map(([value, label]) => /* @__PURE__ */ jsx27("option", { value, children: label }, value))
+                    children: Object.entries(ACTION_LABELS).map(([value, label]) => /* @__PURE__ */ jsx28("option", { value, children: label }, value))
                   }
                 ),
-                needsProject ? /* @__PURE__ */ jsxs22(
+                needsProject ? /* @__PURE__ */ jsxs23(
                   Select,
                   {
                     label: "Project",
@@ -5164,12 +5313,12 @@ function SuiteIntegrationRules({
                     onChange: (event) => setProjectId(event.target.value),
                     "data-test": `${dataTest}-project`,
                     children: [
-                      /* @__PURE__ */ jsx27("option", { value: "", children: "Choose a project..." }),
-                      projects.map((project) => /* @__PURE__ */ jsx27("option", { value: project.id, children: project.name }, project.id))
+                      /* @__PURE__ */ jsx28("option", { value: "", children: "Choose a project..." }),
+                      projects.map((project) => /* @__PURE__ */ jsx28("option", { value: project.id, children: project.name }, project.id))
                     ]
                   }
                 ) : null,
-                actionType === "draft_time_entry" ? /* @__PURE__ */ jsx27(
+                actionType === "draft_time_entry" ? /* @__PURE__ */ jsx28(
                   Input,
                   {
                     label: "Minutes (optional)",
@@ -5180,7 +5329,7 @@ function SuiteIntegrationRules({
                     "data-test": `${dataTest}-minutes`
                   }
                 ) : null,
-                actionType === "create_tides_task" ? /* @__PURE__ */ jsxs22(
+                actionType === "create_tides_task" ? /* @__PURE__ */ jsxs23(
                   Select,
                   {
                     label: "Priority",
@@ -5188,15 +5337,15 @@ function SuiteIntegrationRules({
                     onChange: (event) => setPriority(event.target.value),
                     "data-test": `${dataTest}-priority`,
                     children: [
-                      /* @__PURE__ */ jsx27("option", { value: "low", children: "Low" }),
-                      /* @__PURE__ */ jsx27("option", { value: "medium", children: "Medium" }),
-                      /* @__PURE__ */ jsx27("option", { value: "high", children: "High" }),
-                      /* @__PURE__ */ jsx27("option", { value: "urgent", children: "Urgent" })
+                      /* @__PURE__ */ jsx28("option", { value: "low", children: "Low" }),
+                      /* @__PURE__ */ jsx28("option", { value: "medium", children: "Medium" }),
+                      /* @__PURE__ */ jsx28("option", { value: "high", children: "High" }),
+                      /* @__PURE__ */ jsx28("option", { value: "urgent", children: "Urgent" })
                     ]
                   }
                 ) : null,
-                /* @__PURE__ */ jsxs22("div", { className: "flex justify-end gap-2 border-t border-ph-border pt-3", children: [
-                  /* @__PURE__ */ jsx27(
+                /* @__PURE__ */ jsxs23("div", { className: "flex justify-end gap-2 border-t border-ph-border pt-3", children: [
+                  /* @__PURE__ */ jsx28(
                     Button,
                     {
                       type: "button",
@@ -5206,7 +5355,7 @@ function SuiteIntegrationRules({
                       children: "Cancel"
                     }
                   ),
-                  /* @__PURE__ */ jsx27(Button, { type: "submit", variant: "primary", disabled: submitting, children: submitting ? "Creating..." : "Create rule" })
+                  /* @__PURE__ */ jsx28(Button, { type: "submit", variant: "primary", disabled: submitting, children: submitting ? "Creating..." : "Create rule" })
                 ] })
               ]
             }
@@ -5214,7 +5363,7 @@ function SuiteIntegrationRules({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsxs23(
       Modal,
       {
         open: ruleToDelete !== null,
@@ -5224,8 +5373,8 @@ function SuiteIntegrationRules({
         title: "Delete automation rule",
         description: "This action cannot be undone.",
         dataTest: `${dataTest}-delete-confirmation`,
-        footer: /* @__PURE__ */ jsxs22("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx27(
+        footer: /* @__PURE__ */ jsxs23("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx28(
             Button,
             {
               type: "button",
@@ -5235,7 +5384,7 @@ function SuiteIntegrationRules({
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             Button,
             {
               type: "button",
@@ -5248,8 +5397,8 @@ function SuiteIntegrationRules({
           )
         ] }),
         children: [
-          deleteError ? /* @__PURE__ */ jsx27("p", { className: "text-sm text-ph-danger", role: "alert", children: deleteError }) : null,
-          /* @__PURE__ */ jsxs22("p", { className: "text-sm text-ph-ink", children: [
+          deleteError ? /* @__PURE__ */ jsx28("p", { className: "text-sm text-ph-danger", role: "alert", children: deleteError }) : null,
+          /* @__PURE__ */ jsxs23("p", { className: "text-sm text-ph-ink", children: [
             "Delete ",
             ruleToDelete == null ? void 0 : ruleToDelete.name,
             "? This cannot be undone."
@@ -5257,36 +5406,36 @@ function SuiteIntegrationRules({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsxs23(
       Card,
       {
         variant: "outlined",
         bodyClassName: "p-5",
         "data-test": `${dataTest}-events-card`,
         children: [
-          /* @__PURE__ */ jsx27("h3", { className: "font-medium text-ph-ink", children: "Recent events" }),
-          /* @__PURE__ */ jsx27("p", { className: "mt-1 text-sm text-ph-subtle", children: "The latest events received from your connected apps." }),
-          events.length === 0 ? /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28("h3", { className: "font-medium text-ph-ink", children: "Recent events" }),
+          /* @__PURE__ */ jsx28("p", { className: "mt-1 text-sm text-ph-subtle", children: "The latest events received from your connected apps." }),
+          events.length === 0 ? /* @__PURE__ */ jsx28(
             "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`,
               children: "No integration events yet."
             }
-          ) : /* @__PURE__ */ jsx27("ul", { className: "mt-4 space-y-2", "data-test": `${dataTest}-events-list`, children: events.map((event) => /* @__PURE__ */ jsxs22(
+          ) : /* @__PURE__ */ jsx28("ul", { className: "mt-4 space-y-2", "data-test": `${dataTest}-events-list`, children: events.map((event) => /* @__PURE__ */ jsxs23(
             "li",
             {
-              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",
               children: [
-                /* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsxs22("p", { className: "truncate text-sm text-ph-ink", children: [
+                /* @__PURE__ */ jsxs23("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsxs23("p", { className: "truncate text-sm text-ph-ink", children: [
                     event.provider,
                     " \xB7 ",
                     event.event_type
                   ] }),
-                  /* @__PURE__ */ jsx27("p", { className: "mt-0.5 text-xs text-ph-subtle", children: formatDateTime(event.created_at) })
+                  /* @__PURE__ */ jsx28("p", { className: "mt-0.5 text-xs text-ph-subtle", children: formatDateTime(event.created_at) })
                 ] }),
-                /* @__PURE__ */ jsx27(
+                /* @__PURE__ */ jsx28(
                   Badge,
                   {
                     variant: event.processed_at ? "success" : "warning",
@@ -5306,10 +5455,10 @@ function SuiteIntegrationRules({
 
 // src/suite/components/suite-clients-projects-directory.tsx
 import {
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useMemo as useMemo5,
-  useRef as useRef6,
-  useState as useState15
+  useRef as useRef7,
+  useState as useState16
 } from "react";
 import {
   ArrowLeft,
@@ -5376,7 +5525,7 @@ function paletteIconSrc(imageUrl, color) {
 }
 
 // src/suite/components/suite-entity-icon.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function SuiteEntityIcon({
   imageUrl,
   label,
@@ -5391,7 +5540,7 @@ function SuiteEntityIcon({
   const neutralBackground = "var(--ph-muted, rgba(127,127,127,0.08))";
   if (imageUrl) {
     const src = tinted && tint ? paletteIconSrc(imageUrl, tint) : imageUrl;
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx29(
       "span",
       {
         className: cn(
@@ -5402,11 +5551,11 @@ function SuiteEntityIcon({
         style: __spreadValues({
           backgroundColor: tint ? `${tint}18` : neutralBackground
         }, style),
-        children: /* @__PURE__ */ jsx28("img", { src: src != null ? src : void 0, alt: "", className: "h-full w-full object-cover" })
+        children: /* @__PURE__ */ jsx29("img", { src: src != null ? src : void 0, alt: "", className: "h-full w-full object-contain" })
       }
     );
   }
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "span",
     {
       className: cn(
@@ -5420,11 +5569,11 @@ function SuiteEntityIcon({
       }, style),
       "aria-hidden": "true",
       title: label != null ? label : void 0,
-      children: /* @__PURE__ */ jsx28(
+      children: /* @__PURE__ */ jsx29(
         Folder,
         {
-          className: "h-[70%] w-[70%]",
-          strokeWidth: 1.6,
+          className: "h-[88%] w-[88%]",
+          strokeWidth: 1.8,
           "aria-hidden": true
         }
       )
@@ -5434,14 +5583,15 @@ function SuiteEntityIcon({
 
 // src/suite/components/suite-palette-library.tsx
 import {
-  useCallback as useCallback6,
-  useEffect as useEffect10,
+  useCallback as useCallback7,
+  useEffect as useEffect11,
+  useId as useId2,
   useMemo as useMemo4,
-  useRef as useRef5,
-  useState as useState14
+  useRef as useRef6,
+  useState as useState15
 } from "react";
 import { Filter as Filter2, FilterList, NavArrowDown as NavArrowDown3, Search as Search2 } from "iconoir-react";
-import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 var PAGE_SIZE = 60;
 var DISCOVER_LIMIT = 120;
 var ICON_TYPES = [
@@ -5459,25 +5609,25 @@ function FilterSelect({
   onChange,
   children
 }) {
-  return /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx30(
       Icon,
       {
         className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ph-mutedtext",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       "select",
       {
         "aria-label": label,
         value,
         onChange: (event) => onChange(event.target.value),
-        className: "h-full w-full appearance-none rounded-lg border border-ph-border bg-ph-surface py-2 pl-8 pr-7 text-sm text-ph-ink focus:border-ph-brand focus:outline-none",
+        className: "ph-select h-full w-full py-2 pl-8 pr-7",
         children
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       NavArrowDown3,
       {
         className: "pointer-events-none absolute right-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-ph-mutedtext",
@@ -5490,20 +5640,22 @@ function SuitePaletteLibrary({
   onPick
 }) {
   var _a2, _b;
-  const [collections, setCollections] = useState14([]);
-  const [typeFilter, setTypeFilter] = useState14("all");
-  const [collectionFilter, setCollectionFilter] = useState14("");
-  const [libraryOpen, setLibraryOpen] = useState14(false);
-  const [libraryQuery, setLibraryQuery] = useState14("");
-  const libraryRef = useRef5(null);
-  const [icons, setIcons] = useState14([]);
-  const [total, setTotal] = useState14(0);
-  const [page, setPage] = useState14(1);
-  const [query, setQuery] = useState14("");
-  const [loading, setLoading] = useState14(true);
-  const [loadingMore, setLoadingMore] = useState14(false);
-  const [error, setError] = useState14(null);
-  const requestId = useRef5(0);
+  const [collections, setCollections] = useState15([]);
+  const [typeFilter, setTypeFilter] = useState15("all");
+  const [collectionFilter, setCollectionFilter] = useState15("");
+  const [libraryOpen, setLibraryOpen] = useState15(false);
+  const [libraryQuery, setLibraryQuery] = useState15("");
+  const libraryRef = useRef6(null);
+  const libraryTriggerRef = useRef6(null);
+  const libraryListboxId = useId2();
+  const [icons, setIcons] = useState15([]);
+  const [total, setTotal] = useState15(0);
+  const [page, setPage] = useState15(1);
+  const [query, setQuery] = useState15("");
+  const [loading, setLoading] = useState15(true);
+  const [loadingMore, setLoadingMore] = useState15(false);
+  const [error, setError] = useState15(null);
+  const requestId = useRef6(0);
   const libraryOptions = useMemo4(() => {
     const list = collections.filter(
       (item) => typeFilter === "all" || item.style === typeFilter
@@ -5525,7 +5677,7 @@ function SuitePaletteLibrary({
     }
     return out;
   }, [libraryOptions]);
-  const loadCollection = useCallback6(async (slug, nextPage = 1) => {
+  const loadCollection = useCallback7(async (slug, nextPage = 1) => {
     const id = ++requestId.current;
     if (nextPage === 1) {
       setLoading(true);
@@ -5556,7 +5708,7 @@ function SuitePaletteLibrary({
       }
     }
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     let cancelled = false;
     fetchPaletteLibrary().then((library) => {
       if (cancelled) return;
@@ -5570,13 +5722,13 @@ function SuitePaletteLibrary({
       cancelled = true;
     };
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!collections.length) return;
     if (collectionFilter && !libraryOptions.some((c) => c.slug === collectionFilter)) {
       setCollectionFilter("");
     }
   }, [libraryOptions, collectionFilter, collections.length]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (query.trim()) return;
     if (collectionFilter) {
       void loadCollection(collectionFilter, 1);
@@ -5588,7 +5740,7 @@ function SuitePaletteLibrary({
     setIcons(discoverIcons);
     setTotal(discoverIcons.length);
   }, [collectionFilter, query, loadCollection, discoverIcons]);
-  useEffect10(() => {
+  useEffect11(() => {
     const term = query.trim();
     if (!term) return;
     const id = ++requestId.current;
@@ -5630,7 +5782,7 @@ function SuitePaletteLibrary({
     if (!term) return libraryOptions;
     return libraryOptions.filter((c) => c.name.toLowerCase().includes(term));
   }, [libraryOptions, libraryQuery]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!libraryOpen) return;
     const onPointerDown = (event) => {
       var _a3;
@@ -5639,18 +5791,55 @@ function SuitePaletteLibrary({
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, [libraryOpen]);
-  return /* @__PURE__ */ jsxs23("div", { className: "space-y-3", "data-test": "palette-icon-library", children: [
-    /* @__PURE__ */ jsxs23("div", { ref: libraryRef, className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
-        /* @__PURE__ */ jsxs23("div", { className: "relative flex-1", children: [
-          /* @__PURE__ */ jsx29(
+  const closeLibrary = (restoreFocus = false) => {
+    setLibraryOpen(false);
+    if (restoreFocus) requestAnimationFrame(() => {
+      var _a3;
+      return (_a3 = libraryTriggerRef.current) == null ? void 0 : _a3.focus();
+    });
+  };
+  const handleLibraryOptionKeyDown = (event) => {
+    var _a3, _b2, _c;
+    const options = Array.from(
+      (_b2 = (_a3 = libraryRef.current) == null ? void 0 : _a3.querySelectorAll('[role="option"]')) != null ? _b2 : []
+    );
+    const index = options.indexOf(event.currentTarget);
+    let nextIndex;
+    switch (event.key) {
+      case "ArrowDown":
+        nextIndex = (index + 1) % options.length;
+        break;
+      case "ArrowUp":
+        nextIndex = (index - 1 + options.length) % options.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = options.length - 1;
+        break;
+      case "Escape":
+        event.preventDefault();
+        closeLibrary(true);
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    (_c = options[nextIndex]) == null ? void 0 : _c.focus();
+  };
+  return /* @__PURE__ */ jsxs24("div", { className: "space-y-3", "data-test": "palette-icon-library", children: [
+    /* @__PURE__ */ jsxs24("div", { ref: libraryRef, className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
+        /* @__PURE__ */ jsxs24("div", { className: "relative flex-1", children: [
+          /* @__PURE__ */ jsx30(
             Search2,
             {
               className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ph-mutedtext",
               "aria-hidden": true
             }
           ),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             "input",
             {
               type: "search",
@@ -5658,22 +5847,30 @@ function SuitePaletteLibrary({
               onChange: (event) => setQuery(event.target.value),
               placeholder: "Search icons \u2014 handshake, rocket, briefcase\u2026",
               "aria-label": "Search icons",
-              className: "w-full rounded-lg border border-ph-border bg-ph-surface py-2 pl-8 pr-3 text-sm text-ph-ink placeholder:text-ph-mutedtext focus:border-ph-brand focus:outline-none"
+              className: "ph-input w-full py-2 pl-8 pr-3"
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs24(
           "button",
           {
+            ref: libraryTriggerRef,
             type: "button",
             "aria-haspopup": "listbox",
             "aria-expanded": libraryOpen,
+            "aria-controls": libraryOpen ? libraryListboxId : void 0,
             onClick: () => setLibraryOpen((open) => !open),
-            className: "flex items-center gap-2 rounded-lg border border-ph-border bg-ph-surface px-2.5 py-2 text-sm text-ph-ink hover:border-ph-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
+            onKeyDown: (event) => {
+              if (event.key === "Escape" && libraryOpen) {
+                event.preventDefault();
+                closeLibrary();
+              }
+            },
+            className: "ph-input flex items-center gap-2 px-2.5 py-2 text-sm text-ph-ink",
             children: [
-              /* @__PURE__ */ jsx29(FilterList, { className: "h-4 w-4 shrink-0 text-ph-mutedtext", "aria-hidden": true }),
-              /* @__PURE__ */ jsx29("span", { className: "max-w-[10rem] truncate", children: (_b = activeLibrary == null ? void 0 : activeLibrary.name) != null ? _b : "All libraries" }),
-              /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx30(FilterList, { className: "h-4 w-4 shrink-0 text-ph-mutedtext", "aria-hidden": true }),
+              /* @__PURE__ */ jsx30("span", { className: "max-w-[10rem] truncate", children: (_b = activeLibrary == null ? void 0 : activeLibrary.name) != null ? _b : "All libraries" }),
+              /* @__PURE__ */ jsx30(
                 NavArrowDown3,
                 {
                   className: cn(
@@ -5686,27 +5883,27 @@ function SuitePaletteLibrary({
             ]
           }
         ),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30(
           FilterSelect,
           {
             icon: Filter2,
             label: "Filter by icon type",
             value: typeFilter,
             onChange: setTypeFilter,
-            children: ICON_TYPES.map((type) => /* @__PURE__ */ jsx29("option", { value: type.value, children: type.label }, type.value))
+            children: ICON_TYPES.map((type) => /* @__PURE__ */ jsx30("option", { value: type.value, children: type.label }, type.value))
           }
         )
       ] }),
-      libraryOpen ? /* @__PURE__ */ jsxs23("div", { className: "rounded-lg border border-ph-border bg-ph-surface p-2", children: [
-        /* @__PURE__ */ jsxs23("div", { className: "relative mb-2", children: [
-          /* @__PURE__ */ jsx29(
+      libraryOpen ? /* @__PURE__ */ jsxs24("div", { className: "rounded-[var(--ph-radius-overlay)] border border-[var(--ph-border-control)] bg-[var(--ph-surface-overlay)] p-2 shadow-[var(--ph-shadow-floating)]", children: [
+        /* @__PURE__ */ jsxs24("div", { className: "relative mb-2", children: [
+          /* @__PURE__ */ jsx30(
             Search2,
             {
               className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ph-mutedtext",
               "aria-hidden": true
             }
           ),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             "input",
             {
               type: "search",
@@ -5715,70 +5912,85 @@ function SuitePaletteLibrary({
               onChange: (event) => setLibraryQuery(event.target.value),
               placeholder: "Search libraries\u2026",
               "aria-label": "Search libraries",
-              className: "w-full rounded-md border border-ph-border bg-ph-muted py-1.5 pl-8 pr-3 text-sm text-ph-ink placeholder:text-ph-mutedtext focus:border-ph-brand focus:outline-none"
+              className: "ph-input w-full bg-[var(--ph-surface-inset)] py-1.5 pl-8 pr-3",
+              onKeyDown: (event) => {
+                var _a3, _b2;
+                if (event.key === "ArrowDown") {
+                  event.preventDefault();
+                  (_b2 = (_a3 = libraryRef.current) == null ? void 0 : _a3.querySelector('[role="option"]')) == null ? void 0 : _b2.focus();
+                } else if (event.key === "Escape") {
+                  event.preventDefault();
+                  closeLibrary(true);
+                }
+              }
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs24(
           "ul",
           {
             role: "listbox",
+            id: libraryListboxId,
             "aria-label": "Libraries",
             className: "max-h-56 overflow-y-auto",
             children: [
-              /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsx30(
                 "button",
                 {
                   type: "button",
                   role: "option",
                   "aria-selected": !collectionFilter,
+                  tabIndex: -1,
+                  onKeyDown: handleLibraryOptionKeyDown,
                   onClick: () => {
                     setCollectionFilter("");
-                    setLibraryOpen(false);
+                    closeLibrary(true);
                   },
                   className: cn(
-                    "flex w-full items-center rounded-md px-2 py-1.5 text-left text-sm",
-                    !collectionFilter ? "bg-ph-muted text-ph-ink" : "text-ph-ink hover:bg-ph-muted"
+                    "flex w-full items-center rounded-[var(--ph-radius-control)] px-2 py-1.5 text-left text-sm focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]",
+                    !collectionFilter ? "bg-[var(--ph-selected-bg)] text-[var(--ph-selected-text)]" : "text-ph-ink hover:bg-[var(--ph-surface-hover)]"
                   ),
                   children: "All libraries"
                 }
               ) }),
-              filteredLibraries.map((collection) => /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsxs23(
+              filteredLibraries.map((collection) => /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsxs24(
                 "button",
                 {
                   type: "button",
                   role: "option",
                   "aria-selected": collectionFilter === collection.slug,
+                  tabIndex: -1,
+                  onKeyDown: handleLibraryOptionKeyDown,
                   onClick: () => {
                     setCollectionFilter(collection.slug);
-                    setLibraryOpen(false);
+                    closeLibrary(true);
                   },
                   className: cn(
-                    "flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-sm",
-                    collectionFilter === collection.slug ? "bg-ph-muted text-ph-ink" : "text-ph-ink hover:bg-ph-muted"
+                    "flex w-full items-center justify-between gap-2 rounded-[var(--ph-radius-control)] px-2 py-1.5 text-left text-sm focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]",
+                    collectionFilter === collection.slug ? "bg-[var(--ph-selected-bg)] text-[var(--ph-selected-text)]" : "text-ph-ink hover:bg-[var(--ph-surface-hover)]"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx29("span", { className: "truncate", children: collection.name }),
-                    /* @__PURE__ */ jsx29("span", { className: "shrink-0 text-xs text-ph-mutedtext", children: collection.count })
+                    /* @__PURE__ */ jsx30("span", { className: "truncate", children: collection.name }),
+                    /* @__PURE__ */ jsx30("span", { className: "shrink-0 text-xs text-ph-mutedtext", children: collection.count })
                   ]
                 }
               ) }, collection.slug)),
-              filteredLibraries.length === 0 ? /* @__PURE__ */ jsx29("li", { className: "px-2 py-4 text-center text-sm text-ph-mutedtext", children: "No libraries match." }) : null
+              filteredLibraries.length === 0 ? /* @__PURE__ */ jsx30("li", { className: "px-2 py-4 text-center text-sm text-ph-mutedtext", children: "No libraries match." }) : null
             ]
           }
         )
       ] }) : null
     ] }),
-    error ? /* @__PURE__ */ jsx29("p", { className: "text-sm text-ph-danger", children: error }) : loading ? /* @__PURE__ */ jsx29("p", { className: "py-8 text-center text-sm text-ph-mutedtext", children: "Loading icons\u2026" }) : icons.length === 0 ? /* @__PURE__ */ jsx29("p", { className: "py-8 text-center text-sm text-ph-mutedtext", children: "No icons matched. Try another word or filter." }) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
-      /* @__PURE__ */ jsx29("div", { className: "max-h-[320px] overflow-y-auto rounded-lg border border-ph-border p-2", children: /* @__PURE__ */ jsx29("div", { className: "grid grid-cols-6 gap-1.5 sm:grid-cols-8", children: icons.map((icon) => /* @__PURE__ */ jsx29(
+    error ? /* @__PURE__ */ jsx30("p", { className: "text-sm text-ph-danger", children: error }) : loading ? /* @__PURE__ */ jsx30("p", { className: "py-8 text-center text-sm text-ph-mutedtext", children: "Loading icons\u2026" }) : icons.length === 0 ? /* @__PURE__ */ jsx30("p", { className: "py-8 text-center text-sm text-ph-mutedtext", children: "No icons matched. Try another word or filter." }) : /* @__PURE__ */ jsxs24(Fragment9, { children: [
+      /* @__PURE__ */ jsx30("div", { className: "max-h-[320px] overflow-y-auto rounded-[var(--ph-radius-surface)] border border-ph-border p-2 focus-within:border-[var(--ph-selected-border)]", children: /* @__PURE__ */ jsx30("div", { className: "grid grid-cols-6 gap-1.5 sm:grid-cols-8", children: icons.map((icon) => /* @__PURE__ */ jsx30(
         "button",
         {
           type: "button",
           onClick: () => onPick({ url: icon.url, name: icon.name }),
           title: icon.name,
           "aria-label": `Use ${icon.name}`,
-          className: "flex h-10 items-center justify-center rounded-md border border-transparent p-1.5 hover:border-ph-brand hover:bg-ph-muted",
-          children: /* @__PURE__ */ jsx29(
+          className: "flex h-10 items-center justify-center rounded-[var(--ph-radius-control)] border border-transparent p-1.5 hover:border-[var(--ph-selected-border)] hover:bg-[var(--ph-surface-hover)] focus-visible:outline-none focus-visible:shadow-[var(--ph-focus-halo)]",
+          children: /* @__PURE__ */ jsx30(
             "img",
             {
               src: icon.url,
@@ -5791,14 +6003,14 @@ function SuitePaletteLibrary({
         },
         icon.id
       )) }) }),
-      /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between text-xs text-ph-mutedtext", children: [
-        /* @__PURE__ */ jsxs23("span", { children: [
+      /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between text-xs text-ph-mutedtext", children: [
+        /* @__PURE__ */ jsxs24("span", { children: [
           icons.length,
           " of ",
           total,
           searching ? " matching" : activeLibrary ? ` in ${activeLibrary.name}` : " across all libraries"
         ] }),
-        !searching && activeLibrary && icons.length < total ? /* @__PURE__ */ jsx29(
+        !searching && activeLibrary && icons.length < total ? /* @__PURE__ */ jsx30(
           "button",
           {
             type: "button",
@@ -5817,7 +6029,7 @@ function SuitePaletteLibrary({
 }
 
 // src/suite/components/suite-clients-projects-directory.tsx
-import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var DEFAULT_ICON = "";
 var DEFAULT_COLOR = "";
 function DirectoryIconPicker({
@@ -5828,11 +6040,11 @@ function DirectoryIconPicker({
   onClear,
   onBrowse
 }) {
-  return /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx30("span", { className: "mb-1.5 block text-sm font-medium text-ph-ink", children: "Icon" }),
-    /* @__PURE__ */ jsxs24("div", { className: "rounded-lg border border-ph-border bg-ph-muted p-3", children: [
-      /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx31("span", { className: "mb-1.5 block text-sm font-medium text-ph-ink", children: "Icon" }),
+    /* @__PURE__ */ jsxs25("div", { className: "rounded-[var(--ph-radius-surface)] border border-ph-border bg-[var(--ph-surface-inset)] p-3", children: [
+      /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx31(
           SuiteEntityIcon,
           {
             imageUrl: preview,
@@ -5842,11 +6054,11 @@ function DirectoryIconPicker({
             className: "h-9 w-9 text-base"
           }
         ),
-        /* @__PURE__ */ jsxs24("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx30("p", { className: "text-sm font-medium text-ph-ink", children: preview ? "Custom image" : "No icon yet" }),
-          /* @__PURE__ */ jsx30("p", { className: "text-xs text-ph-mutedtext", children: preview ? "Shown on cards and lists." : "Browse the library or upload your own." })
+        /* @__PURE__ */ jsxs25("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium text-ph-ink", children: preview ? "Custom image" : "No icon yet" }),
+          /* @__PURE__ */ jsx31("p", { className: "text-xs text-ph-mutedtext", children: preview ? "Shown on cards and lists." : "Browse the library or upload your own." })
         ] }),
-        onBrowse ? /* @__PURE__ */ jsx30(
+        onBrowse ? /* @__PURE__ */ jsx31(
           "button",
           {
             type: "button",
@@ -5856,7 +6068,7 @@ function DirectoryIconPicker({
           }
         ) : null
       ] }),
-      /* @__PURE__ */ jsx30("div", { className: "mt-3", children: /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31("div", { className: "mt-3", children: /* @__PURE__ */ jsx31(
         FileUpload,
         {
           accept: "image/png,image/jpeg,image/gif,image/webp,image/svg+xml,.svg",
@@ -5866,14 +6078,14 @@ function DirectoryIconPicker({
           }
         }
       ) }),
-      preview ? /* @__PURE__ */ jsxs24(
+      preview ? /* @__PURE__ */ jsxs25(
         "button",
         {
           type: "button",
           className: "mt-2 inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-ph-mutedtext hover:bg-ph-surface hover:text-ph-ink",
           onClick: onClear,
           children: [
-            /* @__PURE__ */ jsx30(Trash, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+            /* @__PURE__ */ jsx31(Trash, { className: "h-3.5 w-3.5", "aria-hidden": true }),
             " Remove image"
           ]
         }
@@ -5884,7 +6096,7 @@ function DirectoryIconPicker({
 function DirectoryIcon({
   item
 }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     SuiteEntityIcon,
     {
       imageUrl: item.icon_image,
@@ -5892,7 +6104,7 @@ function DirectoryIcon({
       color: item.color,
       tinted: true,
       className: "h-8 w-8 text-sm",
-      roundedClass: "rounded-lg"
+      roundedClass: "rounded-[var(--ph-radius-control)]"
     }
   );
 }
@@ -5912,32 +6124,32 @@ function SuiteClientsProjectsDirectory({
   dataTest = "suite-clients-projects-directory"
 }) {
   var _a2;
-  const [query, setQuery] = useState15("");
-  const [selectedClientId, setSelectedClientId] = useState15(null);
-  const [mobileDetail, setMobileDetail] = useState15(false);
-  const [editing, setEditing] = useState15(null);
-  const [draft, setDraft] = useState15({
+  const [query, setQuery] = useState16("");
+  const [selectedClientId, setSelectedClientId] = useState16(null);
+  const [mobileDetail, setMobileDetail] = useState16(false);
+  const [editing, setEditing] = useState16(null);
+  const [draft, setDraft] = useState16({
     name: "",
     icon: DEFAULT_ICON,
     color: DEFAULT_COLOR
   });
-  const [draftClientId, setDraftClientId] = useState15(null);
-  const [preview, setPreview] = useState15(null);
-  const [libraryOpen, setLibraryOpen] = useState15(false);
-  const [draftArchived, setDraftArchived] = useState15(false);
-  const [confirming, setConfirming] = useState15(null);
-  const [saving, setSaving] = useState15(false);
-  const [mutationError, setMutationError] = useState15(null);
-  const clientButtonRefs = useRef6({});
-  const backToClientsRef = useRef6(null);
-  const mobileFocusTarget = useRef6(null);
-  useEffect11(() => {
+  const [draftClientId, setDraftClientId] = useState16(null);
+  const [preview, setPreview] = useState16(null);
+  const [libraryOpen, setLibraryOpen] = useState16(false);
+  const [draftArchived, setDraftArchived] = useState16(false);
+  const [confirming, setConfirming] = useState16(null);
+  const [saving, setSaving] = useState16(false);
+  const [mutationError, setMutationError] = useState16(null);
+  const clientButtonRefs = useRef7({});
+  const backToClientsRef = useRef7(null);
+  const mobileFocusTarget = useRef7(null);
+  useEffect12(() => {
     var _a3, _b;
     if (selectedClientId && clients.some((client) => client.id === selectedClientId))
       return;
     setSelectedClientId((_b = (_a3 = clients[0]) == null ? void 0 : _a3.id) != null ? _b : null);
   }, [clients, selectedClientId]);
-  useEffect11(() => {
+  useEffect12(() => {
     var _a3, _b;
     const target = mobileFocusTarget.current;
     if (!target) return;
@@ -6114,10 +6326,10 @@ function SuiteClientsProjectsDirectory({
       );
     }
   }
-  return /* @__PURE__ */ jsxs24("div", { "data-test": dataTest, className: "space-y-3", children: [
-    error || mutationError ? /* @__PURE__ */ jsx30(Alert, { status: "danger", live: "assertive", children: error || mutationError }) : null,
-    loading ? /* @__PURE__ */ jsx30("p", { className: "text-sm text-ph-mutedtext", children: "Loading directory..." }) : /* @__PURE__ */ jsxs24("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]", children: [
-      /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25("div", { "data-test": dataTest, className: "space-y-3", children: [
+    error || mutationError ? /* @__PURE__ */ jsx31(Alert, { status: "danger", live: "assertive", children: error || mutationError }) : null,
+    loading ? /* @__PURE__ */ jsx31("p", { className: "text-sm text-ph-mutedtext", children: "Loading directory..." }) : /* @__PURE__ */ jsxs25("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]", children: [
+      /* @__PURE__ */ jsxs25(
         "section",
         {
           className: cn(
@@ -6125,16 +6337,16 @@ function SuiteClientsProjectsDirectory({
             mobileDetail ? "hidden lg:block" : "block"
           ),
           children: [
-            /* @__PURE__ */ jsxs24("div", { className: "flex h-14 items-center gap-2 border-b border-ph-border px-3", children: [
-              /* @__PURE__ */ jsxs24("div", { className: "relative min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsxs25("div", { className: "flex h-14 items-center gap-2 border-b border-ph-border px-3", children: [
+              /* @__PURE__ */ jsxs25("div", { className: "relative min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx31(
                   Search3,
                   {
                     className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-ph-mutedtext",
                     "aria-hidden": true
                   }
                 ),
-                /* @__PURE__ */ jsx30(
+                /* @__PURE__ */ jsx31(
                   Input,
                   {
                     hideLabel: true,
@@ -6146,18 +6358,18 @@ function SuiteClientsProjectsDirectory({
                   }
                 )
               ] }),
-              canEdit && onCreateClient ? /* @__PURE__ */ jsx30(
+              canEdit && onCreateClient ? /* @__PURE__ */ jsx31(
                 Button,
                 {
                   size: "sm",
                   variant: "primary",
-                  icon: /* @__PURE__ */ jsx30(Plus2, { className: "h-4 w-4" }),
+                  icon: /* @__PURE__ */ jsx31(Plus2, { className: "h-4 w-4" }),
                   onClick: () => openNew("client"),
                   children: "New client"
                 }
               ) : null
             ] }),
-            /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx31(
               "ul",
               {
                 role: "listbox",
@@ -6168,7 +6380,7 @@ function SuiteClientsProjectsDirectory({
                   const count = projects.filter(
                     (project) => project.clientId === client.id
                   ).length;
-                  return /* @__PURE__ */ jsx30("li", { role: "none", children: /* @__PURE__ */ jsxs24(
+                  return /* @__PURE__ */ jsx31("li", { role: "none", children: /* @__PURE__ */ jsxs25(
                     "button",
                     {
                       type: "button",
@@ -6181,14 +6393,14 @@ 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"
                       ),
                       children: [
-                        /* @__PURE__ */ jsx30(DirectoryIcon, { item: client }),
-                        /* @__PURE__ */ jsxs24("span", { className: "min-w-0 flex-1", children: [
-                          /* @__PURE__ */ jsx30("span", { className: "block truncate text-sm font-medium text-ph-ink", children: client.name }),
-                          /* @__PURE__ */ jsxs24("span", { className: "text-xs text-ph-mutedtext", children: [
+                        /* @__PURE__ */ jsx31(DirectoryIcon, { item: client }),
+                        /* @__PURE__ */ jsxs25("span", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx31("span", { className: "block truncate text-sm font-medium text-ph-ink", children: client.name }),
+                          /* @__PURE__ */ jsxs25("span", { className: "text-xs text-ph-mutedtext", children: [
                             count,
                             " project",
                             count === 1 ? "" : "s"
@@ -6197,13 +6409,13 @@ function SuiteClientsProjectsDirectory({
                       ]
                     }
                   ) }, client.id);
-                }) : /* @__PURE__ */ jsx30("li", { className: "px-3 py-8 text-center text-sm text-ph-mutedtext", children: clients.length ? "No matches." : "Add a client to get started." })
+                }) : /* @__PURE__ */ jsx31("li", { className: "px-3 py-8 text-center text-sm text-ph-mutedtext", children: clients.length ? "No matches." : "Add a client to get started." })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ jsxs24(
+      /* @__PURE__ */ jsxs25(
         "section",
         {
           className: cn(
@@ -6211,8 +6423,8 @@ function SuiteClientsProjectsDirectory({
             mobileDetail ? "flex" : "hidden lg:flex"
           ),
           children: [
-            /* @__PURE__ */ jsx30("div", { className: "flex min-h-14 items-center gap-2 border-b border-ph-border px-3 py-2", children: selectedClient ? /* @__PURE__ */ jsxs24(Fragment10, { children: [
-              /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx31("div", { className: "flex min-h-14 items-center gap-2 border-b border-ph-border px-3 py-2", children: selectedClient ? /* @__PURE__ */ jsxs25(Fragment10, { children: [
+              /* @__PURE__ */ jsx31(
                 "button",
                 {
                   type: "button",
@@ -6223,36 +6435,36 @@ function SuiteClientsProjectsDirectory({
                     setMobileDetail(false);
                   },
                   "aria-label": "Back to clients",
-                  children: /* @__PURE__ */ jsx30(ArrowLeft, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx31(ArrowLeft, { className: "h-4 w-4" })
                 }
               ),
-              /* @__PURE__ */ jsx30(DirectoryIcon, { item: selectedClient }),
-              /* @__PURE__ */ jsxs24("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx30("h3", { className: "truncate text-sm font-semibold text-ph-ink", children: selectedClient.name }),
-                /* @__PURE__ */ jsxs24("p", { className: "text-xs text-ph-mutedtext", children: [
+              /* @__PURE__ */ jsx31(DirectoryIcon, { item: selectedClient }),
+              /* @__PURE__ */ jsxs25("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx31("h3", { className: "truncate text-sm font-semibold text-ph-ink", children: selectedClient.name }),
+                /* @__PURE__ */ jsxs25("p", { className: "text-xs text-ph-mutedtext", children: [
                   selectedProjects.length,
                   " project",
                   selectedProjects.length === 1 ? "" : "s"
                 ] })
               ] }),
-              canEdit && (onUpdateClient || onDeleteClient) ? /* @__PURE__ */ jsx30("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx30(
+              canEdit && (onUpdateClient || onDeleteClient) ? /* @__PURE__ */ jsx31("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx31(
                 DropdownMenu,
                 {
                   "aria-label": `Actions for ${selectedClient.name}`,
                   align: "end",
-                  trigger: /* @__PURE__ */ jsxs24("span", { className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink", children: [
-                    /* @__PURE__ */ jsx30(MoreHorizontal, { className: "h-4 w-4", "aria-hidden": true }),
-                    /* @__PURE__ */ jsx30("span", { className: "sr-only", children: "Client actions" })
+                  trigger: /* @__PURE__ */ jsxs25("span", { className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink", children: [
+                    /* @__PURE__ */ jsx31(MoreHorizontal, { className: "h-4 w-4", "aria-hidden": true }),
+                    /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "Client actions" })
                   ] }),
-                  children: /* @__PURE__ */ jsxs24("div", { className: "p-1", children: [
-                    onUpdateClient ? /* @__PURE__ */ jsx30(
+                  children: /* @__PURE__ */ jsxs25("div", { className: "p-1", children: [
+                    onUpdateClient ? /* @__PURE__ */ jsx31(
                       DropdownItem,
                       {
                         onClick: () => openEdit(selectedClient, "client"),
                         children: "Edit client"
                       }
                     ) : null,
-                    onDeleteClient ? /* @__PURE__ */ jsx30(
+                    onDeleteClient ? /* @__PURE__ */ jsx31(
                       DropdownItem,
                       {
                         className: "text-red-600",
@@ -6263,32 +6475,32 @@ function SuiteClientsProjectsDirectory({
                   ] })
                 }
               ) }) : null
-            ] }) : /* @__PURE__ */ jsx30("p", { className: "text-sm text-ph-mutedtext", children: "Select a client" }) }),
-            canEdit && onCreateProject ? /* @__PURE__ */ jsx30("div", { className: "border-b border-ph-border p-3", children: /* @__PURE__ */ jsx30(
+            ] }) : /* @__PURE__ */ jsx31("p", { className: "text-sm text-ph-mutedtext", children: "Select a client" }) }),
+            canEdit && onCreateProject ? /* @__PURE__ */ jsx31("div", { className: "border-b border-ph-border p-3", children: /* @__PURE__ */ jsx31(
               Button,
               {
                 variant: "primary",
-                icon: /* @__PURE__ */ jsx30(Plus2, { className: "h-4 w-4" }),
+                icon: /* @__PURE__ */ jsx31(Plus2, { className: "h-4 w-4" }),
                 onClick: () => openNew("project"),
                 children: "Add project"
               }
             ) }) : null,
-            /* @__PURE__ */ jsx30("ul", { className: "flex-1 p-2", children: selectedClient && selectedProjects.length ? selectedProjects.map((project) => /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsxs24(
+            /* @__PURE__ */ jsx31("ul", { className: "flex-1 p-2", children: selectedClient && selectedProjects.length ? selectedProjects.map((project) => /* @__PURE__ */ jsx31("li", { children: /* @__PURE__ */ jsxs25(
               "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"),
                 children: [
-                  /* @__PURE__ */ jsxs24(
+                  /* @__PURE__ */ jsxs25(
                     "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"),
                       children: [
-                        /* @__PURE__ */ jsx30(DirectoryIcon, { item: project }),
-                        /* @__PURE__ */ jsxs24("span", { className: "min-w-0 flex-1", children: [
-                          /* @__PURE__ */ jsx30(
+                        /* @__PURE__ */ jsx31(DirectoryIcon, { item: project }),
+                        /* @__PURE__ */ jsxs25("span", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx31(
                             "span",
                             {
                               className: cn(
@@ -6298,36 +6510,36 @@ function SuiteClientsProjectsDirectory({
                               children: project.name
                             }
                           ),
-                          /* @__PURE__ */ jsx30("span", { className: "text-xs text-ph-mutedtext", children: project.isArchived ? "Archived" : "Active" })
+                          /* @__PURE__ */ jsx31("span", { className: "text-xs text-ph-mutedtext", children: project.isArchived ? "Archived" : "Active" })
                         ] })
                       ]
                     }
                   ),
-                  canEdit && (onUpdateProject || onDeleteProject) ? /* @__PURE__ */ jsx30("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx30(
+                  canEdit && (onUpdateProject || onDeleteProject) ? /* @__PURE__ */ jsx31("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx31(
                     DropdownMenu,
                     {
                       "aria-label": `Actions for ${project.name}`,
                       align: "end",
-                      trigger: /* @__PURE__ */ jsxs24("span", { className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink", children: [
-                        /* @__PURE__ */ jsx30(
+                      trigger: /* @__PURE__ */ jsxs25("span", { className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink", children: [
+                        /* @__PURE__ */ jsx31(
                           MoreHorizontal,
                           {
                             className: "h-4 w-4",
                             "aria-hidden": true
                           }
                         ),
-                        /* @__PURE__ */ jsx30("span", { className: "sr-only", children: "Project actions" })
+                        /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "Project actions" })
                       ] }),
-                      children: /* @__PURE__ */ jsxs24("div", { className: "p-1", children: [
-                        onUpdateProject ? /* @__PURE__ */ jsxs24(Fragment10, { children: [
-                          /* @__PURE__ */ jsx30(
+                      children: /* @__PURE__ */ jsxs25("div", { className: "p-1", children: [
+                        onUpdateProject ? /* @__PURE__ */ jsxs25(Fragment10, { children: [
+                          /* @__PURE__ */ jsx31(
                             DropdownItem,
                             {
                               onClick: () => openEdit(project, "project"),
                               children: "Edit project"
                             }
                           ),
-                          /* @__PURE__ */ jsx30(
+                          /* @__PURE__ */ jsx31(
                             DropdownItem,
                             {
                               onClick: () => void toggleArchive(project),
@@ -6335,7 +6547,7 @@ function SuiteClientsProjectsDirectory({
                             }
                           )
                         ] }) : null,
-                        onDeleteProject ? /* @__PURE__ */ jsx30(
+                        onDeleteProject ? /* @__PURE__ */ jsx31(
                           DropdownItem,
                           {
                             className: "text-red-600",
@@ -6348,20 +6560,20 @@ function SuiteClientsProjectsDirectory({
                   ) }) : null
                 ]
               }
-            ) }, project.id)) : /* @__PURE__ */ jsx30("li", { className: "px-3 py-8 text-center text-sm text-ph-mutedtext", children: selectedClient ? "No projects yet." : "Select a client to see its projects." }) })
+            ) }, project.id)) : /* @__PURE__ */ jsx31("li", { className: "px-3 py-8 text-center text-sm text-ph-mutedtext", children: selectedClient ? "No projects yet." : "Select a client to see its projects." }) })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(
       Modal,
       {
         open: editing !== null,
         onClose: closeEditor,
         title: (editing == null ? void 0 : editing.kind.includes("project")) ? editing.kind === "new-project" ? "New project" : "Edit project" : (editing == null ? void 0 : editing.kind) === "new-client" ? "New client" : "Edit client",
-        footer: /* @__PURE__ */ jsxs24("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx30(Button, { variant: "tertiary", onClick: closeEditor, disabled: saving, children: "Cancel" }),
-          /* @__PURE__ */ jsx30(
+        footer: /* @__PURE__ */ jsxs25("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx31(Button, { variant: "tertiary", onClick: closeEditor, disabled: saving, children: "Cancel" }),
+          /* @__PURE__ */ jsx31(
             Button,
             {
               variant: "primary",
@@ -6371,8 +6583,8 @@ function SuiteClientsProjectsDirectory({
             }
           )
         ] }),
-        children: /* @__PURE__ */ jsxs24("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsxs25("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx31(
             Input,
             {
               label: "Name",
@@ -6381,7 +6593,7 @@ function SuiteClientsProjectsDirectory({
               onChange: (event) => setDraft(__spreadProps(__spreadValues({}, draft), { name: event.target.value }))
             }
           ),
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             DirectoryIconPicker,
             {
               preview,
@@ -6392,10 +6604,10 @@ function SuiteClientsProjectsDirectory({
               onBrowse: () => setLibraryOpen(true)
             }
           ),
-          /* @__PURE__ */ jsxs24("div", { children: [
-            /* @__PURE__ */ jsx30("span", { className: "mb-1.5 block text-sm font-medium text-ph-ink", children: "Colour" }),
-            /* @__PURE__ */ jsxs24("div", { className: "flex flex-wrap items-center gap-2", children: [
-              /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsxs25("div", { children: [
+            /* @__PURE__ */ jsx31("span", { className: "mb-1.5 block text-sm font-medium text-ph-ink", children: "Colour" }),
+            /* @__PURE__ */ jsxs25("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx31(
                 "button",
                 {
                   type: "button",
@@ -6407,7 +6619,7 @@ function SuiteClientsProjectsDirectory({
                     "flex h-8 w-8 items-center justify-center rounded-full border border-ph-border bg-ph-surface text-ph-mutedtext ring-offset-2",
                     !draft.color && "ring-2 ring-ph-brand"
                   ),
-                  children: /* @__PURE__ */ jsx30(Prohibition, { className: "h-4 w-4", "aria-hidden": true })
+                  children: /* @__PURE__ */ jsx31(Prohibition, { className: "h-4 w-4", "aria-hidden": true })
                 }
               ),
               [
@@ -6418,7 +6630,7 @@ function SuiteClientsProjectsDirectory({
                 "#ef4444",
                 "#a855f7",
                 "#64748b"
-              ].map((color) => /* @__PURE__ */ jsx30(
+              ].map((color) => /* @__PURE__ */ jsx31(
                 "button",
                 {
                   type: "button",
@@ -6433,7 +6645,7 @@ function SuiteClientsProjectsDirectory({
                 },
                 color
               )),
-              /* @__PURE__ */ jsxs24(
+              /* @__PURE__ */ jsxs25(
                 "label",
                 {
                   className: cn(
@@ -6453,7 +6665,7 @@ function SuiteClientsProjectsDirectory({
                   },
                   title: "Custom colour",
                   children: [
-                    /* @__PURE__ */ jsx30("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-ph-surface", children: [
+                    /* @__PURE__ */ jsx31("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-ph-surface", children: [
                       "#6366f1",
                       "#0ea5e9",
                       "#10b981",
@@ -6461,14 +6673,14 @@ function SuiteClientsProjectsDirectory({
                       "#ef4444",
                       "#a855f7",
                       "#64748b"
-                    ].includes(draft.color) ? /* @__PURE__ */ jsx30(Plus2, { className: "h-3 w-3 text-ph-ink", "aria-hidden": true }) : /* @__PURE__ */ jsx30(
+                    ].includes(draft.color) ? /* @__PURE__ */ jsx31(Plus2, { className: "h-3 w-3 text-ph-ink", "aria-hidden": true }) : /* @__PURE__ */ jsx31(
                       "span",
                       {
                         className: "h-2.5 w-2.5 rounded-full",
                         style: { backgroundColor: draft.color }
                       }
                     ) }),
-                    /* @__PURE__ */ jsx30(
+                    /* @__PURE__ */ jsx31(
                       "input",
                       {
                         type: "color",
@@ -6483,20 +6695,20 @@ function SuiteClientsProjectsDirectory({
               )
             ] })
           ] }),
-          (editing == null ? void 0 : editing.kind.includes("project")) ? /* @__PURE__ */ jsxs24(
+          (editing == null ? void 0 : editing.kind.includes("project")) ? /* @__PURE__ */ jsxs25(
             Select,
             {
               label: "Client",
               value: draftClientId != null ? draftClientId : "",
               onChange: (event) => setDraftClientId(event.target.value || null),
               children: [
-                /* @__PURE__ */ jsx30("option", { value: "", children: "No client" }),
-                clients.map((client) => /* @__PURE__ */ jsx30("option", { value: client.id, children: client.name }, client.id))
+                /* @__PURE__ */ jsx31("option", { value: "", children: "No client" }),
+                clients.map((client) => /* @__PURE__ */ jsx31("option", { value: client.id, children: client.name }, client.id))
               ]
             }
           ) : null,
-          (editing == null ? void 0 : editing.kind.includes("project")) ? /* @__PURE__ */ jsxs24("label", { className: "flex items-center gap-2 text-sm text-ph-ink", children: [
-            /* @__PURE__ */ jsx30(
+          (editing == null ? void 0 : editing.kind.includes("project")) ? /* @__PURE__ */ jsxs25("label", { className: "flex items-center gap-2 text-sm text-ph-ink", children: [
+            /* @__PURE__ */ jsx31(
               "input",
               {
                 type: "checkbox",
@@ -6509,26 +6721,26 @@ function SuiteClientsProjectsDirectory({
         ] })
       }
     ),
-    libraryOpen ? /* @__PURE__ */ jsx30(
+    libraryOpen ? /* @__PURE__ */ jsx31(
       Modal,
       {
         open: true,
         onClose: () => setLibraryOpen(false),
         title: "Icon library",
-        children: renderIconLibrary ? renderIconLibrary({ onPick: pickFromLibrary }) : /* @__PURE__ */ jsx30(SuitePaletteLibrary, { onPick: pickFromLibrary })
+        children: renderIconLibrary ? renderIconLibrary({ onPick: pickFromLibrary }) : /* @__PURE__ */ jsx31(SuitePaletteLibrary, { onPick: pickFromLibrary })
       }
     ) : null,
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(
       Modal,
       {
         open: confirming !== null,
         onClose: () => setConfirming(null),
         title: "Confirm deletion",
-        footer: /* @__PURE__ */ jsxs24("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx30(Button, { variant: "tertiary", onClick: () => setConfirming(null), children: "Cancel" }),
-          /* @__PURE__ */ jsx30(Button, { variant: "primary", onClick: () => void confirmRemove(), children: "Delete" })
+        footer: /* @__PURE__ */ jsxs25("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx31(Button, { variant: "tertiary", onClick: () => setConfirming(null), children: "Cancel" }),
+          /* @__PURE__ */ jsx31(Button, { variant: "primary", onClick: () => void confirmRemove(), children: "Delete" })
         ] }),
-        children: /* @__PURE__ */ jsxs24("p", { className: "text-sm text-ph-ink", children: [
+        children: /* @__PURE__ */ jsxs25("p", { className: "text-sm text-ph-ink", children: [
           "Delete ",
           confirming == null ? void 0 : confirming.item.name,
           "? This cannot be undone."
@@ -6582,6 +6794,7 @@ export {
   SuiteMobileHeader,
   SuiteMotionProvider,
   SuiteNotificationBell,
+  SuiteNotificationSettings,
   SuiteNotificationsProvider,
   SuitePage,
   SuitePageHeader,