@happyvertical/smrt-ui 0.51.38 → 0.52.0

package/dist/components/layout/PageHeader.svelte

@@ -1,41 +1,107 @@
 <script lang="ts">
 /**
- * PageHeader - Standard page header with optional back navigation
- * refactored for Material 3
+ * PageHeader - one header per page: an ancestors-only breadcrumb row, the
+ * page title (`<h1>`), and the page's own actions, right-aligned.
  *
- * Provides consistent page header layout with title, optional back link,
- * and slot for action buttons.
+ * Page-header contract (shared with AdminShell in smrt-svelte/workspace):
+ * - `crumbs` are the page's ancestors only, never the page itself; none on
+ *   section homes. Inside a shell that sets `setPageHeaderContext()`, pages
+ *   pass only `parents` (ancestors the nav doesn't know, e.g. the article
+ *   above its video) and the shell adds the rest; the shell also hears the
+ *   title (for its phone top bar). smrt-svelte's `shellPageTrailFor()`
+ *   computes such a trail from a nav.
+ * - The crumb row carries `data-shell-breadcrumbs` and the title
+ *   `data-shell-page-title`: on phones AdminShell hides the crumbs and
+ *   visually hides the title, because its phone top bar shows the back arrow
+ *   and the title instead.
+ * - No in-page back link: the crumbs (and the phone top bar) are the way
+ *   back. `backHref` is kept only for pages outside such a shell.
+ * - An editable title (`titleField`, e.g. an article's headline) renders
+ *   inside the `<h1>`, so the heading is still the page's title in the
+ *   outline and is named by the field's value, while the field keeps its own
+ *   label. Such a heading has no `data-shell-page-title`: it stays visible on
+ *   phones, because it is the input. Pass the live value as `title` so the
+ *   shell (the phone top bar) follows along as the person types.
  */
 import type { Snippet } from 'svelte';
 import { ripple } from '../../actions/ripple.js';
 import { Icon } from '../display/index.js';
+import {
+  getPageHeaderContext,
+  type PageHeaderCrumb,
+} from './page-header-context.js';
 
 export interface Props {
   /** Page title */
   title: string;
   /** Optional subtitle/description */
   subtitle?: string;
-  /** Back navigation URL */
+  /**
+   * All ancestors of this page, outermost first (never the page itself).
+   * Overrides the shell's trail; usually pass `parents` instead.
+   */
+  crumbs?: readonly PageHeaderCrumb[];
+  /** Ancestors past the shell's nav, outermost first. */
+  parents?: readonly PageHeaderCrumb[];
+  /** Shorter title for the shell (e.g. its phone top bar); default `title`. */
+  shortTitle?: string;
+  /** Accessible name of the breadcrumb nav. */
+  crumbsLabel?: string;
+  /**
+   * Back navigation URL.
+   * @deprecated Use `crumbs`; inside AdminShell the phone top bar goes back.
+   */
   backHref?: string;
   /** Back link label */
   backLabel?: string;
-  /** Slot for action buttons */
+  /**
+   * An editable title rendered inside the `<h1>` in place of `title`'s text
+   * (a labelled text field styled as the heading). `title` still names the
+   * page for the shell; keep it in sync with the field's value.
+   */
+  titleField?: Snippet;
+  /** Slot for action buttons (right-aligned beside the title) */
   actions?: Snippet;
-  /** Slot for additional content below title */
+  /** Small line under the title (status, dates, counts) */
+  meta?: Snippet;
+  /** Slot for additional content below the title row (e.g. page tabs) */
   children?: Snippet;
 }
 
 const {
   title,
   subtitle,
+  crumbs,
+  parents = [],
+  shortTitle,
+  crumbsLabel = 'Breadcrumb',
   backHref,
   backLabel = 'Back',
+  titleField,
   actions,
+  meta,
   children,
 }: Props = $props();
+
+const shell = getPageHeaderContext();
+const trail = $derived<readonly PageHeaderCrumb[]>(
+  crumbs ?? (shell ? shell.crumbs(parents) : parents),
+);
+
+$effect(() => shell?.report?.({ title: shortTitle ?? title, parents }));
 </script>
 
-<header class="page-header">
+<header class="page-header" data-page-header>
+  {#if trail.length > 0}
+    <nav class="page-crumbs" aria-label={crumbsLabel} data-shell-breadcrumbs>
+      <ol>
+        {#each trail as crumb, index (`${index}:${crumb.href}`)}
+          <li><a href={crumb.href}>{crumb.label}</a></li>
+        {/each}
+      </ol>
+    </nav>
+  {/if}
+
   <div class="header-main">
     <div class="header-content">
       {#if backHref}
@@ -44,10 +110,19 @@ const {
           <span>{backLabel}</span>
         </a>
       {/if}
-      <h1 class="page-title">{title}</h1>
+      {#if titleField}
+        <h1 class="page-title page-title-field" data-page-title-field>
+          {@render titleField()}
+        </h1>
+      {:else}
+        <h1 class="page-title" data-shell-page-title>{title}</h1>
+      {/if}
       {#if subtitle}
         <p class="page-subtitle">{subtitle}</p>
       {/if}
+      {#if meta}
+        <div class="page-meta">{@render meta()}</div>
+      {/if}
     </div>
 
     {#if actions}
@@ -58,7 +133,7 @@ const {
   </div>
 
   {#if children}
-    <div class="header-extra">
+    <div class="header-extra" data-page-header-extra>
       {@render children()}
     </div>
   {/if}
@@ -66,15 +141,60 @@ const {
 
 <style>
   .page-header {
-    margin-bottom: 2rem;
-    padding-top: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .page-crumbs {
+    margin-bottom: var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-on-surface-variant);
+    font: var(--smrt-typography-body-small-font);
+    font-size: 0.84rem;
+  }
+
+  .page-crumbs ol {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .page-crumbs li {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .page-crumbs li + li::before {
+    content: '/';
+    margin-inline-end: 0.35rem;
+    color: var(--smrt-color-outline);
+  }
+
+  .page-crumbs a {
+    color: inherit;
+    text-decoration: none;
+    overflow-wrap: anywhere;
+  }
+
+  .page-crumbs a:hover {
+    color: var(--smrt-color-primary);
+    text-decoration: underline;
+  }
+
+  .page-crumbs a:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 2px;
+    border-radius: var(--smrt-radius-sm, 4px);
   }
 
   .header-main {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    gap: 1.5rem;
+    gap: 0.75rem 1.5rem;
     flex-wrap: wrap;
   }
 
@@ -83,7 +203,7 @@ const {
     flex-direction: column;
     gap: var(--smrt-spacing-1, 4px);
     flex: 1;
-    min-width: 200px;
+    min-width: min(100%, 200px);
   }
 
   .back-link {
@@ -109,13 +229,26 @@ const {
     color: var(--smrt-color-on-surface);
     margin: 0;
     letter-spacing: -0.5px;
+    overflow-wrap: anywhere;
+  }
+
+  .page-title-field {
+    min-width: 0;
   }
 
   .page-subtitle {
     font: var(--smrt-typography-body-medium-font);
     color: var(--smrt-color-on-surface-variant);
     margin: 0;
-    margin-top: var(--smrt-spacing-1, 4px);
+  }
+
+  .page-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    font: var(--smrt-typography-body-small-font);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .header-actions {
@@ -123,9 +256,10 @@ const {
     gap: 0.75rem;
     align-items: center;
     flex-wrap: wrap;
+    margin-inline-start: auto;
   }
 
   .header-extra {
-    margin-top: 1.5rem;
+    margin-top: 1rem;
   }
-</style>
+</style>

package/dist/components/layout/PageHeader.svelte.d.ts

@@ -1,23 +1,63 @@
 /**
- * PageHeader - Standard page header with optional back navigation
- * refactored for Material 3
+ * PageHeader - one header per page: an ancestors-only breadcrumb row, the
+ * page title (`<h1>`), and the page's own actions, right-aligned.
  *
- * Provides consistent page header layout with title, optional back link,
- * and slot for action buttons.
+ * Page-header contract (shared with AdminShell in smrt-svelte/workspace):
+ * - `crumbs` are the page's ancestors only, never the page itself; none on
+ *   section homes. Inside a shell that sets `setPageHeaderContext()`, pages
+ *   pass only `parents` (ancestors the nav doesn't know, e.g. the article
+ *   above its video) and the shell adds the rest; the shell also hears the
+ *   title (for its phone top bar). smrt-svelte's `shellPageTrailFor()`
+ *   computes such a trail from a nav.
+ * - The crumb row carries `data-shell-breadcrumbs` and the title
+ *   `data-shell-page-title`: on phones AdminShell hides the crumbs and
+ *   visually hides the title, because its phone top bar shows the back arrow
+ *   and the title instead.
+ * - No in-page back link: the crumbs (and the phone top bar) are the way
+ *   back. `backHref` is kept only for pages outside such a shell.
+ * - An editable title (`titleField`, e.g. an article's headline) renders
+ *   inside the `<h1>`, so the heading is still the page's title in the
+ *   outline and is named by the field's value, while the field keeps its own
+ *   label. Such a heading has no `data-shell-page-title`: it stays visible on
+ *   phones, because it is the input. Pass the live value as `title` so the
+ *   shell (the phone top bar) follows along as the person types.
  */
 import type { Snippet } from 'svelte';
+import { type PageHeaderCrumb } from './page-header-context.js';
 export interface Props {
     /** Page title */
     title: string;
     /** Optional subtitle/description */
     subtitle?: string;
-    /** Back navigation URL */
+    /**
+     * All ancestors of this page, outermost first (never the page itself).
+     * Overrides the shell's trail; usually pass `parents` instead.
+     */
+    crumbs?: readonly PageHeaderCrumb[];
+    /** Ancestors past the shell's nav, outermost first. */
+    parents?: readonly PageHeaderCrumb[];
+    /** Shorter title for the shell (e.g. its phone top bar); default `title`. */
+    shortTitle?: string;
+    /** Accessible name of the breadcrumb nav. */
+    crumbsLabel?: string;
+    /**
+     * Back navigation URL.
+     * @deprecated Use `crumbs`; inside AdminShell the phone top bar goes back.
+     */
     backHref?: string;
     /** Back link label */
     backLabel?: string;
-    /** Slot for action buttons */
+    /**
+     * An editable title rendered inside the `<h1>` in place of `title`'s text
+     * (a labelled text field styled as the heading). `title` still names the
+     * page for the shell; keep it in sync with the field's value.
+     */
+    titleField?: Snippet;
+    /** Slot for action buttons (right-aligned beside the title) */
     actions?: Snippet;
-    /** Slot for additional content below title */
+    /** Small line under the title (status, dates, counts) */
+    meta?: Snippet;
+    /** Slot for additional content below the title row (e.g. page tabs) */
     children?: Snippet;
 }
 declare const PageHeader: import("svelte").Component<Props, {}, "">;

package/dist/components/layout/PageHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/layout/PageHeader.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkDD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PageHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/layout/PageHeader.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,0BAA0B,CAAC;AAGlC,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACpC,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoFD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/layout/__tests__/PageHeader.test.js

@@ -5,7 +5,7 @@
  * title, optional subtitle, optional back link, and actions/children snippets.
  */
 import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
+import { createRawSnippet, flushSync } from 'svelte';
 import { describe, expect, it } from 'vitest';
 import { expectNoA11yViolations } from '../../../test-support/a11y';
 import PageHeader from '../PageHeader.svelte';
@@ -66,6 +66,92 @@ describe('PageHeader', () => {
         render(PageHeader, { props: { title: 'Detail' } });
         expect(screen.queryByRole('link')).not.toBeInTheDocument();
     });
+    it('renders ancestors-only crumbs above the title', () => {
+        render(PageHeader, {
+            props: {
+                title: 'Fair opens Friday',
+                crumbs: [
+                    { label: 'Alpha Times', href: '/sites/alpha' },
+                    { label: 'Content', href: '/sites/alpha/articles' },
+                ],
+            },
+        });
+        const nav = screen.getByRole('navigation', { name: 'Breadcrumb' });
+        expect(nav).toHaveAttribute('data-shell-breadcrumbs');
+        const links = nav.querySelectorAll('a');
+        expect([...links].map((a) => a.textContent)).toEqual([
+            'Alpha Times',
+            'Content',
+        ]);
+        // The current page is the heading, not a crumb.
+        expect(nav).not.toHaveTextContent('Fair opens Friday');
+        expect(screen.getByRole('heading', { level: 1, name: 'Fair opens Friday' })).toHaveAttribute('data-shell-page-title');
+    });
+    it('renders no crumb row without ancestors', () => {
+        render(PageHeader, { props: { title: 'Content', crumbs: [] } });
+        expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+    });
+    it('renders the meta snippet under the title', () => {
+        render(PageHeader, {
+            props: { title: 'Detail', meta: snippet('<span>Draft</span>') },
+        });
+        expect(screen.getByText('Draft')).toBeInTheDocument();
+    });
+    it('takes its trail from the shell and reports its title', () => {
+        const reports = [];
+        const context = new Map([
+            [
+                Symbol.for('smrt-ui.page-header'),
+                {
+                    crumbs: (parents) => [
+                        { label: 'Alpha Times', href: '/sites/alpha' },
+                        ...parents,
+                    ],
+                    report: (page) => {
+                        reports.push(page);
+                        return undefined;
+                    },
+                },
+            ],
+        ]);
+        render(PageHeader, {
+            props: {
+                title: 'Create video',
+                parents: [{ label: 'Videos', href: '/sites/alpha/articles/a1/videos' }],
+            },
+            context,
+        });
+        const nav = screen.getByRole('navigation', { name: 'Breadcrumb' });
+        expect([...nav.querySelectorAll('a')].map((a) => a.textContent)).toEqual([
+            'Alpha Times',
+            'Videos',
+        ]);
+        flushSync();
+        expect(reports).toEqual([
+            {
+                title: 'Create video',
+                parents: [{ label: 'Videos', href: '/sites/alpha/articles/a1/videos' }],
+            },
+        ]);
+    });
+    it('renders an editable title inside the h1 and keeps it visible on phones', async () => {
+        const { container } = render(PageHeader, {
+            props: {
+                title: 'Council passes budget',
+                titleField: snippet('<input name="title" aria-label="Title" value="Council passes budget" />'),
+            },
+        });
+        const heading = screen.getByRole('heading', { level: 1 });
+        const field = screen.getByRole('textbox', { name: 'Title' });
+        expect(heading).toContainElement(field);
+        // The heading is named by the field's value; the field keeps its label.
+        expect(heading).toHaveAccessibleName('Council passes budget');
+        // No data-shell-page-title: the shell must not hide the input on phones.
+        expect(heading).not.toHaveAttribute('data-shell-page-title');
+        expect(heading).toHaveAttribute('data-page-title-field');
+        expect(container.querySelectorAll('h1')).toHaveLength(1);
+        await expectNoA11yViolations(container);
+    });
     it('is axe-clean with subtitle, back link, and actions', async () => {
         const { container } = render(PageHeader, {
             props: {

package/dist/components/layout/index.d.ts

@@ -8,5 +8,6 @@ export { default as Grid } from './Grid.svelte';
 export { default as Header } from './Header.svelte';
 export { default as Masthead } from './Masthead.svelte';
 export { default as PageHeader } from './PageHeader.svelte';
+export { getPageHeaderContext, type PageHeaderContext, type PageHeaderCrumb, type PageHeaderReport, setPageHeaderContext, } from './page-header-context.js';
 export { default as SummaryCard } from './SummaryCard.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EACL,oBAAoB,EACpB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/layout/index.js

@@ -8,4 +8,5 @@ export { default as Grid } from './Grid.svelte';
 export { default as Header } from './Header.svelte';
 export { default as Masthead } from './Masthead.svelte';
 export { default as PageHeader } from './PageHeader.svelte';
+export { getPageHeaderContext, setPageHeaderContext, } from './page-header-context.js';
 export { default as SummaryCard } from './SummaryCard.svelte';

package/dist/components/layout/page-header-context.d.ts

@@ -0,0 +1,25 @@
+/** One ancestor of a page. */
+export interface PageHeaderCrumb {
+    label: string;
+    href: string;
+}
+/** What a page reports to its shell. */
+export interface PageHeaderReport {
+    title: string;
+    parents: readonly PageHeaderCrumb[];
+}
+export interface PageHeaderContext {
+    /**
+     * The page's ancestors (never the page itself), given the ancestors it
+     * knows beyond the shell's nav. Called inside a reactive derivation, so
+     * the shell may read reactive state (the current path, its nav).
+     */
+    crumbs(parents: readonly PageHeaderCrumb[]): PageHeaderCrumb[];
+    /** Hear the page's title and parents; return a cleanup for when it goes. */
+    report?(page: PageHeaderReport): (() => void) | undefined;
+}
+/** Called by a shell layout; applies to every `PageHeader` below it. */
+export declare function setPageHeaderContext(context: PageHeaderContext): void;
+/** The enclosing shell's page-header context, or null. */
+export declare function getPageHeaderContext(): PageHeaderContext | null;
+//# sourceMappingURL=page-header-context.d.ts.map

package/dist/components/layout/page-header-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header-context.d.ts","sourceRoot":"","sources":["../../../src/components/layout/page-header-context.ts"],"names":[],"mappings":"AAQA,8BAA8B;AAC9B,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wCAAwC;AACxC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,eAAe,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,MAAM,CAAC,OAAO,EAAE,SAAS,eAAe,EAAE,GAAG,eAAe,EAAE,CAAC;IAC/D,4EAA4E;IAC5E,MAAM,CAAC,CAAC,IAAI,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CAC3D;AAID,wEAAwE;AACxE,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAErE;AAED,0DAA0D;AAC1D,wBAAgB,oBAAoB,IAAI,iBAAiB,GAAG,IAAI,CAE/D"}

package/dist/components/layout/page-header-context.js

@@ -0,0 +1,16 @@
+/**
+ * How a shell (an app's workspace layout) takes part in every `PageHeader`
+ * below it, without the pages or the packages that render them knowing the
+ * shell: it turns a page's own `parents` into the full ancestor trail (from
+ * its nav) and hears each page's title, e.g. for a phone top bar.
+ */
+import { getContext, setContext } from 'svelte';
+const PAGE_HEADER_CONTEXT = Symbol.for('smrt-ui.page-header');
+/** Called by a shell layout; applies to every `PageHeader` below it. */
+export function setPageHeaderContext(context) {
+    setContext(PAGE_HEADER_CONTEXT, context);
+}
+/** The enclosing shell's page-header context, or null. */
+export function getPageHeaderContext() {
+    return getContext(PAGE_HEADER_CONTEXT) ?? null;
+}