@valentinkolb/cloud 0.4.0 → 0.5.0

package/src/shared/markdown/index.ts

@@ -6,6 +6,7 @@
  */
 
 import { Marked } from "marked";
+import sanitizeHtml from "sanitize-html";
 import { infoBlocksExtension } from "./extensions/info-blocks";
 import { taskListExtension } from "./extensions/task-list";
 import { tablesExtension } from "./extensions/tables";
@@ -13,6 +14,8 @@ import { linksExtension } from "./extensions/links";
 import { imagesExtension } from "./extensions/images";
 import { codeExtension } from "./extensions/code";
 import { katexExtension } from "./extensions/katex";
+import { markExtension } from "./extensions/mark";
+import { subSupExtension } from "./extensions/sub-sup";
 import { markdownClient } from "./client";
 
 // Create a configured marked instance
@@ -33,12 +36,83 @@ const createMarked = () => {
   marked.use(imagesExtension());
   marked.use(katexExtension());
   marked.use(codeExtension());
+  // Inline-style decorators come last so they run after structural tokenizers.
+  marked.use(markExtension());
+  marked.use(subSupExtension());
 
   return marked;
 };
 
 const marked = createMarked();
 
+const sanitizeRenderedHtml = (html: string): string =>
+  sanitizeHtml(html, {
+    allowedTags: [
+      ...sanitizeHtml.defaults.allowedTags,
+      "annotation",
+      "br",
+      "div",
+      "figcaption",
+      "figure",
+      "i",
+      "img",
+      "input",
+      "mark",
+      "math",
+      "mfrac",
+      "mi",
+      "mn",
+      "mo",
+      "mover",
+      "mrow",
+      "msqrt",
+      "msub",
+      "msubsup",
+      "msup",
+      "mtext",
+      "semantics",
+      "span",
+      "sub",
+      "sup",
+      "table",
+      "tbody",
+      "td",
+      "th",
+      "thead",
+      "tr",
+    ],
+    allowedAttributes: {
+      "*": ["aria-hidden", "aria-label", "class", "title"],
+      a: ["href", "name", "rel", "target", "title"],
+      annotation: ["encoding"],
+      code: ["class"],
+      div: ["class", "data-block-name", "data-script-source", "style"],
+      img: ["alt", "class", "height", "loading", "src", "title", "width", "style"],
+      input: ["checked", "class", "disabled", "type"],
+      math: ["xmlns"],
+      pre: ["class"],
+      span: ["aria-hidden", "class", "style", "title"],
+    },
+    allowedSchemes: ["http", "https", "mailto", "tel", "note", "attach"],
+    allowedSchemesByTag: {
+      img: ["http", "https", "attach"],
+    },
+    allowedStyles: {
+      div: {
+        height: [/^\d+(?:\.\d+)?px$/],
+      },
+      img: {
+        "max-height": [/^none$/, /^\d+(?:\.\d+)?px$/],
+        "max-width": [/^\d+(?:\.\d+)?px$/],
+      },
+      span: {
+        "margin-right": [/^-?\d+(?:\.\d+)?em$/],
+        top: [/^-?\d+(?:\.\d+)?em$/],
+        width: [/^\d+(?:\.\d+)?%$/],
+      },
+    },
+  });
+
 /**
  * Render markdown to HTML for server-side display.
  * The output matches the visual styling of the CodeMirror editor.
@@ -72,7 +146,7 @@ export function renderMarkdown(content: string): string {
   const html = marked.parse(content);
   if (typeof html !== "string") return "";
 
-  return html;
+  return sanitizeRenderedHtml(html);
 }
 
 /**
@@ -84,7 +158,7 @@ export function renderMarkdownSync(content: string): string {
   const html = marked.parse(content);
   if (typeof html !== "string") return "";
 
-  return html;
+  return sanitizeRenderedHtml(html);
 }
 
 export { marked };

package/src/shared/mock-cover.ts

@@ -0,0 +1,130 @@
+import { Buffer } from "node:buffer";
+
+export type MockCoverTheme = "blue" | "emerald" | "amber" | "rose" | "violet" | "slate" | "teal";
+
+export type MockCoverIcon = "book" | "camera" | "device-projector" | "microphone" | "package";
+
+export type MockCoverOptions = {
+  icon?: MockCoverIcon | string;
+  theme?: MockCoverTheme;
+  seed?: string;
+  label?: string;
+  size?: number;
+};
+
+export type MockCover = {
+  svg: string;
+  dataUrl: string;
+  mimeType: "image/svg+xml";
+};
+
+const themes: Record<MockCoverTheme, { from: string; to: string; accent: string; panel: string }> = {
+  blue: { from: "#dbeafe", to: "#93c5fd", accent: "#2563eb", panel: "#eff6ff" },
+  emerald: { from: "#d1fae5", to: "#6ee7b7", accent: "#059669", panel: "#ecfdf5" },
+  amber: { from: "#fef3c7", to: "#fbbf24", accent: "#d97706", panel: "#fffbeb" },
+  rose: { from: "#ffe4e6", to: "#fda4af", accent: "#e11d48", panel: "#fff1f2" },
+  violet: { from: "#ede9fe", to: "#c4b5fd", accent: "#7c3aed", panel: "#f5f3ff" },
+  slate: { from: "#e2e8f0", to: "#94a3b8", accent: "#475569", panel: "#f8fafc" },
+  teal: { from: "#ccfbf1", to: "#5eead4", accent: "#0f766e", panel: "#f0fdfa" },
+};
+
+const themeNames = Object.keys(themes) as MockCoverTheme[];
+
+const iconPaths: Record<MockCoverIcon, string[]> = {
+  book: ["M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0", "M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0", "M3 6l0 13", "M12 6l0 13", "M21 6l0 13"],
+  camera: [
+    "M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2",
+    "M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0",
+  ],
+  "device-projector": [
+    "M8 9a5 5 0 1 0 10 0a5 5 0 0 0 -10 0",
+    "M9 6h-4a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2 -2v-8a2 2 0 0 0 -2 -2h-2",
+    "M6 15h1",
+    "M7 18l-1 2",
+    "M18 18l1 2",
+  ],
+  microphone: [
+    "M9 5a3 3 0 0 1 3 -3a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3a3 3 0 0 1 -3 -3l0 -5",
+    "M5 10a7 7 0 0 0 14 0",
+    "M8 21l8 0",
+    "M12 17l0 4",
+  ],
+  package: ["M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5", "M12 12l8 -4.5", "M12 12l0 9", "M12 12l-8 -4.5", "M16 5.25l-8 4.5"],
+};
+
+const aliases: Record<string, MockCoverIcon> = {
+  books: "book",
+  "ti ti-book": "book",
+  "ti ti-books": "book",
+  "ti ti-camera": "camera",
+  "ti ti-device-projector": "device-projector",
+  "ti ti-microphone": "microphone",
+  "ti ti-package": "package",
+  "ti ti-packages": "package",
+};
+
+const hashSeed = (seed: string): number => {
+  let hash = 2166136261;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash ^= seed.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+};
+
+const escapeXml = (value: string): string =>
+  value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+
+const resolveIcon = (icon: MockCoverOptions["icon"]): MockCoverIcon => {
+  const key = String(icon ?? "package")
+    .trim()
+    .toLowerCase();
+  if (key in iconPaths) return key as MockCoverIcon;
+  return aliases[key] ?? "package";
+};
+
+export const createMockCoverSvg = (options: MockCoverOptions = {}): string => {
+  const size = Math.max(160, Math.min(options.size ?? 720, 1600));
+  const seed = options.seed ?? options.label ?? options.icon ?? "mock-cover";
+  const themeName = options.theme ?? themeNames[hashSeed(String(seed)) % themeNames.length] ?? "blue";
+  const theme = themes[themeName];
+  const icon = resolveIcon(options.icon);
+  const gradientId = `g${hashSeed(`${seed}:gradient`).toString(36)}`;
+  const title = escapeXml(options.label ?? "Mock cover");
+  const iconMarkup = iconPaths[icon].map((path) => `<path d="${path}" />`).join("");
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 720 720" role="img" aria-label="${title}">
+  <defs>
+    <linearGradient id="${gradientId}" x1="72" x2="648" y1="72" y2="648" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="${theme.from}" />
+      <stop offset="1" stop-color="${theme.to}" />
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="22" stdDeviation="24" flood-color="#0f172a" flood-opacity=".16" />
+    </filter>
+  </defs>
+  <rect width="720" height="720" fill="url(#${gradientId})" />
+  <rect x="160" y="160" width="400" height="400" rx="96" fill="${theme.panel}" opacity=".92" filter="url(#shadow)" />
+  <g transform="translate(216 216) scale(12)" fill="none" stroke="${theme.accent}" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round">
+    ${iconMarkup}
+  </g>
+</svg>`;
+};
+
+export const createMockCover = (options: MockCoverOptions = {}): MockCover => {
+  const svg = createMockCoverSvg(options);
+  return {
+    svg,
+    dataUrl: `data:image/svg+xml;base64,${Buffer.from(svg, "utf8").toString("base64")}`,
+    mimeType: "image/svg+xml",
+  };
+};
+
+export const parseDataUrl = (dataUrl: string): { mimeType: string; bytes: Uint8Array } | null => {
+  const match = /^data:([^;,]+);base64,(.+)$/s.exec(dataUrl);
+  if (!match) return null;
+  return {
+    mimeType: match[1] || "application/octet-stream",
+    bytes: new Uint8Array(Buffer.from(match[2] ?? "", "base64")),
+  };
+};

package/src/shared/redirect.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, test } from "bun:test";
+import { createAuthLoginUrl, createAuthPasswordResetUrl, createLoginRedirectUrl, normalizeRedirectTo, redirectPathFromRequestUrl } from "./redirect";
+
+describe("redirect helpers", () => {
+  test("normalizes local redirect paths", () => {
+    expect(normalizeRedirectTo("/app/dashboard")).toBe("/app/dashboard");
+    expect(normalizeRedirectTo("/oauth/authorize?client_id=cli&state=abc")).toBe("/oauth/authorize?client_id=cli&state=abc");
+  });
+
+  test("rejects external or ambiguous redirect targets", () => {
+    expect(normalizeRedirectTo("https://example.com/app")).toBeUndefined();
+    expect(normalizeRedirectTo("//example.com/app")).toBeUndefined();
+    expect(normalizeRedirectTo("app/dashboard")).toBeUndefined();
+    expect(normalizeRedirectTo("/\\example.com")).toBeUndefined();
+  });
+
+  test("preserves request query parameters for login redirects", () => {
+    expect(redirectPathFromRequestUrl("https://cloud.local/oauth/authorize?client_id=cli&state=abc")).toBe("/oauth/authorize?client_id=cli&state=abc");
+    expect(createLoginRedirectUrl("https://cloud.local/oauth/authorize?client_id=cli&state=abc")).toBe("/auth/login?redirectTo=%2Foauth%2Fauthorize%3Fclient_id%3Dcli%26state%3Dabc");
+  });
+
+  test("builds magic login links with safe redirects only", () => {
+    const safeUrl = createAuthLoginUrl("https://cloud.example", {
+      token: "token-id",
+      redirectTo: "/oauth/authorize?client_id=cli",
+    });
+    expect(safeUrl).toBe("https://cloud.example/auth/login?token=token-id&redirectTo=%2Foauth%2Fauthorize%3Fclient_id%3Dcli");
+
+    const externalUrl = createAuthLoginUrl("https://cloud.example", {
+      token: "token-id",
+      redirectTo: "https://evil.example",
+    });
+    expect(externalUrl).toBe("https://cloud.example/auth/login?token=token-id");
+  });
+
+  test("builds password reset links with safe redirects only", () => {
+    const safeUrl = createAuthPasswordResetUrl("https://cloud.example", {
+      token: "token-id",
+      redirectTo: "/app/dashboard",
+    });
+    expect(safeUrl).toBe("https://cloud.example/auth/password-reset?token=token-id&redirectTo=%2Fapp%2Fdashboard");
+
+    const externalUrl = createAuthPasswordResetUrl("https://cloud.example", {
+      token: "token-id",
+      redirectTo: "https://evil.example",
+    });
+    expect(externalUrl).toBe("https://cloud.example/auth/password-reset?token=token-id");
+  });
+});

package/src/shared/redirect.ts

@@ -0,0 +1,52 @@
+const REDIRECT_BASE = "https://cloud.local";
+
+/** Normalize a user-provided post-login redirect to a local Cloud path. */
+export const normalizeRedirectTo = (value: string | null | undefined): string | undefined => {
+  if (!value) return undefined;
+
+  const trimmed = value.trim();
+  if (!trimmed || !trimmed.startsWith("/") || trimmed.startsWith("//") || trimmed.includes("\\")) return undefined;
+
+  try {
+    const url = new URL(trimmed, REDIRECT_BASE);
+    if (url.origin !== REDIRECT_BASE) return undefined;
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch {
+    return undefined;
+  }
+};
+
+/** Extract a safe post-login redirect target from an incoming request URL. */
+export const redirectPathFromRequestUrl = (requestUrl: string): string => {
+  const url = new URL(requestUrl);
+  return normalizeRedirectTo(`${url.pathname}${url.search}`) ?? "/";
+};
+
+/** Build the local login URL for an incoming protected request. */
+export const createLoginRedirectUrl = (requestUrl: string): string => {
+  const params = new URLSearchParams();
+  params.set("redirectTo", redirectPathFromRequestUrl(requestUrl));
+  return `/auth/login?${params.toString()}`;
+};
+
+/** Build an absolute auth login URL while preserving only safe local redirects. */
+export const createAuthLoginUrl = (appUrl: string, params: { token?: string; redirectTo?: string | null | undefined } = {}): string => {
+  const url = new URL(`${appUrl.replace(/\/$/, "")}/auth/login`);
+  if (params.token) url.searchParams.set("token", params.token);
+
+  const redirectTo = normalizeRedirectTo(params.redirectTo);
+  if (redirectTo) url.searchParams.set("redirectTo", redirectTo);
+
+  return url.toString();
+};
+
+/** Build an absolute password-reset URL while preserving only safe local redirects. */
+export const createAuthPasswordResetUrl = (appUrl: string, params: { token: string; redirectTo?: string | null | undefined }): string => {
+  const url = new URL(`${appUrl.replace(/\/$/, "")}/auth/password-reset`);
+  url.searchParams.set("token", params.token);
+
+  const redirectTo = normalizeRedirectTo(params.redirectTo);
+  if (redirectTo) url.searchParams.set("redirectTo", redirectTo);
+
+  return url.toString();
+};

package/src/shared/theme.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, test } from "bun:test";
+import { readThemeFromCookieHeader } from "./theme";
+
+describe("readThemeFromCookieHeader", () => {
+  test("defaults to light", () => {
+    expect(readThemeFromCookieHeader("")).toBe("light");
+    expect(readThemeFromCookieHeader(null)).toBe("light");
+  });
+
+  test("reads light and dark theme cookies", () => {
+    expect(readThemeFromCookieHeader("theme=dark")).toBe("dark");
+    expect(readThemeFromCookieHeader("session=abc; theme=light; other=1")).toBe("light");
+  });
+
+  test("uses the last valid duplicate theme cookie", () => {
+    expect(readThemeFromCookieHeader("theme=dark; theme=light")).toBe("light");
+    expect(readThemeFromCookieHeader("theme=light; theme=dark")).toBe("dark");
+  });
+
+  test("ignores invalid theme cookie values", () => {
+    expect(readThemeFromCookieHeader("theme=dark; theme=broken")).toBe("dark");
+    expect(readThemeFromCookieHeader("theme=broken; theme=light")).toBe("light");
+  });
+});

package/src/shared/theme.ts

@@ -0,0 +1,68 @@
+export type CloudTheme = "light" | "dark";
+
+const THEME_COOKIE = "theme";
+const COOKIE_MAX_AGE_SECONDS = 31536000;
+
+const isCloudTheme = (value: string): value is CloudTheme => value === "light" || value === "dark";
+
+const decodeCookieValue = (value: string): string => {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+};
+
+/**
+ * Resolve the persisted theme from a Cookie header.
+ *
+ * Browsers can send duplicate cookie names when legacy path-specific cookies
+ * exist. RFC ordering puts more specific paths first, so the root preference
+ * written by the current app is usually the last valid `theme` entry.
+ */
+export const readThemeFromCookieHeader = (cookieHeader: string | null | undefined): CloudTheme => {
+  let resolved: CloudTheme = "light";
+  for (const part of (cookieHeader ?? "").split(";")) {
+    const trimmed = part.trim();
+    const separatorIndex = trimmed.indexOf("=");
+    if (separatorIndex <= 0) continue;
+    if (trimmed.slice(0, separatorIndex) !== THEME_COOKIE) continue;
+
+    const value = decodeCookieValue(trimmed.slice(separatorIndex + 1));
+    if (isCloudTheme(value)) resolved = value;
+  }
+  return resolved;
+};
+
+export const themeBootstrapScript = `!function(){var e=document.documentElement;if(!e.hasAttribute("data-theme-fixed")){var t="light";document.cookie.split(";").forEach(function(e){var r=e.trim(),i=r.indexOf("=");if(i>0&&r.slice(0,i)==="theme"){var o;try{o=decodeURIComponent(r.slice(i+1))}catch(e){o=r.slice(i+1)}(o==="light"||o==="dark")&&(t=o)}});e.classList.remove("light","dark");e.classList.add(t)}}();`;
+
+const legacyThemeCookiePaths = (pathname: string): string[] => {
+  const paths = new Set(["/", "/me", "/app", "/admin"]);
+  if (pathname) paths.add(pathname);
+  const parts = pathname.split("/").filter(Boolean);
+  let current = "";
+  for (const part of parts) {
+    current += `/${part}`;
+    paths.add(current);
+  }
+  return [...paths];
+};
+
+export const setThemePreference = (mode: CloudTheme): CloudTheme => {
+  if (typeof document === "undefined") return mode;
+
+  document.documentElement.classList.remove("light", "dark");
+  document.documentElement.classList.add(mode);
+
+  const secure = location.protocol === "https:" ? "; Secure" : "";
+  for (const path of legacyThemeCookiePaths(location.pathname)) {
+    document.cookie = `${THEME_COOKIE}=; path=${path}; max-age=0; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax${secure}`;
+  }
+  document.cookie = `${THEME_COOKIE}=${encodeURIComponent(mode)}; path=/; max-age=${COOKIE_MAX_AGE_SECONDS}; SameSite=Lax${secure}`;
+  return mode;
+};
+
+export const getCurrentThemePreference = (): CloudTheme => {
+  if (typeof document === "undefined") return "light";
+  return document.documentElement.classList.contains("dark") ? "dark" : "light";
+};

package/src/shared/time.ts

@@ -0,0 +1,13 @@
+export const TIMEZONE_COOKIE = "cloud.timezone";
+
+export const normalizeTimeZone = (value: string | null | undefined, fallback = "UTC"): string => {
+  const candidate = typeof value === "string" ? value.trim() : "";
+  if (!candidate) return fallback;
+
+  try {
+    new Intl.DateTimeFormat(undefined, { timeZone: candidate }).format(new Date());
+    return candidate;
+  } catch {
+    return fallback;
+  }
+};

package/src/ssr/AdminLayout.tsx

@@ -1,13 +1,16 @@
 import type { JSX } from "solid-js/jsx-runtime";
-import Layout from "./Layout";
+import type { LayoutAnnouncementsState } from "../server/middleware/settings";
 import AdminSidebar from "./AdminSidebar";
+import Layout from "./Layout";
 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>;
+  get(key: "announcements"): LayoutAnnouncementsState | undefined;
   req: { raw: { headers: Headers; url: string } };
 };
 type Props = {
@@ -18,7 +21,8 @@ type Props = {
   stretch?: boolean;
 };
 export default function AdminLayout({ children, c, title, stretch }: Props) {
-  const pathname = new URL(c.req.raw.url).pathname;
+  const url = new URL(c.req.raw.url);
+  const currentPath = `${url.pathname}${url.search}`;
   const runtime = getRuntimeContext(c);
   const breadcrumbs: Breadcrumb[] = [
     { title: "Start", href: "/" },
@@ -30,7 +34,7 @@ export default function AdminLayout({ children, c, title, stretch }: Props) {
   return (
     <Layout c={c} fullWidth title={breadcrumbs}>
       <div class="app-cols flex-1 min-h-0">
-        <AdminSidebar pathname={pathname} apps={runtime.apps} />
+        <AdminSidebar currentPath={currentPath} 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}