sh3-core 0.13.2 → 0.13.3

package/dist/app-appearance/appearanceState.test.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { setAppearance, getAppearance, __resetForTests } from './appearanceState.svelte';
+describe('appearanceShard get/set', () => {
+    beforeEach(() => __resetForTests());
+    it('returns undefined for an unset app', () => {
+        expect(getAppearance('foo')).toBeUndefined();
+    });
+    it('round-trips an icon override', () => {
+        setAppearance('foo', { icon: 'house' });
+        expect(getAppearance('foo')).toEqual({ icon: 'house' });
+    });
+    it('round-trips a color override', () => {
+        setAppearance('foo', { color: '#ff0000' });
+        expect(getAppearance('foo')).toEqual({ color: '#ff0000' });
+    });
+    it('round-trips a label override', () => {
+        setAppearance('foo', { label: 'My Label' });
+        expect(getAppearance('foo')).toEqual({ label: 'My Label' });
+    });
+    it('clears the entry when all fields are undefined', () => {
+        setAppearance('foo', { icon: 'house', color: '#ff0000', label: 'X' });
+        setAppearance('foo', { icon: undefined, color: undefined, label: undefined });
+        expect(getAppearance('foo')).toBeUndefined();
+    });
+    it('clears the entry when given undefined directly', () => {
+        setAppearance('foo', { icon: 'house' });
+        setAppearance('foo', undefined);
+        expect(getAppearance('foo')).toBeUndefined();
+    });
+});

package/dist/app-appearance/index.d.ts

@@ -0,0 +1,3 @@
+export { appearanceShard } from './appearanceShard.svelte';
+export { getAppearance, setAppearance } from './appearanceState.svelte';
+export type { AppAppearance } from './types';

package/dist/app-appearance/index.js

@@ -0,0 +1,2 @@
+export { appearanceShard } from './appearanceShard.svelte';
+export { getAppearance, setAppearance } from './appearanceState.svelte';

package/dist/app-appearance/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Per-app per-user-per-browser visual override. Stored in the user zone
+ * of the __app-appearance__ shard. Every field is optional — an empty
+ * AppAppearance object is treated as "no override" and removed from the
+ * map by setAppearance().
+ */
+export interface AppAppearance {
+    icon?: string;
+    color?: string;
+    label?: string;
+}

package/dist/app-appearance/types.js

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

package/dist/apps/types.d.ts

@@ -74,6 +74,13 @@ export interface AppManifest {
      * When absent, the canonical fallback is used. See MenuContainer.
      */
     menus?: MenuContainer[];
+    /**
+     * Optional default home-card icon — a lucide icon id from the bundled
+     * sprite (see `src/assets/icons.svg`). User-set per-browser overrides
+     * (via the home-card Customize action) take precedence; if neither is
+     * set the framework falls back to `box`.
+     */
+    icon?: string;
 }
 /**
  * Context object passed to `App.activate`. Provides app-scoped state zones

package/dist/assets/iconIds.generated.d.ts

@@ -0,0 +1,2 @@
+export declare const ICON_IDS: readonly ["activity", "align-horizontal-justify-center", "align-horizontal-justify-end", "align-horizontal-justify-start", "app-window", "archive", "archive-restore", "axis-3d", "box", "brick-wall", "bug", "building-2", "cable", "calendar", "camera", "check", "chevron-down", "chevron-right", "circle-check", "circle-dot", "circle-minus", "circle-x", "clipboard", "clipboard-paste", "clock", "compass", "component", "copy", "cpu", "crop", "crosshair", "crown", "dollar-sign", "download", "droplet", "eraser", "euro", "external-link", "eye", "eye-off", "file", "file-archive", "file-diff", "file-plus", "file-text", "flame", "flip-horizontal-2", "flip-vertical-2", "folder", "folder-open", "folder-plus", "folder-tree", "gallery-vertical-end", "gamepad-2", "gauge", "gem", "git-branch", "git-commit-horizontal", "git-merge", "globe", "grid-2x2", "grid-3x3", "group", "hard-drive", "heart", "history", "house", "image", "info", "joystick", "key", "layers", "layout-dashboard", "layout-grid", "layout-list", "layout-panel-left", "layout-panel-top", "layout-template", "lightbulb", "link", "list-ordered", "list-tree", "lock", "log-out", "magnet", "mail", "map", "maximize", "minimize", "moon", "mouse-pointer", "move", "move-3d", "music", "navigation", "network", "notebook-pen", "palette", "pause", "pencil", "pipette", "play", "plus", "pointer", "pound-sterling", "receipt", "redo-2", "refresh-cw", "rocket", "rotate-3d", "rotate-ccw", "rotate-cw", "ruler", "save", "scissors", "scroll-text", "search", "send", "server", "settings", "shield", "skull", "sliders-horizontal", "snowflake", "sparkles", "square", "square-terminal", "star", "sun", "sword", "table-properties", "target", "texture", "timer", "trash-2", "triangle-alert", "type", "undo-2", "ungroup", "unity", "upload", "user", "users", "video", "volume-2", "wand-sparkles", "wind", "x", "zap", "zoom-in", "zoom-out"];
+export type IconId = (typeof ICON_IDS)[number];

package/dist/assets/iconIds.generated.js

@@ -0,0 +1,154 @@
+// GENERATED — do not edit. See scripts/sync-icon-ids.ts
+export const ICON_IDS = [
+    'activity',
+    'align-horizontal-justify-center',
+    'align-horizontal-justify-end',
+    'align-horizontal-justify-start',
+    'app-window',
+    'archive',
+    'archive-restore',
+    'axis-3d',
+    'box',
+    'brick-wall',
+    'bug',
+    'building-2',
+    'cable',
+    'calendar',
+    'camera',
+    'check',
+    'chevron-down',
+    'chevron-right',
+    'circle-check',
+    'circle-dot',
+    'circle-minus',
+    'circle-x',
+    'clipboard',
+    'clipboard-paste',
+    'clock',
+    'compass',
+    'component',
+    'copy',
+    'cpu',
+    'crop',
+    'crosshair',
+    'crown',
+    'dollar-sign',
+    'download',
+    'droplet',
+    'eraser',
+    'euro',
+    'external-link',
+    'eye',
+    'eye-off',
+    'file',
+    'file-archive',
+    'file-diff',
+    'file-plus',
+    'file-text',
+    'flame',
+    'flip-horizontal-2',
+    'flip-vertical-2',
+    'folder',
+    'folder-open',
+    'folder-plus',
+    'folder-tree',
+    'gallery-vertical-end',
+    'gamepad-2',
+    'gauge',
+    'gem',
+    'git-branch',
+    'git-commit-horizontal',
+    'git-merge',
+    'globe',
+    'grid-2x2',
+    'grid-3x3',
+    'group',
+    'hard-drive',
+    'heart',
+    'history',
+    'house',
+    'image',
+    'info',
+    'joystick',
+    'key',
+    'layers',
+    'layout-dashboard',
+    'layout-grid',
+    'layout-list',
+    'layout-panel-left',
+    'layout-panel-top',
+    'layout-template',
+    'lightbulb',
+    'link',
+    'list-ordered',
+    'list-tree',
+    'lock',
+    'log-out',
+    'magnet',
+    'mail',
+    'map',
+    'maximize',
+    'minimize',
+    'moon',
+    'mouse-pointer',
+    'move',
+    'move-3d',
+    'music',
+    'navigation',
+    'network',
+    'notebook-pen',
+    'palette',
+    'pause',
+    'pencil',
+    'pipette',
+    'play',
+    'plus',
+    'pointer',
+    'pound-sterling',
+    'receipt',
+    'redo-2',
+    'refresh-cw',
+    'rocket',
+    'rotate-3d',
+    'rotate-ccw',
+    'rotate-cw',
+    'ruler',
+    'save',
+    'scissors',
+    'scroll-text',
+    'search',
+    'send',
+    'server',
+    'settings',
+    'shield',
+    'skull',
+    'sliders-horizontal',
+    'snowflake',
+    'sparkles',
+    'square',
+    'square-terminal',
+    'star',
+    'sun',
+    'sword',
+    'table-properties',
+    'target',
+    'texture',
+    'timer',
+    'trash-2',
+    'triangle-alert',
+    'type',
+    'undo-2',
+    'ungroup',
+    'unity',
+    'upload',
+    'user',
+    'users',
+    'video',
+    'volume-2',
+    'wand-sparkles',
+    'wind',
+    'x',
+    'zap',
+    'zoom-in',
+    'zoom-out',
+];

package/dist/host.js

@@ -23,6 +23,7 @@ import { sh3coreShard } from './sh3core-shard/sh3coreShard.svelte';
 import { shellShard } from './shell-shard/shellShard.svelte';
 import { storeShard } from './app/store/storeShard.svelte';
 import { projectsShard } from './projects-shard/projectsShard.svelte';
+import { appearanceShard } from './app-appearance';
 import { __setBackend, backends } from './state/zones.svelte';
 import { loadInstalledPackages } from './registry/installer';
 import { setLocalOwner } from './auth/index';
@@ -67,7 +68,7 @@ export async function bootstrap(config) {
     }
     const exShards = new Set(config === null || config === void 0 ? void 0 : config.excludeShards);
     // 1. Framework-owned shards
-    const frameworkShards = [sh3coreShard, shellShard, storeShard, adminShard, projectsShard];
+    const frameworkShards = [sh3coreShard, shellShard, storeShard, adminShard, projectsShard, appearanceShard];
     for (const shard of frameworkShards) {
         if (!exShards.has(shard.manifest.id)) {
             registerShardInternal(shard);

package/dist/primitives/widgets/IconPicker.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  /*
+   * IconPicker — searchable grid of icon ids from the bundled lucide
+   * sprite. The "(none)" tile clears the value. Composes the widget
+   * commit-only event contract (CommitOnlyEvents<string | undefined>).
+   */
+
+  import type { CommitOnlyEvents } from './_contract';
+  import { ICON_IDS } from '../../assets/iconIds.generated';
+  import iconsUrl from '../../assets/icons.svg';
+
+  type Props = {
+    value?: string | undefined;
+    label?: string;
+    disabled?: boolean;
+  } & CommitOnlyEvents<string | undefined>;
+
+  let {
+    value = $bindable(undefined),
+    label,
+    disabled = false,
+    onchange,
+  }: Props = $props();
+
+  let query = $state('');
+
+  const filtered = $derived(
+    query.trim() === ''
+      ? ICON_IDS
+      : ICON_IDS.filter((id) => id.includes(query.trim().toLowerCase())),
+  );
+
+  function pick(id: string | undefined): void {
+    if (disabled) return;
+    value = id;
+    onchange?.(id);
+  }
+</script>
+
+<div class="sh3-icon-picker" class:sh3-icon-picker--disabled={disabled}>
+  {#if label}<span class="sh3-icon-picker__label">{label}</span>{/if}
+  <input
+    type="search"
+    placeholder="Search icons…"
+    bind:value={query}
+    {disabled}
+    aria-label="Filter icons"
+  />
+  <div class="sh3-icon-picker__grid">
+    <button
+      type="button"
+      class="sh3-icon-picker__tile sh3-icon-picker__tile--none"
+      class:sh3-icon-picker__tile--selected={value === undefined}
+      aria-label="No icon"
+      {disabled}
+      onclick={() => pick(undefined)}
+    >×</button>
+    {#each filtered as id (id)}
+      <button
+        type="button"
+        class="sh3-icon-picker__tile"
+        class:sh3-icon-picker__tile--selected={value === id}
+        aria-label={id}
+        title={id}
+        {disabled}
+        onclick={() => pick(id)}
+      >
+        <svg viewBox="0 0 24 24"><use href="{iconsUrl}#{id}" /></svg>
+      </button>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .sh3-icon-picker { display: flex; flex-direction: column; gap: 6px; }
+  .sh3-icon-picker__label { font-size: 13px; color: var(--shell-fg-muted); }
+  .sh3-icon-picker input[type="search"] {
+    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;
+  }
+  .sh3-icon-picker__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
+    gap: 4px;
+    max-height: 220px;
+    overflow-y: auto;
+    padding: 4px;
+    background: var(--shell-bg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+  }
+  .sh3-icon-picker__tile {
+    aspect-ratio: 1 / 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--shell-bg-elevated);
+    color: var(--shell-fg);
+    border: 1px solid transparent;
+    border-radius: var(--shell-radius-sm, 3px);
+    cursor: pointer;
+    padding: 0; font: inherit;
+  }
+  .sh3-icon-picker__tile--none { font-size: 16px; color: var(--shell-fg-muted); }
+  .sh3-icon-picker__tile:hover { border-color: var(--shell-accent); }
+  .sh3-icon-picker__tile--selected {
+    outline: 2px solid var(--shell-accent);
+    outline-offset: -2px;
+  }
+  .sh3-icon-picker__tile svg { width: 18px; height: 18px; }
+  .sh3-icon-picker--disabled .sh3-icon-picker__tile { cursor: not-allowed; opacity: 0.5; }
+</style>

package/dist/primitives/widgets/IconPicker.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CommitOnlyEvents } from './_contract';
+type Props = {
+    value?: string | undefined;
+    label?: string;
+    disabled?: boolean;
+} & CommitOnlyEvents<string | undefined>;
+declare const IconPicker: import("svelte").Component<Props, {}, "value">;
+type IconPicker = ReturnType<typeof IconPicker>;
+export default IconPicker;

package/dist/primitives/widgets/IconPicker.svelte.test.d.ts

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

package/dist/primitives/widgets/IconPicker.svelte.test.js

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import IconPicker from './IconPicker.svelte';
+describe('IconPicker', () => {
+    it('renders the (none) tile and at least one icon tile', () => {
+        const { container } = render(IconPicker, { props: {} });
+        const tiles = container.querySelectorAll('.sh3-icon-picker__tile');
+        expect(tiles.length).toBeGreaterThan(1);
+        expect(tiles[0].getAttribute('aria-label')).toBe('No icon');
+    });
+    it('filters tiles by search input', async () => {
+        const { container } = render(IconPicker, { props: {} });
+        const search = container.querySelector('input[type="search"]');
+        await fireEvent.input(search, { target: { value: 'house' } });
+        const visible = container.querySelectorAll('.sh3-icon-picker__tile:not([hidden])');
+        expect(visible.length).toBeGreaterThan(0);
+        expect(visible.length).toBeLessThan(20);
+    });
+    it('calls onchange with the clicked icon id', async () => {
+        let lastValue = '__sentinel__';
+        const { container } = render(IconPicker, {
+            props: {
+                onchange: (v) => { lastValue = v; },
+            },
+        });
+        const tiles = Array.from(container.querySelectorAll('.sh3-icon-picker__tile'));
+        await fireEvent.click(tiles[1]);
+        expect(lastValue).toEqual(expect.any(String));
+        expect(lastValue).not.toBe('__sentinel__');
+    });
+    it('calls onchange with undefined when (none) tile is clicked', async () => {
+        let lastValue = 'house';
+        const { container } = render(IconPicker, {
+            props: {
+                value: 'house',
+                onchange: (v) => { lastValue = v; },
+            },
+        });
+        const noneTile = container.querySelector('.sh3-icon-picker__tile');
+        await fireEvent.click(noneTile);
+        expect(lastValue).toBeUndefined();
+    });
+});

package/dist/projects-shard/ProjectManage.svelte

@@ -8,6 +8,7 @@
    * "include myself" works without looking up the underlying user id.
    */
 
+  import { untrack } from 'svelte';
   import { projectsApi, type ProjectRecord } from './projectsApi';
   import { refreshProjects } from './projectsShard.svelte';
   import { getUser } from '../auth/auth.svelte';
@@ -26,12 +27,21 @@
   const isEdit = $derived(project !== null);
   const me = $derived(getUser());
 
-  let name = $state(project?.name ?? '');
-  let description = $state(project?.description ?? '');
+  // Form fields snapshot the project on mount; the modal is recreated per
+  // open, so prop changes after mount aren't expected. untrack defers the
+  // reactive read so Svelte 5 doesn't emit state_referenced_locally.
+  let name = $state(untrack(() => project?.name ?? ''));
+  let description = $state(untrack(() => project?.description ?? ''));
   let members = $state<string[]>(
-    project ? [...project.members] : (me?.id ? [me.id] : []),
+    untrack(() => {
+      if (project) return [...project.members];
+      const userId = getUser()?.id;
+      return userId ? [userId] : [];
+    }),
+  );
+  let appAllowlist = $state<string[]>(
+    untrack(() => (project ? [...project.appAllowlist] : [])),
   );
-  let appAllowlist = $state<string[]>(project ? [...project.appAllowlist] : []);
   let saving = $state(false);
   let error = $state<string | null>(null);
 

package/dist/sh3core-shard/ShellHome.svelte

@@ -12,6 +12,22 @@
   import ProjectsSection from '../projects-shard/ProjectsSection.svelte';
   import { sessionState } from '../projects/session-state.svelte';
   import { projectsState } from '../projects-shard/projectsShard.svelte';
+  import { shell } from '../shellRuntime.svelte';
+  import { makeSelectionApi } from '../actions/selection.svelte';
+  import { getAppearance } from '../app-appearance';
+  import iconsUrl from '../assets/icons.svg';
+
+  const homeSelection = makeSelectionApi('__sh3core__');
+
+  function openAppContextMenu(event: MouseEvent, appId: string): void {
+    event.preventDefault();
+    homeSelection.set({ type: 'app', ref: { appId } });
+    shell.actions.openContextMenu({
+      x: event.clientX,
+      y: event.clientY,
+      scope: { element: 'app' },
+    });
+  }
 
   let filter = $state('');
 
@@ -71,17 +87,20 @@
       <h2 class="shell-home-section-title">Apps</h2>
       <div class="shell-home-grid">
         {#each userApps as manifest (manifest.id)}
+          {@const appearance = getAppearance(manifest.id)}
           <button
             type="button"
             class="shell-home-card"
+            class:shell-home-card--tinted={appearance?.color}
+            style:--card-color={appearance?.color ?? 'transparent'}
+            data-sh3-scope="element:app"
             onclick={() => launchApp(manifest.id)}
-            title="Launch {manifest.label}"
+            oncontextmenu={(e) => openAppContextMenu(e, manifest.id)}
           >
-            <div class="shell-home-card-label">{manifest.label}</div>
-            <div class="shell-home-card-meta">
-              <span class="shell-home-card-id">{manifest.id}</span>
-              <span class="shell-home-card-version">v{manifest.version}</span>
-            </div>
+            <span class="shell-home-card-square">
+              <svg class="shell-home-card-icon"><use href="{iconsUrl}#{appearance?.icon ?? manifest.icon ?? 'box'}" /></svg>
+            </span>
+            <span class="shell-home-card-label">{appearance?.label ?? manifest.label}</span>
           </button>
         {/each}
       </div>
@@ -93,17 +112,20 @@
       <h2 class="shell-home-section-title">Admin</h2>
       <div class="shell-home-grid">
         {#each adminApps as manifest (manifest.id)}
+          {@const appearance = getAppearance(manifest.id)}
           <button
             type="button"
             class="shell-home-card"
+            class:shell-home-card--tinted={appearance?.color}
+            style:--card-color={appearance?.color ?? 'transparent'}
+            data-sh3-scope="element:app"
             onclick={() => launchApp(manifest.id)}
-            title="Launch {manifest.label}"
+            oncontextmenu={(e) => openAppContextMenu(e, manifest.id)}
           >
-            <div class="shell-home-card-label">{manifest.label}</div>
-            <div class="shell-home-card-meta">
-              <span class="shell-home-card-id">{manifest.id}</span>
-              <span class="shell-home-card-version">v{manifest.version}</span>
-            </div>
+            <span class="shell-home-card-square">
+              <svg class="shell-home-card-icon"><use href="{iconsUrl}#{appearance?.icon ?? manifest.icon ?? 'box'}" /></svg>
+            </span>
+            <span class="shell-home-card-label">{appearance?.label ?? manifest.label}</span>
           </button>
         {/each}
       </div>
@@ -223,26 +245,34 @@
   }
   .shell-home-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-    gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
+    gap: 18px 14px;
   }
   .shell-home-card {
-    aspect-ratio: 1 / 1;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    text-align: left;
-    padding: 10px;
-    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
-    border: 1px solid var(--shell-border);
-    border-radius: var(--shell-radius-md);
+    align-items: center;
+    gap: 6px;
+    padding: 0;
+    background: transparent;
+    border: none;
     color: inherit;
     font: inherit;
     cursor: pointer;
+  }
+  .shell-home-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);
     transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
   }
-  .shell-home-card:hover {
+  .shell-home-card:hover .shell-home-card-square {
     border-color: var(--shell-accent);
     transform: translateY(-1px);
     box-shadow:
@@ -252,36 +282,32 @@
   }
   .shell-home-card:focus-visible {
     outline: none;
+  }
+  .shell-home-card:focus-visible .shell-home-card-square {
     border-color: var(--shell-accent);
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--shell-accent) 40%, transparent);
   }
-  .shell-home-card:active {
+  .shell-home-card:active .shell-home-card-square {
     transform: translateY(0);
   }
   .shell-home-card-label {
     font-weight: 600;
-    font-size: 12px;
+    font-size: 11px;
     line-height: 1.2;
+    text-align: center;
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     line-clamp: 2;
+    word-break: break-word;
   }
-  .shell-home-card-meta {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    font-size: 9px;
-    color: var(--shell-fg-subtle);
-    min-width: 0;
-  }
-  .shell-home-card-id {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .shell-home-card-icon {
+    width: 28px;
+    height: 28px;
+    color: var(--shell-fg);
   }
-  .shell-home-card-version {
-    color: var(--shell-fg-muted);
+  .shell-home-card--tinted .shell-home-card-square {
+    background: var(--card-color);
   }
 </style>

package/dist/sh3core-shard/appActions.d.ts

@@ -0,0 +1,13 @@
+import type { ShardContext } from '../shards/types';
+export interface AppActionGate {
+    admin: boolean;
+    builtin: boolean;
+}
+export declare function computeAppActionDisabled(g: AppActionGate): boolean;
+export declare function computeAppActionLabelSuffix(g: AppActionGate): string;
+/**
+ * Register the three element-scope app actions on the given shard context.
+ * Returns a disposer that unregisters all three (the framework expects the
+ * shard's activate to keep the disposers alive across deactivate).
+ */
+export declare function registerAppActions(ctx: ShardContext): () => void;