sh3-core 0.6.0

package/dist/app/store/StoreView.svelte

@@ -0,0 +1,522 @@
+<script lang="ts">
+  /*
+   * StoreView — browse catalog view for the store shard.
+   *
+   * Displays a searchable, filterable grid of packages from configured
+   * registries. Each card shows package metadata and an install button.
+   */
+
+  import { storeContext } from './storeShard.svelte';
+  import { fetchBundle, buildPackageMeta } from '../../registry/client';
+  import { installPackage } from '../../registry/installer';
+  import { serverInstallPackage } from '../../env/client';
+  import { contract } from '../../contract';
+  import type { ResolvedPackage } from '../../registry/client';
+  import type { InstalledPackage } from '../../registry/types';
+
+  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('');
+
+  const ctx = storeContext;
+
+  async function handleAddRegistry() {
+    const url = newRegistryUrl.trim();
+    if (!url) return;
+    if (ctx.env.registries.includes(url)) return;
+    try {
+      await ctx.addRegistry(url);
+      newRegistryUrl = '';
+      ctx.refreshCatalog();
+      ctx.refreshInstalled();
+    } catch (err) {
+      installError = err instanceof Error ? err.message : String(err);
+    }
+  }
+
+  async function handleRemoveRegistry(url: string) {
+    try {
+      await ctx.removeRegistry(url);
+      ctx.refreshCatalog();
+    } catch (err) {
+      installError = err instanceof Error ? err.message : String(err);
+    }
+  }
+
+  const filtered = $derived.by(() => {
+    const q = search.toLowerCase().trim();
+    return ctx.state.ephemeral.catalog.filter((pkg: ResolvedPackage) => {
+      if (typeFilter !== 'all' && pkg.entry.type !== typeFilter) return false;
+      if (!q) return true;
+      return (
+        pkg.entry.id.toLowerCase().includes(q) ||
+        pkg.entry.label.toLowerCase().includes(q) ||
+        pkg.entry.description.toLowerCase().includes(q)
+      );
+    });
+  });
+
+  function isInstalled(id: string): boolean {
+    return ctx.state.ephemeral.installed.some((p: InstalledPackage) => p.id === id);
+  }
+
+  function hasContractMismatch(pkg: ResolvedPackage): boolean {
+    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;
+
+    installingIds = new Set([...installingIds, id]);
+    installError = null;
+
+    try {
+      // 1. Fetch and integrity-verify the bundle from the registry.
+      const bundle = await fetchBundle(pkg.latest, pkg.sourceRegistry);
+      const meta = buildPackageMeta(pkg, pkg.latest);
+
+      // 2. Upload to server for persistent storage.
+      const manifest = {
+        id: meta.id,
+        type: meta.type,
+        label: pkg.entry.label,
+        version: meta.version,
+        contractVersion: meta.contractVersion,
+        sourceRegistry: meta.sourceRegistry,
+        installedAt: new Date().toISOString(),
+      };
+      const serverResult = await serverInstallPackage(manifest, bundle);
+      if (!serverResult.ok) {
+        installError = serverResult.error ?? 'Server install failed';
+        return;
+      }
+
+      // 3. Also install locally for immediate hot-load.
+      const result = await installPackage(bundle, meta);
+      if (!result.success) {
+        console.warn(`[sh3-store] Server install ok but local hot-load failed: ${result.error}`);
+      }
+
+      await ctx.refreshInstalled();
+    } catch (err) {
+      installError = err instanceof Error ? err.message : String(err);
+    } finally {
+      const next = new Set(installingIds);
+      next.delete(id);
+      installingIds = next;
+    }
+  }
+
+  function handleRefresh() {
+    ctx.refreshCatalog();
+    ctx.refreshInstalled();
+  }
+</script>
+
+<div class="store-view">
+  <header class="store-header">
+    <h2>Package Store</h2>
+    <div class="store-controls">
+      <input
+        class="store-search"
+        type="text"
+        placeholder="Search packages..."
+        bind:value={search}
+      />
+      <select class="store-filter" bind:value={typeFilter}>
+        <option value="all">All</option>
+        <option value="shard">Shards</option>
+        <option value="app">Apps</option>
+      </select>
+      <button
+        class="store-refresh"
+        onclick={handleRefresh}
+        disabled={ctx.state.ephemeral.loading}
+      >
+        {ctx.state.ephemeral.loading ? 'Loading...' : 'Refresh'}
+      </button>
+    </div>
+  </header>
+
+  {#if ctx.isAdmin && ctx.env.registries.length > 0}
+    <div class="store-registries">
+      {#each ctx.env.registries as url}
+        <div class="store-registry-entry">
+          <span class="store-registry-url">{url}</span>
+          <button class="store-registry-remove" onclick={() => handleRemoveRegistry(url)}>
+            Remove
+          </button>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  {#if ctx.isAdmin}
+    <form class="store-add-registry" onsubmit={(e) => { e.preventDefault(); handleAddRegistry(); }}>
+      <input
+        class="store-registry-input"
+        type="url"
+        placeholder="Registry URL (e.g. https://sh3.example.com/registry.json)"
+        bind:value={newRegistryUrl}
+      />
+      <button type="submit" class="store-add-btn" disabled={!newRegistryUrl.trim()}>
+        Add
+      </button>
+    </form>
+  {/if}
+
+  {#if ctx.state.ephemeral.error}
+    <div class="store-error">{ctx.state.ephemeral.error}</div>
+  {/if}
+
+  {#if installError}
+    <div class="store-error">{installError}</div>
+  {/if}
+
+  <div class="store-grid">
+    {#each filtered as pkg (pkg.entry.id)}
+      {@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">
+            {#if pkg.entry.icon}
+              <img src={pkg.entry.icon} alt="" class="store-icon-img" />
+            {:else}
+              <span class="store-icon-placeholder">
+                {pkg.entry.type === 'shard' ? 'S' : 'A'}
+              </span>
+            {/if}
+          </div>
+          <div class="store-card-title">
+            <span class="store-card-label">{pkg.entry.label}</span>
+            <span class="store-card-badge" class:badge-shard={pkg.entry.type === 'shard'} class:badge-app={pkg.entry.type === 'app'}>
+              {pkg.entry.type}
+            </span>
+            <span class="store-card-version">{pkg.latest.version}</span>
+          </div>
+        </div>
+        <p class="store-card-desc">{pkg.entry.description}</p>
+        <div class="store-card-author">{pkg.entry.author.name}</div>
+        {#if mismatch}
+          <div class="store-card-warning">
+            Contract mismatch: package targets v{pkg.latest.contractVersion}, running v{contract.version}
+          </div>
+        {/if}
+        <div class="store-card-actions">
+          {#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
+              class="store-install-btn"
+              onclick={() => handleInstall(pkg)}
+              disabled={installing}
+            >
+              {installing ? 'Installing...' : 'Install'}
+            </button>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+
+  {#if !ctx.state.ephemeral.loading && filtered.length === 0}
+    <div class="store-empty">
+      {#if ctx.env.registries.length === 0}
+        No packages found. {#if ctx.isAdmin}Add a registry URL above to get started.{:else}No registries configured.{/if}
+      {:else}
+        No packages match the current filter.
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .store-view {
+    font-family: var(--shell-font-ui);
+    color: var(--shell-fg, #e0e0e0);
+    background: var(--shell-bg, #1e1e1e);
+    padding: 16px;
+    height: 100%;
+    overflow-y: auto;
+    box-sizing: border-box;
+  }
+  .store-header {
+    margin-bottom: 16px;
+  }
+  .store-header h2 {
+    margin: 0 0 8px 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+  .store-controls {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+  .store-search {
+    flex: 1;
+    min-width: 160px;
+    padding: 6px 10px;
+    background: var(--shell-input-bg, #2a2a2a);
+    color: var(--shell-fg, #e0e0e0);
+    border: 1px solid var(--shell-border, #444);
+    border-radius: var(--shell-radius);
+    font-family: inherit;
+    font-size: 0.875rem;
+  }
+  .store-search::placeholder {
+    color: var(--shell-fg-muted, #888);
+  }
+  .store-filter {
+    padding: 6px 10px;
+    background: var(--shell-input-bg, #2a2a2a);
+    color: var(--shell-fg, #e0e0e0);
+    border: 1px solid var(--shell-border, #444);
+    border-radius: var(--shell-radius);
+    font-family: inherit;
+    font-size: 0.875rem;
+  }
+  .store-refresh:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .store-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;
+  }
+  .store-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 12px;
+  }
+  .store-card {
+    background: var(--shell-input-bg, #2a2a2a);
+    border: 1px solid var(--shell-border, #444);
+    border-radius: var(--shell-radius-md);
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .store-card:hover {
+    border-color: var(--shell-accent, #007acc);
+  }
+  .store-card-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .store-card-icon {
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .store-icon-img {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--shell-radius);
+    object-fit: cover;
+  }
+  .store-icon-placeholder {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--shell-accent, #007acc);
+    color: #fff;
+    border-radius: var(--shell-radius);
+    font-weight: 700;
+    font-size: 1rem;
+  }
+  .store-card-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+  .store-card-label {
+    font-weight: 600;
+    font-size: 0.9375rem;
+  }
+  .store-card-badge {
+    font-size: 0.6875rem;
+    padding: 1px 6px;
+    border-radius: var(--shell-radius-sm);
+    text-transform: uppercase;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+  }
+  .badge-shard {
+    background: color-mix(in srgb, var(--shell-accent, #007acc) 25%, transparent);
+    color: var(--shell-accent, #007acc);
+  }
+  .badge-app {
+    background: color-mix(in srgb, var(--shell-success, #4caf50) 25%, transparent);
+    color: var(--shell-success, #4caf50);
+  }
+  .store-card-version {
+    font-size: 0.75rem;
+    color: var(--shell-fg-muted, #888);
+  }
+  .store-card-desc {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--shell-fg-muted, #888);
+    line-height: 1.4;
+  }
+  .store-card-author {
+    font-size: 0.75rem;
+    color: var(--shell-fg-muted, #888);
+  }
+  .store-card-warning {
+    font-size: 0.75rem;
+    color: var(--shell-warning, #ff9800);
+    padding: 4px 8px;
+    background: color-mix(in srgb, var(--shell-warning, #ff9800) 10%, transparent);
+    border-radius: var(--shell-radius-sm);
+  }
+  .store-card-actions {
+    margin-top: auto;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .store-install-btn {
+    padding: 5px 14px;
+    font-size: 0.8125rem;
+  }
+  .store-install-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .store-installed-label {
+    font-size: 0.8125rem;
+    color: var(--shell-success, #4caf50);
+    font-weight: 600;
+  }
+  .store-update-btn {
+    padding: 5px 14px;
+    background: var(--shell-warning, #ff9800);
+    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;
+    color: var(--shell-fg-muted, #888);
+    font-size: 0.875rem;
+  }
+  .store-registries {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 8px;
+  }
+  .store-registry-entry {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 8px;
+    background: var(--shell-input-bg, #2a2a2a);
+    border: 1px solid var(--shell-border, #444);
+    border-radius: var(--shell-radius);
+    font-size: 0.8125rem;
+  }
+  .store-registry-url {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--shell-fg-muted, #888);
+  }
+  .store-registry-remove {
+    padding: 2px 8px;
+    background: transparent;
+    color: var(--shell-error, #d32f2f);
+    border: 1px solid var(--shell-error, #d32f2f);
+    border-radius: var(--shell-radius-sm);
+    font-size: 0.75rem;
+    flex-shrink: 0;
+    margin-left: 8px;
+  }
+  .store-add-registry {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+  .store-registry-input {
+    flex: 1;
+    padding: 6px 10px;
+    background: var(--shell-input-bg, #2a2a2a);
+    color: var(--shell-fg, #e0e0e0);
+    border: 1px solid var(--shell-border, #444);
+    border-radius: var(--shell-radius);
+    font-family: inherit;
+    font-size: 0.8125rem;
+  }
+  .store-registry-input::placeholder {
+    color: var(--shell-fg-muted, #888);
+  }
+  .store-add-btn {
+    font-size: 0.8125rem;
+    white-space: nowrap;
+  }
+  .store-add-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+</style>

package/dist/app/store/StoreView.svelte.d.ts

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

package/dist/app/store/storeApp.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Built-in Store app — composes the sh3-store shard views into a
+ * management interface for browsing, installing, and uninstalling
+ * packages.
+ *
+ * Framework-shipped: registered in host.ts during bootstrap.
+ * Admin-gated via manifest flag (ADR-011).
+ */
+import type { App } from '../../apps/types';
+export declare const storeApp: App;

package/dist/app/store/storeApp.js

@@ -0,0 +1,26 @@
+/**
+ * Built-in Store app — composes the sh3-store shard views into a
+ * management interface for browsing, installing, and uninstalling
+ * packages.
+ *
+ * Framework-shipped: registered in host.ts during bootstrap.
+ * Admin-gated via manifest flag (ADR-011).
+ */
+export const storeApp = {
+    manifest: {
+        id: 'sh3-store-app',
+        label: 'Package Store',
+        version: '0.2.1',
+        requiredShards: ['sh3-store'],
+        layoutVersion: 1,
+        admin: true,
+    },
+    initialLayout: {
+        type: 'tabs',
+        activeTab: 0,
+        tabs: [
+            { slotId: 'store.browse', viewId: 'sh3-store:browse', label: 'Browse' },
+            { slotId: 'store.installed', viewId: 'sh3-store:installed', label: 'Installed' },
+        ],
+    },
+};

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

@@ -0,0 +1,38 @@
+import type { Shard } from '../../shards/types';
+import type { StateZones } from '../../state/zones.svelte';
+import type { ResolvedPackage } from '../../registry/client';
+import type { InstalledPackage } from '../../registry/types';
+import type { EnvState } from '../../env/types';
+/** Env state shape — server-authoritative config. */
+interface StoreEnvSchema {
+    [key: string]: unknown;
+    registries: string[];
+}
+/** Schema shape for state zone typing. */
+interface StoreZoneSchema {
+    ephemeral: {
+        catalog: ResolvedPackage[];
+        installed: InstalledPackage[];
+        updatable: Record<string, ResolvedPackage>;
+        loading: boolean;
+        error: string | null;
+    };
+}
+/** Reactive context exposed to the view components. */
+export interface StoreContext {
+    env: EnvState<StoreEnvSchema>;
+    state: StateZones<StoreZoneSchema>;
+    isAdmin: boolean;
+    refreshCatalog(): Promise<void>;
+    refreshInstalled(): Promise<void>;
+    updatePackage(id: string): Promise<void>;
+    addRegistry(url: string): Promise<void>;
+    removeRegistry(url: string): Promise<void>;
+}
+/**
+ * Module-level context set during activate(). Imported by the Svelte
+ * view components so they can read/write store state and trigger refreshes.
+ */
+export declare let storeContext: StoreContext;
+export declare const storeShard: Shard;
+export {};