@k2b/cloud 0.6.0-rc.0

package/src/ssr/LayoutPreferences.island.tsx

@@ -0,0 +1,36 @@
+import { Dropdown, type DropdownPosition, useLocale } from "@k2b/ui";
+import type { CloudTheme } from "../shared/theme";
+import { createPreferenceController } from "./preference-controller";
+
+type LayoutPreferencesProps = {
+  class?: string;
+  initialTheme: CloudTheme;
+  position: DropdownPosition;
+  triggerClass?: string;
+};
+
+export default function LayoutPreferences(props: LayoutPreferencesProps) {
+  const locale = useLocale();
+  const preferences = createPreferenceController(props.initialTheme, locale);
+
+  return (
+    <Dropdown.Root
+      class={props.class}
+      items={preferences.items()}
+      label={preferences.messages().preferencesMenuLabel}
+      position={props.position}
+      width="14rem"
+    >
+      <Dropdown.Trigger
+        class={props.triggerClass}
+        iconOnly
+        label={preferences.messages().preferencesMenuLabel}
+        size="sm"
+        tooltip={false}
+        variant="secondary"
+      >
+        <i class="ti ti-adjustments-horizontal" aria-hidden="true" />
+      </Dropdown.Trigger>
+    </Dropdown.Root>
+  );
+}

package/src/ssr/LayoutRail.tsx

@@ -0,0 +1,58 @@
+import type { RailPreferences } from "../contracts/rail-preferences";
+import type { CloudTheme } from "../shared/theme";
+import AppLaunchpad, { type AppLaunchpadApp } from "./AppLaunchpad.island";
+import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
+import GlobalSearchTrigger from "./GlobalSearchTrigger.island";
+import HotkeysHelpRail from "./HotkeysHelpRail.island";
+import ProfilePreferences from "./ProfilePreferences.island";
+import RailApps from "./RailApps.island";
+import type { RailApp } from "./rail-navigation";
+export type LayoutAppLink = RailApp;
+
+type LayoutRailProps = {
+  accent?: string;
+  appsLabel: string;
+  homeLabel: string;
+  launchpadApps: AppLaunchpadApp[];
+  legalLinks: Array<{ label: string; href: string; icon?: string }>;
+  openAppsLabel: string;
+  apps: RailApp[];
+  railSettings: RailPreferences;
+  currentUrl: string;
+  profileAvatarSrc?: string;
+  profileName: string;
+  searchHelpApps: GlobalSearchHelpApp[];
+  theme: CloudTheme;
+};
+
+const jsonScript = (value: unknown): string => JSON.stringify(value).replace(/</g, "\\u003c");
+
+export default function LayoutRail(props: LayoutRailProps) {
+  return (
+    <>
+      <AppLaunchpad apps={props.launchpadApps} legalLinks={props.legalLinks} />
+      <script id="cloud-app-launchpad-data" type="application/json">
+        {jsonScript({ apps: props.launchpadApps, legalLinks: props.legalLinks })}
+      </script>
+      <script id="cloud-rail-data" type="application/json">
+        {jsonScript({ apps: props.apps, settings: props.railSettings })}
+      </script>
+      <aside class="layout-rail hidden w-10 shrink-0 flex-col md:flex">
+        <div class="layout-rail-logo flex h-[2.875rem] shrink-0 items-center justify-center">
+          <a href="/" aria-label={props.homeLabel}>
+            <img src="/branding/logo" alt="Logo" class="h-5 w-5" />
+          </a>
+        </div>
+        <nav class="layout-rail-navigation flex min-h-0 flex-1 flex-col items-center gap-1" aria-label={props.appsLabel}>
+          <RailApps apps={props.apps} settings={props.railSettings} currentUrl={props.currentUrl} />
+          <AppLaunchpad apps={props.launchpadApps} legalLinks={props.legalLinks} variant="rail" label={props.openAppsLabel} />
+          <div class="mt-auto shrink-0 flex flex-col items-center gap-1">
+            <GlobalSearchTrigger variant="rail" searchHelpApps={props.searchHelpApps} />
+            <HotkeysHelpRail variant="rail" registerHotkey searchHelpApps={props.searchHelpApps} accent={props.accent} />
+            <ProfilePreferences avatarSrc={props.profileAvatarSrc} initialTheme={props.theme} name={props.profileName} placement="rail" />
+          </div>
+        </nav>
+      </aside>
+    </>
+  );
+}

package/src/ssr/MinimalLayout.tsx

@@ -0,0 +1,46 @@
+import { LocaleProvider } from "@k2b/ui";
+import type { JSX } from "solid-js/jsx-runtime";
+import { getLocale } from "../server/locale";
+import { readThemeFromCookieHeader } from "../shared/theme";
+import type { MinimalLayoutContext } from "./layout-context";
+import LayoutPreferences from "./LayoutPreferences.island";
+import TimezoneCookie from "./TimezoneCookie.island";
+
+export type MinimalLayoutPreferencePosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+
+export type MinimalLayoutProps = {
+  children: JSX.Element;
+  c: MinimalLayoutContext;
+  /** Position the shared language/theme control, or disable it entirely. */
+  preferences?: MinimalLayoutPreferencePosition | false;
+};
+
+const menuPosition = (position: MinimalLayoutPreferencePosition) => {
+  if (position === "top-left") return "bottom-right" as const;
+  if (position === "top-right") return "bottom-left" as const;
+  if (position === "bottom-left") return "top-right" as const;
+  return "top-left" as const;
+};
+
+export default function MinimalLayout(props: MinimalLayoutProps) {
+  const cookie = props.c.req.raw.headers.get("Cookie") ?? "";
+  const theme = readThemeFromCookieHeader(cookie);
+  const locale = getLocale(props.c);
+  const preferences = props.preferences === undefined ? "bottom-right" : props.preferences;
+  props.c.get("page").theme = theme;
+
+  return (
+    <LocaleProvider locale={locale}>
+      <TimezoneCookie />
+      {props.children}
+      {preferences !== false && (
+        <LayoutPreferences
+          class={`minimal-layout-preferences minimal-layout-preferences--${preferences}`}
+          initialTheme={theme}
+          position={menuPosition(preferences)}
+          triggerClass="minimal-layout-preferences__trigger"
+        />
+      )}
+    </LocaleProvider>
+  );
+}

package/src/ssr/PageError.tsx

@@ -0,0 +1,29 @@
+import { NotFoundState } from "@k2b/ui";
+import type { Context } from "hono";
+import type { PageErrorOptions, PageErrorStatus } from "../_internal/page-responses";
+import { getLocale } from "../server/locale";
+import Layout from "./Layout";
+import MinimalLayout from "./MinimalLayout";
+import { pageErrorMessages } from "./page-error-messages";
+
+export const renderPageError = (c: Context, status: PageErrorStatus, options: PageErrorOptions) => {
+  const { t } = pageErrorMessages.resolve([getLocale(c)]);
+  const title = options.title ?? (status === 403 ? t.forbidden : status === 404 ? t.notFound : t.failed);
+  const description =
+    options.description ?? (status === 403 ? t.forbiddenDescription : status === 404 ? t.notFoundDescription : t.failedDescription);
+  const action = options.action ?? { label: t.home, href: "/" };
+  c.get("page").title = title;
+
+  return () =>
+    options.layout === "minimal" ? (
+      <MinimalLayout c={c}>
+        <main class="min-h-screen bg-[var(--ui-canvas)] p-[var(--ui-space-shell)]">
+          <NotFoundState code={String(status)} title={title} description={description} action={action} />
+        </main>
+      </MinimalLayout>
+    ) : (
+      <Layout c={c} title={title}>
+        <NotFoundState code={String(status)} title={title} description={description} action={action} />
+      </Layout>
+    );
+};

package/src/ssr/ProfilePreferences.island.tsx

@@ -0,0 +1,92 @@
+import { Avatar, Dropdown, type DropdownItem, toast, useLocale } from "@k2b/ui";
+import { createMemo, createSignal } from "solid-js";
+import { browserNotificationClient } from "../browser/notifications";
+import { apiClient } from "../clients/core";
+import type { CloudTheme } from "../shared/theme";
+import { createPreferenceController } from "./preference-controller";
+
+type ProfilePreferencesProps = {
+  avatarSrc?: string;
+  initialTheme: CloudTheme;
+  name: string;
+  placement: "header" | "rail";
+};
+
+export default function ProfilePreferences(props: ProfilePreferencesProps) {
+  const locale = useLocale();
+  const preferences = createPreferenceController(props.initialTheme, locale);
+  const [signingOut, setSigningOut] = createSignal(false);
+  const signOut = async () => {
+    if (signingOut()) return;
+    setSigningOut(true);
+    try {
+      await browserNotificationClient.disable().catch(() => undefined);
+      const response = await apiClient.auth.logout.$post();
+      if (!response.ok) throw new Error(preferences.messages().signOutFailed);
+      window.location.href = "/auth/login";
+    } catch {
+      toast.error(preferences.messages().signOutFailed);
+      setSigningOut(false);
+    }
+  };
+
+  const items = createMemo<DropdownItem[]>(() => [
+    ...preferences.items(),
+    {
+      href: "/me",
+      icon: "ti ti-user-circle",
+      label: preferences.messages().profileSettings,
+    },
+    {
+      action: signOut,
+      icon: "ti ti-logout",
+      label: preferences.messages().signOut,
+      disabled: signingOut(),
+    },
+  ]);
+
+  const avatar = () => <Avatar name={props.name} src={props.avatarSrc} size="xs" />;
+
+  return (
+    <div class="layout-profile-preferences" data-placement={props.placement}>
+      <button type="button" class="layout-profile-preferences__link" aria-label={preferences.messages().menuLabel}>
+        {avatar()}
+      </button>
+      <div class="layout-profile-preferences__panel dropdown-menu-surface">
+        <button type="button" class="menu-item" onClick={preferences.toggleTheme}>
+          <i class={`ti ${preferences.theme() === "light" ? "ti-moon" : "ti-sun-high"}`} aria-hidden="true" />
+          <span>{preferences.themeLabel()}</span>
+        </button>
+        <button type="button" class="menu-item" onClick={preferences.toggleLanguage}>
+          <i class="ti ti-language" aria-hidden="true" />
+          <span>{preferences.languageLabel()}</span>
+        </button>
+        <a href="/me" class="menu-item">
+          <i class="ti ti-user-circle" aria-hidden="true" />
+          <span>{preferences.messages().profileSettings}</span>
+        </a>
+        <button type="button" class="menu-item" onClick={signOut} disabled={signingOut()}>
+          <i class="ti ti-logout" aria-hidden="true" />
+          <span>{preferences.messages().signOut}</span>
+        </button>
+      </div>
+      <Dropdown.Root
+        class="layout-profile-preferences__dropdown"
+        items={items()}
+        label={preferences.messages().menuLabel}
+        position={props.placement === "rail" ? "right-start" : "bottom-left"}
+        width="14rem"
+      >
+        <Dropdown.Trigger
+          appearance="plain"
+          class="layout-profile-preferences__dropdown-trigger"
+          iconOnly
+          label={preferences.messages().menuLabel}
+          tooltip={false}
+        >
+          {avatar()}
+        </Dropdown.Trigger>
+      </Dropdown.Root>
+    </div>
+  );
+}

package/src/ssr/RailApps.island.tsx

@@ -0,0 +1,61 @@
+import { ScrollArea, Tooltip, useLocale } from "@k2b/ui";
+import { createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
+import type { RailPreferences } from "../contracts/rail-preferences";
+import { appAccentStyle } from "./app-appearance";
+import { RAIL_PREFERENCES_EVENT, readRailContext } from "./rail-context";
+import { projectRailNavigation, type RailApp, type RailLink, railLinkActive } from "./rail-navigation";
+
+function RailIcon(props: { link: RailLink; currentUrl: string }) {
+  let target: HTMLAnchorElement | undefined;
+  const active = () => railLinkActive(props.link, props.currentUrl);
+  return (
+    <>
+      <a
+        ref={target}
+        href={props.link.href}
+        class={`rail-item shrink-0 ${active() ? "rail-item-active" : ""}`}
+        aria-label={props.link.label}
+        aria-current={active() ? "page" : undefined}
+        style={appAccentStyle(props.link.accent)}
+      >
+        <i class={`${props.link.iconClass} text-base`} aria-hidden="true" />
+        <span class="sr-only">{props.link.label}</span>
+      </a>
+      <Tooltip target={() => target} content={props.link.label} placement="right" delay={0} />
+    </>
+  );
+}
+
+export default function RailApps(props: { apps: RailApp[]; settings: RailPreferences; currentUrl: string }) {
+  const locale = useLocale();
+  const [settings, setSettings] = createSignal(props.settings);
+  const [currentUrl, setCurrentUrl] = createSignal(props.currentUrl);
+  const navigation = createMemo(() => projectRailNavigation(props.apps, settings(), locale()));
+  onMount(() => {
+    const sync = () => setSettings(readRailContext()?.settings ?? props.settings);
+    const syncLocation = () => setCurrentUrl(window.location.href);
+    sync();
+    syncLocation();
+    window.addEventListener(RAIL_PREFERENCES_EVENT, sync);
+    window.addEventListener("popstate", syncLocation);
+    window.addEventListener("hashchange", syncLocation);
+    onCleanup(() => {
+      window.removeEventListener(RAIL_PREFERENCES_EVENT, sync);
+      window.removeEventListener("popstate", syncLocation);
+      window.removeEventListener("hashchange", syncLocation);
+    });
+  });
+  return (
+    <ScrollArea
+      class="flex w-full flex-col items-center gap-1"
+      style={{ flex: "0 1 auto", "scrollbar-width": "none", "scrollbar-gutter": "auto", "overflow-x": "hidden" }}
+      data-cloud-rail-apps
+    >
+      <For each={navigation().shortcuts}>{(link) => <RailIcon link={link} currentUrl={currentUrl()} />}</For>
+      <Show when={navigation().shortcuts.length > 0 && navigation().apps.length > 0}>
+        <div role="separator" class="my-1 h-px w-5 shrink-0" style={{ background: "var(--ui-divider)" }} />
+      </Show>
+      <For each={navigation().apps}>{(link) => <RailIcon link={link} currentUrl={currentUrl()} />}</For>
+    </ScrollArea>
+  );
+}

package/src/ssr/RailEditor.tsx

@@ -0,0 +1,293 @@
+import { mutation, query } from "@k2b/stdlib/solid";
+import {
+  Button,
+  Checkbox,
+  confirmDiscardIfDirty,
+  dialogCore,
+  IconButton,
+  IconInput,
+  NoticeCard,
+  PanelDialog,
+  Placeholder,
+  panelDialogOptions,
+  Select,
+  TextInput,
+  useLocale,
+} from "@k2b/ui";
+import { createMemo, createSignal, For, Index, onCleanup, Show } from "solid-js";
+import { coreClient } from "../clients/core";
+import { type RailPreferences, RailPreferencesSchema, type RailShortcut } from "../contracts/rail-preferences";
+import { publishRailPreferences, readRailContext } from "./rail-context";
+import { railMessages } from "./rail-messages";
+import { isRailAppVisible, type RailApp, sortRailApps } from "./rail-navigation";
+
+export const readRailPreferences = async (signal: AbortSignal, message: string) => {
+  const response = await coreClient.me.rail.$get({}, { init: { signal } });
+  if (!response.ok) throw new Error(message);
+  return RailPreferencesSchema.parse(await response.json());
+};
+
+type RailDialogProps = { apps: RailApp[]; close: () => void; setDismissHandler: (handler: () => void | Promise<void>) => void };
+
+function RailEditorForm(props: RailDialogProps & { initial: RailPreferences }) {
+  const locale = useLocale();
+  const t = () => railMessages.resolve([locale()]).t;
+  const [settings, setSettings] = createSignal<RailPreferences>(structuredClone(props.initial));
+  const valid = createMemo(() => RailPreferencesSchema.safeParse(settings()).success);
+  const dirty = () => JSON.stringify(settings()) !== JSON.stringify(props.initial);
+  const pinned = () => new Set(settings().shortcuts.flatMap((entry) => (entry.kind === "app" ? [entry.appId] : [])));
+  const appOptions = () => props.apps.map((app) => ({ id: app.id, label: app.label, icon: app.iconClass }));
+  const nextApp = () => props.apps.find((app) => !pinned().has(app.id));
+  const updateShortcut = (index: number, next: RailShortcut) =>
+    setSettings((value) => ({ ...value, shortcuts: value.shortcuts.map((entry, i) => (i === index ? next : entry)) }));
+  const move = (index: number, offset: number) =>
+    setSettings((value) => {
+      const shortcuts = [...value.shortcuts];
+      const [entry] = shortcuts.splice(index, 1);
+      if (entry) shortcuts.splice(index + offset, 0, entry);
+      return { ...value, shortcuts };
+    });
+  const add = (shortcut: RailShortcut) => setSettings((value) => ({ ...value, shortcuts: [...value.shortcuts, shortcut] }));
+  const save = mutation.create({
+    mutation: async (value: RailPreferences, { abortSignal }) => {
+      const response = await coreClient.me.rail.$put({ json: value }, { init: { signal: abortSignal } });
+      if (!response.ok) throw new Error(response.status === 409 ? t().conflict : t().saveFailed);
+      // Core returns the canonical database row; publish it without a second request that could fail after saving.
+      return RailPreferencesSchema.parse(await response.json());
+    },
+    onSuccess: (value) => {
+      publishRailPreferences(value);
+      props.close();
+    },
+  });
+  onCleanup(save.abort);
+  const requestClose = async () => {
+    if (save.loading()) return;
+    if (await confirmDiscardIfDirty(dirty)) props.close();
+  };
+  props.setDismissHandler(requestClose);
+  return (
+    <PanelDialog>
+      <PanelDialog.Header
+        title={t().customize}
+        subtitle={t().description}
+        icon="ti ti-layout-sidebar"
+        close={requestClose}
+        closeDisabled={save.loading()}
+      />
+      <PanelDialog.Body>
+        <fieldset disabled={save.loading()} class="flex min-h-0 flex-col gap-4">
+          <PanelDialog.Section title={t().apps} icon="ti ti-apps">
+            <div
+              style={{ display: "grid", "grid-template-columns": "repeat(auto-fit, minmax(min(100%, 13rem), 1fr))", gap: "0.75rem 1.5rem" }}
+            >
+              <For each={props.apps}>
+                {(app) => (
+                  <Checkbox
+                    label={app.label}
+                    description={pinned().has(app.id) ? t().pinned : undefined}
+                    disabled={save.loading() || pinned().has(app.id)}
+                    value={() => pinned().has(app.id) || isRailAppVisible(app, settings())}
+                    onValueChange={(visible) =>
+                      setSettings((value) => {
+                        const visibility = { ...value.visibility };
+                        if (visible === app.defaultVisible) delete visibility[app.id];
+                        else visibility[app.id] = visible;
+                        return { ...value, visibility };
+                      })
+                    }
+                  />
+                )}
+              </For>
+            </div>
+          </PanelDialog.Section>
+          <PanelDialog.Section title={t().shortcuts} icon="ti ti-link">
+            <div class="flex flex-col gap-3">
+              <Show when={settings().shortcuts.length === 0}>
+                <Placeholder description={t().empty} align="left" />
+              </Show>
+              <Index each={settings().shortcuts}>
+                {(shortcut, index) => {
+                  const app = () => {
+                    const entry = shortcut();
+                    return entry.kind === "app" ? props.apps.find((app) => app.id === entry.appId) : undefined;
+                  };
+                  const link = () => {
+                    const entry = shortcut();
+                    return entry.kind === "link" ? entry : undefined;
+                  };
+                  const updateLink = (changes: Partial<Extract<RailShortcut, { kind: "link" }>>) => {
+                    const entry = link();
+                    if (entry) updateShortcut(index, { ...entry, ...changes });
+                  };
+                  return (
+                    <div class="rounded-lg border border-[var(--ui-border)] p-3 flex flex-col gap-3">
+                      <div class="flex items-center gap-1">
+                        <span class="min-w-0 flex-1 truncate text-sm font-medium">
+                          {index + 1}. {app()?.label ?? link()?.title ?? t().unavailable}
+                        </span>
+                        <IconButton label={t().up} size="sm" disabled={save.loading() || index === 0} onClick={() => move(index, -1)}>
+                          <i class="ti ti-arrow-up" />
+                        </IconButton>
+                        <IconButton
+                          label={t().down}
+                          size="sm"
+                          disabled={save.loading() || index === settings().shortcuts.length - 1}
+                          onClick={() => move(index, 1)}
+                        >
+                          <i class="ti ti-arrow-down" />
+                        </IconButton>
+                        <IconButton
+                          label={t().remove}
+                          size="sm"
+                          disabled={save.loading()}
+                          onClick={() => setSettings((value) => ({ ...value, shortcuts: value.shortcuts.filter((_, i) => i !== index) }))}
+                        >
+                          <i class="ti ti-trash" />
+                        </IconButton>
+                      </div>
+                      <Show
+                        when={shortcut().kind === "app"}
+                        fallback={
+                          <>
+                            <TextInput
+                              label={t().title}
+                              value={() => link()?.title ?? ""}
+                              maxLength={80}
+                              required
+                              onValueChange={(title) => updateLink({ title })}
+                            />
+                            <TextInput
+                              label={t().url}
+                              value={() => link()?.href ?? ""}
+                              maxLength={2000}
+                              required
+                              description={t().urlHint}
+                              onValueChange={(href) => updateLink({ href })}
+                            />
+                            <IconInput
+                              label={t().icon}
+                              value={() => link()?.icon ?? "ti ti-link"}
+                              clearable={false}
+                              onValueChange={(icon) => updateLink({ icon: icon ?? "ti ti-link" })}
+                            />
+                          </>
+                        }
+                      >
+                        <Select
+                          label={t().app}
+                          value={() => {
+                            const entry = shortcut();
+                            return entry.kind === "app" ? entry.appId : null;
+                          }}
+                          options={appOptions()}
+                          clearable={false}
+                          searchable
+                          onValueChange={(appId) => {
+                            if (appId) updateShortcut(index, { id: shortcut().id, kind: "app", appId });
+                          }}
+                        />
+                      </Show>
+                    </div>
+                  );
+                }}
+              </Index>
+              <div class="flex flex-wrap gap-2">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  disabled={!nextApp()}
+                  onClick={() => {
+                    const app = nextApp();
+                    if (app) add({ id: crypto.randomUUID(), kind: "app", appId: app.id });
+                  }}
+                >
+                  {t().addApp}
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => add({ id: crypto.randomUUID(), kind: "link", title: "", href: "", icon: "ti ti-link" })}
+                >
+                  {t().addLink}
+                </Button>
+              </div>
+            </div>
+          </PanelDialog.Section>
+        </fieldset>
+        <Show when={!valid()}>
+          <NoticeCard tone="warning">{t().invalid}</NoticeCard>
+        </Show>
+        <Show when={save.error()}>{(error) => <NoticeCard tone="danger">{error().message}</NoticeCard>}</Show>
+      </PanelDialog.Body>
+      <PanelDialog.Footer>
+        <div class="flex w-full flex-wrap items-center justify-between gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={save.loading()}
+            onClick={() => setSettings({ revision: props.initial.revision, visibility: {}, shortcuts: [] })}
+          >
+            {t().reset}
+          </Button>
+          <Button
+            size="sm"
+            disabled={!valid() || !dirty()}
+            loading={save.loading()}
+            loadingLabel={t().saving}
+            onClick={() => void save.mutate(settings())}
+          >
+            {t().save}
+          </Button>
+        </div>
+      </PanelDialog.Footer>
+    </PanelDialog>
+  );
+}
+
+function RailEditor(props: RailDialogProps) {
+  const locale = useLocale();
+  const t = () => railMessages.resolve([locale()]).t;
+  const settings = query.create({ source: () => "rail", load: (_, { abortSignal }) => readRailPreferences(abortSignal, t().loadFailed) });
+  return (
+    <>
+      <Show
+        when={settings.data()}
+        fallback={
+          <PanelDialog>
+            <PanelDialog.Header title={t().customize} icon="ti ti-layout-sidebar" close={props.close} />
+            <PanelDialog.Body>
+              <Placeholder
+                state={settings.loading() ? "loading" : "error"}
+                description={settings.loading() ? t().loading : t().loadFailed}
+                action={
+                  <Show when={!settings.loading() && settings.error()}>
+                    <Button size="sm" onClick={() => void settings.refresh()}>
+                      {t().retry}
+                    </Button>
+                  </Show>
+                }
+              />
+            </PanelDialog.Body>
+          </PanelDialog>
+        }
+      >
+        {(initial) => (
+          <RailEditorForm apps={props.apps} initial={initial()} close={props.close} setDismissHandler={props.setDismissHandler} />
+        )}
+      </Show>
+    </>
+  );
+}
+
+export const openRailEditor = (locale: string) => {
+  const context = readRailContext();
+  if (!context) return;
+  void dialogCore.open<void>(
+    (close, dialog) => <RailEditor apps={sortRailApps(context.apps, locale)} close={close} setDismissHandler={dialog.setDismissHandler} />,
+    {
+      ...panelDialogOptions,
+      ariaLabel: railMessages.resolve([locale]).t.customize,
+    },
+  );
+};

package/src/ssr/RegisteredHelpDocuments.island.tsx

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

package/src/ssr/TimezoneCookie.island.tsx

@@ -0,0 +1,23 @@
+import { cookies } from "@k2b/stdlib/browser";
+import { onMount } from "solid-js";
+import { TIMEZONE_COOKIE } from "../shared/time";
+
+export default function TimezoneCookie() {
+  onMount(() => {
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const current = cookies.readCookie(TIMEZONE_COOKIE);
+    if (timeZone && current !== timeZone) {
+      cookies.writeCookie(TIMEZONE_COOKIE, timeZone);
+      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.
+      }
+    }
+  });
+
+  return null;
+}