@f-ewald/components 1.2.1 → 1.3.0

package/dist/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../src/app-shell.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { iconBars3 } from \"./icons.js\";\nimport \"./kbd-hint.js\";\nimport { tokens } from \"./tokens.js\";\n\n/** Fired when the built-in toggle changes the sidebar state. */\nexport interface SidebarToggleDetail {\n  /** Desktop rail state. */\n  collapsed: boolean;\n  /** Mobile drawer open state. */\n  mobileOpen: boolean;\n}\n\n/**\n * The dashboard page shell: a slot-based CSS-grid backbone that arranges a\n * full-height sidebar, a top bar, the main content, an optional right-hand\n * detail column, and an optional footer. It owns the responsive behavior so\n * consumers don't re-implement it — above the shared 48rem breakpoint the\n * sidebar collapses to an icon rail and the detail region is an inline column;\n * at or below it the sidebar becomes an off-canvas drawer and the detail region\n * an overlay, both dismissed by a scrim or Escape.\n *\n * Widths are tunable per instance via `--component-sidebar-width` (16rem),\n * `--component-sidebar-rail-width` (3.5rem), and `--component-topbar-height`\n * (3rem); the detail column reuses the 20rem/25rem panel widths. The main\n * content area is white by default — override it with\n * `--component-main-background`. Give the shell a height (e.g. `height: 100vh`)\n * so the sidebar and main can size and scroll.\n *\n * The built-in top-bar button toggles the sidebar, and so does pressing `[`\n * anywhere on the page (ignored while typing in a text field or with a\n * modifier held). Hovering or keyboard-focusing the toggle reveals a tooltip\n * naming the action and its `[` shortcut — the shortcut is not shown as\n * permanent chrome.\n *\n * @element app-shell\n * @slot - Main content area.\n * @slot sidebar - Full-height navigation (typically `app-sidebar`).\n * @slot topbar - Top bar content, right of the built-in toggle.\n * @slot detail - Optional right-hand detail; shown when `detail-open` is set.\n * @slot footer - Optional footer beneath the main content.\n * @fires sidebar-toggle - The built-in toggle changed the sidebar state.\n * @fires detail-close - The scrim or Escape dismissed the mobile detail overlay.\n */\n@customElement(\"app-shell\")\nexport class AppShell extends LitElement {\n  /** Collapses the sidebar to an icon rail on desktop. */\n  @property({ type: Boolean, reflect: true, attribute: \"sidebar-collapsed\" })\n  sidebarCollapsed = false;\n  /** Shows the right-hand detail region (inline column, or overlay on mobile). */\n  @property({ type: Boolean, reflect: true, attribute: \"detail-open\" }) detailOpen = false;\n  /** Detail width: `compact` (20rem) or `comfortable` (25rem). */\n  @property({ attribute: \"detail-width\" }) detailWidth: \"compact\" | \"comfortable\" = \"compact\";\n\n  /** Whether the viewport is at/below the 48rem breakpoint. */\n  @state() private _mobile = false;\n  /** Whether the mobile off-canvas nav drawer is open. */\n  @state() private _mobileNavOpen = false;\n  /** Whether the footer slot has assigned content. */\n  @state() private _hasFooter = false;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        block-size: 100%;\n      }\n      .shell {\n        --_sidebar-w: var(--component-sidebar-width, 16rem);\n        --_detail-w: 0px;\n        display: grid;\n        grid-template-columns: var(--_sidebar-w) minmax(0, 1fr) var(--_detail-w);\n        grid-template-rows: auto minmax(0, 1fr) auto;\n        grid-template-areas:\n          \"sidebar topbar topbar\"\n          \"sidebar main   detail\"\n          \"sidebar footer footer\";\n        block-size: 100%;\n        min-height: 0;\n        background: var(--ui-surface, #ffffff);\n      }\n      :host([sidebar-collapsed]) .shell {\n        --_sidebar-w: var(--component-sidebar-rail-width, 3.5rem);\n      }\n      :host([detail-open]) .shell {\n        --_detail-w: 20rem;\n      }\n      :host([detail-open][detail-width=\"comfortable\"]) .shell {\n        --_detail-w: 25rem;\n      }\n      .sidebar {\n        grid-area: sidebar;\n        min-height: 0;\n        overflow: hidden;\n        border-right: 1px solid var(--ui-border, #e2e8f0);\n        background: var(--ui-surface, #ffffff);\n      }\n      .topbar {\n        grid-area: topbar;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        min-height: var(--component-topbar-height, 3rem);\n        padding: 0.5rem 0.75rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n        background: var(--ui-surface, #ffffff);\n      }\n      .nav-toggle {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex: 0 0 auto;\n        width: 2rem;\n        height: 2rem;\n        padding: 0;\n        background: none;\n        border: none;\n        cursor: pointer;\n        color: var(--ui-text-muted, #64748b);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n      }\n      .nav-group {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n        flex: 0 0 auto;\n      }\n      .nav-tip {\n        position: absolute;\n        top: 100%;\n        left: 0;\n        margin-top: 0.25rem;\n        z-index: var(--component-layer-z, 100);\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n        white-space: nowrap;\n        padding: 0.25rem 0.5rem;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        background: var(--ui-tooltip, #0f172a);\n        color: var(--ui-on-accent, #ffffff);\n        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        line-height: var(--ui-line-height-tight, 1.25);\n        opacity: 0;\n        visibility: hidden;\n        pointer-events: none;\n        transition: opacity 120ms ease;\n      }\n      .nav-toggle:hover + .nav-tip,\n      .nav-toggle:focus-visible + .nav-tip {\n        opacity: 1;\n        visibility: visible;\n      }\n      .nav-toggle:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .nav-toggle:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .topbar-content {\n        flex: 1 1 auto;\n        min-width: 0;\n      }\n      .main {\n        grid-area: main;\n        min-height: 0;\n        min-width: 0;\n        overflow: auto;\n        padding: 1rem;\n        background: var(--component-main-background, var(--ui-surface, #ffffff));\n      }\n      .detail {\n        grid-area: detail;\n        display: none;\n        min-height: 0;\n        overflow: auto;\n        border-left: 1px solid var(--ui-border, #e2e8f0);\n        background: var(--ui-surface, #ffffff);\n      }\n      :host([detail-open]) .detail {\n        display: block;\n      }\n      .footer {\n        grid-area: footer;\n        padding: 0.5rem 0.75rem;\n        border-top: 1px solid var(--ui-border, #e2e8f0);\n        background: var(--ui-surface, #ffffff);\n      }\n      .footer.empty {\n        display: none;\n      }\n      .scrim {\n        display: none;\n      }\n      @media (max-width: 48rem) {\n        .shell {\n          grid-template-columns: minmax(0, 1fr);\n          grid-template-rows: auto minmax(0, 1fr) auto;\n          grid-template-areas:\n            \"topbar\"\n            \"main\"\n            \"footer\";\n        }\n        .sidebar {\n          position: fixed;\n          top: 0;\n          bottom: 0;\n          left: 0;\n          width: var(--component-sidebar-width, 16rem);\n          z-index: var(--component-layer-z, 100);\n          transform: translateX(-100%);\n          transition: transform 250ms ease;\n        }\n        .shell.nav-open .sidebar {\n          transform: translateX(0);\n          box-shadow: var(\n            --ui-shadow-lg,\n            0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1)\n          );\n        }\n        .detail {\n          position: fixed;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          width: var(--_detail-w, 20rem);\n          max-width: calc(100vw - 3rem);\n          z-index: var(--component-layer-z, 100);\n          transform: translateX(110%);\n          transition: transform 250ms ease;\n        }\n        :host([detail-open]) .detail {\n          transform: translateX(0);\n          box-shadow: var(\n            --ui-shadow-lg,\n            0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1)\n          );\n        }\n        .scrim.show {\n          display: block;\n          position: fixed;\n          inset: 0;\n          z-index: calc(var(--component-layer-z, 100) - 1);\n          background: var(--ui-overlay, rgb(15 23 42 / 0.45));\n          border: none;\n        }\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .sidebar,\n        .detail,\n        .nav-tip {\n          transition: none;\n        }\n      }\n      @media (forced-colors: active) {\n        .nav-toggle:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        .nav-tip {\n          border: 1px solid CanvasText;\n        }\n      }\n    `,\n  ];\n\n  private _mediaQuery: MediaQueryList | null = null;\n  private _previousFocus: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._mediaQuery = window.matchMedia(\"(max-width: 48rem)\");\n    this._mobile = this._mediaQuery.matches;\n    this._mediaQuery.addEventListener(\"change\", this._onMediaChange);\n    window.addEventListener(\"keydown\", this._onKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._mediaQuery?.removeEventListener(\"change\", this._onMediaChange);\n    this._mediaQuery = null;\n    window.removeEventListener(\"keydown\", this._onKeydown);\n  }\n\n  /** Tracks the breakpoint and closes the mobile drawer when returning to desktop. */\n  private _onMediaChange = (event: MediaQueryListEvent): void => {\n    this._mobile = event.matches;\n    if (!event.matches) this._mobileNavOpen = false;\n  };\n\n  /** Handles the `[` sidebar shortcut and Escape dismissal of mobile overlays. */\n  private _onKeydown = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented) return;\n    if (event.key === \"Escape\" && this._mobile) {\n      if (this.detailOpen) {\n        event.preventDefault();\n        this._closeDetail();\n      } else if (this._mobileNavOpen) {\n        event.preventDefault();\n        this._mobileNavOpen = false;\n      }\n      return;\n    }\n    if (\n      event.key === \"[\" &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey &&\n      !this._isEditableTarget(event)\n    ) {\n      event.preventDefault();\n      this._toggleSidebar();\n    }\n  };\n\n  /** Whether the keydown originated in a text field, so the shortcut defers to typing. */\n  private _isEditableTarget(event: KeyboardEvent): boolean {\n    const target = event.composedPath()[0] as HTMLElement | undefined;\n    if (!target) return false;\n    if (target.isContentEditable) return true;\n    const tag = target.tagName;\n    return tag === \"INPUT\" || tag === \"TEXTAREA\" || tag === \"SELECT\";\n  }\n\n  /** Toggles the rail (desktop) or the off-canvas drawer (mobile) and announces it. */\n  private _toggleSidebar(): void {\n    if (this._mobile) {\n      this._mobileNavOpen = !this._mobileNavOpen;\n      if (this._mobileNavOpen) this._previousFocus = document.activeElement as HTMLElement | null;\n    } else {\n      this.sidebarCollapsed = !this.sidebarCollapsed;\n    }\n    this.dispatchEvent(\n      new CustomEvent<SidebarToggleDetail>(\"sidebar-toggle\", {\n        detail: { collapsed: this.sidebarCollapsed, mobileOpen: this._mobileNavOpen },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  /** Closes the detail overlay and notifies the consumer that owns `detail-open`. */\n  private _closeDetail(): void {\n    this.detailOpen = false;\n    this.dispatchEvent(new CustomEvent(\"detail-close\", { bubbles: true, composed: true }));\n  }\n\n  /** Scrim click dismisses whichever overlay is open. */\n  private _onScrim(): void {\n    if (this.detailOpen) this._closeDetail();\n    if (this._mobileNavOpen) this._mobileNavOpen = false;\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has(\"sidebarCollapsed\") || changed.has(\"_mobile\")) this._syncSidebar();\n    if (!changed.has(\"_mobileNavOpen\")) return;\n    if (this._mobileNavOpen) {\n      this.shadowRoot?.querySelector<HTMLElement>(\".sidebar\")?.focus();\n      return;\n    }\n    if (this._previousFocus?.isConnected) this._previousFocus.focus();\n    this._previousFocus = null;\n  }\n\n  /**\n   * Mirrors the shell's rail state onto the slotted sidebar so it hides labels\n   * when collapsed on desktop, and always shows them in the mobile drawer.\n   */\n  private _syncSidebar(): void {\n    const rail = this.sidebarCollapsed && !this._mobile;\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"sidebar\"]');\n    for (const element of slot?.assignedElements() ?? []) {\n      element.toggleAttribute(\"collapsed\", rail);\n    }\n  }\n\n  override render() {\n    const scrimActive = this._mobile && (this._mobileNavOpen || this.detailOpen);\n    return html`\n      <div class=\"shell ${this._mobileNavOpen ? \"nav-open\" : \"\"}\">\n        <aside class=\"sidebar\" tabindex=\"-1\" aria-label=\"Primary\">\n          <slot name=\"sidebar\" @slotchange=${this._syncSidebar}></slot>\n        </aside>\n        <header class=\"topbar\">\n          <div class=\"nav-group\">\n            <button\n              class=\"nav-toggle\"\n              type=\"button\"\n              aria-label=\"Toggle navigation\"\n              aria-keyshortcuts=\"[\"\n              aria-describedby=\"nav-tip\"\n              aria-expanded=${this._mobile ? String(this._mobileNavOpen) : String(!this.sidebarCollapsed)}\n              @click=${this._toggleSidebar}\n            >\n              ${iconBars3(18)}\n            </button>\n            <span class=\"nav-tip\" id=\"nav-tip\" role=\"tooltip\">\n              <span\n                >${this._mobile\n                  ? \"Navigation\"\n                  : this.sidebarCollapsed\n                    ? \"Expand sidebar\"\n                    : \"Collapse sidebar\"}</span\n              >\n              ${this._mobile ? nothing : html`<kbd-hint keys=\"[\"></kbd-hint>`}\n            </span>\n          </div>\n          <div class=\"topbar-content\"><slot name=\"topbar\"></slot></div>\n        </header>\n        <main class=\"main\"><slot></slot></main>\n        <aside\n          class=\"detail\"\n          aria-label=\"Detail\"\n          ?inert=${!this.detailOpen}\n          aria-hidden=${String(!this.detailOpen)}\n        >\n          <slot name=\"detail\"></slot>\n        </aside>\n        <footer class=\"footer ${this._hasFooter ? \"\" : \"empty\"}\">\n          <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n        </footer>\n        <button\n          class=\"scrim ${scrimActive ? \"show\" : \"\"}\"\n          type=\"button\"\n          tabindex=\"-1\"\n          aria-label=\"Close\"\n          @click=${this._onScrim}\n          ?hidden=${!scrimActive}\n        ></button>\n      </div>\n    `;\n  }\n\n  /** Collapses the footer row when nothing is slotted into it. */\n  private _onFooterSlotChange(event: Event): void {\n    this._hasFooter = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"app-shell\": AppShell;\n  }\n}\n"]}

package/dist/app-sidebar.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from "lit";
+/**
+ * Collapsible navigation sidebar for the `app-shell` sidebar slot. It is
+ * deliberately presentational and router-agnostic: the consumer supplies the
+ * nav items as plain `<a>`/`<button>` elements (each an icon followed by a
+ * label), optional `<p>` group headings, and marks the active item with
+ * `aria-current="page"`. The sidebar styles them, tracks hover/active/focus,
+ * and — in collapsed "rail" mode — centers the icons and hides the labels.
+ *
+ * Rail mode is driven by the `collapsed` attribute (the parent `app-shell`
+ * toggles it). Labels are hidden by the inherited `--app-sidebar-label` custom
+ * property, so each label element should read it, e.g.
+ * `<span style="display: var(--app-sidebar-label, inline)">Reports</span>`;
+ * keep an `aria-label` on the item so its accessible name survives collapse.
+ * The sidebar fills the width and height of its container — `app-shell` owns
+ * the actual rail/expanded width.
+ *
+ * @element app-sidebar
+ * @slot - Navigation items: `<a>`/`<button>` links and optional `<p>` headings.
+ * @slot header - Optional brand pinned to the top: a small logo plus a name.
+ *   Wrap the name in a `--app-sidebar-label` element so rail mode shows only the
+ *   logo, centered in line with the nav icons.
+ * @slot footer - Optional account/settings area pinned to the bottom.
+ */
+export declare class AppSidebar extends LitElement {
+    /** Collapses the sidebar to an icon rail (centers icons, hides labels). */
+    collapsed: boolean;
+    /** Whether the header slot has assigned content. */
+    private _hasHeader;
+    /** Whether the footer slot has assigned content. */
+    private _hasFooter;
+    static styles: import("lit").CSSResult[];
+    /** Collapses the header row when nothing is slotted into it. */
+    private _onHeaderSlotChange;
+    /** Collapses the footer row when nothing is slotted into it. */
+    private _onFooterSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "app-sidebar": AppSidebar;
+    }
+}
+//# sourceMappingURL=app-sidebar.d.ts.map

package/dist/app-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../src/app-sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,2EAA2E;IAC/B,SAAS,UAAS;IAE9D,oDAAoD;IAC3C,OAAO,CAAC,UAAU,CAAS;IACpC,oDAAoD;IAC3C,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAgB,MAAM,4BAkIpB;IAEF,gEAAgE;IAChE,OAAO,CAAC,mBAAmB;IAI3B,gEAAgE;IAChE,OAAO,CAAC,mBAAmB;IAIlB,MAAM,yCAcd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/app-sidebar.js

@@ -0,0 +1,211 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * Collapsible navigation sidebar for the `app-shell` sidebar slot. It is
+ * deliberately presentational and router-agnostic: the consumer supplies the
+ * nav items as plain `<a>`/`<button>` elements (each an icon followed by a
+ * label), optional `<p>` group headings, and marks the active item with
+ * `aria-current="page"`. The sidebar styles them, tracks hover/active/focus,
+ * and — in collapsed "rail" mode — centers the icons and hides the labels.
+ *
+ * Rail mode is driven by the `collapsed` attribute (the parent `app-shell`
+ * toggles it). Labels are hidden by the inherited `--app-sidebar-label` custom
+ * property, so each label element should read it, e.g.
+ * `<span style="display: var(--app-sidebar-label, inline)">Reports</span>`;
+ * keep an `aria-label` on the item so its accessible name survives collapse.
+ * The sidebar fills the width and height of its container — `app-shell` owns
+ * the actual rail/expanded width.
+ *
+ * @element app-sidebar
+ * @slot - Navigation items: `<a>`/`<button>` links and optional `<p>` headings.
+ * @slot header - Optional brand pinned to the top: a small logo plus a name.
+ *   Wrap the name in a `--app-sidebar-label` element so rail mode shows only the
+ *   logo, centered in line with the nav icons.
+ * @slot footer - Optional account/settings area pinned to the bottom.
+ */
+let AppSidebar = class AppSidebar extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Collapses the sidebar to an icon rail (centers icons, hides labels). */
+        this.collapsed = false;
+        /** Whether the header slot has assigned content. */
+        this._hasHeader = false;
+        /** Whether the footer slot has assigned content. */
+        this._hasFooter = false;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        height: 100%;
+        --app-sidebar-label: inline;
+      }
+      :host([collapsed]) {
+        --app-sidebar-label: none;
+      }
+      .sidebar {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+        background: var(--ui-surface, #ffffff);
+        color: var(--ui-text, #0f172a);
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+      }
+      .brand {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        padding: 0.75rem;
+        border-bottom: 1px solid var(--ui-border, #e2e8f0);
+      }
+      .foot {
+        flex: 0 0 auto;
+        padding: 0.75rem;
+        border-top: 1px solid var(--ui-border, #e2e8f0);
+      }
+      .brand.empty,
+      .foot.empty {
+        display: none;
+      }
+      .nav {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        padding: 0.5rem;
+      }
+      ::slotted(a),
+      ::slotted(button) {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0.5rem;
+        border: none;
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        background: none;
+        color: var(--ui-text, #0f172a);
+        text-align: left;
+        text-decoration: none;
+        white-space: nowrap;
+        cursor: pointer;
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        font-weight: var(--ui-font-weight-medium, 500);
+        line-height: var(--ui-line-height-tight, 1.25);
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+      }
+      ::slotted(a:hover),
+      ::slotted(button:hover) {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      ::slotted(a[aria-current]),
+      ::slotted(button[aria-current]) {
+        background: var(--ui-surface-muted, #f8fafc);
+        color: var(--ui-primary, #4f46e5);
+        font-weight: var(--ui-font-weight-semibold, 600);
+      }
+      ::slotted(a:focus-visible),
+      ::slotted(button:focus-visible) {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      ::slotted(p) {
+        margin: 0;
+        padding: 0.5rem 0.5rem 0.25rem;
+        font-size: var(--ui-font-size-xs, 0.6875rem);
+        font-weight: var(--ui-font-weight-semibold, 600);
+        line-height: var(--ui-line-height-tight, 1.25);
+        text-transform: uppercase;
+        letter-spacing: var(--ui-tracking-wide, 0.04em);
+        color: var(--ui-text-muted, #64748b);
+      }
+      :host([collapsed]) ::slotted(a),
+      :host([collapsed]) ::slotted(button) {
+        justify-content: center;
+      }
+      :host([collapsed]) ::slotted(p) {
+        display: none;
+      }
+      :host([collapsed]) .brand {
+        justify-content: center;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+      }
+      @media (forced-colors: active) {
+        ::slotted(a:focus-visible),
+        ::slotted(button:focus-visible) {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+      }
+    `,
+    ]; }
+    /** Collapses the header row when nothing is slotted into it. */
+    _onHeaderSlotChange(event) {
+        this._hasHeader = event.target.assignedNodes({ flatten: true }).length > 0;
+    }
+    /** Collapses the footer row when nothing is slotted into it. */
+    _onFooterSlotChange(event) {
+        this._hasFooter = event.target.assignedNodes({ flatten: true }).length > 0;
+    }
+    render() {
+        return html `
+      <div class="sidebar">
+        <div class="brand ${this._hasHeader ? "" : "empty"}">
+          <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
+        </div>
+        <nav class="nav" aria-label="Sidebar">
+          <slot></slot>
+        </nav>
+        <div class="foot ${this._hasFooter ? "" : "empty"}">
+          <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AppSidebar.prototype, "collapsed", void 0);
+__decorate([
+    state()
+], AppSidebar.prototype, "_hasHeader", void 0);
+__decorate([
+    state()
+], AppSidebar.prototype, "_hasFooter", void 0);
+AppSidebar = __decorate([
+    customElement("app-sidebar")
+], AppSidebar);
+export { AppSidebar };
+//# sourceMappingURL=app-sidebar.js.map

package/dist/app-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-sidebar.js","sourceRoot":"","sources":["../src/app-sidebar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACL,2EAA2E;QAC/B,cAAS,GAAG,KAAK,CAAC;QAE9D,oDAAoD;QACnC,eAAU,GAAG,KAAK,CAAC;QACpC,oDAAoD;QACnC,eAAU,GAAG,KAAK,CAAC;IA+JtC,CAAC;aA7JiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+HF;KACF,AAlIqB,CAkIpB;IAEF,gEAAgE;IACxD,mBAAmB,CAAC,KAAY;QACtC,IAAI,CAAC,UAAU,GAAI,KAAK,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAClG,CAAC;IAED,gEAAgE;IACxD,mBAAmB,CAAC,KAAY;QACtC,IAAI,CAAC,UAAU,GAAI,KAAK,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAClG,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;4CACd,IAAI,CAAC,mBAAmB;;;;;2BAKzC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;4CACb,IAAI,CAAC,mBAAmB;;;KAG/D,CAAC;IACJ,CAAC;CACF,CAAA;AApK6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAmB;AAG7C;IAAhB,KAAK,EAAE;8CAA4B;AAEnB;IAAhB,KAAK,EAAE;8CAA4B;AAPzB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAsKtB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Collapsible navigation sidebar for the `app-shell` sidebar slot. It is\n * deliberately presentational and router-agnostic: the consumer supplies the\n * nav items as plain `<a>`/`<button>` elements (each an icon followed by a\n * label), optional `<p>` group headings, and marks the active item with\n * `aria-current=\"page\"`. The sidebar styles them, tracks hover/active/focus,\n * and — in collapsed \"rail\" mode — centers the icons and hides the labels.\n *\n * Rail mode is driven by the `collapsed` attribute (the parent `app-shell`\n * toggles it). Labels are hidden by the inherited `--app-sidebar-label` custom\n * property, so each label element should read it, e.g.\n * `<span style=\"display: var(--app-sidebar-label, inline)\">Reports</span>`;\n * keep an `aria-label` on the item so its accessible name survives collapse.\n * The sidebar fills the width and height of its container — `app-shell` owns\n * the actual rail/expanded width.\n *\n * @element app-sidebar\n * @slot - Navigation items: `<a>`/`<button>` links and optional `<p>` headings.\n * @slot header - Optional brand pinned to the top: a small logo plus a name.\n *   Wrap the name in a `--app-sidebar-label` element so rail mode shows only the\n *   logo, centered in line with the nav icons.\n * @slot footer - Optional account/settings area pinned to the bottom.\n */\n@customElement(\"app-sidebar\")\nexport class AppSidebar extends LitElement {\n  /** Collapses the sidebar to an icon rail (centers icons, hides labels). */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /** Whether the header slot has assigned content. */\n  @state() private _hasHeader = false;\n  /** Whether the footer slot has assigned content. */\n  @state() private _hasFooter = false;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        height: 100%;\n        --app-sidebar-label: inline;\n      }\n      :host([collapsed]) {\n        --app-sidebar-label: none;\n      }\n      .sidebar {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        min-height: 0;\n        background: var(--ui-surface, #ffffff);\n        color: var(--ui-text, #0f172a);\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n      }\n      .brand {\n        flex: 0 0 auto;\n        display: flex;\n        align-items: center;\n        padding: 0.75rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n      }\n      .foot {\n        flex: 0 0 auto;\n        padding: 0.75rem;\n        border-top: 1px solid var(--ui-border, #e2e8f0);\n      }\n      .brand.empty,\n      .foot.empty {\n        display: none;\n      }\n      .nav {\n        flex: 1 1 auto;\n        min-height: 0;\n        overflow-y: auto;\n        display: flex;\n        flex-direction: column;\n        gap: 0.25rem;\n        padding: 0.5rem;\n      }\n      ::slotted(a),\n      ::slotted(button) {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        width: 100%;\n        box-sizing: border-box;\n        padding: 0.5rem;\n        border: none;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        background: none;\n        color: var(--ui-text, #0f172a);\n        text-align: left;\n        text-decoration: none;\n        white-space: nowrap;\n        cursor: pointer;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: var(--ui-font-weight-medium, 500);\n        line-height: var(--ui-line-height-tight, 1.25);\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n      }\n      ::slotted(a:hover),\n      ::slotted(button:hover) {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      ::slotted(a[aria-current]),\n      ::slotted(button[aria-current]) {\n        background: var(--ui-surface-muted, #f8fafc);\n        color: var(--ui-primary, #4f46e5);\n        font-weight: var(--ui-font-weight-semibold, 600);\n      }\n      ::slotted(a:focus-visible),\n      ::slotted(button:focus-visible) {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      ::slotted(p) {\n        margin: 0;\n        padding: 0.5rem 0.5rem 0.25rem;\n        font-size: var(--ui-font-size-xs, 0.6875rem);\n        font-weight: var(--ui-font-weight-semibold, 600);\n        line-height: var(--ui-line-height-tight, 1.25);\n        text-transform: uppercase;\n        letter-spacing: var(--ui-tracking-wide, 0.04em);\n        color: var(--ui-text-muted, #64748b);\n      }\n      :host([collapsed]) ::slotted(a),\n      :host([collapsed]) ::slotted(button) {\n        justify-content: center;\n      }\n      :host([collapsed]) ::slotted(p) {\n        display: none;\n      }\n      :host([collapsed]) .brand {\n        justify-content: center;\n        padding-left: 0.5rem;\n        padding-right: 0.5rem;\n      }\n      @media (forced-colors: active) {\n        ::slotted(a:focus-visible),\n        ::slotted(button:focus-visible) {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Collapses the header row when nothing is slotted into it. */\n  private _onHeaderSlotChange(event: Event): void {\n    this._hasHeader = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** Collapses the footer row when nothing is slotted into it. */\n  private _onFooterSlotChange(event: Event): void {\n    this._hasFooter = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  }\n\n  override render() {\n    return html`\n      <div class=\"sidebar\">\n        <div class=\"brand ${this._hasHeader ? \"\" : \"empty\"}\">\n          <slot name=\"header\" @slotchange=${this._onHeaderSlotChange}></slot>\n        </div>\n        <nav class=\"nav\" aria-label=\"Sidebar\">\n          <slot></slot>\n        </nav>\n        <div class=\"foot ${this._hasFooter ? \"\" : \"empty\"}\">\n          <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"app-sidebar\": AppSidebar;\n  }\n}\n"]}

package/dist/form-actions.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from "lit";
+/**
+ * Form footer button bar with a fixed action order for internal apps: the
+ * primary (submit) button is always rightmost, the secondary (cancel) button
+ * sits to its immediate left, and an optional tertiary/destructive action is
+ * pinned to the far left. The order is enforced by the component regardless of
+ * the source order the buttons are authored in, so every form in a product
+ * reads the same way.
+ *
+ * Purely presentational: it lays out whatever controls (usually `ui-button`)
+ * are slotted and never intercepts their clicks, `type="submit"`, or events.
+ *
+ * @element form-actions
+ * @slot start - Optional far-left action (e.g. a destructive "Delete").
+ * @slot secondary - The secondary/cancel action, placed left of primary.
+ * @slot primary - The primary/submit action, always rightmost.
+ */
+export declare class FormActions extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "form-actions": FormActions;
+    }
+}
+//# sourceMappingURL=form-actions.d.ts.map

package/dist/form-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-actions.d.ts","sourceRoot":"","sources":["../src/form-actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;GAeG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAuBpB;IAEO,MAAM,yCAQd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/form-actions.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * Form footer button bar with a fixed action order for internal apps: the
+ * primary (submit) button is always rightmost, the secondary (cancel) button
+ * sits to its immediate left, and an optional tertiary/destructive action is
+ * pinned to the far left. The order is enforced by the component regardless of
+ * the source order the buttons are authored in, so every form in a product
+ * reads the same way.
+ *
+ * Purely presentational: it lays out whatever controls (usually `ui-button`)
+ * are slotted and never intercepts their clicks, `type="submit"`, or events.
+ *
+ * @element form-actions
+ * @slot start - Optional far-left action (e.g. a destructive "Delete").
+ * @slot secondary - The secondary/cancel action, placed left of primary.
+ * @slot primary - The primary/submit action, always rightmost.
+ */
+let FormActions = class FormActions extends LitElement {
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 0.5rem;
+      }
+      .start {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-right: auto;
+      }
+      ::slotted(*) {
+        margin: 0;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="actions">
+        <span class="start"><slot name="start"></slot></span>
+        <slot name="secondary"></slot>
+        <slot name="primary"></slot>
+      </div>
+    `;
+    }
+};
+FormActions = __decorate([
+    customElement("form-actions")
+], FormActions);
+export { FormActions };
+//# sourceMappingURL=form-actions.js.map

package/dist/form-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-actions.js","sourceRoot":"","sources":["../src/form-actions.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;aACzB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;KAoBF;KACF,AAvBqB,CAuBpB;IAEO,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;CACF,CAAA;AAnCY,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmCvB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Form footer button bar with a fixed action order for internal apps: the\n * primary (submit) button is always rightmost, the secondary (cancel) button\n * sits to its immediate left, and an optional tertiary/destructive action is\n * pinned to the far left. The order is enforced by the component regardless of\n * the source order the buttons are authored in, so every form in a product\n * reads the same way.\n *\n * Purely presentational: it lays out whatever controls (usually `ui-button`)\n * are slotted and never intercepts their clicks, `type=\"submit\"`, or events.\n *\n * @element form-actions\n * @slot start - Optional far-left action (e.g. a destructive \"Delete\").\n * @slot secondary - The secondary/cancel action, placed left of primary.\n * @slot primary - The primary/submit action, always rightmost.\n */\n@customElement(\"form-actions\")\nexport class FormActions extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .actions {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 0.5rem;\n      }\n      .start {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        margin-right: auto;\n      }\n      ::slotted(*) {\n        margin: 0;\n      }\n    `,\n  ];\n\n  override render() {\n    return html`\n      <div class=\"actions\">\n        <span class=\"start\"><slot name=\"start\"></slot></span>\n        <slot name=\"secondary\"></slot>\n        <slot name=\"primary\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"form-actions\": FormActions;\n  }\n}\n"]}

package/dist/index.d.ts

@@ -36,6 +36,14 @@ export { DropdownButton, type DropdownOption } from "./dropdown-button.js";
 export { IconButton } from "./icon-button.js";
 export { KbdHint, type KbdPlatform } from "./kbd-hint.js";
 export { FrameBox } from "./frame-box.js";
+export { AppShell, type SidebarToggleDetail } from "./app-shell.js";
+export { AppSidebar } from "./app-sidebar.js";
+export { ActionBar } from "./action-bar.js";
+export { PageHeader } from "./page-header.js";
+export { PaginationNav, type PageChangeDetail } from "./pagination-nav.js";
+export { FormActions } from "./form-actions.js";
+export { TimelineContainer } from "./timeline-container.js";
+export { TimelineEntry } from "./timeline-entry.js";
 export { CalendarEntry } from "./calendar-entry.js";
 export { CalendarMonth } from "./calendar-month.js";
 export { CalendarYear } from "./calendar-year.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EACL,YAAY,EACZ,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,GACnC,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,UAAU,EACV,KAAK,YAAY,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EACL,mBAAmB,EACnB,KAAK,iBAAiB,GACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,iBAAiB,EACjB,KAAK,kBAAkB,GACxB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EACL,WAAW,EACX,KAAK,eAAe,EACpB,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EACL,WAAW,EACX,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,WAAW,EACX,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,GAC1B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EACL,YAAY,EACZ,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAC1B,KAAK,6BAA6B,GACnC,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,UAAU,EACV,KAAK,YAAY,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EACL,mBAAmB,EACnB,KAAK,iBAAiB,GACvB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,iBAAiB,EACjB,KAAK,kBAAkB,GACxB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EACL,WAAW,EACX,KAAK,eAAe,EACpB,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EACL,WAAW,EACX,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,WAAW,EACX,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,GAC1B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -36,6 +36,14 @@ export { DropdownButton } from "./dropdown-button.js";
 export { IconButton } from "./icon-button.js";
 export { KbdHint } from "./kbd-hint.js";
 export { FrameBox } from "./frame-box.js";
+export { AppShell } from "./app-shell.js";
+export { AppSidebar } from "./app-sidebar.js";
+export { ActionBar } from "./action-bar.js";
+export { PageHeader } from "./page-header.js";
+export { PaginationNav } from "./pagination-nav.js";
+export { FormActions } from "./form-actions.js";
+export { TimelineContainer } from "./timeline-container.js";
+export { TimelineEntry } from "./timeline-entry.js";
 export { CalendarEntry } from "./calendar-entry.js";
 export { CalendarMonth } from "./calendar-month.js";
 export { CalendarYear } from "./calendar-year.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.js\";\nexport { GalleryItem } from \"./gallery-item.js\";\nexport { GalleryItemVariant } from \"./gallery-item-variant.js\";\nexport {\n  PhotoGallery,\n  type PhotoGalleryChangeReason,\n  type PhotoGalleryObjectFit,\n  type PhotoGallerySlideChangeDetail,\n} from \"./photo-gallery.js\";\nexport { RevealButton } from \"./reveal-button.js\";\nexport { RomanNumeral } from \"./roman-numeral.js\";\nexport { ConfirmDialog } from \"./confirm-dialog.js\";\nexport {\n  ToastNotification,\n  notifySuccess,\n  notifyError,\n  notifyInfo,\n  type ToastVariant,\n} from \"./toast-notification.js\";\nexport { SlidePanel } from \"./slide-panel.js\";\nexport { CopyLinkButton } from \"./copy-link-button.js\";\nexport { RelativeTime } from \"./relative-time.js\";\nexport { DistanceValue } from \"./distance-value.js\";\nexport { PriceHistoryChart, type PricePoint } from \"./price-history-chart.js\";\nexport { DistributionChart, type DistributionValue } from \"./distribution-chart.js\";\nexport { PercentBarChart, type PercentBarGroup } from \"./percent-bar-chart.js\";\nexport { WeightBarChart, type WeightBarItem } from \"./weight-bar-chart.js\";\nexport {\n  AddressAutocomplete,\n  type AddressSuggestion,\n} from \"./address-autocomplete.js\";\nexport {\n  AutocompleteInput,\n  type AutocompleteOption,\n} from \"./autocomplete-input.js\";\nexport { UserAvatar } from \"./user-avatar.js\";\nexport { MapPin } from \"./map-pin.js\";\nexport { MapCircle } from \"./map-circle.js\";\nexport { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { StatMeter } from \"./stat-meter.js\";\nexport { StatusPill, type StatusPillColor } from \"./status-pill.js\";\nexport { EditableText } from \"./editable-text.js\";\nexport { LiveTimer } from \"./live-timer.js\";\nexport {\n  ChatMessage,\n  type ChatMessageRole,\n  type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport {\n  MultiSelect,\n  type MultiSelectOption,\n  type MultiSelectVariant,\n} from \"./multi-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { PopoverPanel } from \"./popover-panel.js\";\nexport { DropdownButton, type DropdownOption } from \"./dropdown-button.js\";\nexport { IconButton } from \"./icon-button.js\";\nexport { KbdHint, type KbdPlatform } from \"./kbd-hint.js\";\nexport { FrameBox } from \"./frame-box.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport {\n  KanbanBoard,\n  type KanbanCardData,\n  type KanbanColumnData,\n  type KanbanCardMoveDetail,\n  type KanbanCardOpenDetail,\n} from \"./kanban-board.js\";\nexport { KanbanColumn } from \"./kanban-column.js\";\nexport { KanbanCard } from \"./kanban-card.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.js\";\nexport { GalleryItem } from \"./gallery-item.js\";\nexport { GalleryItemVariant } from \"./gallery-item-variant.js\";\nexport {\n  PhotoGallery,\n  type PhotoGalleryChangeReason,\n  type PhotoGalleryObjectFit,\n  type PhotoGallerySlideChangeDetail,\n} from \"./photo-gallery.js\";\nexport { RevealButton } from \"./reveal-button.js\";\nexport { RomanNumeral } from \"./roman-numeral.js\";\nexport { ConfirmDialog } from \"./confirm-dialog.js\";\nexport {\n  ToastNotification,\n  notifySuccess,\n  notifyError,\n  notifyInfo,\n  type ToastVariant,\n} from \"./toast-notification.js\";\nexport { SlidePanel } from \"./slide-panel.js\";\nexport { CopyLinkButton } from \"./copy-link-button.js\";\nexport { RelativeTime } from \"./relative-time.js\";\nexport { DistanceValue } from \"./distance-value.js\";\nexport { PriceHistoryChart, type PricePoint } from \"./price-history-chart.js\";\nexport { DistributionChart, type DistributionValue } from \"./distribution-chart.js\";\nexport { PercentBarChart, type PercentBarGroup } from \"./percent-bar-chart.js\";\nexport { WeightBarChart, type WeightBarItem } from \"./weight-bar-chart.js\";\nexport {\n  AddressAutocomplete,\n  type AddressSuggestion,\n} from \"./address-autocomplete.js\";\nexport {\n  AutocompleteInput,\n  type AutocompleteOption,\n} from \"./autocomplete-input.js\";\nexport { UserAvatar } from \"./user-avatar.js\";\nexport { MapPin } from \"./map-pin.js\";\nexport { MapCircle } from \"./map-circle.js\";\nexport { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { StatMeter } from \"./stat-meter.js\";\nexport { StatusPill, type StatusPillColor } from \"./status-pill.js\";\nexport { EditableText } from \"./editable-text.js\";\nexport { LiveTimer } from \"./live-timer.js\";\nexport {\n  ChatMessage,\n  type ChatMessageRole,\n  type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport {\n  MultiSelect,\n  type MultiSelectOption,\n  type MultiSelectVariant,\n} from \"./multi-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { PopoverPanel } from \"./popover-panel.js\";\nexport { DropdownButton, type DropdownOption } from \"./dropdown-button.js\";\nexport { IconButton } from \"./icon-button.js\";\nexport { KbdHint, type KbdPlatform } from \"./kbd-hint.js\";\nexport { FrameBox } from \"./frame-box.js\";\nexport { AppShell, type SidebarToggleDetail } from \"./app-shell.js\";\nexport { AppSidebar } from \"./app-sidebar.js\";\nexport { ActionBar } from \"./action-bar.js\";\nexport { PageHeader } from \"./page-header.js\";\nexport { PaginationNav, type PageChangeDetail } from \"./pagination-nav.js\";\nexport { FormActions } from \"./form-actions.js\";\nexport { TimelineContainer } from \"./timeline-container.js\";\nexport { TimelineEntry } from \"./timeline-entry.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport {\n  KanbanBoard,\n  type KanbanCardData,\n  type KanbanColumnData,\n  type KanbanCardMoveDetail,\n  type KanbanCardOpenDetail,\n} from \"./kanban-board.js\";\nexport { KanbanColumn } from \"./kanban-column.js\";\nexport { KanbanCard } from \"./kanban-card.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}

package/dist/mcp-server.js

@@ -3,15 +3,18 @@
  * Stdio MCP server exposing the `@f-ewald/components` catalog to AI coding
  * assistants (Claude Code, etc.) working in a consuming project.
  *
- * Two tools, backed by the same `custom-elements.json` and `docs/*.md` this
- * package already generates and ships via `npm run docs`:
+ * Tools, backed by the same `custom-elements.json` and `docs/*.md` this
+ * package already generates and ships via `npm run docs`, plus the authored
+ * `docs/layouts/*.md` recipes:
  * - `list_components`: every tag name + one-line description.
  * - `get_component_docs`: the full generated Markdown doc for one tag.
+ * - `list_layouts`: every dashboard page template + one-line summary.
+ * - `get_layout`: the full recipe for one page template.
  *
- * No new data source — this is just a different transport over data that
- * already exists. See `docs/mcp-evaluation.md` for the design rationale.
+ * No new data source — this is just a different transport over docs that
+ * already exist. See `docs/mcp-evaluation.md` for the design rationale.
  */
-import { readFile } from "node:fs/promises";
+import { readdir, readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 import path from "node:path";
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
@@ -23,6 +26,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 // checkout or from an installed node_modules/@f-ewald/components.
 const packageRoot = path.join(__dirname, "..");
 const docsDir = path.join(packageRoot, "docs");
+const layoutsDir = path.join(docsDir, "layouts");
 /** Reads the package's own version out of package.json, for server metadata. */
 async function readPackageVersion() {
     const text = await readFile(path.join(packageRoot, "package.json"), "utf8");
@@ -44,6 +48,45 @@ async function listComponents() {
     components.sort((a, b) => a.tag.localeCompare(b.tag));
     return components;
 }
+/**
+ * Extracts {name, title, one-line summary} for every `docs/layouts/*.md`
+ * recipe, sorted by name. `name` is the filename without `.md`; `summary` is
+ * the recipe's first prose paragraph.
+ */
+async function listLayouts() {
+    let files;
+    try {
+        files = await readdir(layoutsDir);
+    }
+    catch {
+        return [];
+    }
+    const layouts = [];
+    for (const file of files) {
+        if (!file.endsWith(".md"))
+            continue;
+        const name = file.slice(0, -3);
+        const lines = (await readFile(path.join(layoutsDir, file), "utf8")).split("\n");
+        const title = lines.find((line) => line.startsWith("# "))?.slice(2).trim() ?? name;
+        let seenTitle = false;
+        let summary = "";
+        for (const line of lines) {
+            const text = line.trim();
+            if (!seenTitle) {
+                if (text.startsWith("# "))
+                    seenTitle = true;
+                continue;
+            }
+            if (text === "" || text.startsWith("#"))
+                continue;
+            summary = text;
+            break;
+        }
+        layouts.push({ name, title, summary });
+    }
+    layouts.sort((a, b) => a.name.localeCompare(b.name));
+    return layouts;
+}
 const server = new McpServer({
     name: "f-ewald-components",
     version: await readPackageVersion(),
@@ -77,6 +120,40 @@ server.registerTool("get_component_docs", {
         };
     }
 });
+server.registerTool("list_layouts", {
+    title: "List layouts",
+    description: "Lists the dashboard page templates (layout recipes) in " +
+        "@f-ewald/components — list-only, list+detail, detail-only, and form — " +
+        "with a one-line summary each. Call get_layout(name) for the full recipe " +
+        "(which components fill which app-shell slots, example markup, and notes). " +
+        "Use this to learn the preferred internal-dashboard layout before " +
+        "composing app-shell, app-sidebar, action-bar, pagination-nav, " +
+        "form-actions, and page-header.",
+}, async () => ({
+    content: [{ type: "text", text: JSON.stringify(await listLayouts(), null, 2) }],
+}));
+server.registerTool("get_layout", {
+    title: "Get layout recipe",
+    description: "Returns the full Markdown recipe for one dashboard page template: which " +
+        "components go in which app-shell slots, copy-paste markup, and layout " +
+        "notes. Use list_layouts first to find valid names.",
+    inputSchema: { name: z.string().describe('Layout name, e.g. "list-detail".') },
+}, async ({ name }) => {
+    if (/^[a-z0-9-]+$/.test(name)) {
+        try {
+            const text = await readFile(path.join(layoutsDir, `${name}.md`), "utf8");
+            return { content: [{ type: "text", text }] };
+        }
+        catch {
+            // Fall through to the not-found response with valid names.
+        }
+    }
+    const validNames = (await listLayouts()).map((layout) => layout.name).join(", ");
+    return {
+        content: [{ type: "text", text: `No layout named "${name}". Valid layouts: ${validNames}` }],
+        isError: true,
+    };
+});
 const transport = new StdioServerTransport();
 await server.connect(transport);
 //# sourceMappingURL=mcp-server.js.map