@sybilion/uilib 1.3.70 → 1.3.72

package/dist/esm/components/ui/Chat/ChatChrome/ChatChrome.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatChrome_root__oh4Ay{border-radius:var(--p-4);display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;position:relative}.ChatChrome_chatResizeHandle__epfiT{background-color:var(--page-color);border-radius:2.5px;height:calc(100vh + 200px);left:0;opacity:0;position:absolute;right:auto;top:-200px;touch-action:none;transition:opacity .15s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:5px;z-index:30}.ChatChrome_chatResizeHandle__epfiT:before{left:0;right:auto}.ChatChrome_panelHeader__Hkfit{align-items:center;display:flex;flex-shrink:0;justify-content:flex-end;min-height:70px;padding:var(--p-2) var(--p-3);position:absolute;width:100%;z-index:100}.ChatChrome_panelClose__DbKxz{flex-shrink:0}.ChatChrome_content__5qFEi{display:flex;flex:1;flex-direction:column;min-height:0;position:relative}.ChatChrome_attachmentDropzone__OC8UI{inset:0;position:absolute;z-index:200}.ChatChrome_scrollWrapper__m4HMu{flex:1;min-height:0;position:relative}.ChatChrome_scroll__oCxoJ{align-items:flex-end;height:100%;max-height:100%;max-width:100%;padding-bottom:var(--p-2);position:absolute;width:100%;z-index:3}.ChatChrome_scrollbar__Hu0aG{right:0!important}.ChatChrome_scrollInner__K9hIy{min-height:100%;padding-top:var(--p-10)}.ChatChrome_scrollInner__K9hIy:after{content:\"\";display:block;height:170px}.ChatChrome_footer__a5Bpp{backdrop-filter:blur(30px);background-color:var(--background-alpha-800);border-top:1px solid var(--border);bottom:0;box-shadow:0 0 20px 16px var(--background);display:flex;flex-direction:column;position:absolute;width:100%;z-index:50}.ChatChrome_notice__JACIw{color:var(--muted-foreground);font-size:var(--text-xs);left:0;margin-bottom:var(--p-1);pointer-events:none;position:absolute;right:0;text-align:center;top:calc(var(--p-7)*-1)}@media (max-width:768px){.ChatChrome_notice__JACIw{font-size:10px}}.ChatChrome_loader__9-lnf{color:var(--muted-foreground);margin:var(--p-2) var(--p-6) var(--p-10)}.ChatChrome_branchRow__NMDNv{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--p-6);padding:0 var(--p-6);width:100%}.ChatChrome_branchBtnWrap__aOSVP{display:inline-flex;vertical-align:middle}";
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatChrome_root__oh4Ay{border-radius:var(--p-4);display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;position:relative}.ChatChrome_chatResizeHandle__epfiT{background-color:var(--page-color);border-radius:2.5px;height:calc(100vh + 200px);left:0;opacity:0;position:absolute;right:auto;top:-200px;touch-action:none;transition:opacity .15s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:5px;z-index:30}.ChatChrome_chatResizeHandle__epfiT:before{left:0;right:auto}.ChatChrome_panelHeader__Hkfit{align-items:center;display:flex;flex-shrink:0;justify-content:flex-end;min-height:70px;padding:var(--p-2) var(--p-3);position:absolute;width:100%;z-index:100}.ChatChrome_panelClose__DbKxz{flex-shrink:0}.ChatChrome_content__5qFEi{display:flex;flex:1;flex-direction:column;min-height:0;position:relative}.ChatChrome_attachmentDropzone__OC8UI{inset:0;position:absolute;z-index:200}.ChatChrome_scrollWrapper__m4HMu{flex:1;min-height:0;position:relative}.ChatChrome_scroll__oCxoJ{align-items:flex-end;height:100%;max-height:100%;max-width:100%;padding-bottom:var(--p-2);position:absolute;width:100%;z-index:3}.ChatChrome_scrollbar__Hu0aG{right:0!important}.ChatChrome_scrollInner__K9hIy{min-height:100%;padding-top:var(--p-10)}.ChatChrome_scrollInner__K9hIy:after{content:\"\";display:block;height:260px}.ChatChrome_footer__a5Bpp{backdrop-filter:blur(30px);background-color:var(--background-alpha-800);border-top:1px solid var(--border);bottom:0;box-shadow:0 0 20px 16px var(--background);display:flex;flex-direction:column;position:absolute;width:100%;z-index:50}.ChatChrome_notice__JACIw{color:var(--muted-foreground);font-size:var(--text-xs);left:0;margin-bottom:var(--p-1);pointer-events:none;position:absolute;right:0;text-align:center;top:calc(var(--p-7)*-1)}@media (max-width:768px){.ChatChrome_notice__JACIw{font-size:10px}}.ChatChrome_loader__9-lnf{color:var(--muted-foreground);margin:var(--p-2) var(--p-6) var(--p-10)}.ChatChrome_branchRow__NMDNv{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--p-6);padding:0 var(--p-6);width:100%}.ChatChrome_branchBtnWrap__aOSVP{display:inline-flex;vertical-align:middle}";
 var S = {"root":"ChatChrome_root__oh4Ay","chatResizeHandle":"ChatChrome_chatResizeHandle__epfiT","panelHeader":"ChatChrome_panelHeader__Hkfit","panelClose":"ChatChrome_panelClose__DbKxz","content":"ChatChrome_content__5qFEi","attachmentDropzone":"ChatChrome_attachmentDropzone__OC8UI","scrollWrapper":"ChatChrome_scrollWrapper__m4HMu","scroll":"ChatChrome_scroll__oCxoJ","scrollbar":"ChatChrome_scrollbar__Hu0aG","scrollInner":"ChatChrome_scrollInner__K9hIy","footer":"ChatChrome_footer__a5Bpp","notice":"ChatChrome_notice__JACIw","loader":"ChatChrome_loader__9-lnf","branchRow":"ChatChrome_branchRow__NMDNv","branchBtnWrap":"ChatChrome_branchBtnWrap__aOSVP"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/Renamer/Renamer.js

@@ -45,17 +45,18 @@ function Renamer({ value = '', onInput, onChange, children, className, placehold
         setName(value);
         setIsRenaming(true);
     }, [value]);
-    const sizeMap = {
+    const inputSizeMap = {
         sm: 'sm',
         md: 'md',
-        lg: 'lg',
+        // lg typography comes from Renamer `.size-lg`; avoid Input size-lg (text-base).
+        lg: 'md',
     };
     const buttonSizeMap = {
         sm: 'sm',
         md: 'md',
         lg: 'lg',
     };
-    return (jsx("div", { className: cn(S.root, !value && S.empty, className), onKeyDown: onKeyDown, children: isRenaming ? (jsx(Input, { className: S.input, autoFocus: !isMobile, variant: "clean", size: sizeMap[size], placeholder: placeholder, value: name, onChange: handleInputChange, onBlur: handleBlur, onKeyDown: onKeyDown })) : (jsxs(Fragment, { children: [jsx("span", { className: S.value, children: children }), jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { className: S.button, variant: "ghost", onPointerDown: e => {
+    return (jsx("div", { className: cn(S.root, S[`size-${size}`], !value && S.empty, className), onKeyDown: onKeyDown, children: isRenaming ? (jsx(Input, { className: S.input, autoFocus: !isMobile, variant: "clean", size: inputSizeMap[size], placeholder: placeholder, value: name, onChange: handleInputChange, onBlur: handleBlur, onKeyDown: onKeyDown })) : (jsxs(Fragment, { children: [jsx("span", { className: S.value, children: children }), jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { className: S.button, variant: "ghost", onPointerDown: e => {
                                     e.preventDefault();
                                     e.stopPropagation();
                                 }, onClick: e => {

package/dist/esm/components/ui/Renamer/Renamer.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Renamer_root__26OvT{align-items:center;display:flex}.Renamer_value__G8b1D{padding-right:var(--p-2)}.Renamer_input__KRnGn label{border-radius:var(--p-2)!important;font-size:18px!important}.Renamer_empty__A7xx1 .Renamer_input__KRnGn label{background-color:var(--accent)/.1}.Renamer_button__jKMLc{opacity:.5;padding-left:0;transition:opacity .2s ease-out}.Renamer_root__26OvT:hover .Renamer_button__jKMLc{opacity:1}";
-var S = {"root":"Renamer_root__26OvT","value":"Renamer_value__G8b1D","input":"Renamer_input__KRnGn","empty":"Renamer_empty__A7xx1","button":"Renamer_button__jKMLc"};
+var css_248z = ".Renamer_root__26OvT{align-items:center;display:flex}.Renamer_value__G8b1D{padding-right:var(--p-2)}.Renamer_size-lg__dfVhW.Renamer_root__26OvT .Renamer_input__KRnGn,.Renamer_size-lg__dfVhW.Renamer_root__26OvT .Renamer_value__G8b1D{color:var(--foreground);font-family:var(--font-family-heading);font-size:var(--text-2xl);font-weight:300;line-height:var(--text-2xl)}.Renamer_size-lg__dfVhW.Renamer_root__26OvT .Renamer_input__KRnGn{border-radius:var(--p-4);box-shadow:0 0 0 1px var(--border);height:auto;min-height:var(--text-2xl);padding:4px 12px 4px 0}.Renamer_empty__A7xx1.Renamer_size-lg__dfVhW.Renamer_root__26OvT .Renamer_input__KRnGn{background-color:var(--accent)/.1}.Renamer_button__jKMLc{opacity:.5;padding-left:0;transition:opacity .2s ease-out}.Renamer_root__26OvT:hover .Renamer_button__jKMLc{opacity:1}";
+var S = {"root":"Renamer_root__26OvT","value":"Renamer_value__G8b1D","size-lg":"Renamer_size-lg__dfVhW","input":"Renamer_input__KRnGn","empty":"Renamer_empty__A7xx1","button":"Renamer_button__jKMLc"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/WorkspaceAppSwitcher/WorkspaceAppSwitcher.js

@@ -12,12 +12,23 @@ import S from './WorkspaceAppSwitcher.styl.js';
 function entryKey(entry) {
     return entry.id;
 }
-function IconTile({ iconKey, accentMuted, accent, }) {
-    const IconComponent = WORKSPACE_APP_ICONS[iconKey];
+function renderIconContent(icon, iconKey) {
+    if (icon != null) {
+        return (jsx("span", { className: S.icon, "aria-hidden": true, children: icon }));
+    }
+    if (iconKey != null) {
+        const IconComponent = WORKSPACE_APP_ICONS[iconKey];
+        if (IconComponent) {
+            return jsx(IconComponent, { className: S.icon, "aria-hidden": true });
+        }
+    }
+    return null;
+}
+function IconTile({ icon, iconKey, accentMuted, accent, }) {
     return (jsx("span", { className: S.iconTile, style: {
             '--bg-color': accentMuted,
             '--fg-color': accent,
-        }, children: jsx(IconComponent, { className: S.icon, "aria-hidden": true }) }));
+        }, children: renderIconContent(icon, iconKey) }));
 }
 function useResolvedApps(appsStorageKey, defaultApps) {
     const [apps, setApps] = useState(() => {
@@ -51,11 +62,11 @@ function WorkspaceAppSwitcher({ pathname, onNavigate, authenticated = true, defa
     if (!displayApp) {
         return null;
     }
-    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", className: S.trigger, "aria-label": "Select workspace app", children: [jsx(IconTile, { iconKey: displayApp.iconKey, accentMuted: displayApp.accentMuted, accent: displayApp.accent }), jsxs("span", { className: S.textCol, children: [jsx("span", { className: S.name, children: displayApp.displayName }), jsx("span", { className: S.sub, children: displayApp.subtitle })] }), jsx(ChevronDown, { className: S.chevron, size: 12, "aria-hidden": true })] }) }), jsx(DropdownMenuContent, { className: S.menuContent, align: "start", sideOffset: 8, elevation: "md", children: apps.map(entry => {
+    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", className: S.trigger, "aria-label": "Select workspace app", children: [jsx(IconTile, { icon: displayApp.icon, iconKey: displayApp.iconKey, accentMuted: displayApp.accentMuted, accent: displayApp.accent }), jsxs("span", { className: S.textCol, children: [jsx("span", { className: S.name, children: displayApp.displayName }), jsx("span", { className: S.sub, children: displayApp.subtitle })] }), jsx(ChevronDown, { className: S.chevron, size: 12, "aria-hidden": true })] }) }), jsx(DropdownMenuContent, { className: S.menuContent, align: "start", sideOffset: 8, elevation: "md", children: apps.map(entry => {
                     const active = current != null ? entryKey(entry) === entryKey(current) : false;
                     return (jsxs(DropdownMenuItem, { className: cn(S.item, active && S.itemActive), onSelect: () => {
                             onNavigate(entry.href);
-                        }, children: [jsx(IconTile, { iconKey: entry.iconKey, accentMuted: entry.accentMuted, accent: entry.accent }), jsxs("span", { className: S.textCol, children: [jsx("span", { className: S.name, children: entry.displayName }), jsx("span", { className: S.sub, children: entry.subtitle })] })] }, entry.id));
+                        }, children: [jsx(IconTile, { icon: entry.icon, iconKey: entry.iconKey, accentMuted: entry.accentMuted, accent: entry.accent }), jsxs("span", { className: S.textCol, children: [jsx("span", { className: S.name, children: entry.displayName }), jsx("span", { className: S.sub, children: entry.subtitle })] })] }, entry.id));
                 }) })] }));
 }
 

package/dist/esm/components/ui/WorkspaceAppSwitcher/WorkspaceAppSwitcher.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.WorkspaceAppSwitcher_trigger__s6qYT{align-items:center;background:transparent;border:none;border-radius:12px;color:inherit;cursor:pointer;display:flex;font:inherit;gap:var(--p-2);height:auto;margin-left:var(--p-3)!important;max-width:320px;padding:var(--p-1)!important;padding-right:var(--p-3)!important;text-align:left}.WorkspaceAppSwitcher_trigger__s6qYT:hover{background-color:var(--muted)}@media (max-width:768px){.WorkspaceAppSwitcher_trigger__s6qYT{gap:0;margin-left:0!important;max-width:none;padding-right:var(--p-1)!important}.WorkspaceAppSwitcher_trigger__s6qYT .WorkspaceAppSwitcher_chevron__7kAqO,.WorkspaceAppSwitcher_trigger__s6qYT .WorkspaceAppSwitcher_textCol__K1gfI{display:none}}.WorkspaceAppSwitcher_iconTile__tVDr8{align-items:center;border-radius:10px;color:var(--fg-color);display:flex;flex-shrink:0;height:40px;justify-content:center;position:relative;width:40px}.WorkspaceAppSwitcher_iconTile__tVDr8:after,.WorkspaceAppSwitcher_iconTile__tVDr8:before{border-radius:inherit;content:\"\";display:block;height:100%;position:absolute;width:100%}.WorkspaceAppSwitcher_iconTile__tVDr8:before{background-color:var(--background)}.WorkspaceAppSwitcher_iconTile__tVDr8:after{background-color:var(--bg-color)}.WorkspaceAppSwitcher_icon__Jgw14{color:var(--fg-color)!important;height:22px!important;width:22px!important;z-index:1}.WorkspaceAppSwitcher_textCol__K1gfI{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.WorkspaceAppSwitcher_name__ewMYP{color:var(--foreground);font-size:var(--text-sm);font-weight:600}.WorkspaceAppSwitcher_name__ewMYP,.WorkspaceAppSwitcher_sub__b7w1p{line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.WorkspaceAppSwitcher_sub__b7w1p{color:var(--muted-foreground);font-size:var(--text-xs)}.WorkspaceAppSwitcher_menuContent__4-UNY{max-width:360px;min-width:280px}.WorkspaceAppSwitcher_item__nnufY{align-items:center;cursor:pointer;display:flex;gap:var(--p-3);outline:none;padding:var(--p-3)}.WorkspaceAppSwitcher_itemActive__3mPlO{background-color:var(--muted)}";
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.WorkspaceAppSwitcher_trigger__s6qYT{align-items:center;background:transparent;border:none;border-radius:12px;color:inherit;cursor:pointer;display:flex;font:inherit;gap:var(--p-2);height:auto;margin-left:var(--p-3)!important;max-width:320px;padding:var(--p-1)!important;padding-right:var(--p-3)!important;text-align:left}.WorkspaceAppSwitcher_trigger__s6qYT:hover{background-color:var(--muted)}@media (max-width:768px){.WorkspaceAppSwitcher_trigger__s6qYT{gap:0;margin-left:0!important;max-width:none;padding-right:var(--p-1)!important}.WorkspaceAppSwitcher_trigger__s6qYT .WorkspaceAppSwitcher_chevron__7kAqO,.WorkspaceAppSwitcher_trigger__s6qYT .WorkspaceAppSwitcher_textCol__K1gfI{display:none}}.WorkspaceAppSwitcher_iconTile__tVDr8{align-items:center;border-radius:10px;color:var(--fg-color);display:flex;flex-shrink:0;height:40px;justify-content:center;position:relative;width:40px}.WorkspaceAppSwitcher_iconTile__tVDr8:after,.WorkspaceAppSwitcher_iconTile__tVDr8:before{border-radius:inherit;content:\"\";display:block;height:100%;position:absolute;width:100%}.WorkspaceAppSwitcher_iconTile__tVDr8:before{background-color:var(--background)}.WorkspaceAppSwitcher_iconTile__tVDr8:after{background-color:var(--bg-color)}.WorkspaceAppSwitcher_icon__Jgw14{align-items:center;display:flex;justify-content:center;z-index:1}.WorkspaceAppSwitcher_icon__Jgw14,.WorkspaceAppSwitcher_icon__Jgw14 svg{color:var(--fg-color)!important;height:22px!important;width:22px!important}.WorkspaceAppSwitcher_textCol__K1gfI{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.WorkspaceAppSwitcher_name__ewMYP{color:var(--foreground);font-size:var(--text-sm);font-weight:600}.WorkspaceAppSwitcher_name__ewMYP,.WorkspaceAppSwitcher_sub__b7w1p{line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.WorkspaceAppSwitcher_sub__b7w1p{color:var(--muted-foreground);font-size:var(--text-xs)}.WorkspaceAppSwitcher_menuContent__4-UNY{max-width:360px;min-width:280px}.WorkspaceAppSwitcher_item__nnufY{align-items:center;cursor:pointer;display:flex;gap:var(--p-3);outline:none;padding:var(--p-3)}.WorkspaceAppSwitcher_itemActive__3mPlO{background-color:var(--muted)}";
 var S = {"trigger":"WorkspaceAppSwitcher_trigger__s6qYT","textCol":"WorkspaceAppSwitcher_textCol__K1gfI","chevron":"WorkspaceAppSwitcher_chevron__7kAqO","iconTile":"WorkspaceAppSwitcher_iconTile__tVDr8","icon":"WorkspaceAppSwitcher_icon__Jgw14","name":"WorkspaceAppSwitcher_name__ewMYP","sub":"WorkspaceAppSwitcher_sub__b7w1p","menuContent":"WorkspaceAppSwitcher_menuContent__4-UNY","item":"WorkspaceAppSwitcher_item__nnufY","itemActive":"WorkspaceAppSwitcher_itemActive__3mPlO"};
 styleInject(css_248z);
 

package/dist/esm/types/src/components/ui/WorkspaceAppSwitcher/workspaceApp.types.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { WorkspaceAppIconKey } from './workspaceAppIcons';
 /** Path segment for slug apps: pathname matches `/apps/{id}` */
 export declare const WORKSPACE_APP_SLUG_BASE_PATH = "/apps";
@@ -7,7 +8,10 @@ export type WorkspaceAppEntry = {
     id: string;
     displayName: string;
     subtitle: string;
-    iconKey: WorkspaceAppIconKey;
+    /** Custom icon for display; not persisted to localStorage. */
+    icon?: ReactNode;
+    /** Built-in icon lookup when `icon` is omitted (required for localStorage entries). */
+    iconKey?: WorkspaceAppIconKey;
     accent: string;
     accentMuted: string;
     href: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.70",
+  "version": "1.3.72",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chat/ChatChrome/ChatChrome.styl

@@ -88,7 +88,7 @@
   &::after
     content ''
     display block
-    height 170px
+    height 260px
 
 
 // ---------------

package/src/components/ui/Renamer/Renamer.styl

@@ -5,12 +5,28 @@
 .value
   padding-right var(--p-2)
 
-.input
-  label
-    font-size 18px !important
-    border-radius var(--p-2) !important
+// Matches PageHeader .title h1 typography (page title context).
+.size-lg.root
+  .value
+    font-family var(--font-family-heading)
+    font-weight 300
+    font-size var(--text-2xl)
+    line-height var(--text-2xl)
+    color var(--foreground)
 
-.empty .input label
+  .input
+    font-family var(--font-family-heading)
+    font-weight 300
+    font-size var(--text-2xl)
+    line-height var(--text-2xl)
+    color var(--foreground)
+    height auto
+    min-height var(--text-2xl)
+    padding 4px 12px 4px 0
+    border-radius var(--p-4)
+    box-shadow 0 0 0 1px var(--border)
+
+.empty.size-lg.root .input
   background-color var(--accent) / 0.1
 
 .button

package/src/components/ui/Renamer/Renamer.styl.d.ts

@@ -5,6 +5,7 @@ interface CssExports {
   'empty': string;
   'input': string;
   'root': string;
+  'size-lg': string;
   'value': string;
 }
 export const cssExports: CssExports;

package/src/components/ui/Renamer/Renamer.tsx

@@ -74,10 +74,11 @@ export function Renamer({
     setIsRenaming(true);
   }, [value]);
 
-  const sizeMap = {
+  const inputSizeMap = {
     sm: 'sm' as const,
     md: 'md' as const,
-    lg: 'lg' as const,
+    // lg typography comes from Renamer `.size-lg`; avoid Input size-lg (text-base).
+    lg: 'md' as const,
   };
 
   const buttonSizeMap = {
@@ -88,7 +89,7 @@ export function Renamer({
 
   return (
     <div
-      className={cn(S.root, !value && S.empty, className)}
+      className={cn(S.root, S[`size-${size}`], !value && S.empty, className)}
       onKeyDown={onKeyDown}
     >
       {isRenaming ? (
@@ -96,7 +97,7 @@ export function Renamer({
           className={S.input}
           autoFocus={!isMobile}
           variant="clean"
-          size={sizeMap[size]}
+          size={inputSizeMap[size]}
           placeholder={placeholder}
           value={name}
           onChange={handleInputChange}

package/src/components/ui/WorkspaceAppSwitcher/WorkspaceAppSwitcher.styl

@@ -59,10 +59,18 @@
 
 .icon
   z-index 1
+  display flex
+  align-items center
+  justify-content center
   width 22px !important
   height 22px !important
   color var(--fg-color) !important
 
+  :global(svg)
+    width 22px !important
+    height 22px !important
+    color var(--fg-color) !important
+
 .textCol
   display flex
   flex-direction column

package/src/components/ui/WorkspaceAppSwitcher/WorkspaceAppSwitcher.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import { useEffect, useState } from 'react';
 
 import { Button } from '#uilib/components/ui/Button/Button';
@@ -32,16 +32,37 @@ function entryKey(entry: WorkspaceAppEntry): string {
   return entry.id;
 }
 
+function renderIconContent(
+  icon: ReactNode | undefined,
+  iconKey: WorkspaceAppEntry['iconKey'],
+): ReactNode {
+  if (icon != null) {
+    return (
+      <span className={S.icon} aria-hidden>
+        {icon}
+      </span>
+    );
+  }
+  if (iconKey != null) {
+    const IconComponent = WORKSPACE_APP_ICONS[iconKey];
+    if (IconComponent) {
+      return <IconComponent className={S.icon} aria-hidden />;
+    }
+  }
+  return null;
+}
+
 function IconTile({
+  icon,
   iconKey,
   accentMuted,
   accent,
 }: {
-  iconKey: WorkspaceAppEntry['iconKey'];
+  icon?: ReactNode;
+  iconKey?: WorkspaceAppEntry['iconKey'];
   accentMuted: string;
   accent: string;
 }) {
-  const IconComponent = WORKSPACE_APP_ICONS[iconKey];
   return (
     <span
       className={S.iconTile}
@@ -52,7 +73,7 @@ function IconTile({
         } as CSSProperties
       }
     >
-      <IconComponent className={S.icon} aria-hidden />
+      {renderIconContent(icon, iconKey)}
     </span>
   );
 }
@@ -116,6 +137,7 @@ export function WorkspaceAppSwitcher({
           aria-label="Select workspace app"
         >
           <IconTile
+            icon={displayApp.icon}
             iconKey={displayApp.iconKey}
             accentMuted={displayApp.accentMuted}
             accent={displayApp.accent}
@@ -146,6 +168,7 @@ export function WorkspaceAppSwitcher({
               }}
             >
               <IconTile
+                icon={entry.icon}
                 iconKey={entry.iconKey}
                 accentMuted={entry.accentMuted}
                 accent={entry.accent}

package/src/components/ui/WorkspaceAppSwitcher/workspaceApp.types.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 import type { WorkspaceAppIconKey } from './workspaceAppIcons';
 
 /** Path segment for slug apps: pathname matches `/apps/{id}` */
@@ -9,7 +11,10 @@ export type WorkspaceAppEntry = {
   id: string;
   displayName: string;
   subtitle: string;
-  iconKey: WorkspaceAppIconKey;
+  /** Custom icon for display; not persisted to localStorage. */
+  icon?: ReactNode;
+  /** Built-in icon lookup when `icon` is omitted (required for localStorage entries). */
+  iconKey?: WorkspaceAppIconKey;
   accent: string;
   accentMuted: string;
   href: string;