sh3-core 0.13.1 → 0.13.3

package/dist/app/store/UninstallAppDialog.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  /*
+   * Confirms uninstall of an installed app launched from the home-card
+   * Uninstall action. Modeled on DeleteProjectDialog. The actual uninstall
+   * (server + local installer) is delegated to the caller via onConfirm.
+   */
+
+  interface Props {
+    appId: string;
+    appLabel: string;
+    version: string;
+    onConfirm: () => Promise<void>;
+    close: () => void;
+  }
+
+  let { appId, appLabel, version, onConfirm, close }: Props = $props();
+  let busy = $state(false);
+  let error = $state<string | null>(null);
+
+  async function confirm() {
+    if (busy) return;
+    busy = true;
+    error = null;
+    try {
+      await onConfirm();
+      close();
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<div class="uninstall-dialog">
+  <h2>Uninstall {appLabel}?</h2>
+  <p class="hint">
+    Package id: <code>{appId}</code> · current version: <code>v{version}</code>
+  </p>
+  <p>
+    The package will be removed from this server. App data stored in your
+    browser will remain until you clear it manually.
+  </p>
+  {#if error}<p class="error">{error}</p>{/if}
+  <div class="actions">
+    <button type="button" class="danger" onclick={confirm} disabled={busy}>
+      {busy ? 'Uninstalling…' : 'Uninstall'}
+    </button>
+    <button type="button" onclick={close} disabled={busy}>Cancel</button>
+  </div>
+</div>
+
+<style>
+  .uninstall-dialog {
+    padding: 16px 20px;
+    max-width: 460px;
+    color: var(--shell-fg);
+    background: var(--shell-bg);
+    font: inherit;
+  }
+  h2 { margin: 0 0 8px; font-size: 16px; }
+  p { margin: 4px 0; font-size: 13px; }
+  .hint { color: var(--shell-fg-muted); font-size: 12px; }
+  .error { color: var(--shell-error, #c33); }
+  code {
+    font-family: var(--shell-font-mono, monospace);
+    background: var(--shell-bg-elevated);
+    padding: 0 4px;
+    border-radius: var(--shell-radius-sm, 3px);
+  }
+  .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.danger {
+    background: var(--shell-error, #c33);
+    color: #fff;
+    border-color: var(--shell-error, #c33);
+  }
+  .actions button:hover { border-color: var(--shell-accent); }
+  .actions button:disabled { opacity: 0.5; cursor: not-allowed; }
+</style>

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

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

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

@@ -0,0 +1,4 @@
+export declare function openPermissionConfirmModal(pkg: {
+    label: string;
+    version: string;
+}, toVersion: string, added: string[], removed: string[]): Promise<boolean>;

package/dist/app/store/permissionConfirm.js

@@ -0,0 +1,28 @@
+/*
+ * Shared permission-diff confirmation flow for the `update` path. Opens
+ * PermissionConfirmModal via modalManager and resolves to the user's choice.
+ * Used by InstalledView's Update button and the home-card "Check for
+ * updates" context-menu action.
+ */
+import { modalManager } from '../../overlays/modal';
+import PermissionConfirmModal from './PermissionConfirmModal.svelte';
+export function openPermissionConfirmModal(pkg, toVersion, added, removed) {
+    return new Promise((resolve) => {
+        const props = {
+            mode: 'update',
+            pkg: { label: pkg.label, version: toVersion },
+            fromVersion: pkg.version,
+            added,
+            removed,
+            onConfirm: () => {
+                handle.close();
+                resolve(true);
+            },
+            onCancel: () => {
+                handle.close();
+                resolve(false);
+            },
+        };
+        const handle = modalManager.open(PermissionConfirmModal, props);
+    });
+}

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

@@ -3,6 +3,12 @@ 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';
+/**
+ * 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 declare function pickVersion(pkg: ResolvedPackage, requested: string | undefined): typeof pkg.latest;
 /**
  * Compute added and removed permissions between two manifest snapshots.
  * Order within each array follows the input order of `newPerms` (for added)
@@ -34,7 +40,8 @@ export interface StoreContext {
     isAdmin: boolean;
     refreshCatalog(): Promise<void>;
     refreshInstalled(): Promise<void>;
-    updatePackage(id: string, confirmPermissionChange?: (added: string[], removed: string[]) => Promise<boolean>): Promise<void>;
+    updatePackage(id: string, confirmPermissionChange?: (added: string[], removed: string[]) => Promise<boolean>, version?: string): Promise<void>;
+    uninstallPackage(id: string): Promise<void>;
     addRegistry(url: string): Promise<void>;
     removeRegistry(url: string): Promise<void>;
 }

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

@@ -16,12 +16,13 @@ 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 +44,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)
@@ -149,21 +164,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 +229,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 +257,11 @@ export const storeShard = {
             }
             await refreshInstalled();
         }
+        async function uninstallPackage(id) {
+            await serverUninstallPackage(id);
+            await installerUninstallPackage(id);
+            await refreshInstalled();
+        }
         storeContext = {
             env,
             state,
@@ -238,6 +269,7 @@ export const storeShard = {
             refreshCatalog,
             refreshInstalled,
             updatePackage,
+            uninstallPackage,
             addRegistry,
             removeRegistry,
         };
@@ -268,6 +300,7 @@ export const storeShard = {
         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/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 InstalledView component 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,56 @@
+import { describe, it, expect, vi } from 'vitest';
+import { updateVerb } from './verbs';
+import * as shard from './storeShard.svelte';
+function mkCtx() {
+    const lines = [];
+    return {
+        ctx: {
+            scrollback: { push: (e) => lines.push(e) },
+        },
+        lines,
+    };
+}
+describe('updateVerb', () => {
+    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);
+        // @ts-expect-error — module-level singleton is not readonly at runtime
+        shard.storeContext = {
+            state: { ephemeral: { installed: [{ id: 'foo', version: '1.0.0' }] } },
+            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);
+        // @ts-expect-error
+        shard.storeContext = {
+            state: { ephemeral: { installed: [{ id: 'foo', version: '2.0.0' }] } },
+            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'));
+        // @ts-expect-error
+        shard.storeContext = {
+            state: { ephemeral: { installed: [{ id: 'foo', version: '1.0.0' }] } },
+            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;