sh3-core 0.1.0

package/dist/store/StoreView.svelte

@@ -0,0 +1,470 @@
+<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 { 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 installError = $state<string | null>(null);
+  let newRegistryUrl = $state('');
+
+  const ctx = storeContext;
+
+  function handleAddRegistry() {
+    const url = newRegistryUrl.trim();
+    if (!url) return;
+    const registries = ctx.state.user.registries;
+    if (registries.includes(url)) return;
+    ctx.state.user.registries = [...registries, url];
+    newRegistryUrl = '';
+    ctx.refreshCatalog();
+    ctx.refreshInstalled();
+  }
+
+  function handleRemoveRegistry(url: string) {
+    ctx.state.user.registries = ctx.state.user.registries.filter((r: string) => r !== url);
+    ctx.refreshCatalog();
+  }
+
+  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);
+  }
+
+  async function handleInstall(pkg: ResolvedPackage) {
+    const id = pkg.entry.id;
+    if (installingIds.has(id)) return;
+
+    installingIds = new Set([...installingIds, id]);
+    installError = null;
+
+    try {
+      const bundle = await fetchBundle(pkg.latest, pkg.sourceRegistry);
+      const meta = buildPackageMeta(pkg, pkg.latest);
+      const result = await installPackage(bundle, meta);
+      if (!result.success) {
+        installError = result.error ?? 'Install failed';
+        return;
+      }
+      // Refresh installed list to reflect the new package.
+      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.state.user.registries.length > 0}
+    <div class="store-registries">
+      {#each ctx.state.user.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}
+
+  <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 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)}
+      <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}
+            <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.state.ephemeral.catalog.length === 0}
+        No packages found. Add a registry URL above to get started.
+      {:else}
+        No packages match the current filter.
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .store-view {
+    font-family: var(--shell-font, system-ui, sans-serif);
+    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: 4px;
+    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: 4px;
+    font-family: inherit;
+    font-size: 0.875rem;
+  }
+  .store-refresh {
+    padding: 6px 14px;
+    background: var(--shell-accent, #007acc);
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    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: 4px;
+    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: 6px;
+    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: 4px;
+    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: 4px;
+    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: 3px;
+    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: 3px;
+  }
+  .store-card-actions {
+    margin-top: auto;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .store-install-btn {
+    padding: 5px 14px;
+    background: var(--shell-accent, #007acc);
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: inherit;
+    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-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: 4px;
+    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: 3px;
+    cursor: pointer;
+    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: 4px;
+    font-family: inherit;
+    font-size: 0.8125rem;
+  }
+  .store-registry-input::placeholder {
+    color: var(--shell-fg-muted, #888);
+  }
+  .store-add-btn {
+    padding: 6px 14px;
+    background: var(--shell-accent, #007acc);
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    white-space: nowrap;
+  }
+  .store-add-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+</style>

package/dist/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/store/storeApp.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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: the shell home checks adminAppIds to gate visibility;
+ * the AppManifest itself carries no admin flag (ADR-011).
+ */
+import type { App } from '../apps/types';
+export declare const storeApp: App;

package/dist/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: the shell home checks adminAppIds to gate visibility;
+ * the AppManifest itself carries no admin flag (ADR-011).
+ */
+export const storeApp = {
+    manifest: {
+        id: 'sh3-store-app',
+        label: 'Package Store',
+        version: '0.1.0',
+        requiredShards: ['sh3-store'],
+        layoutVersion: 1,
+    },
+    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/store/storeShard.svelte.d.ts

@@ -0,0 +1,29 @@
+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';
+/** Schema shape for state zone typing. */
+interface StoreZoneSchema {
+    user: {
+        registries: string[];
+    };
+    ephemeral: {
+        catalog: ResolvedPackage[];
+        installed: InstalledPackage[];
+        loading: boolean;
+        error: string | null;
+    };
+}
+/** Reactive context exposed to the view components. */
+export interface StoreContext {
+    state: StateZones<StoreZoneSchema>;
+    refreshCatalog(): Promise<void>;
+    refreshInstalled(): 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 {};

package/dist/store/storeShard.svelte.js

@@ -0,0 +1,99 @@
+/*
+ * Store shard — framework-shipped shard for browsing and managing
+ * installed packages.
+ *
+ * Contributes two views:
+ *   - `sh3-store:browse`    — searchable/filterable catalog of available packages
+ *   - `sh3-store:installed` — list of installed packages with uninstall
+ *
+ * Uses a user-zone for registry URLs (persisted) and an ephemeral-zone
+ * for the live catalog / installed list / loading / error state.
+ *
+ * `.svelte.ts` because mounting Svelte components requires rune access.
+ */
+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';
+/**
+ * Module-level context set during activate(). Imported by the Svelte
+ * view components so they can read/write store state and trigger refreshes.
+ */
+export let storeContext = undefined;
+export const storeShard = {
+    manifest: {
+        id: 'sh3-store',
+        label: 'Package Store',
+        version: '0.1.0',
+        views: [
+            { id: 'sh3-store:browse', label: 'Store' },
+            { id: 'sh3-store:installed', label: 'Installed' },
+        ],
+    },
+    activate(ctx) {
+        const state = ctx.state({
+            user: { registries: [] },
+            ephemeral: {
+                catalog: [],
+                installed: [],
+                loading: false,
+                error: null,
+            },
+        });
+        async function refreshCatalog() {
+            state.ephemeral.loading = true;
+            state.ephemeral.error = null;
+            try {
+                const results = await fetchRegistries(state.user.registries);
+                state.ephemeral.catalog = results;
+            }
+            catch (err) {
+                state.ephemeral.error =
+                    err instanceof Error ? err.message : String(err);
+            }
+            finally {
+                state.ephemeral.loading = false;
+            }
+        }
+        async function refreshInstalled() {
+            try {
+                const packages = await listInstalledPackages();
+                state.ephemeral.installed = packages;
+            }
+            catch (err) {
+                console.warn('[sh3-store] Failed to list installed packages:', err instanceof Error ? err.message : err);
+            }
+        }
+        // Set the module-level context so view components can import it.
+        storeContext = { state, refreshCatalog, refreshInstalled };
+        // --- View factories ---
+        const browseFactory = {
+            mount(container, _context) {
+                const instance = mount(StoreView, { target: container });
+                return {
+                    unmount() {
+                        unmount(instance);
+                    },
+                };
+            },
+        };
+        const installedFactory = {
+            mount(container, _context) {
+                const instance = mount(InstalledView, { target: container });
+                return {
+                    unmount() {
+                        unmount(instance);
+                    },
+                };
+            },
+        };
+        ctx.registerView('sh3-store:browse', browseFactory);
+        ctx.registerView('sh3-store:installed', installedFactory);
+    },
+    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.
+    },
+};