@k2b/cloud 0.36.0 → 0.38.0

package/src/ssr/shell-focus.browser-harness.tsx

@@ -0,0 +1,83 @@
+import { AppWorkspace } from "@k2b/ui";
+import { Hono } from "hono";
+import { Dynamic } from "solid-js/web";
+import { defineApp } from "../_internal/define-app";
+import { person } from "../_internal/define-app.test-fixture";
+import type { User } from "../contracts/shared";
+import Layout from "./Layout";
+import type { RuntimeContext } from "./runtime";
+
+const probe = defineApp({
+  id: "shell-focus-probe",
+  name: "Focus probe",
+  icon: "ti ti-layout",
+  description: "Shell focus browser fixture",
+  baseUrl: "http://shell-focus-probe:3000",
+  routes: ["/app/focus"],
+});
+type Environment = { Variables: { runtime: RuntimeContext; user: User } };
+export const server = new Hono<Environment>()
+  .use(async (c, next) => {
+    c.set("runtime", {
+      apps: [
+        {
+          id: "shell-focus-probe",
+          name: "Focus probe",
+          description: "Shell focus browser fixture",
+          icon: "ti ti-layout",
+          routes: ["/app/focus"],
+          nav: { href: "/app/focus", section: "primary" },
+        },
+      ],
+    });
+    c.set("user", person);
+    await next();
+  })
+  .get(
+    "/app/focus",
+    ...probe.ssr<Environment>((c) => () => (
+      <Layout c={c} fullWidth fullPage title={[{ title: "Focus probe", href: "/app/focus" }, { title: "Workspace" }]}>
+        <AppWorkspace mobileSurface="flush" class="min-h-0 flex-1">
+          <AppWorkspace.Sidebar id="focus-navigation" label="Navigation">
+            <AppWorkspace.SidebarDesktop>
+              <AppWorkspace.SidebarItem href="/app/focus" active>
+                Workspace
+              </AppWorkspace.SidebarItem>
+            </AppWorkspace.SidebarDesktop>
+          </AppWorkspace.Sidebar>
+          <AppWorkspace.Content>
+            <AppWorkspace.Main>
+              <textarea aria-label="Editor" />
+            </AppWorkspace.Main>
+          </AppWorkspace.Content>
+        </AppWorkspace>
+      </Layout>
+    )),
+  )
+  // Grids wraps Main in an island inside Content and gives it a navigation pane.
+  .get(
+    "/app/focus/panes",
+    ...probe.ssr<Environment>((c) => () => (
+      <Layout c={c} fullWidth fullPage title={[{ title: "Focus probe", href: "/app/focus" }, { title: "Pages" }]}>
+        <AppWorkspace mobileSurface="flush" class="min-h-0 flex-1">
+          <AppWorkspace.Sidebar id="focus-navigation" label="Navigation">
+            <AppWorkspace.SidebarDesktop>
+              <AppWorkspace.SidebarItem href="/app/focus/panes" active>
+                Pages
+              </AppWorkspace.SidebarItem>
+            </AppWorkspace.SidebarDesktop>
+          </AppWorkspace.Sidebar>
+          <AppWorkspace.Content>
+            <Dynamic component="solid-island">
+              <AppWorkspace.Main mobilePane="main" scroll={false}>
+                <AppWorkspace.MainPane id="focus-pages" label="Pages" surface="navigation" defaultSize={280}>
+                  Page list
+                </AppWorkspace.MainPane>
+                <div>Page</div>
+              </AppWorkspace.Main>
+            </Dynamic>
+          </AppWorkspace.Content>
+        </AppWorkspace>
+      </Layout>
+    )),
+  );

package/src/ssr/shell-shortcuts.ts

@@ -0,0 +1,8 @@
+import type { platformMessages } from "./platform-messages";
+
+export const SHELL_SHORTCUT_ORDER = ["cloud.search", "cloud.help"] as const;
+/** The shell's always-present shortcuts, without their actions; ShellRuntime adds the actions, Help renders them before the browser reports commands. */
+export const shellShortcuts = (t: ReturnType<typeof platformMessages.resolve>["t"]) => [
+  { id: "cloud.search", title: t.openGlobalSearch, description: t.globalSearchDescription, icon: "ti ti-search", shortcut: "mod+k" },
+  { id: "cloud.help", title: t.openShortcutHelp, description: t.shortcutHelpDescription, icon: "ti ti-help-circle", shortcut: "shift+/" },
+];