@valentinkolb/cloud 0.1.0

package/src/ssr/Layout.tsx

@@ -0,0 +1,326 @@
+import { hasRole, type User } from "../contracts/shared";
+import type { JSX } from "solid-js/jsx-runtime";
+import NavMenu from "./NavMenu.island";
+import MoreAppsDropdown from "./MoreAppsDropdown.island";
+import ThemeToggleRail from "./ThemeToggleRail.island";
+import HotkeysHelpRail from "./HotkeysHelpRail.island";
+import GlobalSearchTrigger from "./GlobalSearchTrigger.island";
+import Footer from "./Footer.island";
+import { dates } from "../shared";
+import { getRuntimeContext, type RuntimeContext } from "./runtime";
+import { resolveNavMatch } from "../contracts/app"; // ==========================
+import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
+// Types
+type Breadcrumb = { title: string; href?: string };
+type AppLink = { iconClass: string; label: string; href: string; match: string };
+type LayoutContext = {
+  get(key: "user"): User | undefined;
+  get(key: "page"): { theme?: "light" | "dark" };
+  get(key: "runtime"): RuntimeContext;
+  /**
+   * Per-request settings snapshot (populated by snapshot middleware in
+   * `_internal/define-app.ts`). Loose-typed at this layer so Layout can be
+   * shared across apps with different SettingsMaps; reading core keys like
+   * `app.name`/`app.copyright` is safe because every container's snapshot
+   * includes core's keys.
+   */
+  get(key: "settings"): Record<string, any>;
+  req: { raw: { headers: Headers; url: string } };
+};
+type LayoutProps = {
+  children: JSX.Element;
+  c: LayoutContext;
+  title?: string | Breadcrumb[];
+  fullPage?: boolean /** Remove main padding for fullwidth app layouts */;
+  fullWidth?: boolean;
+}; // ==========================
+// Helpers
+function active(pathname: string, match: string): string {
+  return pathname.startsWith(match) ? "active" : "";
+}
+function buildNavLinks(apps: RuntimeContext["apps"], user: User | undefined): { primary: AppLink[]; more: AppLink[] } {
+  const links = apps
+    .filter((app) => !!app.nav && app.nav.section !== "hidden")
+    .filter((app) => {
+      if (app.nav?.requiresAuth && !user) return false;
+      if (
+        app.nav?.requiresRoles &&
+        (!user ||
+          !app.nav.requiresRoles.some((role) => {
+            if (role === "guest") return user.profile === "guest";
+            return hasRole(user, role);
+          }))
+      ) {
+        return false;
+      }
+      return true;
+    })
+    .map((app) => ({
+      section: app.nav!.section,
+      link: {
+        iconClass: app.icon,
+        label: app.name,
+        href: app.nav!.href,
+        match: resolveNavMatch(app) ?? app.nav!.href.split("?")[0] ?? app.nav!.href,
+      } satisfies AppLink,
+    }));
+  const primary = links.filter((entry) => entry.section === "primary").map((entry) => entry.link);
+  const more = links.filter((entry) => entry.section === "more").map((entry) => entry.link);
+  if (user && hasRole(user, "admin")) {
+    more.push({ iconClass: "ti ti-settings", label: "Admin", href: "/admin", match: "/admin" });
+  }
+  return { primary, more };
+} // ==========================
+// Warning Components
+const WARN_DAYS = 14;
+function ProfileWarnings({ user }: { user: User }) {
+  if (user.profile === "guest") return null;
+  const missing: string[] = [];
+  if (!user.displayName) missing.push("display name");
+  if (!user.givenname) missing.push("first name");
+  if (!user.sn) missing.push("last name");
+  if (missing.length === 0) return null;
+  return (
+      <a href="/me" class="flex items-center gap-2 text-xs info-block-warning no-underline mb-2 md:mb-1.5 mx-2 md:ml-0 md:mr-1.5">
+        <i class="ti ti-user-exclamation" /> <span>Your profile is incomplete: {missing.join(",")} not set.</span>
+      </a>
+  );
+}
+function ExpiryWarnings({ user }: { user: User }) {
+  const now = Date.now();
+  const warnThreshold = now + WARN_DAYS * 24 * 60 * 60 * 1000;
+  const warnings: { icon: string; message: string; expired: boolean }[] = [];
+  if (user.accountExpires) {
+    const expires = new Date(user.accountExpires).getTime();
+    const accountLabel = user.provider === "ipa" ? "account" : user.profile === "guest" ? "guest account" : "account";
+    if (expires < now) warnings.push({ icon: "ti-calendar-event", message: "Your account has expired.", expired: true });
+    else if (expires < warnThreshold)
+      warnings.push({
+        icon: "ti-calendar-event",
+        message: `Your ${accountLabel} expires on ${dates.formatDate(user.accountExpires)}.`,
+        expired: false,
+      });
+  }
+  if (user.ipa?.passwordExpires) {
+    const expires = new Date(user.ipa.passwordExpires).getTime();
+    if (expires < now)
+      warnings.push({ icon: "ti-key", message: "Your password has expired. Please log out and in again to change it.", expired: true });
+    else if (expires < warnThreshold)
+      warnings.push({ icon: "ti-key", message: `Your password expires on ${dates.formatDate(user.ipa.passwordExpires)}.`, expired: false });
+  }
+  if (warnings.length === 0) return null;
+  return (
+    <div class="flex flex-col gap-1 px-2">
+      {" "}
+      {warnings.map((w) => (
+        <div class={`flex items-center gap-2 text-xs ${w.expired ? "info-block-danger" : "info-block-warning"}`}>
+          {" "}
+          <i class={`ti ${w.icon}`} /> <span>{w.message}</span>{" "}
+        </div>
+      ))}{" "}
+    </div>
+  );
+} // ==========================
+// Sub-Components
+function BreadcrumbNav({ breadcrumbs }: { breadcrumbs: Breadcrumb[] }) {
+  return (
+    <nav class="flex items-center gap-1 sm:gap-2 min-w-0 text-sm md:text-xs">
+      {" "}
+      {breadcrumbs.map((crumb, i) => {
+        const isLast = i === breadcrumbs.length - 1;
+        return (
+          <>
+            {" "}
+            {i > 0 && <span class="text-zinc-400 dark:text-zinc-600 text-xs">/</span>}{" "}
+            {crumb.href && !isLast ? (
+              <a href={crumb.href} class="text-dimmed hover:text-primary truncate">
+                {" "}
+                {crumb.title}{" "}
+              </a>
+            ) : (
+              <span class="font-semibold text-primary truncate">{crumb.title}</span>
+            )}{" "}
+          </>
+        );
+      })}{" "}
+    </nav>
+  );
+} // ==========================
+// Main Layout
+export default function Layout({ children, c, title, fullPage, fullWidth }: LayoutProps) {
+  const runtime = getRuntimeContext(c);
+  const cookie = c.req.raw.headers.get("Cookie") ?? "";
+  const themeMatch = cookie.match(/theme=([^;]+)/);
+  c.get("page").theme = themeMatch?.[1] === "dark" ? "dark" : "light";
+  const user = c.get("user");
+  const pathname = new URL(c.req.raw.url).pathname;
+  const { primary: primaryApps, more: moreApps } = buildNavLinks(runtime.apps, user);
+  const allApps = [...primaryApps, ...moreApps];
+  const mobileApps = allApps.filter((app) => app.href !== "/admin");
+  const searchHelpApps: GlobalSearchHelpApp[] = runtime.apps
+    .filter((app) => (app.searchTags?.length ?? 0) > 0)
+    .map((app) => ({
+      appId: app.id,
+      appName: app.name,
+      appIcon: app.icon,
+      help: app.searchHelp,
+      tags: [...new Set((app.searchTags ?? []).map((tag) => tag.toLowerCase()))],
+      tagHelp: [...(app.searchTagHelp ?? [])],
+    }))
+    .sort((a, b) => a.appName.localeCompare(b.appName));
+  const settings = c.get("settings");
+  const appName = settings?.app?.name || "Cloud";
+  // Project the user record down to what NavMenu actually renders. Without
+  // this, the full `User` (mail, ssh keys, phone, address, all group
+  // memberships) gets serialized into the island's data-props HTML on every
+  // authenticated page — defense-in-depth.
+  const navMenuUser = user
+    ? {
+        uid: user.uid,
+        displayName: user.displayName,
+        profile: user.profile,
+        roles: user.roles,
+      }
+    : undefined;
+  // Aggregate legalLinks from every running app (last-wins on duplicate href).
+  const legalLinks = (() => {
+    const seen = new Map<string, { label: string; href: string; icon?: string }>();
+    for (const app of runtime.apps) {
+      for (const link of app.legalLinks ?? []) seen.set(link.href, { ...link });
+    }
+    return [...seen.values()];
+  })();
+  const page = c.get("page") as Record<string, unknown>;
+  if (!page.title) page.title = typeof title === "string" ? title : appName;
+  const breadcrumbs: Breadcrumb[] = !title ? [{ title: appName }] : typeof title === "string" ? [{ title }] : title;
+  const showRail =
+    !!user; /* * Grid layout: * Rail mode: [rail | content] * No rail: [content] * * Rows: [header] [main] [footer?] * The rail spans rows 1+2 via grid-row, so logo aligns with the header. */
+  const contentPadding = "p-2.5 md:p-0 md:pr-2 md:pb-2";
+  const gridClass = showRail
+    ? "grid-cols-1 md:grid-cols-[auto_1fr] grid-rows-[auto_1fr]"
+    : `grid-cols-1 ${!fullPage ? "grid-rows-[auto_1fr_auto]" : "grid-rows-[auto_1fr]"}`;
+  return (
+    <div
+      class={`grid min-h-screen w-screen relative md:h-screen md:overflow-hidden bg-zinc-50 dark:bg-zinc-950 ${gridClass}`}
+    >
+      {" "}
+      {/* ── Rail: logo cell (row 1, col 1) — grid gives it the same height as the header ── */}{" "}
+      {showRail && (
+        <div class="hidden md:flex items-center justify-center w-12 bg-white/20 dark:bg-zinc-950/20">
+          {" "}
+          <a href="/" aria-label="Home">
+            {" "}
+            <img src="/branding/logo" alt="Logo" class="h-5 w-5" />{" "}
+          </a>{" "}
+        </div>
+      )}{" "}
+      {/* ── Header (row 1) ── */}{" "}
+      <header
+        class="flex justify-between items-center m-2 md:ml-0 md:m-1.5 py-1.5 md:py-2 px-2 md:px-3 paper"
+        style="box-shadow: var(--theme-shadow-elevated)"
+      >
+        {" "}
+        <div class="flex items-center gap-2 min-w-0">
+          {" "}
+          {/* Logo — only when no rail */}{" "}
+          {!showRail && (
+            <a href="/" class="shrink-0 flex items-center" aria-label="Home">
+              {" "}
+              <img src="/branding/logo" alt="Logo" class="h-6 w-6" />{" "}
+            </a>
+          )}{" "}
+          {showRail && (
+            <a
+              href="/"
+              aria-label="Home"
+              class="md:hidden inline-flex items-center justify-center w-8 h-8 rounded-lg text-dimmed hover:text-secondary hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+            >
+              <img src="/branding/logo" alt="Home" class="h-4 w-4" />
+            </a>
+          )}{" "}
+          {/* Breadcrumbs — desktop, rail mode only */}{" "}
+          <div class="hidden md:flex items-center min-w-0">
+            {" "}
+            <BreadcrumbNav breadcrumbs={breadcrumbs} />{" "}
+          </div>{" "}
+          {/* Mobile breadcrumb */}{" "}
+          <div class="md:hidden flex items-center min-w-0">
+            {" "}
+            <BreadcrumbNav breadcrumbs={breadcrumbs.slice(-1)} />{" "}
+          </div>{" "}
+        </div>{" "}
+        <div class="flex items-center shrink-0 gap-1">
+          {user && (
+            <GlobalSearchTrigger
+              variant="header"
+              registerHotkey
+              class={showRail ? "md:hidden" : ""}
+              searchHelpApps={searchHelpApps}
+            />
+          )}
+          {" "}
+          {/* Desktop: direct /me link with avatar (logged in) or NavMenu (not logged in) */}{" "}
+          {user ? (
+            <>
+              {" "}
+              <a href="/me" class="hidden md:flex items-center justify-center cursor-pointer" aria-label="Profile">
+                {" "}
+                <span class="inline-flex items-center justify-center w-6 h-6 text-[9px] font-semibold rounded-full bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-300">
+                  {" "}
+                  {(user.displayName || user.uid).slice(0, 2).toUpperCase()}{" "}
+                </span>{" "}
+              </a>{" "}
+              <div class="md:hidden">
+                {" "}
+                <NavMenu user={navMenuUser} mobileApps={mobileApps} />{" "}
+              </div>{" "}
+            </>
+          ) : (
+            <NavMenu user={navMenuUser} mobileApps={mobileApps} />
+          )}{" "}
+        </div>{" "}
+      </header>{" "}
+      {/* ── Rail: apps cell (row 2, col 1) ── */}{" "}
+      {showRail && (
+        <div class="hidden md:flex flex-col items-center w-12 gap-1 pt-1 bg-white/20 dark:bg-zinc-950/20">
+          {" "}
+          {primaryApps.map((app) => (
+            <a href={app.href} class={`rail-item ${active(pathname, app.match) ? "rail-item-active" : ""}`} title={app.label}>
+              {" "}
+              <i class={`${app.iconClass} text-base`} />{" "}
+            </a>
+          ))}{" "}
+          <MoreAppsDropdown apps={moreApps} legalLinks={legalLinks} />
+          <div class="mt-auto pb-1 flex flex-col items-center gap-1">
+            {" "}
+            <GlobalSearchTrigger variant="rail" searchHelpApps={searchHelpApps} />{" "}
+            {" "}
+            <HotkeysHelpRail searchHelpApps={searchHelpApps} />{" "}
+            <ThemeToggleRail />{" "}
+          </div>{" "}
+        </div>
+      )}{" "}
+      {/* ── Main content (row 2) ── */}{" "}
+      <div class="flex flex-col min-h-0 min-w-0 bg-zinc-50 dark:bg-zinc-950">
+        {" "}
+        {user && <ProfileWarnings user={user} />} {user && <ExpiryWarnings user={user} />}{" "}
+        <main
+          class={`flex-1 min-h-0 ${contentPadding} ${fullPage || fullWidth ? "md:overflow-hidden flex flex-col" : "md:overflow-auto"}`}
+        >
+          {" "}
+          {children}{" "}
+        </main>{" "}
+      </div>{" "}
+      {/* ── Footer / Bottom bar (row 3) ── */}{" "}
+      {!fullPage && !showRail && (
+        <div>
+          {" "}
+          <div class="hidden md:block">
+            {" "}
+            <Footer isLoggedIn={!!user} appName={settings?.app?.copyright || appName} legalLinks={legalLinks} />{" "}
+          </div>{" "}
+        </div>
+      )}{" "}
+    </div>
+  );
+}

package/src/ssr/MoreAppsDropdown.island.tsx

@@ -0,0 +1,61 @@
+import { Dropdown } from "../ui";
+
+type AppLink = {
+  iconClass: string;
+  label: string;
+  href: string;
+};
+
+type LegalLink = {
+  label: string;
+  href: string;
+  icon?: string;
+};
+
+type MoreAppsDropdownProps = {
+  apps: AppLink[];
+  /**
+   * Legal/info links contributed by every running app via `defineApp.legalLinks`.
+   * Computed server-side via `listLegalLinks()` (or the runtime aggregation in
+   * Layout.tsx) and passed in as a prop. Empty array = section hidden.
+   */
+  legalLinks?: LegalLink[];
+};
+
+/** Dropdown for secondary apps in the rail nav. */
+export default function MoreAppsDropdown(props: MoreAppsDropdownProps) {
+  const legalLinks = props.legalLinks ?? [];
+  const trigger = (
+    <span class="rail-item" title="More">
+      <i class="ti ti-dots-vertical text-base" />
+    </span>
+  );
+
+  const appItems = props.apps.map((app) => ({
+    icon: app.iconClass,
+    label: app.label,
+    href: app.href,
+  }));
+
+  const legalItems = legalLinks.map((link) => ({
+    icon: link.icon ?? "ti ti-file-text",
+    label: link.label,
+    href: link.href,
+  }));
+
+  const elements = legalItems.length > 0
+    ? [
+        ...(appItems.length > 0 ? [{ items: appItems }] : []),
+        { sectionLabel: "Legal", items: legalItems },
+      ]
+    : appItems;
+
+  return (
+    <Dropdown
+      trigger={trigger}
+      elements={elements}
+      position="bottom-right"
+      width="w-44"
+    />
+  );
+}

package/src/ssr/NavMenu.island.tsx

@@ -0,0 +1,108 @@
+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
+ * serializing the full `User` (incl. mail, ssh keys, phone, address, group
+ * memberships) into HTML `data-props` on every authenticated page.
+ */
+export type NavMenuUser = {
+  uid: string;
+  displayName: string;
+  profile: string;
+  roles: Role[];
+};
+
+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 = () => [
+    // Top: Profile or Login
+    ...(props.user
+      ? [
+          {
+            element: (
+              <a
+                href="/me"
+                class="flex border-b border-zinc-200 p-4 dark:border-zinc-800 transition-colors hover:bg-white/30 dark:hover:bg-white/10"
+              >
+                <div class="flex items-center gap-3">
+                  <div class="flex shrink-0 items-center justify-center rounded-full bg-zinc-200 dark:bg-zinc-700 font-semibold text-zinc-600 dark:text-zinc-300 h-8 w-8 text-xs">
+                    {(props.user.displayName || props.user.uid).slice(0, 2).toUpperCase()}
+                  </div>
+                  <div class="flex-1">
+                    <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{props.user.displayName || props.user.uid}</div>
+                    {props.user.displayName && props.user.profile !== "guest" && (
+                      <div class="hidden sm:block text-xs text-dimmed">{props.user.uid}</div>
+                    )}
+                  </div>
+                </div>
+              </a>
+            ),
+          },
+        ]
+      : [
+          {
+            icon: "ti ti-login",
+            label: "Sign In",
+            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 (
+    <Dropdown
+      trigger={
+        <button type="button" class="icon-btn inline items-center justify-center" aria-label="Menu">
+          <i class="ti ti-menu-2 text-lg" />
+        </button>
+      }
+      position="bottom-left"
+      width="w-64"
+      elements={getElements()}
+    />
+  );
+}

package/src/ssr/ThemeToggleRail.island.tsx

@@ -0,0 +1,27 @@
+import { createSignal } from "solid-js";
+import { theme, type ThemeMode } from "@valentinkolb/stdlib/browser";
+
+/** Theme toggle button for the desktop rail navigation. */
+export default function ThemeToggleRail() {
+  const [mode, setMode] = createSignal<ThemeMode>(typeof document !== "undefined" ? theme.getCurrent() : "light");
+
+  const toggleTheme = () => {
+    setMode(theme.toggle());
+  };
+
+  return (
+    <button
+      type="button"
+      class={`rail-item ${
+        mode() === "light"
+          ? "text-violet-500 hover:text-violet-600 dark:text-violet-400 dark:hover:text-violet-300 hover:bg-violet-500/10 dark:hover:bg-violet-500/15"
+          : "text-amber-500 hover:text-amber-600 dark:text-amber-400 dark:hover:text-amber-300 hover:bg-amber-500/10 dark:hover:bg-amber-500/15"
+      }`}
+      onClick={toggleTheme}
+      aria-label={mode() === "light" ? "Switch to dark mode" : "Switch to light mode"}
+      title={mode() === "light" ? "Dark mode" : "Light mode"}
+    >
+      <i class={`ti ${mode() === "light" ? "ti-moon" : "ti-sun-high"} text-base`} />
+    </button>
+  );
+}

package/src/ssr/index.ts

@@ -0,0 +1,5 @@
+// Server-only exports (these transitively import bun:sql via services)
+// Do NOT import from this barrel in .island.tsx or .client.tsx files!
+export { default as Layout } from "./Layout";
+export { default as AdminLayout } from "./AdminLayout";
+export { getRuntimeContext, type RuntimeContext } from "./runtime";

package/src/ssr/islands/SearchBar.island.tsx

@@ -0,0 +1,77 @@
+import { createEffect, createSignal, onMount } from "solid-js";
+import TextInput from "../../ui/input/TextInput";
+
+type SearchBarProps = {
+  action?: string;
+  value?: string;
+  param?: string;
+  pageParam?: string;
+  placeholder?: string;
+  ariaLabel?: string;
+};
+
+/** Search bar that filters content via URL query parameter. */
+export default function SearchBar(props: SearchBarProps = {}) {
+  const param = props.param ?? "search";
+  const pageParam = props.pageParam ?? "page";
+  const [query, setQuery] = createSignal(props.value ?? "");
+
+  createEffect(() => {
+    if (props.value !== undefined) {
+      setQuery(props.value);
+    }
+  });
+
+  onMount(() => {
+    if (props.value !== undefined) return;
+    const fallback = new URLSearchParams(window.location.search).get(param) ?? "";
+    setQuery(fallback);
+  });
+
+  const handleSubmit = (e: Event): void => {
+    e.preventDefault();
+    const current = new URL(window.location.href);
+    const url = props.action ? new URL(props.action, window.location.origin) : current;
+    const value = query().trim();
+
+    if (value.length > 0) {
+      url.searchParams.set(param, value);
+    } else {
+      url.searchParams.delete(param);
+    }
+    url.searchParams.delete(pageParam);
+
+    window.location.href = url.toString();
+  };
+
+  const handleClear = (): void => {
+    const current = new URL(window.location.href);
+    const url = props.action ? new URL(props.action, window.location.origin) : current;
+
+    url.searchParams.delete(param);
+    url.searchParams.delete(pageParam);
+
+    window.location.href = url.toString();
+  };
+
+  return (
+    <form onSubmit={handleSubmit} role="search" class="w-full">
+      <TextInput
+        name={param}
+        type="search"
+        placeholder={props.placeholder ?? "Search..."}
+        ariaLabel={props.ariaLabel ?? "Search"}
+        icon="ti ti-search"
+        activeIcon="ti ti-search"
+        value={query}
+        onInput={setQuery}
+        clearable
+        clearLabel="Clear search"
+        onClear={handleClear}
+      />
+      <button type="submit" class="hidden">
+        Search
+      </button>
+    </form>
+  );
+}

package/src/ssr/islands/index.ts

@@ -0,0 +1 @@
+export { default as SearchBar } from "./SearchBar.island";

package/src/ssr/runtime.ts

@@ -0,0 +1,22 @@
+/**
+ * Runtime context helpers for SSR components.
+ * Extracted from _core/runtime-helpers.ts — only the generic parts.
+ */
+import type { CloudRuntime } from "../contracts/app";
+
+export type RuntimeContext = CloudRuntime;
+
+type RuntimeCarrier = {
+  get: (key: any) => unknown;
+};
+
+/**
+ * Reads the runtime context from a Hono request context.
+ */
+export const getRuntimeContext = (carrier: RuntimeCarrier): RuntimeContext => {
+  const runtime = carrier.get("runtime");
+  if (!runtime || typeof runtime !== "object" || !Array.isArray((runtime as RuntimeContext).apps)) {
+    throw new Error("Runtime context is missing on request context");
+  }
+  return runtime as RuntimeContext;
+};

package/src/styles/base-popover.css

@@ -0,0 +1,28 @@
+/* Popover and island base behavior */
+/* Make solid-island transparent in layout */
+solid-island {
+  display: contents;
+}
+
+/* Popover positioning */
+[popover]:not(.paper) {
+  background: transparent;
+  border: none;
+}
+
+[popover] {
+  margin: 0;
+  inset: unset;
+}
+
+[popover]:popover-open {
+  @starting-style {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+[popover] {
+  transition: opacity 0.2s, transform 0.2s, overlay 0.2s allow-discrete,
+    display 0.2s allow-discrete;
+}