@rool-dev/app 0.3.0

package/dist/dev/Sidebar.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+  import type { DevHostController } from './DevHostController.js';
+  import type { RoolSpaceInfo } from '@rool-dev/sdk';
+  import type { AppManifest, Environment } from '../manifest.js';
+  import { ENV_URLS } from '../manifest.js';
+
+  interface Props {
+    controller: DevHostController;
+    // Reactive copies from the controller (Svelte $state)
+    manifest: AppManifest | null;
+    manifestError: string | null;
+    spaces: RoolSpaceInfo[];
+    currentSpaceId: string | null;
+    env: Environment;
+    statusText: string;
+    statusState: 'ok' | 'loading' | 'off';
+    sidebarCollapsed: boolean;
+    dropdownOpen: boolean;
+  }
+
+  let {
+    controller,
+    manifest,
+    manifestError,
+    spaces,
+    currentSpaceId,
+    env,
+    statusText,
+    statusState,
+    sidebarCollapsed,
+    dropdownOpen = $bindable(),
+  }: Props = $props();
+
+  let selectedSpace = $derived(spaces.find((s) => s.id === currentSpaceId));
+</script>
+
+{#if sidebarCollapsed}
+  <!-- Collapsed sidebar -->
+  <div class="w-10 shrink-0 bg-white border-r border-slate-200 flex flex-col items-center py-3">
+    <button
+      class="p-1.5 text-slate-400 hover:text-slate-600 transition-colors"
+      onclick={() => controller.toggleSidebar()}
+      title="Expand sidebar"
+    >
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
+    </button>
+    <div class="mt-3">
+      <span
+        class="block w-2 h-2 rounded-full {statusState === 'ok' ? 'bg-green-500' : statusState === 'loading' ? 'bg-amber-500' : 'bg-slate-400'}"
+        title={statusText}
+      ></span>
+    </div>
+  </div>
+{:else}
+  <!-- Expanded sidebar -->
+  <div class="w-[280px] shrink-0 bg-white border-r border-slate-200 flex flex-col overflow-y-auto">
+    <!-- App identity (hero) -->
+    <div class="px-4 pt-4 pb-3 border-b border-slate-100">
+      <div class="flex items-start justify-between mb-1">
+        {#if manifest}
+          <div class="min-w-0">
+            <div class="font-semibold text-base text-slate-800 leading-tight">{manifest.name}</div>
+            <div class="text-[11px] text-slate-400 font-mono mt-0.5">{manifest.id}</div>
+          </div>
+        {:else}
+          <div class="min-w-0">
+            <div class="font-semibold text-base text-slate-800 leading-tight">App</div>
+          </div>
+        {/if}
+        <button
+          class="p-1 -mr-1 text-slate-400 hover:text-slate-600 transition-colors shrink-0"
+          onclick={() => controller.toggleSidebar()}
+          title="Collapse sidebar"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+        </button>
+      </div>
+      {#if manifest?.description}
+        <div class="text-xs text-slate-500 leading-snug mt-1">{manifest.description}</div>
+      {/if}
+      {#if manifestError && !manifest}
+        <div class="text-xs text-red-500 mt-1">{manifestError}</div>
+      {/if}
+    </div>
+
+    <!-- Collections -->
+    {#if manifest?.collections}
+      <div class="px-4 py-3 border-b border-slate-100">
+        <div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Collections</div>
+        <div class="space-y-2.5">
+          {#if manifest.collections.write && manifest.collections.write !== '*'}
+            <div>
+              <div class="text-[10px] font-semibold text-emerald-600 mb-1">Defines</div>
+              <div class="space-y-1">
+                {#each Object.entries(manifest.collections.write) as [name, fields]}
+                  <div class="flex items-baseline gap-1.5 pl-2 border-l-2 border-emerald-200">
+                    <span class="text-[11px] font-medium text-slate-700 shrink-0">{name}</span>
+                    <span class="text-[10px] text-slate-400 truncate">{fields.map(f => f.name).join(', ')}</span>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {/if}
+          {#if manifest.collections.read && manifest.collections.read !== '*'}
+            <div>
+              <div class="text-[10px] font-semibold text-blue-600 mb-1">Defines (read-only)</div>
+              <div class="space-y-1">
+                {#each Object.entries(manifest.collections.read) as [name, fields]}
+                  <div class="flex items-baseline gap-1.5 pl-2 border-l-2 border-blue-200">
+                    <span class="text-[11px] font-medium text-slate-700 shrink-0">{name}</span>
+                    <span class="text-[10px] text-slate-400 truncate">{fields.map(f => f.name).join(', ')}</span>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {/if}
+          {#if manifest.collections.write === '*' || manifest.collections.read === '*'}
+            <div>
+              <div class="text-[10px] font-semibold text-slate-500 mb-1">Requests access</div>
+              <div class="space-y-0.5 pl-2">
+                {#if manifest.collections.write === '*'}
+                  <div class="text-[11px] text-slate-600">Read & write all collections</div>
+                {:else if manifest.collections.read === '*'}
+                  <div class="text-[11px] text-slate-600">Read all collections</div>
+                {/if}
+              </div>
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+
+    <!-- System Instruction -->
+    {#if manifest?.systemInstruction}
+      <div class="px-4 py-3 border-b border-slate-100">
+        <div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">System Instruction</div>
+        <div class="text-xs text-slate-600 bg-slate-50 border border-slate-200 rounded-md px-2.5 py-2 whitespace-pre-wrap leading-snug max-h-24 overflow-y-auto">{manifest.systemInstruction}</div>
+      </div>
+    {/if}
+
+    <!-- Manifest warning -->
+    {#if manifestError && manifest}
+      <div class="px-3 py-2 mx-3 mt-2 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-md">
+        {manifestError}
+      </div>
+    {/if}
+
+    <!-- Environment -->
+    <div class="px-4 py-3 border-b border-slate-100">
+      <div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Environment</div>
+      <div class="flex rounded-md border border-slate-200 overflow-hidden">
+        <button
+          class="flex-1 py-1.5 text-[11px] font-medium transition-colors {env === 'dev' ? 'bg-indigo-50 text-indigo-600 border-r border-slate-200' : 'text-slate-500 hover:bg-slate-50 border-r border-slate-200'}"
+          onclick={() => controller.switchEnv('dev')}
+        >
+          Dev
+        </button>
+        <button
+          class="flex-1 py-1.5 text-[11px] font-medium transition-colors {env === 'prod' ? 'bg-indigo-50 text-indigo-600' : 'text-slate-500 hover:bg-slate-50'}"
+          onclick={() => controller.switchEnv('prod')}
+        >
+          Prod
+        </button>
+      </div>
+      <div class="text-[10px] text-slate-400 mt-1 font-mono">{ENV_URLS[env].label}</div>
+    </div>
+
+    <!-- Space picker -->
+    <div class="px-4 py-3 border-b border-slate-100">
+      <div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Space</div>
+      <div class="relative" data-dropdown>
+        <button
+          class="w-full py-1.5 pl-2.5 pr-8 text-[13px] border border-slate-200 rounded-md bg-white text-slate-700 text-left truncate cursor-pointer outline-none hover:border-slate-300 {dropdownOpen ? 'border-indigo-500 ring-2 ring-indigo-500/12' : 'focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/12'}"
+          type="button"
+          onclick={(e) => { e.stopPropagation(); dropdownOpen = !dropdownOpen; }}
+        >
+          {selectedSpace?.name ?? 'Select a space...'}
+          <svg class="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
+        </button>
+        {#if dropdownOpen}
+          <div class="absolute top-full mt-1 left-0 min-w-full max-w-[360px] max-h-60 overflow-y-auto bg-white border border-slate-200 rounded-md shadow-lg z-50 py-1">
+            {#each spaces as space}
+              <button
+                class="block w-full px-2.5 py-1.5 text-[13px] text-left truncate border-none cursor-pointer hover:bg-slate-100 {space.id === currentSpaceId ? 'bg-indigo-50 text-indigo-600 font-medium' : 'text-slate-700 bg-transparent'}"
+                type="button"
+                onclick={() => { dropdownOpen = false; controller.selectSpace(space.id); }}
+              >
+                {space.name}
+              </button>
+            {:else}
+              <div class="px-2.5 py-1.5 text-[13px] text-slate-400">No spaces available</div>
+            {/each}
+          </div>
+        {/if}
+      </div>
+      <!-- Connection status -->
+      <div class="text-[11px] text-slate-400 leading-normal mt-1.5">
+        <span
+          class="inline-block w-1.5 h-1.5 rounded-full mr-1 align-middle {statusState === 'ok' ? 'bg-green-500' : statusState === 'loading' ? 'bg-amber-500' : 'bg-slate-400'}"
+        ></span>
+        {statusText}
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="px-4 py-3 mt-auto flex items-center justify-between">
+      <a
+        href="https://docs.rool.dev/app"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-[11px] text-slate-400 hover:text-indigo-500 transition-colors"
+      >
+        Documentation
+      </a>
+      <button
+        class="text-[11px] text-slate-400 hover:text-red-500 transition-colors"
+        onclick={() => controller.logout()}
+      >
+        Sign out
+      </button>
+    </div>
+  </div>
+{/if}

package/dist/dev/Sidebar.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { DevHostController } from './DevHostController.js';
+import type { RoolSpaceInfo } from '@rool-dev/sdk';
+import type { AppManifest, Environment } from '../manifest.js';
+interface Props {
+    controller: DevHostController;
+    manifest: AppManifest | null;
+    manifestError: string | null;
+    spaces: RoolSpaceInfo[];
+    currentSpaceId: string | null;
+    env: Environment;
+    statusText: string;
+    statusState: 'ok' | 'loading' | 'off';
+    sidebarCollapsed: boolean;
+    dropdownOpen: boolean;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "dropdownOpen">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;
+//# sourceMappingURL=Sidebar.svelte.d.ts.map

package/dist/dev/Sidebar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../src/dev/Sidebar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7D,UAAU,KAAK;IACb,UAAU,EAAE,iBAAiB,CAAC;IAE9B,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,GAAG,EAAE,WAAW,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,IAAI,GAAG,SAAS,GAAG,KAAK,CAAC;IACtC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;CACvB;AAmLH,QAAA,MAAM,OAAO,uDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/dev/TabBar.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { AppTab } from './DevHostController.js';
+  import type { PublishedAppInfo } from '@rool-dev/sdk';
+
+  interface Props {
+    tabs: AppTab[];
+    activeTab: string;
+    uninstalledApps: PublishedAppInfo[];
+    onSelectTab: (id: string) => void;
+    onRemoveApp: (id: string) => void;
+    onInstallApp: (appId: string) => void;
+  }
+
+  let { tabs, activeTab, uninstalledApps, onSelectTab, onRemoveApp, onInstallApp }: Props = $props();
+
+  let addMenuOpen = $state(false);
+</script>
+
+<div class="flex items-end border-b border-slate-200 bg-slate-50 px-2 pt-1 shrink-0">
+  {#each tabs as tab}
+    <div
+      class="relative px-3 py-1.5 text-[12px] font-medium rounded-t-md transition-colors mr-0.5 flex items-center gap-1.5 cursor-pointer select-none
+        {activeTab === tab.id
+          ? 'bg-white text-slate-800 border border-slate-200 border-b-white -mb-px z-10'
+          : 'text-slate-500 hover:text-slate-700 hover:bg-slate-100 border border-transparent'}"
+      role="tab"
+      tabindex="0"
+      aria-selected={activeTab === tab.id}
+      onclick={() => onSelectTab(tab.id)}
+      onkeydown={(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelectTab(tab.id); } }}
+    >
+      {#if tab.isLocal}
+        <span class="inline-block w-1.5 h-1.5 rounded-full bg-emerald-500 shrink-0" title="Local dev"></span>
+      {/if}
+      {tab.name}
+      {#if !tab.isLocal}
+        <button
+          class="ml-1 text-slate-400 hover:text-red-500 transition-colors p-0 border-none bg-transparent leading-none"
+          type="button"
+          title="Uninstall app"
+          onclick={(e: MouseEvent) => { e.stopPropagation(); onRemoveApp(tab.id); }}
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
+        </button>
+      {/if}
+    </div>
+  {/each}
+
+  <!-- Add app button -->
+  {#if uninstalledApps.length > 0}
+    <div class="relative ml-1 mb-0.5" data-add-menu>
+      <button
+        class="px-2 py-1 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded transition-colors border-none bg-transparent"
+        type="button"
+        title="Install app"
+        onclick={(e: MouseEvent) => { e.stopPropagation(); addMenuOpen = !addMenuOpen; }}
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
+      </button>
+      {#if addMenuOpen}
+        <div class="absolute top-full mt-1 left-0 min-w-[200px] max-h-60 overflow-y-auto bg-white border border-slate-200 rounded-md shadow-lg z-50 py-1">
+          <div class="px-2.5 py-1 text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Install App</div>
+          {#each uninstalledApps as app}
+            <button
+              class="block w-full px-2.5 py-1.5 text-[13px] text-left truncate border-none cursor-pointer hover:bg-slate-100 text-slate-700 bg-transparent"
+              type="button"
+              onclick={() => { addMenuOpen = false; onInstallApp(app.appId); }}
+            >
+              <span class="font-medium">{app.name}</span>
+              <span class="text-[10px] text-slate-400 font-mono ml-1.5">{app.appId}</span>
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<svelte:document onclick={(e: MouseEvent) => {
+  if (addMenuOpen && !(e.target as Element)?.closest('[data-add-menu]')) {
+    addMenuOpen = false;
+  }
+}} />

package/dist/dev/TabBar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { AppTab } from './DevHostController.js';
+import type { PublishedAppInfo } from '@rool-dev/sdk';
+interface Props {
+    tabs: AppTab[];
+    activeTab: string;
+    uninstalledApps: PublishedAppInfo[];
+    onSelectTab: (id: string) => void;
+    onRemoveApp: (id: string) => void;
+    onInstallApp: (appId: string) => void;
+}
+declare const TabBar: import("svelte").Component<Props, {}, "">;
+type TabBar = ReturnType<typeof TabBar>;
+export default TabBar;
+//# sourceMappingURL=TabBar.svelte.d.ts.map

package/dist/dev/TabBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.svelte.d.ts","sourceRoot":"","sources":["../../src/dev/TabBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGpD,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,gBAAgB,EAAE,CAAC;IACpC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AA0DH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/dev/app.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/dist/dev/host-shell.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Dev host shell entry point.
+ *
+ * Mounts the HostShell Svelte component into #rool-host.
+ * Built into a single bundle at publish time and served by the CLI dev server.
+ */
+export {};
+//# sourceMappingURL=host-shell.d.ts.map

package/dist/dev/host-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"host-shell.d.ts","sourceRoot":"","sources":["../../src/dev/host-shell.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}