@xenide-io/the-old-ui-theme 0.6.14 → 0.7.1

package/dist/suite.mjs

@@ -1,8 +1,11 @@
 import {
+  Button,
   DropdownItem,
   DropdownMenu,
+  Input,
+  Modal,
   Tooltip
-} from "./chunk-E5ZBQYEX.mjs";
+} from "./chunk-YB4TBWHV.mjs";
 import {
   SuiteThemeProvider,
   useSuiteTheme
@@ -896,7 +899,10 @@ function TodayEmptyState({
 // src/suite/components/app-switcher.tsx
 import Image from "next/image";
 import { useState } from "react";
-import { Check, NavArrowDown as ChevronDown } from "iconoir-react";
+import {
+  NavArrowDown as ChevronDown,
+  OpenNewWindow
+} from "iconoir-react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function appSwitcherTriggerClass(open, collapsed = false) {
   return cn(
@@ -1013,43 +1019,53 @@ function AppSwitcher({
       ),
       children: /* @__PURE__ */ jsxs6("div", { id: "app-switcher-menu", className: "p-1", "data-test": "app-switcher-menu", children: [
         /* @__PURE__ */ jsx6("p", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext", children: "Switch application" }),
-        apps.map((app) => /* @__PURE__ */ jsx6(
-          DropdownItem2,
-          {
-            id: `switch-app-${app.slug}`,
-            "data-test": `switch-app-${app.slug}`,
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: () => {
-              setOpen(false);
-              onSelect(app);
-            },
-            className: appSwitcherMenuItemClass(),
-            children: /* @__PURE__ */ jsxs6("span", { className: "flex min-w-0 items-center gap-3", children: [
-              /* @__PURE__ */ jsx6(
-                Image,
-                {
-                  src: app.icon,
-                  alt: "",
-                  width: 28,
-                  height: 28,
-                  className: "h-7 w-7 shrink-0 rounded-md object-contain"
-                }
-              ),
-              /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx6("span", { className: "block truncate text-sm font-medium text-ph-ink", children: app.name }),
-                /* @__PURE__ */ jsx6("span", { className: "block truncate text-xs text-ph-mutedtext", children: app.description })
-              ] }),
-              app.slug === currentApp ? /* @__PURE__ */ jsx6(
-                Check,
-                {
-                  className: "h-4 w-4 shrink-0 text-ph-brand",
-                  "aria-hidden": "true"
-                }
-              ) : null
-            ] })
-          },
-          app.slug
-        ))
+        apps.filter((app) => app.slug !== currentApp).map((app) => /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx6(
+            DropdownItem2,
+            {
+              id: `switch-app-${app.slug}`,
+              "data-test": `switch-app-${app.slug}`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                setOpen(false);
+                onSelect(app);
+              },
+              className: cn(appSwitcherMenuItemClass(), "pr-11"),
+              children: /* @__PURE__ */ jsxs6("span", { className: "flex min-w-0 items-center gap-3", children: [
+                /* @__PURE__ */ jsx6(
+                  Image,
+                  {
+                    src: app.icon,
+                    alt: "",
+                    width: 28,
+                    height: 28,
+                    className: "h-7 w-7 shrink-0 rounded-md object-contain"
+                  }
+                ),
+                /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx6("span", { className: "block truncate text-sm font-medium text-ph-ink", children: app.name }),
+                  /* @__PURE__ */ jsx6("span", { className: "block truncate text-xs text-ph-mutedtext", children: app.description })
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              id: `switch-app-${app.slug}-new-tab`,
+              "data-test": `switch-app-${app.slug}-new-tab`,
+              "aria-label": `Open ${app.name} in a new tab`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                setOpen(false);
+                onSelect(app, { newTab: true });
+              },
+              className: "absolute right-1.5 top-1/2 z-[1] flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ph-brand/35",
+              children: /* @__PURE__ */ jsx6(OpenNewWindow, { className: "h-4 w-4", "aria-hidden": "true" })
+            }
+          )
+        ] }, app.slug))
       ] })
     }
   );
@@ -1286,10 +1302,10 @@ function SuiteNotificationBell({
       panelClassName: "w-80 overflow-hidden p-0",
       open,
       onOpenChange,
-      trigger: /* @__PURE__ */ jsxs7("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: [
+      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__ */ jsxs7("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-0 top-0 z-[1] flex h-4 min-w-4 translate-x-1/2 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
-      ] }),
+        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-white ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
+      ] }) }),
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between border-b border-ph-border px-3 py-2", children: [
           /* @__PURE__ */ jsx7("span", { className: "text-sm font-semibold text-ph-ink", children: "Notifications" }),
@@ -2727,7 +2743,7 @@ function SuiteAiPanel({
 
 // src/suite/components/workspace-switcher.tsx
 import { useState as useState8 } from "react";
-import { Building, Check as Check2, NavArrowDown } from "iconoir-react";
+import { Building, Check, NavArrowDown } from "iconoir-react";
 import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function SuiteWorkspaceSwitcher({
   workspaces = [],
@@ -2814,7 +2830,7 @@ function SuiteWorkspaceSwitcher({
                       workspace.description ? /* @__PURE__ */ jsx18("span", { className: "block truncate text-xs text-ph-mutedtext", children: workspace.description }) : null
                     ] }),
                     workspace.id === currentId ? /* @__PURE__ */ jsx18(
-                      Check2,
+                      Check,
                       {
                         className: "h-4 w-4 shrink-0 text-ph-brand",
                         "aria-hidden": "true"
@@ -3612,6 +3628,81 @@ function SuiteAppLayout({
     }
   );
 }
+
+// src/suite/components/suite-integration-picker.tsx
+import { useMemo, useState as useState10 } from "react";
+import { NavArrowDown as NavArrowDown2, NavArrowUp, Server as Plug, Xmark } from "iconoir-react";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+var DESCRIPTION_LIMIT = 90;
+function SuiteIntegrationPicker({
+  open,
+  items,
+  connectedItems = [],
+  loading = false,
+  onClose,
+  onConnect,
+  onDisconnect,
+  title = "Integrate an app",
+  description = "Connect an app to this workspace securely.",
+  dataTest = "suite-integration-picker"
+}) {
+  const [query, setQuery] = useState10("");
+  const [category, setCategory] = useState10("all");
+  const [expanded, setExpanded] = useState10(null);
+  const categories = useMemo(
+    () => Array.from(new Set(items.flatMap((item) => {
+      var _a;
+      return (_a = item.categories) != null ? _a : [];
+    }))).sort(),
+    [items]
+  );
+  const filtered = items.filter((item) => {
+    var _a;
+    const haystack = `${item.label} ${item.description}`.toLowerCase();
+    return haystack.includes(query.trim().toLowerCase()) && (category === "all" || ((_a = item.categories) != null ? _a : []).includes(category));
+  });
+  return /* @__PURE__ */ jsx24(Modal, { open, onClose, title, description, size: "xl", dataTest, children: /* @__PURE__ */ jsxs21("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx24(Input, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search apps...", "aria-label": "Search apps" }),
+    /* @__PURE__ */ jsx24("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Integration categories", children: ["all", ...categories].map((value) => /* @__PURE__ */ jsx24("button", { type: "button", onClick: () => setCategory(value), className: category === value ? "rounded-full bg-ph-brand px-3 py-1.5 text-xs font-semibold text-white" : "rounded-full border border-ph-border px-3 py-1.5 text-xs text-ph-subtle hover:bg-ph-muted", children: value === "all" ? "All apps" : value }, value)) }),
+    loading ? /* @__PURE__ */ jsx24("p", { className: "text-sm text-ph-subtle", children: "Loading apps..." }) : /* @__PURE__ */ jsx24("div", { className: "grid max-h-[60vh] gap-3 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3", children: filtered.map((item) => {
+      var _a, _b;
+      const isExpanded = expanded === item.id;
+      const longDescription = item.description.length > DESCRIPTION_LIMIT;
+      const text = isExpanded || !longDescription ? item.description : `${item.description.slice(0, DESCRIPTION_LIMIT).trimEnd()}...`;
+      return /* @__PURE__ */ jsxs21("div", { className: "flex min-h-36 flex-col justify-between rounded-xl border border-ph-border bg-ph-surface p-4", children: [
+        /* @__PURE__ */ jsx24("button", { type: "button", className: "text-left", onClick: () => longDescription && setExpanded(isExpanded ? null : item.id), "aria-expanded": isExpanded, children: /* @__PURE__ */ jsxs21("span", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx24("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-ph-muted text-ph-ink", children: (_a = item.icon) != null ? _a : /* @__PURE__ */ jsx24(Plug, { className: "h-5 w-5", "aria-hidden": true }) }),
+          /* @__PURE__ */ jsxs21("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx24("span", { className: "block font-medium text-ph-ink", children: item.label }),
+            /* @__PURE__ */ jsx24("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: [
+              isExpanded ? "See less" : "See more",
+              " ",
+              isExpanded ? /* @__PURE__ */ jsx24(NavArrowUp, { className: "inline h-3 w-3" }) : /* @__PURE__ */ jsx24(NavArrowDown2, { className: "inline h-3 w-3" })
+            ] }) : null
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx24(Button, { type: "button", variant: "primary", className: "mt-3 self-start", disabled: Boolean(item.unavailableReason) || item.connecting, onClick: () => onConnect(item), children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx24(Plug, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+          item.connecting ? "Connecting..." : (_b = item.unavailableReason) != null ? _b : "Connect"
+        ] }) })
+      ] }, item.id);
+    }) }),
+    connectedItems.length > 0 && onDisconnect ? /* @__PURE__ */ jsxs21("div", { className: "space-y-2 border-t border-ph-border pt-4", children: [
+      /* @__PURE__ */ jsx24("h3", { className: "font-medium text-ph-ink", children: "Connected apps" }),
+      connectedItems.map((item) => /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted p-3", children: [
+        /* @__PURE__ */ jsxs21("span", { className: "flex min-w-0 items-center gap-2 text-sm text-ph-ink", children: [
+          item.icon,
+          /* @__PURE__ */ jsx24("span", { className: "truncate", children: item.label })
+        ] }),
+        /* @__PURE__ */ jsx24(Button, { type: "button", variant: "danger", onClick: () => onDisconnect(item), children: /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx24(Xmark, { className: "h-4 w-4", "aria-hidden": true }),
+          "Disconnect"
+        ] }) })
+      ] }, item.id))
+    ] }) : null
+  ] }) });
+}
 export {
   APP_ACCENTS,
   APP_GLYPHS,
@@ -3647,6 +3738,7 @@ export {
   SuiteBreadcrumbs,
   SuiteEmptyState,
   SuiteIcon,
+  SuiteIntegrationPicker,
   SuiteMobileDrawer,
   SuiteMobileHeader,
   SuiteMotionProvider,

package/dist/ui.js

@@ -399,7 +399,9 @@ var IconPlayCircle = createIconBase({
   )
 });
 var IconGridView = createIconBase({
-  paths: fill("M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z")
+  paths: fill(
+    "M3,3v8h8V3H3z M9,9H5V5h4V9z M3,13v8h8v-8H3z M9,19H5v-4h4V19z M13,3v8h8V3H13z M19,9h-4V5h4V9z M13,13v8h8v-8H13z M19,19h-4v-4h4V19z"
+  )
 });
 var IconListView = createIconBase({
   paths: fill(

package/dist/ui.mjs

@@ -9,6 +9,7 @@ import {
   AvatarGroup,
   Badge,
   Button,
+  ButtonChrome,
   Calendar,
   Caption,
   Card,
@@ -20,6 +21,11 @@ import {
   ComponentDocs,
   Display,
   Dot,
+  DropdownButton,
+  DropdownItem,
+  DropdownMenu,
+  DropdownRadioGroup,
+  DropdownRadioItem,
   EmptyState,
   FileUpload,
   FilterBar,
@@ -32,6 +38,8 @@ import {
   H3,
   H4,
   H5,
+  IconBase,
+  IconByName,
   Input,
   Kbd,
   Label,
@@ -64,20 +72,10 @@ import {
   Textarea,
   ThemeDomSync,
   ThemeSwitcher,
-  Toggle
-} from "./chunk-VOCHIR3W.mjs";
-import {
-  ButtonChrome,
-  DropdownButton,
-  DropdownItem,
-  DropdownMenu,
-  DropdownRadioGroup,
-  DropdownRadioItem,
-  IconBase,
-  IconByName,
+  Toggle,
   Tooltip,
   TooltipProvider
-} from "./chunk-E5ZBQYEX.mjs";
+} from "./chunk-YB4TBWHV.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.6.14",
+  "version": "0.7.1",
   "description": "Props-driven React components and theme tokens inspired by classic interface design \u2014 optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/scripts/sync-posthog-icons.mjs

@@ -18,7 +18,7 @@ const CACHE = resolve("scripts/.posthog-icons.tsx");
 function extractPhBlock(source, name) {
   const start = source.indexOf(`export function ${name}(`);
   if (start < 0) return null;
-  const next = source.indexOf("\nexport function Icon", start + 10);
+  const next = source.indexOf("\nexport function ", start + 10);
   return source.slice(start, next > 0 ? next : start + 4000);
 }
 
@@ -34,9 +34,8 @@ function extractOurBlock(source, name) {
 function normPaths(block) {
   if (!block) return "";
   const fills = [...block.matchAll(/fill\(\s*\n?\s*"([^"]+)"/g)].map((m) => m[1]);
-  const ds = [...block.matchAll(/<path d="([^"]+)"/g)].map((m) => m[1]);
-  const attrs = [...block.matchAll(/\sd="([^"]+)"/g)].map((m) => m[1]);
-  return [...fills, ...ds, ...attrs].join("|").replace(/\s/g, "");
+  const paths = [...block.matchAll(/\sd="([^"]+)"/g)].map((m) => m[1]);
+  return [...fills, ...paths].join("|").replace(/\s/g, "");
 }
 
 async function main() {

package/src/components/icons/icons.tsx

@@ -98,7 +98,9 @@ export const IconPlayCircle = createIconBase({
 });
 
 export const IconGridView = createIconBase({
-  paths: fill("M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z"),
+  paths: fill(
+    "M3,3v8h8V3H3z M9,9H5V5h4V9z M3,13v8h8v-8H3z M9,19H5v-4h4V19z M13,3v8h8V3H13z M19,9h-4V5h4V9z M13,13v8h8v-8H13z M19,19h-4v-4h4V19z",
+  ),
 });
 
 export const IconListView = createIconBase({

package/src/suite/components/app-switcher.test.tsx

@@ -0,0 +1,96 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("next/image", () => ({
+  default: (props: ComponentPropsWithoutRef<"img">) => <img {...props} />,
+}));
+
+import { AppSwitcher, type SuiteAppEntry } from "./app-switcher";
+
+afterEach(() => {
+  cleanup();
+});
+
+const APPS: SuiteAppEntry[] = [
+  { slug: "tides", name: "Tides", description: "Projects", icon: "/tides.svg" },
+  {
+    slug: "turtletime",
+    name: "TurtleTime",
+    description: "Time",
+    icon: "/time.svg",
+  },
+  {
+    slug: "kraken",
+    name: "Kraken",
+    description: "Documents",
+    icon: "/kraken.svg",
+  },
+  {
+    slug: "nakama",
+    name: "Nakama",
+    description: "AI teammates",
+    icon: "/nakama.svg",
+  },
+];
+
+function TestDropdownMenu({
+  trigger,
+  children,
+  "aria-label": ariaLabel,
+}: {
+  trigger: ReactNode;
+  children: ReactNode;
+  "aria-label": string;
+}) {
+  return (
+    <div aria-label={ariaLabel}>
+      {trigger}
+      {children}
+    </div>
+  );
+}
+
+function TestDropdownItem({
+  children,
+  ...props
+}: ComponentPropsWithoutRef<"button">) {
+  return <button {...props}>{children}</button>;
+}
+
+describe("AppSwitcher", () => {
+  it("keeps the current app out of the simple application list", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    render(
+      <AppSwitcher
+        apps={APPS}
+        currentApp="tides"
+        onSelect={onSelect}
+        mark={<span />}
+        title={<span>Tides</span>}
+        dropdownMenu={TestDropdownMenu}
+        dropdownItem={TestDropdownItem}
+      />,
+    );
+
+    const menu = document.querySelector("[data-test='app-switcher-menu']");
+    expect(menu).not.toHaveClass("grid-cols-2");
+    expect(menu).toHaveTextContent("Switch application");
+    expect(
+      document.querySelector("[data-test='switch-app-tides']"),
+    ).not.toBeInTheDocument();
+    const newTabButton = screen.getByRole("button", {
+      name: "Open Kraken in a new tab",
+    });
+    expect(newTabButton).toHaveClass("absolute", "h-8", "w-8");
+    expect(
+      screen.queryByRole("button", { name: "Open Tides in a new tab" }),
+    ).not.toBeInTheDocument();
+
+    await user.click(newTabButton);
+    expect(onSelect).toHaveBeenCalledWith(APPS[2], { newTab: true });
+  });
+});

package/src/suite/components/app-switcher.tsx

@@ -2,7 +2,10 @@
 
 import Image from "next/image";
 import { useState, type ReactNode } from "react";
-import { Check, NavArrowDown as ChevronDown } from "iconoir-react";
+import {
+  NavArrowDown as ChevronDown,
+  OpenNewWindow,
+} from "iconoir-react";
 
 import { cn } from "../lib/cn";
 import type {
@@ -24,7 +27,6 @@ export function appSwitcherMarkClass() {
   return "h-8 w-8 shrink-0 rounded-lg shadow-[0_1px_2px_rgba(0,0,0,0.1),0_4px_12px_rgba(0,0,0,0.08)] ring-1 ring-black/[0.06]";
 }
 
-/** No sticky Radix highlight while waiting for cross-app redirect. */
 export function appSwitcherMenuItemClass() {
   return "rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80";
 }
@@ -101,6 +103,11 @@ export interface SuiteAppEntry {
   icon: string;
 }
 
+export interface SuiteAppSelectOptions {
+  /** Open the handoff in a separate browser tab when requested by a caller. */
+  newTab?: boolean;
+}
+
 /**
  * Suite app switcher dropdown. Apps inject their brand mark/title, the
  * visible app list, the cross-app navigation handler, and the theme
@@ -120,7 +127,7 @@ export function AppSwitcher({
 }: {
   apps: SuiteAppEntry[];
   currentApp: string;
-  onSelect: (app: SuiteAppEntry) => void;
+  onSelect: (app: SuiteAppEntry, options?: SuiteAppSelectOptions) => void;
   mark: ReactNode;
   title: ReactNode;
   collapsed?: boolean;
@@ -160,43 +167,54 @@ export function AppSwitcher({
         <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext">
           Switch application
         </p>
-        {apps.map((app) => (
-          <DropdownItem
-            key={app.slug}
-            id={`switch-app-${app.slug}`}
-            data-test={`switch-app-${app.slug}`}
-            onMouseDown={(e) => e.preventDefault()}
-            onClick={() => {
-              setOpen(false);
-              onSelect(app);
-            }}
-            className={appSwitcherMenuItemClass()}
-          >
-            <span className="flex min-w-0 items-center gap-3">
-              <Image
-                src={app.icon}
-                alt=""
-                width={28}
-                height={28}
-                className="h-7 w-7 shrink-0 rounded-md object-contain"
-              />
-              <span className="min-w-0 flex-1">
-                <span className="block truncate text-sm font-medium text-ph-ink">
-                  {app.name}
-                </span>
-                <span className="block truncate text-xs text-ph-mutedtext">
-                  {app.description}
+        {apps
+          .filter((app) => app.slug !== currentApp)
+          .map((app) => (
+            <div key={app.slug} className="relative">
+              <DropdownItem
+                id={`switch-app-${app.slug}`}
+                data-test={`switch-app-${app.slug}`}
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => {
+                  setOpen(false);
+                  onSelect(app);
+                }}
+                className={cn(appSwitcherMenuItemClass(), "pr-11")}
+              >
+                <span className="flex min-w-0 items-center gap-3">
+                  <Image
+                    src={app.icon}
+                    alt=""
+                    width={28}
+                    height={28}
+                    className="h-7 w-7 shrink-0 rounded-md object-contain"
+                  />
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-sm font-medium text-ph-ink">
+                      {app.name}
+                    </span>
+                    <span className="block truncate text-xs text-ph-mutedtext">
+                      {app.description}
+                    </span>
+                  </span>
                 </span>
-              </span>
-              {app.slug === currentApp ? (
-                <Check
-                  className="h-4 w-4 shrink-0 text-ph-brand"
-                  aria-hidden="true"
-                />
-              ) : null}
-            </span>
-          </DropdownItem>
-        ))}
+              </DropdownItem>
+              <button
+                type="button"
+                id={`switch-app-${app.slug}-new-tab`}
+                data-test={`switch-app-${app.slug}-new-tab`}
+                aria-label={`Open ${app.name} in a new tab`}
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => {
+                  setOpen(false);
+                  onSelect(app, { newTab: true });
+                }}
+                className="absolute right-1.5 top-1/2 z-[1] flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ph-brand/35"
+              >
+                <OpenNewWindow className="h-4 w-4" aria-hidden="true" />
+              </button>
+            </div>
+          ))}
       </div>
     </DropdownMenu>
   );

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

@@ -0,0 +1,68 @@
+"use client";
+
+import { useMemo, useState, type ReactNode } from "react";
+import { NavArrowDown, NavArrowUp, Server as Plug, Xmark } from "iconoir-react";
+import { Button, Input, Modal } from "@/components/ui";
+
+export interface SuiteIntegrationPickerItem {
+  id: string;
+  label: string;
+  description: string;
+  icon?: ReactNode;
+  categories?: string[];
+  connecting?: boolean;
+  unavailableReason?: string;
+}
+
+export interface SuiteIntegrationPickerProps {
+  open: boolean;
+  items: SuiteIntegrationPickerItem[];
+  connectedItems?: SuiteIntegrationPickerItem[];
+  loading?: boolean;
+  onClose: () => void;
+  onConnect: (item: SuiteIntegrationPickerItem) => void;
+  onDisconnect?: (item: SuiteIntegrationPickerItem) => void;
+  title?: string;
+  description?: string;
+  dataTest?: string;
+}
+
+const DESCRIPTION_LIMIT = 90;
+
+export function SuiteIntegrationPicker({
+  open,
+  items,
+  connectedItems = [],
+  loading = false,
+  onClose,
+  onConnect,
+  onDisconnect,
+  title = "Integrate an app",
+  description = "Connect an app to this workspace securely.",
+  dataTest = "suite-integration-picker",
+}: SuiteIntegrationPickerProps) {
+  const [query, setQuery] = useState("");
+  const [category, setCategory] = useState("all");
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const categories = useMemo(
+    () => Array.from(new Set(items.flatMap((item) => item.categories ?? []))).sort(),
+    [items],
+  );
+  const filtered = items.filter((item) => {
+    const haystack = `${item.label} ${item.description}`.toLowerCase();
+    return haystack.includes(query.trim().toLowerCase()) && (category === "all" || (item.categories ?? []).includes(category));
+  });
+
+  return (
+    <Modal open={open} onClose={onClose} title={title} description={description} size="xl" dataTest={dataTest}>
+      <div className="space-y-4">
+        <Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search apps..." aria-label="Search apps" />
+        <div className="flex flex-wrap gap-2" role="group" aria-label="Integration categories">
+          {["all", ...categories].map((value) => <button key={value} type="button" onClick={() => setCategory(value)} className={category === value ? "rounded-full bg-ph-brand px-3 py-1.5 text-xs font-semibold text-white" : "rounded-full border border-ph-border px-3 py-1.5 text-xs text-ph-subtle hover:bg-ph-muted"}>{value === "all" ? "All apps" : value}</button>)}
+        </div>
+        {loading ? <p className="text-sm text-ph-subtle">Loading apps...</p> : <div className="grid max-h-[60vh] gap-3 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3">{filtered.map((item) => { const isExpanded = expanded === item.id; const longDescription = item.description.length > DESCRIPTION_LIMIT; const text = isExpanded || !longDescription ? item.description : `${item.description.slice(0, DESCRIPTION_LIMIT).trimEnd()}...`; return <div key={item.id} className="flex min-h-36 flex-col justify-between rounded-xl border border-ph-border bg-ph-surface p-4"><button type="button" className="text-left" onClick={() => longDescription && setExpanded(isExpanded ? null : item.id)} aria-expanded={isExpanded}><span className="flex items-start gap-3"><span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-ph-muted text-ph-ink">{item.icon ?? <Plug className="h-5 w-5" aria-hidden />}</span><span className="min-w-0"><span className="block font-medium text-ph-ink">{item.label}</span><span className="mt-1 block text-xs text-ph-subtle">{text}</span>{longDescription ? <span className="mt-1 block text-xs font-medium text-ph-brand">{isExpanded ? "See less" : "See more"} {isExpanded ? <NavArrowUp className="inline h-3 w-3" /> : <NavArrowDown className="inline h-3 w-3" />}</span> : null}</span></span></button><Button type="button" variant="primary" className="mt-3 self-start" disabled={Boolean(item.unavailableReason) || item.connecting} onClick={() => onConnect(item)}><span className="flex items-center gap-1.5"><Plug className="h-3.5 w-3.5" aria-hidden />{item.connecting ? "Connecting..." : item.unavailableReason ?? "Connect"}</span></Button></div>; })}</div>}
+        {connectedItems.length > 0 && onDisconnect ? <div className="space-y-2 border-t border-ph-border pt-4"><h3 className="font-medium text-ph-ink">Connected apps</h3>{connectedItems.map((item) => <div key={item.id} className="flex items-center justify-between gap-3 rounded-lg border border-ph-border bg-ph-muted p-3"><span className="flex min-w-0 items-center gap-2 text-sm text-ph-ink">{item.icon}<span className="truncate">{item.label}</span></span><Button type="button" variant="danger" onClick={() => onDisconnect(item)}><span className="flex items-center gap-1.5"><Xmark className="h-4 w-4" aria-hidden />Disconnect</span></Button></div>)}</div> : null}
+      </div>
+    </Modal>
+  );
+}