@lyeve-labs/ui-kit 0.13.1 → 0.15.0

package/dist/components/AccountMenu.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  /**
+   * The signed-in identity and the actions that belong to it, at the end of the
+   * app header.
+   *
+   * Where it lives is the point. The admin and the customer portal both put it
+   * in the bottom left corner of the sidebar and the ops console put it in the
+   * header, so the same account block was in two places depending on which of
+   * our own products you were looking at. The sidebar is also the worst of the
+   * two: it is already full height, so opening a menu in its last row pushes
+   * the last entry - Sign out, every time - past the bottom edge of the window.
+   * The header has room below it by construction.
+   *
+   * A native `details`, not a menu assembled from buttons. The panel holds
+   * links and a form post, and both have to keep working when hydration fails
+   * or never runs, which is exactly the moment somebody most needs to be able
+   * to sign out.
+   */
+  import type { Snippet } from 'svelte';
+  import { ChevronDown } from '@lucide/svelte';
+  import type { AccentTone } from '../internal/tone.js';
+
+  interface Props {
+    /** The line people recognise themselves by: a display name, or the email. */
+    name: string;
+    /** Under it. The email when the name is a name, otherwise a role or a plan. */
+    secondary?: string;
+    /**
+     * The avatar's letters. Derived from `name` when absent, which is right far
+     * more often than it is wrong.
+     */
+    initials?: string;
+    /** The avatar's accent. Follows the app, not the person. */
+    tone?: AccentTone;
+    class?: string;
+    /** The menu itself: links, and the form that ends the session. */
+    children: Snippet;
+  }
+
+  let {
+    name,
+    secondary = undefined,
+    initials = undefined,
+    tone = 'brand',
+    class: klass = '',
+    children,
+  }: Props = $props();
+
+  // Splitting on the @ as well as on spaces: an account with no display name
+  // shows its email here, and "ka" reads as a person where "k@" reads as a
+  // rendering bug.
+  const letters = $derived(
+    initials ??
+      (name || '?')
+        .split(/[\s@._-]+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part[0]?.toUpperCase() ?? '')
+        .join(''),
+  );
+
+  const AVATAR_TONE: Record<AccentTone, string> = {
+    neutral: 'bg-surface-2 text-fg',
+    brand: 'bg-brand/15 text-brand',
+    success: 'bg-success/15 text-success',
+    warn: 'bg-warn/15 text-warn',
+    danger: 'bg-danger/15 text-danger',
+    violet: 'bg-violet/15 text-violet',
+  };
+
+  let root = $state<HTMLDetailsElement | null>(null);
+
+  /**
+   * A `details` closes on its own summary and on nothing else, so without this
+   * the panel stays open behind whatever the reader does next. Escape and an
+   * outside click are both what a menu owes; they are enhancement, and the
+   * disclosure still works without either.
+   */
+  $effect(() => {
+    function onPointerDown(event: MouseEvent) {
+      if (!root?.open) return;
+      if (root.contains(event.target as Node)) return;
+      root.open = false;
+    }
+    function onKeydown(event: KeyboardEvent) {
+      if (event.key !== 'Escape' || !root?.open) return;
+      root.open = false;
+      root.querySelector('summary')?.focus();
+    }
+    document.addEventListener('click', onPointerDown, { capture: true });
+    document.addEventListener('keydown', onKeydown);
+    return () => {
+      document.removeEventListener('click', onPointerDown, { capture: true });
+      document.removeEventListener('keydown', onKeydown);
+    };
+  });
+</script>
+
+<details bind:this={root} class="group relative {klass}">
+  <summary
+    class="flex cursor-pointer list-none items-center gap-2 rounded-lg px-2 py-1.5 outline-none transition-colors duration-150 hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+  >
+    <span
+      class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold {AVATAR_TONE[
+        tone
+      ]}"
+      aria-hidden="true"
+    >
+      {letters}
+    </span>
+    <span class="hidden min-w-0 max-w-[10rem] truncate text-sm text-fg sm:block">{name}</span>
+    <ChevronDown
+      size={14}
+      class="shrink-0 text-faint transition-transform duration-150 group-open:rotate-180"
+    />
+  </summary>
+
+  <!-- end-0: the panel hangs from the header's trailing edge, which is the one
+       edge it can grow from without leaving the window. The surface and the
+       rule are the card treatment, because lifted off the header it is a
+       surface of its own. -->
+  <div
+    class="absolute end-0 top-full z-50 mt-2 flex w-64 flex-col gap-1 rounded-xl border border-line bg-surface p-2 shadow-2xl"
+  >
+    <div class="border-b border-line px-2 pb-2">
+      <p class="truncate text-sm font-medium text-fg">{name}</p>
+      {#if secondary}<p class="truncate text-xs text-muted">{secondary}</p>{/if}
+    </div>
+    {@render children()}
+  </div>
+</details>

package/dist/components/AccountMenu.svelte.d.ts

@@ -0,0 +1,38 @@
+/**
+   * The signed-in identity and the actions that belong to it, at the end of the
+   * app header.
+   *
+   * Where it lives is the point. The admin and the customer portal both put it
+   * in the bottom left corner of the sidebar and the ops console put it in the
+   * header, so the same account block was in two places depending on which of
+   * our own products you were looking at. The sidebar is also the worst of the
+   * two: it is already full height, so opening a menu in its last row pushes
+   * the last entry - Sign out, every time - past the bottom edge of the window.
+   * The header has room below it by construction.
+   *
+   * A native `details`, not a menu assembled from buttons. The panel holds
+   * links and a form post, and both have to keep working when hydration fails
+   * or never runs, which is exactly the moment somebody most needs to be able
+   * to sign out.
+   */
+import type { Snippet } from 'svelte';
+import type { AccentTone } from '../internal/tone.js';
+interface Props {
+    /** The line people recognise themselves by: a display name, or the email. */
+    name: string;
+    /** Under it. The email when the name is a name, otherwise a role or a plan. */
+    secondary?: string;
+    /**
+     * The avatar's letters. Derived from `name` when absent, which is right far
+     * more often than it is wrong.
+     */
+    initials?: string;
+    /** The avatar's accent. Follows the app, not the person. */
+    tone?: AccentTone;
+    class?: string;
+    /** The menu itself: links, and the form that ends the session. */
+    children: Snippet;
+}
+declare const AccountMenu: import("svelte").Component<Props, {}, "">;
+type AccountMenu = ReturnType<typeof AccountMenu>;
+export default AccountMenu;

package/dist/components/AppShell.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+  /**
+   * The authed application frame: the sidebar, the header bar and the content
+   * column, owned once so three apps cannot each invent their own.
+   *
+   * They did. The admin, the customer portal and the ops console each hand
+   * rolled this shell, and no two agreed: the sidebar was 224px in one and
+   * 240px in the other two, opaque in two and 30% translucent in the third,
+   * built from the kit's SidebarNav in one and from inline anchors in the
+   * others. Two of the three had no header at all above md:, so the current
+   * page had no name on screen and the account block sat in the bottom left
+   * corner of the sidebar in one shape and in a header dropdown in another.
+   * Every one of those was a defensible local choice and together they read as
+   * three products.
+   *
+   * The frame renders `main` and the drawer's dialog role. It renders no `nav`
+   * and no heading: the nav comes from the caller's SidebarNav, which is the
+   * only navigation landmark in the page, and the page's own PageShell owns the
+   * one `h1`. The section name here is a span for that reason - a second `h1`
+   * in the header makes a heading query answer with two elements and a screen
+   * reader announce the page name twice.
+   */
+  import type { Snippet } from 'svelte';
+  import { Menu } from '@lucide/svelte';
+  import { overlay } from '../internal/overlay.js';
+  import { APP_BRAND, APP_HEADER, APP_SIDEBAR, APP_SIDEBAR_BAND } from '../internal/layout.js';
+
+  interface Props {
+    /** The current section, shown in the header. Not a heading: the page owns its h1. */
+    section?: string;
+    /** Bindable so the app router can close the drawer after a navigation. */
+    navOpen?: boolean;
+    /** The sidebar landmark's accessible name. */
+    sidebarLabel?: string;
+    /** The drawer's accessible name, below md: where the sidebar is a dialog. */
+    drawerLabel?: string;
+    /** The product mark, in the sidebar's brand row. */
+    brand?: Snippet;
+    /** The navigation itself. A SidebarNav, given `class="min-h-0 flex-1"`. */
+    nav?: Snippet;
+    /** A status band at the foot of the sidebar. Not the account: that is header work. */
+    sidebarFooter?: Snippet;
+    /** The right end of the header bar. The theme toggle and the account menu live here. */
+    headerActions?: Snippet;
+    class?: string;
+    children: Snippet;
+  }
+
+  let {
+    section = undefined,
+    navOpen = $bindable(false),
+    sidebarLabel = 'Sidebar',
+    drawerLabel = 'Navigation',
+    brand,
+    nav,
+    sidebarFooter,
+    headerActions,
+    class: klass = '',
+    children,
+  }: Props = $props();
+
+  /**
+   * Desktop until the browser says otherwise. The server cannot know the
+   * viewport, and a sidebar rendered inert on the server is unreachable to
+   * anyone whose JavaScript never arrives.
+   */
+  let isMobile = $state(false);
+  const drawerOpen = $derived(isMobile && navOpen);
+
+  $effect(() => {
+    const mq = window.matchMedia('(max-width: 767px)');
+    const sync = () => {
+      isMobile = mq.matches;
+      if (!mq.matches) navOpen = false;
+    };
+    sync();
+    mq.addEventListener('change', sync);
+    return () => mq.removeEventListener('change', sync);
+  });
+
+  /** The backdrop is the pointer's way out of the drawer. A keyboard has none. */
+  function onWindowKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && navOpen) navOpen = false;
+  }
+</script>
+
+<svelte:window onkeydown={onWindowKeydown} />
+
+<div class="flex h-screen {klass}">
+  <!-- First focusable thing in the document. Without it a keyboard reader tabs
+       the whole sidebar again on every page. -->
+  <a
+    href="#content"
+    class="sr-only focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:z-50 focus:rounded-lg focus:bg-surface focus:px-3 focus:py-2 focus:text-sm focus:text-fg focus:outline-none focus:ring-2 focus:ring-brand"
+  >
+    Skip to content
+  </a>
+
+  {#if drawerOpen}
+    <!-- Follows Drawer and Modal: no palette token reads as a dimmer in both
+         themes. Closing on it is the gesture people expect, and it stops a tap
+         reaching the page under the open drawer. -->
+    <div
+      class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm"
+      role="presentation"
+      onclick={() => (navOpen = false)}
+    ></div>
+  {/if}
+
+  <!--
+    One aside at every width. Below md: it sits inside a positioned dialog; above
+    it, that wrapper is the column it has always been. Rendering a second copy
+    for the drawer would put every nav link in the page twice, which is what a
+    strict-mode locator trips on and what a screen reader reads out.
+
+    The dialog role is on the wrapper and not on the aside: an aside is a
+    complementary landmark, and the a11y gate rejects a non-interactive element
+    taking an interactive role. use:overlay is what makes aria-modal true rather
+    than merely claimed - it moves focus in, keeps Tab inside, and hands focus
+    back to the hamburger on close.
+  -->
+  {#if drawerOpen}
+    <div
+      class="fixed inset-y-0 start-0 z-50 flex shadow-2xl"
+      role="dialog"
+      aria-modal="true"
+      aria-label={drawerLabel}
+      use:overlay
+    >
+      {@render sidebar(false)}
+    </div>
+  {:else}
+    <div class="hidden md:flex">
+      {@render sidebar(isMobile)}
+    </div>
+  {/if}
+
+  <div class="flex min-w-0 flex-1 flex-col">
+    <header class={APP_HEADER}>
+      <div class="flex min-w-0 flex-1 items-center gap-2">
+        {#if isMobile}
+          <!-- 44px square, the smallest tap target SC 2.5.5 accepts. The -ms-2
+               pulls it back to the header's own gutter so the row it starts
+               still lines up with the page content below. -->
+          <button
+            type="button"
+            class="-ms-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted outline-none transition-colors duration-150 hover:bg-surface-2 hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+            aria-label={navOpen ? 'Close navigation' : 'Open navigation'}
+            aria-expanded={navOpen}
+            onclick={() => (navOpen = !navOpen)}
+          >
+            <Menu size={20} />
+          </button>
+        {/if}
+        {#if section}
+          <span data-testid="app-section" class="truncate text-sm font-semibold text-fg">
+            {section}
+          </span>
+        {/if}
+      </div>
+
+      {#if headerActions}
+        <div class="flex shrink-0 items-center gap-1">{@render headerActions()}</div>
+      {/if}
+    </header>
+
+    <main id="content" class="min-w-0 flex-1 overflow-auto bg-ink">
+      {@render children()}
+    </main>
+  </div>
+</div>
+
+{#snippet sidebar(hidden: boolean)}
+  <aside
+    aria-label={sidebarLabel}
+    class="{APP_SIDEBAR} flex"
+    inert={hidden}
+    aria-hidden={hidden ? 'true' : undefined}
+  >
+    {#if brand}
+      <div class={APP_BRAND}>{@render brand()}</div>
+    {/if}
+    {#if nav}
+      {@render nav()}
+    {/if}
+    {#if sidebarFooter}
+      <div class={APP_SIDEBAR_BAND}>{@render sidebarFooter()}</div>
+    {/if}
+  </aside>
+{/snippet}

package/dist/components/AppShell.svelte.d.ts

@@ -0,0 +1,45 @@
+/**
+   * The authed application frame: the sidebar, the header bar and the content
+   * column, owned once so three apps cannot each invent their own.
+   *
+   * They did. The admin, the customer portal and the ops console each hand
+   * rolled this shell, and no two agreed: the sidebar was 224px in one and
+   * 240px in the other two, opaque in two and 30% translucent in the third,
+   * built from the kit's SidebarNav in one and from inline anchors in the
+   * others. Two of the three had no header at all above md:, so the current
+   * page had no name on screen and the account block sat in the bottom left
+   * corner of the sidebar in one shape and in a header dropdown in another.
+   * Every one of those was a defensible local choice and together they read as
+   * three products.
+   *
+   * The frame renders `main` and the drawer's dialog role. It renders no `nav`
+   * and no heading: the nav comes from the caller's SidebarNav, which is the
+   * only navigation landmark in the page, and the page's own PageShell owns the
+   * one `h1`. The section name here is a span for that reason - a second `h1`
+   * in the header makes a heading query answer with two elements and a screen
+   * reader announce the page name twice.
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** The current section, shown in the header. Not a heading: the page owns its h1. */
+    section?: string;
+    /** Bindable so the app router can close the drawer after a navigation. */
+    navOpen?: boolean;
+    /** The sidebar landmark's accessible name. */
+    sidebarLabel?: string;
+    /** The drawer's accessible name, below md: where the sidebar is a dialog. */
+    drawerLabel?: string;
+    /** The product mark, in the sidebar's brand row. */
+    brand?: Snippet;
+    /** The navigation itself. A SidebarNav, given `class="min-h-0 flex-1"`. */
+    nav?: Snippet;
+    /** A status band at the foot of the sidebar. Not the account: that is header work. */
+    sidebarFooter?: Snippet;
+    /** The right end of the header bar. The theme toggle and the account menu live here. */
+    headerActions?: Snippet;
+    class?: string;
+    children: Snippet;
+}
+declare const AppShell: import("svelte").Component<Props, {}, "navOpen">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/components/PageShell.svelte

@@ -26,9 +26,21 @@
     width?: PageWidth;
     /**
      * A full-height page that manages its own scrolling, for instance a split
-     * pane or a canvas. No gutter, no cap, and the title renders compact.
+     * pane or a canvas. The content loses the gutter and the cap so the pane
+     * can reach the edges; the title row keeps both.
      */
     fill?: boolean;
+    /**
+     * Drop the title to body size and hide the description, for a page with
+     * genuinely no room for a heading.
+     *
+     * It used to be implied by `fill`, which made the two pages that own the
+     * viewport the only two in the app whose name rendered at body size against
+     * the window edge. Owning the viewport is a statement about the content
+     * pane, not about the heading, so a caller that wants the smaller title now
+     * asks for it.
+     */
+    compact?: boolean;
     /** Rendered above the title at one fixed distance. */
     breadcrumb?: Snippet;
     /** Right-aligned controls in the title row. */
@@ -42,6 +54,7 @@
     description = undefined,
     width = 'default',
     fill = false,
+    compact = false,
     breadcrumb,
     actions,
     class: klass = '',
@@ -49,11 +62,11 @@
   }: Props = $props();
 
   /**
-   * A fill page owns the viewport instead of sitting in it: no gutter, no cap,
-   * and the height the title row leaves goes to the content, so a split pane
-   * scrolls inside the page rather than scrolling the page. Two pages carry a
-   * documented waiver against their app's own layout lint for exactly this
-   * shape, which is the argument for the shell supporting it.
+   * A fill page owns the viewport instead of sitting in it: the content takes
+   * no cap and reaches the edges, and the height the title row leaves goes to
+   * it, so a split pane scrolls inside the page rather than scrolling the page.
+   * Two pages carry a documented waiver against their app's own layout lint for
+   * exactly this shape, which is the argument for the shell supporting it.
    *
    * `min-h-0` is load bearing on the column: a flex item refuses to shrink
    * below its content by default, so without it the pane runs past the bottom
@@ -65,6 +78,17 @@
       : `${PAGE_PAD} ${PAGE_WIDTH[width]} ${PAGE_STACK}`,
   );
 
+  /**
+   * The gutter the title row keeps when the content gives it up.
+   *
+   * The frame supplies it on an ordinary page, so only a fill page states it
+   * here, and it composes from the same tokens rather than a second spelling:
+   * a fill page's title lines up with every other page's to the pixel. Only
+   * the top edge is padded, because the frame's own gap owns the distance down
+   * to the content.
+   */
+  const headerPad = $derived(fill ? 'px-page-x pt-page-y' : '');
+
   /** The content stack. On a fill page it also takes the leftover height. */
   const content = $derived(fill ? `${PAGE_STACK} min-h-0 flex-1` : PAGE_STACK);
 </script>
@@ -72,11 +96,11 @@
 <div class="{frame} {klass}">
   <!-- The breadcrumb and the title are one group, so the distance between them
        is fixed here and does not change with whether a description is set. -->
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col gap-2 {headerPad}">
     {#if breadcrumb}{@render breadcrumb()}{/if}
     <!-- flush: the shell's own section stack supplies the gap below the title,
          so the header must not add a second one. -->
-    <PageHeader {title} {description} {actions} compact={fill} flush />
+    <PageHeader {title} {description} {actions} {compact} flush />
   </div>
 
   <div class={content}>

package/dist/components/PageShell.svelte.d.ts

@@ -23,9 +23,21 @@ interface Props {
     width?: PageWidth;
     /**
      * A full-height page that manages its own scrolling, for instance a split
-     * pane or a canvas. No gutter, no cap, and the title renders compact.
+     * pane or a canvas. The content loses the gutter and the cap so the pane
+     * can reach the edges; the title row keeps both.
      */
     fill?: boolean;
+    /**
+     * Drop the title to body size and hide the description, for a page with
+     * genuinely no room for a heading.
+     *
+     * It used to be implied by `fill`, which made the two pages that own the
+     * viewport the only two in the app whose name rendered at body size against
+     * the window edge. Owning the viewport is a statement about the content
+     * pane, not about the heading, so a caller that wants the smaller title now
+     * asks for it.
+     */
+    compact?: boolean;
     /** Rendered above the title at one fixed distance. */
     breadcrumb?: Snippet;
     /** Right-aligned controls in the title row. */

package/dist/index.d.ts

@@ -8,6 +8,7 @@
  */
 export { default as Card } from './components/Card.svelte';
 export { default as Panel } from './components/Panel.svelte';
+export { default as AppShell } from './components/AppShell.svelte';
 export { default as PageShell } from './components/PageShell.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as SectionHeading } from './components/SectionHeading.svelte';
@@ -55,6 +56,7 @@ export { default as Pagination } from './components/Pagination.svelte';
 export { default as StepIndicator } from './components/StepIndicator.svelte';
 export { default as Dropdown } from './components/Dropdown.svelte';
 export { default as SidebarNav } from './components/SidebarNav.svelte';
+export { default as AccountMenu } from './components/AccountMenu.svelte';
 export type { NavNode, NavTree } from './internal/nav-tree.js';
 export { default as Modal } from './components/Modal.svelte';
 export { default as Drawer } from './components/Drawer.svelte';
@@ -84,4 +86,4 @@ export { openDialog, closeDialog, dismissDialog, dismissAllDialogs, confirm, set
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, setTheme, toggleTheme, themeBootScript, type Theme } from './utils/theme.js';
-export declare const VERSION = "0.13.1";
+export declare const VERSION = "0.15.0";

package/dist/index.js

@@ -9,6 +9,7 @@
 // ── Layout & structure ─────────────────────────────────────────────────────
 export { default as Card } from './components/Card.svelte';
 export { default as Panel } from './components/Panel.svelte';
+export { default as AppShell } from './components/AppShell.svelte';
 export { default as PageShell } from './components/PageShell.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as SectionHeading } from './components/SectionHeading.svelte';
@@ -54,6 +55,7 @@ export { default as Pagination } from './components/Pagination.svelte';
 export { default as StepIndicator } from './components/StepIndicator.svelte';
 export { default as Dropdown } from './components/Dropdown.svelte';
 export { default as SidebarNav } from './components/SidebarNav.svelte';
+export { default as AccountMenu } from './components/AccountMenu.svelte';
 // ── Overlays ───────────────────────────────────────────────────────────────
 export { default as Modal } from './components/Modal.svelte';
 export { default as Drawer } from './components/Drawer.svelte';
@@ -90,4 +92,4 @@ export { getTheme, setTheme, toggleTheme, themeBootScript } from './utils/theme.
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line; the build and the test suite fail when the two disagree.
-export const VERSION = '0.13.1';
+export const VERSION = '0.15.0';

package/dist/internal/layout.d.ts

@@ -117,3 +117,30 @@ export declare const MODAL_PAD = "px-card py-card-sm";
  * the caller is already writing.
  */
 export declare function sectionHeading(level: 2 | 3): string;
+/**
+ * The authed app frame, stated once for every app that has one.
+ *
+ * Three apps hand rolled this and none of the three agreed. The sidebar was
+ * `w-56` in the admin and `w-60` in the other two, `bg-surface` in two and
+ * `bg-surface/30` in the third; the header existed in one and not in the other
+ * two. None of that was visible from inside any one app, which is why it went
+ * on being three shells for as long as it did.
+ *
+ * `border-e` and not `border-r`: the shell is the one place a right-to-left
+ * locale flips, and a physical border leaves the rule on the wrong edge.
+ */
+export declare const APP_SIDEBAR = "h-full w-sidebar shrink-0 flex-col border-e border-line bg-surface";
+/**
+ * The header bar. Its gutter is the page gutter, so the section name in the
+ * header sits directly above the page title under it rather than 8px off.
+ */
+export declare const APP_HEADER = "flex h-header shrink-0 items-center gap-2 border-b border-line bg-surface px-page-x";
+/**
+ * The sidebar's brand row. Exactly as tall as the header beside it: the two
+ * meet at the top left corner and a 4px disagreement there reads as a seam.
+ * Its inset is the nav row inset, so the mark lines up with the nav icons
+ * under it instead of with their labels.
+ */
+export declare const APP_BRAND = "flex h-header shrink-0 items-center gap-2 border-b border-line px-inline";
+/** A band at the foot of the sidebar, on the nav's own inset. */
+export declare const APP_SIDEBAR_BAND = "shrink-0 border-t border-line px-inline py-3";

package/dist/internal/layout.js

@@ -130,3 +130,30 @@ export function sectionHeading(level) {
     // one heading broken in half.
     return level === 2 ? 'text-lg font-semibold text-fg' : 'text-sm font-semibold text-fg';
 }
+/**
+ * The authed app frame, stated once for every app that has one.
+ *
+ * Three apps hand rolled this and none of the three agreed. The sidebar was
+ * `w-56` in the admin and `w-60` in the other two, `bg-surface` in two and
+ * `bg-surface/30` in the third; the header existed in one and not in the other
+ * two. None of that was visible from inside any one app, which is why it went
+ * on being three shells for as long as it did.
+ *
+ * `border-e` and not `border-r`: the shell is the one place a right-to-left
+ * locale flips, and a physical border leaves the rule on the wrong edge.
+ */
+export const APP_SIDEBAR = 'h-full w-sidebar shrink-0 flex-col border-e border-line bg-surface';
+/**
+ * The header bar. Its gutter is the page gutter, so the section name in the
+ * header sits directly above the page title under it rather than 8px off.
+ */
+export const APP_HEADER = 'flex h-header shrink-0 items-center gap-2 border-b border-line bg-surface px-page-x';
+/**
+ * The sidebar's brand row. Exactly as tall as the header beside it: the two
+ * meet at the top left corner and a 4px disagreement there reads as a seam.
+ * Its inset is the nav row inset, so the mark lines up with the nav icons
+ * under it instead of with their labels.
+ */
+export const APP_BRAND = 'flex h-header shrink-0 items-center gap-2 border-b border-line px-inline';
+/** A band at the foot of the sidebar, on the nav's own inset. */
+export const APP_SIDEBAR_BAND = 'shrink-0 border-t border-line px-inline py-3';

package/dist/styles/theme.css

@@ -137,6 +137,11 @@
    * the 13px/1.25 control text plus input-y padding and a 1px border. */
   --spacing-control: 2.375rem;
   --spacing-panel-max: 15rem; /* 240px - the scroll cap on a floating option list */
+  /* 56px - the app header bar, and the sidebar's brand row above the nav.
+   * One token, because the two sit side by side across the top of every
+   * authed screen and a 4px disagreement between them reads as a broken
+   * seam. Three apps each picked their own height before this existed. */
+  --spacing-header: 3.5rem;
   --spacing-nav-indent: 0.875rem; /* 14px - one level of sidebar nesting */
   --spacing-nav-rail: 3.5rem; /* 56px - the collapsed icon rail */
   --spacing-sidebar: 14rem; /* 224px - the expanded sidebar */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",

package/src/lib/styles/theme.css

@@ -137,6 +137,11 @@
    * the 13px/1.25 control text plus input-y padding and a 1px border. */
   --spacing-control: 2.375rem;
   --spacing-panel-max: 15rem; /* 240px - the scroll cap on a floating option list */
+  /* 56px - the app header bar, and the sidebar's brand row above the nav.
+   * One token, because the two sit side by side across the top of every
+   * authed screen and a 4px disagreement between them reads as a broken
+   * seam. Three apps each picked their own height before this existed. */
+  --spacing-header: 3.5rem;
   --spacing-nav-indent: 0.875rem; /* 14px - one level of sidebar nesting */
   --spacing-nav-rail: 3.5rem; /* 56px - the collapsed icon rail */
   --spacing-sidebar: 14rem; /* 224px - the expanded sidebar */