@flamingo-stack/openframe-frontend-core 0.0.493 → 0.0.494

package/src/components/navigation/mingo-ai-button.tsx

@@ -28,8 +28,8 @@ export interface MingoAiButtonProps extends React.ButtonHTMLAttributes<HTMLButto
  * not merge them.
  *
  * Deliberately a raw `<button>` rather than the ui-kit `Button`: it needs
- * full-height flush layout, an absolutely-positioned glow child, and icon-only
- * collapse that `Button` cannot express (same precedent as
+ * full-height flush cell layout, an absolutely-positioned animated ring, and
+ * icon-only collapse that `Button` cannot express (same precedent as
  * `header-mingo-button.tsx`).
  */
 const MINGO_ACCENT = 'var(--ods-flamingo-cyan-base)'
@@ -48,23 +48,23 @@ export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onC
         onClick?.(e)
       }}
       className={cn(
-        // `--spacing-system-l` is itself responsive (16px, 24px from 800px):
-        // the compact mobile padding keeps the 375px header row
-        // (logo + CTA + burger + Mingo) inside one viewport per Figma
-        // 3924-35639 (mobile) / 4033-90260 (desktop).
-        'group/mingo relative flex h-full items-center border-l border-ods-border bg-transparent px-[var(--spacing-system-l)] transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
+        // Unified ODS top-navigation cell (Figma 2797-6808 desktop /
+        // 2797-7275 mobile): full-height cell with a leading divider,
+        // transparent at rest so it inherits the bar's background.
+        'group/mingo relative flex h-full shrink-0 items-center border-l border-ods-border bg-transparent px-[var(--spacing-system-m)] transition-colors duration-200 hover:bg-ods-bg-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
         className,
       )}
     >
-      {/* Inner box = 1:1 twin of the ui-kit Button geometry the header CTA
-          uses (rounded-md, h-10 md:h-12, px m) so the animated ring traces
-          EXACTLY where a normal button border would sit. */}
-      <span className="relative flex h-10 items-center gap-[var(--spacing-system-s)] rounded-md px-[var(--spacing-system-m)] md:h-12">
+      {/* Inner box = 1:1 twin of the header CTA's `size="small"` Button
+          geometry (rounded-md, h-6 md:h-8) so the animated ring traces
+          exactly where a normal small-button border would sit inside the
+          48/56px cell. */}
+      <span className="relative flex h-6 items-center gap-[var(--spacing-system-xsf)] rounded-md px-[var(--spacing-system-xsf)] md:h-8">
         {/* AI edge light (Apple-Intelligence-style): a rotating accent-
-            gradient arc clipped to a 3px ring on the Button-shaped outline
-            via CSS mask (.mingo-edge-frame) — NO opaque cover, so the
-            launcher inherits whatever background sits behind it. Platform-
-            tinted via the accent token. */}
+            gradient arc clipped to a 3px ring on the box outline via CSS
+            mask (.mingo-edge-frame) — NO opaque cover, so the launcher
+            inherits whatever background sits behind it. Platform-tinted via
+            the accent token. */}
         <span aria-hidden="true" className="mingo-edge-frame pointer-events-none absolute inset-0 rounded-md">
           <span className="mingo-edge" />
         </span>
@@ -72,7 +72,10 @@ export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onC
         <span aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden rounded-md">
           <span
             className="mingo-shimmer absolute inset-y-0 left-0 w-1/2"
-            style={{ background: 'linear-gradient(105deg, transparent, color-mix(in srgb, var(--ods-system-greys-white) 12%, transparent), transparent)' }}
+            style={{
+              background:
+                'linear-gradient(105deg, transparent, color-mix(in srgb, var(--ods-system-greys-white) 12%, transparent), transparent)',
+            }}
           />
         </span>
         {icon ? (
@@ -85,9 +88,11 @@ export function MingoAiButton({ source, icon, label = 'Mingo AI', className, onC
             className="relative h-6 w-6 shrink-0 text-ods-text-primary"
           />
         )}
-        <span className="relative hidden whitespace-nowrap text-h3 font-bold tracking-[-0.36px] text-ods-text-primary md:inline">
-          {label}
-        </span>
+        {/* Wordmark collapses below md — the mobile cell is icon-only per
+            spec. `text-code` (sentence-case mono caption, matching the small
+            CTA next to it) by product decision — the Figma wordmark is h3
+            bold; flagged for the designer. */}
+        <span className="relative hidden whitespace-nowrap text-code text-ods-text-primary md:inline">{label}</span>
       </span>
     </button>
   )

package/src/components/navigation/mobile-nav-panel.tsx

@@ -103,9 +103,12 @@ export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
         className={cn(
           "fixed z-[9999] rounded-lg shadow-xl",
           config.className ? "" : "bg-ods-card border border-ods-border",
-          // Responsive positioning and sizing
-          "right-2 left-2 md:left-auto",
-          "md:right-6 md:w-[400px] md:max-w-[calc(100vw-3rem)]",
+          // Responsive positioning and sizing — LEFT-anchored from md, under
+          // the burger cell that sits at the left edge of the unified
+          // top-navigation (it used to be right-anchored when the burger
+          // lived on the right).
+          "right-2 left-2 md:right-auto",
+          "md:left-6 md:w-[400px] md:max-w-[calc(100vw-3rem)]",
           // Small-viewport (svh) sizing anchored below the measured header —
           // 100vh overflowed under mobile browser chrome, leaving the bottom
           // entries and footer unreachable while the body was scroll-locked.

package/src/components/navigation/top-navigation.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import React from 'react';
+import { cn } from '../../utils/cn';
+
+export type TopNavigationCenterBreakpoint = 'md' | 'lg';
+
+// Literal class maps — Tailwind's scanner needs the full class strings.
+const CENTER_VISIBILITY: Record<TopNavigationCenterBreakpoint, string> = {
+  md: 'hidden md:flex',
+  lg: 'hidden lg:flex',
+};
+const LOGO_GROW: Record<TopNavigationCenterBreakpoint, string> = {
+  md: 'flex-1 md:flex-none',
+  lg: 'flex-1 lg:flex-none',
+};
+
+export interface TopNavigationProps extends React.HTMLAttributes<HTMLElement> {
+  /** Leading cells (burger toggle, admin-sidebar toggle). Rendered raw, first
+   *  in the row — cells carry their own trailing divider
+   *  (`border-r border-ods-border`), matching the ODS spec where dividers
+   *  belong to the cells, not the bar. */
+  leading?: React.ReactNode;
+  /** Logo zone content. Grows (`flex-1`) below `centerBreakpoint`, shrinks to
+   *  content above it. Wrap in a `<Link>` on the consumer side if clickable. */
+  logo?: React.ReactNode;
+  /** Extra classes for the logo zone. Defaults follow the ODS spec paddings:
+   *  `p-m` on mobile, `pl-l` (24px) from md, `pl-xxl` (80px) from lg — the
+   *  desktop inset mirrors the leading menu-cell width so centered nav links
+   *  sit visually centered (Figma 2797-6808 / 2805-6194). */
+  logoClassName?: string;
+  /** Center zone (marketing nav links, console global search). Hidden below
+   *  `centerBreakpoint`; above it, it is the `flex-1` region that pushes the
+   *  CTA and side actions to the right edge. Rendered even when empty so the
+   *  bar always has its spacer. */
+  center?: React.ReactNode;
+  centerClassName?: string;
+  /** Breakpoint at which the center zone appears (and the logo zone stops
+   *  growing). ODS spec default is `lg` (nav links are desktop-only);
+   *  the console header uses `md` for its global search. */
+  centerBreakpoint?: TopNavigationCenterBreakpoint;
+  /** CTA zone — right-aligned, padded, no dividers (per ODS spec). */
+  cta?: React.ReactNode;
+  ctaClassName?: string;
+  /** Trailing action cells (time tracker, notifications, avatar, Mingo).
+   *  Rendered raw — each cell carries its own leading divider
+   *  (`border-l border-ods-border`). */
+  sideActions?: React.ReactNode;
+  /** Opaque ODS background class. Defaults to `bg-ods-card`. Keep it opaque —
+   *  translucent backgrounds under a sticky bar need a deliberate
+   *  backdrop-blur treatment (see the note in `header.tsx`). */
+  backgroundClassName?: string;
+  /** Top border on mobile (the ODS spec bar shows it below md). Default true. */
+  mobileTopBorder?: boolean;
+}
+
+const hasContent = (node: React.ReactNode): boolean => node !== null && node !== undefined && node !== false;
+
+/**
+ * Unified ODS top-navigation bar (Figma `[UPD] top-navigation`, node
+ * 2797-5978): the single 48px/56px (mobile / md+) cell-based header shell
+ * shared by the console `AppHeader` and the marketing `Header` across all
+ * platforms.
+ *
+ * The shell owns the bar geometry only — height, borders, background, and the
+ * zone layout `[leading][logo][center][cta][sideActions]`. What goes inside
+ * the zones (and each cell's divider) is the consumer's job, so platforms can
+ * differ in background and in which elements they mount without forking the
+ * bar itself.
+ */
+export function TopNavigation({
+  leading,
+  logo,
+  logoClassName,
+  center,
+  centerClassName,
+  centerBreakpoint = 'lg',
+  cta,
+  ctaClassName,
+  sideActions,
+  backgroundClassName,
+  mobileTopBorder = true,
+  className,
+  children,
+  ...props
+}: TopNavigationProps) {
+  return (
+    <header
+      className={cn(
+        'flex h-12 w-full items-center border-b border-ods-border md:h-14',
+        mobileTopBorder && 'border-t md:border-t-0',
+        backgroundClassName ?? 'bg-ods-card',
+        className,
+      )}
+      {...props}
+    >
+      {leading}
+      {hasContent(logo) && (
+        <div
+          className={cn(
+            'flex h-full min-w-0 items-center',
+            LOGO_GROW[centerBreakpoint],
+            'p-[var(--spacing-system-m)] md:py-0 md:pr-0 md:pl-[var(--spacing-system-l)] lg:pl-[var(--spacing-system-xxl)]',
+            logoClassName,
+          )}
+        >
+          {logo}
+        </div>
+      )}
+      <div
+        className={cn(
+          CENTER_VISIBILITY[centerBreakpoint],
+          'h-full min-w-0 flex-1 items-center justify-center',
+          centerClassName,
+        )}
+      >
+        {center}
+      </div>
+      {hasContent(cta) && (
+        <div className={cn('flex h-full shrink-0 items-center px-[var(--spacing-system-m)]', ctaClassName)}>{cta}</div>
+      )}
+      {sideActions}
+      {children}
+    </header>
+  );
+}
+
+export default TopNavigation;

package/src/stories/AppHeader.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { fn } from 'storybook/test';
+
+import { TimeTrackerProvider } from '../components/features/time-tracker';
+import { AppHeader } from '../components/navigation/app-header';
+
+const trackerCallbacks = {
+  onSelectedTicketChange: fn(),
+  onNotesChange: fn(),
+  onStart: fn(),
+  onPause: fn(),
+  onResume: fn(),
+  onCancel: fn(),
+  onSubmit: fn(),
+};
+
+const meta = {
+  title: 'Navigation/AppHeader',
+  component: AppHeader,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Console top bar built on the unified `TopNavigation` shell (Figma 2797-5978): 48px mobile / 56px md+, ' +
+          'cell model with per-cell dividers. Cells left→right: burger + logo (mobile only), global search (md+), ' +
+          'organizations filter (lg+), time tracker, notifications, user menu (md+), Mingo AI. ' +
+          'Resize the viewport across 800px / 1280px to see the responsive arrangement.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  args: {
+    isMobileMenuOpen: false,
+    onToggleMobileMenu: fn(),
+  },
+  decorators: [
+    Story => (
+      <div style={{ minHeight: '50vh', backgroundColor: 'var(--ods-bg)' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AppHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Everything the console mounts: search, organizations filter, notifications,
+ * user menu and the Mingo AI launcher.
+ */
+export const Default: Story = {
+  args: {
+    showSearch: true,
+    onSearch: fn(),
+    showOrganizations: true,
+    organizations: [
+      { id: '1', name: 'Acme Corp' },
+      { id: '2', name: 'Globex' },
+    ],
+    selectedOrgId: '1',
+    onOrgChange: fn(),
+    showNotifications: true,
+    unreadCount: 3,
+    showUser: true,
+    userName: 'Jane Doe',
+    userEmail: 'jane@example.com',
+    onProfile: fn(),
+    onLogout: fn(),
+    showMingoAI: true,
+    onMingoAI: fn(),
+  },
+};
+
+/**
+ * Minimal bar — no search or organizations, so the center zone is just the
+ * spacer pushing the action cells right (the current OpenFrame FE setup).
+ */
+export const Minimal: Story = {
+  args: {
+    showNotifications: true,
+    showUser: true,
+    userName: 'Jane Doe',
+    userEmail: 'jane@example.com',
+    showMingoAI: true,
+    onMingoAI: fn(),
+  },
+};
+
+/**
+ * Idle time tracker: a square icon cell, same footprint as the other cells.
+ */
+export const WithTimeTrackerIdle: Story = {
+  args: {
+    ...Minimal.args,
+    showTimeTracker: true,
+  },
+  render: args => (
+    <TimeTrackerProvider
+      status="ready"
+      ticketOptions={[]}
+      selectedTicketId={null}
+      notes=""
+      lastEntries={[]}
+      {...trackerCallbacks}
+    >
+      <AppHeader {...args} />
+    </TimeTrackerProvider>
+  ),
+};
+
+/**
+ * Active time tracker per the ODS spec: on mobile the cell keeps its square
+ * icon-only footprint (accent icon, no digits); from md up it becomes a fixed
+ * 144px cell with the live mono clock.
+ */
+export const WithTimeTrackerActive: Story = {
+  args: {
+    ...Minimal.args,
+    showTimeTracker: true,
+  },
+  render: args => (
+    <TimeTrackerProvider
+      status="tracking"
+      runningSince={Date.now() - 4_000}
+      accumulatedMs={0}
+      ticketOptions={[]}
+      selectedTicketId={null}
+      notes=""
+      lastEntries={[]}
+      {...trackerCallbacks}
+    >
+      <AppHeader {...args} />
+    </TimeTrackerProvider>
+  ),
+};
+
+/**
+ * Disabled (subscription-lock) state: every cell is dimmed and inert except
+ * the mobile burger toggle.
+ */
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};

package/src/stories/Header.stories.tsx

@@ -10,9 +10,7 @@ import type { HeaderConfig } from '../types/navigation';
 const flamingoLogo = (
   <div className="flex items-center gap-2">
     <FlamingoLogo className="h-8 w-8" />
-    <span className="font-['DM_Sans'] font-bold text-[18px] text-ods-text-primary">
-      Flamingo
-    </span>
+    <span className="font-['DM_Sans'] font-bold text-[18px] text-ods-text-primary">Flamingo</span>
   </div>
 );
 
@@ -62,13 +60,15 @@ const meta = {
     docs: {
       description: {
         component:
-          'Top navigation header with dropdown menus. Dropdown children are **always rendered in the DOM** — toggled via `visibility`/`opacity` — so their `<a href>` links are present in the initial HTML for SEO crawlers (no more "orphan" pages). Hidden anchors are automatically excluded from tab order and the accessibility tree via `visibility: hidden` + `aria-hidden`.',
+          'Marketing/site header built on the unified `TopNavigation` shell (Figma `[UPD] top-navigation`, node 2797-5978): ' +
+          '48px mobile / 56px md+ bar, cell model, burger as a leading cell below `lg`, nav links centered from `lg`. ' +
+          'Dropdown children are **always rendered in the DOM** — toggled via `visibility`/`opacity` — so their `<a href>` links are present in the initial HTML for SEO crawlers (no more "orphan" pages). Hidden anchors are automatically excluded from tab order and the accessibility tree via `visibility: hidden` + `aria-hidden`.',
       },
     },
   },
   tags: ['autodocs'],
   decorators: [
-    (Story) => (
+    Story => (
       <div style={{ minHeight: '100vh', backgroundColor: 'var(--ods-bg)' }}>
         <Story />
         <div style={{ padding: '2rem', color: 'var(--ods-text-primary)' }}>
@@ -114,12 +114,10 @@ export const DropdownOpen: Story = {
       mobile: { enabled: true, onToggle: fn() },
     } satisfies HeaderConfig,
   },
-  render: (args) => {
+  render: args => {
     useEffect(() => {
       // Simulate user click on the first dropdown trigger after mount
-      const trigger = document.querySelector<HTMLButtonElement>(
-        'nav button'
-      );
+      const trigger = document.querySelector<HTMLButtonElement>('nav button');
       trigger?.click();
     }, []);
     return <Header {...args} />;
@@ -142,15 +140,13 @@ export const SeoLinksAlwaysInDom: Story = {
       mobile: { enabled: true, onToggle: fn() },
     } satisfies HeaderConfig,
   },
-  render: (args) => {
+  render: args => {
     const [linkHrefs, setLinkHrefs] = useState<string[]>([]);
 
     useEffect(() => {
       const collect = () => {
-        const anchors = document.querySelectorAll<HTMLAnchorElement>(
-          'header nav a[href]'
-        );
-        setLinkHrefs(Array.from(anchors, (a) => a.getAttribute('href') || ''));
+        const anchors = document.querySelectorAll<HTMLAnchorElement>('header nav a[href]');
+        setLinkHrefs(Array.from(anchors, a => a.getAttribute('href') || ''));
       };
       collect();
       const interval = window.setInterval(collect, 500);
@@ -169,8 +165,8 @@ export const SeoLinksAlwaysInDom: Story = {
           }}
         >
           <p style={{ marginBottom: 12 }}>
-            <strong>{linkHrefs.length}</strong> anchor(s) currently in the
-            header DOM (visible to crawlers regardless of dropdown state):
+            <strong>{linkHrefs.length}</strong> anchor(s) currently in the header DOM (visible to crawlers regardless of
+            dropdown state):
           </p>
           <ul style={{ lineHeight: 1.8 }}>
             {linkHrefs.map((href, i) => (
@@ -199,12 +195,12 @@ export const FixedHeader: Story = {
 };
 
 /**
- * Header with the Mingo AI launcher enabled via `config.mingo`. `MingoAiButton`
- * renders after the mobile toggle, so below `lg` the right cluster reads
- * `Try for Free | hamburger | Mingo AI`; at `lg+` the hamburger is hidden and it
- * collapses to `Try for Free | Mingo AI`, with Mingo full-height and flush to the
- * right edge (its left border acts as the divider). Resize under 800px to see the
- * Mingo label collapse to icon-only. Clicking it dispatches an `ask-ai:open` event.
+ * Header with the Mingo AI launcher enabled via `config.mingo`. Per the unified
+ * top-navigation spec the burger is a **leading** cell (left edge, below `lg`),
+ * so the bar reads `hamburger | logo … Try for Free | Mingo AI`, with Mingo
+ * full-height and flush to the right edge (its left border acts as the
+ * divider). Resize under 800px to see the Mingo label collapse to icon-only.
+ * Clicking it dispatches an `ask-ai:open` event.
  */
 export const WithMingoAi: Story = {
   args: {
@@ -221,7 +217,6 @@ export const WithMingoAi: Story = {
       autoHide: false,
       mobile: { enabled: true, onToggle: fn() },
       mingo: { enabled: true, source: 'flamingo' },
-      className: 'px-0',
     } satisfies HeaderConfig,
   },
 };

package/src/stories/TopNavigation.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { fn } from 'storybook/test';
+
+import { OpenFrameLogo, OpenFrameText } from '../components/icons';
+import { ClockHistoryIcon } from '../components/icons-v2-generated/date-and-time/clock-history-icon';
+import { BellIcon } from '../components/icons-v2-generated/interface/bell-icon';
+import { HeaderButton } from '../components/navigation/header-button';
+import { HeaderMingoButton } from '../components/navigation/header-mingo-button';
+import { TopNavigation } from '../components/navigation/top-navigation';
+import { Button } from '../components/ui/button';
+
+const logo = (
+  <>
+    <OpenFrameLogo
+      className="h-6 w-6 shrink-0"
+      upperPathColor="var(--color-text-primary)"
+      lowerPathColor="var(--color-accent-primary)"
+    />
+    <OpenFrameText textColor="var(--color-text-primary)" className="h-4" />
+  </>
+);
+
+const navLinks = (
+  <nav className="flex items-center gap-2" aria-label="Main navigation">
+    {['OpenFrame', 'OpenMSP', 'Resources', 'Pricing'].map(label => (
+      <Button key={label} variant="transparent" size="small-legacy" className="text-h3 font-bold tracking-[-0.36px]">
+        {label}
+      </Button>
+    ))}
+  </nav>
+);
+
+const burgerCell = (
+  <HeaderButton
+    className="border-r border-ods-border lg:hidden"
+    aria-label="Open menu"
+    onClick={fn()}
+    icon={
+      <svg className="h-4 w-4 md:h-6 md:w-6" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      </svg>
+    }
+  />
+);
+
+const sideActionCells = (
+  <>
+    <HeaderButton
+      className="border-l border-ods-border"
+      aria-label="Time tracker"
+      icon={<ClockHistoryIcon className="h-4 w-4 md:h-6 md:w-6" />}
+    />
+    <HeaderButton
+      className="border-l border-ods-border"
+      aria-label="Notifications"
+      icon={<BellIcon className="h-4 w-4 md:h-6 md:w-6" />}
+    />
+    <HeaderMingoButton className="border-l border-ods-border" onClick={fn()} />
+  </>
+);
+
+const meta = {
+  title: 'Navigation/TopNavigation',
+  component: TopNavigation,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Unified ODS top-navigation shell (Figma `[UPD] top-navigation`, node 2797-5978). ' +
+          'Owns the bar geometry only — 48px mobile / 56px md+ height, top/bottom borders, background — and the zone layout ' +
+          '`[leading][logo][center][cta][sideActions]`. Dividers belong to the cells (`border-l` / `border-r`), not the bar. ' +
+          'Consumers: the console `AppHeader` (centerBreakpoint `md`, global search in the center zone) and the marketing ' +
+          '`Header` (centerBreakpoint `lg`, nav links in the center zone). Resize the viewport to see the tablet burger and ' +
+          'the mobile arrangement.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    centerBreakpoint: { control: 'radio', options: ['md', 'lg'] },
+    backgroundClassName: { control: 'text' },
+    mobileTopBorder: { control: 'boolean' },
+  },
+  decorators: [
+    Story => (
+      <div style={{ minHeight: '50vh', backgroundColor: 'var(--ods-bg)' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TopNavigation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The full marketing arrangement per the Figma spec: burger (below `lg`),
+ * logo (grows below `lg`), centered nav links (from `lg`), CTA and the
+ * side-action cells. Resize across 800px / 1280px to see all three device
+ * variants.
+ */
+export const MarketingFull: Story = {
+  args: {
+    leading: burgerCell,
+    logo,
+    logoClassName: 'gap-2',
+    center: navLinks,
+    cta: (
+      <Button variant="accent" size="small" onClick={fn()}>
+        Try for Free
+      </Button>
+    ),
+    sideActions: sideActionCells,
+  },
+};
+
+/**
+ * Console-style arrangement: no logo/nav (the app sidebar owns branding),
+ * `centerBreakpoint="md"` so the center zone (here just the spacer) starts at
+ * 800px, side-action cells flush right. This is the shape `AppHeader` renders.
+ */
+export const ConsoleShape: Story = {
+  args: {
+    centerBreakpoint: 'md',
+    sideActions: sideActionCells,
+  },
+};
+
+/**
+ * Per-platform background override — platforms may run the bar on `bg-ods-bg`
+ * instead of the default `bg-ods-card`. Keep the override opaque.
+ */
+export const CustomBackground: Story = {
+  args: {
+    ...MarketingFull.args,
+    backgroundClassName: 'bg-ods-bg',
+  },
+};
+
+/**
+ * Logo-only bar (e.g. the `openframe` platform in the hub): every optional
+ * zone omitted — the logo zone grows and nothing else renders.
+ */
+export const LogoOnly: Story = {
+  args: {
+    logo,
+    logoClassName: 'gap-2',
+  },
+};