sh3-core 0.1.0

package/dist/registry-shard/RegistryView.svelte

@@ -0,0 +1,561 @@
+<script lang="ts">
+  /*
+   * RegistryView — single view for the registry manager shard.
+   *
+   * Sections: header, collapsible publish form, package card list with
+   * inline edit/update/delete actions, empty state, error banner.
+   */
+
+  import { registryContext, type RegistryPackage } from './registryShard.svelte';
+
+  const ctx = registryContext;
+
+  // ---- Publish form state ----
+  let publishId = $state('');
+  let publishType = $state<'shard' | 'app'>('shard');
+  let publishLabel = $state('');
+  let publishVersion = $state('1.0.0');
+  let publishDesc = $state('');
+  let publishAuthor = $state('');
+  let publishFile = $state<File | null>(null);
+  let publishing = $state(false);
+  let publishError = $state<string | null>(null);
+  let publishSuccess = $state(false);
+  let publishDetailsOpen = $state(false);
+
+  // ---- Card action state ----
+  // Only one expanded action at a time. Format: "edit:pkgId" | "update:pkgId" | "delete:pkgId" | null
+  let expandedAction = $state<string | null>(null);
+
+  // ---- Edit form state ----
+  let editLabel = $state('');
+  let editDesc = $state('');
+  let editAuthor = $state('');
+  let editSaving = $state(false);
+  let editError = $state<string | null>(null);
+
+  // ---- Update form state ----
+  let updateVersion = $state('');
+  let updateLabel = $state('');
+  let updateDesc = $state('');
+  let updateAuthor = $state('');
+  let updateFile = $state<File | null>(null);
+  let updatePublishing = $state(false);
+  let updateError = $state<string | null>(null);
+
+  // ---- Delete state ----
+  let deleteInProgress = $state(false);
+  let deleteError = $state<string | null>(null);
+
+  // ---- Publish handlers ----
+  function onPublishFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement;
+    publishFile = input.files?.[0] ?? null;
+  }
+
+  async function handlePublish() {
+    if (!publishFile) return;
+    publishing = true;
+    publishError = null;
+    publishSuccess = false;
+
+    try {
+      const form = new FormData();
+      form.append('bundle', publishFile);
+      form.append('id', publishId);
+      form.append('type', publishType);
+      form.append('label', publishLabel);
+      form.append('description', publishDesc);
+      form.append('version', publishVersion);
+      form.append('author', publishAuthor);
+
+      await ctx.publishPackage(form);
+
+      // Reset form
+      publishId = '';
+      publishLabel = '';
+      publishDesc = '';
+      publishVersion = '1.0.0';
+      publishAuthor = '';
+      publishFile = null;
+      publishSuccess = true;
+      publishDetailsOpen = false;
+    } catch (err) {
+      publishError = err instanceof Error ? err.message : String(err);
+    } finally {
+      publishing = false;
+    }
+  }
+
+  // ---- Edit handlers ----
+  function startEdit(pkg: RegistryPackage) {
+    expandedAction = `edit:${pkg.id}`;
+    editLabel = pkg.label;
+    editDesc = pkg.description;
+    editAuthor = pkg.author.name;
+    editError = null;
+  }
+
+  async function handleEditSave(pkgId: string) {
+    editSaving = true;
+    editError = null;
+    try {
+      await ctx.patchPackage(pkgId, {
+        label: editLabel,
+        description: editDesc,
+        author: editAuthor,
+      });
+      expandedAction = null;
+    } catch (err) {
+      editError = err instanceof Error ? err.message : String(err);
+    } finally {
+      editSaving = false;
+    }
+  }
+
+  // ---- Update handlers ----
+  function startUpdate(pkg: RegistryPackage) {
+    expandedAction = `update:${pkg.id}`;
+    updateVersion = pkg.versions[0]?.version ?? '1.0.0';
+    updateLabel = pkg.label;
+    updateDesc = pkg.description;
+    updateAuthor = pkg.author.name;
+    updateFile = null;
+    updateError = null;
+  }
+
+  function onUpdateFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement;
+    updateFile = input.files?.[0] ?? null;
+  }
+
+  async function handleUpdatePublish(pkg: RegistryPackage) {
+    if (!updateFile) return;
+    updatePublishing = true;
+    updateError = null;
+    try {
+      const form = new FormData();
+      form.append('bundle', updateFile);
+      form.append('id', pkg.id);
+      form.append('type', pkg.type);
+      form.append('label', updateLabel);
+      form.append('description', updateDesc);
+      form.append('version', updateVersion);
+      form.append('author', updateAuthor);
+
+      await ctx.publishPackage(form);
+      expandedAction = null;
+    } catch (err) {
+      updateError = err instanceof Error ? err.message : String(err);
+    } finally {
+      updatePublishing = false;
+    }
+  }
+
+  // ---- Delete handlers ----
+  function startDelete(pkgId: string) {
+    expandedAction = `delete:${pkgId}`;
+    deleteError = null;
+  }
+
+  async function handleDeleteConfirm(pkgId: string) {
+    deleteInProgress = true;
+    deleteError = null;
+    try {
+      await ctx.deletePackage(pkgId);
+      expandedAction = null;
+    } catch (err) {
+      deleteError = err instanceof Error ? err.message : String(err);
+    } finally {
+      deleteInProgress = false;
+    }
+  }
+
+  function cancelAction() {
+    expandedAction = null;
+  }
+</script>
+
+<div class="reg-view">
+  <!-- Header -->
+  <header class="reg-header">
+    <h2>Registry Manager</h2>
+    <button
+      class="reg-refresh-btn"
+      onclick={() => ctx.refreshPackages()}
+      disabled={ctx.state.ephemeral.loading}
+    >
+      {ctx.state.ephemeral.loading ? 'Loading...' : 'Refresh'}
+    </button>
+  </header>
+
+  <!-- Global error -->
+  {#if ctx.state.ephemeral.error}
+    <div class="reg-error">{ctx.state.ephemeral.error}</div>
+  {/if}
+
+  <!-- Publish success -->
+  {#if publishSuccess}
+    <div class="reg-success">Package published successfully.</div>
+  {/if}
+
+  <!-- Publish New (collapsible) -->
+  <details class="reg-publish-section" bind:open={publishDetailsOpen}>
+    <summary>Publish New Package</summary>
+    <div class="reg-publish-form">
+      <div class="reg-form-row">
+        <input bind:value={publishId} placeholder="Package ID (e.g. my-shard)" class="reg-input" />
+        <select bind:value={publishType} class="reg-select">
+          <option value="shard">Shard</option>
+          <option value="app">App</option>
+        </select>
+      </div>
+      <div class="reg-form-row">
+        <input bind:value={publishLabel} placeholder="Label" class="reg-input" />
+        <input bind:value={publishVersion} placeholder="Version" class="reg-input" />
+      </div>
+      <input bind:value={publishDesc} placeholder="Description" class="reg-input" />
+      <input bind:value={publishAuthor} placeholder="Author name" class="reg-input" />
+      <div class="reg-form-row">
+        <input type="file" accept=".js" onchange={onPublishFileSelect} class="reg-input" />
+        <button
+          class="reg-btn reg-btn-primary"
+          onclick={handlePublish}
+          disabled={publishing || !publishFile}
+        >
+          {publishing ? 'Publishing...' : 'Publish'}
+        </button>
+      </div>
+      {#if publishError}
+        <div class="reg-error">{publishError}</div>
+      {/if}
+    </div>
+  </details>
+
+  <!-- Package list -->
+  {#if !ctx.state.ephemeral.loading && ctx.state.ephemeral.packages.length === 0}
+    <div class="reg-empty">No packages published.</div>
+  {:else}
+    <div class="reg-list">
+      {#each ctx.state.ephemeral.packages as pkg (pkg.id)}
+        <div class="reg-card">
+          <div class="reg-card-body">
+            <div class="reg-card-title">
+              <span class="reg-card-label">{pkg.label}</span>
+              <span class="reg-badge" class:badge-shard={pkg.type === 'shard'} class:badge-app={pkg.type === 'app'}>
+                {pkg.type}
+              </span>
+              <span class="reg-card-meta">
+                v{pkg.versions[0]?.version} &middot; {pkg.versions.length} version{pkg.versions.length !== 1 ? 's' : ''}
+              </span>
+            </div>
+            <div class="reg-card-desc">{pkg.description}</div>
+            <div class="reg-card-author">by {pkg.author.name} &middot; id: {pkg.id}</div>
+          </div>
+
+          <!-- Action buttons (hidden when this card has an expanded action) -->
+          {#if !expandedAction?.endsWith(`:${pkg.id}`)}
+            <div class="reg-card-actions">
+              <button class="reg-btn reg-btn-secondary" onclick={() => startEdit(pkg)}>Edit</button>
+              <button class="reg-btn reg-btn-secondary" onclick={() => startUpdate(pkg)}>Update</button>
+              <button class="reg-btn reg-btn-danger" onclick={() => startDelete(pkg.id)}>Delete</button>
+            </div>
+          {/if}
+
+          <!-- Edit form (inline) -->
+          {#if expandedAction === `edit:${pkg.id}`}
+            <div class="reg-inline-form">
+              <input bind:value={editLabel} placeholder="Label" class="reg-input" />
+              <input bind:value={editDesc} placeholder="Description" class="reg-input" />
+              <input bind:value={editAuthor} placeholder="Author" class="reg-input" />
+              {#if editError}
+                <div class="reg-error">{editError}</div>
+              {/if}
+              <div class="reg-form-row">
+                <button class="reg-btn reg-btn-primary" onclick={() => handleEditSave(pkg.id)} disabled={editSaving}>
+                  {editSaving ? 'Saving...' : 'Save'}
+                </button>
+                <button class="reg-btn reg-btn-secondary" onclick={cancelAction}>Cancel</button>
+              </div>
+            </div>
+          {/if}
+
+          <!-- Update form (inline, pre-filled) -->
+          {#if expandedAction === `update:${pkg.id}`}
+            <div class="reg-inline-form">
+              <div class="reg-form-row">
+                <input value={pkg.id} disabled class="reg-input" />
+                <input value={pkg.type} disabled class="reg-input" />
+              </div>
+              <div class="reg-form-row">
+                <input bind:value={updateLabel} placeholder="Label" class="reg-input" />
+                <input bind:value={updateVersion} placeholder="Version" class="reg-input" />
+              </div>
+              <input bind:value={updateDesc} placeholder="Description" class="reg-input" />
+              <input bind:value={updateAuthor} placeholder="Author" class="reg-input" />
+              <div class="reg-form-row">
+                <input type="file" accept=".js" onchange={onUpdateFileSelect} class="reg-input" />
+                <button
+                  class="reg-btn reg-btn-primary"
+                  onclick={() => handleUpdatePublish(pkg)}
+                  disabled={updatePublishing || !updateFile}
+                >
+                  {updatePublishing ? 'Publishing...' : 'Publish Update'}
+                </button>
+                <button class="reg-btn reg-btn-secondary" onclick={cancelAction}>Cancel</button>
+              </div>
+              {#if updateError}
+                <div class="reg-error">{updateError}</div>
+              {/if}
+            </div>
+          {/if}
+
+          <!-- Delete confirmation (inline) -->
+          {#if expandedAction === `delete:${pkg.id}`}
+            <div class="reg-inline-form reg-delete-confirm">
+              <span>Delete <strong>{pkg.label}</strong>?</span>
+              {#if deleteError}
+                <div class="reg-error">{deleteError}</div>
+              {/if}
+              <div class="reg-form-row">
+                <button
+                  class="reg-btn reg-btn-danger"
+                  onclick={() => handleDeleteConfirm(pkg.id)}
+                  disabled={deleteInProgress}
+                >
+                  {deleteInProgress ? 'Deleting...' : 'Confirm'}
+                </button>
+                <button class="reg-btn reg-btn-secondary" onclick={cancelAction}>Cancel</button>
+              </div>
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .reg-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;
+  }
+  .reg-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+  .reg-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+  .reg-refresh-btn {
+    padding: 6px 14px;
+    background: var(--shell-accent, #007acc);
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.875rem;
+  }
+  .reg-refresh-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .reg-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;
+  }
+  .reg-success {
+    padding: 8px 12px;
+    margin-bottom: 12px;
+    background: color-mix(in srgb, var(--shell-success, #4caf50) 15%, transparent);
+    color: var(--shell-success, #4caf50);
+    border: 1px solid var(--shell-success, #4caf50);
+    border-radius: 4px;
+    font-size: 0.8125rem;
+  }
+  .reg-publish-section {
+    padding: 8px 12px;
+    border: 1px solid var(--shell-border, #444);
+    border-radius: 6px;
+    margin-bottom: 16px;
+    font-size: 0.875rem;
+  }
+  .reg-publish-section summary {
+    cursor: pointer;
+    font-weight: 500;
+    padding: 4px 0;
+  }
+  .reg-publish-form {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 10px;
+  }
+  .reg-form-row {
+    display: flex;
+    gap: 8px;
+  }
+  .reg-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;
+  }
+  .reg-input:disabled {
+    opacity: 0.5;
+  }
+  .reg-input::placeholder {
+    color: var(--shell-fg-muted, #888);
+  }
+  .reg-select {
+    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;
+  }
+  .reg-btn {
+    padding: 6px 14px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  .reg-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .reg-btn-primary {
+    background: var(--shell-accent, #007acc);
+    color: #fff;
+  }
+  .reg-btn-secondary {
+    background: var(--shell-input-bg, #2a2a2a);
+    color: var(--shell-fg, #e0e0e0);
+    border: 1px solid var(--shell-border, #444);
+  }
+  .reg-btn-danger {
+    background: transparent;
+    color: var(--shell-error, #d32f2f);
+    border: 1px solid var(--shell-error, #d32f2f);
+  }
+  .reg-btn-danger:hover:not(:disabled) {
+    background: var(--shell-error, #d32f2f);
+    color: #fff;
+  }
+  .reg-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .reg-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: 10px;
+  }
+  .reg-card:hover {
+    border-color: var(--shell-accent, #007acc);
+  }
+  .reg-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .reg-card-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+  .reg-card-label {
+    font-weight: 600;
+    font-size: 0.9375rem;
+  }
+  .reg-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);
+  }
+  .reg-card-meta {
+    font-size: 0.75rem;
+    color: var(--shell-fg-muted, #888);
+  }
+  .reg-card-desc {
+    font-size: 0.8125rem;
+    color: var(--shell-fg-muted, #aaa);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .reg-card-author {
+    font-size: 0.75rem;
+    color: var(--shell-fg-muted, #777);
+  }
+  .reg-card-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+  .reg-inline-form {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding-top: 8px;
+    border-top: 1px solid var(--shell-border, #444);
+  }
+  .reg-delete-confirm {
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .reg-delete-confirm span {
+    flex: 1;
+    font-size: 0.875rem;
+  }
+  .reg-empty {
+    text-align: center;
+    padding: 32px 16px;
+    color: var(--shell-fg-muted, #888);
+    font-size: 0.875rem;
+  }
+</style>

package/dist/registry-shard/RegistryView.svelte.d.ts

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

package/dist/registry-shard/registryApp.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Built-in Registry Manager app — composes the sh3-registry shard's
+ * manage view into a single-slot admin interface.
+ *
+ * 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 registryApp: App;

package/dist/registry-shard/registryApp.js

@@ -0,0 +1,24 @@
+/**
+ * Built-in Registry Manager app — composes the sh3-registry shard's
+ * manage view into a single-slot admin interface.
+ *
+ * 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 registryApp = {
+    manifest: {
+        id: 'sh3-registry-app',
+        label: 'Registry Manager',
+        version: '0.1.0',
+        requiredShards: ['sh3-registry'],
+        layoutVersion: 1,
+    },
+    initialLayout: {
+        type: 'tabs',
+        activeTab: 0,
+        tabs: [
+            { slotId: 'registry.manage', viewId: 'sh3-registry:manage', label: 'Registry' },
+        ],
+    },
+};

package/dist/registry-shard/registryShard.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { Shard } from '../shards/types';
+import type { StateZones } from '../state/zones.svelte';
+/** Registry package shape from the server's registry.json. */
+export interface RegistryPackage {
+    id: string;
+    type: 'shard' | 'app';
+    label: string;
+    description: string;
+    author: {
+        name: string;
+    };
+    versions: Array<{
+        version: string;
+        contractVersion: string;
+        bundleUrl: string;
+        integrity: string;
+    }>;
+}
+/** Schema shape for state zone typing. */
+interface RegistryZoneSchema {
+    ephemeral: {
+        packages: RegistryPackage[];
+        loading: boolean;
+        error: string | null;
+    };
+}
+/** Reactive context exposed to the view component. */
+export interface RegistryContext {
+    state: StateZones<RegistryZoneSchema>;
+    refreshPackages(): Promise<void>;
+    publishPackage(form: FormData): Promise<void>;
+    patchPackage(id: string, fields: {
+        label?: string;
+        description?: string;
+        author?: string;
+    }): Promise<void>;
+    deletePackage(id: string): Promise<void>;
+}
+/**
+ * Module-level context set during activate(). Imported by the Svelte
+ * view component so it can read/write state and trigger actions.
+ */
+export declare let registryContext: RegistryContext;
+export declare const registryShard: Shard;
+export {};