@skipleague/design 0.5.0 → 0.7.0

package/dist/AppLogo.d.ts

@@ -1,5 +1,13 @@
 /** A SkipLeague app's logo glyph (monoline, drawn on the brand tile). */
 export type AppGlyph = "lists" | "racquetball" | "trips" | "gifts" | "reading" | "today" | "guide" | "flow";
+/** Every app that has a glyph, for slug→glyph resolution and fallbacks. */
+export declare const APP_GLYPHS: readonly AppGlyph[];
+/**
+ * Resolve a platform app slug (e.g. `"skipracquetball"`) to its {@link AppGlyph}
+ * by dropping the `skip` prefix, or `null` when no glyph exists for it (so a
+ * caller can fall back to a letter {@link AppBadge}). Case-insensitive.
+ */
+export declare function appGlyphForSlug(slug: string): AppGlyph | null;
 /**
  * The per-app logo mark — a brand-green rounded tile holding a white monoline
  * glyph. Replaces the single-letter {@link AppBadge}; gives each SkipLeague app a

package/dist/AppLogo.js

@@ -1,4 +1,24 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Every app that has a glyph, for slug→glyph resolution and fallbacks. */
+export const APP_GLYPHS = [
+    "lists",
+    "racquetball",
+    "trips",
+    "gifts",
+    "reading",
+    "today",
+    "guide",
+    "flow",
+];
+/**
+ * Resolve a platform app slug (e.g. `"skipracquetball"`) to its {@link AppGlyph}
+ * by dropping the `skip` prefix, or `null` when no glyph exists for it (so a
+ * caller can fall back to a letter {@link AppBadge}). Case-insensitive.
+ */
+export function appGlyphForSlug(slug) {
+    const key = slug.replace(/^skip/i, "").toLowerCase();
+    return APP_GLYPHS.includes(key) ? key : null;
+}
 // Exact 24×24 glyph paths (design_handoff_app_glyphs — the finalized round that
 // fixed racquetball, trips, and flow and added the guide mark). `color` only
 // matters for filled sub-shapes (e.g. the racquetball ball), which are filled

package/dist/ProfileMenu.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { CircleUser, LogIn, LogOut, Settings } from "lucide-react";
 import { AppBadge } from "./AppBadge.js";
+import { AppLogo, appGlyphForSlug } from "./AppLogo.js";
 import { SKIPLEAGUE_ACCOUNT_URL, SKIPLEAGUE_APPS } from "./apps.js";
 /**
  * The canonical SkipLeague account control: a boxed user-icon button that opens
@@ -66,7 +67,9 @@ export function ProfileMenu({ user, currentSlug, apps = SKIPLEAGUE_APPS, enabled
                     transition: "border-color 0.15s, color 0.15s",
                 }, children: _jsx(CircleUser, { size: 22 }) }), open && (_jsx("div", { role: "menu", style: menuStyle, children: showSignedOut ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--skl-color-border)" }, children: _jsx("div", { style: { fontWeight: 600, fontSize: "var(--skl-text-sm)", color: "var(--skl-color-text)" }, children: "Not signed in" }) }), _jsxs("button", { role: "menuitem", onClick: onSignIn, style: { ...itemStyle, width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer" }, children: [_jsx(LogIn, { size: 15 }), " ", signInLabel] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--skl-color-border)" }, children: [_jsx("div", { style: { fontWeight: 600, fontSize: "var(--skl-text-sm)", color: "var(--skl-color-text)" }, children: label }), user?.email && _jsx("div", { style: { fontSize: "var(--skl-text-xs)", color: "var(--skl-color-text-muted)" }, children: user.email })] }), visibleApps.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { style: switchHeading, children: "Switch app" }), visibleApps.map((a) => {
                                     const isCurrent = a.slug === currentSlug;
-                                    const inner = (_jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [_jsx(AppBadge, { name: a.name }), a.name] }));
+                                    // Per-app glyph when one exists; letter badge otherwise.
+                                    const glyph = appGlyphForSlug(a.slug);
+                                    const inner = (_jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [glyph ? _jsx(AppLogo, { app: glyph, size: 22 }) : _jsx(AppBadge, { name: a.name }), a.name] }));
                                     // The app you're in: light-green highlight, not clickable.
                                     return isCurrent ? (_jsx("div", { "aria-current": "page", style: { ...itemStyle, fontWeight: 600, background: "var(--skl-color-current-bg)", color: "var(--skl-color-current-text)", cursor: "default" }, children: inner }, a.slug)) : (_jsx("a", { href: a.url, role: "menuitem", style: itemStyle, children: inner }, a.slug));
                                 })] })), _jsx("div", { style: divider }), accountItem, _jsx("div", { style: divider }), _jsxs("button", { role: "menuitem", onClick: onSignOut, style: { ...itemStyle, width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer" }, children: [_jsx(LogOut, { size: 15 }), " Sign out"] })] })) }))] }));

package/dist/SidebarNav.d.ts

@@ -0,0 +1,50 @@
+import { type CSSProperties, type ReactNode } from "react";
+/** A single navigation row in the desktop sidebar. */
+export interface SidebarNavItem {
+    /** Stable key (also used for React reconciliation). */
+    key: string;
+    label: string;
+    /** ~18px line icon (stroke 2, currentColor) — inherits the row's color. */
+    icon?: ReactNode;
+    /** Renders an `<a href>`; omit for a plain `<button>` (e.g. pure onClick). */
+    href?: string;
+    /** Current route — highlighted. Derive from your router. */
+    active?: boolean;
+    onClick?: () => void;
+}
+/** A run of items under an optional uppercase heading (e.g. "LISTS"). */
+export interface SidebarNavSection {
+    /** Uppercase section heading. Omit for an ungrouped run of items. */
+    heading?: string;
+    items: SidebarNavItem[];
+}
+/** Args passed to a custom `renderLink` so apps can route with their own `<Link>`. */
+export interface SidebarNavLinkArgs {
+    href: string;
+    style?: CSSProperties;
+    "aria-current"?: "page";
+    children: ReactNode;
+}
+export interface SidebarNavProps {
+    /** Sections rendered top→bottom; each an optional heading + its items. */
+    sections: SidebarNavSection[];
+    /** Sidebar width in px (default 210). */
+    width?: number;
+    /**
+     * Render item links via your own router (e.g. React Router's `<Link>`) instead
+     * of a full-page `<a href>`. Example:
+     * `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`.
+     */
+    renderLink?: (args: SidebarNavLinkArgs) => ReactNode;
+}
+/**
+ * The desktop left navigation sidebar (design_handoff_desktop_action_bar).
+ *
+ * Sits BELOW the shared app bar ({@link TopBar}/`DesktopActionBar`), never
+ * beside it. Starts directly with nav items — it carries NO app-name heading;
+ * the app name lives only in the bar. Desktop-only: hide it below the app's
+ * desktop breakpoint and rely on the app's bottom tab bar instead.
+ *
+ * Which item is `active` is owned by the app's router, not this component.
+ */
+export declare function SidebarNav({ sections, width, renderLink }: SidebarNavProps): import("react").JSX.Element;

package/dist/SidebarNav.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+/**
+ * The desktop left navigation sidebar (design_handoff_desktop_action_bar).
+ *
+ * Sits BELOW the shared app bar ({@link TopBar}/`DesktopActionBar`), never
+ * beside it. Starts directly with nav items — it carries NO app-name heading;
+ * the app name lives only in the bar. Desktop-only: hide it below the app's
+ * desktop breakpoint and rely on the app's bottom tab bar instead.
+ *
+ * Which item is `active` is owned by the app's router, not this component.
+ */
+export function SidebarNav({ sections, width = 210, renderLink }) {
+    return (_jsx("nav", { style: {
+            width,
+            flex: "0 0 auto",
+            borderRight: "1px solid var(--skl-color-border)",
+            padding: "14px 12px",
+            background: "#ffffff",
+            fontFamily: "var(--skl-font-sans)",
+        }, children: sections.map((section, si) => (_jsxs("div", { children: [section.heading && _jsx("div", { style: headingStyle, children: section.heading }), section.items.map((item) => (_jsx(Item, { item: item, renderLink: renderLink }, item.key)))] }, section.heading ?? `s${si}`))) }));
+}
+function Item({ item, renderLink, }) {
+    const [hover, setHover] = useState(false);
+    const { label, icon, href, active, onClick } = item;
+    const style = {
+        display: "flex",
+        alignItems: "center",
+        gap: 11,
+        padding: "9px 11px",
+        borderRadius: 9,
+        fontWeight: 600,
+        fontSize: 14,
+        textDecoration: "none",
+        cursor: "pointer",
+        // Active wins; otherwise a subtle hover fill for affordance.
+        background: active ? "var(--skl-color-current-bg)" : hover ? "var(--skl-color-surface-muted)" : "transparent",
+        color: active ? "var(--skl-color-brand)" : "#475569",
+    };
+    const inner = (_jsxs(_Fragment, { children: [icon, label] }));
+    const hoverHandlers = {
+        onMouseEnter: () => setHover(true),
+        onMouseLeave: () => setHover(false),
+    };
+    // Link row (href) — use the app's router when renderLink is supplied.
+    if (href) {
+        if (renderLink) {
+            return (_jsx("div", { ...hoverHandlers, children: renderLink({ href, style, "aria-current": active ? "page" : undefined, children: inner }) }));
+        }
+        return (_jsx("a", { href: href, style: style, "aria-current": active ? "page" : undefined, onClick: onClick, ...hoverHandlers, children: inner }));
+    }
+    // Button row (no href) — pure onClick.
+    return (_jsx("button", { type: "button", onClick: onClick, "aria-current": active ? "page" : undefined, style: { ...style, width: "100%", textAlign: "left", border: "none" }, ...hoverHandlers, children: inner }));
+}
+const headingStyle = {
+    fontWeight: 700,
+    fontSize: 10,
+    textTransform: "uppercase",
+    letterSpacing: 0.7,
+    color: "var(--skl-color-text-faint)",
+    padding: "14px 11px 5px",
+};

package/dist/TopBar.d.ts

@@ -1,30 +1,61 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
 import { type AppGlyph } from "./AppLogo.js";
 import { type ProfileMenuProps } from "./ProfileMenu.js";
+/** Bar surface tone: `dark` = the green header (default), `light` = white bar. */
+export type TopBarTone = "dark" | "light";
 /**
- * The shared SkipLeague top bar (design_handoff_top_bar, Option A — dark).
+ * The shared SkipLeague app bar (design_handoff_top_bar → design_handoff_desktop_action_bar).
+ * Also exported as `DesktopActionBar` — the same component under the newer name;
+ * migrate imports opportunistically and drop the alias once nothing uses `TopBar`.
  *
- * Layout is identical across apps; only the logo glyph, wordmark, and the
- * contextual action slot change:
- *   [AppLogo + wordmark] ........ [ ...actions ][ ProfileMenu ]
+ * ONE bar for every app + breakpoint. It spans the full top row on both mobile
+ * and desktop; on desktop the app adds a left sidebar (see {@link SidebarNav})
+ * BELOW the bar — the bar itself is unchanged. Layout is identical across apps;
+ * only the logo glyph, wordmark, tone, and which actions are enabled change:
+ *
+ *   [AppLogo + wordmark] ........ [ search inbox members share overflow ][ actions ][ ProfileMenu ]
  *
  * - ProfileMenu is pinned to the far right on every page (the persistent slot).
- * - `actions` is the contextual slot (Print / Share / …) — render zero or more
- *   {@link TopBarIconButton}s; they appear left of the ProfileMenu only when the
- *   current page offers them.
+ * - The named action toggles render in a FIXED left→right order
+ *   (search → inbox → members → share → overflow), each only when its `show*`
+ *   flag is set, so the same action looks identical in every app.
+ * - `actions` is an escape hatch for one-off contextual buttons; render zero or
+ *   more {@link TopBarIconButton}s. They sit between the named cluster and the
+ *   ProfileMenu.
+ * - The app name appears ONLY here, never repeated in the sidebar.
  */
-export declare function TopBar({ app, appName, actions, compact, ...profile }: {
+export declare function TopBar({ app, appName, tone, actions, compact, showSearch, showInbox, showMembers, showShare, showOverflow, onSearch, onInbox, onMembers, onShare, onOverflow, ...profile }: {
     app: AppGlyph;
     appName: string;
-    /** Contextual page actions (Print/Share buttons) rendered left of ProfileMenu. */
+    /** Bar surface tone. `dark` (green header) is the default. */
+    tone?: TopBarTone;
+    /** One-off contextual buttons, rendered between the named cluster and ProfileMenu. */
     actions?: ReactNode;
-    /** Mobile sizing (48px bar) vs the default 54px. */
+    /** Mobile sizing (52px bar) vs the default 56px. */
     compact?: boolean;
+    /** Named action toggles — each renders a ghost icon button when true, in fixed order. */
+    showSearch?: boolean;
+    showInbox?: boolean;
+    showMembers?: boolean;
+    showShare?: boolean;
+    showOverflow?: boolean;
+    onSearch?: () => void;
+    onInbox?: () => void;
+    onMembers?: () => void;
+    onShare?: () => void;
+    onOverflow?: () => void;
 } & Pick<ProfileMenuProps, "user" | "currentSlug" | "apps" | "enabledSlugs" | "accountUrl" | "onSignOut" | "renderLink" | "onSignIn">): import("react").JSX.Element;
 /**
- * A contextual top-bar action button (Print, Share, …) styled for the dark bar.
- * Pass a 17–18px line icon (stroke 2, currentColor) as children.
+ * A ghost (borderless-fill) icon button for the app bar — the named actions use
+ * it, and apps pass their own for one-off `actions`. Give it a 17px line icon
+ * (stroke 2, currentColor) as children. Styling tracks the bar `tone`.
  */
-export declare function TopBarIconButton({ compact, style, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare function TopBarIconButton({ tone, compact, style, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    tone?: TopBarTone;
     compact?: boolean;
 }): import("react").JSX.Element;
+/**
+ * Alias for {@link TopBar} under its platform-app-bar name. Same component,
+ * same props — use whichever import name the app standardizes on.
+ */
+export { TopBar as DesktopActionBar };

package/dist/TopBar.js

@@ -1,45 +1,78 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Inbox, MoreHorizontal, Search, Upload, Users } from "lucide-react";
 import { AppLogo } from "./AppLogo.js";
 import { ProfileMenu } from "./ProfileMenu.js";
 /**
- * The shared SkipLeague top bar (design_handoff_top_bar, Option A — dark).
+ * The shared SkipLeague app bar (design_handoff_top_bar → design_handoff_desktop_action_bar).
+ * Also exported as `DesktopActionBar` — the same component under the newer name;
+ * migrate imports opportunistically and drop the alias once nothing uses `TopBar`.
  *
- * Layout is identical across apps; only the logo glyph, wordmark, and the
- * contextual action slot change:
- *   [AppLogo + wordmark] ........ [ ...actions ][ ProfileMenu ]
+ * ONE bar for every app + breakpoint. It spans the full top row on both mobile
+ * and desktop; on desktop the app adds a left sidebar (see {@link SidebarNav})
+ * BELOW the bar — the bar itself is unchanged. Layout is identical across apps;
+ * only the logo glyph, wordmark, tone, and which actions are enabled change:
+ *
+ *   [AppLogo + wordmark] ........ [ search inbox members share overflow ][ actions ][ ProfileMenu ]
  *
  * - ProfileMenu is pinned to the far right on every page (the persistent slot).
- * - `actions` is the contextual slot (Print / Share / …) — render zero or more
- *   {@link TopBarIconButton}s; they appear left of the ProfileMenu only when the
- *   current page offers them.
+ * - The named action toggles render in a FIXED left→right order
+ *   (search → inbox → members → share → overflow), each only when its `show*`
+ *   flag is set, so the same action looks identical in every app.
+ * - `actions` is an escape hatch for one-off contextual buttons; render zero or
+ *   more {@link TopBarIconButton}s. They sit between the named cluster and the
+ *   ProfileMenu.
+ * - The app name appears ONLY here, never repeated in the sidebar.
  */
-export function TopBar({ app, appName, actions, compact = false, ...profile }) {
+export function TopBar({ app, appName, tone = "dark", actions, compact = false, showSearch = false, showInbox = false, showMembers = false, showShare = false, showOverflow = false, onSearch, onInbox, onMembers, onShare, onOverflow, ...profile }) {
+    const light = tone === "light";
     const bar = {
         display: "flex",
         alignItems: "center",
-        justifyContent: "space-between",
-        height: compact ? 48 : 54,
-        padding: compact ? "0 12px" : "0 14px",
-        background: "var(--skl-color-header-dark)",
+        gap: 12,
+        height: compact ? 52 : 56,
+        padding: compact ? "0 12px" : "0 16px",
+        background: light ? "#ffffff" : "var(--skl-color-header-dark)",
+        borderBottom: light ? "1px solid var(--skl-color-border)" : undefined,
+        fontFamily: "var(--skl-font-sans)",
     };
-    return (_jsxs("div", { style: bar, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 }, children: [_jsx(AppLogo, { app: app, size: compact ? 26 : 27 }), _jsx("span", { style: {
-                            fontFamily: "var(--skl-font-sans)",
+    // Named actions in their fixed left→right order; only the enabled ones render.
+    const named = [
+        showSearch && { key: "search", title: "Search", Icon: Search, onClick: onSearch },
+        showInbox && { key: "inbox", title: "Inbox", Icon: Inbox, onClick: onInbox },
+        showMembers && { key: "members", title: "Members", Icon: Users, onClick: onMembers },
+        showShare && { key: "share", title: "Share this view", Icon: Upload, onClick: onShare },
+        showOverflow && { key: "overflow", title: "More", Icon: MoreHorizontal, onClick: onOverflow },
+    ].filter(Boolean);
+    return (_jsxs("div", { style: bar, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0, flex: "0 1 auto" }, children: [_jsx(AppLogo, { app: app, size: compact ? 26 : 27 }), _jsx("span", { style: {
                             fontWeight: 700,
                             fontSize: compact ? 14 : 15,
-                            color: "var(--skl-color-on-dark)",
+                            color: light ? "var(--skl-color-text)" : "var(--skl-color-on-dark)",
                             whiteSpace: "nowrap",
                             overflow: "hidden",
                             textOverflow: "ellipsis",
-                        }, children: appName })] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [actions, _jsx(ProfileMenu, { tone: "dark", ...profile })] })] }));
+                        }, children: appName })] }), _jsx("div", { style: { flex: "1 1 auto", minWidth: 8 } }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "0 0 auto" }, children: [named.map(({ key, title, Icon, onClick }) => (_jsx(TopBarIconButton, { tone: tone, compact: compact, title: title, "aria-label": title, onClick: onClick, children: _jsx(Icon, { size: 17 }) }, key))), actions, _jsx(ProfileMenu, { tone: tone, ...profile })] })] }));
 }
 /**
- * A contextual top-bar action button (Print, Share, …) styled for the dark bar.
- * Pass a 17–18px line icon (stroke 2, currentColor) as children.
+ * A ghost (borderless-fill) icon button for the app bar — the named actions use
+ * it, and apps pass their own for one-off `actions`. Give it a 17px line icon
+ * (stroke 2, currentColor) as children. Styling tracks the bar `tone`.
  */
-export function TopBarIconButton({ compact = false, style, children, ...props }) {
+export function TopBarIconButton({ tone = "dark", compact = false, style, children, ...props }) {
     const [hover, setHover] = useState(false);
     const dim = compact ? 36 : 38;
+    const light = tone === "light";
+    const palette = light
+        ? {
+            border: hover ? "#cbd5e1" : "var(--skl-color-border)",
+            background: hover ? "var(--skl-color-surface-muted)" : "#ffffff",
+            color: hover ? "var(--skl-color-text)" : "var(--skl-color-text-muted)",
+        }
+        : {
+            border: hover ? "rgba(94,234,212,0.5)" : "rgba(255,255,255,0.16)",
+            background: hover ? "rgba(255,255,255,0.08)" : "transparent",
+            color: hover ? "var(--skl-color-brand-bright)" : "var(--skl-color-on-dark-muted)",
+        };
     return (_jsx("button", { type: "button", onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: {
             width: dim,
             height: dim,
@@ -48,10 +81,16 @@ export function TopBarIconButton({ compact = false, style, children, ...props })
             alignItems: "center",
             justifyContent: "center",
             cursor: "pointer",
-            background: hover ? "rgba(255,255,255,0.08)" : "transparent",
-            border: `1px solid ${hover ? "rgba(94,234,212,0.5)" : "rgba(255,255,255,0.16)"}`,
-            color: hover ? "var(--skl-color-brand-bright)" : "var(--skl-color-on-dark-muted)",
-            transition: "background .12s, border-color .12s, color .12s",
+            flex: "0 0 auto",
+            background: palette.background,
+            border: `1px solid ${palette.border}`,
+            color: palette.color,
+            transition: "background .14s, border-color .14s, color .14s",
             ...style,
         }, ...props, children: children }));
 }
+/**
+ * Alias for {@link TopBar} under its platform-app-bar name. Same component,
+ * same props — use whichever import name the app standardizes on.
+ */
+export { TopBar as DesktopActionBar };

package/dist/index.d.ts

@@ -1,9 +1,12 @@
 export { ProfileMenu } from "./ProfileMenu.js";
 export type { ProfileMenuProps, ProfileMenuUser, ProfileMenuLinkArgs } from "./ProfileMenu.js";
 export { AppBadge } from "./AppBadge.js";
-export { AppLogo } from "./AppLogo.js";
+export { AppLogo, APP_GLYPHS, appGlyphForSlug } from "./AppLogo.js";
 export type { AppGlyph } from "./AppLogo.js";
-export { TopBar, TopBarIconButton } from "./TopBar.js";
+export { TopBar, TopBarIconButton, DesktopActionBar } from "./TopBar.js";
+export type { TopBarTone } from "./TopBar.js";
+export { SidebarNav } from "./SidebarNav.js";
+export type { SidebarNavProps, SidebarNavSection, SidebarNavItem, SidebarNavLinkArgs } from "./SidebarNav.js";
 export { BottomNav } from "./BottomNav.js";
 export type { BottomNavProps, BottomNavTab, BottomNavAction } from "./BottomNav.js";
 export { ShareMenu } from "./ShareMenu.js";

package/dist/index.js

@@ -1,7 +1,8 @@
 export { ProfileMenu } from "./ProfileMenu.js";
 export { AppBadge } from "./AppBadge.js";
-export { AppLogo } from "./AppLogo.js";
-export { TopBar, TopBarIconButton } from "./TopBar.js";
+export { AppLogo, APP_GLYPHS, appGlyphForSlug } from "./AppLogo.js";
+export { TopBar, TopBarIconButton, DesktopActionBar } from "./TopBar.js";
+export { SidebarNav } from "./SidebarNav.js";
 export { BottomNav } from "./BottomNav.js";
 export { ShareMenu } from "./ShareMenu.js";
 export { Button } from "./Button.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skipleague/design",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "SkipUI — the SkipLeague design system: shared tokens and React components for every SkipLeague app.",
   "type": "module",
   "repository": {

package/src/AppLogo.tsx

@@ -11,6 +11,28 @@ export type AppGlyph =
   | "guide"
   | "flow";
 
+/** Every app that has a glyph, for slug→glyph resolution and fallbacks. */
+export const APP_GLYPHS: readonly AppGlyph[] = [
+  "lists",
+  "racquetball",
+  "trips",
+  "gifts",
+  "reading",
+  "today",
+  "guide",
+  "flow",
+];
+
+/**
+ * Resolve a platform app slug (e.g. `"skipracquetball"`) to its {@link AppGlyph}
+ * by dropping the `skip` prefix, or `null` when no glyph exists for it (so a
+ * caller can fall back to a letter {@link AppBadge}). Case-insensitive.
+ */
+export function appGlyphForSlug(slug: string): AppGlyph | null {
+  const key = slug.replace(/^skip/i, "").toLowerCase();
+  return (APP_GLYPHS as readonly string[]).includes(key) ? (key as AppGlyph) : null;
+}
+
 // Exact 24×24 glyph paths (design_handoff_app_glyphs — the finalized round that
 // fixed racquetball, trips, and flow and added the guide mark). `color` only
 // matters for filled sub-shapes (e.g. the racquetball ball), which are filled

package/src/ProfileMenu.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { CircleUser, LogIn, LogOut, Settings } from "lucide-react";
 import { AppBadge } from "./AppBadge.js";
+import { AppLogo, appGlyphForSlug } from "./AppLogo.js";
 import { SKIPLEAGUE_ACCOUNT_URL, SKIPLEAGUE_APPS, type AppLink } from "./apps.js";
 
 export interface ProfileMenuUser {
@@ -202,9 +203,11 @@ export function ProfileMenu({
                   <div style={switchHeading}>Switch app</div>
                   {visibleApps.map((a) => {
                     const isCurrent = a.slug === currentSlug;
+                    // Per-app glyph when one exists; letter badge otherwise.
+                    const glyph = appGlyphForSlug(a.slug);
                     const inner = (
                       <span style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-                        <AppBadge name={a.name} />
+                        {glyph ? <AppLogo app={glyph} size={22} /> : <AppBadge name={a.name} />}
                         {a.name}
                       </span>
                     );

package/src/SidebarNav.tsx

@@ -0,0 +1,152 @@
+import { useState, type CSSProperties, type ReactNode } from "react";
+
+/** A single navigation row in the desktop sidebar. */
+export interface SidebarNavItem {
+  /** Stable key (also used for React reconciliation). */
+  key: string;
+  label: string;
+  /** ~18px line icon (stroke 2, currentColor) — inherits the row's color. */
+  icon?: ReactNode;
+  /** Renders an `<a href>`; omit for a plain `<button>` (e.g. pure onClick). */
+  href?: string;
+  /** Current route — highlighted. Derive from your router. */
+  active?: boolean;
+  onClick?: () => void;
+}
+
+/** A run of items under an optional uppercase heading (e.g. "LISTS"). */
+export interface SidebarNavSection {
+  /** Uppercase section heading. Omit for an ungrouped run of items. */
+  heading?: string;
+  items: SidebarNavItem[];
+}
+
+/** Args passed to a custom `renderLink` so apps can route with their own `<Link>`. */
+export interface SidebarNavLinkArgs {
+  href: string;
+  style?: CSSProperties;
+  "aria-current"?: "page";
+  children: ReactNode;
+}
+
+export interface SidebarNavProps {
+  /** Sections rendered top→bottom; each an optional heading + its items. */
+  sections: SidebarNavSection[];
+  /** Sidebar width in px (default 210). */
+  width?: number;
+  /**
+   * Render item links via your own router (e.g. React Router's `<Link>`) instead
+   * of a full-page `<a href>`. Example:
+   * `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`.
+   */
+  renderLink?: (args: SidebarNavLinkArgs) => ReactNode;
+}
+
+/**
+ * The desktop left navigation sidebar (design_handoff_desktop_action_bar).
+ *
+ * Sits BELOW the shared app bar ({@link TopBar}/`DesktopActionBar`), never
+ * beside it. Starts directly with nav items — it carries NO app-name heading;
+ * the app name lives only in the bar. Desktop-only: hide it below the app's
+ * desktop breakpoint and rely on the app's bottom tab bar instead.
+ *
+ * Which item is `active` is owned by the app's router, not this component.
+ */
+export function SidebarNav({ sections, width = 210, renderLink }: SidebarNavProps) {
+  return (
+    <nav
+      style={{
+        width,
+        flex: "0 0 auto",
+        borderRight: "1px solid var(--skl-color-border)",
+        padding: "14px 12px",
+        background: "#ffffff",
+        fontFamily: "var(--skl-font-sans)",
+      }}
+    >
+      {sections.map((section, si) => (
+        <div key={section.heading ?? `s${si}`}>
+          {section.heading && <div style={headingStyle}>{section.heading}</div>}
+          {section.items.map((item) => (
+            <Item key={item.key} item={item} renderLink={renderLink} />
+          ))}
+        </div>
+      ))}
+    </nav>
+  );
+}
+
+function Item({
+  item,
+  renderLink,
+}: {
+  item: SidebarNavItem;
+  renderLink?: (args: SidebarNavLinkArgs) => ReactNode;
+}) {
+  const [hover, setHover] = useState(false);
+  const { label, icon, href, active, onClick } = item;
+
+  const style: CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    gap: 11,
+    padding: "9px 11px",
+    borderRadius: 9,
+    fontWeight: 600,
+    fontSize: 14,
+    textDecoration: "none",
+    cursor: "pointer",
+    // Active wins; otherwise a subtle hover fill for affordance.
+    background: active ? "var(--skl-color-current-bg)" : hover ? "var(--skl-color-surface-muted)" : "transparent",
+    color: active ? "var(--skl-color-brand)" : "#475569",
+  };
+
+  const inner = (
+    <>
+      {icon}
+      {label}
+    </>
+  );
+  const hoverHandlers = {
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+  };
+
+  // Link row (href) — use the app's router when renderLink is supplied.
+  if (href) {
+    if (renderLink) {
+      return (
+        <div {...hoverHandlers}>
+          {renderLink({ href, style, "aria-current": active ? "page" : undefined, children: inner })}
+        </div>
+      );
+    }
+    return (
+      <a href={href} style={style} aria-current={active ? "page" : undefined} onClick={onClick} {...hoverHandlers}>
+        {inner}
+      </a>
+    );
+  }
+
+  // Button row (no href) — pure onClick.
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-current={active ? "page" : undefined}
+      style={{ ...style, width: "100%", textAlign: "left", border: "none" }}
+      {...hoverHandlers}
+    >
+      {inner}
+    </button>
+  );
+}
+
+const headingStyle: CSSProperties = {
+  fontWeight: 700,
+  fontSize: 10,
+  textTransform: "uppercase",
+  letterSpacing: 0.7,
+  color: "var(--skl-color-text-faint)",
+  padding: "14px 11px 5px",
+};

package/src/TopBar.tsx

@@ -1,55 +1,105 @@
 import { useState, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from "react";
+import { Inbox, MoreHorizontal, Search, Upload, Users, type LucideIcon } from "lucide-react";
 
 import { AppLogo, type AppGlyph } from "./AppLogo.js";
 import { ProfileMenu, type ProfileMenuProps } from "./ProfileMenu.js";
 
+/** Bar surface tone: `dark` = the green header (default), `light` = white bar. */
+export type TopBarTone = "dark" | "light";
+
 /**
- * The shared SkipLeague top bar (design_handoff_top_bar, Option A — dark).
+ * The shared SkipLeague app bar (design_handoff_top_bar → design_handoff_desktop_action_bar).
+ * Also exported as `DesktopActionBar` — the same component under the newer name;
+ * migrate imports opportunistically and drop the alias once nothing uses `TopBar`.
+ *
+ * ONE bar for every app + breakpoint. It spans the full top row on both mobile
+ * and desktop; on desktop the app adds a left sidebar (see {@link SidebarNav})
+ * BELOW the bar — the bar itself is unchanged. Layout is identical across apps;
+ * only the logo glyph, wordmark, tone, and which actions are enabled change:
  *
- * Layout is identical across apps; only the logo glyph, wordmark, and the
- * contextual action slot change:
- *   [AppLogo + wordmark] ........ [ ...actions ][ ProfileMenu ]
+ *   [AppLogo + wordmark] ........ [ search inbox members share overflow ][ actions ][ ProfileMenu ]
  *
  * - ProfileMenu is pinned to the far right on every page (the persistent slot).
- * - `actions` is the contextual slot (Print / Share / …) — render zero or more
- *   {@link TopBarIconButton}s; they appear left of the ProfileMenu only when the
- *   current page offers them.
+ * - The named action toggles render in a FIXED left→right order
+ *   (search → inbox → members → share → overflow), each only when its `show*`
+ *   flag is set, so the same action looks identical in every app.
+ * - `actions` is an escape hatch for one-off contextual buttons; render zero or
+ *   more {@link TopBarIconButton}s. They sit between the named cluster and the
+ *   ProfileMenu.
+ * - The app name appears ONLY here, never repeated in the sidebar.
  */
 export function TopBar({
   app,
   appName,
+  tone = "dark",
   actions,
   compact = false,
+  showSearch = false,
+  showInbox = false,
+  showMembers = false,
+  showShare = false,
+  showOverflow = false,
+  onSearch,
+  onInbox,
+  onMembers,
+  onShare,
+  onOverflow,
   ...profile
 }: {
   app: AppGlyph;
   appName: string;
-  /** Contextual page actions (Print/Share buttons) rendered left of ProfileMenu. */
+  /** Bar surface tone. `dark` (green header) is the default. */
+  tone?: TopBarTone;
+  /** One-off contextual buttons, rendered between the named cluster and ProfileMenu. */
   actions?: ReactNode;
-  /** Mobile sizing (48px bar) vs the default 54px. */
+  /** Mobile sizing (52px bar) vs the default 56px. */
   compact?: boolean;
+  /** Named action toggles — each renders a ghost icon button when true, in fixed order. */
+  showSearch?: boolean;
+  showInbox?: boolean;
+  showMembers?: boolean;
+  showShare?: boolean;
+  showOverflow?: boolean;
+  onSearch?: () => void;
+  onInbox?: () => void;
+  onMembers?: () => void;
+  onShare?: () => void;
+  onOverflow?: () => void;
 } & Pick<
   ProfileMenuProps,
   "user" | "currentSlug" | "apps" | "enabledSlugs" | "accountUrl" | "onSignOut" | "renderLink" | "onSignIn"
 >) {
+  const light = tone === "light";
   const bar: CSSProperties = {
     display: "flex",
     alignItems: "center",
-    justifyContent: "space-between",
-    height: compact ? 48 : 54,
-    padding: compact ? "0 12px" : "0 14px",
-    background: "var(--skl-color-header-dark)",
+    gap: 12,
+    height: compact ? 52 : 56,
+    padding: compact ? "0 12px" : "0 16px",
+    background: light ? "#ffffff" : "var(--skl-color-header-dark)",
+    borderBottom: light ? "1px solid var(--skl-color-border)" : undefined,
+    fontFamily: "var(--skl-font-sans)",
   };
+
+  // Named actions in their fixed left→right order; only the enabled ones render.
+  const named: Array<{ key: string; title: string; Icon: LucideIcon; onClick?: () => void }> = [
+    showSearch && { key: "search", title: "Search", Icon: Search, onClick: onSearch },
+    showInbox && { key: "inbox", title: "Inbox", Icon: Inbox, onClick: onInbox },
+    showMembers && { key: "members", title: "Members", Icon: Users, onClick: onMembers },
+    showShare && { key: "share", title: "Share this view", Icon: Upload, onClick: onShare },
+    showOverflow && { key: "overflow", title: "More", Icon: MoreHorizontal, onClick: onOverflow },
+  ].filter(Boolean) as Array<{ key: string; title: string; Icon: LucideIcon; onClick?: () => void }>;
+
   return (
     <div style={bar}>
-      <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
+      {/* Left — identity group. Shrinks and truncates before the action cluster does. */}
+      <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0, flex: "0 1 auto" }}>
         <AppLogo app={app} size={compact ? 26 : 27} />
         <span
           style={{
-            fontFamily: "var(--skl-font-sans)",
             fontWeight: 700,
             fontSize: compact ? 14 : 15,
-            color: "var(--skl-color-on-dark)",
+            color: light ? "var(--skl-color-text)" : "var(--skl-color-on-dark)",
             whiteSpace: "nowrap",
             overflow: "hidden",
             textOverflow: "ellipsis",
@@ -58,26 +108,52 @@ export function TopBar({
           {appName}
         </span>
       </div>
-      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+
+      {/* Flexible spacer. */}
+      <div style={{ flex: "1 1 auto", minWidth: 8 }} />
+
+      {/* Right — action cluster + persistent ProfileMenu. Never shrinks. */}
+      <div style={{ display: "flex", alignItems: "center", gap: 8, flex: "0 0 auto" }}>
+        {named.map(({ key, title, Icon, onClick }) => (
+          <TopBarIconButton key={key} tone={tone} compact={compact} title={title} aria-label={title} onClick={onClick}>
+            <Icon size={17} />
+          </TopBarIconButton>
+        ))}
         {actions}
-        <ProfileMenu tone="dark" {...profile} />
+        <ProfileMenu tone={tone} {...profile} />
       </div>
     </div>
   );
 }
 
 /**
- * A contextual top-bar action button (Print, Share, …) styled for the dark bar.
- * Pass a 17–18px line icon (stroke 2, currentColor) as children.
+ * A ghost (borderless-fill) icon button for the app bar — the named actions use
+ * it, and apps pass their own for one-off `actions`. Give it a 17px line icon
+ * (stroke 2, currentColor) as children. Styling tracks the bar `tone`.
  */
 export function TopBarIconButton({
+  tone = "dark",
   compact = false,
   style,
   children,
   ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> & { compact?: boolean }) {
+}: ButtonHTMLAttributes<HTMLButtonElement> & { tone?: TopBarTone; compact?: boolean }) {
   const [hover, setHover] = useState(false);
   const dim = compact ? 36 : 38;
+  const light = tone === "light";
+
+  const palette = light
+    ? {
+        border: hover ? "#cbd5e1" : "var(--skl-color-border)",
+        background: hover ? "var(--skl-color-surface-muted)" : "#ffffff",
+        color: hover ? "var(--skl-color-text)" : "var(--skl-color-text-muted)",
+      }
+    : {
+        border: hover ? "rgba(94,234,212,0.5)" : "rgba(255,255,255,0.16)",
+        background: hover ? "rgba(255,255,255,0.08)" : "transparent",
+        color: hover ? "var(--skl-color-brand-bright)" : "var(--skl-color-on-dark-muted)",
+      };
+
   return (
     <button
       type="button"
@@ -91,10 +167,11 @@ export function TopBarIconButton({
         alignItems: "center",
         justifyContent: "center",
         cursor: "pointer",
-        background: hover ? "rgba(255,255,255,0.08)" : "transparent",
-        border: `1px solid ${hover ? "rgba(94,234,212,0.5)" : "rgba(255,255,255,0.16)"}`,
-        color: hover ? "var(--skl-color-brand-bright)" : "var(--skl-color-on-dark-muted)",
-        transition: "background .12s, border-color .12s, color .12s",
+        flex: "0 0 auto",
+        background: palette.background,
+        border: `1px solid ${palette.border}`,
+        color: palette.color,
+        transition: "background .14s, border-color .14s, color .14s",
         ...style,
       }}
       {...props}
@@ -103,3 +180,9 @@ export function TopBarIconButton({
     </button>
   );
 }
+
+/**
+ * Alias for {@link TopBar} under its platform-app-bar name. Same component,
+ * same props — use whichever import name the app standardizes on.
+ */
+export { TopBar as DesktopActionBar };

package/src/index.ts

@@ -1,9 +1,12 @@
 export { ProfileMenu } from "./ProfileMenu.js";
 export type { ProfileMenuProps, ProfileMenuUser, ProfileMenuLinkArgs } from "./ProfileMenu.js";
 export { AppBadge } from "./AppBadge.js";
-export { AppLogo } from "./AppLogo.js";
+export { AppLogo, APP_GLYPHS, appGlyphForSlug } from "./AppLogo.js";
 export type { AppGlyph } from "./AppLogo.js";
-export { TopBar, TopBarIconButton } from "./TopBar.js";
+export { TopBar, TopBarIconButton, DesktopActionBar } from "./TopBar.js";
+export type { TopBarTone } from "./TopBar.js";
+export { SidebarNav } from "./SidebarNav.js";
+export type { SidebarNavProps, SidebarNavSection, SidebarNavItem, SidebarNavLinkArgs } from "./SidebarNav.js";
 export { BottomNav } from "./BottomNav.js";
 export type { BottomNavProps, BottomNavTab, BottomNavAction } from "./BottomNav.js";
 export { ShareMenu } from "./ShareMenu.js";