sh3-core 0.5.2 → 0.5.5

package/dist/apps/types.d.ts

@@ -77,4 +77,17 @@ export interface App {
     activate?(ctx: AppContext): void | Promise<void>;
     /** Optional hook called before the app's shards are deactivated and the layout is detached. */
     deactivate?(): void | Promise<void>;
+    /**
+     * Called when the user navigates to Home while the app is active. The
+     * app's shards, state, and pooled views remain alive. Return `false`
+     * (sync or async) to cancel the navigation — useful for "unsaved
+     * changes" confirmation modals.
+     */
+    suspend?(): void | false | Promise<void | false>;
+    /**
+     * Called when the app is re-entered from Home (root swap back to app).
+     * Does NOT fire on first launch — that is `activate`. Receives the
+     * same `AppContext` that `activate` received.
+     */
+    resume?(ctx: AppContext): void | Promise<void>;
 }

package/dist/auth/GuestBanner.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  /**
+   * GuestBanner — persistent bar shown when browsing as guest.
+   * Clicking "Sign in" opens a modal-like overlay with the sign-in form.
+   */
+
+  import { isGuest, login, register } from './index';
+
+  let showSignIn = $state(false);
+  let username = $state('');
+  let password = $state('');
+  let error = $state<string | null>(null);
+  let loading = $state(false);
+
+  async function handleLogin() {
+    if (!username.trim() || !password.trim() || loading) return;
+    loading = true;
+    error = null;
+    const result = await login(username.trim(), password.trim());
+    loading = false;
+    if (result.ok) {
+      showSignIn = false;
+    } else {
+      error = result.error;
+    }
+  }
+</script>
+
+<div class="guest-banner-slot">
+{#if isGuest()}
+  <div class="guest-banner">
+    <span class="guest-banner-text">Browsing as guest. Sign in to save your work.</span>
+    <button type="button" class="guest-banner-action" onclick={() => { showSignIn = true; }}>
+      Sign in
+    </button>
+  </div>
+
+  {#if showSignIn}
+    <div class="guest-signin-overlay" role="dialog">
+      <div class="guest-signin-card">
+        <form class="guest-signin-form" onsubmit={(e) => { e.preventDefault(); handleLogin(); }}>
+          <input class="guest-signin-input" type="text" placeholder="Username" bind:value={username} disabled={loading} autocomplete="username" />
+          <input class="guest-signin-input" type="password" placeholder="Password" bind:value={password} disabled={loading} autocomplete="current-password" />
+          <div class="guest-signin-actions">
+            <button type="submit" class="guest-signin-btn" disabled={loading || !username.trim() || !password.trim()}>
+              {loading ? 'Signing in...' : 'Sign in'}
+            </button>
+            <button type="button" class="guest-signin-cancel" onclick={() => { showSignIn = false; error = null; }}>
+              Cancel
+            </button>
+          </div>
+        </form>
+        {#if error}
+          <div class="guest-signin-error">{error}</div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+{/if}
+</div>
+
+<style>
+  .guest-banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 6px var(--shell-pad-md, 12px);
+    background: color-mix(in srgb, var(--shell-accent, #7c7cf0) 15%, transparent);
+    border-bottom: 1px solid var(--shell-border, #3a3a5c);
+    font-size: 12px;
+    color: var(--shell-fg, #e0e0e0);
+  }
+  .guest-banner-action {
+    padding: 3px 10px;
+    background: var(--shell-accent, #7c7cf0);
+    color: var(--shell-bg, #1a1a2e);
+    border: none;
+    border-radius: var(--shell-radius, 6px);
+    font-size: 11px;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .guest-signin-overlay {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+  }
+  .guest-signin-card {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 32px;
+    background: var(--shell-bg-elevated, #252540);
+    border: 1px solid var(--shell-border, #3a3a5c);
+    border-radius: var(--shell-radius-lg, 12px);
+    min-width: 300px;
+  }
+  .guest-signin-form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .guest-signin-input {
+    padding: 8px 12px;
+    background: var(--shell-bg, #1a1a2e);
+    color: var(--shell-fg, #e0e0e0);
+    border: 1px solid var(--shell-border, #3a3a5c);
+    border-radius: var(--shell-radius, 6px);
+    font-size: 13px;
+  }
+  .guest-signin-input::placeholder { color: var(--shell-fg-muted, #888); }
+  .guest-signin-actions { display: flex; gap: 8px; }
+  .guest-signin-btn {
+    flex: 1;
+    padding: 8px;
+    background: var(--shell-accent, #7c7cf0);
+    color: var(--shell-bg, #1a1a2e);
+    border: none;
+    border-radius: var(--shell-radius, 6px);
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .guest-signin-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+  .guest-signin-cancel {
+    padding: 8px 12px;
+    background: transparent;
+    color: var(--shell-fg-subtle, #aaa);
+    border: 1px solid var(--shell-border, #3a3a5c);
+    border-radius: var(--shell-radius, 6px);
+    cursor: pointer;
+  }
+  .guest-signin-error {
+    padding: 6px 10px;
+    font-size: 12px;
+    color: var(--shell-error, #d32f2f);
+    background: color-mix(in srgb, var(--shell-error, #d32f2f) 10%, transparent);
+    border-radius: var(--shell-radius, 6px);
+  }
+</style>

package/dist/auth/GuestBanner.svelte.d.ts

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

package/dist/auth/SignInWall.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+  /**
+   * SignInWall — standalone sign-in screen shown before shell boots.
+   * Mounted directly to the target element by createShell().
+   */
+
+  import { login, register } from './index';
+
+  interface Props {
+    serverUrl: string;
+    selfRegistration: boolean;
+    onSuccess: () => void;
+  }
+
+  let { serverUrl, selfRegistration, onSuccess }: Props = $props();
+
+  let mode = $state<'login' | 'register'>('login');
+  let username = $state('');
+  let password = $state('');
+  let displayName = $state('');
+  let error = $state<string | null>(null);
+  let loading = $state(false);
+
+  async function handleLogin() {
+    if (!username.trim() || !password.trim() || loading) return;
+    loading = true;
+    error = null;
+    const result = await login(username.trim(), password.trim());
+    loading = false;
+    if (result.ok) {
+      onSuccess();
+    } else {
+      error = result.error;
+    }
+  }
+
+  async function handleRegister() {
+    if (!username.trim() || !password.trim() || loading) return;
+    loading = true;
+    error = null;
+    const result = await register(
+      username.trim(),
+      password.trim(),
+      displayName.trim() || undefined,
+    );
+    loading = false;
+    if (result.ok) {
+      onSuccess();
+    } else {
+      error = result.error;
+    }
+  }
+
+  function switchMode(m: 'login' | 'register') {
+    mode = m;
+    error = null;
+  }
+</script>
+
+<div class="signin-wall">
+  <div class="signin-card">
+    <h1 class="signin-brand">SH3</h1>
+
+    {#if mode === 'login'}
+      <form class="signin-form" onsubmit={(e) => { e.preventDefault(); handleLogin(); }}>
+        <input
+          class="signin-input"
+          type="text"
+          placeholder="Username"
+          bind:value={username}
+          disabled={loading}
+          autocomplete="username"
+        />
+        <input
+          class="signin-input"
+          type="password"
+          placeholder="Password"
+          bind:value={password}
+          disabled={loading}
+          autocomplete="current-password"
+        />
+        <button type="submit" class="signin-btn" disabled={loading || !username.trim() || !password.trim()}>
+          {loading ? 'Signing in...' : 'Sign in'}
+        </button>
+      </form>
+      {#if selfRegistration}
+        <button type="button" class="signin-link" onclick={() => switchMode('register')}>
+          Create an account
+        </button>
+      {/if}
+    {:else}
+      <form class="signin-form" onsubmit={(e) => { e.preventDefault(); handleRegister(); }}>
+        <input
+          class="signin-input"
+          type="text"
+          placeholder="Username"
+          bind:value={username}
+          disabled={loading}
+          autocomplete="username"
+        />
+        <input
+          class="signin-input"
+          type="text"
+          placeholder="Display name (optional)"
+          bind:value={displayName}
+          disabled={loading}
+        />
+        <input
+          class="signin-input"
+          type="password"
+          placeholder="Password"
+          bind:value={password}
+          disabled={loading}
+          autocomplete="new-password"
+        />
+        <button type="submit" class="signin-btn" disabled={loading || !username.trim() || !password.trim()}>
+          {loading ? 'Creating...' : 'Create account'}
+        </button>
+      </form>
+      <button type="button" class="signin-link" onclick={() => switchMode('login')}>
+        Back to sign in
+      </button>
+    {/if}
+
+    {#if error}
+      <div class="signin-error">{error}</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .signin-wall {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--shell-grad-bg, var(--shell-bg, #1a1a2e));
+    color: var(--shell-fg, #e0e0e0);
+    font-family: system-ui, sans-serif;
+  }
+  .signin-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    padding: 48px 40px;
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated, #252540));
+    border: 1px solid var(--shell-border, #3a3a5c);
+    border-radius: var(--shell-radius-lg, 12px);
+    min-width: 320px;
+  }
+  .signin-brand {
+    margin: 0 0 8px;
+    font-size: 42px;
+    color: var(--shell-accent, #7c7cf0);
+    letter-spacing: 2px;
+  }
+  .signin-form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+  }
+  .signin-input {
+    padding: 10px 14px;
+    background: var(--shell-bg, #1a1a2e);
+    color: var(--shell-fg, #e0e0e0);
+    border: 1px solid var(--shell-border, #3a3a5c);
+    border-radius: var(--shell-radius, 6px);
+    font-size: 14px;
+  }
+  .signin-input::placeholder {
+    color: var(--shell-fg-muted, #888);
+  }
+  .signin-btn {
+    padding: 10px 16px;
+    background: var(--shell-accent, #7c7cf0);
+    color: var(--shell-bg, #1a1a2e);
+    border: none;
+    border-radius: var(--shell-radius, 6px);
+    font-weight: 600;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .signin-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .signin-btn:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+  .signin-link {
+    background: none;
+    border: none;
+    color: var(--shell-accent, #7c7cf0);
+    cursor: pointer;
+    font-size: 13px;
+    padding: 0;
+  }
+  .signin-link:hover {
+    text-decoration: underline;
+  }
+  .signin-error {
+    padding: 8px 12px;
+    font-size: 13px;
+    color: var(--shell-error, #d32f2f);
+    background: color-mix(in srgb, var(--shell-error, #d32f2f) 10%, transparent);
+    border-radius: var(--shell-radius, 6px);
+    width: 100%;
+    text-align: center;
+  }
+</style>

package/dist/auth/SignInWall.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    serverUrl: string;
+    selfRegistration: boolean;
+    onSuccess: () => void;
+}
+declare const SignInWall: import("svelte").Component<Props, {}, "">;
+type SignInWall = ReturnType<typeof SignInWall>;
+export default SignInWall;

package/dist/auth/auth.svelte.d.ts

@@ -1,50 +1,61 @@
 /**
- * Client-side admin mode — API key elevation for SH3.
+ * Client-side auth — session-based identity for SH3.
  *
- * Stores the key in the user state zone so it persists across sessions.
- * Provides reactive `isAdmin` for gating admin apps. The key is verified
- * against the server on elevation and on boot (via initAuth).
+ * The boot flow (createShell) calls initFromBoot() with the server's
+ * boot config. After that, login/logout call the server and update
+ * the reactive state. isAdmin/isGuest/isAuthenticated are reactive
+ * getters consumed by shell components.
  *
- * Boot-time verification uses a short timeout and fails open — the shell
- * remains usable without admin access when the server is slow or offline.
- *
- * OS analogy: sudo / elevated permissions, not web login.
- *
- * .svelte.ts because it uses $state for reactive admin status.
+ * .svelte.ts because it uses $state for reactive auth status.
  */
+import type { AuthUser, AuthSession, BootConfig } from './types';
 /**
- * Initialize auth at boot. Call once from bootstrap().
- *
- * If a key is stored from a previous session, verifies it against the
- * server with a 3-second timeout. If verification fails (key revoked,
- * server down, timeout), the shell boots without admin access — the
- * stored key is cleared only on explicit rejection (401), not on
- * network failure (so a temporary outage doesn't force re-entry).
- *
- * @param url - Server base URL ('' for same-origin).
+ * Initialize auth from boot config. Called once by createShell()
+ * after fetching /api/boot.
  */
-export declare function initAuth(url?: string): Promise<void>;
+export declare function initFromBoot(url: string, config: BootConfig): void;
 /**
- * Elevate to admin mode with an API key. Verifies against the server
- * before storing. Returns true on success, false if the key is invalid.
+ * Log in with username + password. On success, updates reactive state.
+ * Returns { ok: true } or { ok: false, error: string }.
  */
-export declare function elevate(key: string): Promise<boolean>;
+export declare function login(username: string, password: string): Promise<{
+    ok: true;
+} | {
+    ok: false;
+    error: string;
+}>;
 /**
- * De-escalate from admin mode — clear the stored key and drop elevation.
+ * Register a new account (when self-registration is enabled).
+ * On success, auto-logs in and updates reactive state.
  */
-export declare function deescalate(): void;
+export declare function register(username: string, password: string, displayName?: string): Promise<{
+    ok: true;
+} | {
+    ok: false;
+    error: string;
+}>;
 /**
- * Reactive getter — true when the user has elevated to admin mode.
+ * Log out — clear session on server and client.
  */
-export declare function isAdmin(): boolean;
+export declare function logout(): Promise<void>;
 /**
  * Mark this session as local-owner — auto-elevate to admin without
- * key verification. Called by the host in Tauri / dev environments
- * where the user owns the machine. Idempotent.
+ * server verification. Called by the host in Tauri / dev environments.
  */
 export declare function setLocalOwner(): void;
+/** Reactive — true when the user has admin role. */
+export declare function isAdmin(): boolean;
+/** Reactive — true when the user has a valid session. */
+export declare function isAuthenticated(): boolean;
+/** Reactive — true when browsing without a session. */
+export declare function isGuest(): boolean;
+/** Get the current user (reactive). */
+export declare function getUser(): AuthUser | null;
+/** Get the current session (reactive). */
+export declare function getSession(): AuthSession | null;
 /**
- * Build an Authorization header value for authenticated fetch calls.
- * Returns null if not elevated.
+ * Build an Authorization header value for authenticated fetch calls
+ * that need explicit headers (e.g. non-cookie contexts).
+ * Returns null if not authenticated.
  */
 export declare function getAuthHeader(): string | null;