@k2b/cloud 0.31.0 → 0.33.0

package/src/ssr/shell-data.tsx

@@ -0,0 +1,48 @@
+import { createContext, type JSX, useContext } from "solid-js";
+import type { AppSearchLink } from "../contracts/app";
+import type { RailSnapshot } from "../contracts/rail-preferences";
+import type { CloudThemePreference } from "../shared/theme";
+import type { AppLaunchpadLegalLink } from "./app-launchpad";
+import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
+import type { RailApp } from "./rail-navigation";
+
+export type ShellData = {
+  /** The authorized navigation catalog, sorted for the request locale: the rail, the app grid and the phone menu show it. */
+  apps: RailApp[];
+  /** Signed-in pages: the person's rail preferences. */
+  rail?: RailSnapshot;
+  legalLinks: AppLaunchpadLegalLink[];
+  /** Signed-in pages: the person, for the profile menu and the phone menu's profile actions. */
+  profile?: { name: string; avatarSrc?: string; appHref?: string };
+  theme: CloudThemePreference;
+  /** The current app's accent, for the Help dialog and the phone menu, which open outside the app canvas. */
+  accent?: string;
+  /** The search destinations of each app in `apps`, by app id in registry order; the search host expands them into rows. */
+  searchLinks: Record<string, readonly AppSearchLink[]>;
+  searchHelpApps: GlobalSearchHelpApp[];
+};
+
+const ShellDataContext = createContext<() => ShellData>();
+
+export function ShellDataProvider(props: { data: ShellData; children: JSX.Element }) {
+  return (
+    <ShellDataContext.Provider value={() => props.data}>
+      <script id="cloud-shell-data" type="application/json" innerHTML={JSON.stringify(props.data).replace(/</g, "\\u003c")} />
+      {props.children}
+    </ShellDataContext.Provider>
+  );
+}
+
+export function readShellData(): ShellData | undefined {
+  if (typeof document === "undefined") return undefined;
+  const text = document.getElementById("cloud-shell-data")?.textContent;
+  if (!text) return undefined;
+  // Framework-generated, escaped SSR data; never loaded from localStorage. The server validates the rail snapshot when
+  // it reads it, so the shell does not load the schemas on every page.
+  const data: ShellData = JSON.parse(text);
+  return data;
+}
+
+export function useShellData(): ShellData | undefined {
+  return useContext(ShellDataContext)?.() ?? readShellData();
+}

package/src/ssr/timezone-cookie.ts

@@ -0,0 +1,22 @@
+import { cookies } from "@k2b/stdlib/browser";
+import { TIMEZONE_COOKIE } from "../shared/time";
+
+/**
+ * Stores the browser's timezone for server-rendered times. With `reload`, a
+ * changed timezone reloads the page once, so it shows times in that zone.
+ */
+export const syncTimezoneCookie = (reload: boolean) => {
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const current = cookies.readCookie(TIMEZONE_COOKIE);
+  if (!timeZone || current === timeZone) return;
+  cookies.writeCookie(TIMEZONE_COOKIE, timeZone);
+  if (!reload) return;
+  try {
+    if (sessionStorage.getItem("cloud.timezone.reload") !== timeZone) {
+      sessionStorage.setItem("cloud.timezone.reload", timeZone);
+      window.location.reload();
+    }
+  } catch {
+    // Cookie persistence still succeeds; the next navigation will render with the browser timezone.
+  }
+};

package/src/ssr/workspace-navigation.ts

@@ -1,4 +1,4 @@
-import { createNavigation, type NavigationController, type NavigationItem } from "@k2b/ui";
+import { type AppWorkspaceSidebarSwitcherProps, createNavigation, type NavigationController, type NavigationItem } from "@k2b/ui";
 import { createEffect, onCleanup, onMount } from "solid-js";
 
 export type WorkspaceNavigationState = { navigation: NavigationController; label: string; owner: Element };
@@ -44,6 +44,28 @@ function validItems(value: unknown): value is NavigationItem[] {
   );
 }
 
+function readSwitcher(value: unknown): AppWorkspaceSidebarSwitcherProps | undefined {
+  if (
+    !value ||
+    typeof value !== "object" ||
+    !("currentId" in value) ||
+    typeof value.currentId !== "string" ||
+    !("label" in value) ||
+    typeof value.label !== "string" ||
+    !("icon" in value) ||
+    typeof value.icon !== "string" ||
+    !("switchLabel" in value) ||
+    typeof value.switchLabel !== "string"
+  )
+    return;
+  const description = "description" in value ? value.description : undefined;
+  const color = "color" in value ? value.color : undefined;
+  if (description !== undefined && typeof description !== "string") return;
+  if (color !== undefined && typeof color !== "string") return;
+  // The snapshot carries only the head; options and actions wait for the owning island.
+  return { currentId: value.currentId, label: value.label, icon: value.icon, switchLabel: value.switchLabel, description, color };
+}
+
 export function readWorkspaceNavigation(): WorkspaceNavigationState | undefined {
   if (typeof window === "undefined") return;
   const current = window.__cloudWorkspaceNavigation;
@@ -67,10 +89,11 @@ export function readWorkspaceNavigation(): WorkspaceNavigationState | undefined
         ...(item.inlineActions ? { inlineActions: item.inlineActions.map((action) => ({ ...action, disabled: true })) } : {}),
       }));
     const items = links(value.items);
+    const switcher = "switcher" in value ? readSwitcher(value.switcher) : undefined;
     return {
       owner,
       label: "label" in value && typeof value.label === "string" ? value.label : "",
-      navigation: createNavigation({ items: () => items }),
+      navigation: createNavigation({ items: () => items, ...(switcher ? { switcher: () => switcher } : {}) }),
     };
   } catch {
     return;

package/src/styles/approvals.css

@@ -0,0 +1,390 @@
+/* Pending Action approvals (`@k2b/cloud/approvals/ui`). A flat list: rows are set apart by space, not by lines or
+   boxes. A decided row keeps its content and height and turns its decision into a receipt in the same slot. */
+.k2b-ui .cloud-approvals {
+  display: grid;
+  min-width: 0;
+  gap: 1rem;
+}
+
+.k2b-ui .cloud-approvals__toolbar {
+  display: flex;
+  min-height: 1.75rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .cloud-approvals__list {
+  display: grid;
+  min-width: 0;
+  gap: 2rem;
+}
+
+.k2b-ui .cloud-approvals__group {
+  display: grid;
+  min-width: 0;
+  gap: 1rem;
+}
+
+.k2b-ui .cloud-approvals__group + .cloud-approvals__group {
+  margin-top: 1rem;
+}
+
+.k2b-ui .cloud-approvals__group-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  color: var(--k2b-text);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.k2b-ui .cloud-approvals__more {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem 0.75rem;
+}
+
+.k2b-ui .cloud-approvals__more-error {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  color: var(--k2b-danger-text);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .cloud-approvals__elsewhere {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem 1rem;
+  margin: 0.5rem 0 0;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .cloud-approvals__elsewhere a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--k2b-link-accent);
+  font-weight: 500;
+}
+
+.k2b-ui .cloud-approval {
+  display: grid;
+  min-width: 0;
+  gap: 0.875rem;
+  grid-template-columns: 2rem minmax(0, 1fr);
+}
+
+.k2b-ui .cloud-approval__icon {
+  display: grid;
+  width: 2rem;
+  height: 2rem;
+  place-items: center;
+  border-radius: var(--k2b-radius-control);
+  color: var(--k2b-text-secondary);
+  background: var(--k2b-surface-muted);
+  font-size: 1rem;
+}
+
+/* Only an approval is a success; a rejection or a decision that did not apply keeps the neutral icon tile. */
+.k2b-ui .cloud-approval[data-decided="approved"] .cloud-approval__icon {
+  color: var(--k2b-success-text);
+  background: var(--k2b-success-surface);
+}
+
+.k2b-ui .cloud-approval__main {
+  display: grid;
+  min-width: 0;
+  gap: 0.75rem;
+  container-type: inline-size;
+}
+
+.k2b-ui .cloud-approval__content {
+  display: grid;
+  min-width: 0;
+  gap: 0.5rem;
+  transition: opacity 150ms ease-out;
+}
+
+.k2b-ui .cloud-approval[data-decided] .cloud-approval__content {
+  opacity: 0.55;
+}
+
+.k2b-ui .cloud-approval__title,
+.k2b-ui .cloud-approval__sheet-title {
+  margin: 0;
+  color: var(--k2b-text);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .cloud-approval__sheet-title {
+  font-size: 1.0625rem;
+}
+
+.k2b-ui .cloud-approval__origin {
+  margin: -0.25rem 0 0;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .cloud-approval__origin a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
+  text-underline-offset: 0.15em;
+}
+
+.k2b-ui .cloud-approval__origin a:hover {
+  color: var(--k2b-text);
+}
+
+.k2b-ui .cloud-approval__text {
+  margin: 0;
+  color: var(--k2b-text-secondary);
+  font-size: 0.8125rem;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .cloud-approval__fields {
+  display: grid;
+  margin: 0;
+  gap: 0.25rem 1rem;
+  grid-template-columns: max-content minmax(0, 1fr);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .cloud-approval__fields dt,
+.k2b-ui .cloud-approval__label {
+  margin: 0;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.k2b-ui .cloud-approval__fields dd {
+  min-width: 0;
+  margin: 0;
+  color: var(--k2b-text);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .cloud-approval__block {
+  display: grid;
+  min-width: 0;
+  gap: 0.25rem;
+}
+
+/* Long content sits inset, so it reads as quoted from the app without a frame or a rule. */
+.k2b-ui .cloud-approval__quote,
+.k2b-ui .cloud-approval__markdown {
+  margin: 0;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--k2b-radius-control);
+  color: var(--k2b-text-secondary);
+  background: var(--k2b-surface-muted);
+  font-size: 0.75rem;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* The inner text clamps, so the quote's padding never shows a cut line. */
+.k2b-ui .cloud-approval__quote[data-clamp] > span {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.k2b-ui .cloud-approval__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-left: -0.625rem;
+}
+
+.k2b-ui .cloud-approval__sheet {
+  display: grid;
+  min-width: 0;
+  gap: 1rem;
+}
+
+.k2b-ui .cloud-approval__sheet-foot {
+  width: 100%;
+  container-type: inline-size;
+}
+
+.k2b-ui .cloud-approval__callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin: 0;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .cloud-approval__callout i {
+  margin-top: 0.125rem;
+}
+
+/* The foot keeps its height in every state: the note is one line, and the decision slot keeps one button height, so a
+   receipt replaces the buttons without moving anything. A narrow row puts the decision on a line of its own. */
+.k2b-ui .cloud-approval__foot {
+  display: grid;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem 1rem;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.k2b-ui .cloud-approval__note {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+.k2b-ui .cloud-approval__note > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.k2b-ui .cloud-approval__note[data-tone="danger"] {
+  color: var(--k2b-danger-text);
+}
+
+.k2b-ui .cloud-approval__actions {
+  display: flex;
+  min-height: 1.75rem;
+  min-width: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.375rem;
+}
+
+@container (max-width: 32rem) {
+  .k2b-ui .cloud-approval__foot {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  /* The decision shares the width; a receipt keeps the same line. */
+  .k2b-ui .cloud-approval__actions > .k2b-button,
+  .k2b-ui .cloud-approval__actions > .k2b-split-button {
+    flex: 1;
+    min-width: 0;
+    justify-content: center;
+  }
+}
+
+.k2b-ui .cloud-approval__receipt {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.k2b-ui .cloud-approval__receipt[data-outcome="approved"] {
+  color: var(--k2b-success-text);
+}
+
+/* The band sits above the resource a request would change, tinted like the approval card in a chat. */
+.k2b-ui .cloud-approval-bands {
+  display: grid;
+  gap: 0.5rem;
+}
+
+/* Two rows in every width: the decision never shares a line with the title, so a receipt cannot rewrap it. */
+.k2b-ui .cloud-approval-band {
+  display: grid;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+  grid-template-columns: auto minmax(0, 1fr);
+  container-type: inline-size;
+  padding: 0.75rem 1rem;
+  /* Transparent, so forced colours still draw an outline where the tint disappears. */
+  border: 1px solid transparent;
+  border-radius: var(--k2b-radius-surface);
+  color: var(--k2b-text-secondary);
+  background: color-mix(in srgb, var(--k2b-warning-surface) 70%, var(--k2b-surface-canvas));
+  font-size: 0.8125rem;
+}
+
+.k2b-ui.k2b-dark .cloud-approval-band,
+.dark .k2b-ui .cloud-approval-band {
+  background: color-mix(in srgb, var(--k2b-warning-surface) 55%, var(--k2b-surface-canvas));
+}
+
+.k2b-ui .cloud-approval-band > i {
+  color: var(--k2b-warning-text);
+  font-size: 1.125rem;
+}
+
+.k2b-ui .cloud-approval-band[data-decided] {
+  background: var(--k2b-surface-muted);
+}
+
+.k2b-ui .cloud-approval-band[data-decided] > i {
+  color: var(--k2b-text-muted);
+}
+
+.k2b-ui .cloud-approval-band[data-decided="approved"] > i {
+  color: var(--k2b-success-text);
+}
+
+.k2b-ui .cloud-approval-band__text {
+  display: grid;
+  min-width: 0;
+  gap: 0.125rem;
+}
+
+.k2b-ui .cloud-approval-band__text strong {
+  color: var(--k2b-text);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .cloud-approval-band__text .cloud-approval__origin {
+  margin: 0;
+}
+
+.k2b-ui .cloud-approval-band > .cloud-approval__foot {
+  grid-column: 2;
+}
+
+@media (max-width: 40rem) {
+  .k2b-ui .cloud-approval {
+    gap: 0.75rem;
+  }
+
+  .k2b-ui .cloud-approval__fields {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
+  }
+
+  .k2b-ui .cloud-approval__fields dd {
+    margin-bottom: 0.35rem;
+  }
+}

package/src/styles/global.css

@@ -28,6 +28,7 @@
 @import "./utilities-markdown-editor.css";
 @import "./base-popover.css";
 @import "./effects.css";
+@import "./approvals.css";
 @import "./input.css";
 @import "./resource-search.css";
 @import "./file-chooser.css";
@@ -123,7 +124,9 @@ html:has(.cloud-app-canvas[data-layout-full-page="true"]) {
   height: 100%;
 }
 
-:root .stdlib-chart {
+/* Cloud's chart palette on every @k2b/ui surface, which sets its own palette on `.k2b-ui` (Cloud's body), so legends
+   and series filters, also in popovers, name the colors the chart draws. */
+:root :is(.k2b-ui, .stdlib-chart, .k2b-chart-legend) {
   --stdlib-chart-c1: #14b8a6;
   --stdlib-chart-c2: #f97316;
   --stdlib-chart-c3: #8b5cf6;
@@ -317,23 +320,34 @@ solid-island {
    edges, without padding, radius, shadow, or border. The rail keeps the app
    canvas, so the change of surface alone separates the two; no line does. The
    outermost workspace and the notices above it lose their frame, so nothing
-   draws a box inside the app area. */
+   draws a box inside the app area.
+   The rail and the app area reach the window's edges also where the installed
+   app reports safe areas, such as the status bar and the home indicator. Their
+   own surfaces fill the insets, and their content stays inside them. */
 @media (min-width: 768px) and (max-width: 1535px) {
   .cloud-app-canvas[data-layout-authenticated] {
-    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
+    padding: 0;
   }
   .cloud-app-canvas[data-layout-authenticated] > .layout-rail {
-    width: 3rem;
+    width: calc(3rem + env(safe-area-inset-left, 0px));
     margin-inline-start: 0;
-    padding-bottom: var(--ui-space-shell);
+    padding: env(safe-area-inset-top, 0px) 0 calc(var(--ui-space-shell) + env(safe-area-inset-bottom, 0px))
+      env(safe-area-inset-left, 0px);
   }
   .cloud-app-canvas[data-layout-authenticated] > .layout-shell-content {
     gap: 0;
+    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 0;
     background: var(--k2b-surface);
   }
+  /* A regular page scrolls `main`, so its end clears the home indicator. A
+     workspace reaches the bottom edge and clears it inside its own surfaces. */
+  .cloud-app-canvas[data-layout-authenticated] .layout-content-main:not(:has(.k2b-app-workspace)) {
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+  }
   .cloud-app-canvas[data-layout-authenticated] .layout-content-main .k2b-app-workspace:not(.k2b-app-workspace *) {
+    --k2b-workspace-radius: 0px;
+    --k2b-workspace-inset-bottom: env(safe-area-inset-bottom, 0px);
     border: 0;
-    border-radius: 0;
     box-shadow: none;
   }
   .cloud-app-canvas[data-layout-authenticated] > .layout-shell-content > :not(.layout-content-main) .k2b-notice-card {
@@ -373,4 +387,5 @@ solid-island {
   width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: .8125rem; line-height: 1.3;
 }
 .cloud-mobile-profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; border-top: 1px solid var(--ui-border); padding-top: 1rem; }
-.cloud-mobile-profile :is(a, button) { min-height: 2.75rem; white-space: normal; text-align: start; justify-content: flex-start; }
+.cloud-mobile-profile > :is(a, button) { min-height: 2.75rem; white-space: normal; text-align: start; justify-content: flex-start; }
+.cloud-mobile-profile__appearance { grid-column: 1 / -1; }

package/src/styles/utilities-navigation.css

@@ -883,6 +883,19 @@
   transition: opacity 120ms ease-out;
 }
 
+.layout-profile-preferences__appearance {
+  padding: 0.125rem 0.125rem 0.25rem;
+}
+
+.layout-profile-preferences__appearance .k2b-segmented-control {
+  width: 100%;
+}
+
+/* Content-sized segments: "Automatisch" needs more room than "Hell" in the narrow panel. */
+.layout-profile-preferences__appearance .k2b-segmented-control__option {
+  flex: 1 1 auto;
+}
+
 .dark .layout-profile-preferences__panel {
   color: var(--color-zinc-300);
 }

package/src/workflows/language/compiler.ts

@@ -292,7 +292,7 @@ const compileSteps = (
     if (hasOwn(step, "switch")) {
       validateExactKeys(step, ["switch", "cases", "default"], stepPath, context);
       if (!Array.isArray(step.cases) || step.cases.length === 0) {
-        addDiagnostic(context, "switch.cases", "switch requires at least one case", [...stepPath, "cases"]);
+        addDiagnostic(context, "switch.cases", "switch cases must be a non-empty list of { when, do } entries", [...stepPath, "cases"]);
         return;
       }
       const cases: Array<{ when: WorkflowJsonValue; steps: WorkflowIrStep[] }> = [];

package/src/ssr/AppWorkspaceController.island.tsx

@@ -1,21 +0,0 @@
-import { installAppWorkspaceController, serializeAppWorkspaceLayoutState } from "@k2b/ui";
-import { onCleanup, onMount } from "solid-js";
-import { appWorkspaceCookieName, readAppWorkspaceLayoutCookie } from "../_internal/app-workspace-state";
-
-const writeLayoutCookie = (appId: string | null | undefined, state: Parameters<typeof serializeAppWorkspaceLayoutState>[0]) => {
-  if (!appId) return;
-  const secure = window.location.protocol === "https:" ? "; Secure" : "";
-  document.cookie = `${appWorkspaceCookieName(appId)}=${serializeAppWorkspaceLayoutState(state)}; Path=/; Max-Age=31536000; SameSite=Lax${secure}`;
-};
-
-export default function AppWorkspaceController(props: { appId?: string | null }) {
-  let dispose = () => {};
-  onMount(() => {
-    dispose = installAppWorkspaceController({
-      readState: () => readAppWorkspaceLayoutCookie(document.cookie, props.appId),
-      writeState: (state) => writeLayoutCookie(props.appId, state),
-    });
-  });
-  onCleanup(() => dispose());
-  return null;
-}

package/src/ssr/BrowserPushRegistration.island.tsx

@@ -1,12 +0,0 @@
-import { onMount } from "solid-js";
-import { browserNotificationClient } from "../browser/notifications";
-
-export default function BrowserPushRegistration() {
-  onMount(() => {
-    void browserNotificationClient.refreshExisting().catch((error) => {
-      console.warn("[notifications] Failed to refresh the browser endpoint", error);
-    });
-  });
-
-  return null;
-}