@k2b/cloud 0.21.1 → 0.23.0

package/src/ssr/layout-context.ts

@@ -6,7 +6,7 @@ import type { RuntimeContext } from "./runtime";
 export type LayoutContext = {
   get(key: "user"): User | undefined;
   get(key: "railPreferences"): RailSnapshot | undefined;
-  get(key: "page"): { theme?: "light" | "dark" };
+  get(key: "page"): { theme?: "light" | "dark"; title?: string; pwa?: { name: string } };
   get(key: "runtime"): RuntimeContext;
   get(key: "announcements"): LayoutAnnouncementsState | undefined;
   /** Every application settings snapshot includes Core's app metadata. */

package/src/ssr/preference-controller.ts

@@ -1,6 +1,6 @@
 import type { DropdownItem } from "@k2b/ui";
 import { createMemo, createSignal, onCleanup, onMount } from "solid-js";
-import { profilePreferenceLocale, setLocalePreference } from "../browser/locale-preference";
+import { profilePreferenceLocale, setLocalePreference } from "../shared/locale-preference";
 import { type CloudTheme, getCurrentThemePreference, setThemePreference } from "../shared/theme";
 import { profilePreferencesMessages } from "./profile-preferences-messages";
 
@@ -40,5 +40,5 @@ export const createPreferenceController = (initialTheme: CloudTheme, locale: ()
     },
   ]);
 
-  return { items, languageLabel, messages, theme, themeLabel, toggleLanguage, toggleTheme };
+  return { items, language, languageLabel, messages, theme, themeLabel, toggleLanguage, toggleTheme };
 };

package/src/ssr/profile-actions.ts

@@ -5,7 +5,8 @@ import { apiClient } from "../clients/core";
 import type { CloudTheme } from "../shared/theme";
 import { createPreferenceController } from "./preference-controller";
 
-export function createProfileActions(initialTheme: CloudTheme) {
+/** `appHref` is set while the installation offers the mobile app; the item then leads to `/me/app`. */
+export function createProfileActions(initialTheme: CloudTheme, appHref?: string) {
   const locale = useLocale();
   const preferences = createPreferenceController(initialTheme, locale);
   const [signingOut, setSigningOut] = createSignal(false);
@@ -30,6 +31,7 @@ export function createProfileActions(initialTheme: CloudTheme) {
       icon: "ti ti-user-circle",
       label: preferences.messages().profileSettings,
     },
+    ...(appHref ? [{ href: appHref, icon: "ti ti-device-mobile", label: preferences.messages().app }] : []),
     {
       action: signOut,
       icon: "ti ti-logout",

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

@@ -9,6 +9,7 @@ export const profilePreferencesMessages = i18n.define({
       language: "Language",
       legalLinks: "Legal",
       profileSettings: "Profile settings",
+      app: "App",
       signOut: "Sign out",
       signOutFailed: "Sign out failed. Please try again.",
       switchToDark: "Dark mode",
@@ -22,6 +23,7 @@ export const profilePreferencesMessages = i18n.define({
       language: "Sprache",
       legalLinks: "Rechtliches",
       profileSettings: "Profileinstellungen",
+      app: "App",
       signOut: "Abmelden",
       signOutFailed: "Abmelden fehlgeschlagen. Bitte versuche es erneut.",
       switchToDark: "Dunkler Modus",

package/src/ssr/pwa-messages.ts

@@ -0,0 +1,24 @@
+import { i18n } from "@k2b/stdlib";
+
+/** Strings of the mobile app's frame: the tab bar, the offline notice and the account notice. */
+export const pwaMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      tabs: "App",
+      start: "Start",
+      offline: "You're offline",
+      otherAccount: ({ cloud, name }: { cloud: string; name: string }) =>
+        `Chrome on this phone is signed in to ${cloud} as ${name}. Changes in the app may be saved to that account. Sign out of ${cloud} in Chrome.`,
+      errorAction: "Back to Start",
+    },
+    de: {
+      tabs: "App",
+      start: "Start",
+      offline: "Du bist offline",
+      otherAccount: ({ cloud, name }: { cloud: string; name: string }) =>
+        `Chrome auf diesem Telefon ist bei ${cloud} als ${name} angemeldet. Änderungen in der App werden womöglich in diesem Konto gespeichert. Melde dich in Chrome von ${cloud} ab.`,
+      errorAction: "Zurück zum Start",
+    },
+  },
+});

package/src/styles/effects.css

@@ -514,12 +514,10 @@
   display: none;
 }
 
+/* The fill without a frame comes from the shared `.md-code-block pre` rule;
+   Help keeps its own spacing and syntax colours. */
 .help-document .md-code-block pre {
   margin: 0;
-  border: 0 !important;
-  border-radius: var(--ui-radius-surface) !important;
-  background: var(--ui-surface-subtle) !important;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 72%, transparent);
   padding: 0.875rem 1rem;
 }
 
@@ -602,15 +600,6 @@
   padding: 0;
 }
 
-.help-document :where(blockquote) {
-  margin: 1.25rem 0;
-  border: 0;
-  border-radius: var(--ui-radius-surface);
-  background: var(--ui-surface-subtle);
-  color: var(--color-zinc-600);
-  padding: 0.875rem 1rem;
-}
-
 .help-document .md-table-wrap {
   overflow: hidden;
   margin-block: 0.875rem 1.5rem;
@@ -623,13 +612,11 @@
   border-spacing: 0;
 }
 
-/* `MarkdownView` contributes its generic cell border with element specificity.
-   Keep the Help frame as the only edge owner so those cell borders cannot show
-   through the wrapper's rounded clipping corners. */
+/* Help renders inside `MarkdownView`, which draws the table's row lines. The
+   inner `.md-table-cell` owns the padding. */
 .help-document .md-table :is(th, td) {
   min-width: 0;
   height: auto;
-  border: 0;
   padding: 0;
 }
 
@@ -651,10 +638,6 @@
   word-break: normal;
 }
 
-.help-document .md-table thead {
-  background: var(--ui-surface-subtle);
-}
-
 .help-document .md-table thead .md-table-cell {
   color: var(--color-zinc-700);
   font-size: 0.75rem;
@@ -672,7 +655,8 @@
   font-weight: 400;
 }
 
-.help-document .md-table-cell :where(code) {
+/* Element specificity, so it outranks MarkdownView's inline-code fill. */
+.help-document .md-table-cell code {
   border-radius: 0;
   background: transparent;
   color: inherit;
@@ -681,18 +665,10 @@
   padding: 0;
 }
 
-.dark .help-document .md-table thead {
-  background: var(--ui-surface-subtle);
-}
-
 .dark .help-document .md-table thead .md-table-cell {
   color: var(--color-zinc-200);
 }
 
-.dark .help-document :where(blockquote) {
-  color: var(--color-zinc-400);
-}
-
 .help-document :where(hr) {
   height: 0;
   margin-block: 2rem;

package/src/styles/global.css

@@ -239,6 +239,12 @@ body {
   color: rgb(244 244 245); /* zinc-100 */
 }
 
+/* Pages of the mobile app paint the shell canvas, which their theme-color and
+   html background repeat for the status bar. */
+html:has(.k2b-mobile-shell) body {
+  background-color: var(--k2b-surface-canvas);
+}
+
 .dark {
   color-scheme: dark;
   --color-selection-bg: rgb(59 130 246 / 0.5);
@@ -294,6 +300,11 @@ solid-island {
     border-radius: 0; border: 0; border-bottom: 1px solid var(--ui-border);
     box-shadow: none !important;
   }
+  /* Toasts at the top edge of a phone start below the header instead of
+     covering its menu and search buttons. */
+  :root:has(.cloud-app-canvas .layout-header) {
+    --k2b-toast-offset-top: 2.875rem;
+  }
 
 }
 

package/src/styles/tokens.css

@@ -7,6 +7,9 @@
   --ui-surface-subtle: rgb(248 248 248 / 0.96);
   --ui-surface-muted: rgb(243 244 243 / 0.96);
   --ui-surface-raised: rgb(255 255 255 / 0.99);
+  /* Dimmed text stays at WCAG AA on the muted surfaces it often sits on, such
+     as dialog section groups, not only on the plain surface. */
+  --ui-text-dimmed: color-mix(in srgb, var(--color-zinc-500) 80%, var(--color-zinc-600));
   --ui-border: rgb(218 220 219 / 0.68);
   --ui-border-strong: rgb(207 210 208 / 0.9);
   --ui-hover: rgb(239 240 239 / 0.9);
@@ -135,6 +138,7 @@
   --ui-surface-subtle: color-mix(in srgb, var(--ui-surface) 68%, var(--ui-surface-muted));
   --ui-surface-muted: #20242a;
   --ui-surface-raised: #181d24;
+  --ui-text-dimmed: color-mix(in srgb, var(--color-zinc-500) 40%, var(--color-zinc-400));
   --ui-border: #29313a;
   --ui-border-strong: #3a4552;
   --ui-hover: #252c35;
@@ -222,7 +226,7 @@
 }
 
 @utility text-dimmed {
-  @apply text-zinc-500 dark:text-zinc-500;
+  color: var(--ui-text-dimmed);
 }
 
 @utility text-label {

package/src/styles/utilities-feedback.css

@@ -224,11 +224,21 @@
   }
 }
 
-#ui-toast-container > div {
-  border: 1px solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-surface);
-  background: var(--ui-surface-raised);
-  box-shadow: var(--ui-shadow-float) !important;
+/* Operator banners: a NoticeCard with its close button in the top corner. */
+.k2b-ui .cloud-announcement {
+  position: relative;
+}
+.k2b-ui .cloud-announcement .k2b-notice-card__content {
+  padding-right: 1.75rem;
+}
+.k2b-ui .cloud-announcement .k2b-content-markdown {
+  font-size: inherit;
+  line-height: inherit;
+}
+.k2b-ui .cloud-announcement > .k2b-icon-button {
+  position: absolute;
+  top: 0.875rem;
+  right: 0.875rem;
 }
 
 /* Approval prose follows the surrounding review fields, not document typography. */

package/src/styles/utilities-layout.css

@@ -22,6 +22,10 @@
   background: var(--ui-surface);
   /* Shared surface depth stays consistent with the Layout header. */
   box-shadow: var(--ui-shadow-surface);
+  /* A paper card inside a dialog section group paints its own surface, so its
+     fields return to the muted well instead of the group's white one. */
+  --k2b-field-surface: initial;
+  --k2b-field-hover: initial;
 }
 
 @utility dialog-panel {

package/src/styles/utilities-markdown-editor.css

@@ -431,6 +431,12 @@
   color: var(--ui-app-accent-text);
 }
 
+/* The brackets, weight and icon already mark the widget as a link, so it
+   keeps no underline inside MarkdownView, the same as in Assistant chat. */
+.k2b-ui .k2b-content-markdown a.md-link-widget {
+  text-decoration: none;
+}
+
 .md-link-widget:focus-visible {
   border-radius: 0.125rem;
   outline: var(--k2b-focus-width) solid var(--ui-app-accent-border);
@@ -464,7 +470,20 @@
   @apply bg-zinc-200/40 dark:bg-zinc-800;
 }
 
-.md-code-block pre,
+/* Rendered code blocks match MarkdownView: a fill without a frame that
+   follows `--k2b-field-surface`, so it stays visible on a tinted group. The
+   transparent border keeps the edge visible in forced colours. The rendered
+   wrapper shares the editor's line class, so it drops the line fill. */
+.md-code-block:has(> pre) {
+  background: transparent;
+}
+
+.md-code-block pre {
+  border: 1px solid transparent !important;
+  border-radius: var(--ui-radius-control) !important;
+  background: var(--k2b-field-surface, var(--ui-surface-muted)) !important;
+}
+
 .md-mermaid-block,
 .md-katex-block {
   border: 1px solid rgb(228 228 231 / 0.72) !important;
@@ -479,7 +498,6 @@
   padding: 0.75rem;
 }
 
-.dark .md-code-block pre,
 .dark .md-mermaid-block,
 .dark .md-katex-block {
   border-color: rgb(63 63 70 / 0.72) !important;

package/src/styles/utilities-markdown-table.css

@@ -1,7 +1,8 @@
-/* Markdown tables use the same quiet visual language as DataTable: one
-   contained surface, one header band, and hairline row separators. Used by
-   both the server-side `marked` renderer and the CodeMirror table widget so
-   read-mode and edit-mode look identical.
+/* Markdown tables use the same hairline language as @k2b/ui MarkdownView:
+   no frame or header fill, a stronger line under the header, hairline row
+   separators, and the outer columns flush with the prose. Used by both the
+   server-side `marked` renderer and the CodeMirror table widget so read-mode
+   and edit-mode look identical.
 
    Three-layer markup:
      <div class="md-table-wrap">      ← horizontal scroll owner
@@ -13,10 +14,13 @@
   overflow: clip;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
-  border: 1px solid var(--ui-border);
-  border-radius: var(--ui-radius-surface);
-  background: var(--ui-surface);
-  box-shadow: var(--ui-shadow-surface);
+}
+
+/* Inside MarkdownView a table takes the same block spacing as its own
+   tables, so two tables in a row do not read as one. Hosts such as Help keep
+   their own spacing. */
+:where(.k2b-ui .k2b-content-markdown) .md-table-wrap {
+  margin-block: 1em;
 }
 
 .md-table {
@@ -39,12 +43,8 @@
   border: 0;
 }
 
-.md-table thead {
-  background: var(--ui-data-header);
-}
-
 .md-table thead tr {
-  border-bottom: 1px solid var(--ui-data-divider);
+  border-bottom: 1px solid var(--ui-border-strong);
 }
 
 .md-table tbody tr:not(:last-child) {
@@ -87,12 +87,29 @@
   color: inherit;
 }
 
-/* Headers inherit the single shared band instead of drawing per-cell fills. */
 .md-table thead .md-table-cell {
+  padding-top: 0;
   background: transparent;
   font-weight: 600;
 }
 
+.md-table th:first-child > .md-table-cell,
+.md-table td:first-child > .md-table-cell {
+  padding-left: 0;
+}
+
+.md-table th:last-child > .md-table-cell,
+.md-table td:last-child > .md-table-cell {
+  padding-right: 0;
+}
+
+/* Inside MarkdownView the span stays the only padding owner. */
+.k2b-ui .k2b-content-markdown .md-table th,
+.k2b-ui .k2b-content-markdown .md-table td {
+  padding: 0;
+  font-size: inherit;
+}
+
 .dark .md-table thead .md-table-cell {
   background: transparent;
 }
@@ -109,9 +126,10 @@
   justify-content: center;
 }
 
-/* Summary rows use the same quiet band as a DataTable footer. */
-.md-table tbody tr.md-table-total-row {
-  background: var(--ui-data-header);
+/* A summary row sits under the same stronger line as the header. The line is
+   on the cells, so it also wins over a row separator or MarkdownView's. */
+.k2b-ui .md-table tbody tr.md-table-total-row > td {
+  border-top: 1px solid var(--ui-border-strong);
 }
 
 .md-table tbody tr.md-table-total-row .md-table-cell {

package/scripts/build-pdf-renderer.ts

@@ -1,39 +0,0 @@
-import { cp, mkdir } from "node:fs/promises";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-import { z } from "zod";
-
-/** Package the decoder and native assets only for bundles importing PDF vision. */
-export async function buildPdfRenderer(dist: string) {
-  const framework = resolve(dirname(fileURLToPath(import.meta.url)), "..");
-  const out = resolve(dist, "pdf-render");
-  await mkdir(out, { recursive: true });
-  const worker = await Bun.build({
-    entrypoints: [resolve(framework, "src/ai/pdf-render-worker.ts")],
-    target: "bun",
-    outdir: out,
-    naming: "worker.js",
-    external: ["pdfjs-dist", "@napi-rs/canvas"],
-  });
-  if (!worker.success) throw new Error(`PDF decoder build failed: ${worker.logs.join("\n")}`);
-  for (const name of ["pdfjs-dist", "@napi-rs/canvas"]) {
-    const source = dirname(Bun.resolveSync(`${name}/package.json`, framework));
-    await cp(source, resolve(out, "node_modules", name), { recursive: true, dereference: true });
-    if (name !== "@napi-rs/canvas") continue;
-    const manifest = z
-      .object({ optionalDependencies: z.record(z.string(), z.string()) })
-      .parse(await Bun.file(resolve(source, "package.json")).json());
-    let nativePackages = 0;
-    for (const dependency of Object.keys(manifest.optionalDependencies)) {
-      let location: string;
-      try {
-        location = dirname(Bun.resolveSync(`${dependency}/package.json`, source));
-      } catch {
-        continue;
-      } // Only the installed target-platform binary is needed.
-      await cp(location, resolve(out, "node_modules", dependency), { recursive: true, dereference: true });
-      nativePackages++;
-    }
-    if (!nativePackages) throw new Error("PDF decoder needs an installed native canvas binary for the build platform.");
-  }
-}