@sybilion/uilib 1.2.4 → 1.2.6

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

@@ -0,0 +1,163 @@
+import cn from 'classnames';
+import type { CSSProperties } from 'react';
+import { useEffect, useState } from 'react';
+
+import { Button } from '#uilib/components/ui/Button/Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '#uilib/components/ui/DropdownMenu';
+import type { WorkspaceAppEntry } from '#uilib/components/ui/WorkspaceAppSwitcher/workspaceApp.types';
+import { WORKSPACE_APP_ICONS } from '#uilib/components/ui/WorkspaceAppSwitcher/workspaceAppIcons';
+import { findWorkspaceAppByPathname } from '#uilib/components/ui/WorkspaceAppSwitcher/workspaceAppPaths';
+import { readWorkspaceAppsFromLocalStorage } from '#uilib/components/ui/WorkspaceAppSwitcher/workspaceAppsLocalStorage';
+import { ChevronDown } from 'lucide-react';
+
+import S from './WorkspaceAppSwitcher.styl';
+
+export type WorkspaceAppSwitcherProps = {
+  pathname: string;
+  onNavigate: (href: string) => void;
+  /** When false, renders nothing (host maps from auth Loading + signed-in). */
+  authenticated?: boolean;
+  /** Fallback when localStorage missing/invalid/unset — keep referentially stable across renders where possible */
+  defaultApps?: WorkspaceAppEntry[];
+  /** When set, read apps from localStorage (`readWorkspaceAppsFromLocalStorage`). */
+  appsStorageKey?: string;
+};
+
+function entryKey(entry: WorkspaceAppEntry): string {
+  return entry.id;
+}
+
+function IconTile({
+  iconKey,
+  accentMuted,
+  accent,
+}: {
+  iconKey: WorkspaceAppEntry['iconKey'];
+  accentMuted: string;
+  accent: string;
+}) {
+  const IconComponent = WORKSPACE_APP_ICONS[iconKey];
+  return (
+    <span
+      className={S.iconTile}
+      style={
+        {
+          '--bg-color': accentMuted,
+          '--fg-color': accent,
+        } as CSSProperties
+      }
+    >
+      <IconComponent className={S.icon} aria-hidden />
+    </span>
+  );
+}
+
+function useResolvedApps(
+  appsStorageKey: string | undefined,
+  defaultApps: WorkspaceAppEntry[] | undefined,
+): WorkspaceAppEntry[] {
+  const [apps, setApps] = useState<WorkspaceAppEntry[]>(() => {
+    if (
+      typeof localStorage !== 'undefined' &&
+      appsStorageKey != null &&
+      appsStorageKey !== ''
+    ) {
+      const fromLs = readWorkspaceAppsFromLocalStorage(appsStorageKey);
+      if (fromLs != null && fromLs.length > 0) {
+        return fromLs;
+      }
+    }
+    return defaultApps ?? [];
+  });
+
+  useEffect(() => {
+    if (!appsStorageKey || typeof localStorage === 'undefined') {
+      setApps(defaultApps ?? []);
+      return;
+    }
+    const fromLs = readWorkspaceAppsFromLocalStorage(appsStorageKey);
+    setApps(fromLs != null && fromLs.length > 0 ? fromLs : (defaultApps ?? []));
+  }, [appsStorageKey, defaultApps]);
+
+  return apps;
+}
+
+export function WorkspaceAppSwitcher({
+  pathname,
+  onNavigate,
+  authenticated = true,
+  defaultApps,
+  appsStorageKey,
+}: WorkspaceAppSwitcherProps) {
+  const apps = useResolvedApps(appsStorageKey, defaultApps);
+
+  const current = findWorkspaceAppByPathname(pathname, apps);
+
+  if (!authenticated || apps.length === 0) {
+    return null;
+  }
+
+  const displayApp = current ?? apps[0];
+  if (!displayApp) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className={S.trigger}
+          aria-label="Select workspace app"
+        >
+          <IconTile
+            iconKey={displayApp.iconKey}
+            accentMuted={displayApp.accentMuted}
+            accent={displayApp.accent}
+          />
+          <span className={S.textCol}>
+            <span className={S.name}>{displayApp.displayName}</span>
+            <span className={S.sub}>{displayApp.subtitle}</span>
+          </span>
+          <ChevronDown size={12} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className={S.menuContent}
+        align="start"
+        sideOffset={8}
+        elevation="md"
+      >
+        {apps.map(entry => {
+          const active =
+            current != null ? entryKey(entry) === entryKey(current) : false;
+
+          return (
+            <DropdownMenuItem
+              key={entry.id}
+              className={cn(S.item, active && S.itemActive)}
+              onSelect={() => {
+                onNavigate(entry.href);
+              }}
+            >
+              <IconTile
+                iconKey={entry.iconKey}
+                accentMuted={entry.accentMuted}
+                accent={entry.accent}
+              />
+              <span className={S.textCol}>
+                <span className={S.name}>{entry.displayName}</span>
+                <span className={S.sub}>{entry.subtitle}</span>
+              </span>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,20 @@
+export {
+  WorkspaceAppSwitcher,
+  type WorkspaceAppSwitcherProps,
+} from './WorkspaceAppSwitcher';
+export type { WorkspaceAppEntry } from './workspaceApp.types';
+export { WORKSPACE_APP_SLUG_BASE_PATH } from './workspaceApp.types';
+export { WORKSPACE_APPS_LS_KEY } from './workspaceAppsConstants';
+export {
+  readWorkspaceAppsFromLocalStorage,
+  writeWorkspaceAppsToLocalStorage,
+} from './workspaceAppsLocalStorage';
+export {
+  WORKSPACE_APP_ICONS,
+  type WorkspaceAppIconKey,
+  isWorkspaceAppIconKey,
+} from './workspaceAppIcons';
+export {
+  findWorkspaceAppByPathname,
+  workspaceAppSlugPath,
+} from './workspaceAppPaths';

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

@@ -0,0 +1,21 @@
+import type { WorkspaceAppIconKey } from './workspaceAppIcons';
+
+/** Path segment for slug apps: pathname matches `/apps/{id}` */
+export const WORKSPACE_APP_SLUG_BASE_PATH = '/apps';
+
+/** 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;
+  iconKey: WorkspaceAppIconKey;
+  accent: string;
+  accentMuted: string;
+  href: string;
+  /**
+   * Optional. Native / multi-route shells: match current app by pathname prefix.
+   * Omit for custom apps deployed under a single slug (`/apps/{id}` only).
+   */
+  matchPathPrefixes?: readonly string[];
+};

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

@@ -0,0 +1,27 @@
+import type { ComponentType } from 'react';
+
+import { Boat, Package, TreeStructure } from '@phosphor-icons/react';
+import { ClockAlert, LayoutDashboard } from 'lucide-react';
+
+type IconLike = ComponentType<{ className?: string; 'aria-hidden'?: boolean }>;
+
+export type WorkspaceAppIconKey =
+  | 'grid-four'
+  | 'clock'
+  | 'boat'
+  | 'package'
+  | 'tree-structure';
+
+export const WORKSPACE_APP_ICONS: Record<WorkspaceAppIconKey, IconLike> = {
+  'grid-four': LayoutDashboard as IconLike,
+  clock: ClockAlert as IconLike,
+  boat: Boat as IconLike,
+  package: Package as IconLike,
+  'tree-structure': TreeStructure as IconLike,
+};
+
+const ICON_KEYS = Object.keys(WORKSPACE_APP_ICONS) as WorkspaceAppIconKey[];
+
+export function isWorkspaceAppIconKey(v: string): v is WorkspaceAppIconKey {
+  return (ICON_KEYS as string[]).includes(v);
+}

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

@@ -0,0 +1,34 @@
+import type { WorkspaceAppEntry } from './workspaceApp.types';
+import { WORKSPACE_APP_SLUG_BASE_PATH } from './workspaceApp.types';
+
+export function workspaceAppSlugPath(id: string): string {
+  return `${WORKSPACE_APP_SLUG_BASE_PATH}/${id}`;
+}
+
+function pathnameMatchesPrefix(pathname: string, prefix: string): boolean {
+  return pathname === prefix || pathname.startsWith(`${prefix}/`);
+}
+
+function pathnameMatchesSlugApp(pathname: string, id: string): boolean {
+  const base = workspaceAppSlugPath(id);
+  return pathname === base || pathname.startsWith(`${base}/`);
+}
+
+export function findWorkspaceAppByPathname(
+  pathname: string,
+  apps: readonly WorkspaceAppEntry[],
+): WorkspaceAppEntry | null {
+  for (const app of apps) {
+    const prefixes = app.matchPathPrefixes;
+    if (prefixes && prefixes.length > 0) {
+      if (prefixes.some(prefix => pathnameMatchesPrefix(pathname, prefix))) {
+        return app;
+      }
+      continue;
+    }
+    if (pathnameMatchesSlugApp(pathname, app.id)) {
+      return app;
+    }
+  }
+  return null;
+}

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

@@ -0,0 +1,2 @@
+/** localStorage key for workspace app list JSON (shared by host app + demos). */
+export const WORKSPACE_APPS_LS_KEY = 'sybilion.workspaceApps.v1';

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

@@ -0,0 +1,95 @@
+import type { WorkspaceAppEntry } from './workspaceApp.types';
+import { isWorkspaceAppIconKey } from './workspaceAppIcons';
+
+function parseEntry(raw: unknown): WorkspaceAppEntry | null {
+  if (!raw || typeof raw !== 'object') {
+    return null;
+  }
+  const o = raw as Record<string, unknown>;
+  const idRaw = o.id ?? o.nativeId;
+  const displayName = o.displayName;
+  const subtitle = o.subtitle;
+  const iconKey = o.iconKey;
+  const accent = o.accent;
+  const accentMuted = o.accentMuted;
+  const href = o.href;
+  const prefixesRaw = o.matchPathPrefixes;
+
+  if (
+    typeof idRaw !== 'string' ||
+    !idRaw ||
+    typeof displayName !== 'string' ||
+    typeof subtitle !== 'string' ||
+    typeof iconKey !== 'string' ||
+    !isWorkspaceAppIconKey(iconKey) ||
+    typeof accent !== 'string' ||
+    typeof accentMuted !== 'string' ||
+    typeof href !== 'string' ||
+    !href
+  ) {
+    return null;
+  }
+
+  let matchPathPrefixes: WorkspaceAppEntry['matchPathPrefixes'];
+  if (prefixesRaw != null) {
+    if (!Array.isArray(prefixesRaw)) {
+      return null;
+    }
+    const prefixes = prefixesRaw.filter(
+      (p): p is string => typeof p === 'string',
+    );
+    if (prefixes.length > 0) {
+      matchPathPrefixes = prefixes;
+    }
+  }
+
+  return {
+    id: idRaw,
+    displayName,
+    subtitle,
+    iconKey,
+    accent,
+    accentMuted,
+    href,
+    matchPathPrefixes,
+  };
+}
+
+/**
+ * Read validated workspace apps JSON from localStorage; returns null if missing or invalid.
+ */
+export function readWorkspaceAppsFromLocalStorage(
+  key: string,
+): WorkspaceAppEntry[] | null {
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw == null || raw === '') {
+      return null;
+    }
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed) || parsed.length === 0) {
+      return null;
+    }
+    const apps: WorkspaceAppEntry[] = [];
+    for (const item of parsed) {
+      const entry = parseEntry(item);
+      if (entry) {
+        apps.push(entry);
+      }
+    }
+    return apps.length > 0 ? apps : null;
+  } catch {
+    return null;
+  }
+}
+
+export function writeWorkspaceAppsToLocalStorage(
+  key: string,
+  apps: WorkspaceAppEntry[],
+): void {
+  try {
+    localStorage.setItem(key, JSON.stringify(apps));
+  } catch {
+    // ignore quota / private mode
+  }
+}

package/src/components/widgets/SybilionAppHeader/SybilionAppHeader.styl

@@ -0,0 +1,53 @@
+@import '../../../lib/theme.styl'
+
+.actionsAnchor
+  display flex
+  align-items center
+  gap var(--p-4)
+  flex-shrink 0
+
+.logoArea
+  position absolute
+  top 22px
+  left 40px
+  z-index 10
+
+  display flex
+  align-items center
+  gap var(--p-2)
+
+  @media (max-width MOBILE)
+    left 32px
+  @media (min-width MOBILE)
+    :global([data-slot='sidebar-wrapper'][data-state='expanded']) &
+      position fixed
+
+.logoAreaWithBanner
+  top calc(22px + var(--welcome-banner-height, 0px))
+
+  @media (min-width MOBILE)
+    :global([data-slot='sidebar-wrapper'][data-state='collapsed']) &
+      top 22px
+
+.logoLink
+  display flex
+  align-items center
+  gap 0.5rem
+  width fit-content
+
+  font-weight 400
+  font-size 1.5rem
+  color var(--color-foreground)
+  text-decoration none
+  white-space nowrap
+
+  svg
+    display inline-flex
+    height 32px
+    width auto
+    flex-shrink 0
+    transition transform 0.1s ease-in-out
+
+  &:hover svg
+    transform scale(1.05)
+

package/src/components/widgets/SybilionAppHeader/SybilionAppHeader.styl.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actionsAnchor': string;
+  'logoArea': string;
+  'logoAreaWithBanner': string;
+  'logoLink': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/widgets/SybilionAppHeader/SybilionAppHeader.tsx

@@ -0,0 +1,74 @@
+import cn from 'classnames';
+import type { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+
+import { AppHeaderPortal } from '#uilib/components/ui/AppHeader/AppHeader';
+import { PAGE_HEADER_ACTIONS_ID } from '#uilib/components/ui/AppHeader/appChromeAnchors';
+import { Gap } from '#uilib/components/ui/Gap/Gap';
+import { Logo } from '#uilib/components/ui/Logo/Logo';
+import { NavUserHeader } from '#uilib/components/ui/NavUserHeader';
+import type { NavUserHeaderProps } from '#uilib/components/ui/NavUserHeader';
+import {
+  WorkspaceAppSwitcher,
+  type WorkspaceAppSwitcherProps,
+} from '#uilib/components/ui/WorkspaceAppSwitcher';
+
+import S from './SybilionAppHeader.styl';
+
+export type SybilionAppHeaderProps = WorkspaceAppSwitcherProps &
+  NavUserHeaderProps & {
+    pageHeaderId?: string;
+    actionsAnchorId?: string;
+    actionsAnchorClassName?: string;
+    /** Branded markup; omit for default lucide tile + «Sybilion». */
+    logo?: ReactNode;
+    logoAreaClassName?: string;
+    /** Applies vertical offset when a welcome banner consumes top space (CSS `--welcome-banner-height` on shell). */
+    welcomeBannerOffset?: boolean;
+  };
+
+export function SybilionAppHeader({
+  pageHeaderId,
+  actionsAnchorId = PAGE_HEADER_ACTIONS_ID,
+  actionsAnchorClassName,
+  pathname,
+  onNavigate,
+  authenticated,
+  defaultApps,
+  appsStorageKey,
+  logo,
+  logoAreaClassName,
+  welcomeBannerOffset,
+  ...navUserHeaderProps
+}: SybilionAppHeaderProps) {
+  return (
+    <AppHeaderPortal pageHeaderId={pageHeaderId}>
+      <div
+        className={cn(
+          S.logoArea,
+          welcomeBannerOffset && S.logoAreaWithBanner,
+          logoAreaClassName,
+        )}
+      >
+        <Link to="/" className={S.logoLink}>
+          {logo ?? <Logo size="md" aria-hidden />}
+        </Link>
+      </div>
+
+      <WorkspaceAppSwitcher
+        pathname={pathname}
+        onNavigate={onNavigate}
+        authenticated={authenticated}
+        defaultApps={defaultApps}
+        appsStorageKey={appsStorageKey}
+      />
+      <Gap />
+      <div
+        id={actionsAnchorId}
+        className={cn(S.actionsAnchor, actionsAnchorClassName)}
+      >
+        <NavUserHeader {...navUserHeaderProps} />
+      </div>
+    </AppHeaderPortal>
+  );
+}

package/src/components/widgets/SybilionAppHeader/index.ts

@@ -0,0 +1,4 @@
+export {
+  SybilionAppHeader,
+  type SybilionAppHeaderProps,
+} from './SybilionAppHeader';

package/src/docs/pages/{StandaloneAppLayoutPage.styl → StandaloneAppLayoutPage/StandaloneAppLayoutPage.styl}

@@ -1,4 +1,4 @@
-@import '../../lib/theme.styl'
+@import '../../../lib/theme.styl'
 
 // Embed preview: Sidebar uses position:fixed + viewport top/height; PageScroll uses 100vh.
 // Transform creates a containing block for `fixed` children; overrides stop bleed into docs chrome.
@@ -24,23 +24,13 @@
     height auto !important
     flex 1
 
-.preview aside[data-side="left"]
-  top 0 !important
-  left 0 !important
-  height 100% !important
-  min-height 0 !important
-
-  @media (min-width MOBILE)
-    height 100% !important
-
-.preview aside[data-side="left"] > div:first-child
-  height 100% !important
-  max-height 100% !important
-
-  @media (min-width MOBILE)
-    height 100% !important
-
-.preview [data-slot="sidebar-resize-handle"]
-  top 0 !important
-  height 100% !important
-  max-height 100%
+// Datasets panel: tall block for scroll testing inside PageScroll.
+.scrollTestBlock
+  min-height 100vh
+  margin-top var(--p-4)
+  padding var(--p-4)
+  border-radius var(--p-2)
+  border 2px dashed var(--border)
+  background-color var(--background)
+  color var(--muted-foreground)
+  font-size var(--text-sm)

package/src/docs/pages/{StandaloneAppLayoutPage.styl.d.ts → StandaloneAppLayoutPage/StandaloneAppLayoutPage.styl.d.ts}

@@ -3,6 +3,7 @@
 interface CssExports {
   'preview': string;
   'previewScrollRoot': string;
+  'scrollTestBlock': string;
 }
 export const cssExports: CssExports;
 export default cssExports;