MagicStarterPageHeader: support inline title+actions on mobile & widget title

[anilcancakir]

Problem

MagicStarterPageHeader has two limitations that force consumers to build custom headers for detail views:

1. title is String only — no way to place a widget (e.g. status badge) inline next to the title text
2. Mobile stacks actions below title — flex-col sm:flex-row causes actions to wrap to a new line on small screens, but some use cases need actions (like a status badge) to always stay on the same row as the title

Current workaround

Consumers replace MagicStarterPageHeader with a custom WDiv row that keeps everything inline:

WDiv(
  className: 'w-full flex flex-row items-center gap-3 p-2 lg:p-4 border-b ...',
  children: [
    backButton,
    WDiv(className: 'flex-1 min-w-0', child: WText(title, className: '... truncate')),
    statusBadge, // needs to stay inline, not wrap below
  ],
)

Proposed Solution

Option A: Add titleSuffix widget param

MagicStarterPageHeader(
  title: 'lorem ipsum very long title',
  titleSuffix: StatusBadge(status: 'done'), // renders inline after title, before actions
  leading: backButton,
  actions: [editButton],
)

titleSuffix placed inside the title row (flex-row items-center) with flex-shrink-0 — never wraps away from the title.

Option B: Add inlineActions flag

MagicStarterPageHeader(
  title: 'Task title',
  actions: [statusBadge],
  inlineActions: true, // forces flex-row always, never stacks on mobile
)

Option C: Both

titleSuffix for semantically different widgets (badges, status indicators) + inlineActions for layout control.

Context

Used in Kodizm's task detail view — Jira-style layout where the status badge must always be visible next to the (truncated) title on all screen sizes.