@sybilion/uilib 1.3.91 → 1.3.92

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

@@ -12,6 +12,29 @@ import S from './WorkspaceAppSwitcher.styl.js';
 function entryKey(entry) {
     return entry.id;
 }
+function subtitleClassName(entry) {
+    return cn(S.sub, entry.subtitleTone === 'experimental' && S.subExperimental);
+}
+/** Overlay native app labels from host registry onto cached localStorage entries. */
+function mergeDefaultAppsMetadata(apps, defaultApps) {
+    if (!defaultApps?.length) {
+        return apps;
+    }
+    const defaultsById = new Map(defaultApps.map(entry => [entry.id, entry]));
+    return apps.map(entry => {
+        const defaults = defaultsById.get(entry.id);
+        if (!defaults) {
+            return entry;
+        }
+        return {
+            ...entry,
+            displayName: defaults.displayName,
+            subtitle: defaults.subtitle,
+            subtitleTone: defaults.subtitleTone,
+            icon: defaults.icon ?? entry.icon,
+        };
+    });
+}
 function renderIconContent(icon, iconKey) {
     if (icon != null) {
         return (jsx("span", { className: S.icon, "aria-hidden": true, children: icon }));
@@ -37,7 +60,7 @@ function useResolvedApps(appsStorageKey, defaultApps) {
             appsStorageKey !== '') {
             const fromLs = readWorkspaceAppsFromLocalStorage(appsStorageKey);
             if (fromLs != null && fromLs.length > 0) {
-                return fromLs;
+                return mergeDefaultAppsMetadata(fromLs, defaultApps);
             }
         }
         return defaultApps ?? [];
@@ -48,7 +71,9 @@ function useResolvedApps(appsStorageKey, defaultApps) {
             return;
         }
         const fromLs = readWorkspaceAppsFromLocalStorage(appsStorageKey);
-        setApps(fromLs != null && fromLs.length > 0 ? fromLs : (defaultApps ?? []));
+        setApps(fromLs != null && fromLs.length > 0
+            ? mergeDefaultAppsMetadata(fromLs, defaultApps)
+            : (defaultApps ?? []));
     }, [appsStorageKey, defaultApps]);
     return apps;
 }
@@ -62,11 +87,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, { 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 => {
+    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: subtitleClassName(displayApp), 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, { 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));
+                        }, 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: subtitleClassName(entry), children: entry.subtitle })] })] }, entry.id));
                 }) })] }));
 }
 

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

@@ -1,7 +1,7 @@
 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{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"};
+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_sub__b7w1p.WorkspaceAppSwitcher_subExperimental__-zHVr{color:var(--sb-red-400);opacity:.8}.dark .WorkspaceAppSwitcher_sub__b7w1p.WorkspaceAppSwitcher_subExperimental__-zHVr{color:var(--sb-red-400)}.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","subExperimental":"WorkspaceAppSwitcher_subExperimental__-zHVr","menuContent":"WorkspaceAppSwitcher_menuContent__4-UNY","item":"WorkspaceAppSwitcher_item__nnufY","itemActive":"WorkspaceAppSwitcher_itemActive__3mPlO"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -1,5 +1,8 @@
 import { isWorkspaceAppIconKey } from './workspaceAppIcons.js';
 
+function isWorkspaceAppSubtitleTone(v) {
+    return v === 'default' || v === 'experimental';
+}
 function parseEntry(raw) {
     if (!raw || typeof raw !== 'object') {
         return null;
@@ -12,6 +15,7 @@ function parseEntry(raw) {
     const accent = o.accent;
     const accentMuted = o.accentMuted;
     const href = o.href;
+    const subtitleToneRaw = o.subtitleTone;
     const prefixesRaw = o.matchPathPrefixes;
     if (typeof idRaw !== 'string' ||
         !idRaw ||
@@ -35,7 +39,7 @@ function parseEntry(raw) {
             matchPathPrefixes = prefixes;
         }
     }
-    return {
+    const entry = {
         id: idRaw,
         displayName,
         subtitle,
@@ -45,6 +49,10 @@ function parseEntry(raw) {
         href,
         matchPathPrefixes,
     };
+    if (subtitleToneRaw != null && isWorkspaceAppSubtitleTone(subtitleToneRaw)) {
+        entry.subtitleTone = subtitleToneRaw;
+    }
+    return entry;
 }
 /**
  * Read validated workspace apps JSON from localStorage; returns null if missing or invalid.

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

@@ -1,5 +1,5 @@
 export { WorkspaceAppSwitcher, type WorkspaceAppSwitcherProps, } from './WorkspaceAppSwitcher';
-export type { WorkspaceAppEntry } from './workspaceApp.types';
+export type { WorkspaceAppEntry, WorkspaceAppSubtitleTone, } from './workspaceApp.types';
 export { WORKSPACE_APP_SLUG_BASE_PATH } from './workspaceApp.types';
 export { WORKSPACE_APPS_LS_KEY } from './workspaceAppsConstants';
 export { readWorkspaceAppsFromLocalStorage, writeWorkspaceAppsToLocalStorage, } from './workspaceAppsLocalStorage';

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

@@ -2,12 +2,15 @@ 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";
+export type WorkspaceAppSubtitleTone = 'default' | 'experimental';
 /** One surface in the workspace app switcher (serializable for localStorage). */
 export type WorkspaceAppEntry = {
     /** Slug (e.g. `my-custom-app` → `https://sybilion.io/apps/my-custom-app` via `href`). */
     id: string;
     displayName: string;
     subtitle: string;
+    /** Optional subtitle color tone; defaults to muted foreground. */
+    subtitleTone?: WorkspaceAppSubtitleTone;
     /** Custom icon for display; not persisted to localStorage. */
     icon?: ReactNode;
     /** Built-in icon lookup when `icon` is omitted (required for localStorage entries). */

package/package.json

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

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

@@ -95,6 +95,13 @@
   overflow hidden
   text-overflow ellipsis
 
+  &.subExperimental
+    opacity .8
+    color var(--sb-red-400)
+
+    :global(.dark) &
+      color var(--sb-red-400)
+
 .menuContent
   min-width 280px
   max-width 360px

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

@@ -9,6 +9,7 @@ interface CssExports {
   'menuContent': string;
   'name': string;
   'sub': string;
+  'subExperimental': string;
   'textCol': string;
   'trigger': string;
 }

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

@@ -32,6 +32,34 @@ function entryKey(entry: WorkspaceAppEntry): string {
   return entry.id;
 }
 
+function subtitleClassName(entry: WorkspaceAppEntry): string {
+  return cn(S.sub, entry.subtitleTone === 'experimental' && S.subExperimental);
+}
+
+/** Overlay native app labels from host registry onto cached localStorage entries. */
+function mergeDefaultAppsMetadata(
+  apps: WorkspaceAppEntry[],
+  defaultApps: WorkspaceAppEntry[] | undefined,
+): WorkspaceAppEntry[] {
+  if (!defaultApps?.length) {
+    return apps;
+  }
+  const defaultsById = new Map(defaultApps.map(entry => [entry.id, entry]));
+  return apps.map(entry => {
+    const defaults = defaultsById.get(entry.id);
+    if (!defaults) {
+      return entry;
+    }
+    return {
+      ...entry,
+      displayName: defaults.displayName,
+      subtitle: defaults.subtitle,
+      subtitleTone: defaults.subtitleTone,
+      icon: defaults.icon ?? entry.icon,
+    };
+  });
+}
+
 function renderIconContent(
   icon: ReactNode | undefined,
   iconKey: WorkspaceAppEntry['iconKey'],
@@ -90,7 +118,7 @@ function useResolvedApps(
     ) {
       const fromLs = readWorkspaceAppsFromLocalStorage(appsStorageKey);
       if (fromLs != null && fromLs.length > 0) {
-        return fromLs;
+        return mergeDefaultAppsMetadata(fromLs, defaultApps);
       }
     }
     return defaultApps ?? [];
@@ -102,7 +130,11 @@ function useResolvedApps(
       return;
     }
     const fromLs = readWorkspaceAppsFromLocalStorage(appsStorageKey);
-    setApps(fromLs != null && fromLs.length > 0 ? fromLs : (defaultApps ?? []));
+    setApps(
+      fromLs != null && fromLs.length > 0
+        ? mergeDefaultAppsMetadata(fromLs, defaultApps)
+        : (defaultApps ?? []),
+    );
   }, [appsStorageKey, defaultApps]);
 
   return apps;
@@ -144,7 +176,9 @@ export function WorkspaceAppSwitcher({
           />
           <span className={S.textCol}>
             <span className={S.name}>{displayApp.displayName}</span>
-            <span className={S.sub}>{displayApp.subtitle}</span>
+            <span className={subtitleClassName(displayApp)}>
+              {displayApp.subtitle}
+            </span>
           </span>
           <ChevronDown className={S.chevron} size={12} aria-hidden />
         </Button>
@@ -175,7 +209,9 @@ export function WorkspaceAppSwitcher({
               />
               <span className={S.textCol}>
                 <span className={S.name}>{entry.displayName}</span>
-                <span className={S.sub}>{entry.subtitle}</span>
+                <span className={subtitleClassName(entry)}>
+                  {entry.subtitle}
+                </span>
               </span>
             </DropdownMenuItem>
           );

package/src/components/ui/WorkspaceAppSwitcher/index.ts

@@ -2,7 +2,10 @@ export {
   WorkspaceAppSwitcher,
   type WorkspaceAppSwitcherProps,
 } from './WorkspaceAppSwitcher';
-export type { WorkspaceAppEntry } from './workspaceApp.types';
+export type {
+  WorkspaceAppEntry,
+  WorkspaceAppSubtitleTone,
+} from './workspaceApp.types';
 export { WORKSPACE_APP_SLUG_BASE_PATH } from './workspaceApp.types';
 export { WORKSPACE_APPS_LS_KEY } from './workspaceAppsConstants';
 export {

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

@@ -5,12 +5,16 @@ import type { WorkspaceAppIconKey } from './workspaceAppIcons';
 /** Path segment for slug apps: pathname matches `/apps/{id}` */
 export const WORKSPACE_APP_SLUG_BASE_PATH = '/apps';
 
+export type WorkspaceAppSubtitleTone = 'default' | 'experimental';
+
 /** One surface in the workspace app switcher (serializable for localStorage). */
 export type WorkspaceAppEntry = {
   /** Slug (e.g. `my-custom-app` → `https://sybilion.io/apps/my-custom-app` via `href`). */
   id: string;
   displayName: string;
   subtitle: string;
+  /** Optional subtitle color tone; defaults to muted foreground. */
+  subtitleTone?: WorkspaceAppSubtitleTone;
   /** Custom icon for display; not persisted to localStorage. */
   icon?: ReactNode;
   /** Built-in icon lookup when `icon` is omitted (required for localStorage entries). */

package/src/components/ui/WorkspaceAppSwitcher/workspaceAppsLocalStorage.ts

@@ -1,6 +1,13 @@
-import type { WorkspaceAppEntry } from './workspaceApp.types';
+import type {
+  WorkspaceAppEntry,
+  WorkspaceAppSubtitleTone,
+} from './workspaceApp.types';
 import { isWorkspaceAppIconKey } from './workspaceAppIcons';
 
+function isWorkspaceAppSubtitleTone(v: unknown): v is WorkspaceAppSubtitleTone {
+  return v === 'default' || v === 'experimental';
+}
+
 function parseEntry(raw: unknown): WorkspaceAppEntry | null {
   if (!raw || typeof raw !== 'object') {
     return null;
@@ -13,6 +20,7 @@ function parseEntry(raw: unknown): WorkspaceAppEntry | null {
   const accent = o.accent;
   const accentMuted = o.accentMuted;
   const href = o.href;
+  const subtitleToneRaw = o.subtitleTone;
   const prefixesRaw = o.matchPathPrefixes;
 
   if (
@@ -43,7 +51,7 @@ function parseEntry(raw: unknown): WorkspaceAppEntry | null {
     }
   }
 
-  return {
+  const entry: WorkspaceAppEntry = {
     id: idRaw,
     displayName,
     subtitle,
@@ -53,6 +61,12 @@ function parseEntry(raw: unknown): WorkspaceAppEntry | null {
     href,
     matchPathPrefixes,
   };
+
+  if (subtitleToneRaw != null && isWorkspaceAppSubtitleTone(subtitleToneRaw)) {
+    entry.subtitleTone = subtitleToneRaw;
+  }
+
+  return entry;
 }
 
 /**