@tendstead/ui 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tendstead
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,85 @@
-# Temporary Holding Version
+# @tendstead/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Svelte 5 / TypeScript shell for independent Tendstead tools. This is a working package and synthetic demo, with no backend, authentication, or live downloads. Licensed under the [MIT License](LICENSE).
+
+```sh
+npm ci
+npm run dev                 # http://localhost:5173; watches package + demo
+npm run build               # dist package + demo-dist static demo
+npm run preview             # built demo, port 4173 by default
+```
+
+Development and CI use Node 26.13.0 (Active LTS) and require Svelte >=5.20. The demo consumes the package's built exports, as an independent app would. Source changes rebuild `dist` in dev mode. Demo links update history; Back/Forward work. Try `/?app=downloader` or `/?theme=dark&long=1&services=1&account=1`. `route=/receipts/review/42`, `controls=1`, `admin=1`, and `denied=1` provide deterministic fixtures. Add `accountForm=1&account=1` to exercise consumer account labels and explicit input IDs. Expand Demo configuration for reactive controls. Receipt Menu includes Collections and Statistics under Explore, a zero-badge Review queue, and optional Administration (`admin=1` or its fixture control). Connected-service examples are synthetic Shopping list (receipts) and Media library (downloader) links supplied by the demo, with no package-owned catalog. All sample data and actions stay local.
+
+## Use in an app
+
+Build and `npm pack` locally, then install the resulting tarball in your app. Import the theme explicitly; no Tailwind, reset or SvelteKit required.
+
+Release-labelled PRs automatically publish versioned tarballs on GitHub after
+verification and publish the same package to npm through trusted publishing.
+See [the release guide](docs/releases.md) for labels, installation, and retry instructions.
+
+```svelte
+<script lang="ts">
+  import { AppShell, type Destination } from '@tendstead/ui';
+  import '@tendstead/ui/theme.css';
+  let pathname = $state('/'); // supply this from your app's router
+  const destinations: Destination[] = [
+    { id: 'overview', label: 'Overview', href: '/', match: 'exact' },
+    { id: 'receipts', label: 'Receipts', href: '/receipts', badge: 0 },
+    { id: 'settings', label: 'Settings', href: '/settings' },
+  ];
+</script>
+<AppShell brand="Tendstead" appLabel="Receipts" pageTitle="Overview"
+  {pathname} {destinations} mobilePrimaryIds={['overview', 'receipts']}
+  primaryAction={{ id: 'add', label: 'Add', onclick: () => {} }}>
+  {#snippet pageActions()}<button type="button">Export</button>{/snippet}
+  <p>Your app content.</p>
+</AppShell>
+```
+
+The package exports `AppShell` and `AppShellProps`, `Destination`, `NavigationGroup`, `ServiceLink`, `PrimaryAction`, `ShellIcon` types. Destinations have unique IDs and optional app-supplied Svelte icon components, `groupId`, `badge` (including zero), `visible`, `permitted` and `match: 'exact' | 'prefix'`. Supply `groups={[{id:'manage',label:'Manage'}]}` to label groups. Active matching expects root-relative destination paths such as `/receipts`; the most specific segment-aware route wins, and query/hash are ignored. Relative hrefs are allowed for navigation but are not resolved against the current route for active matching. Filtered or unknown mobile IDs disappear; every permitted destination remains in Menu. Keep primary IDs to a small curated set. Primary actions support `href` or `onclick`; account and pageActions are optional Svelte snippets.
+
+Links use normal browser navigation. For client routing, supply `onNavigate={(event, destination) => { event.preventDefault(); router.goto(destination.href); }}` and feed the current pathname back to the shell. The callback runs for ordinary left clicks only; modified clicks retain browser behavior. The shell does not intercept unrelated content links. Apps own route transitions, data, authorization and document titles.
+
+Optional connected services use ordinary same-tab anchors:
+
+```ts
+const serviceLinks = [
+  { id: 'shopping', label: 'Shopping list', href: 'https://shopping.example.test/' },
+  // Only include an admin service if this app's trusted configuration permits it.
+];
+```
+
+Pass `serviceLinks` to the shell. Empty is the default, with no placeholder section. Services appear in the sidebar and complete mobile menu, never primary tabs. The shell does no discovery, probing, credential sharing or server communication. Visible/permitted flags only control presentation: each destination server must authorize access. Unsafe obvious non-navigation protocols are omitted. App configuration and contextual handoff/return paths remain app responsibilities.
+
+## Theme and layout
+
+Set `data-theme="dark"` or `data-theme="light"` on an ancestor. Override `--ts-primary`, `--ts-on-primary`, `--ts-nav`, `--ts-on-nav`, `--ts-selection`, `--ts-on-selection`, `--ts-surface`, `--ts-surface-subtle`, `--ts-text`, `--ts-muted`, `--ts-border`, `--ts-focus`, and `--ts-font` there. Defaults use neutral surfaces and purple `#6750A4`; token changes need contrast review. Theme CSS applies shell geometry and box sizing inside the shell; ordinary content links retain app/browser styling. No external fonts or images are fetched.
+
+Desktop sidebar starts at 768 CSS px. It stays within the viewport while the document scrolls, and its own scroll area is keyboard focusable for short screens and long destination maps. Smaller layouts use primary navigation and a complete modal drawer with focus trapping/return, Escape/backdrop dismissal, inert background, scroll lock, and resize/unmount cleanup. Bottom clearance follows the measured navigation height; safe areas are included. Your content must still wrap responsibly.
+
+## Docker
+
+```sh
+docker compose up --build dev    # http://localhost:5173; source + demo watched
+docker compose up --build demo   # http://localhost:8080; static demo, SPA fallback
+docker compose run --build --rm test
+```
+
+`Dockerfile` provides dev, build and static demo targets; `Dockerfile.test` uses `mcr.microsoft.com/playwright:v1.63.0-noble`, matching pinned Playwright 1.63.0. No image is pushed or deployed. For canonical visual changes and ownership-preserving mounted test runs, see [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## Verify
+
+```sh
+npm run check
+npm run test:unit          # navigation/config contracts
+npm run test:consumer      # npm pack -> independent temp app build + SSR
+npm run test:browser       # Chromium, Firefox, WebKit
+npm run test:visual        # Chromium reference comparisons; never updates
+npm run verify            # all above, plus package/demo build
+```
+
+Install browser binaries with `npx playwright install --with-deps` for host behavior runs. Use the canonical container for screenshot comparisons. CI runs the same full verification and retains HTML reports, traces, screenshot actual/diff files, and references. Initial automated baselines are provisional pending human design review. Automated accessibility and browser checks do not replace real phone, safe-area, touch or software-keyboard testing. See [CONTRIBUTING.md](CONTRIBUTING.md) for manual acceptance and baseline review.
+
+Configuration may change while a drawer is open. When an app removes a focused navigation destination or account snippet, focus recovers inside the dialog; the standard modal close still returns focus to Menu.

package/dist/AppShell.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { createDialog } from '@melt-ui/svelte';
+  import type { AppShellProps, Destination } from './types';
+  import { activeDestination, availableDestinations, mobileDestinations, safeHref, shouldHandleNavigation } from './navigation';
+  import NavigationList from './internal/NavigationList.svelte';
+  import DestinationLink from './internal/DestinationLink.svelte';
+  import Action from './internal/Action.svelte';
+  let { brand, appLabel, pageTitle, pathname, destinations, groups=[], mobilePrimaryIds=[], primaryAction, serviceLinks=[], onNavigate, children, pageActions, account }:AppShellProps=$props();
+  const uid=$props.id();
+  const {elements:{trigger,overlay,content,title,description,close},states:{open}}=createDialog({portal:null});
+  let available=$derived(availableDestinations(destinations));
+  let active=$derived(activeDestination(destinations,pathname));
+  let mobile=$derived(mobileDestinations(destinations,mobilePrimaryIds));
+  let services=$derived(serviceLinks.filter(s=>safeHref(s.href)));
+  let mobileBar:HTMLElement;
+  let barHeight=$state(100);
+  function navigate(event:MouseEvent,destination:Destination) {
+    if (!shouldHandleNavigation(event)) return;
+    onNavigate?.(event,destination);
+    open.set(false);
+  }
+  // Recover focus when reactive app configuration removes the focused snippet.
+  // Melt remains responsible for trapping and returning focus during normal use.
+  function recoverDetachedFocus(node:HTMLElement) {
+    let focused:Element|null=node.contains(document.activeElement)?document.activeElement:null;
+    const remember=(event:FocusEvent)=>{ focused=event.target as Element; };
+    node.addEventListener('focusin',remember);
+    const observer=new MutationObserver(()=>{
+      if(focused && !focused.isConnected && !node.contains(document.activeElement)) {
+        node.focus({preventScroll:true});
+      }
+    });
+    observer.observe(node,{childList:true,subtree:true});
+    return {destroy(){ observer.disconnect();node.removeEventListener('focusin',remember); }};
+  }
+  onMount(()=>{
+    const desktop=window.matchMedia('(min-width: 768px)');
+    const resized=()=>{ if(desktop.matches) open.set(false); };
+    desktop.addEventListener('change',resized);
+    const observer=new ResizeObserver(entries=>{ barHeight=entries[0].borderBoxSize[0]?.blockSize ?? mobileBar.offsetHeight; });
+    observer.observe(mobileBar);
+    return ()=>{ desktop.removeEventListener('change',resized); observer.disconnect(); };
+  });
+  onDestroy(()=>open.set(false));
+</script>
+
+{#snippet brandBlock()}
+  <div class="ts-brand"><span class="ts-brand-mark" aria-hidden="true">t</span><div><strong>{brand}</strong><span class="ts-app-label">{appLabel}</span></div></div>
+{/snippet}
+{#snippet servicesBlock()}
+  {#if services.length}
+    <nav class="ts-services" aria-label="Connected services">
+      <h2 class="ts-section-label">Connected services</h2>
+      {#each services as service (service.id)}
+        <a class="ts-nav-link" href={service.href}>
+          {#if service.icon}<service.icon size={21} aria-hidden="true"/>{/if}
+          <span class="ts-nav-label">{service.label}</span><span aria-hidden="true">↗</span>
+        </a>
+      {/each}
+    </nav>
+  {/if}
+{/snippet}
+
+<div class="ts-shell" style:--ts-mobile-space={`${barHeight+24}px`}>
+  <div class="ts-shell-background" data-shell-background inert={$open}>
+    <a class="ts-skip" href={`#${uid}-content`}>Skip to content</a>
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex (The named overflow region must support native keyboard scrolling.) -->
+    <aside class="ts-sidebar" aria-label="Application sidebar" tabindex="0">
+      {@render brandBlock()}
+      <nav class="ts-main-nav" aria-label="Main navigation"><NavigationList destinations={available} {groups} activeId={active?.id} onclick={navigate}/></nav>
+      {@render servicesBlock()}
+      {#if account && !$open}<div class="ts-account">{@render account()}</div>{/if}
+      <p class="ts-sidebar-note">A little more in order.</p>
+    </aside>
+    <div class="ts-workspace">
+      <header class="ts-header">
+        <div class="ts-page-heading"><p class="ts-eyebrow">{appLabel}</p><h1>{pageTitle}</h1></div>
+        <div class="ts-header-actions">{#if pageActions}{@render pageActions()}{/if}{#if primaryAction}<div class="ts-desktop-action"><Action action={primaryAction}/></div>{/if}</div>
+      </header>
+      <main id={`${uid}-content`} class="ts-page-content" tabindex="-1">{@render children()}</main>
+    </div>
+    <nav class="ts-mobile-bar" bind:this={mobileBar} aria-label="Mobile navigation">
+      {#each mobile as destination,index (destination.id)}
+        {#if primaryAction && index===Math.ceil(mobile.length/2)}<Action action={primaryAction} mobile/>{/if}
+        <DestinationLink {destination} active={active?.id===destination.id} onclick={navigate}/>
+      {/each}
+      {#if primaryAction && mobile.length<2}<Action action={primaryAction} mobile/>{/if}
+      <button class="ts-menu-trigger" {...$trigger} use:trigger>
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg><span>Menu</span>
+      </button>
+    </nav>
+  </div>
+  {#if $open}
+    <div class="ts-overlay" data-drawer-overlay {...$overlay} use:overlay></div>
+    <div class="ts-drawer" {...$content} use:content use:recoverDetachedFocus>
+      <div class="ts-drawer-heading"><h2 {...$title} use:title>All destinations</h2><button class="ts-icon-button" aria-label="Close menu" {...$close} use:close>✕</button></div>
+      <p class="ts-drawer-description" {...$description} use:description>{brand} · {appLabel}</p>
+      <nav class="ts-drawer-nav" aria-label="All navigation"><NavigationList destinations={available} {groups} activeId={active?.id} onclick={navigate}/></nav>
+      {@render servicesBlock()}
+      {#if account}<div class="ts-account">{@render account()}</div>{/if}
+    </div>
+  {/if}
+</div>

package/dist/AppShell.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AppShellProps } from './types';
+declare const AppShell: import("svelte").Component<AppShellProps, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AppShell } from './AppShell.svelte';
+export type { AppShellProps, Destination, NavigationGroup, ServiceLink, PrimaryAction, ShellIcon } from './types';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as AppShell } from './AppShell.svelte';

package/dist/internal/Action.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { PrimaryAction } from '../types';
+  import { safeHref } from '../navigation';
+  let { action, mobile=false }: { action:PrimaryAction; mobile?:boolean } = $props();
+</script>
+{#snippet label()}
+  {#if action.icon}<action.icon size={21} aria-hidden="true"/>{/if}
+  <span>{action.label}</span>
+{/snippet}
+{#if action.href && safeHref(action.href)}
+  <a class:ts-mobile-action={mobile} class="ts-action" href={action.href}>{@render label()}</a>
+{:else if !action.href}
+  <button class:ts-mobile-action={mobile} class="ts-action" type="button" onclick={action.onclick}>{@render label()}</button>
+{/if}

package/dist/internal/Action.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { PrimaryAction } from '../types';
+type $$ComponentProps = {
+    action: PrimaryAction;
+    mobile?: boolean;
+};
+declare const Action: import("svelte").Component<$$ComponentProps, {}, "">;
+type Action = ReturnType<typeof Action>;
+export default Action;

package/dist/internal/DestinationLink.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { Destination } from '../types';
+  let { destination, active = false, onclick }: { destination: Destination; active?: boolean; onclick?: (event: MouseEvent, destination: Destination) => void } = $props();
+</script>
+<a class="ts-nav-link" href={destination.href} aria-current={active ? 'page' : undefined} onclick={(event) => onclick?.(event, destination)}>
+  {#if destination.icon}<destination.icon size={21} aria-hidden="true" />{/if}
+  <span class="ts-nav-label">{destination.label}</span>
+  {#if destination.badge !== undefined}<span class="ts-badge">{destination.badge}</span>{/if}
+</a>

package/dist/internal/DestinationLink.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Destination } from '../types';
+type $$ComponentProps = {
+    destination: Destination;
+    active?: boolean;
+    onclick?: (event: MouseEvent, destination: Destination) => void;
+};
+declare const DestinationLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type DestinationLink = ReturnType<typeof DestinationLink>;
+export default DestinationLink;

package/dist/internal/NavigationList.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Destination, NavigationGroup } from '../types';
+  import DestinationLink from './DestinationLink.svelte';
+  let { destinations, groups, activeId, onclick }: { destinations: Destination[]; groups: NavigationGroup[]; activeId?: string; onclick: (event:MouseEvent, destination:Destination)=>void } = $props();
+  let ungrouped = $derived(destinations.filter(d=>!d.groupId || !groups.some(g=>g.id===d.groupId)));
+</script>
+{#each ungrouped as destination (destination.id)}<DestinationLink {destination} active={activeId===destination.id} {onclick}/>{/each}
+{#each groups as group (group.id)}
+  {@const items=destinations.filter(d=>d.groupId===group.id)}
+  {#if items.length}
+    <section class="ts-nav-group" aria-label={group.label}>
+      <h2 class="ts-section-label">{group.label}</h2>
+      {#each items as destination (destination.id)}<DestinationLink {destination} active={activeId===destination.id} {onclick}/>{/each}
+    </section>
+  {/if}
+{/each}

package/dist/internal/NavigationList.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Destination, NavigationGroup } from '../types';
+type $$ComponentProps = {
+    destinations: Destination[];
+    groups: NavigationGroup[];
+    activeId?: string;
+    onclick: (event: MouseEvent, destination: Destination) => void;
+};
+declare const NavigationList: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavigationList = ReturnType<typeof NavigationList>;
+export default NavigationList;

package/dist/navigation.d.ts

@@ -0,0 +1,7 @@
+import type { Destination } from './types';
+/** Configuration comes from the app. Filtering is presentation, never authorization. */
+export declare function safeHref(value: string): boolean;
+export declare function availableDestinations(destinations: Destination[]): Destination[];
+export declare function activeDestination(destinations: Destination[], pathname: string): Destination | undefined;
+export declare function mobileDestinations(destinations: Destination[], ids: string[]): Destination[];
+export declare function shouldHandleNavigation(event: Pick<MouseEvent, 'button' | 'ctrlKey' | 'metaKey' | 'shiftKey' | 'altKey' | 'defaultPrevented'>): boolean;

package/dist/navigation.js

@@ -0,0 +1,30 @@
+/** Configuration comes from the app. Filtering is presentation, never authorization. */
+export function safeHref(value) {
+    const normalized = value.replace(/[\u0000-\u0020\u007f]/g, '');
+    const protocol = normalized.match(/^([a-z][a-z\d+.-]*):/i)?.[1].toLowerCase();
+    return !protocol || protocol === 'http' || protocol === 'https';
+}
+export function availableDestinations(destinations) {
+    return destinations.filter(d => d.visible !== false && d.permitted !== false && safeHref(d.href));
+}
+function path(value) {
+    return (value.split(/[?#]/, 1)[0].replace(/\/+$/, '') || '/');
+}
+export function activeDestination(destinations, pathname) {
+    const current = path(pathname);
+    return availableDestinations(destinations)
+        .filter(d => {
+        if (/^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(d.href))
+            return false;
+        const target = path(d.href);
+        return current === target || (d.match !== 'exact' && target !== '/' && current.startsWith(`${target}/`));
+    })
+        .sort((a, b) => path(b.href).length - path(a.href).length)[0];
+}
+export function mobileDestinations(destinations, ids) {
+    const registry = new Map(availableDestinations(destinations).map(d => [d.id, d]));
+    return [...new Set(ids)].flatMap(id => registry.has(id) ? [registry.get(id)] : []);
+}
+export function shouldHandleNavigation(event) {
+    return !event.defaultPrevented && event.button === 0 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey;
+}

package/dist/theme.css

@@ -0,0 +1,77 @@
+:root, [data-theme="light"] {
+  color-scheme: light;
+  --ts-primary:#6750a4; --ts-on-primary:#fff;
+  --ts-nav:#f4f3f6; --ts-on-nav:#34313c;
+  --ts-selection:#e9e2f5; --ts-on-selection:#483375;
+  --ts-surface:#fff; --ts-surface-subtle:#f9f9fb;
+  --ts-text:#27242d; --ts-muted:#625e6b; --ts-border:#dedbe4; --ts-focus:#6750a4;
+  --ts-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
+}
+[data-theme="dark"] {
+  color-scheme:dark;
+  --ts-primary:#d0bcff; --ts-on-primary:#33205d;
+  --ts-nav:#211f25; --ts-on-nav:#e5e0ea;
+  --ts-selection:#413653; --ts-on-selection:#e9ddff;
+  --ts-surface:#19171d; --ts-surface-subtle:#242128;
+  --ts-text:#eee9f2; --ts-muted:#beb7c7; --ts-border:#46404e; --ts-focus:#d0bcff;
+}
+.ts-shell { color:var(--ts-text); background:var(--ts-surface); font-family:var(--ts-font); font-size:16px; line-height:1.5; min-height:100dvh; }
+.ts-shell *, .ts-shell *::before, .ts-shell *::after { box-sizing:border-box; }
+.ts-nav-link, .ts-skip, a.ts-action { color:inherit; text-decoration:none; }
+.ts-shell button { font:inherit; cursor:pointer; }
+.ts-shell :focus-visible { outline:3px solid var(--ts-focus); outline-offset:3px; }
+.ts-shell-background { display:grid; grid-template-columns:256px minmax(0,1fr); min-height:100dvh; }
+.ts-skip { position:fixed; top:8px; left:16px; z-index:100; padding:12px; background:var(--ts-surface); transform:translateY(-180%); }
+.ts-skip:focus { transform:none; }
+.ts-sidebar { position:sticky; top:0; align-self:start; height:100dvh; overflow-y:auto; overscroll-behavior:contain; background:var(--ts-nav); color:var(--ts-on-nav); border-right:1px solid var(--ts-border); padding:32px 16px 20px; display:flex; flex-direction:column; gap:24px; }
+.ts-sidebar > * { flex-shrink:0; }
+.ts-brand { display:flex; align-items:center; gap:12px; margin:0 8px 14px; overflow-wrap:anywhere; }
+.ts-brand strong { display:block; font-size:20px; letter-spacing:-.5px; }
+.ts-brand-mark { display:grid; place-items:center; height:40px; width:40px; flex-shrink:0; border:1px solid var(--ts-border); border-radius:12px; font-size:28px; color:var(--ts-primary); font-weight:600; }
+.ts-app-label { display:block; color:var(--ts-muted); font-size:13px; }
+.ts-main-nav,.ts-drawer-nav { display:flex; flex-direction:column; gap:4px; }
+.ts-nav-link { display:flex; align-items:center; gap:12px; min-height:48px; padding:11px 12px; border-radius:10px; font-size:14px; font-weight:500; }
+.ts-nav-link svg { flex-shrink:0; }
+.ts-nav-label { min-width:0; flex:1; overflow-wrap:anywhere; }
+.ts-nav-link:hover { background:var(--ts-selection); }
+.ts-nav-link[aria-current="page"] { background:var(--ts-selection); color:var(--ts-on-selection); font-weight:650; }
+.ts-badge { flex-shrink:0; border:1px solid var(--ts-border); border-radius:6px; padding:0 6px; font-size:12px; min-width:22px; text-align:center; overflow-wrap:anywhere; max-width:45%; }
+.ts-section-label { margin:20px 12px 8px; font-size:11px; letter-spacing:.075em; text-transform:uppercase; color:var(--ts-muted); font-weight:650; overflow-wrap:anywhere; }
+.ts-services { margin-top:auto; padding-top:12px; border-top:1px solid var(--ts-border); }
+.ts-account { padding:12px 4px 0; border-top:1px solid var(--ts-border); }
+.ts-sidebar-note { color:var(--ts-muted); margin:0 12px; font-size:11px; }
+.ts-workspace { min-width:0; }
+.ts-header { min-height:122px; border-bottom:1px solid var(--ts-border); display:flex; gap:24px; align-items:center; justify-content:space-between; padding:28px 40px; }
+.ts-page-heading { min-width:0; }
+.ts-eyebrow { margin:0 0 4px; font-size:12px; color:var(--ts-muted); }
+.ts-header h1 { margin:0; font-size:28px; line-height:1.25; letter-spacing:-.8px; overflow-wrap:anywhere; }
+.ts-header-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
+.ts-page-content { padding:32px 40px 48px; max-width:1280px; margin:0 auto; outline:none; }
+.ts-action { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:44px; padding:10px 16px; border:0; border-radius:9px; background:var(--ts-primary); color:var(--ts-on-primary)!important; font-size:14px!important; font-weight:600!important; }
+.ts-action span { overflow-wrap:anywhere; }
+.ts-action svg { flex-shrink:0; }
+.ts-mobile-bar { display:none; }
+.ts-overlay { position:fixed; inset:0; background:rgb(17 14 23 / .48); z-index:40; }
+.ts-drawer { position:fixed; top:0; bottom:0; right:0; width:min(400px,calc(100% - 48px)); background:var(--ts-nav); color:var(--ts-on-nav); z-index:41; padding:20px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) 20px; overflow-y:auto; overscroll-behavior:contain; }
+.ts-drawer-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
+.ts-drawer-heading h2 { font-size:19px; margin:0; }
+.ts-icon-button { width:44px; height:44px; flex-shrink:0; color:inherit; background:transparent; border:1px solid var(--ts-border); border-radius:9px; }
+.ts-drawer-description { margin:4px 0 24px; color:var(--ts-muted); font-size:13px; }
+.ts-drawer .ts-services { margin-top:24px; }
+.ts-drawer .ts-account { margin-top:24px; }
+@media(max-width:767px) {
+  .ts-shell-background { display:block; }
+  .ts-sidebar { display:none; }
+  .ts-header { padding:24px 20px; min-height:108px; gap:12px; align-items:flex-start; }
+  .ts-header h1 { font-size:25px; }
+  .ts-header-actions { justify-content:flex-end; }
+  .ts-desktop-action { display:none; }
+  .ts-page-content { padding:24px 20px var(--ts-mobile-space); }
+  .ts-mobile-bar { display:flex; align-items:stretch; gap:2px; position:fixed; bottom:0; left:0; right:0; border-top:1px solid var(--ts-border); background:var(--ts-nav); padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); z-index:20; }
+  .ts-mobile-bar .ts-nav-link,.ts-mobile-bar .ts-action,.ts-menu-trigger { flex:1; min-width:0; min-height:56px; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:5px; padding:8px 3px; font-size:11px!important; text-align:center; border-radius:9px; }
+  .ts-mobile-bar .ts-nav-label { flex:0; width:100%; }
+  .ts-mobile-bar .ts-badge { font-size:10px; max-width:100%; }
+  .ts-mobile-bar .ts-action { margin:0 3px; }
+  .ts-menu-trigger { background:transparent; color:var(--ts-on-nav); border:0; }
+}
+@media(prefers-reduced-motion:reduce) { .ts-shell *, .ts-shell *::before, .ts-shell *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

package/dist/types.d.ts

@@ -0,0 +1,48 @@
+import type { Component, Snippet } from 'svelte';
+export type ShellIcon = Component<{
+    size?: number | string;
+    'aria-hidden'?: boolean | 'true' | 'false';
+}>;
+export interface Destination {
+    id: string;
+    label: string;
+    href: string;
+    icon?: ShellIcon;
+    groupId?: string;
+    badge?: string | number;
+    visible?: boolean;
+    permitted?: boolean;
+    match?: 'exact' | 'prefix';
+}
+export interface NavigationGroup {
+    id: string;
+    label: string;
+}
+export interface ServiceLink {
+    id: string;
+    label: string;
+    href: string;
+    icon?: ShellIcon;
+}
+export interface PrimaryAction {
+    id: string;
+    label: string;
+    icon?: ShellIcon;
+    href?: string;
+    onclick?: (event: MouseEvent) => void;
+}
+export interface AppShellProps {
+    brand: string;
+    appLabel: string;
+    pageTitle: string;
+    pathname: string;
+    destinations: Destination[];
+    groups?: NavigationGroup[];
+    mobilePrimaryIds?: string[];
+    primaryAction?: PrimaryAction;
+    serviceLinks?: ServiceLink[];
+    onNavigate?: (event: MouseEvent, destination: Destination) => void;
+    children: Snippet;
+    pageActions?: Snippet;
+    account?: Snippet;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@tendstead/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tendstead/ui.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "node scripts/dev.mjs",
+    "check": "npm run build:package && svelte-check --tsconfig ./tsconfig.json",
+    "build": "npm run build:package && npm run build:demo",
+    "test": "npm run test:unit && npm run test:browser",
+    "build:package": "svelte-package -i src/lib -o dist",
+    "build:demo": "vite build",
+    "test:unit": "vitest run",
+    "test:browser": "playwright test --project=chromium --project=firefox --project=webkit",
+    "preview": "vite preview --host 0.0.0.0",
+    "watch:package": "svelte-package -i src/lib -o dist --watch",
+    "test:visual": "playwright test --project=visual",
+    "test:visual:update": "playwright test --project=visual --update-snapshots=all",
+    "test:consumer": "node scripts/consumer-smoke.mjs",
+    "verify": "npm run check && npm run build && npm run test:unit && npm run test:consumer && npm run test:browser && npm run test:visual"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./theme.css": "./dist/theme.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.20.0"
+  },
+  "dependencies": {
+    "@melt-ui/svelte": "0.86.6"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "4.14.0",
+    "@lucide/svelte": "1.67.0",
+    "@playwright/test": "1.63.0",
+    "@sveltejs/package": "2.5.8",
+    "@sveltejs/vite-plugin-svelte": "6.2.4",
+    "svelte": "5.57.3",
+    "svelte-check": "4.7.8",
+    "typescript": "5.9.3",
+    "vite": "7.3.7",
+    "vitest": "4.1.12"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
+}