@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/layout/Grid.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    children?: Snippet;
+    columns?: number | string;
+    rows?: number | string;
+    gap?: number | string;
+    onclick?: (e?: unknown) => void;
+}
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/widgets/layout/Hero.svelte

@@ -0,0 +1,63 @@
+<!--
+  Hero.svelte
+  Updated 2026-09-12: body gate is `hasChildren || children` with an optional
+  `children?.()` call, so a hand-written Svelte caller that passes children but no
+  `hasChildren` renders them. The spec renderer's `hasChildren` path is unchanged.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    title: string;
+    subtitle?: string;
+    eyebrow?: string;
+    /** "left" (default) or "center". */
+    align?: 'left' | 'center';
+    children?: Snippet;
+    hasChildren?: boolean;
+  }
+
+  let {
+    id, class: className, style,
+    title, subtitle, eyebrow, align = 'left', children, hasChildren = false
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+</script>
+
+<section
+  {id}
+  class={cn(
+    'flex flex-col gap-4 py-10',
+    align === 'center' && 'items-center text-center',
+    className
+  )}
+  style={styleString}
+>
+  {#if eyebrow}
+    <span class={cn(
+      'text-[11px] font-medium uppercase tracking-wider text-primary',
+    )}>{eyebrow}</span>
+  {/if}
+  <h1 class={cn(
+    'text-4xl md:text-5xl font-semibold tracking-tight leading-tight',
+    align === 'center' && 'max-w-2xl'
+  )}>{title}</h1>
+  {#if subtitle}
+    <p class={cn(
+      'text-base md:text-lg text-muted-foreground leading-relaxed',
+      align === 'center' && 'max-w-xl'
+    )}>{subtitle}</p>
+  {/if}
+  {#if hasChildren || children}
+    <div class={cn('flex flex-wrap gap-3', align === 'center' && 'justify-center')}>
+      {@render children?.()}
+    </div>
+  {/if}
+</section>

package/dist/widgets/layout/Hero.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    title: string;
+    subtitle?: string;
+    eyebrow?: string;
+    /** "left" (default) or "center". */
+    align?: 'left' | 'center';
+    children?: Snippet;
+    hasChildren?: boolean;
+}
+declare const Hero: import("svelte").Component<Props, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/widgets/layout/ListRow.svelte

@@ -0,0 +1,162 @@
+<!--
+  src/lib/widgets/layout/ListRow.svelte
+  NEW 2026-09-25 (shell new-look slice 1). The sidebar / nav row the app shell
+  hand-rolls today in FusionSidebar, the chat dock's SessionList and the
+  settings nav column. On `./ui` only: no spec-registry entry, no manifest
+  entry, so the manifest count does not move.
+
+  Shape. A wrapper <div> paints the row (height, hover, active fill) and holds
+  two siblings: the host element (<a href> when `href` is set, otherwise
+  <button type=button>) and the `trailing` actions. The actions are never
+  inside the host, because interactive content inside a button or anchor is
+  invalid and breaks tabbing. They fade in on hover and stay visible while
+  focus is anywhere in the row (group-focus-within), so a keyboard user sees
+  what they tab into. On the `touch` size they are always visible. While they
+  show, the meta text and the unread dot/count fade out under them.
+
+  Forwarding. Every prop the component does not name (aria-*, data-*,
+  draggable, oncontextmenu, drag events, onkeydown, style) is spread on the
+  host element, after the defaults, so the host can override aria-current.
+  `class` goes on the wrapper so a host class hook covers the whole row.
+
+  Rename. `renaming` plus a `rename` snippet swaps the host element for a
+  plain <div> holding `leading` and the host's input. ListRow owns no rename
+  logic; the host supplies the input and its handlers.
+
+  Activation is native: Enter on a button or link, Space on a button.
+-->
+<script lang="ts">
+  import { safeUrl, safeStyle } from '@ripple-ui/core';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../utils.js';
+
+  type Size = 'sm' | 'md' | 'touch';
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, 'class' | 'onclick' | 'children'> {
+    class?: string;
+    /** Plain-text label; `children` wins when both are given. */
+    label?: string;
+    /** Renders an <a href>. Without it the row is a <button type=button>. */
+    href?: string;
+    onclick?: (e: MouseEvent) => void;
+    active?: boolean;
+    /** `true` shows a dot; a number > 0 shows a count; 0/false show nothing. */
+    unread?: boolean | number;
+    muted?: boolean;
+    /** Nesting level; each level adds 12px of left padding. */
+    indent?: number;
+    /** sm = 28px, md = 32px, touch = 44px. */
+    size?: Size;
+    renaming?: boolean;
+    leading?: Snippet;
+    children?: Snippet;
+    meta?: Snippet;
+    trailing?: Snippet;
+    rename?: Snippet;
+  }
+
+  let {
+    class: className,
+    label,
+    href,
+    onclick,
+    active = false,
+    unread = false,
+    muted = false,
+    indent,
+    size = 'md',
+    renaming = false,
+    leading,
+    children,
+    meta,
+    trailing,
+    rename,
+    ...rest
+  }: Props = $props();
+
+  const heightClass = $derived(size === 'sm' ? 'h-7' : size === 'touch' ? 'h-11 text-[15px]' : 'h-8');
+  const count = $derived(typeof unread === 'number' && unread > 0 ? unread : 0);
+  const dot = $derived(unread === true);
+  // Under the overlaid trailing actions, meta and the unread mark fade out.
+  const underTrailing = $derived(
+    trailing && size !== 'touch' ? 'group-hover/row:opacity-0 group-focus-within/row:opacity-0' : ''
+  );
+  const padClass = 'pl-[calc(0.5rem_+_var(--list-row-indent,0)_*_0.75rem)] pr-2';
+</script>
+
+<div
+  data-list-row
+  data-active={active || undefined}
+  data-muted={muted || undefined}
+  class={cn(
+    'group/row relative flex min-w-0 items-center rounded-md text-[13px] transition-colors duration-150 ease-ripple-out',
+    heightClass,
+    active
+      ? 'bg-ripple-accent/15 text-ripple-surface-foreground'
+      : 'text-ripple-surface-foreground hover:bg-ripple-accent/10',
+    muted && !active && 'text-ripple-muted-foreground',
+    className
+  )}
+  style={safeStyle(indent != null ? `--list-row-indent: ${indent}` : undefined)}
+>
+  {#if renaming && rename}
+    <div data-list-row-rename class={cn('flex h-full min-w-0 flex-1 items-center gap-2', padClass)}>
+      {#if leading}<span class="flex shrink-0 items-center">{@render leading()}</span>{/if}
+      <span class="min-w-0 flex-1">{@render rename()}</span>
+    </div>
+  {:else}
+    <svelte:element
+      this={href ? 'a' : 'button'}
+      data-list-row-host
+      type={href ? undefined : 'button'}
+      href={safeUrl(href)}
+      {onclick}
+      aria-current={active ? (href ? 'page' : 'true') : undefined}
+      class={cn(
+        'flex h-full min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md text-left outline-none focus-visible:ring-2 focus-visible:ring-ripple-ring/60',
+        padClass
+      )}
+      {...rest}
+    >
+      {#if leading}<span class="flex shrink-0 items-center">{@render leading()}</span>{/if}
+      <span data-list-row-label class={cn('min-w-0 flex-1 truncate', (dot || count > 0) && 'font-medium')}>
+        {#if children}{@render children()}{:else}{label}{/if}
+      </span>
+      {#if meta}
+        <span
+          class={cn(
+            'shrink-0 text-[12px] tabular-nums text-ripple-muted-foreground',
+            underTrailing
+          )}>{@render meta()}</span
+        >
+      {/if}
+      {#if count > 0}
+        <span
+          data-unread-count
+          class={cn(
+            'inline-flex h-[1.125rem] min-w-[1.125rem] shrink-0 items-center justify-center rounded-full bg-ripple-accent px-1 text-[11px] font-medium leading-none tabular-nums text-ripple-accent-foreground',
+            underTrailing
+          )}
+          >{count}</span
+        >
+      {:else if dot}
+        <span data-unread-dot class={cn('size-1.5 shrink-0 rounded-full bg-ripple-accent', underTrailing)} aria-hidden="true"></span>
+        <span class="sr-only">Unread</span>
+      {/if}
+    </svelte:element>
+    {#if trailing}
+      <div
+        data-list-row-trailing
+        class={cn(
+          'flex shrink-0 items-center gap-0.5 pr-1 transition-opacity duration-150 ease-ripple-out',
+          size === 'touch'
+            ? 'opacity-100'
+            : 'absolute inset-y-0 right-0 opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100'
+        )}
+      >
+        {@render trailing()}
+      </div>
+    {/if}
+  {/if}
+</div>

package/dist/widgets/layout/ListRow.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Size = 'sm' | 'md' | 'touch';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'class' | 'onclick' | 'children'> {
+    class?: string;
+    /** Plain-text label; `children` wins when both are given. */
+    label?: string;
+    /** Renders an <a href>. Without it the row is a <button type=button>. */
+    href?: string;
+    onclick?: (e: MouseEvent) => void;
+    active?: boolean;
+    /** `true` shows a dot; a number > 0 shows a count; 0/false show nothing. */
+    unread?: boolean | number;
+    muted?: boolean;
+    /** Nesting level; each level adds 12px of left padding. */
+    indent?: number;
+    /** sm = 28px, md = 32px, touch = 44px. */
+    size?: Size;
+    renaming?: boolean;
+    leading?: Snippet;
+    children?: Snippet;
+    meta?: Snippet;
+    trailing?: Snippet;
+    rename?: Snippet;
+}
+declare const ListRow: import("svelte").Component<Props, {}, "">;
+type ListRow = ReturnType<typeof ListRow>;
+export default ListRow;

package/dist/widgets/layout/MasterDetail.svelte

@@ -0,0 +1,136 @@
+<!-- src/lib/widgets/layout/MasterDetail.svelte -->
+<script lang="ts">
+  import { safeStyle } from '@ripple-ui/core';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import NodeRenderer from '../../components/NodeRenderer.svelte';
+
+  type Item = Record<string, unknown> & {
+    id?: string | number;
+    value?: string | number;
+    label?: string;
+    title?: string;
+    name?: string;
+  };
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    items: Item[];
+    /** Currently selected value. Bind via `bind: "<state-path>"`. */
+    value?: string | number | null;
+    /** Item field used as the unique key. */
+    valueKey?: string;
+    /** Item field used as the displayed label. */
+    labelKey?: string;
+    /** Item field used as a secondary description (optional). */
+    descriptionKey?: string;
+    /** Item field used as a small badge label (optional). */
+    badgeKey?: string;
+    /** Width of the master pane. */
+    width?: string;
+    /** Empty-state copy for the detail pane when nothing is selected. */
+    emptyText?: string;
+    /** Optional spec rendered in the detail pane. Receives `item` in loop context. */
+    detail?: any;
+    onchange?: (value?: unknown) => void;
+    children?: Snippet;
+  }
+
+  let {
+    id,
+    class: className,
+    style,
+    items = [],
+    value = null,
+    valueKey = 'id',
+    labelKey = 'label',
+    descriptionKey = 'description',
+    badgeKey = 'badge',
+    width = '240px',
+    emptyText = 'Select an item to see details',
+    detail,
+    onchange,
+    children
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  const safeItems = $derived(Array.isArray(items) ? items : []);
+
+  function getValue(item: Item): string | number | undefined {
+    const v = item[valueKey];
+    if (v === undefined && valueKey === 'id' && item.value !== undefined) return item.value as any;
+    return v as any;
+  }
+  function getLabel(item: Item): string {
+    return (item[labelKey] ?? item.title ?? item.name ?? item.label ?? '') as string;
+  }
+
+  const selectedItem = $derived(safeItems.find((it) => getValue(it) === value));
+
+  function select(item: Item) {
+    onchange?.(getValue(item));
+  }
+</script>
+
+<div
+  {id}
+  class={cn(
+    'grid w-full overflow-hidden rounded-lg border border-border',
+    className
+  )}
+  style={safeStyle(`grid-template-columns: ${width} 1fr; min-height: 240px; ${styleString ?? ''}`)}
+>
+  <ul
+    class="border-r border-border bg-card/30 overflow-auto p-1.5 m-0 list-none"
+    role="listbox"
+  >
+    {#each safeItems as item, i (getValue(item) ?? i)}
+      {@const v = getValue(item)}
+      {@const isSelected = v === value}
+      <li>
+        <button
+          type="button"
+          role="option"
+          aria-selected={isSelected}
+          class={cn(
+            'w-full text-left rounded-md px-3 py-2 text-sm transition-colors',
+            'hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring',
+            isSelected && 'bg-primary/10 text-primary'
+          )}
+          onclick={() => select(item)}
+        >
+          <div class="flex items-center justify-between gap-2">
+            <span class="truncate font-medium">{getLabel(item)}</span>
+            {#if item[badgeKey]}
+              <span class="shrink-0 text-[10px] uppercase tracking-wide rounded-full px-1.5 py-0.5 bg-muted text-muted-foreground">
+                {item[badgeKey]}
+              </span>
+            {/if}
+          </div>
+          {#if item[descriptionKey]}
+            <div class="text-xs text-muted-foreground truncate mt-0.5">
+              {item[descriptionKey]}
+            </div>
+          {/if}
+        </button>
+      </li>
+    {/each}
+  </ul>
+
+  <div class="overflow-auto p-4 min-w-0">
+    {#if selectedItem && detail}
+      <NodeRenderer node={detail} loopContext={{ item: selectedItem }} />
+    {:else if selectedItem && children}
+      {@render children()}
+    {:else}
+      <div class="h-full flex items-center justify-center text-sm text-muted-foreground">
+        {emptyText}
+      </div>
+    {/if}
+  </div>
+</div>

package/dist/widgets/layout/MasterDetail.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+type Item = Record<string, unknown> & {
+    id?: string | number;
+    value?: string | number;
+    label?: string;
+    title?: string;
+    name?: string;
+};
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    items: Item[];
+    /** Currently selected value. Bind via `bind: "<state-path>"`. */
+    value?: string | number | null;
+    /** Item field used as the unique key. */
+    valueKey?: string;
+    /** Item field used as the displayed label. */
+    labelKey?: string;
+    /** Item field used as a secondary description (optional). */
+    descriptionKey?: string;
+    /** Item field used as a small badge label (optional). */
+    badgeKey?: string;
+    /** Width of the master pane. */
+    width?: string;
+    /** Empty-state copy for the detail pane when nothing is selected. */
+    emptyText?: string;
+    /** Optional spec rendered in the detail pane. Receives `item` in loop context. */
+    detail?: any;
+    onchange?: (value?: unknown) => void;
+    children?: Snippet;
+}
+declare const MasterDetail: import("svelte").Component<Props, {}, "">;
+type MasterDetail = ReturnType<typeof MasterDetail>;
+export default MasterDetail;

package/dist/widgets/layout/Modal.svelte

@@ -0,0 +1,104 @@
+<!-- Created: 2026-04-16 — Modal widget wrapping shadcn Dialog primitive.
+     Updated: 2026-04-21 — opts into the WidgetRegistry when `id` is set so
+     the `invoke` flow action can call `open` / `close` remotely.
+     Opens/closes via state-bound `value` prop (maps to dialog `open`).
+     Props: title, description, size ("sm"|"md"|"lg"). Supports children.
+     Dismissal (overlay click / Esc) emits onchange(false) to sync state.
+     Updated: 2026-06-09 (reactivity) — isOpen seeds once from the `value` prop and
+     is then mutated by an $effect, the registry open/close callbacks, and
+     handleOpenChange, so it must stay $state. The state_referenced_locally warning
+     on the seed is an intentional one-time read, suppressed with a directive
+     directly above the $state line. -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getContext } from 'svelte';
+  import { cn } from '../../utils.js';
+  import * as Dialog from '../../components/ui/dialog/index.js';
+  import type { WidgetRegistry } from '@ripple-ui/core';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Controlled open state — NodeRenderer injects this via `bind` as `value` */
+    value?: boolean;
+    title?: string;
+    description?: string;
+    size?: 'sm' | 'md' | 'lg';
+    children?: Snippet;
+    onchange?: (value?: unknown) => void;
+  }
+
+  let {
+    id, class: className, style,
+    value = false,
+    title, description,
+    size = 'md',
+    children,
+    onchange
+  }: Props = $props();
+
+  // Local open state that syncs with incoming `value` prop
+  // svelte-ignore state_referenced_locally
+  let isOpen = $state(value ?? false);
+
+  $effect(() => {
+    isOpen = value ?? false;
+  });
+
+  // Opt in to the widget registry so flow `invoke` can open/close this modal.
+  const widgetRegistry = getContext<WidgetRegistry | undefined>('ui-widget-registry');
+  $effect(() => {
+    if (!id || !widgetRegistry) return;
+    const offOpen = widgetRegistry.register(id, 'open', () => {
+      isOpen = true;
+      onchange?.(true);
+    });
+    const offClose = widgetRegistry.register(id, 'close', () => {
+      isOpen = false;
+      onchange?.(false);
+    });
+    return () => {
+      offOpen();
+      offClose();
+    };
+  });
+
+  const sizeClass = $derived({
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg'
+  }[size ?? 'md']);
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  function handleOpenChange(open: boolean) {
+    isOpen = open;
+    // Emit false when dialog closes so the bound state path gets updated
+    if (!open) {
+      onchange?.(false);
+    }
+  }
+</script>
+
+<Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
+  <Dialog.Content
+    {id}
+    class={cn(sizeClass, className)}
+    style={styleString}
+  >
+    {#if title || description}
+      <Dialog.Header>
+        {#if title}
+          <Dialog.Title>{title}</Dialog.Title>
+        {/if}
+        {#if description}
+          <Dialog.Description>{description}</Dialog.Description>
+        {/if}
+      </Dialog.Header>
+    {/if}
+    {@render children?.()}
+  </Dialog.Content>
+</Dialog.Root>

package/dist/widgets/layout/Modal.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Controlled open state — NodeRenderer injects this via `bind` as `value` */
+    value?: boolean;
+    title?: string;
+    description?: string;
+    size?: 'sm' | 'md' | 'lg';
+    children?: Snippet;
+    onchange?: (value?: unknown) => void;
+}
+declare const Modal: import("svelte").Component<Props, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/widgets/layout/PageHeader.svelte

@@ -0,0 +1,107 @@
+<!--
+  PageHeader.svelte
+  Updated 2026-09-27 (canon gaps 2): a `titleTrailing` snippet renders inline
+  after the title text, vertically centred, before the actions: a status tag
+  beside the h1. Without it the title markup is unchanged.
+  Updated 2026-09-26 (feature pages canon, F1 / G1): exported on `./ui` for
+  hand-written feature pages. Two additive snippets: `leading` (an icon tile or
+  avatar before the title) and `toolbar` (a row under the title for search,
+  filters and view switches). A `size` prop picks the title: 'md' (20px, list
+  pages, the default) or 'sm' (17px, dense tool pages). Colours moved to ripple
+  tokens and the subtitle to the 13px rhythm. Existing props and the spec
+  renderer's `hasChildren` path are unchanged. No rest-attribute spread on
+  purpose: NodeRenderer passes every spec prop through, and a spread would put
+  spec strings on the DOM.
+  Updated 2026-09-12: body gate is `hasChildren || children` with an optional
+  `children?.()` call, so a hand-written Svelte caller that passes children but no
+  `hasChildren` renders them. The spec renderer's `hasChildren` path is unchanged.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    title: string;
+    subtitle?: string;
+    /** Optional eyebrow text shown above the title (small, uppercase). */
+    eyebrow?: string;
+    /** 'md' = list-page title (default); 'sm' = dense tool-page title. */
+    size?: 'md' | 'sm';
+    /** Before the title: an icon tile or an avatar. */
+    leading?: Snippet;
+    /** Inline after the title text, vertically centred: a status tag. */
+    titleTrailing?: Snippet;
+    /** Slot for action buttons rendered on the right. Use `slot: "actions"`. */
+    actions?: Snippet;
+    /** A row under the title: search, filters, view switches. */
+    toolbar?: Snippet;
+    /** Default body slot rendered below the header (e.g., breadcrumbs, tabs). */
+    children?: Snippet;
+    hasChildren?: boolean;
+  }
+
+  let {
+    id, class: className, style,
+    title, subtitle, eyebrow, size = 'md', leading, titleTrailing, actions, toolbar, children, hasChildren = false
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+</script>
+
+<header
+  {id}
+  data-page-header
+  data-size={size}
+  class={cn('flex flex-col gap-3 border-b border-ripple-border pb-4', className)}
+  style={styleString}
+>
+  <div class="flex items-start justify-between gap-4">
+    <div class="flex min-w-0 items-center gap-3">
+      {#if leading}
+        <div data-page-header-leading class="flex shrink-0 items-center">{@render leading()}</div>
+      {/if}
+      <div class="flex min-w-0 flex-col gap-1">
+        {#if eyebrow}
+          <span class="text-[11px] font-medium uppercase tracking-wide text-ripple-muted-foreground">{eyebrow}</span>
+        {/if}
+        {#if titleTrailing}
+          <div class="flex min-w-0 items-center gap-2">
+          <h1
+            class={cn(
+              'truncate font-semibold leading-tight tracking-tight text-ripple-surface-foreground',
+              size === 'sm' ? 'text-[17px]' : 'text-xl'
+            )}
+          >{title}</h1>
+            <div data-page-header-title-trailing class="flex shrink-0 items-center gap-1.5">{@render titleTrailing()}</div>
+          </div>
+        {:else}
+        <h1
+          class={cn(
+            'truncate font-semibold leading-tight tracking-tight text-ripple-surface-foreground',
+            size === 'sm' ? 'text-[17px]' : 'text-xl'
+          )}
+        >{title}</h1>
+        {/if}
+        {#if subtitle}
+          <p class="text-[13px] text-ripple-muted-foreground">{subtitle}</p>
+        {/if}
+      </div>
+    </div>
+    {#if typeof actions === 'function'}
+      <div class="flex items-center gap-2 shrink-0">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+  {#if toolbar}
+    <div data-page-header-toolbar class="flex flex-wrap items-center gap-2">{@render toolbar()}</div>
+  {/if}
+  {#if hasChildren || children}
+    <div>{@render children?.()}</div>
+  {/if}
+</header>