@valentinkolb/cloud 0.1.0

package/src/shared/markdown/extensions/katex.ts

@@ -0,0 +1,120 @@
+/**
+ * KaTeX extension for marked
+ *
+ * Renders LaTeX math expressions server-side:
+ * - Inline: $..$ or \(..\)
+ * - Block: $$...$$ or \[..\] or ```math
+ */
+
+import type { MarkedExtension, Tokens } from "marked";
+import katex from "katex";
+
+/**
+ * Token shape produced by the math tokenizers below. The marked extension API
+ * types renderer params as `Tokens.Generic` (open `[index: string]: any`), so
+ * we narrow at the call boundary by reading `latex` off the typed sub-shape.
+ */
+type MathToken = Tokens.Generic & { latex: string };
+
+function renderBlockMath(latex: string): string {
+  try {
+    const html = katex.renderToString(latex, {
+      throwOnError: false,
+      displayMode: true,
+    });
+    return `<div class="md-katex-block my-3 flex items-center justify-center">${html}</div>`;
+  } catch {
+    return `<div class="md-katex-block my-3 flex items-center justify-center text-red-500 text-sm"><i class="ti ti-alert-circle mr-1"></i> Invalid LaTeX</div>`;
+  }
+}
+
+function renderInlineMath(latex: string): string {
+  try {
+    const html = katex.renderToString(latex, {
+      throwOnError: false,
+      displayMode: false,
+    });
+    return `<span class="md-katex-inline">${html}</span>`;
+  } catch {
+    return `<span class="md-katex-inline text-red-500 font-mono text-sm">$${latex}$</span>`;
+  }
+}
+
+export function katexExtension(): MarkedExtension {
+  return {
+    extensions: [
+      // ```math code blocks
+      {
+        name: "mathCodeBlock",
+        level: "block",
+        start(src: string) {
+          const match = src.match(/^```math/m);
+          return match ? match.index : undefined;
+        },
+        tokenizer(src: string) {
+          const match = /^```math\n([\s\S]*?)\n```/.exec(src);
+          if (match) {
+            return {
+              type: "mathCodeBlock",
+              raw: match[0],
+              latex: match[1]!.trim(),
+            };
+          }
+          return undefined;
+        },
+        renderer(token: Tokens.Generic) {
+          const latex = (token as MathToken).latex;
+          return renderBlockMath(latex);
+        },
+      },
+      // Block math with $$ ... $$
+      {
+        name: "blockMath",
+        level: "block",
+        start(src: string) {
+          const match = src.match(/\$\$/);
+          return match ? match.index : undefined;
+        },
+        tokenizer(src: string) {
+          const match = /^\$\$([\s\S]+?)\$\$/.exec(src);
+          if (match) {
+            return {
+              type: "blockMath",
+              raw: match[0],
+              latex: match[1]!.trim(),
+            };
+          }
+          return undefined;
+        },
+        renderer(token: Tokens.Generic) {
+          const latex = (token as MathToken).latex;
+          return renderBlockMath(latex);
+        },
+      },
+      // Inline math with $ ... $
+      {
+        name: "inlineMath",
+        level: "inline",
+        start(src: string) {
+          const match = src.match(/(?<!\$)\$(?!\$)/);
+          return match ? match.index : undefined;
+        },
+        tokenizer(src: string) {
+          const match = /^(?<!\$)\$(?!\$)([^$\n]+)\$(?!\$)/.exec(src);
+          if (match) {
+            return {
+              type: "inlineMath",
+              raw: match[0],
+              latex: match[1]!.trim(),
+            };
+          }
+          return undefined;
+        },
+        renderer(token: Tokens.Generic) {
+          const latex = (token as MathToken).latex;
+          return renderInlineMath(latex);
+        },
+      },
+    ],
+  };
+}

package/src/shared/markdown/extensions/links.ts

@@ -0,0 +1,34 @@
+/**
+ * Links extension for marked
+ *
+ * Renders links with the same visual style as the CodeMirror editor:
+ * - Shows [label] in bold followed by an arrow icon
+ * - Opens in new tab with noopener,noreferrer
+ */
+
+import type { MarkedExtension, Tokens } from "marked";
+import { escapeHtml, LINK_STYLES } from "../shared";
+
+export function linksExtension(): MarkedExtension {
+  return {
+    renderer: {
+      link(token: Tokens.Link): string {
+        const { href, title, text } = token;
+
+        // Build title attribute if provided
+        const titleAttr = title ? ` title="${escapeHtml(title)}"` : "";
+
+        // Match CodeMirror style: [label] with arrow icon
+        return (
+          `<span class="${LINK_STYLES.wrapper}">` +
+          `<span class="${LINK_STYLES.label}">[${escapeHtml(text)}]</span>` +
+          `<a href="${escapeHtml(href)}"${titleAttr} target="_blank" rel="noopener noreferrer" ` +
+          `class="${LINK_STYLES.icon}">` +
+          `<i class="ti ti-arrow-up-right text-xs"></i>` +
+          `</a>` +
+          `</span>`
+        );
+      },
+    },
+  };
+}

package/src/shared/markdown/extensions/tables.ts

@@ -0,0 +1,88 @@
+/**
+ * Tables Extension for Marked
+ *
+ * Renders markdown tables with styling matching the CodeMirror extension.
+ * Supports cell formatting for NULL, booleans, dates, and numbers.
+ */
+
+import type { MarkedExtension, Tokens } from "marked";
+import { escapeHtml } from "../shared";
+
+const formatCell = (cell: string): string => {
+  const trimmed = cell.trim();
+
+  // NULL
+  if (trimmed.toLowerCase() === "null") {
+    return '<span class="text-gray-400 italic">NULL</span>';
+  }
+
+  // Boolean
+  if (trimmed.toLowerCase() === "true") {
+    return '<span class="text-green-600">true</span>';
+  }
+  if (trimmed.toLowerCase() === "false") {
+    return '<span class="text-red-600">false</span>';
+  }
+
+  // ISO datetime
+  if (trimmed.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/)) {
+    try {
+      const date = new Date(trimmed);
+      return date.toLocaleString();
+    } catch {
+      return escapeHtml(trimmed);
+    }
+  }
+
+  // Number with decimals
+  const num = parseFloat(trimmed);
+  if (!isNaN(num) && trimmed.includes(".") && !Number.isInteger(num)) {
+    return num.toFixed(4).replace(/\.?0+$/, "");
+  }
+
+  return escapeHtml(trimmed);
+};
+
+export function tablesExtension(): MarkedExtension {
+  return {
+    renderer: {
+      table(token: Tokens.Table): string {
+        const headerCells = token.header
+          .map(
+            (cell) =>
+              `<th class="px-3 py-2 text-left font-medium bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 whitespace-nowrap min-w-30">${this.parser.parseInline(
+                cell.tokens,
+              )}</th>`,
+          )
+          .join("");
+
+        const rows = token.rows
+          .map((row) => {
+            const cells = row
+              .map((cell, i) => {
+                const content = this.parser.parseInline(cell.tokens);
+                const bgClass = i % 2 === 0 ? "bg-gray-50 dark:bg-gray-800/20" : "";
+                return `<td class="px-3 py-2 whitespace-nowrap min-w-30 ${bgClass}">${formatCell(content)}</td>`;
+              })
+              .join("");
+            return `<tr class="hover:font-semibold">${cells}</tr>`;
+          })
+          .join("\n");
+
+        const rowCount = token.rows.length;
+
+        return `<div class="cm-table-widget my-2">
+  <div class="flex flex-col">
+    <div class="overflow-x-auto rounded">
+      <table class="min-w-full text-sm tabular-nums">
+        <thead><tr>${headerCells}</tr></thead>
+        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">${rows}</tbody>
+      </table>
+    </div>
+    <div class="text-center text-xs mt-2">${rowCount} row${rowCount === 1 ? "" : "s"}</div>
+  </div>
+</div>`;
+      },
+    },
+  };
+}

package/src/shared/markdown/extensions/task-list.ts

@@ -0,0 +1,53 @@
+/**
+ * Task List Extension for Marked
+ *
+ * Renders task lists with checkboxes:
+ * - [ ] Unchecked item
+ * - [x] Checked item
+ *
+ * Also styles regular bullet lists consistently.
+ */
+
+import type { MarkedExtension, Tokens, RendererObject, RendererThis } from "marked";
+
+export function taskListExtension(): MarkedExtension {
+  const renderer: RendererObject = {
+    listitem(this: RendererThis, token: Tokens.ListItem): string {
+      // Use parse() for block-level content in list items
+      let text = this.parser.parse(token.tokens);
+      const isTask = token.task;
+      const isChecked = token.checked;
+
+      if (isTask) {
+        // Remove any default checkbox that marked might have inserted
+        text = text.replace(/<input[^>]*type="checkbox"[^>]*>/gi, "");
+
+        const checkboxHtml = `<input type="checkbox" class="custom-list-task-marker mr-2" ${isChecked ? "checked" : ""} disabled />`;
+        const checkedClass = isChecked ? "custom-list-task-checked line-through opacity-70" : "custom-list-task-unchecked";
+
+        return `<li class="custom-list custom-list-task ${checkedClass} flex items-start gap-1">${checkboxHtml}<span>${text}</span></li>\n`;
+      }
+
+      return `<li class="custom-list custom-list-bullet">${text}</li>\n`;
+    },
+
+    list(this: RendererThis & { listitem: (item: Tokens.ListItem) => string }, token: Tokens.List): string {
+      const ordered = token.ordered;
+      const start = token.start;
+      const body = token.items.map((item: Tokens.ListItem) => this.listitem(item)).join("");
+
+      const tag = ordered ? "ol" : "ul";
+      const startAttr = ordered && start !== 1 ? ` start="${start}"` : "";
+      const hasTaskItems = token.items.some((item: Tokens.ListItem) => item.task);
+      const listClass = ordered
+        ? "list-decimal pl-6 my-2 space-y-1"
+        : hasTaskItems
+          ? "pl-0 my-2 space-y-1 list-none"
+          : "pl-4 my-2 space-y-1";
+
+      return `<${tag}${startAttr} class="${listClass}">\n${body}</${tag}>\n`;
+    },
+  };
+
+  return { renderer };
+}

package/src/shared/markdown/index.ts

@@ -0,0 +1,97 @@
+/**
+ * Server-side Markdown renderer using marked.js
+ *
+ * This module provides markdown rendering that produces HTML matching
+ * the visual appearance of the CodeMirror editor extensions.
+ */
+
+import { Marked } from "marked";
+import { infoBlocksExtension } from "./extensions/info-blocks";
+import { taskListExtension } from "./extensions/task-list";
+import { tablesExtension } from "./extensions/tables";
+import { linksExtension } from "./extensions/links";
+import { imagesExtension } from "./extensions/images";
+import { codeExtension } from "./extensions/code";
+import { katexExtension } from "./extensions/katex";
+import { markdownClient } from "./client";
+
+// Create a configured marked instance
+const createMarked = () => {
+  const marked = new Marked();
+
+  marked.use({
+    breaks: true,
+    gfm: true,
+  });
+
+  // Apply extensions in order
+  // Note: katexExtension must come before codeExtension to handle ```math blocks
+  marked.use(infoBlocksExtension());
+  marked.use(taskListExtension());
+  marked.use(tablesExtension());
+  marked.use(linksExtension());
+  marked.use(imagesExtension());
+  marked.use(katexExtension());
+  marked.use(codeExtension());
+
+  return marked;
+};
+
+const marked = createMarked();
+
+/**
+ * Render markdown to HTML for server-side display.
+ * The output matches the visual styling of the CodeMirror editor.
+ *
+ * Supported features:
+ * - GFM (GitHub Flavored Markdown)
+ * - Info blocks (:::note, :::info, :::success, :::warning, :::danger)
+ * - Task lists with checkboxes
+ * - Tables with cell formatting
+ * - Styled links and images
+ * - Code blocks with language badges
+ * - Mermaid diagram containers (requires client-side init)
+ *
+ * @example
+ * ```tsx
+ * // In page.tsx (server-side):
+ * import { renderMarkdown } from "@/shared/markdown";
+ * const html = renderMarkdown(markdownContent);
+ *
+ * // Pass to MarkdownView component:
+ * import MarkdownView from "@/ui/misc/MarkdownView";
+ * <MarkdownView html={html} />
+ * ```
+ *
+ * @see MarkdownView component for displaying the rendered HTML
+ * @see initMarkdownEnhancements for client-side Mermaid support
+ */
+export function renderMarkdown(content: string): string {
+  if (!content || typeof content !== "string") return "";
+
+  const html = marked.parse(content);
+  if (typeof html !== "string") return "";
+
+  return html;
+}
+
+/**
+ * Render markdown to HTML synchronously.
+ */
+export function renderMarkdownSync(content: string): string {
+  if (!content || typeof content !== "string") return "";
+
+  const html = marked.parse(content);
+  if (typeof html !== "string") return "";
+
+  return html;
+}
+
+export { marked };
+
+export const markdown = {
+  render: renderMarkdown,
+  renderSync: renderMarkdownSync,
+  marked,
+  client: markdownClient,
+} as const;

package/src/shared/markdown/shared.ts

@@ -0,0 +1,36 @@
+/**
+ * Shared utilities for markdown rendering
+ *
+ * Used by both CodeMirror editor extensions and marked renderer extensions
+ * to ensure consistent behavior and avoid code duplication.
+ */
+
+/**
+ * Escape HTML special characters to prevent XSS
+ *
+ * @example
+ * escapeHtml('<script>alert("xss")</script>')
+ * // Returns: '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;'
+ */
+export const escapeHtml = (text: string): string => {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+};
+
+// =============================================================================
+// Shared CSS Classes (match CodeMirror and marked renderer)
+// =============================================================================
+
+/** Image widget styles */
+export const IMAGE_STYLES = {
+  wrapper: "md-image-widget my-2",
+  figure: "flex flex-col items-center justify-center max-w-full",
+  img: "block max-h-[400px] rounded border border-gray-200 dark:border-gray-700",
+  caption: "text-sm text-gray-500 dark:text-gray-400 mt-2 italic",
+} as const;
+
+/** Link widget styles */
+export const LINK_STYLES = {
+  wrapper: "md-link-widget inline-flex items-center align-baseline",
+  label: "md-link-label font-bold text-gray-800 dark:text-gray-200",
+  icon: "md-link-icon inline-flex items-center cursor-pointer text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-500 hover:underline opacity-70 hover:opacity-100 transition-opacity",
+} as const;

package/src/ssr/AdminLayout.tsx

@@ -0,0 +1,42 @@
+import type { JSX } from "solid-js/jsx-runtime";
+import Layout from "./Layout";
+import AdminSidebar from "./AdminSidebar";
+import { getRuntimeContext, type RuntimeContext } from "./runtime";
+type Breadcrumb = { title: string; href?: string };
+type AdminLayoutContext = {
+  get(key: "user"): any;
+  get(key: "page"): any;
+  get(key: "runtime"): RuntimeContext;
+  get(key: "settings"): Record<string, any>;
+  req: { raw: { headers: Headers; url: string } };
+};
+type Props = {
+  children: JSX.Element;
+  c: AdminLayoutContext;
+  title: string;
+  /** Bypass the scroll wrapper — child manages its own overflow. */
+  stretch?: boolean;
+};
+export default function AdminLayout({ children, c, title, stretch }: Props) {
+  const pathname = new URL(c.req.raw.url).pathname;
+  const runtime = getRuntimeContext(c);
+  const breadcrumbs: Breadcrumb[] = [
+    { title: "Start", href: "/" },
+    { title: "Admin", href: "/admin" },
+  ];
+  if (title !== "Overview") {
+    breadcrumbs.push({ title });
+  }
+  return (
+    <Layout c={c} fullWidth title={breadcrumbs}>
+      <div class="app-cols flex-1 min-h-0">
+        <AdminSidebar pathname={pathname} apps={runtime.apps} />
+        <div class="flex-1 min-w-0 min-h-0 flex flex-col">
+          <div class={`flex-1 min-h-0 ${stretch ? "flex flex-col" : "overflow-y-auto"}`} style="scrollbar-gutter: stable">
+            {children}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}

package/src/ssr/AdminSidebar.tsx

@@ -0,0 +1,95 @@
+import type { RuntimeContext } from "./runtime";
+
+type AdminLink = { href: string; icon: string; label: string };
+
+const buildAdminLinks = (
+  apps: readonly RuntimeContext["apps"][number][]
+): AdminLink[] => [
+  { href: "/admin", icon: "ti-dashboard", label: "Overview" },
+  { href: "/admin/gateway", icon: "ti-route-scan", label: "Apps & Gateway" },
+  ...apps
+    .filter((app) => !!app.adminHref && app.adminHref !== "/admin/gateway")
+    .map((app) => ({
+      href: app.adminHref!,
+      icon: app.icon.replace(/^ti\s+/, ""),
+      label: app.name,
+    })),
+];
+
+function isActive(pathname: string, href: string): boolean {
+  if (href === "/admin") return pathname === "/admin";
+  return pathname.startsWith(href);
+}
+
+export default function AdminSidebar({
+  pathname,
+  apps,
+}: {
+  pathname: string;
+  apps: readonly RuntimeContext["apps"][number][];
+}) {
+  const adminLinks = buildAdminLinks(apps);
+
+  return (
+    <>
+      <nav class="sidebar-container-mobile">
+        <details class="group">
+          <summary class="sidebar-mobile-toggle">
+            <div class="w-8 h-8 rounded-lg bg-zinc-600 text-white grid place-items-center shrink-0 dark:bg-zinc-700">
+              <i class="ti ti-settings text-sm" />
+            </div>
+            <span class="font-semibold truncate flex-1">Admin</span>
+            <span class="ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-dimmed transition-transform group-open:rotate-180">
+              <i class="ti ti-chevron-down text-sm" />
+            </span>
+          </summary>
+          <div class="sidebar-mobile-actions">
+            {adminLinks.map((link) => (
+              <a
+                href={link.href}
+                class={`sidebar-item-mobile ${
+                  isActive(pathname, link.href)
+                    ? "border-blue-500/35 bg-blue-50/70 text-blue-700 dark:border-blue-400/40 dark:bg-blue-950/40 dark:text-blue-200"
+                    : ""
+                }`}
+                aria-current={
+                  isActive(pathname, link.href) ? "page" : undefined
+                }
+              >
+                <i class={`ti ${link.icon}`} />
+                {link.label}
+              </a>
+            ))}
+          </div>
+        </details>
+      </nav>
+
+      <aside class="sidebar-container">
+        <div class="paper flex h-full min-h-0 flex-col gap-4 p-4">
+          <div class="flex items-center gap-3">
+            <div class="sidebar-header-icon bg-zinc-600 dark:bg-zinc-700">
+              <i class="ti ti-settings text-xs" />
+            </div>
+            <p class="sidebar-header-title">Admin</p>
+          </div>
+
+          <div class="sidebar-body">
+            <section class="sidebar-group">
+              {adminLinks.map((link) => (
+                <a
+                  href={link.href}
+                  class={`sidebar-item ${
+                    isActive(pathname, link.href) ? "sidebar-item-active" : ""
+                  }`}
+                >
+                  <i class={`ti ${link.icon} text-sm`} />
+                  <span>{link.label}</span>
+                </a>
+              ))}
+            </section>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+}

package/src/ssr/Footer.island.tsx

@@ -0,0 +1,62 @@
+import { createSignal, For, Show } from "solid-js";
+import { cookies } from "@valentinkolb/stdlib/browser";
+
+type FooterProps = {
+  isLoggedIn: boolean;
+  appName?: string;
+  /**
+   * Legal/info links contributed by every running app via `defineApp.legalLinks`.
+   * Computed server-side via `listLegalLinks()` and passed in by the host page
+   * (Layout.tsx) so this island doesn't need direct registry access.
+   */
+  legalLinks?: Array<{ label: string; href: string; icon?: string }>;
+};
+
+export default function Footer(props: FooterProps) {
+  const [theme, setTheme] = createSignal(
+    typeof document !== "undefined" ? (document.documentElement.classList.contains("dark") ? "dark" : "light") : "dark",
+  );
+
+  const toggleTheme = () => {
+    const newTheme = theme() === "dark" ? "light" : "dark";
+    document.documentElement.classList.remove("dark", "light");
+    document.documentElement.classList.add(newTheme);
+    cookies.writeCookie("theme", newTheme);
+    setTheme(newTheme);
+  };
+
+  return (
+    <footer class="shrink-0 flex items-center justify-center gap-4 py-2 px-3 text-xs text-dimmed ">
+      <For each={props.legalLinks ?? []}>
+        {(link) => (
+          <a href={link.href} class="hover:text-primary transition-colors flex items-center gap-1">
+            <Show when={link.icon}>
+              <i class={`${link.icon} text-xs`} />
+            </Show>
+            {link.label}
+          </a>
+        )}
+      </For>
+      <button type="button" onClick={toggleTheme} class="hidden md:flex hover:text-primary transition-colors items-center gap-1">
+        <i class={`ti ${theme() === "dark" ? "ti-sunset-2" : "ti-moon-stars"} text-xs`} />
+        {theme() === "dark" ? "Light" : "Dark"}
+      </button>
+      {props.isLoggedIn ? (
+        <a href="/me" class="hover:text-primary transition-colors flex items-center gap-1">
+          <i class="ti ti-user text-xs" />
+          Account
+        </a>
+      ) : (
+        <a href="/auth/login" class="hover:text-primary transition-colors flex items-center gap-1">
+          <i class="ti ti-login text-xs" />
+          Login
+        </a>
+      )}
+      {props.appName && (
+        <span class="hidden md:inline text-zinc-400 dark:text-zinc-600">
+          Copyright &copy; {new Date().getFullYear()} {props.appName}
+        </span>
+      )}
+    </footer>
+  );
+}