@xenide-io/the-old-ui-theme 0.9.9 → 0.9.11

package/dist/suite.mjs

@@ -465,13 +465,13 @@ function SuiteAppStrip({
       ),
       "aria-label": "ShellStack suite apps",
       children: SUITE_APPS.map((app) => {
-        var _a;
+        var _a2;
         return /* @__PURE__ */ jsxs4(
           "div",
           {
             className: "flex items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-2.5 py-1.5 shadow-sm",
             children: [
-              (_a = icons == null ? void 0 : icons[app]) != null ? _a : /* @__PURE__ */ jsx4(SuiteAppIcon, { app, size: "sm" }),
+              (_a2 = icons == null ? void 0 : icons[app]) != null ? _a2 : /* @__PURE__ */ jsx4(SuiteAppIcon, { app, size: "sm" }),
               /* @__PURE__ */ jsx4("span", { className: "text-xs font-medium text-ph-subtle", children: APP_META[app].name })
             ]
           },
@@ -590,13 +590,13 @@ function TodayTopBar({
   ] });
 }
 function getTodayGreeting(user, stats) {
-  var _a, _b, _c, _d, _e;
+  var _a2, _b, _c, _d, _e;
   const hour = (/* @__PURE__ */ new Date()).getHours();
   let period = "morning";
   if (hour >= 12 && hour < 17) period = "afternoon";
   else if (hour >= 17 && hour < 21) period = "evening";
   else if (hour >= 21 || hour < 5) period = "night";
-  const name = (user == null ? void 0 : user.first_name) || ((_a = user == null ? void 0 : user.name) == null ? void 0 : _a.split(" ")[0]) || ((_b = user == null ? void 0 : user.email) == null ? void 0 : _b.split("@")[0]) || null;
+  const name = (user == null ? void 0 : user.first_name) || ((_a2 = user == null ? void 0 : user.name) == null ? void 0 : _a2.split(" ")[0]) || ((_b = user == null ? void 0 : user.email) == null ? void 0 : _b.split("@")[0]) || null;
   let greeting = `Good ${period}`;
   if (name) greeting += `, ${name}`;
   const taskCount = (_c = stats == null ? void 0 : stats.taskCount) != null ? _c : 0;
@@ -1095,8 +1095,8 @@ var SOURCE_APP_SLUG = {
   shellstack: "shellstack"
 };
 function suiteAppSlugForNotificationSource(sourceApp) {
-  var _a;
-  return (_a = SOURCE_APP_SLUG[(sourceApp || "").toLowerCase()]) != null ? _a : null;
+  var _a2;
+  return (_a2 = SOURCE_APP_SLUG[(sourceApp || "").toLowerCase()]) != null ? _a2 : null;
 }
 function resolveSuiteNotificationHref(href, sourceApp) {
   const value = (href || "").trim();
@@ -1184,14 +1184,14 @@ function SuiteNotificationBell({
   useEffect(() => {
     if (cacheKey) {
       queueMicrotask(() => {
-        var _a;
+        var _a2;
         try {
           const raw = sessionStorage.getItem(cacheKey);
           if (raw) {
             const cached = JSON.parse(raw);
             if (Array.isArray(cached.notifications)) {
               setItems(cached.notifications);
-              setUnread((_a = cached.unread_count) != null ? _a : 0);
+              setUnread((_a2 = cached.unread_count) != null ? _a2 : 0);
             }
           }
         } catch (e) {
@@ -1262,9 +1262,9 @@ function SuiteNotificationBell({
   const markAll = useCallback(async () => {
     setItems(
       (prev) => prev.map((i) => {
-        var _a;
+        var _a2;
         return __spreadProps(__spreadValues({}, i), {
-          read_at: (_a = i.read_at) != null ? _a : (/* @__PURE__ */ new Date()).toISOString()
+          read_at: (_a2 = i.read_at) != null ? _a2 : (/* @__PURE__ */ new Date()).toISOString()
         });
       })
     );
@@ -2047,7 +2047,7 @@ function SuiteBottomNav({
         children: [
           activeIndex >= 0 ? /* @__PURE__ */ jsx14("span", { "aria-hidden": true, className: "suite-bottom-nav__indicator" }) : null,
           items.map((item) => {
-            var _a;
+            var _a2;
             const Icon = item.icon;
             const active = Boolean(item.active);
             return /* @__PURE__ */ jsxs12(
@@ -2055,7 +2055,7 @@ function SuiteBottomNav({
               {
                 href: item.href,
                 id: item.id,
-                "data-test": (_a = item.dataTest) != null ? _a : `suite-nav-${item.label.toLowerCase().replace(/\s+/g, "-")}`,
+                "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",
@@ -2154,7 +2154,7 @@ import {
 
 // src/suite/lib/cookies.ts
 function suiteCookieDomainAttr() {
-  var _a;
+  var _a2;
   const host = window.location.hostname;
   if (host === "localhost" || /^\d{1,3}(?:\.\d{1,3}){3}$/.test(host)) {
     return "";
@@ -2173,7 +2173,7 @@ function suiteCookieDomainAttr() {
     "portal"
   ]);
   const parts = host.split(".");
-  if (parts.length >= 3 && known.has((_a = parts[0]) != null ? _a : "")) {
+  if (parts.length >= 3 && known.has((_a2 = parts[0]) != null ? _a2 : "")) {
     return `; Domain=.${parts.slice(1).join(".")}`;
   }
   if (parts.length >= 2) return `; Domain=.${parts.slice(1).join(".")}`;
@@ -2441,8 +2441,8 @@ function consumeSuiteAskAiOpenFromLocation() {
 }
 var pendingAskAiPrompt = null;
 function openSuiteAskAi(detail) {
-  var _a;
-  pendingAskAiPrompt = ((_a = detail == null ? void 0 : detail.prompt) == null ? void 0 : _a.trim()) || null;
+  var _a2;
+  pendingAskAiPrompt = ((_a2 = detail == null ? void 0 : detail.prompt) == null ? void 0 : _a2.trim()) || null;
   if (typeof window === "undefined") return;
   window.dispatchEvent(
     new CustomEvent(SUITE_OPEN_ASK_AI_EVENT, {
@@ -2514,9 +2514,9 @@ function SuiteAiPanel({
   const waiting = loading || isWaitingForReply;
   useEffect7(() => {
     function onOpen(event) {
-      var _a;
+      var _a2;
       const detail = event.detail;
-      const queued = ((_a = detail == null ? void 0 : detail.prompt) == null ? void 0 : _a.trim()) || consumePendingAskAiPrompt();
+      const queued = ((_a2 = detail == null ? void 0 : detail.prompt) == null ? void 0 : _a2.trim()) || consumePendingAskAiPrompt();
       setOpen(true);
       if (queued) {
         pendingPromptRef.current = queued;
@@ -2539,12 +2539,12 @@ function SuiteAiPanel({
     setAtBottom(distance < 64);
   }, []);
   const hydrate = useCallback3(async () => {
-    var _a, _b, _c;
+    var _a2, _b, _c;
     setHydrating(true);
     setError("");
     try {
       const data = await fetchChat();
-      setMessages((_a = data.messages) != null ? _a : []);
+      setMessages((_a2 = data.messages) != null ? _a2 : []);
       if (!data.configured) {
         setError("ShellStack AI is not configured for this workspace yet.");
       } else {
@@ -2562,9 +2562,9 @@ function SuiteAiPanel({
     }
   }, [fetchChat]);
   useEffect7(() => {
-    var _a;
+    var _a2;
     if (!open) return;
-    const queued = (_a = pendingPromptRef.current) != null ? _a : consumePendingAskAiPrompt();
+    const queued = (_a2 = pendingPromptRef.current) != null ? _a2 : consumePendingAskAiPrompt();
     pendingPromptRef.current = queued;
     void hydrate().then(() => {
       const pending = pendingPromptRef.current;
@@ -2576,8 +2576,8 @@ function SuiteAiPanel({
     if (open && atBottom) scrollToBottom();
   }, [messages, waiting, open, atBottom, scrollToBottom]);
   useEffect7(() => {
-    var _a;
-    if (open && !hydrating) (_a = textareaRef.current) == null ? void 0 : _a.focus();
+    var _a2;
+    if (open && !hydrating) (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
   }, [open, hydrating]);
   useEffect7(() => {
     if (!open) return;
@@ -2591,7 +2591,7 @@ function SuiteAiPanel({
     el.style.height = `${Math.min(el.scrollHeight, 176)}px`;
   }, [prompt, open]);
   async function ask(text) {
-    var _a;
+    var _a2;
     const trimmed = text.trim();
     if (!trimmed || waiting) return;
     const controller = new AbortController();
@@ -2607,20 +2607,20 @@ function SuiteAiPanel({
         signal: controller.signal
       });
       if (controller.signal.aborted) return;
-      const nextMessages = (_a = result.messages) != null ? _a : [];
+      const nextMessages = (_a2 = result.messages) != null ? _a2 : [];
       setMessages(nextMessages);
       notifySuiteMutated(
         nextMessages.flatMap((message) => {
-          var _a2;
-          return (_a2 = message.actions) != null ? _a2 : [];
+          var _a3;
+          return (_a3 = message.actions) != null ? _a3 : [];
         })
       );
     } catch (err) {
       if (controller.signal.aborted) return;
       setMessages(
         (prev) => {
-          var _a2, _b;
-          return ((_a2 = prev[prev.length - 1]) == null ? void 0 : _a2.role) === "user" && ((_b = prev[prev.length - 1]) == null ? void 0 : _b.content) === trimmed ? prev.slice(0, -1) : prev;
+          var _a3, _b;
+          return ((_a3 = prev[prev.length - 1]) == null ? void 0 : _a3.role) === "user" && ((_b = prev[prev.length - 1]) == null ? void 0 : _b.content) === trimmed ? prev.slice(0, -1) : prev;
         }
       );
       setPrompt(trimmed);
@@ -2633,8 +2633,8 @@ function SuiteAiPanel({
     }
   }
   function stop() {
-    var _a;
-    (_a = abortRef.current) == null ? void 0 : _a.abort();
+    var _a2;
+    (_a2 = abortRef.current) == null ? void 0 : _a2.abort();
     abortRef.current = null;
     setLoading(false);
     if (!cancelMessage) return;
@@ -2644,14 +2644,14 @@ function SuiteAiPanel({
     });
   }
   function retry() {
-    var _a;
-    const lastUser = (_a = [...messages].reverse().find((message) => message.role === "user")) == null ? void 0 : _a.content;
+    var _a2;
+    const lastUser = (_a2 = [...messages].reverse().find((message) => message.role === "user")) == null ? void 0 : _a2.content;
     setError("");
     if (lastUser) void ask(lastUser);
     else void hydrate();
   }
   async function saveEdit(index) {
-    var _a;
+    var _a2;
     const trimmed = editDraft.trim();
     if (!trimmed || waiting) return;
     setEditingIndex(null);
@@ -2669,12 +2669,12 @@ function SuiteAiPanel({
         signal: controller.signal
       }) : await sendMessage({ prompt: trimmed, signal: controller.signal });
       if (controller.signal.aborted) return;
-      const nextMessages = (_a = result.messages) != null ? _a : [];
+      const nextMessages = (_a2 = result.messages) != null ? _a2 : [];
       setMessages(nextMessages);
       notifySuiteMutated(
         nextMessages.flatMap((message) => {
-          var _a2;
-          return (_a2 = message.actions) != null ? _a2 : [];
+          var _a3;
+          return (_a3 = message.actions) != null ? _a3 : [];
         })
       );
     } catch (err) {
@@ -2712,18 +2712,18 @@ function SuiteAiPanel({
     }
   }
   async function handleResolve(actionId, decision) {
-    var _a;
+    var _a2;
     if (!resolveAction || resolvingId) return;
     setResolvingId(actionId);
     setError("");
     try {
       const result = await resolveAction(actionId, decision);
-      const nextMessages = (_a = result.messages) != null ? _a : [];
+      const nextMessages = (_a2 = result.messages) != null ? _a2 : [];
       setMessages(nextMessages);
       notifySuiteMutated(
         nextMessages.flatMap((message) => {
-          var _a2;
-          return (_a2 = message.actions) != null ? _a2 : [];
+          var _a3;
+          return (_a3 = message.actions) != null ? _a3 : [];
         })
       );
     } catch (err) {
@@ -2735,12 +2735,12 @@ function SuiteAiPanel({
     }
   }
   function onConversationClick(event) {
-    var _a;
+    var _a2;
     if (event.defaultPrevented) return;
     if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
       return;
     }
-    const anchor = (_a = event.target) == null ? void 0 : _a.closest("a");
+    const anchor = (_a2 = event.target) == null ? void 0 : _a2.closest("a");
     if (!anchor || !suiteAppBases) return;
     const href = anchor.href;
     if (!href) return;
@@ -2828,7 +2828,7 @@ function SuiteAiPanel({
                   )) }) : null
                 ] }) : null,
                 messages.map((message, index) => {
-                  var _a;
+                  var _a2;
                   const isUser = message.role === "user";
                   if (isUser) {
                     if (editingIndex === index) {
@@ -2961,7 +2961,7 @@ function SuiteAiPanel({
                               )
                             }
                           ) }),
-                          ((_a = message.actions) != null ? _a : []).map((action) => /* @__PURE__ */ jsxs14(
+                          ((_a2 = message.actions) != null ? _a2 : []).map((action) => /* @__PURE__ */ jsxs14(
                             "div",
                             {
                               "data-test": "ask-ai-action",
@@ -3087,7 +3087,7 @@ 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"
             }
           ),
-          loading ? /* @__PURE__ */ jsx17(Tooltip, { content: "Stop generating", children: /* @__PURE__ */ jsx17(
+          waiting ? /* @__PURE__ */ jsx17(Tooltip, { content: "Stop generating", children: /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
@@ -3097,16 +3097,7 @@ function SuiteAiPanel({
               "aria-label": "Stop generating",
               children: /* @__PURE__ */ jsx17(Square, { className: "h-3.5 w-3.5 fill-current" })
             }
-          ) }) : isWaitingForReply ? /* @__PURE__ */ jsx17(
-            "span",
-            {
-              className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ph-muted text-ph-subtle",
-              "data-test": "ask-ai-waiting",
-              role: "status",
-              "aria-label": "Shelly is responding",
-              children: /* @__PURE__ */ jsx17(Spinner, { className: "h-4 w-4 animate-spin" })
-            }
-          ) : /* @__PURE__ */ jsx17(Tooltip, { content: "Send message", children: /* @__PURE__ */ jsx17(
+          ) }) : /* @__PURE__ */ jsx17(Tooltip, { content: "Send message", children: /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
@@ -3142,9 +3133,9 @@ function SuiteWorkspaceSwitcher({
   triggerDataTest,
   footer
 }) {
-  var _a;
+  var _a2;
   const [open, setOpen] = useState9(false);
-  const sections = (_a = groups == null ? void 0 : groups.filter((group) => group.workspaces.length > 0)) != null ? _a : workspaces.length > 0 ? [{ id: "workspaces", label: "Switch workspace", workspaces }] : [];
+  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__ */ jsx18(
     DropdownMenu2,
     {
@@ -3850,7 +3841,7 @@ function SuiteSidebar({
                 /* @__PURE__ */ jsx23("div", { className: "min-h-0 flex-1", children: askAi })
               ] }) : /* @__PURE__ */ jsxs19(Fragment7, { children: [
                 /* @__PURE__ */ jsx23("nav", { "aria-label": "Pages", className: "shrink-0 space-y-1", children: /* @__PURE__ */ jsx23("div", { className: "space-y-1", children: navItems.map((item) => {
-                  var _a;
+                  var _a2;
                   const Icon = item.icon;
                   const active = Boolean(item.active);
                   const link = /* @__PURE__ */ jsxs19(
@@ -3858,7 +3849,7 @@ function SuiteSidebar({
                     {
                       href: item.href,
                       id: item.id,
-                      "data-test": (_a = item.dataTest) != null ? _a : "nav-link",
+                      "data-test": (_a2 = item.dataTest) != null ? _a2 : "nav-link",
                       "aria-current": active ? "page" : void 0,
                       onClick: item.onClick,
                       className: cn2(
@@ -4076,15 +4067,15 @@ var AUTH_SCHEME_LABELS = {
   OAUTH2: "OAuth 2.0"
 };
 function authSchemeLabel(scheme) {
-  var _a;
+  var _a2;
   const normalised = scheme.trim().toUpperCase();
-  return (_a = AUTH_SCHEME_LABELS[normalised]) != null ? _a : normalised.replace(/[-_]/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
+  return (_a2 = AUTH_SCHEME_LABELS[normalised]) != null ? _a2 : normalised.replace(/[-_]/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
 }
 function authSchemesFor(item) {
-  var _a;
+  var _a2;
   return Array.from(
     new Set(
-      ((_a = item.authSchemes) != null ? _a : []).map((scheme) => scheme.trim().toUpperCase()).filter(Boolean)
+      ((_a2 = item.authSchemes) != null ? _a2 : []).map((scheme) => scheme.trim().toUpperCase()).filter(Boolean)
     )
   );
 }
@@ -4107,10 +4098,10 @@ var CATEGORY_APP_AFFINITY = {
 };
 var DEFAULT_APP_AFFINITY = ["tides", "kraken"];
 function suiteAppsForIntegration(categories) {
-  var _a;
+  var _a2;
   const apps = /* @__PURE__ */ new Set();
   for (const category of categories != null ? categories : []) {
-    for (const app of (_a = CATEGORY_APP_AFFINITY[category.trim().toLowerCase()]) != null ? _a : []) {
+    for (const app of (_a2 = CATEGORY_APP_AFFINITY[category.trim().toLowerCase()]) != null ? _a2 : []) {
       apps.add(app);
     }
   }
@@ -4167,8 +4158,8 @@ function SuiteIntegrationPicker({
   const itemCategories = useMemo2(
     () => Array.from(
       new Set(items.flatMap((item) => {
-        var _a;
-        return (_a = item.categories) != null ? _a : [];
+        var _a2;
+        return (_a2 = item.categories) != null ? _a2 : [];
       }))
     ).sort(),
     [items]
@@ -4178,8 +4169,8 @@ function SuiteIntegrationPicker({
   const activeCategory = controlledCategory != null ? controlledCategory : category;
   const categoryLabel = (value) => value.replace(/[-_]/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
   const filtered = onSearchChange || onCategoryChange ? items : items.filter((item) => {
-    var _a;
-    return item.label.toLowerCase().includes(activeSearch.trim().toLowerCase()) && (activeCategory === "all" || ((_a = item.categories) != null ? _a : []).includes(activeCategory));
+    var _a2;
+    return item.label.toLowerCase().includes(activeSearch.trim().toLowerCase()) && (activeCategory === "all" || ((_a2 = item.categories) != null ? _a2 : []).includes(activeCategory));
   });
   const visibleCategories = categories.filter(
     (value) => categoryLabel(value).toLowerCase().includes(categoryQuery.trim().toLowerCase())
@@ -4204,7 +4195,7 @@ function SuiteIntegrationPicker({
     closeCategoryMenu(true);
   }
   function moveCategoryFocus(event, value) {
-    var _a;
+    var _a2;
     const index = categoryValues.indexOf(value);
     let nextIndex = null;
     if (event.key === "ArrowDown") nextIndex = (index + 1) % categoryValues.length;
@@ -4214,16 +4205,16 @@ function SuiteIntegrationPicker({
     else if (event.key === "End") nextIndex = categoryValues.length - 1;
     if (nextIndex === null) return;
     event.preventDefault();
-    (_a = categoryOptionRefs.current[categoryValues[nextIndex]]) == null ? void 0 : _a.focus();
+    (_a2 = categoryOptionRefs.current[categoryValues[nextIndex]]) == null ? void 0 : _a2.focus();
   }
   function handleCategoryTriggerKeyDown(event) {
-    var _a;
+    var _a2;
     if (event.key === "ArrowDown") {
       event.preventDefault();
       openCategoryMenu(activeCategory === "all" ? "all" : activeCategory);
     } else if (event.key === "ArrowUp") {
       event.preventDefault();
-      openCategoryMenu((_a = categoryValues.at(-1)) != null ? _a : "all");
+      openCategoryMenu((_a2 = categoryValues.at(-1)) != null ? _a2 : "all");
     } else if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       openCategoryMenu("search");
@@ -4241,7 +4232,7 @@ function SuiteIntegrationPicker({
     resetAuthForm();
   }
   async function prepareConnection(item, scheme) {
-    var _a;
+    var _a2;
     setMethodItem(null);
     setAuthError(null);
     setConnectionError(null);
@@ -4263,7 +4254,7 @@ function SuiteIntegrationPicker({
     try {
       const details = await onFetchAuthFields(item, scheme);
       if (requestId !== authRequestRef.current) return;
-      const resolvedScheme = (_a = details.auth_scheme) != null ? _a : scheme;
+      const resolvedScheme = (_a2 = details.auth_scheme) != null ? _a2 : scheme;
       if (details.managed) {
         setAuthItem(null);
         await onConnect(item, { auth_scheme: resolvedScheme });
@@ -4348,8 +4339,8 @@ function SuiteIntegrationPicker({
   useEffect9(() => {
     if (!categoryMenuOpen) return;
     const handlePointerDown = (event) => {
-      var _a;
-      if (!((_a = categoryMenuRef.current) == null ? void 0 : _a.contains(event.target))) {
+      var _a2;
+      if (!((_a2 = categoryMenuRef.current) == null ? void 0 : _a2.contains(event.target))) {
         closeCategoryMenu();
       }
     };
@@ -4364,11 +4355,11 @@ function SuiteIntegrationPicker({
     };
   }, [categoryMenuOpen]);
   useEffect9(() => {
-    var _a, _b, _c;
+    var _a2, _b, _c;
     const target = pendingCategoryFocus.current;
     if (!target) return;
     pendingCategoryFocus.current = null;
-    if (target === "trigger") (_a = categoryTriggerRef.current) == null ? void 0 : _a.focus();
+    if (target === "trigger") (_a2 = categoryTriggerRef.current) == null ? void 0 : _a2.focus();
     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]);
@@ -4481,10 +4472,10 @@ function SuiteIntegrationPicker({
                         placeholder: "Search categories...",
                         "aria-label": "Search categories",
                         onKeyDown: (event) => {
-                          var _a;
+                          var _a2;
                           if (event.key === "ArrowDown") {
                             event.preventDefault();
-                            (_a = categoryOptionRefs.current[categoryValues[0]]) == null ? void 0 : _a.focus();
+                            (_a2 = categoryOptionRefs.current[categoryValues[0]]) == null ? void 0 : _a2.focus();
                           } else if (event.key === "Escape") {
                             event.preventDefault();
                             closeCategoryMenu(true);
@@ -4547,7 +4538,7 @@ function SuiteIntegrationPicker({
                   }
                 ) : /* @__PURE__ */ jsxs21("div", { className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: [
                   filtered.map((item) => {
-                    var _a, _b;
+                    var _a2, _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()}...`;
@@ -4564,7 +4555,7 @@ function SuiteIntegrationPicker({
                               onClick: () => longDescription && setExpanded(isExpanded ? null : item.id),
                               "aria-expanded": isExpanded,
                               children: /* @__PURE__ */ jsxs21("span", { className: "flex items-start gap-3", children: [
-                                /* @__PURE__ */ jsx25("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__ */ jsx25(Plug, { className: "h-5 w-5", "aria-hidden": true }) }),
+                                /* @__PURE__ */ jsx25("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-ph-muted text-ph-ink", children: (_a2 = item.icon) != null ? _a2 : /* @__PURE__ */ jsx25(Plug, { className: "h-5 w-5", "aria-hidden": true }) }),
                                 /* @__PURE__ */ jsxs21("span", { className: "min-w-0", children: [
                                   /* @__PURE__ */ jsx25("span", { className: "block truncate font-medium text-ph-ink", children: item.label }),
                                   /* @__PURE__ */ jsx25("span", { className: "mt-1 block text-xs text-ph-subtle", children: text }),
@@ -4772,12 +4763,12 @@ function SuiteIntegrationPicker({
                 }
               ) : null,
               authItem.fields.map((field) => {
-                var _a, _b;
+                var _a2, _b;
                 return /* @__PURE__ */ jsx25(
                   Input,
                   {
                     label: field.label,
-                    type: (_a = field.type) != null ? _a : "password",
+                    type: (_a2 = field.type) != null ? _a2 : "password",
                     required: true,
                     value: (_b = authValues[field.name]) != null ? _b : "",
                     onChange: (event) => setAuthValues((current) => __spreadProps(__spreadValues({}, current), {
@@ -4820,8 +4811,8 @@ var ACTION_LABELS = {
   create_suite_notification: "Send a suite notification"
 };
 function actionLabel(actionType) {
-  var _a;
-  return (_a = ACTION_LABELS[actionType]) != null ? _a : actionType;
+  var _a2;
+  return (_a2 = ACTION_LABELS[actionType]) != null ? _a2 : actionType;
 }
 function formatDateTime(value) {
   if (!value) return "\u2014";
@@ -5210,225 +5201,583 @@ function SuiteIntegrationRules({
 
 // src/suite/components/suite-clients-projects-directory.tsx
 import {
-  useEffect as useEffect10,
-  useMemo as useMemo3,
-  useRef as useRef5,
-  useState as useState13
+  useEffect as useEffect11,
+  useMemo as useMemo4,
+  useRef as useRef6,
+  useState as useState14
 } from "react";
 import {
   ArrowLeft,
-  MediaImagePlus as ImagePlus,
   MoreHoriz as MoreHorizontal,
   Plus as Plus2,
-  Search as Search2,
+  Prohibition,
+  Search as Search3,
   Trash
 } from "iconoir-react";
-import { Fragment as Fragment9, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
-var DEFAULT_ICON = "castle-emblem";
-var DEFAULT_COLOR = "#6366f1";
-var DIRECTORY_ICON_OPTIONS = [
-  ["arena", "Arena"],
-  ["bridge", "Bridge"],
-  ["capitol", "Capitol"],
-  ["castle-emblem", "Castle"],
-  ["castle-flag", "Castle flag"],
-  ["lighthouse", "Lighthouse"],
-  ["tower", "Tower"],
-  ["wooden-sign", "Sign"],
-  ["anvil", "Anvil"],
-  ["book", "Book"],
-  ["chessboard", "Chessboard"],
-  ["cog", "Settings"],
-  ["hammer", "Build"],
-  ["light-bulb", "Idea"],
-  ["microphone", "Communication"],
-  ["quill-ink", "Writing"],
-  ["scroll-unfurled", "Notes"],
-  ["hourglass", "Planning"],
-  ["wrench", "Tools"],
-  ["archer", "Archer"],
-  ["archery-target", "Target"],
-  ["axe", "Axe"],
-  ["campfire", "Campfire"],
-  ["compass", "Compass"],
-  ["crossed-swords", "Battle"],
-  ["knight-helmet", "Knight"],
-  ["mountains", "Mountains"],
-  ["shield", "Shield"],
-  ["ship-emblem", "Voyage"],
-  ["sword", "Sword"],
-  ["trophy", "Trophy"],
-  ["apple", "Apple"],
-  ["butterfly", "Butterfly"],
-  ["clover", "Clover"],
-  ["dragon", "Dragon"],
-  ["fire", "Fire"],
-  ["flower", "Flower"],
-  ["flowers", "Flowers"],
-  ["grass", "Grass"],
-  ["leaf", "Leaf"],
-  ["pine-tree", "Pine tree"],
-  ["sun", "Sun"],
-  ["water-drop", "Water"],
-  ["aura", "Aura"],
-  ["crystal-ball", "Crystal ball"],
-  ["diamond", "Diamond"],
-  ["explosion", "Explosion"],
-  ["fire-symbol", "Fire symbol"],
-  ["gem", "Gem"],
-  ["lightning-trio", "Lightning"],
-  ["potion", "Potion"],
-  ["rune-stone", "Rune stone"],
-  ["skull", "Skull"],
-  ["tentacle", "Tentacle"],
-  ["wolf-head", "Wolf"],
-  ["anchor", "Anchor"],
-  ["beer", "Beer"],
-  ["carrot", "Carrot"],
-  ["cat", "Cat"],
-  ["crown", "Crown"],
-  ["gold-bar", "Gold bar"],
-  ["helmet", "Helmet"],
-  ["key", "Key"],
-  ["three-keys", "Keys"]
-];
-function isDirectoryIcon(value) {
-  return DIRECTORY_ICON_OPTIONS.some(([name]) => name === value);
+
+// src/suite/lib/palette-api.ts
+var _a;
+var PALETTE_URL = ((_a = process.env.NEXT_PUBLIC_PALETTE_URL) != null ? _a : "http://localhost:8010").replace(/\/$/, "");
+function toQuery(params) {
+  const query = new URLSearchParams();
+  for (const [key, value] of Object.entries(params != null ? params : {})) {
+    if (value !== void 0 && value !== null && value !== "") {
+      query.set(key, String(value));
+    }
+  }
+  return query.toString();
 }
-function DirectoryIconPicker({
-  value,
-  preview,
-  onFileChange,
-  onClear,
-  onChange
+async function paletteGet(path, params) {
+  const suffix = toQuery(params);
+  const response = await fetch(
+    `${PALETTE_URL}${path}${suffix ? `?${suffix}` : ""}`,
+    { headers: { Accept: "application/json" } }
+  );
+  if (!response.ok) {
+    throw new Error(`Palette request failed (${response.status}).`);
+  }
+  return await response.json();
+}
+var cache = /* @__PURE__ */ new Map();
+async function paletteGetCached(path, params, ttlMs) {
+  const key = `${path}?${toQuery(params)}`;
+  const now = Date.now();
+  const hit = cache.get(key);
+  if (hit && hit.expires > now) return hit.value;
+  const value = await paletteGet(path, params);
+  cache.set(key, { expires: now + ttlMs, value });
+  return value;
+}
+function fetchPaletteLibrary(options) {
+  return paletteGetCached("/library", options, 5 * 6e4);
+}
+function fetchPaletteCollection(slug, options) {
+  return paletteGetCached(
+    `/collections/${slug}`,
+    options,
+    2 * 6e4
+  );
+}
+function findPaletteIcons(options) {
+  return paletteGet("/find", options);
+}
+function paletteIconSrc(imageUrl, color) {
+  if (!imageUrl || !color) return imageUrl;
+  if (!imageUrl.includes("/svgrepo/")) return imageUrl;
+  return `${PALETTE_URL}/render?src=${encodeURIComponent(imageUrl)}&color=${encodeURIComponent(color)}`;
+}
+
+// src/suite/components/suite-entity-icon.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+function SuiteEntityIcon({
+  imageUrl,
+  label,
+  color,
+  className,
+  roundedClass = "rounded-md",
+  style,
+  tinted = false
 }) {
-  const iconRefs = useRef5({});
-  function moveSelection(event, index) {
-    var _a;
-    let nextIndex = null;
-    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-      nextIndex = (index + 1) % DIRECTORY_ICON_OPTIONS.length;
-    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-      nextIndex = (index - 1 + DIRECTORY_ICON_OPTIONS.length) % DIRECTORY_ICON_OPTIONS.length;
-    } else if (event.key === "Home") {
-      nextIndex = 0;
-    } else if (event.key === "End") {
-      nextIndex = DIRECTORY_ICON_OPTIONS.length - 1;
-    }
-    if (nextIndex === null) return;
-    event.preventDefault();
-    const [nextIcon] = DIRECTORY_ICON_OPTIONS[nextIndex];
-    onChange(nextIcon);
-    (_a = iconRefs.current[nextIcon]) == null ? void 0 : _a.focus();
+  const hasColor = typeof color === "string" && /^#[0-9a-fA-F]{3,8}$/.test(color);
+  const tint = hasColor ? color : null;
+  const neutralBackground = "var(--ph-muted, rgba(127,127,127,0.08))";
+  if (imageUrl) {
+    const src = tinted && tint ? paletteIconSrc(imageUrl, tint) : imageUrl;
+    return /* @__PURE__ */ jsx27(
+      "span",
+      {
+        className: cn(
+          "inline-flex shrink-0 items-center justify-center overflow-hidden leading-none",
+          roundedClass,
+          className
+        ),
+        style: __spreadValues({
+          backgroundColor: tint ? `${tint}18` : neutralBackground
+        }, style),
+        children: /* @__PURE__ */ jsx27("img", { src: src != null ? src : void 0, alt: "", className: "h-full w-full object-cover" })
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx27("span", { className: "mb-1.5 block text-sm font-medium text-ph-ink", children: "Icon" }),
-    /* @__PURE__ */ jsx27(
-      "div",
+  const initial = label == null ? void 0 : label.trim().charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsx27(
+    "span",
+    {
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center font-semibold leading-none",
+        roundedClass,
+        className
+      ),
+      style: __spreadValues({
+        color: tint != null ? tint : "var(--ph-mutedtext)",
+        backgroundColor: tint ? `${tint}18` : neutralBackground
+      }, style),
+      "aria-hidden": "true",
+      children: initial ? /* @__PURE__ */ jsx27("span", { className: "text-[0.7em]", children: initial }) : /* @__PURE__ */ jsx27("span", { className: "block h-1.5 w-1.5 rounded-full bg-current opacity-40" })
+    }
+  );
+}
+
+// src/suite/components/suite-palette-library.tsx
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect10,
+  useMemo as useMemo3,
+  useRef as useRef5,
+  useState as useState13
+} from "react";
+import { Filter as Filter2, FilterList, NavArrowDown as NavArrowDown3, Search as Search2 } from "iconoir-react";
+import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+var PAGE_SIZE = 60;
+var DISCOVER_LIMIT = 120;
+var ICON_TYPES = [
+  { value: "all", label: "All types" },
+  { value: "line", label: "Line" },
+  { value: "solid", label: "Solid" },
+  { value: "duotone", label: "Duotone" },
+  { value: "color", label: "Colour" },
+  { value: "mixed", label: "Mixed" }
+];
+function FilterSelect({
+  icon: Icon,
+  label,
+  value,
+  onChange,
+  children
+}) {
+  return /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx28(
+      Icon,
       {
-        role: "radiogroup",
-        "aria-label": "Icon",
-        className: "grid grid-cols-6 gap-1.5 rounded-lg border border-ph-border p-1.5 sm:grid-cols-8",
-        children: DIRECTORY_ICON_OPTIONS.map(([name, label], index) => {
-          const selected = value === name;
-          return /* @__PURE__ */ jsx27(
-            "button",
+        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__ */ jsx28(
+      "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",
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx28(
+      NavArrowDown3,
+      {
+        className: "pointer-events-none absolute right-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-ph-mutedtext",
+        "aria-hidden": true
+      }
+    )
+  ] });
+}
+function SuitePaletteLibrary({
+  onPick
+}) {
+  var _a2, _b;
+  const [collections, setCollections] = useState13([]);
+  const [typeFilter, setTypeFilter] = useState13("all");
+  const [collectionFilter, setCollectionFilter] = useState13("");
+  const [libraryOpen, setLibraryOpen] = useState13(false);
+  const [libraryQuery, setLibraryQuery] = useState13("");
+  const libraryRef = useRef5(null);
+  const [icons, setIcons] = useState13([]);
+  const [total, setTotal] = useState13(0);
+  const [page, setPage] = useState13(1);
+  const [query, setQuery] = useState13("");
+  const [loading, setLoading] = useState13(true);
+  const [loadingMore, setLoadingMore] = useState13(false);
+  const [error, setError] = useState13(null);
+  const requestId = useRef5(0);
+  const libraryOptions = useMemo3(() => {
+    const list = collections.filter(
+      (item) => typeFilter === "all" || item.style === typeFilter
+    );
+    return [...list].sort(
+      (a, b) => Number(b.featured) - Number(a.featured) || a.name.localeCompare(b.name)
+    );
+  }, [collections, typeFilter]);
+  const discoverIcons = useMemo3(() => {
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const collection of libraryOptions) {
+      for (const url of collection.preview) {
+        if (seen.has(url)) continue;
+        seen.add(url);
+        out.push({ id: url, name: collection.name, tags: [], url });
+        if (out.length >= DISCOVER_LIMIT) return out;
+      }
+    }
+    return out;
+  }, [libraryOptions]);
+  const loadCollection = useCallback6(async (slug, nextPage = 1) => {
+    const id = ++requestId.current;
+    if (nextPage === 1) {
+      setLoading(true);
+      setIcons([]);
+    } else {
+      setLoadingMore(true);
+    }
+    setError(null);
+    try {
+      const detail = await fetchPaletteCollection(slug, {
+        page: nextPage,
+        size: PAGE_SIZE
+      });
+      if (id !== requestId.current) return;
+      setTotal(detail.count);
+      setPage(nextPage);
+      setIcons(
+        (current) => nextPage === 1 ? detail.icons : [...current, ...detail.icons]
+      );
+    } catch (err) {
+      if (id === requestId.current) {
+        setError(err instanceof Error ? err.message : "Could not load icons.");
+      }
+    } finally {
+      if (id === requestId.current) {
+        setLoading(false);
+        setLoadingMore(false);
+      }
+    }
+  }, []);
+  useEffect10(() => {
+    let cancelled = false;
+    fetchPaletteLibrary().then((library) => {
+      if (cancelled) return;
+      setCollections(library.collections);
+    }).catch((err) => {
+      if (cancelled) return;
+      setError(err instanceof Error ? err.message : "Could not load the library.");
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect10(() => {
+    if (!collections.length) return;
+    if (collectionFilter && !libraryOptions.some((c) => c.slug === collectionFilter)) {
+      setCollectionFilter("");
+    }
+  }, [libraryOptions, collectionFilter, collections.length]);
+  useEffect10(() => {
+    if (query.trim()) return;
+    if (collectionFilter) {
+      void loadCollection(collectionFilter, 1);
+      return;
+    }
+    requestId.current += 1;
+    setLoading(false);
+    setPage(1);
+    setIcons(discoverIcons);
+    setTotal(discoverIcons.length);
+  }, [collectionFilter, query, loadCollection, discoverIcons]);
+  useEffect10(() => {
+    const term = query.trim();
+    if (!term) return;
+    const id = ++requestId.current;
+    setLoading(true);
+    setError(null);
+    const handle = setTimeout(async () => {
+      try {
+        const results = await findPaletteIcons({
+          q: term,
+          collection: collectionFilter || void 0,
+          style: typeFilter === "all" ? void 0 : typeFilter,
+          limit: 120
+        });
+        if (id !== requestId.current) return;
+        setTotal(results.total);
+        setPage(1);
+        setIcons(
+          results.results.map((hit) => ({
+            id: `${hit.collection}/${hit.id}`,
+            name: hit.name,
+            tags: hit.tags,
+            url: hit.url
+          }))
+        );
+      } catch (err) {
+        if (id === requestId.current) {
+          setError(err instanceof Error ? err.message : "Search failed.");
+        }
+      } finally {
+        if (id === requestId.current) setLoading(false);
+      }
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [query, collectionFilter, typeFilter]);
+  const searching = Boolean(query.trim());
+  const activeLibrary = (_a2 = collections.find((c) => c.slug === collectionFilter)) != null ? _a2 : null;
+  const filteredLibraries = useMemo3(() => {
+    const term = libraryQuery.trim().toLowerCase();
+    if (!term) return libraryOptions;
+    return libraryOptions.filter((c) => c.name.toLowerCase().includes(term));
+  }, [libraryOptions, libraryQuery]);
+  useEffect10(() => {
+    if (!libraryOpen) return;
+    const onPointerDown = (event) => {
+      var _a3;
+      if (!((_a3 = libraryRef.current) == null ? void 0 : _a3.contains(event.target))) setLibraryOpen(false);
+    };
+    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__ */ jsx28(
+            Search2,
             {
-              type: "button",
-              role: "radio",
-              "aria-label": label,
-              "aria-checked": selected,
-              tabIndex: selected ? 0 : -1,
-              title: label,
-              onClick: () => onChange(name),
-              onKeyDown: (event) => moveSelection(event, index),
-              ref: (element) => {
-                iconRefs.current[name] = element;
-              },
-              className: cn(
-                "flex h-9 items-center justify-center rounded-md text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink",
-                selected && "bg-ph-muted text-ph-ink ring-2 ring-ph-brand ring-inset"
-              ),
-              children: /* @__PURE__ */ jsx27(
-                "i",
+              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__ */ jsx28(
+            "input",
+            {
+              type: "search",
+              value: query,
+              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"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs23(
+          "button",
+          {
+            type: "button",
+            "aria-haspopup": "listbox",
+            "aria-expanded": libraryOpen,
+            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",
+            children: [
+              /* @__PURE__ */ jsx28(FilterList, { className: "h-4 w-4 shrink-0 text-ph-mutedtext", "aria-hidden": true }),
+              /* @__PURE__ */ jsx28("span", { className: "max-w-[10rem] truncate", children: (_b = activeLibrary == null ? void 0 : activeLibrary.name) != null ? _b : "All libraries" }),
+              /* @__PURE__ */ jsx28(
+                NavArrowDown3,
                 {
-                  className: cn("ra", `ra-${name}`, "text-base leading-none"),
+                  className: cn(
+                    "h-3.5 w-3.5 shrink-0 text-ph-mutedtext transition-transform",
+                    libraryOpen && "rotate-180"
+                  ),
                   "aria-hidden": true
                 }
               )
-            },
-            name
-          );
-        })
-      }
-    ),
-    /* @__PURE__ */ jsxs23("div", { className: "rounded-lg border border-ph-border bg-ph-muted p-2", children: [
-      /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 text-sm font-medium text-ph-ink", children: [
-        /* @__PURE__ */ jsx27(ImagePlus, { className: "h-4 w-4", "aria-hidden": true }),
-        " Custom image"
-      ] }),
-      /* @__PURE__ */ jsx27("p", { className: "mt-1 text-xs text-ph-mutedtext", children: "PNG, JPG, GIF, WebP, or SVG \u2014 max 512 KB." }),
-      /* @__PURE__ */ jsx27(
-        FileUpload,
-        {
-          accept: "image/png,image/jpeg,image/gif,image/webp,image/svg+xml,.svg",
-          onChange: (event) => {
-            var _a, _b;
-            return onFileChange((_b = (_a = event.target.files) == null ? void 0 : _a[0]) != null ? _b : null);
+            ]
           }
-        }
-      ),
-      preview ? /* @__PURE__ */ jsxs23("div", { className: "mt-2 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx27(
-          "img",
+        ),
+        /* @__PURE__ */ jsx28(
+          FilterSelect,
           {
-            src: preview,
-            alt: "",
-            className: "h-8 w-8 rounded object-cover"
+            icon: Filter2,
+            label: "Filter by icon type",
+            value: typeFilter,
+            onChange: setTypeFilter,
+            children: ICON_TYPES.map((type) => /* @__PURE__ */ jsx28("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__ */ jsx28(
+            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__ */ jsx28(
+            "input",
+            {
+              type: "search",
+              autoFocus: true,
+              value: libraryQuery,
+              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"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs23(
-          "button",
+          "ul",
           {
-            type: "button",
-            className: "text-xs text-ph-mutedtext hover:text-ph-ink",
-            onClick: onClear,
+            role: "listbox",
+            "aria-label": "Libraries",
+            className: "max-h-56 overflow-y-auto",
             children: [
-              /* @__PURE__ */ jsx27(Trash, { className: "mr-1 inline h-3.5 w-3.5", "aria-hidden": true }),
-              " Remove custom image"
+              /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": !collectionFilter,
+                  onClick: () => {
+                    setCollectionFilter("");
+                    setLibraryOpen(false);
+                  },
+                  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"
+                  ),
+                  children: "All libraries"
+                }
+              ) }),
+              filteredLibraries.map((collection) => /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsxs23(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": collectionFilter === collection.slug,
+                  onClick: () => {
+                    setCollectionFilter(collection.slug);
+                    setLibraryOpen(false);
+                  },
+                  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"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx28("span", { className: "truncate", children: collection.name }),
+                    /* @__PURE__ */ jsx28("span", { className: "shrink-0 text-xs text-ph-mutedtext", children: collection.count })
+                  ]
+                }
+              ) }, collection.slug)),
+              filteredLibraries.length === 0 ? /* @__PURE__ */ jsx28("li", { className: "px-2 py-4 text-center text-sm text-ph-mutedtext", children: "No libraries match." }) : null
             ]
           }
         )
       ] }) : null
+    ] }),
+    error ? /* @__PURE__ */ jsx28("p", { className: "text-sm text-ph-danger", children: error }) : loading ? /* @__PURE__ */ jsx28("p", { className: "py-8 text-center text-sm text-ph-mutedtext", children: "Loading icons\u2026" }) : icons.length === 0 ? /* @__PURE__ */ jsx28("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__ */ jsx28("div", { className: "max-h-[320px] overflow-y-auto rounded-lg border border-ph-border p-2", children: /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-6 gap-1.5 sm:grid-cols-8", children: icons.map((icon) => /* @__PURE__ */ jsx28(
+        "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__ */ jsx28(
+            "img",
+            {
+              src: icon.url,
+              alt: "",
+              loading: "lazy",
+              decoding: "async",
+              className: "h-6 w-6"
+            }
+          )
+        },
+        icon.id
+      )) }) }),
+      /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between text-xs text-ph-mutedtext", children: [
+        /* @__PURE__ */ jsxs23("span", { children: [
+          icons.length,
+          " of ",
+          total,
+          searching ? " matching" : activeLibrary ? ` in ${activeLibrary.name}` : " across all libraries"
+        ] }),
+        !searching && activeLibrary && icons.length < total ? /* @__PURE__ */ jsx28(
+          "button",
+          {
+            type: "button",
+            disabled: loadingMore,
+            onClick: () => void loadCollection(activeLibrary.slug, page + 1),
+            className: cn(
+              "font-medium text-ph-brand hover:underline",
+              loadingMore && "opacity-50"
+            ),
+            children: loadingMore ? "Loading\u2026" : "Load more"
+          }
+        ) : null
+      ] })
     ] })
   ] });
 }
-function DirectoryIcon({
-  item
+
+// src/suite/components/suite-clients-projects-directory.tsx
+import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+var DEFAULT_ICON = "";
+var DEFAULT_COLOR = "#6366f1";
+function DirectoryIconPicker({
+  preview,
+  label,
+  color,
+  onFileChange,
+  onClear,
+  onBrowse
 }) {
-  const icon = item.icon && isDirectoryIcon(item.icon) ? item.icon : DEFAULT_ICON;
-  return /* @__PURE__ */ jsx27(
-    "span",
-    {
-      className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-white",
-      style: { backgroundColor: item.color || "var(--ph-brand)" },
-      children: item.icon_image ? (
-        // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ jsx27(
-          "img",
+  return /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx29("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__ */ jsx29(
+          SuiteEntityIcon,
           {
-            src: item.icon_image,
-            alt: "",
-            className: "h-full w-full rounded-lg object-cover"
+            imageUrl: preview,
+            label,
+            color,
+            tinted: true,
+            className: "h-9 w-9 text-base"
           }
-        )
-      ) : /* @__PURE__ */ jsx27(
-        "i",
+        ),
+        /* @__PURE__ */ jsxs24("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx29("p", { className: "text-sm font-medium text-ph-ink", children: preview ? "Custom image" : "No icon yet" }),
+          /* @__PURE__ */ jsx29("p", { className: "text-xs text-ph-mutedtext", children: preview ? "Shown on cards and lists." : "Browse the library or upload your own." })
+        ] }),
+        onBrowse ? /* @__PURE__ */ jsx29(
+          "button",
+          {
+            type: "button",
+            onClick: onBrowse,
+            className: "rounded-md border border-ph-border px-3 py-1.5 text-xs font-medium text-ph-ink hover:border-ph-brand hover:bg-ph-surface",
+            children: "Browse library"
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx29("div", { className: "mt-3", children: /* @__PURE__ */ jsx29(
+        FileUpload,
         {
-          className: cn("ra", `ra-${icon}`, "text-base leading-none"),
-          "aria-hidden": true
+          accept: "image/png,image/jpeg,image/gif,image/webp,image/svg+xml,.svg",
+          onChange: (event) => {
+            var _a2, _b;
+            return onFileChange((_b = (_a2 = event.target.files) == null ? void 0 : _a2[0]) != null ? _b : null);
+          }
         }
-      )
+      ) }),
+      preview ? /* @__PURE__ */ jsxs24(
+        "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__ */ jsx29(Trash, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+            " Remove image"
+          ]
+        }
+      ) : null
+    ] })
+  ] });
+}
+function DirectoryIcon({
+  item
+}) {
+  return /* @__PURE__ */ jsx29(
+    SuiteEntityIcon,
+    {
+      imageUrl: item.icon_image,
+      label: item.name,
+      color: item.color,
+      tinted: true,
+      className: "h-8 w-8 text-sm",
+      roundedClass: "rounded-lg"
     }
   );
 }
@@ -5444,51 +5793,53 @@ function SuiteClientsProjectsDirectory({
   onCreateProject,
   onUpdateProject,
   onDeleteProject,
+  renderIconLibrary,
   dataTest = "suite-clients-projects-directory"
 }) {
-  var _a;
-  const [query, setQuery] = useState13("");
-  const [selectedClientId, setSelectedClientId] = useState13(null);
-  const [mobileDetail, setMobileDetail] = useState13(false);
-  const [editing, setEditing] = useState13(null);
-  const [draft, setDraft] = useState13({
+  var _a2;
+  const [query, setQuery] = useState14("");
+  const [selectedClientId, setSelectedClientId] = useState14(null);
+  const [mobileDetail, setMobileDetail] = useState14(false);
+  const [editing, setEditing] = useState14(null);
+  const [draft, setDraft] = useState14({
     name: "",
     icon: DEFAULT_ICON,
     color: DEFAULT_COLOR
   });
-  const [draftClientId, setDraftClientId] = useState13(null);
-  const [preview, setPreview] = useState13(null);
-  const [draftArchived, setDraftArchived] = useState13(false);
-  const [confirming, setConfirming] = useState13(null);
-  const [saving, setSaving] = useState13(false);
-  const [mutationError, setMutationError] = useState13(null);
-  const clientButtonRefs = useRef5({});
-  const backToClientsRef = useRef5(null);
-  const mobileFocusTarget = useRef5(null);
-  useEffect10(() => {
-    var _a2, _b;
+  const [draftClientId, setDraftClientId] = useState14(null);
+  const [preview, setPreview] = useState14(null);
+  const [libraryOpen, setLibraryOpen] = useState14(false);
+  const [draftArchived, setDraftArchived] = useState14(false);
+  const [confirming, setConfirming] = useState14(null);
+  const [saving, setSaving] = useState14(false);
+  const [mutationError, setMutationError] = useState14(null);
+  const clientButtonRefs = useRef6({});
+  const backToClientsRef = useRef6(null);
+  const mobileFocusTarget = useRef6(null);
+  useEffect11(() => {
+    var _a3, _b;
     if (selectedClientId && clients.some((client) => client.id === selectedClientId))
       return;
-    setSelectedClientId((_b = (_a2 = clients[0]) == null ? void 0 : _a2.id) != null ? _b : null);
+    setSelectedClientId((_b = (_a3 = clients[0]) == null ? void 0 : _a3.id) != null ? _b : null);
   }, [clients, selectedClientId]);
-  useEffect10(() => {
-    var _a2, _b;
+  useEffect11(() => {
+    var _a3, _b;
     const target = mobileFocusTarget.current;
     if (!target) return;
     mobileFocusTarget.current = null;
-    if (target === "detail") (_a2 = backToClientsRef.current) == null ? void 0 : _a2.focus();
+    if (target === "detail") (_a3 = backToClientsRef.current) == null ? void 0 : _a3.focus();
     else if (selectedClientId)
       (_b = clientButtonRefs.current[selectedClientId]) == null ? void 0 : _b.focus();
   }, [mobileDetail, selectedClientId]);
-  const filteredClients = useMemo3(() => {
+  const filteredClients = useMemo4(() => {
     const value = query.trim().toLowerCase();
     return [...clients].sort((a, b) => a.name.localeCompare(b.name)).filter((client) => !value || client.name.toLowerCase().includes(value));
   }, [clients, query]);
-  const selectedClient = (_a = clients.find((client) => client.id === selectedClientId)) != null ? _a : null;
+  const selectedClient = (_a2 = clients.find((client) => client.id === selectedClientId)) != null ? _a2 : null;
   const selectedProjects = projects.filter((project) => project.clientId === selectedClientId).sort((a, b) => a.name.localeCompare(b.name));
   function isMobileDirectoryView() {
-    var _a2, _b;
-    return (_b = (_a2 = window.matchMedia) == null ? void 0 : _a2.call(window, "(max-width: 1023px)").matches) != null ? _b : false;
+    var _a3, _b;
+    return (_b = (_a3 = window.matchMedia) == null ? void 0 : _a3.call(window, "(max-width: 1023px)").matches) != null ? _b : false;
   }
   function selectClient(client) {
     setSelectedClientId(client.id);
@@ -5496,7 +5847,7 @@ function SuiteClientsProjectsDirectory({
     if (isMobileDirectoryView()) mobileFocusTarget.current = "detail";
   }
   function moveClientSelection(event, index) {
-    var _a2;
+    var _a3;
     let nextIndex = null;
     if (event.key === "ArrowDown") {
       nextIndex = (index + 1) % filteredClients.length;
@@ -5511,7 +5862,7 @@ function SuiteClientsProjectsDirectory({
     event.preventDefault();
     const client = filteredClients[nextIndex];
     selectClient(client);
-    if (!isMobileDirectoryView()) (_a2 = clientButtonRefs.current[client.id]) == null ? void 0 : _a2.focus();
+    if (!isMobileDirectoryView()) (_a3 = clientButtonRefs.current[client.id]) == null ? void 0 : _a3.focus();
   }
   function openNew(kind) {
     setMutationError(null);
@@ -5520,6 +5871,7 @@ function SuiteClientsProjectsDirectory({
       icon: DEFAULT_ICON,
       color: DEFAULT_COLOR,
       iconImageFile: null,
+      iconImageUrl: null,
       clearIconImage: false
     });
     setPreview(null);
@@ -5528,13 +5880,14 @@ function SuiteClientsProjectsDirectory({
     setEditing({ kind: kind === "client" ? "new-client" : "new-project" });
   }
   function openEdit(item, kind) {
-    var _a2;
+    var _a3, _b;
     setMutationError(null);
     setDraft({
       name: item.name,
-      icon: item.icon && isDirectoryIcon(item.icon) ? item.icon : DEFAULT_ICON,
+      icon: (_a3 = item.icon) != null ? _a3 : DEFAULT_ICON,
       color: item.color || DEFAULT_COLOR,
       iconImageFile: null,
+      iconImageUrl: null,
       clearIconImage: false
     });
     setPreview(item.icon_image || null);
@@ -5542,7 +5895,7 @@ function SuiteClientsProjectsDirectory({
       kind === "project" && Boolean(item.isArchived)
     );
     setDraftClientId(
-      kind === "project" ? (_a2 = item.clientId) != null ? _a2 : null : null
+      kind === "project" ? (_b = item.clientId) != null ? _b : null : null
     );
     setEditing({ kind, item });
   }
@@ -5556,6 +5909,7 @@ function SuiteClientsProjectsDirectory({
     if (preview == null ? void 0 : preview.startsWith("blob:")) URL.revokeObjectURL(preview);
     setDraft((current) => __spreadProps(__spreadValues({}, current), {
       iconImageFile: file,
+      iconImageUrl: null,
       clearIconImage: false
     }));
     setPreview(URL.createObjectURL(file));
@@ -5565,9 +5919,21 @@ function SuiteClientsProjectsDirectory({
     setPreview(null);
     setDraft((current) => __spreadProps(__spreadValues({}, current), {
       iconImageFile: null,
+      iconImageUrl: null,
       clearIconImage: true
     }));
   }
+  function pickFromLibrary(icon) {
+    if (preview == null ? void 0 : preview.startsWith("blob:")) URL.revokeObjectURL(preview);
+    setMutationError(null);
+    setPreview(icon.url);
+    setDraft((current) => __spreadProps(__spreadValues({}, current), {
+      iconImageFile: null,
+      iconImageUrl: icon.url,
+      clearIconImage: false
+    }));
+    setLibraryOpen(false);
+  }
   function closeEditor() {
     if (!saving) setEditing(null);
   }
@@ -5603,14 +5969,14 @@ function SuiteClientsProjectsDirectory({
     setConfirming({ item, kind });
   }
   async function toggleArchive(project) {
-    var _a2;
+    var _a3, _b;
     if (!onUpdateProject) return;
     try {
       await onUpdateProject(project, {
         name: project.name,
-        icon: project.icon && isDirectoryIcon(project.icon) ? project.icon : DEFAULT_ICON,
+        icon: (_a3 = project.icon) != null ? _a3 : DEFAULT_ICON,
         color: project.color || DEFAULT_COLOR,
-        clientId: (_a2 = project.clientId) != null ? _a2 : null,
+        clientId: (_b = project.clientId) != null ? _b : null,
         isArchived: !project.isArchived
       });
     } catch (err) {
@@ -5633,10 +5999,10 @@ function SuiteClientsProjectsDirectory({
       );
     }
   }
-  return /* @__PURE__ */ jsxs23("div", { "data-test": dataTest, className: "space-y-3", children: [
-    error || mutationError ? /* @__PURE__ */ jsx27(Alert, { status: "danger", live: "assertive", children: error || mutationError }) : null,
-    loading ? /* @__PURE__ */ jsx27("p", { className: "text-sm text-ph-mutedtext", children: "Loading directory..." }) : /* @__PURE__ */ jsxs23("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__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24("div", { "data-test": dataTest, className: "space-y-3", children: [
+    error || mutationError ? /* @__PURE__ */ jsx29(Alert, { status: "danger", live: "assertive", children: error || mutationError }) : null,
+    loading ? /* @__PURE__ */ jsx29("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(
         "section",
         {
           className: cn(
@@ -5644,16 +6010,16 @@ function SuiteClientsProjectsDirectory({
             mobileDetail ? "hidden lg:block" : "block"
           ),
           children: [
-            /* @__PURE__ */ jsxs23("div", { className: "flex h-14 items-center gap-2 border-b border-ph-border px-3", children: [
-              /* @__PURE__ */ jsxs23("div", { className: "relative min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx27(
-                  Search2,
+            /* @__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__ */ jsx29(
+                  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__ */ jsx27(
+                /* @__PURE__ */ jsx29(
                   Input,
                   {
                     hideLabel: true,
@@ -5665,18 +6031,18 @@ function SuiteClientsProjectsDirectory({
                   }
                 )
               ] }),
-              canEdit && onCreateClient ? /* @__PURE__ */ jsx27(
+              canEdit && onCreateClient ? /* @__PURE__ */ jsx29(
                 Button,
                 {
                   size: "sm",
                   variant: "primary",
-                  icon: /* @__PURE__ */ jsx27(Plus2, { className: "h-4 w-4" }),
+                  icon: /* @__PURE__ */ jsx29(Plus2, { className: "h-4 w-4" }),
                   onClick: () => openNew("client"),
                   children: "New client"
                 }
               ) : null
             ] }),
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx29(
               "ul",
               {
                 role: "listbox",
@@ -5687,7 +6053,7 @@ function SuiteClientsProjectsDirectory({
                   const count = projects.filter(
                     (project) => project.clientId === client.id
                   ).length;
-                  return /* @__PURE__ */ jsx27("li", { role: "none", children: /* @__PURE__ */ jsxs23(
+                  return /* @__PURE__ */ jsx29("li", { role: "none", children: /* @__PURE__ */ jsxs24(
                     "button",
                     {
                       type: "button",
@@ -5704,10 +6070,10 @@ function SuiteClientsProjectsDirectory({
                         selected ? "bg-ph-muted" : "hover:bg-ph-canvas"
                       ),
                       children: [
-                        /* @__PURE__ */ jsx27(DirectoryIcon, { item: client }),
-                        /* @__PURE__ */ jsxs23("span", { className: "min-w-0 flex-1", children: [
-                          /* @__PURE__ */ jsx27("span", { className: "block truncate text-sm font-medium text-ph-ink", children: client.name }),
-                          /* @__PURE__ */ jsxs23("span", { className: "text-xs text-ph-mutedtext", children: [
+                        /* @__PURE__ */ jsx29(DirectoryIcon, { item: client }),
+                        /* @__PURE__ */ jsxs24("span", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx29("span", { className: "block truncate text-sm font-medium text-ph-ink", children: client.name }),
+                          /* @__PURE__ */ jsxs24("span", { className: "text-xs text-ph-mutedtext", children: [
                             count,
                             " project",
                             count === 1 ? "" : "s"
@@ -5716,13 +6082,13 @@ function SuiteClientsProjectsDirectory({
                       ]
                     }
                   ) }, client.id);
-                }) : /* @__PURE__ */ jsx27("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__ */ jsx29("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__ */ jsxs23(
+      /* @__PURE__ */ jsxs24(
         "section",
         {
           className: cn(
@@ -5730,8 +6096,8 @@ function SuiteClientsProjectsDirectory({
             mobileDetail ? "flex" : "hidden lg:flex"
           ),
           children: [
-            /* @__PURE__ */ jsx27("div", { className: "flex min-h-14 items-center gap-2 border-b border-ph-border px-3 py-2", children: selectedClient ? /* @__PURE__ */ jsxs23(Fragment9, { children: [
-              /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx29("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__ */ jsx29(
                 "button",
                 {
                   type: "button",
@@ -5742,36 +6108,36 @@ function SuiteClientsProjectsDirectory({
                     setMobileDetail(false);
                   },
                   "aria-label": "Back to clients",
-                  children: /* @__PURE__ */ jsx27(ArrowLeft, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx29(ArrowLeft, { className: "h-4 w-4" })
                 }
               ),
-              /* @__PURE__ */ jsx27(DirectoryIcon, { item: selectedClient }),
-              /* @__PURE__ */ jsxs23("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx27("h3", { className: "truncate text-sm font-semibold text-ph-ink", children: selectedClient.name }),
-                /* @__PURE__ */ jsxs23("p", { className: "text-xs text-ph-mutedtext", children: [
+              /* @__PURE__ */ jsx29(DirectoryIcon, { item: selectedClient }),
+              /* @__PURE__ */ jsxs24("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx29("h3", { className: "truncate text-sm font-semibold text-ph-ink", children: selectedClient.name }),
+                /* @__PURE__ */ jsxs24("p", { className: "text-xs text-ph-mutedtext", children: [
                   selectedProjects.length,
                   " project",
                   selectedProjects.length === 1 ? "" : "s"
                 ] })
               ] }),
-              canEdit && (onUpdateClient || onDeleteClient) ? /* @__PURE__ */ jsx27("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx27(
+              canEdit && (onUpdateClient || onDeleteClient) ? /* @__PURE__ */ jsx29("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx29(
                 DropdownMenu,
                 {
                   "aria-label": `Actions for ${selectedClient.name}`,
                   align: "end",
-                  trigger: /* @__PURE__ */ jsxs23("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__ */ jsx27(MoreHorizontal, { className: "h-4 w-4", "aria-hidden": true }),
-                    /* @__PURE__ */ jsx27("span", { className: "sr-only", children: "Client actions" })
+                  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__ */ jsx29(MoreHorizontal, { className: "h-4 w-4", "aria-hidden": true }),
+                    /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Client actions" })
                   ] }),
-                  children: /* @__PURE__ */ jsxs23("div", { className: "p-1", children: [
-                    onUpdateClient ? /* @__PURE__ */ jsx27(
+                  children: /* @__PURE__ */ jsxs24("div", { className: "p-1", children: [
+                    onUpdateClient ? /* @__PURE__ */ jsx29(
                       DropdownItem,
                       {
                         onClick: () => openEdit(selectedClient, "client"),
                         children: "Edit client"
                       }
                     ) : null,
-                    onDeleteClient ? /* @__PURE__ */ jsx27(
+                    onDeleteClient ? /* @__PURE__ */ jsx29(
                       DropdownItem,
                       {
                         className: "text-red-600",
@@ -5782,32 +6148,32 @@ function SuiteClientsProjectsDirectory({
                   ] })
                 }
               ) }) : null
-            ] }) : /* @__PURE__ */ jsx27("p", { className: "text-sm text-ph-mutedtext", children: "Select a client" }) }),
-            canEdit && onCreateProject ? /* @__PURE__ */ jsx27("div", { className: "border-b border-ph-border p-3", children: /* @__PURE__ */ jsx27(
+            ] }) : /* @__PURE__ */ jsx29("p", { className: "text-sm text-ph-mutedtext", children: "Select a client" }) }),
+            canEdit && onCreateProject ? /* @__PURE__ */ jsx29("div", { className: "border-b border-ph-border p-3", children: /* @__PURE__ */ jsx29(
               Button,
               {
                 variant: "primary",
-                icon: /* @__PURE__ */ jsx27(Plus2, { className: "h-4 w-4" }),
+                icon: /* @__PURE__ */ jsx29(Plus2, { className: "h-4 w-4" }),
                 onClick: () => openNew("project"),
                 children: "Add project"
               }
             ) }) : null,
-            /* @__PURE__ */ jsx27("ul", { className: "flex-1 p-2", children: selectedClient && selectedProjects.length ? selectedProjects.map((project) => /* @__PURE__ */ jsx27("li", { children: /* @__PURE__ */ jsxs23(
+            /* @__PURE__ */ jsx29("ul", { className: "flex-1 p-2", children: selectedClient && selectedProjects.length ? selectedProjects.map((project) => /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsxs24(
               "div",
               {
                 className: "flex items-center gap-3 rounded-lg px-2 py-1 hover:bg-ph-canvas",
                 onClick: () => openEdit(project, "project"),
                 children: [
-                  /* @__PURE__ */ jsxs23(
+                  /* @__PURE__ */ jsxs24(
                     "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",
                       onClick: () => openEdit(project, "project"),
                       children: [
-                        /* @__PURE__ */ jsx27(DirectoryIcon, { item: project }),
-                        /* @__PURE__ */ jsxs23("span", { className: "min-w-0 flex-1", children: [
-                          /* @__PURE__ */ jsx27(
+                        /* @__PURE__ */ jsx29(DirectoryIcon, { item: project }),
+                        /* @__PURE__ */ jsxs24("span", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ jsx29(
                             "span",
                             {
                               className: cn(
@@ -5817,36 +6183,36 @@ function SuiteClientsProjectsDirectory({
                               children: project.name
                             }
                           ),
-                          /* @__PURE__ */ jsx27("span", { className: "text-xs text-ph-mutedtext", children: project.isArchived ? "Archived" : "Active" })
+                          /* @__PURE__ */ jsx29("span", { className: "text-xs text-ph-mutedtext", children: project.isArchived ? "Archived" : "Active" })
                         ] })
                       ]
                     }
                   ),
-                  canEdit && (onUpdateProject || onDeleteProject) ? /* @__PURE__ */ jsx27("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx27(
+                  canEdit && (onUpdateProject || onDeleteProject) ? /* @__PURE__ */ jsx29("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx29(
                     DropdownMenu,
                     {
                       "aria-label": `Actions for ${project.name}`,
                       align: "end",
-                      trigger: /* @__PURE__ */ jsxs23("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__ */ jsx27(
+                      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__ */ jsx29(
                           MoreHorizontal,
                           {
                             className: "h-4 w-4",
                             "aria-hidden": true
                           }
                         ),
-                        /* @__PURE__ */ jsx27("span", { className: "sr-only", children: "Project actions" })
+                        /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Project actions" })
                       ] }),
-                      children: /* @__PURE__ */ jsxs23("div", { className: "p-1", children: [
-                        onUpdateProject ? /* @__PURE__ */ jsxs23(Fragment9, { children: [
-                          /* @__PURE__ */ jsx27(
+                      children: /* @__PURE__ */ jsxs24("div", { className: "p-1", children: [
+                        onUpdateProject ? /* @__PURE__ */ jsxs24(Fragment10, { children: [
+                          /* @__PURE__ */ jsx29(
                             DropdownItem,
                             {
                               onClick: () => openEdit(project, "project"),
                               children: "Edit project"
                             }
                           ),
-                          /* @__PURE__ */ jsx27(
+                          /* @__PURE__ */ jsx29(
                             DropdownItem,
                             {
                               onClick: () => void toggleArchive(project),
@@ -5854,7 +6220,7 @@ function SuiteClientsProjectsDirectory({
                             }
                           )
                         ] }) : null,
-                        onDeleteProject ? /* @__PURE__ */ jsx27(
+                        onDeleteProject ? /* @__PURE__ */ jsx29(
                           DropdownItem,
                           {
                             className: "text-red-600",
@@ -5867,20 +6233,20 @@ function SuiteClientsProjectsDirectory({
                   ) }) : null
                 ]
               }
-            ) }, project.id)) : /* @__PURE__ */ jsx27("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__ */ jsx29("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__ */ jsx27(
+    /* @__PURE__ */ jsx29(
       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__ */ jsxs23("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx27(Button, { variant: "tertiary", onClick: closeEditor, disabled: saving, children: "Cancel" }),
-          /* @__PURE__ */ jsx27(
+        footer: /* @__PURE__ */ jsxs24("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx29(Button, { variant: "tertiary", onClick: closeEditor, disabled: saving, children: "Cancel" }),
+          /* @__PURE__ */ jsx29(
             Button,
             {
               variant: "primary",
@@ -5890,8 +6256,8 @@ function SuiteClientsProjectsDirectory({
             }
           )
         ] }),
-        children: /* @__PURE__ */ jsxs23("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsxs24("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx29(
             Input,
             {
               label: "Name",
@@ -5900,22 +6266,35 @@ function SuiteClientsProjectsDirectory({
               onChange: (event) => setDraft(__spreadProps(__spreadValues({}, draft), { name: event.target.value }))
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx29(
             DirectoryIconPicker,
             {
-              value: isDirectoryIcon(draft.icon) ? draft.icon : DEFAULT_ICON,
               preview,
+              label: draft.name,
+              color: draft.color,
               onFileChange: chooseImage,
               onClear: clearImage,
-              onChange: (icon) => {
-                if (preview) clearImage();
-                setDraft((current) => __spreadProps(__spreadValues({}, current), { icon }));
-              }
+              onBrowse: () => setLibraryOpen(true)
             }
           ),
-          /* @__PURE__ */ jsxs23("div", { children: [
-            /* @__PURE__ */ jsx27("span", { className: "mb-1.5 block text-sm font-medium text-ph-ink", children: "Colour" }),
-            /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsxs24("div", { children: [
+            /* @__PURE__ */ jsx29("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__ */ jsx29(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "No colour",
+                  "aria-pressed": !draft.color,
+                  title: "No colour",
+                  onClick: () => setDraft(__spreadProps(__spreadValues({}, draft), { color: "" })),
+                  className: cn(
+                    "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__ */ jsx29(Prohibition, { className: "h-4 w-4", "aria-hidden": true })
+                }
+              ),
               [
                 "#6366f1",
                 "#0ea5e9",
@@ -5924,7 +6303,7 @@ function SuiteClientsProjectsDirectory({
                 "#ef4444",
                 "#a855f7",
                 "#64748b"
-              ].map((color) => /* @__PURE__ */ jsx27(
+              ].map((color) => /* @__PURE__ */ jsx29(
                 "button",
                 {
                   type: "button",
@@ -5939,33 +6318,70 @@ function SuiteClientsProjectsDirectory({
                 },
                 color
               )),
-              /* @__PURE__ */ jsx27(
-                Input,
+              /* @__PURE__ */ jsxs24(
+                "label",
                 {
-                  hideLabel: true,
-                  label: "Custom colour",
-                  type: "color",
-                  value: draft.color,
-                  onChange: (event) => setDraft(__spreadProps(__spreadValues({}, draft), { color: event.target.value })),
-                  className: "h-8 w-8 p-0"
+                  className: cn(
+                    "relative inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full ring-1 ring-ph-border ring-offset-2",
+                    ![
+                      "#6366f1",
+                      "#0ea5e9",
+                      "#10b981",
+                      "#f59e0b",
+                      "#ef4444",
+                      "#a855f7",
+                      "#64748b"
+                    ].includes(draft.color) && "ring-2 ring-ph-brand"
+                  ),
+                  style: {
+                    background: "conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444)"
+                  },
+                  title: "Custom colour",
+                  children: [
+                    /* @__PURE__ */ jsx29("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-ph-surface", children: [
+                      "#6366f1",
+                      "#0ea5e9",
+                      "#10b981",
+                      "#f59e0b",
+                      "#ef4444",
+                      "#a855f7",
+                      "#64748b"
+                    ].includes(draft.color) ? /* @__PURE__ */ jsx29(Plus2, { className: "h-3 w-3 text-ph-ink", "aria-hidden": true }) : /* @__PURE__ */ jsx29(
+                      "span",
+                      {
+                        className: "h-2.5 w-2.5 rounded-full",
+                        style: { backgroundColor: draft.color }
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx29(
+                      "input",
+                      {
+                        type: "color",
+                        "aria-label": "Custom colour",
+                        value: draft.color,
+                        onChange: (event) => setDraft(__spreadProps(__spreadValues({}, draft), { color: event.target.value })),
+                        className: "sr-only"
+                      }
+                    )
+                  ]
                 }
               )
             ] })
           ] }),
-          (editing == null ? void 0 : editing.kind.includes("project")) ? /* @__PURE__ */ jsxs23(
+          (editing == null ? void 0 : editing.kind.includes("project")) ? /* @__PURE__ */ jsxs24(
             Select,
             {
               label: "Client",
               value: draftClientId != null ? draftClientId : "",
               onChange: (event) => setDraftClientId(event.target.value || null),
               children: [
-                /* @__PURE__ */ jsx27("option", { value: "", children: "No client" }),
-                clients.map((client) => /* @__PURE__ */ jsx27("option", { value: client.id, children: client.name }, client.id))
+                /* @__PURE__ */ jsx29("option", { value: "", children: "No client" }),
+                clients.map((client) => /* @__PURE__ */ jsx29("option", { value: client.id, children: client.name }, client.id))
               ]
             }
           ) : null,
-          (editing == null ? void 0 : editing.kind.includes("project")) ? /* @__PURE__ */ jsxs23("label", { className: "flex items-center gap-2 text-sm text-ph-ink", children: [
-            /* @__PURE__ */ jsx27(
+          (editing == null ? void 0 : editing.kind.includes("project")) ? /* @__PURE__ */ jsxs24("label", { className: "flex items-center gap-2 text-sm text-ph-ink", children: [
+            /* @__PURE__ */ jsx29(
               "input",
               {
                 type: "checkbox",
@@ -5978,17 +6394,26 @@ function SuiteClientsProjectsDirectory({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx27(
+    libraryOpen ? /* @__PURE__ */ jsx29(
+      Modal,
+      {
+        open: true,
+        onClose: () => setLibraryOpen(false),
+        title: "Icon library",
+        children: renderIconLibrary ? renderIconLibrary({ onPick: pickFromLibrary }) : /* @__PURE__ */ jsx29(SuitePaletteLibrary, { onPick: pickFromLibrary })
+      }
+    ) : null,
+    /* @__PURE__ */ jsx29(
       Modal,
       {
         open: confirming !== null,
         onClose: () => setConfirming(null),
         title: "Confirm deletion",
-        footer: /* @__PURE__ */ jsxs23("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ jsx27(Button, { variant: "tertiary", onClick: () => setConfirming(null), children: "Cancel" }),
-          /* @__PURE__ */ jsx27(Button, { variant: "primary", onClick: () => void confirmRemove(), children: "Delete" })
+        footer: /* @__PURE__ */ jsxs24("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx29(Button, { variant: "tertiary", onClick: () => setConfirming(null), children: "Cancel" }),
+          /* @__PURE__ */ jsx29(Button, { variant: "primary", onClick: () => void confirmRemove(), children: "Delete" })
         ] }),
-        children: /* @__PURE__ */ jsxs23("p", { className: "text-sm text-ph-ink", children: [
+        children: /* @__PURE__ */ jsxs24("p", { className: "text-sm text-ph-ink", children: [
           "Delete ",
           confirming == null ? void 0 : confirming.item.name,
           "? This cannot be undone."
@@ -6033,6 +6458,7 @@ export {
   SuiteBreadcrumbs,
   SuiteClientsProjectsDirectory,
   SuiteEmptyState,
+  SuiteEntityIcon,
   SuiteIcon,
   SuiteIntegrationPicker,
   SuiteIntegrationRules,
@@ -6042,6 +6468,7 @@ export {
   SuiteNotificationBell,
   SuitePage,
   SuitePageHeader,
+  SuitePaletteLibrary,
   SuiteSectionHeader,
   SuiteSettingsLayout,
   SuiteSettingsMobileNav,
@@ -6074,6 +6501,9 @@ export {
   cn2 as cn,
   consumePendingAskAiPrompt,
   consumeSuiteAskAiOpenFromLocation,
+  fetchPaletteCollection,
+  fetchPaletteLibrary,
+  findPaletteIcons,
   getTodayGreeting,
   m,
   openSuiteAskAi,