@k2b/cloud 0.38.0 → 0.40.0

package/src/ssr/ShellRuntime.island.tsx

@@ -4,6 +4,7 @@ import {
   installAppWorkspaceController,
   installInputModeController,
   installPageTitleController,
+  keyboardPlatform,
   serializeAppWorkspaceLayoutState,
   useLocale,
 } from "@k2b/ui";
@@ -12,6 +13,7 @@ import { appWorkspaceCookieName, readAppWorkspaceLayoutCookie } from "../_intern
 import { registerContextAwareCommand } from "../browser/command-bridge";
 import { attachCommandShortcuts } from "../browser/command-shortcuts";
 import { navigationSearchItems } from "../browser/navigation-search";
+import { openPanel, type PanelRequest } from "../browser/panel";
 import { importOnDemand } from "../browser/reload";
 import { registerGlobalSearchHost } from "../browser/search-bridge";
 import { attachShellFocusControls, readShellFocus, SHELL_FOCUS_CHANGE_EVENT, toggleShellFocus } from "../browser/shell-focus";
@@ -32,6 +34,8 @@ import { shellShortcuts } from "./shell-shortcuts";
 import { syncTimezoneCookie } from "./timezone-cookie";
 
 export type ShellRuntimeProps = {
+  /** This page has an authorized panel slot. */
+  panel?: boolean;
   /** Layout pages outside focus mode: keep the current app's workspace layout in its cookie. */
   workspace?: { appId?: string };
   /** Layout pages: page titles, the way up (Alt+Up) and its per-tab memory. */
@@ -70,6 +74,61 @@ export default function ShellRuntime(props: ShellRuntimeProps) {
   onMount(() => syncTimezoneCookie(true));
   onMount(() => onCleanup(installInputModeController()));
 
+  const togglePanel = () => {
+    window.dispatchEvent(new CustomEvent<PanelRequest>("cloud.panel.request", { detail: { action: "toggle" } }));
+  };
+  if (props.panel) {
+    onMount(() => {
+      let stopped = false;
+      let dispose: (() => void) | undefined;
+      const load = async (request?: PanelRequest) => {
+        const panel = await importOnDemand(() => import("../browser/panel-slot"));
+        if (!panel || stopped) return;
+        dispose ??= panel.installPanelSlot();
+        if (request) panel.handlePanelRequest(request);
+      };
+      const request = (event: CustomEvent<PanelRequest>) => {
+        const detail = event.detail;
+        if (detail.action === "open") {
+          if (detail.accepted || !readShellData()?.panel?.providers.some((provider) => provider.id === detail.provider)) return;
+          detail.accepted = true;
+        }
+        void load(event.detail);
+      };
+      const key = (event: KeyboardEvent) => {
+        const apple = keyboardPlatform() === "apple";
+        if (
+          event.defaultPrevented ||
+          event.isComposing ||
+          event.repeat ||
+          event.altKey ||
+          event.shiftKey ||
+          event.key.toLowerCase() !== "j" ||
+          event.metaKey !== apple ||
+          event.ctrlKey !== !apple
+        )
+          return;
+        event.preventDefault();
+        togglePanel();
+      };
+      // The panel controller loads lazily; it reads this mark to recheck consent after a restore it did not see.
+      const restored = (event: PageTransitionEvent) => {
+        if (event.persisted) document.documentElement.setAttribute("data-cloud-page-restored", "");
+      };
+      window.addEventListener("pageshow", restored);
+      window.addEventListener("cloud.panel.request", request);
+      if (!props.commands) window.addEventListener("keydown", key);
+      if (document.querySelector('.cloud-app-canvas[data-panel="open"]')) void load();
+      onCleanup(() => {
+        stopped = true;
+        dispose?.();
+        window.removeEventListener("pageshow", restored);
+        window.removeEventListener("cloud.panel.request", request);
+        window.removeEventListener("keydown", key);
+      });
+    });
+  }
+
   if (props.workspace) {
     onMount(() => {
       const appId = props.workspace?.appId;
@@ -146,15 +205,20 @@ export default function ShellRuntime(props: ShellRuntimeProps) {
       ),
     );
     createEffect(() => {
-      for (const command of shellShortcuts(t())) {
+      for (const command of shellShortcuts(t(), { panel: props.panel })) {
         onCleanup(
           registerContextAwareCommand({
             ...command,
             action:
-              command.id === "cloud.search"
-                ? { search: {} }
-                : // Returning the load keeps the Command busy until the dialog is open; a second press opens no second dialog.
-                  () => importOnDemand(() => import("./LayoutHelp")).then((help) => help?.openLayoutHelpDialog()),
+              command.id === "cloud.panel"
+                ? togglePanel
+                : command.id === "cloud.search"
+                  ? { search: {} }
+                  : // Returning the load keeps the Command busy until the dialog is open; a second press opens no second dialog.
+                    () => {
+                      if (openPanel("core")) return;
+                      return importOnDemand(() => import("./LayoutHelp")).then((help) => help?.openLayoutHelpDialog());
+                    },
           }),
         );
       }

package/src/ssr/app-appearance.ts

@@ -1,4 +1,5 @@
 import type { AppAppearance } from "../contracts/app";
+import { appColorStyle } from "./app-color";
 import { resolveRuntimeRoute } from "./app-navigation";
 import { helpPageAppId } from "./layout-help-url";
 import type { RuntimeContext } from "./runtime";
@@ -15,11 +16,11 @@ export const appAppearanceStyle = (appearance: AppAppearance | undefined): strin
   const angle = Number.isFinite(appearance.background?.angle) ? Math.max(0, Math.min(360, appearance.background?.angle ?? 135)) : 135;
   const strength = clampStrength(appearance.background?.strength, 20);
   const darkStrength = Math.round(strength / 2);
-  return `--app-accent:${appearance.accent};--app-canvas-from:${from};--app-canvas-via:${via};--app-canvas-to:${to};--app-canvas-angle:${angle}deg;--app-canvas-strength:${strength}%;--app-canvas-dark-strength:${darkStrength}%`;
+  return `--app-accent:${appearance.accent};${appColorStyle(appearance.accent)};--app-canvas-from:${from};--app-canvas-via:${via};--app-canvas-to:${to};--app-canvas-angle:${angle}deg;--app-canvas-strength:${strength}%;--app-canvas-dark-strength:${darkStrength}%`;
 };
 
 export const appAccentStyle = (accent: string | undefined): string | undefined =>
-  isHexColor(accent) ? `--app-accent:${accent}` : undefined;
+  isHexColor(accent) ? `--app-accent:${accent};${appColorStyle(accent)}` : undefined;
 
 /** Core's full-page Help of an app belongs to that app. */
 export const resolveCurrentApp = (apps: RuntimeContext["apps"], pathname: string) => {

package/src/ssr/app-color.ts

@@ -0,0 +1,105 @@
+type HexColor = `#${string}`;
+
+const minimumContrast = 4.5;
+const fillShares = {
+  light: { selected: 0.07, selectedNav: 0.1 },
+  dark: { selected: 0.14, selectedNav: 0.17 },
+} as const;
+
+/**
+ * Opaque theme backgrounds checked for readable app ink; a test pins them to
+ * tokens.css and @k2b/ui. `sidebar` is the workspace sidebar's own background
+ * (`--k2b-surface` since the one-surface workspace); a test reads that
+ * declaration from @k2b/ui. `sidebarHover` is its row hover over it; `subtle`,
+ * `muted`, `hover`, and `platformSelected` are the `--ui-surface-subtle`,
+ * `--ui-surface-muted`, `--ui-hover`, and blue `--ui-selected` fills app ink
+ * also sits on.
+ */
+export const appColorSurfaces = {
+  light: {
+    canvas: "#fafafa",
+    surface: "#ffffff",
+    sidebar: "#ffffff",
+    sidebarHover: "#f3f3f3",
+    subtle: "#f8f8f8",
+    muted: "#f3f4f3",
+    raised: "#ffffff",
+    hover: "#f0f1f0",
+    platformSelected: "#f0f6ff",
+  },
+  dark: {
+    canvas: "#090d12",
+    surface: "#11151b",
+    sidebar: "#11151b",
+    sidebarHover: "#1d2026",
+    subtle: "#161a20",
+    muted: "#20242a",
+    raised: "#181d24",
+    hover: "#252c35",
+    platformSelected: "#192636",
+  },
+} as const;
+
+const channels = (hex: HexColor) =>
+  [Number.parseInt(hex.slice(1, 3), 16), Number.parseInt(hex.slice(3, 5), 16), Number.parseInt(hex.slice(5, 7), 16)] as const;
+
+/** WCAG 2.x relative luminance from a six-digit sRGB hex color. */
+export const relativeLuminance = (hex: HexColor): number => {
+  const linearize = (value: number) => {
+    const c = value / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  const [r, g, b] = channels(hex);
+  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
+};
+
+/** WCAG 2.x contrast ratio between two opaque hex colors. */
+export const contrastRatio = (a: HexColor, b: HexColor): number => {
+  const first = relativeLuminance(a);
+  const second = relativeLuminance(b);
+  return (Math.max(first, second) + 0.05) / (Math.min(first, second) + 0.05);
+};
+
+/** Rounded sRGB channel mix, with share indicating the fraction of a. */
+export const mixHex = (a: HexColor, b: HexColor, share: number): HexColor => {
+  const second = channels(b);
+  const fraction = Math.max(0, Math.min(1, share));
+  return `#${channels(a)
+    .map((value, index) =>
+      Math.round(value * fraction + second[index]! * (1 - fraction))
+        .toString(16)
+        .padStart(2, "0"),
+    )
+    .join("")}`;
+};
+
+/** Derive selection fills, the shell's open-app fill, and the nearest AA-readable app ink in each theme. */
+export const appColors = (accent: HexColor) => {
+  const forTheme = (theme: keyof typeof appColorSurfaces) => {
+    const surfaces = appColorSurfaces[theme];
+    const selected = mixHex(accent, surfaces.surface, fillShares[theme].selected);
+    const selectedNav = mixHex(accent, surfaces.sidebar, fillShares[theme].selectedNav);
+    // Cloud's shell marks the open app on its app-colored bar (global.css):
+    // with the surface in light, and in dark with the navigation share over the
+    // muted surface, which stays apart from the dark bar.
+    const shellSelected = theme === "light" ? surfaces.surface : mixHex(accent, surfaces.muted, fillShares.dark.selectedNav);
+    const backgrounds = [...Object.values(surfaces), selected, selectedNav, shellSelected];
+    const toward = theme === "light" ? "#000000" : "#ffffff";
+    let ink: HexColor = toward;
+    for (let i = 100; i >= 0; i--) {
+      const candidate = mixHex(accent, toward, i / 100);
+      if (backgrounds.every((background) => contrastRatio(candidate, background) >= minimumContrast)) {
+        ink = candidate;
+        break;
+      }
+    }
+    return { ink, selected, selectedNav, shellSelected };
+  };
+  return { light: forTheme("light"), dark: forTheme("dark") };
+};
+
+/** Plain hex declarations for server-rendered app appearance and accent scopes. */
+export const appColorStyle = (accent: HexColor): string => {
+  const { light, dark } = appColors(accent);
+  return `--app-ink-light:${light.ink};--app-ink-dark:${dark.ink};--app-selected-light:${light.selected};--app-selected-dark:${dark.selected};--app-selected-nav-light:${light.selectedNav};--app-selected-nav-dark:${dark.selectedNav}`;
+};

package/src/ssr/app-launchpad.tsx

@@ -66,7 +66,7 @@ export function AppLaunchpadProvider(props: AppLaunchpadContext) {
   return <span class="hidden" data-cloud-app-launchpad-provider />;
 }
 
-export function AppLaunchpadButton(props: AppLaunchpadContext & { variant: "rail" | "header" | "menu"; label?: string }) {
+export function AppLaunchpadButton(props: AppLaunchpadContext & { variant: "rail" | "header" | "title" | "menu"; label?: string }) {
   const locale = useLocale();
   const t = () => platformMessages.resolve([locale()]).t;
   const action = createBusyAction();
@@ -98,6 +98,23 @@ export function AppLaunchpadButton(props: AppLaunchpadContext & { variant: "rail
     );
   }
 
+  // The page title as the app menu's trigger on phones; global.css shows it only when the page has app navigation.
+  if (props.variant === "title") {
+    return (
+      <button
+        type="button"
+        class="layout-header-title-menu"
+        aria-haspopup="dialog"
+        onClick={open}
+        aria-busy={action.busy() ? "true" : undefined}
+      >
+        <span class="truncate font-semibold">{props.label}</span>
+        <span class="sr-only">{`, ${t().appMenu}`}</span>
+        <i class={action.busy() ? "ti ti-loader-2 animate-spin" : "ti ti-chevron-down"} aria-hidden="true" />
+      </button>
+    );
+  }
+
   if (props.variant === "header") {
     return (
       <IconButton label={props.label ?? t().openApps} onClick={open} aria-busy={action.busy() ? "true" : undefined}>

package/src/ssr/app-navigation.ts

@@ -1,5 +1,7 @@
+import { isOwnAppPath } from "../_internal/app-path";
 import { hasAnyAppRole } from "../_internal/app-roles";
 import type { RuntimeAppMeta } from "../contracts/app";
+import { panelProviderNeedsConsent } from "../contracts/panel-context-plain";
 import { isPwaPartId } from "../contracts/pwa-paths";
 import type { User } from "../contracts/shared";
 import { resolveAppPresentation } from "../shared/app-presentation";
@@ -52,3 +54,29 @@ export const visiblePwaParts = (apps: readonly RuntimeAppMeta[], user: User | un
     .map((app) => resolveAppPresentation(app, locale))
     .sort((a, b) => a.name.localeCompare(b.name, locale) || a.id.localeCompare(b.id));
 };
+
+export type PanelProvider = { id: string; label: string; icon: string; href: string; appName: string; consent: boolean };
+
+/** Authorized presentation only: the panel route still authorizes every request. */
+export const visiblePanelProviders = (apps: readonly RuntimeAppMeta[], user: User | undefined, locale: string): PanelProvider[] => {
+  if (!user) return [];
+  return apps
+    .flatMap((app) => {
+      if (!app.panel || !isOwnAppPath(app.panel.href, app.routes) || !hasAnyAppRole(user, app.panel.requiresRoles)) return [];
+      const presentation = resolveAppPresentation(app, locale);
+      const panel = presentation.panel;
+      return panel
+        ? [
+            {
+              id: app.id,
+              label: panel.label,
+              icon: panel.icon,
+              href: panel.href,
+              appName: presentation.name,
+              consent: panelProviderNeedsConsent(app.id),
+            },
+          ]
+        : [];
+    })
+    .sort((a, b) => a.label.localeCompare(b.label, locale) || a.id.localeCompare(b.id));
+};