@k2b/cloud 0.18.0 → 0.20.0

package/src/ssr/MinimalLayout.tsx

@@ -1,46 +1,70 @@
 import { LocaleProvider } from "@k2b/ui";
 import type { JSX } from "solid-js/jsx-runtime";
 import { getLocale } from "../server/locale";
+import { resolveAppPresentations } from "../shared/app-presentation";
 import { readThemeFromCookieHeader } from "../shared/theme";
-import LayoutPreferences from "./LayoutPreferences.island";
 import type { MinimalLayoutContext } from "./layout-context";
+import MinimalLayoutPreferences from "./MinimalLayoutPreferences.island";
+import { profilePreferencesMessages } from "./profile-preferences-messages";
 import TimezoneCookie from "./TimezoneCookie.island";
 
+/**
+ * @deprecated The language and theme settings always sit in the footer; a
+ * position is treated like `true`.
+ */
 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;
+  /**
+   * Render the footer with legal links and the language and theme settings
+   * (default), or `false` for embeds and fixed presentation surfaces.
+   */
+  preferences?: boolean | MinimalLayoutPreferencePosition;
 };
 
 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;
 
+  if (props.preferences === false) {
+    return (
+      <LocaleProvider locale={locale}>
+        <TimezoneCookie />
+        {props.children}
+      </LocaleProvider>
+    );
+  }
+
+  const t = profilePreferencesMessages.resolve([locale]).t;
+  // Aggregate every running app's legal links like Layout (last wins on
+  // duplicate href). Unlike Layout, MinimalLayout does not require
+  // middleware.runtime(); without it the footer has no legal links.
+  const apps = resolveAppPresentations(props.c.get("runtime")?.apps ?? [], locale);
+  const legalLinks = [...new Map(apps.flatMap((app) => (app.legalLinks ?? []).map((link) => [link.href, link] as const))).values()];
+
   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"
-        />
-      )}
+      <div class="minimal-layout">
+        {props.children}
+        <footer class="minimal-layout-footer">
+          {legalLinks.length > 0 && (
+            <nav class="minimal-layout-footer__links" aria-label={t.legalLinks}>
+              {legalLinks.map((link) => (
+                // A new tab keeps a started upload or a filled-in form on this page.
+                <a href={link.href} target="_blank" rel="noopener">
+                  {link.label}
+                </a>
+              ))}
+            </nav>
+          )}
+          <MinimalLayoutPreferences initialTheme={theme} />
+        </footer>
+      </div>
     </LocaleProvider>
   );
 }

package/src/ssr/MinimalLayoutPreferences.island.tsx

@@ -0,0 +1,48 @@
+import { Button, Dropdown, useLocale } from "@k2b/ui";
+import { type ProfilePreferenceLocale, profilePreferenceLocale, setLocalePreference } from "../browser/locale-preference";
+import { canonicalLocale } from "../shared/locale";
+import type { CloudTheme } from "../shared/theme";
+import { createPreferenceController } from "./preference-controller";
+
+/**
+ * Labeled language and theme controls for the MinimalLayout footer. The
+ * language trigger names the current language; the theme button names the
+ * mode it switches to, like every other Cloud preference menu.
+ */
+export default function MinimalLayoutPreferences(props: { initialTheme: CloudTheme }) {
+  const locale = useLocale();
+  const preferences = createPreferenceController(props.initialTheme, locale);
+  const t = preferences.messages;
+  const language = () => profilePreferenceLocale(locale());
+  const languageName = () => (language() === "de" ? t().switchToGerman : t().switchToEnglish);
+  // Keep a regional locale such as en-GB when its language is chosen again,
+  // but let a visitor on an unsupported locale such as fr-FR, who reads the
+  // English fallback, still choose English explicitly.
+  const choose = (next: ProfilePreferenceLocale) => {
+    if (canonicalLocale(locale())?.split("-")[0] !== next) setLocalePreference(next);
+  };
+
+  return (
+    <div class="minimal-layout-footer__preferences">
+      <Dropdown.Root
+        label={t().language}
+        position="top-right"
+        width="10rem"
+        items={[
+          { label: t().switchToGerman, choice: "radio", checked: () => language() === "de", action: () => choose("de") },
+          { label: t().switchToEnglish, choice: "radio", checked: () => language() === "en", action: () => choose("en") },
+        ]}
+      >
+        <Dropdown.Trigger label={`${t().language}: ${languageName()}`} size="sm" tooltip={false} variant="ghost">
+          <i class="ti ti-language" aria-hidden="true" />
+          {languageName()}
+          <i class="ti ti-chevron-down" aria-hidden="true" />
+        </Dropdown.Trigger>
+      </Dropdown.Root>
+      <Button onClick={preferences.toggleTheme} size="sm" variant="ghost">
+        <i class={preferences.theme() === "light" ? "ti ti-moon" : "ti ti-sun-high"} aria-hidden="true" />
+        {preferences.themeLabel()}
+      </Button>
+    </div>
+  );
+}

package/src/ssr/PageError.tsx

@@ -17,7 +17,7 @@ export const renderPageError = (c: Context, status: PageErrorStatus, options: Pa
   return () =>
     options.layout === "minimal" ? (
       <MinimalLayout c={c}>
-        <main class="min-h-screen bg-[var(--ui-canvas)] p-[var(--ui-space-shell)]">
+        <main class="flex-1 bg-[var(--ui-canvas)] p-[var(--ui-space-shell)]">
           <NotFoundState code={String(status)} title={title} description={description} action={action} />
         </main>
       </MinimalLayout>

package/src/ssr/profile-preferences-messages.ts

@@ -6,6 +6,8 @@ export const profilePreferencesMessages = i18n.define({
     en: {
       menuLabel: "Profile and preferences",
       preferencesMenuLabel: "Appearance and language",
+      language: "Language",
+      legalLinks: "Legal",
       profileSettings: "Profile settings",
       signOut: "Sign out",
       signOutFailed: "Sign out failed. Please try again.",
@@ -17,6 +19,8 @@ export const profilePreferencesMessages = i18n.define({
     de: {
       menuLabel: "Profil und Einstellungen",
       preferencesMenuLabel: "Darstellung und Sprache",
+      language: "Sprache",
+      legalLinks: "Rechtliches",
       profileSettings: "Profileinstellungen",
       signOut: "Abmelden",
       signOutFailed: "Abmelden fehlgeschlagen. Bitte versuche es erneut.",

package/src/ssr/workspace-navigation.ts

@@ -49,12 +49,14 @@ export function readWorkspaceNavigation(): WorkspaceNavigationState | undefined
   try {
     const value: unknown = JSON.parse(owner.textContent ?? "");
     if (!value || typeof value !== "object" || !("items" in value) || !validItems(value.items)) return;
-    // SSR links work before the app island loads; action handlers are not yet available.
+    // SSR links work before the app island loads; action and disclosure handlers are not yet available,
+    // so the owner's folds only set where the local disclosure starts.
     const links = (items: readonly NavigationItem[]): NavigationItem[] =>
       items.map((item) => ({
         ...item,
         disabled: item.disabled || Boolean(item.action && !item.href),
         ...(item.href ? { action: undefined } : {}),
+        ...(item.expanded !== undefined ? { expanded: undefined, defaultExpanded: item.expanded } : {}),
         ...(item.children ? { children: links(item.children) } : {}),
         ...(item.actions ? { actions: links(item.actions) } : {}),
       }));

package/src/styles/utilities-navigation.css

@@ -903,36 +903,85 @@
   }
 }
 
-/* MinimalLayout owns no page geometry. Its optional preference trigger is the
-   only positioned element and respects device safe areas in every corner. */
-.minimal-layout-preferences {
-  position: fixed;
-  z-index: 50;
+/* MinimalLayout stacks the page content and its footer in a column at least
+   one viewport tall, so the footer ends a short page and follows a long one.
+   Content that should fill the remaining height grows with flex-1. */
+.minimal-layout {
+  display: flex;
+  min-height: 100vh;
+  min-height: 100dvh;
+  flex-direction: column;
+}
+
+.minimal-layout-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem 1rem;
+  margin-top: auto;
+  padding: 0.75rem max(1rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom))
+    max(1rem, env(safe-area-inset-left));
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.minimal-layout-footer__links,
+.minimal-layout-footer__preferences {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.minimal-layout-footer__links {
+  column-gap: 1rem;
 }
 
-.minimal-layout-preferences--top-left {
-  top: max(0.75rem, env(safe-area-inset-top));
-  left: max(0.75rem, env(safe-area-inset-left));
+.minimal-layout-footer__preferences {
+  gap: 0.25rem;
 }
 
-.minimal-layout-preferences--top-right {
-  top: max(0.75rem, env(safe-area-inset-top));
-  right: max(0.75rem, env(safe-area-inset-right));
+.minimal-layout-footer__links a {
+  display: inline-flex;
+  min-height: 1.75rem;
+  align-items: center;
+  border-radius: var(--k2b-radius-control);
+  color: inherit;
+  transition: color 150ms ease-out;
+}
+
+.minimal-layout-footer__links a:hover {
+  color: var(--k2b-text);
+}
+
+.minimal-layout-footer__links a:focus-visible {
+  outline: 2px solid var(--k2b-focus-ring);
+  outline-offset: 2px;
 }
 
-.minimal-layout-preferences--bottom-left {
-  bottom: max(0.75rem, env(safe-area-inset-bottom));
-  left: max(0.75rem, env(safe-area-inset-left));
+.k2b-ui .minimal-layout-footer .k2b-button[data-size] {
+  color: inherit;
+  font-size: inherit;
+}
+
+.k2b-ui .minimal-layout-footer .k2b-button[data-size]:hover {
+  color: var(--k2b-text);
 }
 
-.minimal-layout-preferences--bottom-right {
-  right: max(0.75rem, env(safe-area-inset-right));
-  bottom: max(0.75rem, env(safe-area-inset-bottom));
+/* Finger-sized footer targets on touch screens. */
+@media (any-pointer: coarse) {
+  .minimal-layout-footer__links a,
+  .k2b-ui .minimal-layout-footer .k2b-button[data-size] {
+    min-height: 2.75rem;
+  }
 }
 
-.minimal-layout-preferences__trigger {
-  box-shadow: var(--ui-shadow-float);
-  backdrop-filter: blur(0.5rem);
+@media (prefers-reduced-motion: reduce) {
+  .minimal-layout-footer__links a {
+    transition: none;
+  }
 }
 
 /* Workspace navigation chrome and resource identity. */