sh3-core 0.5.0 → 0.5.4

package/dist/Shell.svelte

@@ -160,7 +160,7 @@
     background: transparent;
     color: var(--shell-fg-muted);
     border: 1px solid var(--shell-border);
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     cursor: pointer;
   }
   .shell-tabbar-home-button:hover {
@@ -180,6 +180,6 @@
     color: #fff;
     background: var(--shell-accent);
     padding: 1px 6px;
-    border-radius: 8px;
+    border-radius: var(--shell-radius-lg);
   }
 </style>

package/dist/api.d.ts

@@ -23,4 +23,5 @@ export declare const capabilities: {
     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

@@ -44,5 +44,7 @@ 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/apps/lifecycle.d.ts

@@ -31,7 +31,12 @@ export declare function unloadApp(id: string): void;
  * refcount hold intact, and its view containers stay alive in the pool.
  * Launching the same app again is a root swap only.
  *
+ * Fires `suspend` hooks on all required shards (in order), then on the
+ * app itself. Any hook returning `false` cancels navigation — the user
+ * stays in the app. Returns `true` if navigation succeeded, `false` if
+ * cancelled.
+ *
  * Writes `null` to `__shell__:last-app` so reloading the page while on
  * home lands on home, not on the formerly-active app.
  */
-export declare function returnToHome(): void;
+export declare function returnToHome(): Promise<boolean>;

package/dist/apps/lifecycle.js

@@ -12,7 +12,7 @@
  * return-to-home (null). Boot reads it to decide whether to auto-launch.
  */
 import { createStateZones } from '../state/zones.svelte';
-import { activateShard, deactivateShard, registeredShards, } from '../shards/activate.svelte';
+import { activateShard, deactivateShard, getShardContext, registeredShards, } from '../shards/activate.svelte';
 import { attachApp, detachApp, switchToApp, switchToHome, } from '../layout/store.svelte';
 import { activeApp, getRegisteredApp } from './registry.svelte';
 import { createZoneManager } from '../state/manage';
@@ -69,7 +69,7 @@ function getOrCreateAppContext(appId) {
  * @throws If the app is not registered or a required shard is not registered.
  */
 export async function launchApp(id) {
-    var _a;
+    var _a, _b, _c;
     const app = getRegisteredApp(id);
     if (!app) {
         throw new Error(`Cannot launch app "${id}": not registered`);
@@ -82,6 +82,14 @@ export async function launchApp(id) {
         unloadApp(activeApp.id);
     }
     else if (activeApp.id === id) {
+        // Re-entering the same app from Home — fire resume hooks.
+        for (const shardId of app.manifest.requiredShards) {
+            const shard = registeredShards.get(shardId);
+            const shardCtx = getShardContext(shardId);
+            if (shard && shardCtx)
+                void ((_a = shard.resume) === null || _a === void 0 ? void 0 : _a.call(shard, shardCtx));
+        }
+        void ((_b = app.resume) === null || _b === void 0 ? void 0 : _b.call(app, getOrCreateAppContext(id)));
         switchToApp();
         writeLastApp(id);
         return;
@@ -99,7 +107,7 @@ export async function launchApp(id) {
     // Attach the layout (creates the workspace-zone proxy with version
     // gate) and run the app's optional activate hook.
     attachApp(app);
-    void ((_a = app.activate) === null || _a === void 0 ? void 0 : _a.call(app, getOrCreateAppContext(id)));
+    void ((_c = app.activate) === null || _c === void 0 ? void 0 : _c.call(app, getOrCreateAppContext(id)));
     activeApp.id = id;
     switchToApp();
     writeLastApp(id);
@@ -151,10 +159,26 @@ export function unloadApp(id) {
  * refcount hold intact, and its view containers stay alive in the pool.
  * Launching the same app again is a root swap only.
  *
+ * Fires `suspend` hooks on all required shards (in order), then on the
+ * app itself. Any hook returning `false` cancels navigation — the user
+ * stays in the app. Returns `true` if navigation succeeded, `false` if
+ * cancelled.
+ *
  * Writes `null` to `__shell__:last-app` so reloading the page while on
  * home lands on home, not on the formerly-active app.
  */
-export function returnToHome() {
+export async function returnToHome() {
+    const app = activeApp.id ? getRegisteredApp(activeApp.id) : null;
+    if (app) {
+        for (const shardId of app.manifest.requiredShards) {
+            const shard = registeredShards.get(shardId);
+            if ((shard === null || shard === void 0 ? void 0 : shard.suspend) && (await shard.suspend()) === false)
+                return false;
+        }
+        if (app.suspend && (await app.suspend()) === false)
+            return false;
+    }
     switchToHome();
     writeLastApp(null);
+    return true;
 }

package/dist/apps/registry.svelte.d.ts

@@ -14,8 +14,11 @@ export declare const activeApp: {
     id: string | null;
 };
 /**
- * Register an app with the framework. Must be called before `launchApp`.
- * Throws if an app with the same id is already registered.
+ * Register (or re-register) an app with the framework.
+ *
+ * If an app with the same id already exists it is silently replaced,
+ * which is the expected path during package updates — the new bundle is
+ * loaded and re-registered without requiring a full page reload.
  *
  * @param app - The app module to register.
  */

package/dist/apps/registry.svelte.js

@@ -21,17 +21,16 @@ export const registeredApps = $state(new Map());
  */
 export const activeApp = $state({ id: null });
 /**
- * Register an app with the framework. Must be called before `launchApp`.
- * Throws if an app with the same id is already registered.
+ * Register (or re-register) an app with the framework.
+ *
+ * If an app with the same id already exists it is silently replaced,
+ * which is the expected path during package updates — the new bundle is
+ * loaded and re-registered without requiring a full page reload.
  *
  * @param app - The app module to register.
  */
 export function registerApp(app) {
-    const id = app.manifest.id;
-    if (registeredApps.has(id)) {
-        throw new Error(`App "${id}" is already registered`);
-    }
-    registeredApps.set(id, app);
+    registeredApps.set(app.manifest.id, app);
 }
 /**
  * Reactive snapshot of all registered app manifests. Shell home iterates

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/diagnostic/DiagnosticPanel.svelte

@@ -11,6 +11,7 @@
    * Reads through the public sh3 API surface only.
    */
 
+  import { onMount } from 'svelte';
   import {
     listRegisteredApps,
     getActiveApp,
@@ -25,11 +26,30 @@
   const regShards = $derived(Array.from(registeredShards.values()));
   const actShards = $derived(Array.from(activeShards.keys()));
 
+  let serverVersion = $state<string | null>(null);
+
+  onMount(async () => {
+    try {
+      const res = await fetch('/api/version');
+      if (res.ok) {
+        const data = await res.json();
+        serverVersion = data.version;
+      }
+    } catch {
+      // Server unreachable — leave null.
+    }
+  });
+
 </script>
 
 <div class="diagnostic">
   <h2>Diagnostic</h2>
 
+  <section>
+    <h3>Server version</h3>
+    <p>{serverVersion ?? '—'}</p>
+  </section>
+
   <section>
     <h3>Active app</h3>
     <p>{active ? `${active.label} (${active.id})` : 'none'}</p>

package/dist/diagnostic/DiagnosticPromptModal.svelte

@@ -73,7 +73,7 @@
     background: var(--shell-accent-muted);
     color: var(--shell-fg);
     border: 1px solid var(--shell-border-strong);
-    border-radius: 3px;
+    border-radius: var(--shell-radius-sm);
     cursor: pointer;
   }
   button:hover { background: var(--shell-accent); }

package/dist/layout/DragPreview.svelte

@@ -49,7 +49,7 @@
     background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-accent);
-    border-radius: 3px;
+    border-radius: var(--shell-radius-sm);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
     font-size: 12px;
     font-family: var(--shell-font-ui);

package/dist/overlays/ModalFrame.svelte

@@ -76,7 +76,7 @@
     background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-border-strong);
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     min-width: 320px;
     max-width: min(640px, 90vw);
     max-height: 90vh;

package/dist/overlays/PopupFrame.svelte

@@ -76,7 +76,7 @@
     background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-border-strong);
-    border-radius: 3px;
+    border-radius: var(--shell-radius-sm);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
     min-width: 120px;
     outline: none;

package/dist/overlays/ToastItem.svelte

@@ -48,7 +48,7 @@
     color: var(--shell-fg);
     border: 1px solid var(--shell-border-strong);
     border-left-width: 3px;
-    border-radius: 3px;
+    border-radius: var(--shell-radius-sm);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
     font-size: 12px;
     min-width: 220px;

package/dist/primitives/TabbedPanel.svelte

@@ -265,7 +265,7 @@
     font-size: 10px;
     line-height: 1;
     padding: 2px;
-    border-radius: 3px;
+    border-radius: var(--shell-radius-sm);
     color: var(--shell-fg-muted);
     cursor: pointer;
     flex-shrink: 0;

package/dist/registry/installer.js

@@ -97,8 +97,6 @@ export async function installPackage(bundle, meta) {
             registerApp(app);
     }
     catch (err) {
-        // Registration failure (e.g. duplicate id) -- the package is persisted
-        // but not usable until reload. Log and continue.
         console.warn(`[sh3] Package "${meta.id}" installed but registration failed (will retry on next boot):`, err instanceof Error ? err.message : err);
         hotLoaded = false;
     }

package/dist/shards/activate.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Shard } from './types';
+import type { Shard, ShardContext } from './types';
 /**
  * Reactive registry of every shard known to the host. Keys are shard ids.
  * Populated once at boot by the glob-discovery loop in main.ts (through
@@ -10,12 +10,14 @@ import type { Shard } from './types';
 export declare const registeredShards: Map<string, Shard>;
 export declare const activeShards: Map<string, Shard>;
 /**
- * Register a shard with the framework so it can later be activated. Records
- * the shard in `registeredShards` but does not run `activate` — that happens
- * at app launch (or immediately for self-starting shards).
+ * Register (or re-register) a shard with the framework so it can later be
+ * activated. Records the shard in `registeredShards` but does not run
+ * `activate` — that happens at app launch (or for self-starting shards).
  *
- * @param shard - The shard module to register. `shard.manifest.id` must be unique.
- * @throws If a shard with the same id is already registered.
+ * If a shard with the same id already exists it is silently replaced,
+ * which is the expected path during package updates. If the old shard was
+ * active it is deactivated first so the new version can be cleanly
+ * activated on next launch.
  */
 export declare function registerShard(shard: Shard): void;
 /**
@@ -43,3 +45,8 @@ export declare function deactivateShard(id: string): void;
  * @param id - The `ShardManifest.id` to check.
  */
 export declare function isActive(id: string): boolean;
+/**
+ * Return the ShardContext for an active shard, or undefined if not active.
+ * Used by lifecycle.ts to pass context to `shard.resume()`.
+ */
+export declare function getShardContext(id: string): ShardContext | undefined;

package/dist/shards/activate.svelte.js

@@ -39,17 +39,19 @@ export const registeredShards = $state(new Map());
 const active = new Map();
 export const activeShards = $state(new Map());
 /**
- * Register a shard with the framework so it can later be activated. Records
- * the shard in `registeredShards` but does not run `activate` — that happens
- * at app launch (or immediately for self-starting shards).
+ * Register (or re-register) a shard with the framework so it can later be
+ * activated. Records the shard in `registeredShards` but does not run
+ * `activate` — that happens at app launch (or for self-starting shards).
  *
- * @param shard - The shard module to register. `shard.manifest.id` must be unique.
- * @throws If a shard with the same id is already registered.
+ * If a shard with the same id already exists it is silently replaced,
+ * which is the expected path during package updates. If the old shard was
+ * active it is deactivated first so the new version can be cleanly
+ * activated on next launch.
  */
 export function registerShard(shard) {
     const id = shard.manifest.id;
-    if (registeredShards.has(id)) {
-        throw new Error(`Shard "${id}" is already registered`);
+    if (registeredShards.has(id) && activeShards.has(id)) {
+        deactivateShard(id);
     }
     registeredShards.set(id, shard);
 }
@@ -73,7 +75,7 @@ export async function activateShard(id) {
         // and is now being required by an app). Idempotent — no error.
         return;
     }
-    const entry = { shard, viewIds: new Set(), cleanupFns: [] };
+    const entry = { shard, ctx: undefined, viewIds: new Set(), cleanupFns: [] };
     // envState holds the reactive env data for this shard.
     // Must be declared with $state at variable declaration time (Svelte 5 rule).
     const envState = $state({
@@ -122,6 +124,7 @@ export async function activateShard(id) {
             ? createZoneManager()
             : undefined,
     };
+    entry.ctx = ctx;
     active.set(id, entry);
     activeShards.set(id, shard);
     await shard.activate(ctx);
@@ -173,3 +176,11 @@ export function deactivateShard(id) {
 export function isActive(id) {
     return active.has(id);
 }
+/**
+ * Return the ShardContext for an active shard, or undefined if not active.
+ * Used by lifecycle.ts to pass context to `shard.resume()`.
+ */
+export function getShardContext(id) {
+    var _a;
+    return (_a = active.get(id)) === null || _a === void 0 ? void 0 : _a.ctx;
+}

package/dist/shards/types.d.ts

@@ -193,4 +193,15 @@ export interface Shard {
     autostart?(ctx: ShardContext): void | Promise<void>;
     /** Optional cleanup hook called when the shard is deactivated. Release timers, subscriptions, and external resources here. */
     deactivate?(): void | Promise<void>;
+    /**
+     * Called when the owning app is suspended (Home button). The shard
+     * remains active; its views and state are preserved. Return `false`
+     * (sync or async) to cancel the navigation.
+     */
+    suspend?(): void | false | Promise<void | false>;
+    /**
+     * Called when the owning app resumes from Home. Receives the same
+     * `ShardContext` that `activate` received.
+     */
+    resume?(ctx: ShardContext): void | Promise<void>;
 }

package/dist/shell-shard/ShellHome.svelte

@@ -6,7 +6,7 @@
    *   3. Elevate prompt — shown when not elevated
    */
 
-  import { listRegisteredApps, launchApp, isAdmin } from '../api';
+  import { listRegisteredApps, launchApp, isAdmin, VERSION } from '../api';
   import { elevate, deescalate } from '../auth/index';
 
   const apps = $derived(listRegisteredApps());
@@ -38,6 +38,7 @@
 <div class="shell-home">
   <header class="shell-home-header">
     <h1>SH3</h1>
+    <span class="shell-home-version">v{VERSION}</span>
     <span class="shell-home-alpha">alpha</span>
     {#if elevated}
       <button type="button" class="shell-home-deescalate" onclick={handleDeescalate}>
@@ -153,6 +154,11 @@
     color: var(--shell-accent);
     letter-spacing: 2px;
   }
+  .shell-home-version {
+    font-size: 13px;
+    color: var(--shell-fg-subtle);
+    letter-spacing: 0.04em;
+  }
   .shell-home-alpha {
     font-size: 11px;
     font-weight: 700;
@@ -197,7 +203,7 @@
     padding: 14px 18px;
     background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     border: 1px solid var(--shell-border);
-    border-radius: 6px;
+    border-radius: var(--shell-radius-md);
   }
   .shell-home-entry-label {
     grid-column: 1;
@@ -217,7 +223,7 @@
     background: var(--shell-accent);
     color: var(--shell-bg);
     border: none;
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     font-weight: 600;
     cursor: pointer;
   }
@@ -229,7 +235,7 @@
     background: transparent;
     color: var(--shell-fg-subtle);
     border: 1px solid var(--shell-border);
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     cursor: pointer;
     font-size: 12px;
   }
@@ -252,7 +258,7 @@
     background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-border);
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     font-family: monospace;
     font-size: 13px;
   }
@@ -264,7 +270,7 @@
     background: var(--shell-accent);
     color: var(--shell-bg);
     border: none;
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     font-weight: 600;
     cursor: pointer;
     white-space: nowrap;
@@ -279,6 +285,6 @@
     font-size: 12px;
     color: var(--shell-error, #d32f2f);
     background: color-mix(in srgb, var(--shell-error, #d32f2f) 10%, transparent);
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
   }
 </style>

package/dist/store/InstalledView.svelte

@@ -14,6 +14,8 @@
   const ctx = storeContext;
 
   let uninstallingIds = $state<Set<string>>(new Set());
+  let updatingIds = $state<Set<string>>(new Set());
+  let updateError = $state<string | null>(null);
 
   async function handleUninstall(id: string) {
     if (uninstallingIds.has(id)) return;
@@ -32,6 +34,23 @@
     }
   }
 
+  async function handleUpdate(id: string) {
+    if (updatingIds.has(id)) return;
+
+    updatingIds = new Set([...updatingIds, id]);
+    updateError = null;
+
+    try {
+      await ctx.updatePackage(id);
+    } catch (err) {
+      updateError = err instanceof Error ? err.message : String(err);
+    } finally {
+      const next = new Set(updatingIds);
+      next.delete(id);
+      updatingIds = next;
+    }
+  }
+
   function handleRefresh() {
     ctx.refreshInstalled();
   }
@@ -55,6 +74,10 @@
     <button class="installed-refresh" onclick={handleRefresh}>Refresh</button>
   </header>
 
+  {#if updateError}
+    <div class="installed-error">{updateError}</div>
+  {/if}
+
   {#if ctx.state.ephemeral.installed.length === 0}
     <div class="installed-empty">No packages installed.</div>
   {:else}
@@ -75,6 +98,17 @@
             <span>Installed: {formatDate(pkg.installedAt)}</span>
           </div>
           <div class="installed-item-actions">
+            {#if pkg.id in ctx.state.ephemeral.updatable}
+              {@const target = ctx.state.ephemeral.updatable[pkg.id]}
+              {@const updating = updatingIds.has(pkg.id)}
+              <button
+                class="installed-update-btn"
+                onclick={() => handleUpdate(pkg.id)}
+                disabled={updating || uninstalling}
+              >
+                {updating ? 'Updating...' : `Update -> ${target.latest.version}`}
+              </button>
+            {/if}
             <button
               class="installed-uninstall-btn"
               onclick={() => handleUninstall(pkg.id)}
@@ -91,7 +125,7 @@
 
 <style>
   .installed-view {
-    font-family: var(--shell-font, system-ui, sans-serif);
+    font-family: var(--shell-font-ui);
     color: var(--shell-fg, #e0e0e0);
     background: var(--shell-bg, #1e1e1e);
     padding: 16px;
@@ -115,7 +149,7 @@
     background: var(--shell-accent, #007acc);
     color: #fff;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     cursor: pointer;
     font-family: inherit;
     font-size: 0.875rem;
@@ -137,7 +171,7 @@
   .installed-item {
     background: var(--shell-input-bg, #2a2a2a);
     border: 1px solid var(--shell-border, #444);
-    border-radius: 6px;
+    border-radius: var(--shell-radius-md);
     padding: 12px 14px;
     display: flex;
     flex-direction: column;
@@ -155,7 +189,7 @@
   .installed-item-badge {
     font-size: 0.6875rem;
     padding: 1px 6px;
-    border-radius: 3px;
+    border-radius: var(--shell-radius-sm);
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: 0.04em;
@@ -182,13 +216,14 @@
   .installed-item-actions {
     display: flex;
     justify-content: flex-end;
+    gap: 8px;
   }
   .installed-uninstall-btn {
     padding: 4px 12px;
     background: transparent;
     color: var(--shell-error, #d32f2f);
     border: 1px solid var(--shell-error, #d32f2f);
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     cursor: pointer;
     font-family: inherit;
     font-size: 0.8125rem;
@@ -200,4 +235,30 @@
     opacity: 0.6;
     cursor: not-allowed;
   }
+  .installed-update-btn {
+    padding: 4px 12px;
+    background: var(--shell-warning, #ff9800);
+    color: #fff;
+    border: none;
+    border-radius: var(--shell-radius);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.8125rem;
+  }
+  .installed-update-btn:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+  .installed-update-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .installed-error {
+    padding: 8px 12px;
+    margin-bottom: 12px;
+    background: color-mix(in srgb, var(--shell-error, #d32f2f) 15%, transparent);
+    color: var(--shell-error, #d32f2f);
+    border: 1px solid var(--shell-error, #d32f2f);
+    border-radius: var(--shell-radius);
+    font-size: 0.8125rem;
+  }
 </style>

package/dist/store/StoreView.svelte

@@ -17,6 +17,7 @@
   let search = $state('');
   let typeFilter = $state<'all' | 'shard' | 'app'>('all');
   let installingIds = $state<Set<string>>(new Set());
+  let updatingIds = $state<Set<string>>(new Set());
   let installError = $state<string | null>(null);
   let newRegistryUrl = $state('');
 
@@ -66,6 +67,31 @@
     return String(pkg.latest.contractVersion) !== String(contract.version);
   }
 
+  function hasUpdate(id: string): boolean {
+    return id in ctx.state.ephemeral.updatable;
+  }
+
+  function installedVersion(id: string): string {
+    return ctx.state.ephemeral.installed.find((p: InstalledPackage) => p.id === id)?.version ?? '';
+  }
+
+  async function handleUpdate(id: string) {
+    if (updatingIds.has(id)) return;
+
+    updatingIds = new Set([...updatingIds, id]);
+    installError = null;
+
+    try {
+      await ctx.updatePackage(id);
+    } catch (err) {
+      installError = err instanceof Error ? err.message : String(err);
+    } finally {
+      const next = new Set(updatingIds);
+      next.delete(id);
+      updatingIds = next;
+    }
+  }
+
   async function handleInstall(pkg: ResolvedPackage) {
     const id = pkg.entry.id;
     if (installingIds.has(id)) return;
@@ -181,6 +207,8 @@
       {@const installed = isInstalled(pkg.entry.id)}
       {@const mismatch = hasContractMismatch(pkg)}
       {@const installing = installingIds.has(pkg.entry.id)}
+      {@const updatable = hasUpdate(pkg.entry.id)}
+      {@const updating = updatingIds.has(pkg.entry.id)}
       <div class="store-card">
         <div class="store-card-header">
           <div class="store-card-icon">
@@ -208,7 +236,15 @@
           </div>
         {/if}
         <div class="store-card-actions">
-          {#if installed}
+          {#if installed && updatable}
+            <button
+              class="store-update-btn"
+              onclick={() => handleUpdate(pkg.entry.id)}
+              disabled={updating}
+            >
+              {updating ? 'Updating...' : `Update ${installedVersion(pkg.entry.id)} -> ${pkg.latest.version}`}
+            </button>
+          {:else if installed}
             <span class="store-installed-label">Installed</span>
           {:else}
             <button
@@ -237,7 +273,7 @@
 
 <style>
   .store-view {
-    font-family: var(--shell-font, system-ui, sans-serif);
+    font-family: var(--shell-font-ui);
     color: var(--shell-fg, #e0e0e0);
     background: var(--shell-bg, #1e1e1e);
     padding: 16px;
@@ -265,7 +301,7 @@
     background: var(--shell-input-bg, #2a2a2a);
     color: var(--shell-fg, #e0e0e0);
     border: 1px solid var(--shell-border, #444);
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     font-family: inherit;
     font-size: 0.875rem;
   }
@@ -277,7 +313,7 @@
     background: var(--shell-input-bg, #2a2a2a);
     color: var(--shell-fg, #e0e0e0);
     border: 1px solid var(--shell-border, #444);
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     font-family: inherit;
     font-size: 0.875rem;
   }
@@ -286,7 +322,7 @@
     background: var(--shell-accent, #007acc);
     color: #fff;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     cursor: pointer;
     font-family: inherit;
     font-size: 0.875rem;
@@ -301,7 +337,7 @@
     background: color-mix(in srgb, var(--shell-error, #d32f2f) 15%, transparent);
     color: var(--shell-error, #d32f2f);
     border: 1px solid var(--shell-error, #d32f2f);
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     font-size: 0.8125rem;
   }
   .store-grid {
@@ -312,7 +348,7 @@
   .store-card {
     background: var(--shell-input-bg, #2a2a2a);
     border: 1px solid var(--shell-border, #444);
-    border-radius: 6px;
+    border-radius: var(--shell-radius-md);
     padding: 14px;
     display: flex;
     flex-direction: column;
@@ -337,7 +373,7 @@
   .store-icon-img {
     width: 36px;
     height: 36px;
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     object-fit: cover;
   }
   .store-icon-placeholder {
@@ -348,7 +384,7 @@
     justify-content: center;
     background: var(--shell-accent, #007acc);
     color: #fff;
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     font-weight: 700;
     font-size: 1rem;
   }
@@ -365,7 +401,7 @@
   .store-card-badge {
     font-size: 0.6875rem;
     padding: 1px 6px;
-    border-radius: 3px;
+    border-radius: var(--shell-radius-sm);
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: 0.04em;
@@ -397,7 +433,7 @@
     color: var(--shell-warning, #ff9800);
     padding: 4px 8px;
     background: color-mix(in srgb, var(--shell-warning, #ff9800) 10%, transparent);
-    border-radius: 3px;
+    border-radius: var(--shell-radius-sm);
   }
   .store-card-actions {
     margin-top: auto;
@@ -409,7 +445,7 @@
     background: var(--shell-accent, #007acc);
     color: #fff;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     cursor: pointer;
     font-family: inherit;
     font-size: 0.8125rem;
@@ -423,6 +459,23 @@
     color: var(--shell-success, #4caf50);
     font-weight: 600;
   }
+  .store-update-btn {
+    padding: 5px 14px;
+    background: var(--shell-warning, #ff9800);
+    color: #fff;
+    border: none;
+    border-radius: var(--shell-radius);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.8125rem;
+  }
+  .store-update-btn:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+  .store-update-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
   .store-empty {
     text-align: center;
     padding: 32px 16px;
@@ -442,7 +495,7 @@
     padding: 4px 8px;
     background: var(--shell-input-bg, #2a2a2a);
     border: 1px solid var(--shell-border, #444);
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     font-size: 0.8125rem;
   }
   .store-registry-url {
@@ -456,7 +509,7 @@
     background: transparent;
     color: var(--shell-error, #d32f2f);
     border: 1px solid var(--shell-error, #d32f2f);
-    border-radius: 3px;
+    border-radius: var(--shell-radius-sm);
     cursor: pointer;
     font-size: 0.75rem;
     flex-shrink: 0;
@@ -473,7 +526,7 @@
     background: var(--shell-input-bg, #2a2a2a);
     color: var(--shell-fg, #e0e0e0);
     border: 1px solid var(--shell-border, #444);
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     font-family: inherit;
     font-size: 0.8125rem;
   }
@@ -485,7 +538,7 @@
     background: var(--shell-accent, #007acc);
     color: #fff;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--shell-radius);
     cursor: pointer;
     font-family: inherit;
     font-size: 0.8125rem;

package/dist/store/storeApp.js

@@ -10,7 +10,7 @@ export const storeApp = {
     manifest: {
         id: 'sh3-store-app',
         label: 'Package Store',
-        version: '0.1.0',
+        version: '0.2.1',
         requiredShards: ['sh3-store'],
         layoutVersion: 1,
         admin: true,

package/dist/store/storeShard.svelte.d.ts

@@ -13,6 +13,7 @@ interface StoreZoneSchema {
     ephemeral: {
         catalog: ResolvedPackage[];
         installed: InstalledPackage[];
+        updatable: Record<string, ResolvedPackage>;
         loading: boolean;
         error: string | null;
     };
@@ -24,6 +25,7 @@ export interface StoreContext {
     isAdmin: boolean;
     refreshCatalog(): Promise<void>;
     refreshInstalled(): Promise<void>;
+    updatePackage(id: string): Promise<void>;
     addRegistry(url: string): Promise<void>;
     removeRegistry(url: string): Promise<void>;
 }

package/dist/store/storeShard.svelte.js

@@ -14,9 +14,31 @@
 import { mount, unmount } from 'svelte';
 import StoreView from './StoreView.svelte';
 import InstalledView from './InstalledView.svelte';
-import { fetchRegistries } from '../registry/client';
-import { listInstalledPackages } from '../registry/installer';
-import { fetchServerPackages } from '../env/client';
+import { fetchRegistries, fetchBundle, buildPackageMeta } from '../registry/client';
+import { installPackage, listInstalledPackages } from '../registry/installer';
+import { loadBundle, savePackage } from '../registry/storage';
+import { serverInstallPackage, fetchServerPackages } from '../env/client';
+/**
+ * Compare two semver-like version strings.
+ * Returns true only if `available` is strictly greater than `installed`.
+ * Compares major.minor.patch left-to-right as integers.
+ * Non-numeric segments are treated as 0.
+ */
+function isNewerVersion(available, installed) {
+    var _a, _b;
+    const a = available.split('.').map((s) => parseInt(s, 10) || 0);
+    const b = installed.split('.').map((s) => parseInt(s, 10) || 0);
+    const len = Math.max(a.length, b.length);
+    for (let i = 0; i < len; i++) {
+        const av = (_a = a[i]) !== null && _a !== void 0 ? _a : 0;
+        const bv = (_b = b[i]) !== null && _b !== void 0 ? _b : 0;
+        if (av > bv)
+            return true;
+        if (av < bv)
+            return false;
+    }
+    return false;
+}
 /**
  * Module-level context set during activate(). Imported by the Svelte
  * view components so they can read/write store state and trigger refreshes.
@@ -26,7 +48,7 @@ export const storeShard = {
     manifest: {
         id: 'sh3-store',
         label: 'Package Store',
-        version: '0.1.0',
+        version: '0.2.1',
         views: [
             { id: 'sh3-store:browse', label: 'Store' },
             { id: 'sh3-store:installed', label: 'Installed' },
@@ -38,16 +60,28 @@ export const storeShard = {
             ephemeral: {
                 catalog: [],
                 installed: [],
+                updatable: {},
                 loading: false,
                 error: null,
             },
         });
+        function recomputeUpdatable() {
+            const result = {};
+            for (const pkg of state.ephemeral.installed) {
+                const catalogEntry = state.ephemeral.catalog.find((c) => c.entry.id === pkg.id);
+                if (catalogEntry && isNewerVersion(catalogEntry.latest.version, pkg.version)) {
+                    result[pkg.id] = catalogEntry;
+                }
+            }
+            state.ephemeral.updatable = result;
+        }
         async function refreshCatalog() {
             state.ephemeral.loading = true;
             state.ephemeral.error = null;
             try {
                 const results = await fetchRegistries(env.registries);
                 state.ephemeral.catalog = results;
+                recomputeUpdatable();
             }
             catch (err) {
                 state.ephemeral.error =
@@ -71,6 +105,7 @@ export const storeShard = {
                         installedAt: (_c = p.installedAt) !== null && _c !== void 0 ? _c : '',
                     });
                 });
+                recomputeUpdatable();
             }
             catch (err) {
                 console.warn('[sh3-store] Failed to list installed packages:', err instanceof Error ? err.message : err);
@@ -78,6 +113,7 @@ export const storeShard = {
                 try {
                     const packages = await listInstalledPackages();
                     state.ephemeral.installed = packages;
+                    recomputeUpdatable();
                 }
                 catch (_a) {
                     // Nothing to show.
@@ -95,12 +131,57 @@ export const storeShard = {
             const registries = env.registries.filter((r) => r !== url);
             await ctx.envUpdate({ registries });
         }
+        async function updatePackage(id) {
+            var _a, _b;
+            const catalogEntry = state.ephemeral.updatable[id];
+            if (!catalogEntry)
+                return;
+            const installedRecord = state.ephemeral.installed.find((p) => p.id === id);
+            if (!installedRecord)
+                return;
+            // 1. Fetch new bundle.
+            const bundle = await fetchBundle(catalogEntry.latest, catalogEntry.sourceRegistry);
+            const meta = buildPackageMeta(catalogEntry, catalogEntry.latest);
+            // 2. Snapshot current state for rollback.
+            const oldBundle = await loadBundle(id);
+            const oldRecord = Object.assign({}, installedRecord);
+            // 3. Push to server.
+            const manifest = {
+                id: meta.id,
+                type: meta.type,
+                label: catalogEntry.entry.label,
+                version: meta.version,
+                contractVersion: meta.contractVersion,
+                sourceRegistry: meta.sourceRegistry,
+                installedAt: new Date().toISOString(),
+            };
+            const serverResult = await serverInstallPackage(manifest, bundle);
+            if (!serverResult.ok) {
+                throw new Error((_a = serverResult.error) !== null && _a !== void 0 ? _a : 'Server update failed');
+            }
+            // 4. Install locally (overwrites IndexedDB + re-registers).
+            const result = await installPackage(bundle, meta);
+            if (!result.success) {
+                // Rollback: restore old bundle and metadata.
+                if (oldBundle) {
+                    try {
+                        await savePackage(id, oldBundle, oldRecord);
+                    }
+                    catch (rollbackErr) {
+                        console.warn(`[sh3-store] Rollback failed for "${id}":`, rollbackErr instanceof Error ? rollbackErr.message : rollbackErr);
+                    }
+                }
+                throw new Error((_b = result.error) !== null && _b !== void 0 ? _b : 'Local install failed during update');
+            }
+            await refreshInstalled();
+        }
         storeContext = {
             env,
             state,
             get isAdmin() { return ctx.isAdmin; },
             refreshCatalog,
             refreshInstalled,
+            updatePackage,
             addRegistry,
             removeRegistry,
         };
@@ -127,10 +208,11 @@ export const storeShard = {
         };
         ctx.registerView('sh3-store:browse', browseFactory);
         ctx.registerView('sh3-store:installed', installedFactory);
+        // refreshInstalled can run immediately (hits server, no env needed).
+        refreshInstalled();
     },
     autostart() {
-        // Intentionally empty. Defining autostart puts the store shard on
-        // the self-starting path at boot so its views are available from
-        // the launcher without requiring an app to declare it.
+        // Runs after env hydration, so registries are populated.
+        storeContext.refreshCatalog();
     },
 };

package/dist/tokens.css

@@ -32,12 +32,26 @@
   --shell-accent:       #6ea8fe;
   --shell-accent-muted: #3a5580;
 
+  /* Inputs */
+  --shell-input-bg:  #2a2a2a;
+
+  /* Semantic */
+  --shell-error:   #f87171;
+  --shell-warning: #fbbf24;
+  --shell-success: #34d399;
+
   /* Typography */
   --shell-font-ui:   system-ui, -apple-system, "Segoe UI", sans-serif;
   --shell-font-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;
   --shell-font-size: 13px;
   --shell-line:      1.45;
 
+  /* Radius */
+  --shell-radius-sm: 3px;
+  --shell-radius:    4px;
+  --shell-radius-md: 6px;
+  --shell-radius-lg: 8px;
+
   /* Spacing */
   --shell-pad-xs: 2px;
   --shell-pad-sm: 4px;

package/dist/version.d.ts

@@ -0,0 +1,2 @@
+/** sh3-core package version. Keep in sync with package.json. */
+export declare const VERSION = "0.5.4";

package/dist/version.js

@@ -0,0 +1,2 @@
+/** sh3-core package version. Keep in sync with package.json. */
+export const VERSION = '0.5.4';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh3-core",
-  "version": "0.5.0",
+  "version": "0.5.4",
   "type": "module",
   "files": [
     "dist"