sh3-core 0.3.0 → 0.4.0

package/dist/Shell.svelte

@@ -101,7 +101,7 @@
     height: 100%;
     width: 100%;
     position: relative;
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
     color: var(--shell-fg);
   }
 
@@ -110,7 +110,7 @@
     align-items: center;
     gap: var(--shell-pad-md);
     padding: 0 var(--shell-pad-md);
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     border-bottom: 1px solid var(--shell-border);
     user-select: none;
   }
@@ -123,7 +123,7 @@
   .shell-content {
     position: relative;
     overflow: hidden;
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
     min-width: 0;
     min-height: 0;
   }
@@ -132,7 +132,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 var(--shell-pad-md);
-    background: var(--shell-bg-sunken);
+    background: var(--shell-grad-bg-sunken, var(--shell-bg-sunken));
     border-top: 1px solid var(--shell-border);
     color: var(--shell-fg-muted);
     font-size: 11px;

package/dist/api.d.ts

@@ -21,3 +21,4 @@ export declare const capabilities: {
     readonly hotInstall: boolean;
 };
 export type { ServerShard, ServerShardContext } from './server-shard/types';
+export { setTokenOverrides, clearTokenOverrides, getTokenOverrides, } from './theme';

package/dist/api.js

@@ -43,3 +43,5 @@ export const capabilities = {
     /** Whether this target supports hot-installing packages via dynamic import from blob URL. */
     hotInstall: typeof Blob !== 'undefined' && typeof URL.createObjectURL === 'function',
 };
+// Theme token override API (shell-level theming support).
+export { setTokenOverrides, clearTokenOverrides, getTokenOverrides, } from './theme';

package/dist/createShell.js

@@ -10,6 +10,7 @@ import { mount } from 'svelte';
 import { Shell } from './index';
 import { registerShard, registerApp, bootstrap, __setBackend, setLocalOwner, } from './host';
 import { resolvePlatform } from './platform/index';
+import { hydrateTokenOverrides } from './theme';
 export async function createShell(config) {
     var _a, _b;
     // 1. Platform detection — must run before bootstrap so state zones
@@ -23,6 +24,9 @@ export async function createShell(config) {
     if (platform.localOwner) {
         setLocalOwner();
     }
+    // 1c. Apply persisted theme token overrides before any component mounts,
+    //     so the first frame renders with the user's chosen theme.
+    hydrateTokenOverrides();
     // 1b. Load server-discovered packages (fetched by frontend from /api/packages).
     if ((_a = config === null || config === void 0 ? void 0 : config.discoveredPackages) === null || _a === void 0 ? void 0 : _a.length) {
         const { loadBundleModule } = await import('./registry/loader');

package/dist/diagnostic/DiagnosticPanel.svelte

@@ -24,6 +24,7 @@
   const layout = $derived(inspectActiveLayout());
   const regShards = $derived(Array.from(registeredShards.values()));
   const actShards = $derived(Array.from(activeShards.keys()));
+
 </script>
 
 <div class="diagnostic">
@@ -68,6 +69,7 @@
       {/each}
     </ul>
   </section>
+
 </div>
 
 <style>
@@ -76,7 +78,7 @@
     inset: 0;
     padding: 12px 16px;
     overflow: auto;
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
     color: var(--shell-fg);
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
     font-size: 12px;

package/dist/diagnostic/DiagnosticRoutes.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  /*
+   * Diagnostic routes view — lists all server API routes.
+   *
+   * Fetches the route table from GET /api/routes. GET routes render
+   * as clickable links for quick testing of parameterless endpoints.
+   */
+
+  interface ApiRoute { method: string; path: string; }
+  let routes: ApiRoute[] = $state([]);
+  let error: string | null = $state(null);
+
+  async function fetchRoutes() {
+    try {
+      const res = await fetch('/api/routes');
+      if (!res.ok) { error = `${res.status}`; return; }
+      routes = await res.json();
+      error = null;
+    } catch {
+      error = 'unavailable';
+    }
+  }
+
+  fetchRoutes();
+</script>
+
+<div class="diagnostic">
+  <h2>API Routes</h2>
+
+  {#if error}
+    <p class="muted">Server not reachable or route introspection unavailable ({error}).</p>
+  {:else}
+    <p class="muted">{routes.length} unique routes</p>
+    <ul>
+      {#each routes as route}
+        <li>
+          <span class="method" class:get={route.method === 'GET'}>{route.method}</span>
+          {#if route.method === 'GET'}
+            <a href={route.path} target="_blank" rel="noopener">{route.path}</a>
+          {:else}
+            <span class="path">{route.path}</span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .diagnostic {
+    position: absolute;
+    inset: 0;
+    padding: 12px 16px;
+    overflow: auto;
+    background: var(--shell-grad-bg, var(--shell-bg));
+    color: var(--shell-fg);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 12px;
+  }
+  h2 {
+    margin: 0 0 12px;
+    color: var(--shell-accent);
+    font-size: 14px;
+  }
+  .muted {
+    color: var(--shell-fg-muted);
+    margin: 0 0 8px;
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  li {
+    margin: 0;
+    padding: 2px 0;
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+  }
+  .method {
+    min-width: 6ch;
+    color: var(--shell-fg-muted);
+    flex-shrink: 0;
+  }
+  .method.get {
+    color: var(--shell-accent);
+  }
+  a {
+    color: var(--shell-accent);
+    text-decoration: none;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+  .path {
+    color: var(--shell-fg);
+  }
+</style>

package/dist/diagnostic/DiagnosticRoutes.svelte.d.ts

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

package/dist/diagnostic/diagnosticApp.js

@@ -19,6 +19,7 @@ export const diagnosticApp = {
         activeTab: 0,
         tabs: [
             { slotId: 'diagnostic.main', viewId: 'diagnostic:panel', label: 'Diagnostic' },
+            { slotId: 'diagnostic.routes', viewId: 'diagnostic:routes', label: 'API Routes' },
         ],
     },
 };

package/dist/diagnostic/diagnosticShard.svelte.js

@@ -25,6 +25,7 @@
  */
 import { mount, unmount } from 'svelte';
 import DiagnosticPanel from './DiagnosticPanel.svelte';
+import DiagnosticRoutes from './DiagnosticRoutes.svelte';
 import DiagnosticPromptModal from './DiagnosticPromptModal.svelte';
 import { shell, getActiveApp, spliceIntoActiveLayout, inspectActiveLayout, } from '../api';
 export const diagnosticShard = {
@@ -32,7 +33,10 @@ export const diagnosticShard = {
         id: 'diagnostic',
         label: 'Diagnostic',
         version: '0.1.0',
-        views: [{ id: 'diagnostic:panel', label: 'Diagnostic' }],
+        views: [
+            { id: 'diagnostic:panel', label: 'Diagnostic' },
+            { id: 'diagnostic:routes', label: 'API Routes' },
+        ],
     },
     activate(ctx) {
         const factory = {
@@ -46,6 +50,17 @@ export const diagnosticShard = {
             },
         };
         ctx.registerView('diagnostic:panel', factory);
+        const routesFactory = {
+            mount(container, _context) {
+                const instance = mount(DiagnosticRoutes, { target: container });
+                return {
+                    unmount() {
+                        unmount(instance);
+                    },
+                };
+            },
+        };
+        ctx.registerView('diagnostic:routes', routesFactory);
     },
     autostart(ctx) {
         const state = ctx.state({

package/dist/layout/DragPreview.svelte

@@ -46,7 +46,7 @@
     align-items: center;
     gap: var(--shell-pad-sm);
     padding: var(--shell-pad-sm) var(--shell-pad-md);
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-accent);
     border-radius: 3px;

package/dist/layout/LayoutRenderer.svelte

@@ -186,10 +186,12 @@
       />
       {#snippet tabBody(i: number)}
         {@const entry = tabs.tabs[i]}
-        <div class="tab-slot-wrapper">
-          <SlotContainer node={{ type: 'slot', slotId: entry.slotId, viewId: entry.viewId }} label={entry.label} />
-          <SlotDropZone path={path} />
-        </div>
+        {#if entry}
+          <div class="tab-slot-wrapper">
+            <SlotContainer node={{ type: 'slot', slotId: entry.slotId, viewId: entry.viewId }} label={entry.label} />
+            <SlotDropZone path={path} />
+          </div>
+        {/if}
       {/snippet}
     {:else if tabs?.persistent}
       <div class="empty-tabs-placeholder">

package/dist/overlays/ModalFrame.svelte

@@ -73,7 +73,7 @@
     pointer-events: auto;
   }
   .modal-box {
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-border-strong);
     border-radius: 4px;

package/dist/overlays/PopupFrame.svelte

@@ -73,7 +73,7 @@
 <style>
   .popup-frame {
     position: absolute;
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-border-strong);
     border-radius: 3px;

package/dist/overlays/ToastItem.svelte

@@ -44,7 +44,7 @@
     align-items: center;
     gap: var(--shell-pad-md);
     padding: var(--shell-pad-sm) var(--shell-pad-md);
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-border-strong);
     border-left-width: 3px;

package/dist/primitives/ResizableSplitter.svelte

@@ -269,7 +269,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     border: none;
     color: var(--shell-fg-muted);
     cursor: pointer;

package/dist/primitives/TabbedPanel.svelte

@@ -206,7 +206,7 @@
     height: 100%;
     min-width: 0;
     min-height: 0;
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
   }
 
   .tab-strip {
@@ -214,7 +214,7 @@
     flex: 0 0 auto;
     display: flex;
     gap: 1px;
-    background: var(--shell-bg-sunken);
+    background: var(--shell-grad-bg-sunken, var(--shell-bg-sunken));
     border-bottom: 1px solid var(--shell-border);
     padding: 0 var(--shell-pad-sm);
     user-select: none;
@@ -243,11 +243,11 @@
   }
   .tab:hover {
     color: var(--shell-fg);
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
   }
   .tab.active {
     color: var(--shell-fg);
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
     border-top-color: var(--shell-accent);
   }
   .tab-icon { font-size: 11px; }

package/dist/server-shard/types.d.ts

@@ -3,7 +3,7 @@
  *
  * A server shard is the optional backend counterpart to a client shard.
  * It runs in Node inside sh3-server and declares routes that are mounted
- * under `/s/<shard-id>/`. Server shards have full Node access — filesystem,
+ * under `/api/<shard-id>/`. Server shards have full Node access — filesystem,
  * child_process, network, etc. — and are trusted by the admin who installed
  * them.
  *
@@ -39,8 +39,8 @@ export interface ServerShard {
     id: string;
     /**
      * Called once at mount time. Register Hono routes on the provided router.
-     * Routes are relative to `/s/<shard-id>/` — e.g. `router.get('/data', ...)`
-     * becomes `GET /s/<shard-id>/data`.
+     * Routes are relative to `/api/<shard-id>/` — e.g. `router.get('/data', ...)`
+     * becomes `GET /api/<shard-id>/data`.
      *
      * May be async if the shard needs to initialise resources before serving.
      */

package/dist/server-shard/types.js

@@ -3,7 +3,7 @@
  *
  * A server shard is the optional backend counterpart to a client shard.
  * It runs in Node inside sh3-server and declares routes that are mounted
- * under `/s/<shard-id>/`. Server shards have full Node access — filesystem,
+ * under `/api/<shard-id>/`. Server shards have full Node access — filesystem,
  * child_process, network, etc. — and are trusted by the admin who installed
  * them.
  *

package/dist/shards/types.d.ts

@@ -98,7 +98,7 @@ export interface ShardManifest {
     /**
      * Optional filename of a server-side bundle for this shard. When present,
      * sh3-server loads the bundle at boot and mounts its routes at
-     * `/s/<shard-id>/`. The server bundle runs in Node with full access.
+     * `/api/<shard-id>/`. The server bundle runs in Node with full access.
      * Only relevant for shards installed via the package store; framework-
      * shipped shards do not use this field.
      */

package/dist/shell-shard/ShellHome.svelte

@@ -97,7 +97,7 @@
     <section class="shell-home-section">
       <h2 class="shell-home-section-title">Admin Mode</h2>
       <p class="shell-home-elevate-hint">
-        Enter an API key to access admin apps like the Package Store.
+        Elevate Permissions
       </p>
       <form class="shell-home-elevate-form" onsubmit={(e) => { e.preventDefault(); handleElevate(); }}>
         <input
@@ -136,7 +136,7 @@
     justify-content: flex-start;
     padding: 48px 24px;
     overflow: auto;
-    background: var(--shell-bg);
+    background: var(--shell-grad-bg, var(--shell-bg));
     color: var(--shell-fg);
     font-family: system-ui, sans-serif;
   }
@@ -196,7 +196,7 @@
     gap: 4px 16px;
     align-items: center;
     padding: 14px 18px;
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     border: 1px solid var(--shell-border);
     border-radius: 6px;
   }
@@ -250,7 +250,7 @@
   .shell-home-key-input {
     flex: 1;
     padding: 8px 12px;
-    background: var(--shell-bg-elevated);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
     color: var(--shell-fg);
     border: 1px solid var(--shell-border);
     border-radius: 4px;

package/dist/theme.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Apply CSS token overrides to :root and persist to User zone.
+ *
+ * Keys are token names without the `--` prefix (e.g. `'shell-accent'`).
+ * Values are any valid CSS value string.
+ *
+ * Calling this replaces ALL previous overrides — tokens not present in
+ * the new map are removed from :root.
+ */
+export declare function setTokenOverrides(overrides: Record<string, string>): void;
+/**
+ * Remove all token overrides from :root and clear persisted state.
+ * The shell reverts to the default tokens defined in tokens.css.
+ */
+export declare function clearTokenOverrides(): void;
+/**
+ * Read the currently persisted token overrides.
+ * Returns an empty object if no overrides are stored.
+ */
+export declare function getTokenOverrides(): Record<string, string>;
+/**
+ * Apply persisted token overrides to :root. Called once during shell boot
+ * before any component mounts, so the themed colors are visible from the
+ * first frame.
+ *
+ * This is framework-internal — not part of the shard-facing API.
+ */
+export declare function hydrateTokenOverrides(): void;

package/dist/theme.js

@@ -0,0 +1,92 @@
+/*
+ * Token override API — allows external packages (like sh3-style) to
+ * dynamically change shell CSS tokens and persist the selection to
+ * the User zone.
+ *
+ * The shell reads persisted overrides at boot (see createShell.ts) so
+ * themes survive page reloads. This module provides the write path.
+ */
+const STORAGE_KEY = 'sh3:user:__shell__:theme';
+/** Keys currently set on :root by setTokenOverrides, tracked for clearTokenOverrides. */
+let appliedKeys = [];
+/**
+ * Apply CSS token overrides to :root and persist to User zone.
+ *
+ * Keys are token names without the `--` prefix (e.g. `'shell-accent'`).
+ * Values are any valid CSS value string.
+ *
+ * Calling this replaces ALL previous overrides — tokens not present in
+ * the new map are removed from :root.
+ */
+export function setTokenOverrides(overrides) {
+    // Remove previously applied keys that are not in the new set
+    const newKeys = Object.keys(overrides);
+    for (const key of appliedKeys) {
+        if (!newKeys.includes(key)) {
+            document.documentElement.style.removeProperty(`--${key}`);
+        }
+    }
+    // Apply new overrides
+    for (const [key, value] of Object.entries(overrides)) {
+        document.documentElement.style.setProperty(`--${key}`, value);
+    }
+    appliedKeys = newKeys;
+    // Persist
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(overrides));
+    }
+    catch (_a) {
+        // Storage full or unavailable — theme applies for this session only
+    }
+}
+/**
+ * Remove all token overrides from :root and clear persisted state.
+ * The shell reverts to the default tokens defined in tokens.css.
+ */
+export function clearTokenOverrides() {
+    for (const key of appliedKeys) {
+        document.documentElement.style.removeProperty(`--${key}`);
+    }
+    appliedKeys = [];
+    try {
+        localStorage.removeItem(STORAGE_KEY);
+    }
+    catch (_a) {
+        // Ignore
+    }
+}
+/**
+ * Read the currently persisted token overrides.
+ * Returns an empty object if no overrides are stored.
+ */
+export function getTokenOverrides() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw)
+            return {};
+        const parsed = JSON.parse(raw);
+        if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
+            return parsed;
+        }
+        return {};
+    }
+    catch (_a) {
+        return {};
+    }
+}
+/**
+ * Apply persisted token overrides to :root. Called once during shell boot
+ * before any component mounts, so the themed colors are visible from the
+ * first frame.
+ *
+ * This is framework-internal — not part of the shard-facing API.
+ */
+export function hydrateTokenOverrides() {
+    const overrides = getTokenOverrides();
+    if (Object.keys(overrides).length === 0)
+        return;
+    for (const [key, value] of Object.entries(overrides)) {
+        document.documentElement.style.setProperty(`--${key}`, value);
+    }
+    appliedKeys = Object.keys(overrides);
+}

package/dist/tokens.css

@@ -11,6 +11,12 @@
   --shell-bg:            #1a1b1e;
   --shell-bg-elevated:   #22232a;
   --shell-bg-sunken:     #141518;
+
+  /* Gradient layer — empty by default, overrides surface when set */
+  --shell-grad-bg:          ;
+  --shell-grad-bg-elevated: ;
+  --shell-grad-bg-sunken:   ;
+
   --shell-border:        #2e3038;
   --shell-border-strong: #3c3f4a;
 
@@ -66,7 +72,7 @@ body {
   padding: 0;
   height: 100%;
   overflow: hidden; /* SH3 is a shell, not a scrollable document */
-  background: var(--shell-bg);
+  background: var(--shell-grad-bg, var(--shell-bg));
   color: var(--shell-fg);
   font-family: var(--shell-font-ui);
   font-size: var(--shell-font-size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh3-core",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "files": [
     "dist"