sh3-core 0.6.0

package/README.md

@@ -0,0 +1,9 @@
+# sh3-core
+
+Core library for [SH3](https://github.com/Unfinished-Lair/sh3) — types, layout engine, state zones, overlays, shard/app lifecycle, and the shell component.
+
+```bash
+npm install sh3-core
+```
+
+Part of the [SH3 monorepo](https://github.com/Unfinished-Lair/sh3).

package/dist/Shell.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+  /*
+   * <Shell> — top-level chrome component.
+   *
+   * Owns the tab bar, status bar, docked content area (layer 0), and the
+   * six overlay roots (layers 1-6). This is a stub implementation for
+   * phase 1: the content area is empty and the overlay roots are present
+   * but unmanaged. Layout tree rendering arrives in phase 2; overlay layer
+   * managers arrive in phase 5.
+   *
+   * The six overlay roots are mounted here (not lazily) so that layer
+   * managers in later phases have stable DOM targets to portal into.
+   */
+
+  import './tokens.css';
+  import './primitives/base.css';
+  import LayoutRenderer from './layout/LayoutRenderer.svelte';
+  import DragPreview from './layout/DragPreview.svelte';
+  import type { OverlayLayer } from './overlays/types';
+  import { registerLayerRoot, unregisterLayerRoot } from './overlays/roots';
+  import { returnToHome, isAdmin } from './api';
+  import { getActiveRoot } from './layout/store.svelte';
+  import { dockIntoActiveLayout } from './layout/inspection';
+  import { isAuthenticated, isLocalOwner, getUser, logout } from './auth/index';
+  import iconsUrl from './assets/icons.svg';
+  import GuestBanner from './auth/GuestBanner.svelte';
+
+  const authenticated = $derived(isAuthenticated());
+  const user = $derived(getUser());
+  const elevated = $derived(isAdmin());
+  // True when the layout manager is rendering the home root. We can't use
+  // getActiveApp() here: returnToHome() keeps the app warm (activeApp.id
+  // stays set) and only flips the layout store's activeRoot back to 'home'.
+  const onHome = $derived(getActiveRoot() === 'home');
+
+  // Layer metadata — order matches the stack in docs/design/layout.md.
+  // Index 0 here is layer 1 (floating panels); layer 0 is the content area.
+  const overlayLayers: { layer: number; name: OverlayLayer }[] = [
+    { layer: 1, name: 'floating'     },
+    { layer: 2, name: 'drag-preview' },
+    { layer: 3, name: 'popup'        },
+    { layer: 4, name: 'modal'        },
+    { layer: 5, name: 'toast'        },
+    { layer: 6, name: 'command'      },
+  ];
+
+  // Populated by bind:this during render; registered with the overlay
+  // module via $effect after mount so layer managers (shell.modal,
+  // shell.popup, shell.toast) can find their target DOM roots.
+  const overlayRoots: Partial<Record<OverlayLayer, HTMLDivElement>> = $state({});
+
+  $effect(() => {
+    for (const { name } of overlayLayers) {
+      const el = overlayRoots[name];
+      if (el) registerLayerRoot(name, el);
+    }
+    return () => {
+      for (const { name } of overlayLayers) unregisterLayerRoot(name);
+    };
+  });
+
+  // The AZERTY `²` key (top-left, below Escape) docks the terminal view
+  // into the currently-rendered layout — whichever app is active, or the
+  // home root if none. Admin-only because the shell shard is admin-gated.
+  // Provisional ergonomics shortcut; a real hotkey contribution API is
+  // DF1 in the roadmap, and dedicated floating-window placement is
+  // SH9 / DF3.
+  //
+  // Bare key (no modifier) so it must be suppressed while the user is
+  // typing into an input/textarea/contenteditable, or the shortcut would
+  // eat `²` characters mid-word.
+  $effect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key !== '²') return;
+      if (!elevated) return;
+      const target = e.target as HTMLElement | null;
+      if (target) {
+        const tag = target.tagName;
+        if (
+          tag === 'INPUT' ||
+          tag === 'TEXTAREA' ||
+          target.isContentEditable
+        ) return;
+      }
+      e.preventDefault();
+      dockIntoActiveLayout({
+        slotId: `shell.terminal.${Date.now()}`,
+        viewId: 'shell:terminal',
+        label: 'Shell',
+      });
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  });
+</script>
+
+<div class="shell">
+  <header class="shell-tabbar" data-shell-region="tabbar">
+    <button
+      type="button"
+      class="shell-tabbar-home-button"
+      onclick={() => returnToHome()}
+      disabled={onHome}
+      title="Home"
+    >
+      <svg class="shell-tabbar-home-icon" aria-hidden="true">
+        <use href="{iconsUrl}#house" />
+      </svg>
+    </button>
+    <span class="shell-tabbar-brand">SH3</span>
+    {#if authenticated && user}
+      <div class="shell-tabbar-user">
+        <span class="shell-tabbar-user-name">{user.displayName}</span>
+        <span class="shell-tabbar-tag">{elevated ? 'admin' : 'user'}</span>
+        {#if !isLocalOwner()}
+          <button
+            type="button"
+            class="shell-tabbar-signout"
+            onclick={() => logout()}
+            title="Sign out"
+          >
+            <svg class="shell-tabbar-signout-icon" aria-hidden="true">
+              <use href="{iconsUrl}#log-out" />
+            </svg>
+          </button>
+        {/if}
+      </div>
+    {/if}
+  </header>
+
+  <GuestBanner />
+
+  <main class="shell-content" data-shell-region="content" data-shell-layer="0">
+    <LayoutRenderer />
+  </main>
+
+  <footer class="shell-statusbar" data-shell-region="statusbar">
+    <!-- alpha tag moved to ShellHome title row -->
+  </footer>
+
+  <!--
+    Overlay roots. Each is absolutely positioned over the entire shell with
+    pointer-events: none by default; layer managers enable pointer events on
+    the specific surfaces they portal in.
+  -->
+  <div class="shell-overlays" aria-hidden="true">
+    {#each overlayLayers as { layer, name } (layer)}
+      <div
+        class="shell-overlay-root"
+        data-shell-overlay={name}
+        data-shell-layer={layer}
+        style="z-index: var(--shell-z-layer-{layer});"
+        bind:this={overlayRoots[name]}
+      >
+        {#if name === 'drag-preview'}
+          <DragPreview />
+        {/if}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .shell {
+    display: grid;
+    grid-template-rows: var(--shell-tabbar-height) auto 1fr var(--shell-statusbar-height);
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background: var(--shell-grad-bg, var(--shell-bg));
+    color: var(--shell-fg);
+  }
+
+  .shell-tabbar {
+    display: flex;
+    align-items: center;
+    gap: var(--shell-pad-md);
+    padding: 0 var(--shell-pad-md);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
+    border-bottom: 1px solid var(--shell-border);
+    user-select: none;
+  }
+  .shell-tabbar-brand {
+    font-weight: 600;
+    color: var(--shell-accent);
+    letter-spacing: 0.5px;
+  }
+
+  .shell-content {
+    position: relative;
+    overflow: hidden;
+    background: var(--shell-grad-bg, var(--shell-bg));
+    min-width: 0;
+    min-height: 0;
+  }
+  .shell-statusbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 var(--shell-pad-md);
+    background: var(--shell-grad-bg-sunken, var(--shell-bg-sunken));
+    border-top: 1px solid var(--shell-border);
+    color: var(--shell-fg-muted);
+    font-size: 11px;
+    user-select: none;
+  }
+
+  .shell-overlays {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .shell-overlay-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .shell-tabbar-home-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    background: transparent;
+    color: var(--shell-fg-muted);
+    border: 1px solid var(--shell-border);
+  }
+  .shell-tabbar-home-button:hover:not(:disabled) {
+    color: var(--shell-fg);
+    border-color: var(--shell-fg-muted);
+  }
+  .shell-tabbar-home-button:disabled {
+    color: var(--shell-fg-subtle);
+    border-color: var(--shell-border);
+    cursor: default;
+  }
+  .shell-tabbar-home-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .shell-tabbar-user {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+  }
+  .shell-tabbar-user-name {
+    font-size: 12px;
+    color: var(--shell-fg-subtle);
+  }
+  .shell-tabbar-tag {
+    font-size: 9px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #fff;
+    background: var(--shell-accent);
+    padding: 1px 6px;
+    border-radius: 6px;
+  }
+  .shell-tabbar-signout {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    background: transparent;
+    color: var(--shell-fg-muted);
+    border: 1px solid var(--shell-border);
+  }
+  .shell-tabbar-signout:hover {
+    color: var(--shell-fg);
+    border-color: var(--shell-fg-muted);
+  }
+  .shell-tabbar-signout-icon {
+    width: 14px;
+    height: 14px;
+  }
+</style>

package/dist/Shell.svelte.d.ts

@@ -0,0 +1,5 @@
+import './tokens.css';
+import './primitives/base.css';
+declare const Shell: import("svelte").Component<Record<string, never>, {}, "">;
+type Shell = ReturnType<typeof Shell>;
+export default Shell;

package/dist/api.d.ts

@@ -0,0 +1,28 @@
+export { shell } from './shellRuntime.svelte';
+export type { Shell } from './shellRuntime.svelte';
+export type { Shard, ShardManifest, ShardContext, ViewDeclaration, ViewFactory, ViewHandle, MountContext, } from './shards/types';
+export type { LayoutNode, SplitNode, TabsNode, SlotNode, TabEntry, SplitDirection, SizeMode, } from './layout/types';
+export type { ZoneSchema, ZoneName, ZoneManager } from './state/types';
+export { PERMISSION_STATE_MANAGE } from './state/types';
+export type { StateZones } from './state/zones.svelte';
+export type { EnvState } from './env/types';
+export type { App, AppManifest, AppContext } from './apps/types';
+export { listRegisteredApps, getActiveApp } from './apps/registry.svelte';
+export { launchApp, returnToHome } from './apps/lifecycle';
+export { inspectActiveLayout, spliceIntoActiveLayout, dockIntoActiveLayout, focusTab, focusView, collapseChild, expandChild, closeTab, } from './layout/inspection';
+export type { DocumentHandle, DocumentHandleOptions, DocumentFormat, DocumentMeta, DocumentChange, AutosaveController, } from './documents/types';
+export { registeredShards, activeShards } from './shards/activate.svelte';
+export type { RegistryIndex, PackageEntry, PackageVersion, RequiredDependency, InstalledPackage, InstallResult, PackageMeta, } from './registry/types';
+export type { ResolvedPackage } from './registry/client';
+export { fetchRegistries, fetchBundle, buildPackageMeta } from './registry/client';
+export { validateRegistryIndex } from './registry/schema';
+export { isAdmin, isAuthenticated, isGuest, getUser, getAuthHeader } from './auth/index';
+export type { AuthUser, AuthSession, BootConfig } from './auth/types';
+/** Runtime feature flags for target-dependent behavior. */
+export declare const capabilities: {
+    /** Whether this target supports hot-installing packages via dynamic import from blob URL. */
+    readonly hotInstall: boolean;
+};
+export type { ServerShard, ServerShardContext } from './server-shard/types';
+export { VERSION } from './version';
+export { setTokenOverrides, clearTokenOverrides, getTokenOverrides, } from './theme';

package/dist/api.js

@@ -0,0 +1,50 @@
+/*
+ * Public framework API — the single import path shards and apps are
+ * allowed to touch. The phase 9 package boundary turns this file (and
+ * only this file) into the published entry point.
+ *
+ * What belongs here:
+ *   - Types that shards and apps consume (Shard, App, ShardContext, etc.)
+ *   - The `shell` runtime singleton (modal/popup/toast)
+ *   - Layout inspection/mutation helpers for advanced shards (added in
+ *     Task 12)
+ *   - Host actions callable from inside views (launchApp, returnToHome,
+ *     listRegisteredApps — added in Task 7 and Task 10)
+ *
+ * What does NOT belong here:
+ *   - `registerShard` / `registerApp` — those are host-only and live in
+ *     `host.ts`. Shards and apps must not register each other.
+ *   - Framework internals (state zone plumbing, layout manager internals,
+ *     shard activation machinery).
+ *
+ * Anything re-exported from this file is part of the public contract.
+ * Phase 10 adds a validator that enforces the import-hygiene rule; for
+ * now the convention is documented and honored by hand.
+ */
+// Runtime singleton.
+export { shell } from './shellRuntime.svelte';
+export { PERMISSION_STATE_MANAGE } from './state/types';
+// Host actions callable from inside views (shell home, status bar, etc.).
+export { listRegisteredApps, getActiveApp } from './apps/registry.svelte';
+export { launchApp, returnToHome } from './apps/lifecycle';
+// Layout inspection / mutation for advanced shards (diagnostic, etc.).
+export { inspectActiveLayout, spliceIntoActiveLayout, dockIntoActiveLayout, focusTab, focusView, collapseChild, expandChild, closeTab, } from './layout/inspection';
+// Shard introspection — read-only reactive maps exposing which shards are
+// known to the host and which are currently active. Intended for diagnostic
+// and tooling shards that need to visualize framework state. Phase 9
+// addition: diagnostic used to reach `activate.svelte` directly via $lib;
+// the package boundary requires routing through the public surface.
+export { registeredShards, activeShards } from './shards/activate.svelte';
+export { fetchRegistries, fetchBundle, buildPackageMeta } from './registry/client';
+export { validateRegistryIndex } from './registry/schema';
+// Admin mode (framework-internal components read admin status).
+export { isAdmin, isAuthenticated, isGuest, getUser, getAuthHeader } from './auth/index';
+/** Runtime feature flags for target-dependent behavior. */
+export const capabilities = {
+    /** Whether this target supports hot-installing packages via dynamic import from blob URL. */
+    hotInstall: typeof Blob !== 'undefined' && typeof URL.createObjectURL === 'function',
+};
+// Package version.
+export { VERSION } from './version';
+// Theme token override API (shell-level theming support).
+export { setTokenOverrides, clearTokenOverrides, getTokenOverrides, } from './theme';

package/dist/app/admin/ApiKeysView.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  /**
+   * Admin API Keys view — list, create, reveal, revoke API keys.
+   */
+
+  interface ApiKey {
+    id: string;
+    key: string;
+    label: string;
+    createdAt: string;
+  }
+
+  let keys = $state<ApiKey[]>([]);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+
+  // Create form
+  let showCreate = $state(false);
+  let newLabel = $state('');
+  let createError = $state<string | null>(null);
+
+  // Reveal state — tracks which key ids have been revealed
+  let revealed = $state<Set<string>>(new Set());
+
+  // Delete confirmation
+  let confirmingId = $state<string | null>(null);
+
+  async function fetchKeys() {
+    loading = true;
+    error = null;
+    try {
+      const res = await fetch('/api/admin/keys', { credentials: 'include' });
+      if (!res.ok) throw new Error('Failed to fetch keys');
+      keys = await res.json();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to load keys';
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function createKey() {
+    createError = null;
+    try {
+      const res = await fetch('/api/admin/keys', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ label: newLabel }),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        createError = body.error || 'Failed to create key';
+        return;
+      }
+      const created: ApiKey = await res.json();
+      revealed.add(created.id);
+      revealed = new Set(revealed);
+      newLabel = '';
+      showCreate = false;
+      await fetchKeys();
+    } catch {
+      createError = 'Network error';
+    }
+  }
+
+  function toggleReveal(id: string) {
+    if (revealed.has(id)) {
+      revealed.delete(id);
+    } else {
+      revealed.add(id);
+    }
+    revealed = new Set(revealed);
+  }
+
+  async function revokeKey(id: string) {
+    confirmingId = null;
+    try {
+      await fetch(`/api/admin/keys/${id}`, {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+      revealed.delete(id);
+      revealed = new Set(revealed);
+      await fetchKeys();
+    } catch { /* ignore */ }
+  }
+
+  function formatDate(iso: string): string {
+    return new Date(iso).toLocaleDateString(undefined, {
+      year: 'numeric', month: 'short', day: 'numeric',
+    });
+  }
+
+  function maskKey(key: string): string {
+    return key.slice(0, 8) + '\u2026' + key.slice(-4);
+  }
+
+  fetchKeys();
+</script>
+
+<div class="admin-keys">
+  <div class="admin-keys-header">
+    <h2>API Keys</h2>
+    <button type="button" class="admin-btn" onclick={() => { showCreate = !showCreate; }}>
+      {showCreate ? 'Cancel' : 'New key'}
+    </button>
+  </div>
+
+  {#if showCreate}
+    <form class="admin-create-form" onsubmit={(e) => { e.preventDefault(); createKey(); }}>
+      <input class="admin-input" type="text" placeholder="Key label" bind:value={newLabel} />
+      <button type="submit" class="admin-btn" disabled={!newLabel.trim()}>Create</button>
+      {#if createError}<div class="admin-error">{createError}</div>{/if}
+    </form>
+  {/if}
+
+  {#if loading}
+    <p class="admin-muted">Loading...</p>
+  {:else if error}
+    <p class="admin-error">{error}</p>
+  {:else if keys.length === 0}
+    <p class="admin-muted">No API keys. Create one to enable external access.</p>
+  {:else}
+    <ul class="admin-key-list">
+      {#each keys as k (k.id)}
+        <li class="admin-key-item">
+          <div class="admin-key-info">
+            <span class="admin-key-label">{k.label}</span>
+            <span class="admin-key-meta">{k.id} &middot; {formatDate(k.createdAt)}</span>
+            <code class="admin-key-value">{revealed.has(k.id) ? k.key : maskKey(k.key)}</code>
+          </div>
+          <div class="admin-key-actions">
+            <button type="button" class="admin-btn-secondary" onclick={() => toggleReveal(k.id)}>
+              {revealed.has(k.id) ? 'Hide' : 'Reveal'}
+            </button>
+            {#if confirmingId === k.id}
+              <button type="button" class="admin-btn-danger" onclick={() => revokeKey(k.id)}>Confirm</button>
+              <button type="button" class="admin-btn-secondary" onclick={() => { confirmingId = null; }}>Cancel</button>
+            {:else}
+              <button type="button" class="admin-btn-danger" onclick={() => { confirmingId = k.id; }}>Revoke</button>
+            {/if}
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .admin-keys { padding: 24px; font-family: system-ui, sans-serif; color: var(--shell-fg); }
+  .admin-keys-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+  .admin-keys-header h2 { margin: 0; font-size: 18px; }
+  .admin-create-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; max-width: 400px; }
+  .admin-input { padding: 8px 12px; background: var(--shell-bg, #1a1a2e); color: var(--shell-fg); border: 1px solid var(--shell-border, #3a3a5c); border-radius: var(--shell-radius, 6px); font-size: 13px; }
+  .admin-btn { font-weight: 600; font-size: 13px; }
+  .admin-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+  .admin-btn-secondary { background: transparent; color: var(--shell-fg-subtle); border: 1px solid var(--shell-border); font-size: 12px; }
+  .admin-btn-danger { background: transparent; color: var(--shell-error, #d32f2f); border: 1px solid var(--shell-error, #d32f2f); font-size: 12px; }
+  .admin-key-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+  .admin-key-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--shell-bg-elevated, #252540); border: 1px solid var(--shell-border, #3a3a5c); border-radius: var(--shell-radius, 6px); }
+  .admin-key-info { display: flex; flex-direction: column; gap: 2px; }
+  .admin-key-label { font-weight: 600; }
+  .admin-key-meta { font-size: 11px; color: var(--shell-fg-subtle); }
+  .admin-key-value { font-size: 12px; color: var(--shell-fg-muted); background: var(--shell-bg, #1a1a2e); padding: 2px 6px; border-radius: 3px; margin-top: 2px; word-break: break-all; }
+  .admin-key-actions { display: flex; gap: 6px; flex-shrink: 0; }
+  .admin-muted { color: var(--shell-fg-muted); font-style: italic; }
+  .admin-error { color: var(--shell-error, #d32f2f); font-size: 13px; }
+</style>

package/dist/app/admin/ApiKeysView.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ApiKeysView: import("svelte").Component<Record<string, never>, {}, "">;
+type ApiKeysView = ReturnType<typeof ApiKeysView>;
+export default ApiKeysView;

package/dist/app/admin/AuthSettingsView.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  /**
+   * Admin Auth Settings view — toggle auth-related global settings.
+   */
+
+  import type { GlobalSettings } from '../../auth/types';
+
+  let settings = $state<GlobalSettings | null>(null);
+  let loading = $state(true);
+  let saving = $state(false);
+  let error = $state<string | null>(null);
+
+  async function fetchSettings() {
+    loading = true;
+    try {
+      const res = await fetch('/api/admin/settings', { credentials: 'include' });
+      if (!res.ok) throw new Error('Failed to fetch settings');
+      settings = await res.json();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to load settings';
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function save() {
+    if (!settings) return;
+    saving = true;
+    error = null;
+    try {
+      const res = await fetch('/api/admin/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify(settings),
+      });
+      if (!res.ok) throw new Error('Failed to save settings');
+      settings = await res.json();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to save';
+    } finally {
+      saving = false;
+    }
+  }
+
+  fetchSettings();
+</script>
+
+<div class="admin-auth">
+  <h2>Auth Settings</h2>
+
+  {#if loading}
+    <p class="admin-muted">Loading...</p>
+  {:else if settings}
+    <div class="admin-auth-fields">
+      <label class="admin-toggle">
+        <input type="checkbox" bind:checked={settings.auth.required} />
+        <span>Require sign-in</span>
+        <span class="admin-hint">When enabled, unauthenticated visitors see a sign-in wall.</span>
+      </label>
+
+      <label class="admin-toggle">
+        <input type="checkbox" bind:checked={settings.auth.guestAllowed} />
+        <span>Allow guest browsing</span>
+        <span class="admin-hint">When sign-in is required, guests can still browse with session-only data.</span>
+      </label>
+
+      <label class="admin-toggle">
+        <input type="checkbox" bind:checked={settings.auth.selfRegistration} />
+        <span>Self-registration</span>
+        <span class="admin-hint">Visitors can create their own accounts from the sign-in screen.</span>
+      </label>
+
+      <label class="admin-field">
+        <span>Session lifetime (hours)</span>
+        <input type="number" class="admin-input admin-input-sm" min="1" max="8760" bind:value={settings.auth.sessionTTL} />
+      </label>
+
+      <button type="button" class="admin-btn" onclick={save} disabled={saving}>
+        {saving ? 'Saving...' : 'Save'}
+      </button>
+    </div>
+
+    {#if error}
+      <div class="admin-error">{error}</div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .admin-auth { padding: 24px; font-family: system-ui, sans-serif; color: var(--shell-fg); }
+  .admin-auth h2 { margin: 0 0 16px; font-size: 18px; }
+  .admin-auth-fields { display: flex; flex-direction: column; gap: 16px; max-width: 480px; }
+  .admin-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; }
+  .admin-toggle input { accent-color: var(--shell-accent, #7c7cf0); }
+  .admin-hint { flex-basis: 100%; font-size: 11px; color: var(--shell-fg-muted); margin-left: 24px; }
+  .admin-field { display: flex; flex-direction: column; gap: 4px; }
+  .admin-field span { font-size: 13px; }
+  .admin-input { padding: 8px 12px; background: var(--shell-bg); color: var(--shell-fg); border: 1px solid var(--shell-border); border-radius: var(--shell-radius, 6px); font-size: 13px; }
+  .admin-input-sm { max-width: 120px; }
+  .admin-btn { padding: 8px 16px; font-weight: 600; align-self: flex-start; }
+  .admin-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+  .admin-error { margin-top: 8px; color: var(--shell-error, #d32f2f); font-size: 13px; }
+  .admin-muted { color: var(--shell-fg-muted); font-style: italic; }
+</style>

package/dist/app/admin/AuthSettingsView.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AuthSettingsView: import("svelte").Component<Record<string, never>, {}, "">;
+type AuthSettingsView = ReturnType<typeof AuthSettingsView>;
+export default AuthSettingsView;