@sybilion/uilib 1.3.91 → 1.3.93

package/dist/esm/components/ui/Page/PageTabs/PageTabs.js

@@ -15,8 +15,8 @@ function hasTabPanelContent(content) {
         return false;
     return true;
 }
-function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant = 'link', ...props }) {
-    return (jsxs(Tabs, { className: cn(S.root, S[`variant-${variant}`], className), variant: variant, ...props, children: [jsx(TabsList, { ...tabsListProps, className: cn(S.list, tabsListProps?.withPaddings && S.withPaddings), children: jsx(PageXScroll, { size: "sm", scrollbarClassName: cn(S.scrollbar, scrollbarClassName), innerClassName: cn(innerClassName, S.listInner), children: items.map((item, index) => (jsx(TabsTrigger, { value: item.value, children: item.label }, item.key ?? `${item.value}-${index}`))) }) }), items.map(item => hasTabPanelContent(item.content) ? (jsx(TabsContent, { value: item.value, className: cn(S.content, contentClassName), children: item.content }, item.value)) : null)] }));
+function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant = 'link', scrollProps, ...props }) {
+    return (jsxs(Tabs, { className: cn(S.root, S[`variant-${variant}`], className), variant: variant, ...props, children: [jsx(TabsList, { ...tabsListProps, className: cn(S.list, tabsListProps?.withPaddings && S.withPaddings), children: jsx(PageXScroll, { size: "sm", ...scrollProps, scrollbarClassName: cn(S.scrollbar, scrollbarClassName), innerClassName: cn(S.listInner, innerClassName), children: items.map((item, index) => (jsx(TabsTrigger, { value: item.value, children: item.label }, item.key ?? `${item.value}-${index}`))) }) }), items.map(item => hasTabPanelContent(item.content) ? (jsx(TabsContent, { value: item.value, className: cn(S.content, contentClassName), children: item.content }, item.value)) : null)] }));
 }
 
 export { PageTabs };

package/dist/esm/components/ui/Page/PageXScroll/PageXScroll.js

@@ -1,15 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
-import cn from 'classnames';
 import { useState, useEffect } from 'react';
-import { Scroll } from '@homecode/ui';
 import S from './PageXScroll.styl.js';
+import { Scroll } from '@homecode/ui';
+import cn from 'classnames';
 
 const scrollSizeMap = {
     sm: 's',
     md: 'm',
     lg: 'l',
 };
-function PageXScroll({ children, className, innerClassName, scrollbarClassName, fullWidth = false, size = 'md', ...props }) {
+function PageXScroll({ children, className, innerClassName, scrollbarClassName, fullWidth = false, size = 'md', scrollbarOffset, ...props }) {
     const [pageXPadding, setPageXPadding] = useState(24); // Default fallback
     useEffect(() => {
         if (typeof window !== 'undefined') {
@@ -25,8 +25,8 @@ function PageXScroll({ children, className, innerClassName, scrollbarClassName,
     }, []);
     return (jsx(Scroll, { x: true, size: scrollSizeMap[size], fadeSize: "xl", className: cn(className, S.root, fullWidth && S.fullWidth), innerClassName: cn(innerClassName, S.inner), xScrollbarClassName: scrollbarClassName, offset: {
             x: {
-                before: pageXPadding,
-                after: pageXPadding,
+                before: pageXPadding + (scrollbarOffset?.x?.before ?? 0),
+                after: pageXPadding + (scrollbarOffset?.x?.after ?? 0),
             },
         }, autoHide: true, ...props, children: children }));
 }

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/Page/PageTabs/PageTabs.d.ts

@@ -1,3 +1,4 @@
+import { PageXScrollProps } from '#uilib/components/ui/Page/PageXScroll/PageXScroll';
 import { TabsListProps, TabsProps, type TabsVariant } from '#uilib/components/ui/Tabs';
 export type PageTabsItem = {
     value: string;
@@ -6,13 +7,14 @@ export type PageTabsItem = {
     /** React list key when multiple items may share `value`. */
     key?: string;
 };
-export declare function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant, ...props }: {
+export declare function PageTabs({ className, contentClassName, innerClassName, scrollbarClassName, items, tabsListProps, variant, scrollProps, ...props }: {
     items: PageTabsItem[];
     tabsListProps?: TabsListProps & {
         fullWidth?: boolean;
         withPaddings?: boolean;
     };
     variant?: TabsVariant;
+    scrollProps?: Partial<PageXScrollProps>;
 } & TabsProps & {
     contentClassName?: string;
     innerClassName?: string;

package/dist/esm/types/src/components/ui/Page/PageXScroll/PageXScroll.d.ts

@@ -1,11 +1,16 @@
 import { Scroll } from '@homecode/ui';
-interface PageXScrollProps extends Omit<React.ComponentProps<typeof Scroll>, 'size'> {
+export interface PageXScrollProps extends Omit<React.ComponentProps<typeof Scroll>, 'size'> {
     size?: 'sm' | 'md' | 'lg';
     children: React.ReactNode;
     className?: string;
     innerClassName?: string;
     scrollbarClassName?: string;
     fullWidth?: boolean;
+    scrollbarOffset?: {
+        x?: {
+            before?: number;
+            after?: number;
+        };
+    };
 }
-export declare function PageXScroll({ children, className, innerClassName, scrollbarClassName, fullWidth, size, ...props }: PageXScrollProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function PageXScroll({ children, className, innerClassName, scrollbarClassName, fullWidth, size, scrollbarOffset, ...props }: PageXScrollProps): import("react/jsx-runtime").JSX.Element;

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.93",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Page/PageTabs/PageTabs.tsx

@@ -1,6 +1,9 @@
 import cn from 'classnames';
 
-import { PageXScroll } from '#uilib/components/ui/Page/PageXScroll/PageXScroll';
+import {
+  PageXScroll,
+  PageXScrollProps,
+} from '#uilib/components/ui/Page/PageXScroll/PageXScroll';
 import {
   Tabs,
   TabsContent,
@@ -37,6 +40,7 @@ export function PageTabs({
   items,
   tabsListProps,
   variant = 'link',
+  scrollProps,
   ...props
 }: {
   items: PageTabsItem[];
@@ -45,6 +49,7 @@ export function PageTabs({
     withPaddings?: boolean;
   };
   variant?: TabsVariant;
+  scrollProps?: Partial<PageXScrollProps>;
 } & TabsProps & {
     contentClassName?: string;
     innerClassName?: string;
@@ -62,8 +67,9 @@ export function PageTabs({
       >
         <PageXScroll
           size="sm"
+          {...scrollProps}
           scrollbarClassName={cn(S.scrollbar, scrollbarClassName)}
-          innerClassName={cn(innerClassName, S.listInner)}
+          innerClassName={cn(S.listInner, innerClassName)}
         >
           {items.map((item, index) => (
             <TabsTrigger

package/src/components/ui/Page/PageXScroll/PageXScroll.tsx

@@ -1,9 +1,8 @@
-import cn from 'classnames';
 import { useEffect, useState } from 'react';
 
-import { Scroll } from '@homecode/ui';
-
 import S from './PageXScroll.styl';
+import { Scroll } from '@homecode/ui';
+import cn from 'classnames';
 
 const scrollSizeMap = {
   sm: 's',
@@ -11,7 +10,7 @@ const scrollSizeMap = {
   lg: 'l',
 } as const;
 
-interface PageXScrollProps extends Omit<
+export interface PageXScrollProps extends Omit<
   React.ComponentProps<typeof Scroll>,
   'size'
 > {
@@ -21,6 +20,12 @@ interface PageXScrollProps extends Omit<
   innerClassName?: string;
   scrollbarClassName?: string;
   fullWidth?: boolean;
+  scrollbarOffset?: {
+    x?: {
+      before?: number;
+      after?: number;
+    };
+  };
 }
 
 export function PageXScroll({
@@ -30,6 +35,7 @@ export function PageXScroll({
   scrollbarClassName,
   fullWidth = false,
   size = 'md',
+  scrollbarOffset,
   ...props
 }: PageXScrollProps) {
   const [pageXPadding, setPageXPadding] = useState(24); // Default fallback
@@ -57,8 +63,8 @@ export function PageXScroll({
       xScrollbarClassName={scrollbarClassName}
       offset={{
         x: {
-          before: pageXPadding,
-          after: pageXPadding,
+          before: pageXPadding + (scrollbarOffset?.x?.before ?? 0),
+          after: pageXPadding + (scrollbarOffset?.x?.after ?? 0),
         },
       }}
       autoHide

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;
 }
 
 /**