@keboola/design 2.0.1 → 2.1.0

package/src/blocks/PageHeader/AGENTS.md

@@ -1,137 +0,0 @@
-# PageHeader
-
-Structured page-header block that encodes the
-[evviku page-header patterns](https://github.com/evviku/design-system-docs/tree/main/docs/patterns/page-header)
-1:1 at the type level. Two discriminated variants:
-
-- `PageHeader.Index` — top-level list/collection pages.
-- `PageHeader.Detail` — single-entity pages.
-
-The variant choice enforces the pattern constraints (e.g. you cannot pass an
-overflow menu to `Index`, or `metadata` to `Detail`). Reach for
-`PageLayout.Header` / `PageLayout.Breadcrumbs` only for layouts that don't fit
-either variant.
-
-## When to use which
-
-| Use `PageHeader.Index` when                            | Use `PageHeader.Detail` when                               |
-| ------------------------------------------------------ | ---------------------------------------------------------- |
-| The page is a top-level list (Flows, Storage, Jobs, …) | The page shows one entity (a bucket, flow, data app, …)    |
-| There is no parent in the same section                 | The entity has a parent hierarchy worth breadcrumbing      |
-| The primary action is "create / add a new X"           | The primary action is "edit / deploy / run on this entity" |
-
-## API at a glance
-
-```tsx
-// Index — no breadcrumbs, metadata > description, optional headerNav.
-<PageHeader.Index
-  title="Storage"
-  metadata="3 buckets and 39 tables"  // or `description` (mutually exclusive)
-  documentation={<Button argo variant="invisible" icon="book-blank" />}
-  action={<Button argo>New bucket</Button>}
-  headerNav={<Tabs ... />}
-/>
-
-// Detail — mandatory breadcrumbs, overflow row, ≤2 visible actions.
-<PageHeader.Detail
-  breadcrumbs={<Breadcrumb>...</Breadcrumb>}
-  overflowActions={<DropdownMenu>...</DropdownMenu>}
-  title="Marketing bucket"
-  badges={<><Badge>Active</Badge></>}
-  description="..."
-  secondaryAction={<Button argo variant="secondary">Open editor</Button>}
-  primaryAction={<Button argo>Deploy</Button>}
-  headerNav={<Tabs ... />}
-/>
-```
-
-## Rules from the patterns
-
-- **Index**: no breadcrumbs, no overflow menu, no search/filter/sort. Search
-  belongs in `PageToolbar`.
-- **Detail**: breadcrumbs are required (use real entity names; last item is
-  not a link). Overflow menu lives on the breadcrumbs row, never in the title
-  row.
-- **Max 2 visible actions on Detail** (`primaryAction` + optional
-  `secondaryAction`). Everything else goes in `overflowActions`.
-- **`metadata` wins over `description`** on Index. Pass `metadata` for count
-  / system summaries; reserve `description` for prose.
-- **`headerNav` only when there is >1 dataset / section** worth navigating to.
-
-## Component rules
-
-- **Always opt into the `argo` variant** on the Buttons you pass into the
-  slots (`Button argo …`).
-- **Compose** existing `Breadcrumb`, `Badge`, `DropdownMenu`, `Tabs` from
-  `@keboola/design` — slots take any `ReactNode`, but use the design-system
-  pieces.
-- Title and description can be any `ReactNode`. For Linear-style inline
-  editing, compose `MarkdownEditor` (from `@keboola/design`) directly into
-  the slots — `PageHeader` does not depend on Lexical itself; only callers
-  that opt into editing pull it in.
-
-## Inline editing
-
-The `title` and `description` slots accept any `ReactNode`, so they can hold
-an editable `MarkdownEditor` in place of the static text. Follows the
-[inline-editable-text pattern](https://github.com/evviku/design-system-docs/tree/main/docs/patterns/inline-editable-text):
-
-- **No edit icon, no save / cancel buttons.**
-- **Blur, Cmd+Enter, or Enter (title only) commits** via `onSave`.
-- **Esc reverts** via `onCancel` — the caller resets state to the last
-  committed value inside this handler.
-- **Description clamps to ~2 lines with a bottom fade** in display state
-  (use the `clampDisplay` prop); focus expands to full height. Fade
-  replaces ellipsis per the spec.
-
-Use `compact` + `saveOnBlur` for both slots, plus `singleLine` for the
-title and `clampDisplay` for the description. Maintain a two-state
-(`committed` / `draft`) pattern so `onCancel` can revert without losing
-the committed value:
-
-```tsx
-import { MarkdownEditor } from '@keboola/design';
-
-const [committedTitle, setCommittedTitle] = useState(initial.title);
-const [draftTitle, setDraftTitle] = useState(committedTitle);
-// (same for description)
-
-<PageHeader.Detail
-  breadcrumbs={...}
-  title={
-    <MarkdownEditor
-      compact singleLine saveOnBlur
-      value={draftTitle}
-      onChange={setDraftTitle}
-      onSave={() => { setCommittedTitle(draftTitle); save({ title: draftTitle }); }}
-      onCancel={() => setDraftTitle(committedTitle)}
-      placeholder="Untitled"
-      className="tw-m-0 tw-text-3xl tw-font-semibold tw-leading-9 tw-text-foreground tw-break-words"
-    />
-  }
-  description={
-    <MarkdownEditor
-      compact saveOnBlur clampDisplay
-      value={draftDescription}
-      onChange={setDraftDescription}
-      onSave={() => { setCommittedDescription(draftDescription); save({ description: draftDescription }); }}
-      onCancel={() => setDraftDescription(committedDescription)}
-      placeholder="Add a description…"
-      className="tw-m-0 tw-max-w-[800px] tw-break-words tw-text-sm tw-leading-5 tw-text-muted-foreground"
-    />
-  }
-  primaryAction={...}
-/>;
-```
-
-The `titleClass` / `descriptionClass` constants exported from
-`./styles.ts` carry the canonical typography — pass them through
-`className` so the editor visually matches the static variant.
-
-## Stories
-
-- `IndexFlows` — description + secondary/primary actions, no header nav.
-- `IndexStorage` — `metadata` count summary + 5-tab `headerNav`.
-- `DetailBucket` — breadcrumbs + overflow + badges + primary action.
-- `DetailEditable` — inline-editable title + description via `MarkdownEditor`.
-- `DetailDataApp` — primary + secondary actions + 3-tab `headerNav`.

package/src/blocks/PageHeader/PageHeader.stories.tsx

@@ -1,371 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import {
-  BookOpen,
-  Bug,
-  Copy,
-  EllipsisVertical,
-  Trash2,
-  Upload,
-  Users,
-} from '@keboola/design/icons';
-
-import { Badge } from '../../components/Badge';
-import { Breadcrumb } from '../../components/Breadcrumb';
-import { Button } from '../../components/Button';
-import { DropdownMenu } from '../../components/DropdownMenu';
-import { MarkdownEditor } from '../../components/MarkdownEditor';
-import { Tabs, TabsContent } from '../../components/Tabs';
-import { PageLayout } from '../PageLayout';
-import { PageToolbar } from '../PageToolbar';
-import { SplitButton } from '../SplitButton';
-
-import { PageHeader } from './PageHeader';
-import { descriptionClass, titleClass } from './styles';
-
-type Story = StoryObj<typeof PageHeader.Index>;
-
-export default {
-  component: PageHeader.Index,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Structured page-header block matching the [evviku page-header patterns](https://github.com/evviku/design-system-docs/tree/main/docs/patterns/page-header). Two discriminated variants — `PageHeader.Index` (top-level list pages, no breadcrumbs) and `PageHeader.Detail` (entity pages, mandatory breadcrumbs + overflow row + ≤2 visible actions). The variant chosen at the type level enforces the pattern constraints (e.g. you cannot pass an overflow menu to `Index`, or `metadata` to `Detail`).',
-      },
-    },
-  },
-} satisfies Meta<typeof PageHeader.Index>;
-
-const Placeholder = ({ label, height = 'tw-h-48' }: { label: string; height?: string }) => (
-  <div
-    className={`tw-flex tw-items-center tw-justify-center tw-rounded tw-border tw-border-dashed tw-border-border tw-bg-muted/30 tw-text-sm tw-text-muted-foreground ${height}`}
-  >
-    {label}
-  </div>
-);
-
-// Index — Flows (description + primary + secondary actions, no header nav).
-export const IndexFlows: Story = {
-  render: () => (
-    <PageLayout>
-      <PageHeader.Index
-        title="Flows"
-        description="Build flows with branching logic and conditions. Tasks run based on previous results, errors, or custom expressions."
-        documentation={
-          <Button argo variant="invisible" aria-label="Documentation">
-            <BookOpen className="tw-size-4" />
-          </Button>
-        }
-        action={
-          <>
-            <Button argo variant="secondary" onClick={() => {}}>
-              New folder
-            </Button>
-            <Button argo onClick={() => {}}>
-              New flow
-            </Button>
-          </>
-        }
-      />
-      <PageToolbar>
-        <PageToolbar.Search>
-          <Placeholder label="Search input + filter pills" height="tw-h-10" />
-        </PageToolbar.Search>
-      </PageToolbar>
-      <PageLayout.Content>
-        <Placeholder label="EntityList" height="tw-h-96" />
-      </PageLayout.Content>
-    </PageLayout>
-  ),
-};
-
-// Index — Storage (metadata + header nav + SplitButton primary action).
-// SSOT example: `action.type = "button-group"` → SplitButton in our design system.
-export const IndexStorage: Story = {
-  render: () => (
-    <PageLayout>
-      <PageHeader.Index
-        title="Storage"
-        metadata="3 buckets and 39 tables"
-        documentation={
-          <Button argo variant="invisible" aria-label="Documentation">
-            <BookOpen className="tw-size-4" />
-          </Button>
-        }
-        action={
-          <SplitButton
-            argo
-            onClick={() => {}}
-            actions={
-              <>
-                <SplitButton.Action onClick={() => {}}>Upload file</SplitButton.Action>
-                <SplitButton.Action icon="cloud-arrow-down" onClick={() => {}}>
-                  Import from external storage
-                </SplitButton.Action>
-              </>
-            }
-            icon={<Upload className="tw-size-4" />}
-          >
-            New bucket
-          </SplitButton>
-        }
-        headerNav={
-          <Tabs
-            defaultValue="tables"
-            triggers={[
-              { value: 'tables', title: 'Tables & Buckets' },
-              { value: 'files', title: 'Files' },
-              { value: 'data-streams', title: 'Data Streams' },
-              { value: 'storage-jobs', title: 'Storage Jobs' },
-              { value: 'events', title: 'Events' },
-            ]}
-          >
-            <TabsContent value="tables">
-              <Placeholder label="Tables & Buckets list" height="tw-h-96" />
-            </TabsContent>
-            <TabsContent value="files">
-              <Placeholder label="Files list" height="tw-h-96" />
-            </TabsContent>
-            <TabsContent value="data-streams">
-              <Placeholder label="Data Streams list" height="tw-h-96" />
-            </TabsContent>
-            <TabsContent value="storage-jobs">
-              <Placeholder label="Storage Jobs list" height="tw-h-96" />
-            </TabsContent>
-            <TabsContent value="events">
-              <Placeholder label="Events list" height="tw-h-96" />
-            </TabsContent>
-          </Tabs>
-        }
-      />
-    </PageLayout>
-  ),
-};
-
-// Detail — bucket (breadcrumbs + overflow + badges + primary action).
-export const DetailBucket: Story = {
-  render: () => (
-    <PageLayout>
-      <PageHeader.Detail
-        breadcrumbs={
-          <Breadcrumb>
-            <Breadcrumb.List>
-              <Breadcrumb.Item>
-                <Breadcrumb.Link href="#">Storage</Breadcrumb.Link>
-              </Breadcrumb.Item>
-              <Breadcrumb.Separator />
-              <Breadcrumb.Item>
-                <Breadcrumb.Page>Marketing bucket</Breadcrumb.Page>
-              </Breadcrumb.Item>
-            </Breadcrumb.List>
-          </Breadcrumb>
-        }
-        overflowActions={
-          <DropdownMenu>
-            <DropdownMenu.Trigger asChild>
-              <Button argo variant="invisible" size="icon-sm" aria-label="More actions">
-                <EllipsisVertical className="tw-size-4" />
-              </Button>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content align="end">
-              <DropdownMenu.Item icon={<Copy className="tw-size-4" />}>Copy</DropdownMenu.Item>
-              <DropdownMenu.Item icon={<Users className="tw-size-4" />}>
-                Manage permissions
-              </DropdownMenu.Item>
-              <DropdownMenu.Separator />
-              <DropdownMenu.Item icon={<Trash2 className="tw-size-4" />}>Delete</DropdownMenu.Item>
-            </DropdownMenu.Content>
-          </DropdownMenu>
-        }
-        title="Marketing bucket"
-        badges={
-          <>
-            <Badge color="green">Active</Badge>
-            <Badge color="gray">Shared</Badge>
-          </>
-        }
-        description="Contains marketing datasets and transformation outputs."
-        primaryAction={
-          <SplitButton
-            argo
-            onClick={() => {}}
-            actions={
-              <>
-                <SplitButton.Action onClick={() => {}}>Upload CSV</SplitButton.Action>
-                <SplitButton.Action icon="link" onClick={() => {}}>
-                  Link existing table
-                </SplitButton.Action>
-              </>
-            }
-            icon={<Upload className="tw-size-4" />}
-          >
-            Add table
-          </SplitButton>
-        }
-      />
-      <PageLayout.Content>
-        <Placeholder label="Bucket detail body" height="tw-h-96" />
-      </PageLayout.Content>
-    </PageLayout>
-  ),
-};
-
-// Detail — editable (inline edit on title + description per the inline-editable-text pattern spec).
-const DetailEditableRender = () => {
-  // Two-state pattern: `committed` is what's persisted; `draft` tracks in-progress edits.
-  // onSave (blur / Cmd+Enter / Enter on title) commits draft → committed.
-  // onCancel (Esc) reverts draft ← committed.
-  const [committedTitle, setCommittedTitle] = useState('Marketing bucket');
-  const [draftTitle, setDraftTitle] = useState(committedTitle);
-  const [committedDescription, setCommittedDescription] = useState(
-    'Contains marketing datasets and transformation outputs. This description is intentionally long so you can see how the display state clamps to two lines with a bottom fade — focus the field and it expands to full height for editing.',
-  );
-  const [draftDescription, setDraftDescription] = useState(committedDescription);
-
-  return (
-    <PageLayout>
-      <PageHeader.Detail
-        breadcrumbs={
-          <Breadcrumb>
-            <Breadcrumb.List>
-              <Breadcrumb.Item>
-                <Breadcrumb.Link href="#">Storage</Breadcrumb.Link>
-              </Breadcrumb.Item>
-              <Breadcrumb.Separator />
-              <Breadcrumb.Item>
-                <Breadcrumb.Page>{committedTitle || 'Untitled'}</Breadcrumb.Page>
-              </Breadcrumb.Item>
-            </Breadcrumb.List>
-          </Breadcrumb>
-        }
-        title={
-          <MarkdownEditor
-            compact
-            singleLine
-            saveOnBlur
-            value={draftTitle}
-            onChange={setDraftTitle}
-            onSave={() => setCommittedTitle(draftTitle)}
-            onCancel={() => setDraftTitle(committedTitle)}
-            placeholder="Untitled"
-            className={titleClass}
-          />
-        }
-        badges={<Badge color="green">Active</Badge>}
-        description={
-          <MarkdownEditor
-            compact
-            saveOnBlur
-            clampDisplay
-            value={draftDescription}
-            onChange={setDraftDescription}
-            onSave={() => setCommittedDescription(draftDescription)}
-            onCancel={() => setDraftDescription(committedDescription)}
-            placeholder="Add a description…"
-            className={descriptionClass}
-          />
-        }
-        primaryAction={
-          <Button argo onClick={() => {}}>
-            Add table
-          </Button>
-        }
-      />
-      <PageLayout.Content>
-        <details className="tw-rounded tw-border tw-border-border tw-bg-muted/30 tw-p-4">
-          <summary className="tw-cursor-pointer tw-text-sm tw-text-muted-foreground">
-            Committed state (only updates on save — Esc reverts draft)
-          </summary>
-          <pre className="tw-mt-2 tw-whitespace-pre-wrap tw-text-xs">
-            {JSON.stringify({ title: committedTitle, description: committedDescription }, null, 2)}
-          </pre>
-        </details>
-      </PageLayout.Content>
-    </PageLayout>
-  );
-};
-
-export const DetailEditable: Story = {
-  render: () => <DetailEditableRender />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Inline editing per the [inline-editable-text pattern spec](https://github.com/evviku/design-system-docs/tree/main/docs/patterns/inline-editable-text). Click the title or description to edit in place; no edit icon, no save / cancel buttons. **Blur, Enter (title), or Cmd+Enter commits** via `onSave`. **Esc reverts** via `onCancel` (caller resets state to last committed). Description uses `clampDisplay` so it clamps to ~2 lines + bottom fade when not focused; focusing expands to full height. Both slots accept any `ReactNode`, so `PageHeader` stays Lexical-free.',
-      },
-    },
-  },
-};
-
-// Detail — sales dashboard (primary + secondary actions + header nav).
-export const DetailDataApp: Story = {
-  render: () => (
-    <PageLayout>
-      <PageHeader.Detail
-        breadcrumbs={
-          <Breadcrumb>
-            <Breadcrumb.List>
-              <Breadcrumb.Item>
-                <Breadcrumb.Link href="#">Data Apps</Breadcrumb.Link>
-              </Breadcrumb.Item>
-              <Breadcrumb.Separator />
-              <Breadcrumb.Item>
-                <Breadcrumb.Page>Sales dashboard</Breadcrumb.Page>
-              </Breadcrumb.Item>
-            </Breadcrumb.List>
-          </Breadcrumb>
-        }
-        overflowActions={
-          <DropdownMenu>
-            <DropdownMenu.Trigger asChild>
-              <Button argo variant="invisible" size="icon-sm" aria-label="More actions">
-                <EllipsisVertical className="tw-size-4" />
-              </Button>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content align="end">
-              <DropdownMenu.Item icon={<Copy className="tw-size-4" />}>Duplicate</DropdownMenu.Item>
-              <DropdownMenu.Item icon={<Bug className="tw-size-4" />}>Debug mode</DropdownMenu.Item>
-              <DropdownMenu.Separator />
-              <DropdownMenu.Item icon={<Trash2 className="tw-size-4" />}>Delete</DropdownMenu.Item>
-            </DropdownMenu.Content>
-          </DropdownMenu>
-        }
-        title="Sales dashboard"
-        badges={<Badge color="green">Running</Badge>}
-        secondaryAction={
-          <Button argo variant="secondary" onClick={() => {}}>
-            Open editor
-          </Button>
-        }
-        primaryAction={
-          <Button argo onClick={() => {}}>
-            Deploy
-          </Button>
-        }
-        headerNav={
-          <Tabs
-            defaultValue="overview"
-            triggers={[
-              { value: 'overview', title: 'Overview' },
-              { value: 'events', title: 'Events' },
-              { value: 'settings', title: 'Settings' },
-            ]}
-          >
-            <TabsContent value="overview">
-              <Placeholder label="Overview" height="tw-h-96" />
-            </TabsContent>
-            <TabsContent value="events">
-              <Placeholder label="Events" height="tw-h-96" />
-            </TabsContent>
-            <TabsContent value="settings">
-              <Placeholder label="Settings" height="tw-h-96" />
-            </TabsContent>
-          </Tabs>
-        }
-      />
-    </PageLayout>
-  ),
-};

package/src/blocks/PageHeader/PageHeader.tsx

@@ -1,22 +0,0 @@
-import { PageHeaderDetail } from './PageHeaderDetail';
-import { PageHeaderIndex } from './PageHeaderIndex';
-
-/**
- * Structured page-header block that encodes the evviku page-header patterns 1:1 at the type level.
- *
- * **When to use:** every kbc-ui page with a structured header (title + actions + optional badges /
- * description / tabs). Choose `PageHeader.Index` for list / collection pages, `PageHeader.Detail` for
- * single-entity pages with breadcrumbs.
- * **When NOT to use:** for layouts that don't match either pattern, host custom JSX inside
- * `PageLayout.Header` directly. For routing-driven tab rows below the header use `PageLayout.Tabs`.
- * **Composition:** nest inside `PageLayout.Header`. Always opt into `Button argo` for any buttons passed
- * into header slots. The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).
- *
- * @see RECIPES.md#page-header-tabs — for the canonical page-header + tabs composition
- */
-export const PageHeader = {
-  /** Index variant — top-level list / collection pages. No breadcrumbs; `metadata` wins over `description`. */
-  Index: PageHeaderIndex,
-  /** Detail variant — single-entity pages with required breadcrumbs and an overflow-actions slot. Max 2 visible actions. */
-  Detail: PageHeaderDetail,
-};

package/src/blocks/PageHeader/PageHeaderDetail.tsx

@@ -1,84 +0,0 @@
-import type { ComponentPropsWithoutRef, ElementRef, ReactNode, Ref } from 'react';
-
-import { cn } from '../../utils';
-
-import { badgesClass, descriptionClass, titleClass, titleRowClass } from './styles';
-
-// Detail page header — single entity pages (bucket, flow, data app, …).
-// Pattern: docs/patterns/page-header/detail/detail-page-header.md
-//   - Breadcrumbs are required; overflow menu sits on the breadcrumbs row.
-//   - Max two visible actions: `primaryAction` + optional `secondaryAction`.
-//   - All other actions belong in the breadcrumbs-row overflow menu.
-/**
- * Props for `PageHeader.Detail`. Detail pages enforce mandatory breadcrumbs, ≤ 2 visible actions, and an
- * overflow-menu slot on the breadcrumbs row.
- */
-type PageHeaderDetailProps = Omit<ComponentPropsWithoutRef<'header'>, 'title'> & {
-  /** `Breadcrumb` chain ending in the entity name (last item is not a link). Required. */
-  breadcrumbs: ReactNode;
-  /** `DropdownMenu` for tertiary actions. Sits on the breadcrumbs row, not the title row. */
-  overflowActions?: ReactNode;
-  title: ReactNode;
-  /** Inline `Badge`s rendered next to the title (status, environment, version). */
-  badges?: ReactNode;
-  description?: ReactNode;
-  /** Primary action (`Button argo`). Use the verb appropriate to the entity (Deploy / Run / Save). */
-  primaryAction?: ReactNode;
-  /** Optional second action (`Button argo variant="secondary"`). Everything beyond goes in `overflowActions`. */
-  secondaryAction?: ReactNode;
-  /** Optional `Tabs` row below the title block. */
-  headerNav?: ReactNode;
-};
-
-/**
- * Page header for single-entity pages.
- *
- * **When to use:** the page shows one entity (a bucket, flow, data app) with a parent hierarchy worth
- * breadcrumbing. Primary action is typically "edit / deploy / run on this entity".
- * **When NOT to use:** for top-level list pages use `PageHeader.Index`. For pages without a parent
- * hierarchy use `PageHeader.Index` even if they show one entity.
- * **Composition:** nest inside `PageLayout.Header`. Pass `Button argo` for actions. Anything beyond the
- * 2-visible-actions cap belongs in `overflowActions` (a `DropdownMenu`), not in extra slots.
- *
- * @see RECIPES.md#list-detail — for the list-page → detail-page navigation pattern
- */
-export const PageHeaderDetail = ({
-  ref,
-  className,
-  breadcrumbs,
-  overflowActions,
-  title,
-  badges,
-  description,
-  primaryAction,
-  secondaryAction,
-  headerNav,
-  ...props
-}: PageHeaderDetailProps & { ref?: Ref<ElementRef<'header'>> }) => (
-  <header ref={ref} className={cn('tw-flex tw-w-full tw-flex-col tw-gap-4', className)} {...props}>
-    <div className="tw-flex tw-w-full tw-items-center tw-justify-between tw-gap-4">
-      <div className="tw-min-w-0 tw-flex-1">{breadcrumbs}</div>
-      {overflowActions && (
-        <div className="tw-flex tw-shrink-0 tw-items-center tw-gap-2">{overflowActions}</div>
-      )}
-    </div>
-
-    <div className="tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-4">
-      <div className="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2">
-        <div className={titleRowClass}>
-          <h1 className={titleClass}>{title}</h1>
-          {badges && <div className={badgesClass}>{badges}</div>}
-        </div>
-        {description && <p className={descriptionClass}>{description}</p>}
-      </div>
-      {(primaryAction || secondaryAction) && (
-        <div className="tw-flex tw-shrink-0 tw-items-center tw-gap-2">
-          {secondaryAction}
-          {primaryAction}
-        </div>
-      )}
-    </div>
-
-    {headerNav}
-  </header>
-);