@k2b/cloud 0.32.0 → 0.33.0

package/src/styles/global.css

@@ -320,22 +320,33 @@ 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;
     box-shadow: none;
   }
@@ -376,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;
-}

package/src/ssr/GlobalAnnouncements.island.tsx

@@ -1,117 +0,0 @@
-import { Button, dialogCore, IconButton, MarkdownView, NoticeCard, PanelDialog, panelDialogOptions, useLocale } from "@k2b/ui";
-import { createSignal, For, onMount, Show } from "solid-js";
-import {
-  ANNOUNCEMENTS_COOKIE,
-  ANNOUNCEMENTS_COOKIE_MAX_AGE_SECONDS,
-  type AnnouncementCookieState,
-  mergeAnnouncementCookieState,
-  serializeAnnouncementCookieState,
-} from "../contracts/announcement-cookie";
-import type { AnnouncementDisplayEntry } from "../contracts/announcements";
-import { platformMessages } from "./platform-messages";
-
-type Props = {
-  banners: AnnouncementDisplayEntry[];
-  announcements: AnnouncementDisplayEntry[];
-  latestAnnouncementVersion: number;
-  cookieState: AnnouncementCookieState;
-};
-
-const writeCookieState = (state: AnnouncementCookieState) => {
-  document.cookie = `${ANNOUNCEMENTS_COOKIE}=${serializeAnnouncementCookieState(state)}; Path=/; Max-Age=${ANNOUNCEMENTS_COOKIE_MAX_AGE_SECONDS}; SameSite=Lax`;
-};
-
-export default function GlobalAnnouncements(props: Props) {
-  const locale = useLocale();
-  const t = () => platformMessages.resolve([locale()]).t;
-  const [cookieState, setCookieState] = createSignal(props.cookieState);
-  const [banners, setBanners] = createSignal(props.banners);
-
-  const dismissBanner = (version: number) => {
-    const next = mergeAnnouncementCookieState(cookieState(), { dismissedBannerVersions: [version] });
-    setCookieState(next);
-    writeCookieState(next);
-    setBanners((items) => items.filter((item) => item.version !== version));
-  };
-
-  const closeAnnouncements = () => {
-    const next = mergeAnnouncementCookieState(cookieState(), {
-      seenAnnouncementVersion: props.latestAnnouncementVersion,
-    });
-    setCookieState(next);
-    writeCookieState(next);
-  };
-
-  onMount(() => {
-    if (props.announcements.length === 0) return;
-
-    void dialogCore
-      .open<void>(
-        (close) => (
-          <PanelDialog>
-            <PanelDialog.Header
-              title={t().announcements}
-              subtitle={t().latestPlatformUpdates}
-              icon="ti ti-speakerphone text-blue-500"
-              close={() => close()}
-            />
-            <PanelDialog.Body>
-              <For each={props.announcements}>
-                {(entry) => (
-                  <article class="panel-dialog-section rounded-[var(--ui-radius-surface)] p-4">
-                    <div class="mb-3 flex items-start justify-between gap-3">
-                      <div class="min-w-0">
-                        <h2 class="text-base font-semibold text-primary">{entry.title}</h2>
-                        <p class="mt-0.5 text-xs text-dimmed">
-                          {new Date(entry.publishedAt).toLocaleDateString(locale(), {
-                            year: "numeric",
-                            month: "short",
-                            day: "numeric",
-                          })}
-                        </p>
-                      </div>
-                      <span class="rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] font-medium text-dimmed dark:bg-zinc-800">
-                        v{entry.version}
-                      </span>
-                    </div>
-                    <MarkdownView trustedHtml={entry.bodyHtml} />
-                  </article>
-                )}
-              </For>
-            </PanelDialog.Body>
-            <PanelDialog.Footer>
-              <span />
-              <Button size="sm" onClick={() => close()}>
-                {t().gotIt}
-              </Button>
-            </PanelDialog.Footer>
-          </PanelDialog>
-        ),
-        panelDialogOptions,
-      )
-      .then(closeAnnouncements);
-  });
-
-  return (
-    <Show when={banners().length > 0}>
-      <div class="flex shrink-0 flex-col gap-1">
-        <For each={banners()}>
-          {(banner) => (
-            <div class="cloud-announcement">
-              <NoticeCard tone={banner.tone} title={banner.title}>
-                <MarkdownView
-                  trustedHtml={banner.bodyHtml}
-                  headingScale="compact"
-                  class="-mx-2 max-h-36 overflow-y-auto overscroll-contain pl-2 pr-3 [&_p]:my-0"
-                />
-              </NoticeCard>
-              <IconButton size="sm" label={t().dismissBanner} onClick={() => dismissBanner(banner.version)}>
-                <i class="ti ti-x" aria-hidden="true" />
-              </IconButton>
-            </div>
-          )}
-        </For>
-      </div>
-    </Show>
-  );
-}

package/src/ssr/GlobalSearchTrigger.island.tsx

@@ -1,75 +0,0 @@
-import { IconButton, Tooltip, useLocale } from "@k2b/ui";
-import { createEffect, onCleanup, onMount } from "solid-js";
-import { registerContextAwareCommand } from "../browser/command-bridge";
-import { attachCommandShortcuts } from "../browser/command-shortcuts";
-import type { NavigationSearchItem } from "../browser/navigation-search";
-import { importOnDemand } from "../browser/reload";
-import { openGlobalSearch } from "../browser/search";
-import { registerGlobalSearchHost } from "../browser/search-bridge";
-import { createGlobalSearchHost } from "./global-search-host";
-import { platformMessages } from "./platform-messages";
-
-type GlobalSearchTriggerProps = {
-  variant: "header" | "rail" | "host";
-  class?: string;
-  registerCommand?: boolean;
-  searchLinks?: NavigationSearchItem[];
-  searchResources?: boolean;
-};
-
-/** Opens the spotlight-style global search dialog from nav/header trigger points. */
-export default function GlobalSearchTrigger(props: GlobalSearchTriggerProps) {
-  const locale = useLocale();
-  const t = () => platformMessages.resolve([locale()]).t;
-
-  if (props.registerCommand) {
-    const host = createGlobalSearchHost(() => props.searchLinks ?? [], props.searchResources);
-    onMount(() => {
-      onCleanup(registerGlobalSearchHost(host.open, host.dispose));
-    });
-    // Commands, their schemas and the capability client load on the first shortcut, not with every page.
-    onMount(() =>
-      onCleanup(
-        attachCommandShortcuts(
-          (command) =>
-            void importOnDemand(() => import("../browser/commands")).then((commands) => commands?.runContextAwareCommand(command)),
-        ),
-      ),
-    );
-    createEffect(() =>
-      onCleanup(
-        registerContextAwareCommand({
-          id: "cloud.search",
-          title: t().openGlobalSearch,
-          description: t().globalSearchDescription,
-          icon: "ti ti-search",
-          shortcut: "mod+k",
-          action: { search: {} },
-        }),
-      ),
-    );
-  }
-
-  if (props.variant === "host") return null;
-
-  if (props.variant === "rail")
-    return (
-      <Tooltip.Trigger
-        type="button"
-        class={`rail-item text-blue-500 hover:bg-blue-500/10 hover:text-blue-600 dark:text-blue-400 dark:hover:bg-blue-500/15 dark:hover:text-blue-300 ${props.class ?? ""}`}
-        onClick={() => openGlobalSearch()}
-        aria-label={t().openGlobalSearch}
-        placement="right"
-        delay={0}
-        content={t().searchShortcut}
-      >
-        <i class="ti ti-search text-base" />
-      </Tooltip.Trigger>
-    );
-
-  return (
-    <IconButton class={props.class} onClick={() => openGlobalSearch()} label={t().openGlobalSearch} title={t().searchShortcut}>
-      <i class="ti ti-search text-base" />
-    </IconButton>
-  );
-}

package/src/ssr/LayoutHelpTrigger.island.tsx

@@ -1,61 +0,0 @@
-import { IconButton, Tooltip, useLocale } from "@k2b/ui";
-import { createEffect, onCleanup } from "solid-js";
-import { registerContextAwareCommand } from "../browser/command-bridge";
-import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
-import { openLayoutHelpDialog } from "./LayoutHelp";
-import { platformMessages } from "./platform-messages";
-
-type LayoutHelpTriggerProps = {
-  variant: "header" | "rail";
-  class?: string;
-  registerCommand?: boolean;
-  searchHelpApps?: GlobalSearchHelpApp[];
-  accent?: string;
-};
-
-/** Opens end-user help from either the desktop rail or the compact header. */
-export default function LayoutHelpTrigger(props: LayoutHelpTriggerProps) {
-  const locale = useLocale();
-  const t = () => platformMessages.resolve([locale()]).t;
-  const searchHelpApps = props.searchHelpApps ?? [];
-
-  const openHelp = () => {
-    openLayoutHelpDialog(searchHelpApps, props.accent);
-  };
-
-  if (props.registerCommand) {
-    createEffect(() =>
-      onCleanup(
-        registerContextAwareCommand({
-          id: "cloud.help",
-          title: t().openShortcutHelp,
-          description: t().shortcutHelpDescription,
-          icon: "ti ti-help-circle",
-          shortcut: "shift+/",
-          action: openHelp,
-        }),
-      ),
-    );
-  }
-
-  if (props.variant === "rail")
-    return (
-      <Tooltip.Trigger
-        type="button"
-        class={`rail-item text-blue-500 hover:bg-blue-500/10 hover:text-blue-600 dark:text-blue-400 dark:hover:bg-blue-500/15 dark:hover:text-blue-300 ${props.class ?? ""}`}
-        onClick={openHelp}
-        aria-label={t().openHelp}
-        placement="right"
-        delay={0}
-        content={t().helpShortcut}
-      >
-        <i class="ti ti-help-circle text-base" />
-      </Tooltip.Trigger>
-    );
-
-  return (
-    <IconButton class={props.class} onClick={openHelp} label={t().openHelp} title={t().helpShortcut}>
-      <i class="ti ti-help-circle text-base" />
-    </IconButton>
-  );
-}

package/src/ssr/PageTrailRow.island.tsx

@@ -1,20 +0,0 @@
-import { PageTitle, usePageTrail } from "@k2b/ui";
-import { Show } from "solid-js";
-
-/**
- * The shell's own place for the way up, above pages without a workspace. It
- * shows only on a page with a page above it, and steps back when the page
- * renders a workspace (whose head shows it) or its own `PageTrail`.
- */
-export default function PageTrailRow() {
-  const trail = usePageTrail();
-  const deep = () => {
-    const current = trail();
-    return current?.ancestors.length ? current : undefined;
-  };
-  return (
-    <div class="layout-page-head" data-trail={deep() ? "up" : undefined}>
-      <Show when={deep()}>{(current) => <PageTitle trail={current()} as="p" fallback />}</Show>
-    </div>
-  );
-}

package/src/ssr/PageTrailRuntime.island.tsx

@@ -1,26 +0,0 @@
-import { followPageTrail, installPageTitleController, useLocale } from "@k2b/ui";
-import { onCleanup, onMount } from "solid-js";
-import { installPageTrailRuntime } from "./page-trail-runtime";
-import { platformMessages } from "./platform-messages";
-
-/**
- * One owner per document for the way up: it collapses every page title path
- * to its space, keeps server-rendered workspace heads current after
- * `layout.update()`, runs the per-tab memory behind up links, and offers
- * "One level up" (Alt+↑) while the page has a page above it.
- */
-export default function PageTrailRuntime() {
-  const locale = useLocale();
-  onMount(() => {
-    const t = platformMessages.resolve([locale()]).t;
-    const disposeTitles = installPageTitleController(document);
-    const disposeFollow = followPageTrail(document);
-    const disposeRuntime = installPageTrailRuntime((page) => ({ title: t.pageUp({ page }), description: t.pageUpDescription }));
-    onCleanup(() => {
-      disposeTitles();
-      disposeFollow();
-      disposeRuntime();
-    });
-  });
-  return null;
-}

package/src/ssr/RegisteredHelpDocuments.island.tsx

@@ -1,3 +0,0 @@
-import { LayoutHelpDocuments } from "./LayoutHelp";
-
-export default LayoutHelpDocuments;