sh3-core 0.13.2 → 0.13.4

package/dist/app/store/storeShard.svelte.js

@@ -1,10 +1,14 @@
 /*
- * Store shard — framework-shipped shard for browsing and managing
- * installed packages.
+ * Store shard — framework-shipped shard for browsing and installing
+ * packages.
  *
- * Contributes two views:
- *   - `sh3-store:browse`    — searchable/filterable catalog of available packages
- *   - `sh3-store:installed` — list of installed packages with uninstall
+ * Contributes a single view:
+ *   - `sh3-store:browse` — searchable/filterable catalog of available packages
+ *
+ * Uninstall and update flows for already-installed packages live on the
+ * shell home card's context menu (see `sh3core-shard/appActions.ts`); this
+ * shard exposes the underlying operations as verbs (`installVerb`,
+ * `uninstallVerb`, `updateVerb`, `appinfoVerb`) and via `storeContext`.
  *
  * Uses env state for registries (server-authoritative, admin-writable) and
  * an ephemeral zone for the live catalog / installed list / loading / error state.
@@ -13,15 +17,15 @@
  */
 import { mount, unmount } from 'svelte';
 import StoreView from './StoreView.svelte';
-import InstalledView from './InstalledView.svelte';
 import { fetchRegistries, fetchBundle, fetchServerBundle, buildPackageMeta } from '../../registry/client';
 import { installPackage, listInstalledPackages } from '../../registry/installer';
+import { uninstallPackage as installerUninstallPackage } from '../../registry/installer';
 import { loadBundle, loadMeta, savePackage } from '../../registry/storage';
 import { loadBundleModule } from '../../registry/loader';
 import { extractBundlePermissions } from '../../registry/permission-descriptions';
-import { serverInstallPackage, fetchServerPackages } from '../../env/client';
+import { serverInstallPackage, fetchServerPackages, serverUninstallPackage } from '../../env/client';
 import { VERSION } from '../../version';
-import { installVerb, uninstallVerb, appinfoVerb } from './verbs';
+import { installVerb, uninstallVerb, appinfoVerb, updateVerb } from './verbs';
 /**
  * Compare two semver-like version strings.
  * Returns true only if `available` is strictly greater than `installed`.
@@ -43,6 +47,20 @@ function isNewerVersion(available, installed) {
     }
     return false;
 }
+/**
+ * Pick a version entry from a resolved package. When `requested` is
+ * undefined returns `latest`; when set, finds the matching entry by
+ * exact version string. Throws if the requested version is absent.
+ */
+export function pickVersion(pkg, requested) {
+    if (requested === undefined)
+        return pkg.latest;
+    const found = pkg.entry.versions.find((v) => v.version === requested);
+    if (!found) {
+        throw new Error(`version ${requested} not in catalog for ${pkg.entry.id}`);
+    }
+    return found;
+}
 /**
  * Compute added and removed permissions between two manifest snapshots.
  * Order within each array follows the input order of `newPerms` (for added)
@@ -68,7 +86,6 @@ export const storeShard = {
         version: VERSION,
         views: [
             { id: 'sh3-store:browse', label: 'Store' },
-            { id: 'sh3-store:installed', label: 'Installed' },
         ],
     },
     activate(ctx) {
@@ -149,21 +166,32 @@ export const storeShard = {
             const registries = env.registries.filter((r) => r !== url);
             await ctx.envUpdate({ registries });
         }
-        async function updatePackage(id, confirmPermissionChange) {
+        async function updatePackage(id, confirmPermissionChange, version) {
             var _a, _b, _c, _d;
-            const catalogEntry = state.ephemeral.updatable[id];
+            // Source the catalog entry. Without an explicit version we use the
+            // updatable map (which encodes the "newer than installed" check); with a
+            // version we look up the package in the full catalog so downgrades and
+            // same-version reinstalls work.
+            let catalogEntry;
+            if (version === undefined) {
+                catalogEntry = state.ephemeral.updatable[id];
+            }
+            else {
+                catalogEntry = state.ephemeral.catalog.find((p) => p.entry.id === id);
+            }
             if (!catalogEntry)
                 return;
             const installedRecord = state.ephemeral.installed.find((p) => p.id === id);
             if (!installedRecord)
                 return;
+            const picked = pickVersion(catalogEntry, version);
             // 1. Fetch new bundle(s).
-            const bundle = await fetchBundle(catalogEntry.latest, catalogEntry.sourceRegistry);
+            const bundle = await fetchBundle(picked, catalogEntry.sourceRegistry);
             let serverBundle;
-            if (catalogEntry.latest.serverBundleUrl) {
-                serverBundle = await fetchServerBundle(catalogEntry.latest, catalogEntry.sourceRegistry);
+            if (picked.serverBundleUrl) {
+                serverBundle = await fetchServerBundle(picked, catalogEntry.sourceRegistry);
             }
-            const meta = buildPackageMeta(catalogEntry, catalogEntry.latest);
+            const meta = buildPackageMeta(catalogEntry, picked);
             // 2. Load the module once for permission extraction and install reuse.
             const loaded = await loadBundleModule(bundle);
             const newPerms = extractBundlePermissions(loaded);
@@ -203,7 +231,7 @@ export const storeShard = {
                 contractVersion: meta.contractVersion,
                 sourceRegistry: meta.sourceRegistry,
                 installedAt: new Date().toISOString(),
-                requiredShards: (_b = (_a = catalogEntry.latest.requires) === null || _a === void 0 ? void 0 : _a.map((r) => r.id)) !== null && _b !== void 0 ? _b : [],
+                requiredShards: (_b = (_a = picked.requires) === null || _a === void 0 ? void 0 : _a.map((r) => r.id)) !== null && _b !== void 0 ? _b : [],
             };
             const serverResult = await serverInstallPackage(manifest, bundle, serverBundle);
             if (!serverResult.ok) {
@@ -231,6 +259,11 @@ export const storeShard = {
             }
             await refreshInstalled();
         }
+        async function uninstallPackage(id) {
+            await serverUninstallPackage(id);
+            await installerUninstallPackage(id);
+            await refreshInstalled();
+        }
         storeContext = {
             env,
             state,
@@ -238,6 +271,7 @@ export const storeShard = {
             refreshCatalog,
             refreshInstalled,
             updatePackage,
+            uninstallPackage,
             addRegistry,
             removeRegistry,
         };
@@ -252,22 +286,12 @@ export const storeShard = {
                 };
             },
         };
-        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);
         // Store verbs — registered as sh3-store:install, sh3-store:uninstall, sh3-store:appinfo
         ctx.registerVerb(installVerb);
         ctx.registerVerb(uninstallVerb);
         ctx.registerVerb(appinfoVerb);
+        ctx.registerVerb(updateVerb);
         // refreshInstalled can run immediately (hits server, no env needed).
         refreshInstalled();
     },

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

@@ -0,0 +1,21 @@
+/** Internal package types as carried by the registry index. */
+export type PackageType = 'shard' | 'app' | 'combo';
+/** User-visible package types — the registry triple collapsed to a pair. */
+export type DisplayPackageType = 'shard' | 'app';
+/** Type-filter values exposed by the browse-view dropdown. */
+export type PackageTypeFilter = 'all' | DisplayPackageType;
+/**
+ * Collapse the internal triple to the user-visible pair. Combo packages
+ * fold into `app`.
+ */
+export declare function displayPackageType(type: PackageType): DisplayPackageType;
+/**
+ * Title-cased label for the type chip. Returns `"Shard"` or `"App"` —
+ * never `"Combo"`.
+ */
+export declare function displayPackageTypeLabel(type: PackageType): 'Shard' | 'App';
+/**
+ * True if a package of `type` should be visible under the chosen filter.
+ * Combos pass under both `"all"` and `"app"` (never under `"shard"`).
+ */
+export declare function packageMatchesTypeFilter(type: PackageType, filter: PackageTypeFilter): boolean;

package/dist/app/store/storeTypes.js

@@ -0,0 +1,33 @@
+/*
+ * Pure helpers that translate the registry's internal package-type triple
+ * (`shard | app | combo`) into the two-value vocabulary the store UI shows
+ * the user (`Shard | App`). `combo` is an internal distinction — a package
+ * that ships both a shard and an app surface — and from a user's standpoint
+ * a combo *is* an app, so it collapses to "App" everywhere user-facing.
+ *
+ * Kept as a separate module (rather than inline in StoreView) so the mapping
+ * is unit-testable without mounting Svelte components.
+ */
+/**
+ * Collapse the internal triple to the user-visible pair. Combo packages
+ * fold into `app`.
+ */
+export function displayPackageType(type) {
+    return type === 'shard' ? 'shard' : 'app';
+}
+/**
+ * Title-cased label for the type chip. Returns `"Shard"` or `"App"` —
+ * never `"Combo"`.
+ */
+export function displayPackageTypeLabel(type) {
+    return displayPackageType(type) === 'shard' ? 'Shard' : 'App';
+}
+/**
+ * True if a package of `type` should be visible under the chosen filter.
+ * Combos pass under both `"all"` and `"app"` (never under `"shard"`).
+ */
+export function packageMatchesTypeFilter(type, filter) {
+    if (filter === 'all')
+        return true;
+    return displayPackageType(type) === filter;
+}

package/dist/app/store/storeTypes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/app/store/storeTypes.test.js

@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest';
+import { displayPackageType, displayPackageTypeLabel, packageMatchesTypeFilter, } from './storeTypes';
+describe('displayPackageType', () => {
+    it('returns "shard" for shard packages', () => {
+        expect(displayPackageType('shard')).toBe('shard');
+    });
+    it('returns "app" for app packages', () => {
+        expect(displayPackageType('app')).toBe('app');
+    });
+    it('collapses combo packages to "app"', () => {
+        expect(displayPackageType('combo')).toBe('app');
+    });
+});
+describe('displayPackageTypeLabel', () => {
+    it('returns "Shard" for shard packages', () => {
+        expect(displayPackageTypeLabel('shard')).toBe('Shard');
+    });
+    it('returns "App" for app packages', () => {
+        expect(displayPackageTypeLabel('app')).toBe('App');
+    });
+    it('returns "App" for combo packages — the user-visible vocabulary never includes "combo"', () => {
+        expect(displayPackageTypeLabel('combo')).toBe('App');
+    });
+});
+describe('packageMatchesTypeFilter', () => {
+    it('matches every type when filter is "all"', () => {
+        expect(packageMatchesTypeFilter('shard', 'all')).toBe(true);
+        expect(packageMatchesTypeFilter('app', 'all')).toBe(true);
+        expect(packageMatchesTypeFilter('combo', 'all')).toBe(true);
+    });
+    it('matches only shards when filter is "shard"', () => {
+        expect(packageMatchesTypeFilter('shard', 'shard')).toBe(true);
+        expect(packageMatchesTypeFilter('app', 'shard')).toBe(false);
+        expect(packageMatchesTypeFilter('combo', 'shard')).toBe(false);
+    });
+    it('matches both apps and combos when filter is "app"', () => {
+        expect(packageMatchesTypeFilter('shard', 'app')).toBe(false);
+        expect(packageMatchesTypeFilter('app', 'app')).toBe(true);
+        expect(packageMatchesTypeFilter('combo', 'app')).toBe(true);
+    });
+});

package/dist/app/store/updatePackage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/app/store/updatePackage.test.js

@@ -0,0 +1,34 @@
+/*
+ * updatePackage() — version-aware unit tests. We exercise the version
+ * resolution branch only; the full flow (server install + permission diff)
+ * is covered indirectly through the home-card update-action tests.
+ */
+import { describe, it, expect } from 'vitest';
+import { pickVersion } from './storeShard.svelte';
+function mkPkg(id, versions) {
+    return {
+        sourceRegistry: 'https://example.test/registry.json',
+        entry: {
+            id,
+            label: id,
+            author: { name: 'tester' },
+            description: '',
+            versions: versions.map((v) => ({ version: v, bundleUrl: `${id}-${v}.js`, integrity: 'sha256-x' })),
+        },
+        latest: { version: versions[0], bundleUrl: `${id}-${versions[0]}.js`, integrity: 'sha256-x' },
+    };
+}
+describe('pickVersion', () => {
+    it('returns latest when no version requested', () => {
+        const pkg = mkPkg('foo', ['2.0.0', '1.0.0']);
+        expect(pickVersion(pkg, undefined).version).toBe('2.0.0');
+    });
+    it('returns the matching entry when version exists', () => {
+        const pkg = mkPkg('foo', ['2.0.0', '1.0.0']);
+        expect(pickVersion(pkg, '1.0.0').version).toBe('1.0.0');
+    });
+    it('throws when version is not in catalog', () => {
+        const pkg = mkPkg('foo', ['2.0.0']);
+        expect(() => pickVersion(pkg, '9.9.9')).toThrow(/version 9\.9\.9 not in catalog for foo/);
+    });
+});

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

@@ -1,4 +1,5 @@
 import type { Verb } from '../../verbs/types';
 export declare const installVerb: Verb;
 export declare const uninstallVerb: Verb;
+export declare const updateVerb: Verb;
 export declare const appinfoVerb: Verb;

package/dist/app/store/verbs.js

@@ -7,8 +7,7 @@
 import { storeContext } from './storeShard.svelte';
 import { fetchBundle, fetchServerBundle, buildPackageMeta } from '../../registry/client';
 import { installPackage } from '../../registry/installer';
-import { serverInstallPackage, serverUninstallPackage } from '../../env/client';
-import { uninstallPackage } from '../../registry/installer';
+import { serverInstallPackage } from '../../env/client';
 function findInCatalog(id) {
     return storeContext.state.ephemeral.catalog.find((p) => p.entry.id === id);
 }
@@ -146,9 +145,7 @@ export const uninstallVerb = {
             ts: Date.now(),
         });
         try {
-            await serverUninstallPackage(id);
-            await uninstallPackage(id);
-            await storeContext.refreshInstalled();
+            await storeContext.uninstallPackage(id);
             ctx.scrollback.push({
                 kind: 'status',
                 text: `uninstalled ${id}`,
@@ -166,6 +163,83 @@ export const uninstallVerb = {
         }
     },
 };
+export const updateVerb = {
+    name: 'update',
+    summary: 'Update an installed package (sh3-store:update <id> [version]). When ' +
+        'version is omitted, bumps to latest; with a version, installs that ' +
+        'exact version (downgrade or same-version reinstall allowed).',
+    async run(ctx, args) {
+        var _a, _b;
+        const id = args[0];
+        const version = args[1];
+        if (!id) {
+            ctx.scrollback.push({
+                kind: 'status',
+                text: 'usage: sh3-store:update <package-id> [version]',
+                level: 'warn',
+                ts: Date.now(),
+            });
+            return;
+        }
+        const installed = findInstalled(id);
+        if (!installed) {
+            ctx.scrollback.push({
+                kind: 'status',
+                text: `package "${id}" is not installed`,
+                level: 'error',
+                ts: Date.now(),
+            });
+            return;
+        }
+        const fromVersion = installed.version;
+        const action = version && version === fromVersion
+            ? 'reinstalling'
+            : version
+                ? `updating ${id} from v${fromVersion} to v${version}`
+                : `updating ${id} from v${fromVersion} to latest`;
+        ctx.scrollback.push({
+            kind: 'status',
+            text: action.startsWith('reinstalling')
+                ? `reinstalling ${id} v${version}…`
+                : `${action}…`,
+            level: 'info',
+            ts: Date.now(),
+        });
+        // Verb path can't surface a modal. If the new bundle changes permissions,
+        // auto-reject and tell the user to use the UI flow.
+        const confirmReject = async (added, removed) => {
+            ctx.scrollback.push({
+                kind: 'status',
+                text: `permission change required (added: ${added.join(', ') || 'none'}; ` +
+                    `removed: ${removed.join(', ') || 'none'}) — open the store and use ` +
+                    `the Update button to review and apply.`,
+                level: 'warn',
+                ts: Date.now(),
+            });
+            return false;
+        };
+        try {
+            await storeContext.updatePackage(id, confirmReject, version);
+            const finalVersion = (_b = version !== null && version !== void 0 ? version : (_a = findInstalled(id)) === null || _a === void 0 ? void 0 : _a.version) !== null && _b !== void 0 ? _b : '?';
+            ctx.scrollback.push({
+                kind: 'status',
+                text: version && version === fromVersion
+                    ? `reinstalled ${id} v${finalVersion}`
+                    : `updated ${id} v${finalVersion}`,
+                level: 'info',
+                ts: Date.now(),
+            });
+        }
+        catch (err) {
+            ctx.scrollback.push({
+                kind: 'status',
+                text: `update failed: ${err instanceof Error ? err.message : String(err)}`,
+                level: 'error',
+                ts: Date.now(),
+            });
+        }
+    },
+};
 export const appinfoVerb = {
     name: 'appinfo',
     summary: 'Show info about a package (installed status, version, catalog details).',

package/dist/app/store/verbs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/app/store/verbs.test.js

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+const { mockStoreContext } = vi.hoisted(() => ({
+    mockStoreContext: {
+        state: { ephemeral: { installed: [] } },
+        updatePackage: vi.fn(),
+    },
+}));
+vi.mock('./storeShard.svelte', () => ({
+    storeContext: mockStoreContext,
+}));
+import { updateVerb } from './verbs';
+function mkCtx() {
+    const lines = [];
+    return {
+        ctx: {
+            scrollback: { push: (e) => lines.push(e) },
+        },
+        lines,
+    };
+}
+describe('updateVerb', () => {
+    beforeEach(() => {
+        mockStoreContext.state = { ephemeral: { installed: [] } };
+        mockStoreContext.updatePackage = vi.fn();
+    });
+    it('warns when no id is given', async () => {
+        var _a;
+        const { ctx, lines } = mkCtx();
+        await updateVerb.run(ctx, []);
+        expect((_a = lines.at(-1)) === null || _a === void 0 ? void 0 : _a.text).toMatch(/usage: sh3-store:update/);
+    });
+    it('delegates to storeContext.updatePackage when version omitted', async () => {
+        const fake = vi.fn().mockResolvedValue(undefined);
+        mockStoreContext.state = { ephemeral: { installed: [{ id: 'foo', version: '1.0.0' }] } };
+        mockStoreContext.updatePackage = fake;
+        const { ctx, lines } = mkCtx();
+        await updateVerb.run(ctx, ['foo']);
+        expect(fake).toHaveBeenCalledWith('foo', expect.any(Function), undefined);
+        expect(lines.some((l) => /updated foo/.test(l.text))).toBe(true);
+    });
+    it('passes version through when provided', async () => {
+        const fake = vi.fn().mockResolvedValue(undefined);
+        mockStoreContext.state = { ephemeral: { installed: [{ id: 'foo', version: '2.0.0' }] } };
+        mockStoreContext.updatePackage = fake;
+        const { ctx } = mkCtx();
+        await updateVerb.run(ctx, ['foo', '1.0.0']);
+        expect(fake).toHaveBeenCalledWith('foo', expect.any(Function), '1.0.0');
+    });
+    it('reports failure as error scrollback line', async () => {
+        const fake = vi.fn().mockRejectedValue(new Error('boom'));
+        mockStoreContext.state = { ephemeral: { installed: [{ id: 'foo', version: '1.0.0' }] } };
+        mockStoreContext.updatePackage = fake;
+        const { ctx, lines } = mkCtx();
+        await updateVerb.run(ctx, ['foo']);
+        const last = lines.at(-1);
+        expect(last.level).toBe('error');
+        expect(last.text).toMatch(/update failed: boom/);
+    });
+});

package/dist/app-appearance/AppAppearanceModal.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+  /*
+   * Customize — pick an icon and color override for a single app.
+   * Reads the existing override on mount via untrack (Svelte 5 idiom for
+   * one-shot prop reads), so editing the form doesn't subscribe to the
+   * shard's reactive state. Save/Reset/Cancel are mutually exclusive.
+   */
+
+  import { untrack } from 'svelte';
+  import IconPicker from '../primitives/widgets/IconPicker.svelte';
+  import ColorSwatch from '../primitives/widgets/ColorSwatch.svelte';
+  import iconsUrl from '../assets/icons.svg';
+  import { listRegisteredApps } from '../api';
+  import { getAppearance, setAppearance } from './appearanceState.svelte';
+
+  interface Props {
+    appId: string;
+    appLabel: string;
+    close: () => void;
+  }
+
+  let { appId, appLabel, close }: Props = $props();
+
+  const initial = untrack(() => getAppearance(appId));
+  const manifestIcon = untrack(
+    () => listRegisteredApps().find((m) => m.id === appId)?.icon,
+  );
+
+  let icon = $state<string | undefined>(initial?.icon);
+  let color = $state<string | undefined>(initial?.color);
+  let label = $state<string>(initial?.label ?? '');
+  let pickerOpen = $state<boolean>(initial?.icon !== undefined);
+
+  const hasOverride = $derived(initial !== undefined);
+  const effectiveLabel = $derived(label.trim() === '' ? appLabel : label.trim());
+  const effectiveIcon = $derived(icon ?? manifestIcon ?? 'box');
+
+  function save() {
+    const trimmed = label.trim();
+    setAppearance(appId, {
+      icon,
+      color,
+      label: trimmed === '' ? undefined : trimmed,
+    });
+    close();
+  }
+
+  function reset() {
+    setAppearance(appId, undefined);
+    close();
+  }
+</script>
+
+<div class="app-appearance">
+  <h2>Customize {appLabel}</h2>
+
+  <div class="preview">
+    <div
+      class="preview-card"
+      class:preview-card--tinted={color !== undefined}
+      style:--card-color={color ?? 'transparent'}
+    >
+      <span class="preview-card-square">
+        <svg class="preview-card-icon"><use href="{iconsUrl}#{effectiveIcon}" /></svg>
+      </span>
+      <span class="preview-card-label">{effectiveLabel}</span>
+    </div>
+  </div>
+
+  <label class="row"><span>Name <em>(empty = default)</em></span>
+    <input
+      type="text"
+      bind:value={label}
+      placeholder={appLabel}
+      class="name-input"
+    />
+  </label>
+
+  <div class="row">
+    <span>Icon</span>
+    {#if !pickerOpen}
+      <button type="button" class="link" onclick={() => (pickerOpen = true)}>
+        Change icon
+      </button>
+    {:else}
+      <IconPicker bind:value={icon} />
+      <button type="button" class="link link--align-right" onclick={() => (pickerOpen = false)}>
+        Hide picker
+      </button>
+    {/if}
+  </div>
+
+  <label class="row"><span>Color</span>
+    <ColorSwatch value={color ?? '#888888'} onchange={(v) => (color = v)} />
+  </label>
+
+  <div class="actions">
+    <button type="button" class="primary" onclick={save}>Save</button>
+    <button type="button" onclick={reset} disabled={!hasOverride}>Reset</button>
+    <button type="button" onclick={close}>Cancel</button>
+  </div>
+</div>
+
+<style>
+  .app-appearance {
+    padding: 16px 20px;
+    max-width: 460px;
+    color: var(--shell-fg);
+    background: var(--shell-bg);
+    font: inherit;
+  }
+  h2 { margin: 0 0 12px; font-size: 16px; }
+  .row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 13px; }
+  .row span { color: var(--shell-fg-muted); }
+  .row span em { font-style: italic; opacity: 0.7; }
+  .name-input {
+    background: var(--shell-bg-elevated);
+    color: var(--shell-fg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+    padding: 6px 8px; font: inherit; font-size: 13px;
+  }
+  .link {
+    align-self: flex-start;
+    background: transparent;
+    border: none;
+    padding: 0;
+    color: var(--shell-accent);
+    font: inherit;
+    font-size: 13px;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+  .link--align-right { align-self: flex-end; margin-top: 4px; }
+  .link:hover { color: var(--shell-fg); }
+  .preview { display: flex; justify-content: center; margin-bottom: 16px; }
+  .preview-card {
+    display: flex; flex-direction: column;
+    align-items: center; gap: 6px;
+    max-width: 160px;
+  }
+  .preview-card-square {
+    width: 64px; height: 64px;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-md);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
+  }
+  .preview-card--tinted .preview-card-square { background: var(--card-color); }
+  .preview-card-icon { width: 28px; height: 28px; color: var(--shell-fg); }
+  .preview-card-label {
+    font-weight: 600; font-size: 11px; line-height: 1.2;
+    text-align: center; word-break: break-word;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+  }
+  .preview-card-icon { width: 24px; height: 24px; color: var(--shell-fg); }
+  .preview-card-label { font-weight: 600; padding: 0 4px; line-height: 1.2; }
+  .actions { display: flex; gap: 8px; margin-top: 16px; }
+  .actions button {
+    background: var(--shell-bg-elevated);
+    color: var(--shell-fg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+    padding: 6px 14px; font: inherit; cursor: pointer;
+  }
+  .actions button.primary { background: var(--shell-accent); color: #fff; border-color: var(--shell-accent); }
+  .actions button:hover { border-color: var(--shell-accent); }
+  .actions button:disabled { opacity: 0.5; cursor: not-allowed; }
+</style>

package/dist/app-appearance/AppAppearanceModal.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    appId: string;
+    appLabel: string;
+    close: () => void;
+}
+declare const AppAppearanceModal: import("svelte").Component<Props, {}, "">;
+type AppAppearanceModal = ReturnType<typeof AppAppearanceModal>;
+export default AppAppearanceModal;

package/dist/app-appearance/appearanceShard.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { Shard } from '../shards/types';
+export declare const appearanceShard: Shard;