@valentinkolb/cloud 0.3.1 → 0.5.0

package/src/ssr/NavMenu.island.tsx

@@ -1,12 +1,6 @@
 import type { Role } from "../contracts/shared";
 import { Dropdown } from "../ui";
 
-type MobileAppLink = {
-  href: string;
-  iconClass: string;
-  label: string;
-};
-
 /**
  * Minimal user projection for the nav menu — covers exactly what's rendered
  * (initials, display name, uid, profile flag, admin role check). Avoids
@@ -22,11 +16,8 @@ export type NavMenuUser = {
 
 type NavMenuProps = {
   user?: NavMenuUser;
-  mobileApps: MobileAppLink[];
 };
 
-const hasRole = (roles: Role[], ...required: Role[]) => required.some((role) => roles.includes(role));
-
 /** Navigation dropdown menu - always visible, adapts to auth state. */
 export default function NavMenu(props: NavMenuProps) {
   const getElements = () => [
@@ -61,36 +52,6 @@ export default function NavMenu(props: NavMenuProps) {
             href: "/auth/login",
           },
         ]),
-    // Section: Apps (mobile only — on desktop, tabs/rail handle this)
-    ...(props.user
-      ? [
-          {
-            element: (
-              <div class="md:hidden">
-                <div class="px-4 pt-3 pb-1 text-xs uppercase tracking-wider font-medium text-zinc-500">Apps</div>
-                {props.mobileApps.map((app) => (
-                  <a
-                    href={app.href}
-                    class="flex w-full items-center gap-3 px-4 py-2 text-sm transition-colors hover:bg-white/30 dark:hover:bg-white/10 text-zinc-700 dark:text-zinc-300"
-                  >
-                    <i class={app.iconClass} />
-                    <span>{app.label}</span>
-                  </a>
-                ))}
-                {hasRole(props.user.roles, "admin") && (
-                  <a
-                    href="/admin"
-                    class="flex w-full items-center gap-3 px-4 py-2 text-sm transition-colors hover:bg-white/30 dark:hover:bg-white/10 text-zinc-700 dark:text-zinc-300"
-                  >
-                    <i class="ti ti-shield-cog" />
-                    <span>Admin</span>
-                  </a>
-                )}
-              </div>
-            ),
-          },
-        ]
-      : []),
   ];
 
   return (

package/src/ssr/ThemeToggleRail.island.tsx

@@ -1,12 +1,12 @@
 import { createSignal } from "solid-js";
-import { theme, type ThemeMode } from "@valentinkolb/stdlib/browser";
+import { getCurrentThemePreference, setThemePreference, type CloudTheme } from "../shared/theme";
 
 /** Theme toggle button for the desktop rail navigation. */
 export default function ThemeToggleRail() {
-  const [mode, setMode] = createSignal<ThemeMode>(typeof document !== "undefined" ? theme.getCurrent() : "light");
+  const [mode, setMode] = createSignal<CloudTheme>(getCurrentThemePreference());
 
   const toggleTheme = () => {
-    setMode(theme.toggle());
+    setMode(setThemePreference(mode() === "dark" ? "light" : "dark"));
   };
 
   return (

package/src/ssr/TimezoneCookie.island.tsx

@@ -0,0 +1,23 @@
+import { cookies } from "@valentinkolb/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;
+}

package/src/ssr/islands/index.ts

@@ -1 +1,14 @@
 export { default as SearchBar } from "./SearchBar.island";
+import { LayoutHelp } from "../LayoutHelp";
+import { AppLaunchpadButton, AppLaunchpadProvider } from "../AppLaunchpad.island";
+
+export { AppLaunchpadButton, AppLaunchpadProvider, openAppLaunchpad, setAppLaunchpadContext } from "../AppLaunchpad.island";
+export type { AppLaunchpadApp, AppLaunchpadLegalLink } from "../AppLaunchpad.island";
+export { LayoutHelp, openLayoutHelpDialog } from "../LayoutHelp";
+export type { LayoutHelpProps, LayoutHelpTab } from "../LayoutHelp";
+
+export const Layout = {
+  Help: LayoutHelp,
+  AppLaunchpadButton,
+  AppLaunchpadProvider,
+};

package/src/styles/base-popover.css

@@ -4,8 +4,11 @@ solid-island {
   display: contents;
 }
 
-/* Popover positioning */
-[popover]:not(.paper) {
+/* Popover positioning. Strip the UA-default white box for popovers
+   that don't opt into one of our paper-ish surfaces (`.paper`,
+   `.popup`) — those are typically tooltips / soft-hint popovers that
+   provide their own chrome. */
+[popover]:not(.paper):not(.popup) {
   background: transparent;
   border: none;
 }

package/src/styles/effects.css

@@ -45,12 +45,7 @@
     content: "";
     position: absolute;
     inset: -50%;
-    background: linear-gradient(
-      115deg,
-      transparent 0%,
-      rgba(255, 255, 255, 0.25) 50%,
-      transparent 100%
-    );
+    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
     animation: shimmer 5s ease-in-out infinite;
   }
 }
@@ -63,3 +58,89 @@
     transform: translateX(100%);
   }
 }
+
+/* Dashboard launchpad panel. Scoped through :has() so the calmer backdrop only
+   applies to the dashboard app picker, not every bare dialog. */
+dialog:has(.launchpad-panel)::backdrop {
+  background: rgb(0 0 0 / 0.45);
+  backdrop-filter: blur(8px);
+}
+
+.dark dialog:has(.launchpad-panel)::backdrop {
+  background: rgb(0 0 0 / 0.35);
+}
+
+.launchpad-panel {
+  background: rgb(255 255 255 / 0.96);
+  border: 1px solid rgb(228 228 231 / 0.82);
+  border-radius: 1.5rem;
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 0.9),
+    0 28px 68px -42px rgb(24 24 27 / 0.48);
+}
+
+.dark .launchpad-panel {
+  background: linear-gradient(180deg, rgb(24 24 27 / 0.98), rgb(15 15 17 / 0.98));
+  border-color: rgb(255 255 255 / 0.13);
+  box-shadow:
+    inset 0 1px 0 0 rgb(255 255 255 / 0.08),
+    0 28px 68px -36px rgb(0 0 0 / 0.82);
+}
+
+/* Dashboard launchpad app icon. One app colour drives the glyph and graded rim;
+   the face stays clean so the tile feels crisp instead of plastic. */
+.launchpad-panel .app-icon {
+  --icon-face: #ffffff;
+  --rim-top: color-mix(in oklab, var(--app-icon-color), white 34%);
+  --rim-bottom: color-mix(in oklab, var(--app-icon-color), black 12%);
+  --rim-top-hover: color-mix(in oklab, var(--app-icon-color), white 2%);
+  --rim-bottom-hover: color-mix(in oklab, var(--app-icon-color), black 30%);
+  --glyph: var(--app-icon-color);
+  --glyph-hover: var(--app-icon-color);
+  --drop: none;
+
+  background:
+    linear-gradient(var(--icon-face), var(--icon-face)) padding-box,
+    linear-gradient(180deg, var(--rim-top), var(--rim-bottom)) border-box;
+  border: 2.5px solid transparent;
+  box-shadow: var(--drop);
+  color: var(--glyph);
+  transition:
+    background 0.18s ease,
+    box-shadow 0.18s ease,
+    color 0.18s ease;
+}
+
+@supports (color: oklch(from red l c h)) {
+  .launchpad-panel .app-icon {
+    --glyph: oklch(from var(--app-icon-color) min(l, 0.5) c h);
+    --glyph-hover: oklch(from var(--app-icon-color) min(l, 0.4) c h);
+  }
+}
+
+.dark .launchpad-panel .app-icon {
+  --icon-face: #202026;
+  --rim-top: color-mix(in oklab, var(--app-icon-color), white 30%);
+  --rim-bottom: color-mix(in oklab, var(--app-icon-color), black 24%);
+  --rim-top-hover: color-mix(in oklab, var(--app-icon-color), white 54%);
+  --rim-bottom-hover: color-mix(in oklab, var(--app-icon-color), white 6%);
+  --glyph: var(--app-icon-color);
+  --glyph-hover: color-mix(in oklab, var(--app-icon-color), white 32%);
+  --drop: 0 10px 20px -12px rgb(0 0 0 / 0.7);
+}
+
+@supports (color: oklch(from red l c h)) {
+  .dark .launchpad-panel .app-icon {
+    --glyph: oklch(from var(--app-icon-color) max(l, 0.82) c h);
+    --glyph-hover: oklch(from var(--app-icon-color) max(l, 0.96) c h);
+  }
+}
+
+/* Hover changes only the icon tile, never the whole icon+label item. */
+.launchpad-panel .group:hover > .app-icon,
+.launchpad-panel .app-icon:hover {
+  background:
+    linear-gradient(var(--icon-face), var(--icon-face)) padding-box,
+    linear-gradient(180deg, var(--rim-top-hover), var(--rim-bottom-hover)) border-box;
+  color: var(--glyph-hover);
+}

package/src/styles/global.css

@@ -10,12 +10,36 @@
 @custom-variant light (html:not(.dark) &);
 
 @import "@tabler/icons-webfont/dist/tabler-icons.css";
-@import "@fontsource-variable/jetbrains-mono";
+
+/* IBM Plex family — Sans for body, Mono for code, Condensed for badges/tags.
+   Per-weight imports keep the network payload predictable; we deliberately
+   skip the lighter weights (100–300) and italic-condensed since the design
+   system never uses them. */
+@import "@fontsource/ibm-plex-sans/400.css";
+@import "@fontsource/ibm-plex-sans/400-italic.css";
+@import "@fontsource/ibm-plex-sans/500.css";
+@import "@fontsource/ibm-plex-sans/600.css";
+@import "@fontsource/ibm-plex-sans/700.css";
+@import "@fontsource/ibm-plex-mono/400.css";
+@import "@fontsource/ibm-plex-mono/400-italic.css";
+@import "@fontsource/ibm-plex-mono/500.css";
+@import "@fontsource/ibm-plex-mono/600.css";
+@import "@fontsource/ibm-plex-sans-condensed/400.css";
+@import "@fontsource/ibm-plex-sans-condensed/500.css";
+@import "@fontsource/ibm-plex-sans-condensed/600.css";
+@import "@fontsource/ibm-plex-sans-condensed/700.css";
+
 @import "./tokens.css";
 @import "./utilities-buttons.css";
 @import "./utilities-layout.css";
 @import "./utilities-navigation.css";
 @import "./utilities-feedback.css";
+@import "./utilities-detail.css";
+@import "./utilities-table-tile.css";
+@import "./utilities-script.css";
+@import "./utilities-markdown-editor.css";
+@import "./utilities-completion.css";
+@import "./utilities-code-display.css";
 @import "./base-popover.css";
 @import "./effects.css";
 @import "./input.css";
@@ -24,11 +48,34 @@
   --color-dark: rgb(9 9 11);
   --color-selection-bg: rgb(147 197 253 / 0.45);
   --color-selection-fg: rgb(15 23 42);
+
+  /* Type system — IBM Plex family.
+     - Sans: default body / UI text (readable, neutral, slight personality)
+     - Mono: code, IDs, technical values (matches sans proportions)
+     - Condensed: badges, tags, dense labels where Sans is too wide
+
+     Tailwind 4 derives `font-sans` / `font-mono` / `font-condensed`
+     utilities from these tokens. CSS consumers can also reference them
+     via `var(--font-sans)` etc. (e.g. CodeMirror theme overrides). */
+  --font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-condensed: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
 }
 
 :root {
-  --theme-shadow-elevated: none;
-  --theme-shadow-hover: none;
+  color-scheme: light;
+  /* Depth language (visual redesign). Inset bevel for in-flow surfaces (clip-safe),
+     recess for input wells, press for :active, float for PORTALED overlays only.
+     `--theme-shadow-elevated` flows the bevel through the token that `paper` and
+     the Layout header already consume, so they stay consistent. */
+  --theme-bevel-top: inset 0 1px 0 0 rgb(255 255 255 / 0.85);
+  --theme-bevel-bottom: inset 0 -1px 1px 0 rgb(0 0 0 / 0.05);
+  --theme-recess: inset 0 1px 2px rgb(0 0 0 / 0.08);
+  --theme-recess-sm: inset 0 1px 1px rgb(0 0 0 / 0.08);
+  --theme-press: inset 0 2px 4px rgb(0 0 0 / 0.19), inset 0 1px 1px rgb(0 0 0 / 0.1);
+  --theme-shadow-float: 0 12px 32px -10px rgb(0 0 0 / 0.22), 0 4px 10px -4px rgb(0 0 0 / 0.1);
+  --theme-shadow-elevated: var(--theme-bevel-top), var(--theme-bevel-bottom);
+  --theme-shadow-hover: var(--theme-bevel-top), var(--theme-bevel-bottom), 0 6px 16px -6px rgb(0 0 0 / 0.14);
   --theme-input-py: 0.375rem;
   --theme-input-px: 0.5rem;
   --theme-list-active-border: none;
@@ -43,11 +90,12 @@
   --theme-rail-item-active-border-r: none;
   --theme-rail-item-inactive-border-r: none;
   --theme-divider: 1px solid rgb(228 228 231);
+  --theme-focus-ring: inset 0 0 0 2px color-mix(in srgb, var(--color-blue-500) 45%, transparent);
 }
 
 * {
   font-variant-ligatures: contextual;
-  font-family: "JetBrains Mono Variable", monospace;
+  font-family: var(--font-sans);
   scrollbar-width: thin;
   scrollbar-color: rgb(161 161 170 / 0.4) transparent;
 }
@@ -56,6 +104,84 @@
   scrollbar-color: rgb(82 82 91 / 0.5) transparent;
 }
 
+.dark {
+  --theme-focus-ring: inset 0 0 0 2px color-mix(in srgb, var(--color-blue-400) 55%, transparent);
+}
+
+/* stdlib charts: make the SVG fill its wrapping element.
+   stdlib emits `<svg viewBox="0 0 W H">` without `width`/`height`
+   attributes, which would otherwise fall back to the browser's
+   replaced-element default (300×150) and either overflow tiny
+   containers or sit dwarfed inside wider ones. `display: block`
+   stops the inline-baseline gap; `width/height: 100%` lets the
+   container's CSS box drive the SVG size, and the `<Chart>`
+   wrapper passes the measured pixel dimensions back to stdlib so
+   the viewBox matches — no aspect distortion, no letterboxing. */
+.stdlib-chart {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+:root .stdlib-chart {
+  --stdlib-chart-c1: #14b8a6;
+  --stdlib-chart-c2: #f97316;
+  --stdlib-chart-c3: #8b5cf6;
+  --stdlib-chart-c4: #ec4899;
+  --stdlib-chart-c5: #22c55e;
+  --stdlib-chart-c6: #eab308;
+  --stdlib-chart-c7: #06b6d4;
+  --stdlib-chart-c8: #ef4444;
+}
+
+/* stdlib charts — dark-mode overrides.
+
+   stdlib's embedded <style> hardcodes a light-mode `color: #1f2937`
+   on .stdlib-chart and `stroke: white` on slice/point/outlier
+   separators. The hardcoded color leaves axis labels / tick text
+   unreadable on a dark background, and white slice strokes look
+   harsh against zinc-950. We override BOTH from outside the SVG
+   with higher specificity (parent `.dark` selector beats the
+   embedded one-class rule).
+
+   Why specificity matters: stdlib's <style> lives INSIDE the SVG,
+   so its rules are part of the document. Both rule sets have one
+   class selector each (`.stdlib-chart`), and the embedded one is
+   parsed AFTER global.css — without raising specificity here, the
+   embedded rule would win and dark mode would stay broken. The
+   `.dark` parent on `<html>` (set by the platform's theme toggle)
+   bumps these rules to two classes, beating stdlib's one-class
+   embedded defaults cleanly. */
+.dark .stdlib-chart {
+  color: rgb(228 228 231); /* zinc-200 — readable on zinc-950 */
+}
+.dark .stdlib-chart .stdlib-chart-slice,
+.dark .stdlib-chart .stdlib-chart-point,
+.dark .stdlib-chart .stdlib-chart-box-outlier {
+  /* zinc-950 to match the dark page background, so slice / point
+     separators read as "gaps between segments" rather than visible
+     white lines against a dark surface. */
+  stroke: rgb(9 9 11);
+}
+
+/* stdlib charts — scientific data-viz refinement.
+
+   stdlib already renders the structure (gridlines, axes, ticks, flat
+   fills); the only thing missing for a precise "measurement" look is
+   the typography. Numeric axis ticks + bar values read as monospaced,
+   tabular figures so columns of numbers line up the way they do in a
+   plotting tool. Two-class selectors (`.stdlib-chart .stdlib-chart-…`)
+   beat stdlib's one-class embedded <style> the same way the dark-mode
+   overrides above do. font-family is otherwise unset by stdlib, so the
+   chart would inherit the app sans — we pin the numeric labels to the
+   platform mono stack (IBM Plex Mono via @fontsource). */
+.stdlib-chart .stdlib-chart-tick-label,
+.stdlib-chart .stdlib-chart-bar-value,
+.stdlib-chart .stdlib-chart-axis-label {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
 *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
@@ -89,20 +215,31 @@
   background: transparent;
 }
 
+.multi-select-pill-strip {
+  scrollbar-width: thin;
+}
+
 body {
   /* Explicit values — avoids @apply layer ordering issues with multiple CSS files */
   background-color: rgb(250 250 250); /* zinc-50 */
-  color: rgb(24 24 27);               /* zinc-900 */
+  color: rgb(24 24 27); /* zinc-900 */
 }
 
 .dark body {
-  background-color: rgb(9 9 11);  /* zinc-950 */
-  color: rgb(244 244 245);        /* zinc-100 */
+  background-color: rgb(9 9 11); /* zinc-950 */
+  color: rgb(244 244 245); /* zinc-100 */
 }
 
 .dark {
-  --theme-shadow-elevated: none;
-  --theme-shadow-hover: none;
+  color-scheme: dark;
+  --theme-bevel-top: inset 0 1px 0 0 rgb(255 255 255 / 0.07);
+  --theme-bevel-bottom: inset 0 -1px 1px 0 rgb(0 0 0 / 0.4);
+  --theme-recess: inset 0 1px 2px rgb(0 0 0 / 0.45);
+  --theme-recess-sm: inset 0 1px 1px rgb(0 0 0 / 0.4);
+  --theme-press: inset 0 2px 4px rgb(0 0 0 / 0.5), inset 0 1px 1px rgb(0 0 0 / 0.3);
+  --theme-shadow-float: 0 14px 36px -10px rgb(0 0 0 / 0.6), 0 4px 12px -4px rgb(0 0 0 / 0.4);
+  --theme-shadow-elevated: var(--theme-bevel-top), var(--theme-bevel-bottom);
+  --theme-shadow-hover: var(--theme-bevel-top), var(--theme-bevel-bottom), 0 6px 18px -6px rgb(0 0 0 / 0.5);
   --theme-list-active-bg: rgb(39 39 42);
   --theme-list-hover-bg: rgb(30 30 33);
   --theme-tab-active-bg: rgb(39 39 42);

package/src/styles/input.css

@@ -17,6 +17,7 @@ button[disabled],
 /* Global Checkbox Styling */
 input[type="checkbox"] {
   @apply appearance-none w-4 h-4 bg-white dark:bg-black border border-zinc-300 dark:border-zinc-700 cursor-pointer transition-all duration-200 inline-flex items-center justify-center m-0 align-middle rounded;
+  box-shadow: var(--theme-recess-sm);
 }
 
 input[type="checkbox"]::before {
@@ -27,6 +28,7 @@ input[type="checkbox"]::before {
 
 input[type="checkbox"]:checked {
   @apply bg-blue-500 border-blue-500;
+  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.35);
 }
 
 input[type="checkbox"]:checked::before {
@@ -42,7 +44,7 @@ input[type="checkbox"]:focus {
 }
 
 input[type="checkbox"]:focus-visible {
-  @apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-zinc-900;
+  @apply focus-ui;
 }
 
 input[type="checkbox"]:disabled {