@valentinkolb/cloud 0.1.0

package/src/services/weather/types.ts

@@ -0,0 +1,61 @@
+/** Weather icon codes from Brightsky API */
+export type WeatherIcon =
+  | "clear-day"
+  | "clear-night"
+  | "partly-cloudy-day"
+  | "partly-cloudy-night"
+  | "cloudy"
+  | "fog"
+  | "wind"
+  | "rain"
+  | "sleet"
+  | "snow"
+  | "hail"
+  | "thunderstorm";
+
+/** Current weather data */
+export type CurrentWeather = {
+  temperature: number; // deg C
+  icon: WeatherIcon;
+  cloudCover: number; // 0-100%
+  windSpeed: number; // km/h
+  windGust: number | null; // km/h
+  windDirection: number | null; // degrees
+  humidity: number | null; // 0-100%
+  precipitation: number; // mm in last hour
+  pressure: number | null; // hPa
+  visibility: number | null; // meters
+  dewPoint: number | null; // deg C
+  sunshine: number | null; // minutes in last hour
+  stationName: string;
+  timestamp: string; // ISO timestamp
+};
+
+/** Hourly forecast entry */
+export type HourlyForecast = {
+  timestamp: string;
+  temperature: number;
+  icon: WeatherIcon;
+  precipitation: number;
+  precipitationProbability: number | null; // 0-100%
+  windSpeed: number;
+  cloudCover: number;
+};
+
+/** Daily forecast summary */
+export type DailyForecast = {
+  date: string; // YYYY-MM-DD
+  tempMin: number;
+  tempMax: number;
+  icon: WeatherIcon;
+  precipitation: number; // total mm
+  precipitationProbability: number | null; // max probability for the day
+  sunshine: number; // total minutes
+};
+
+/** Full weather data with forecasts */
+export type WeatherData = {
+  current: CurrentWeather;
+  hourly: HourlyForecast[];
+  daily: DailyForecast[];
+};

package/src/services/weather/ui.ts

@@ -0,0 +1,50 @@
+import type { WeatherIcon } from "./types";
+
+/** Map Brightsky icon to Tabler icon name. */
+const getTablerIcon = (icon: WeatherIcon): string => {
+  const iconMap: Record<WeatherIcon, string> = {
+    "clear-day": "sun",
+    "clear-night": "moon",
+    "partly-cloudy-day": "sun-moon",
+    "partly-cloudy-night": "sun-moon",
+    cloudy: "cloud",
+    fog: "mist",
+    wind: "wind",
+    rain: "cloud-rain",
+    sleet: "cloud-snow",
+    snow: "snowflake",
+    hail: "cloud-snow",
+    thunderstorm: "cloud-storm",
+  };
+  return iconMap[icon] ?? "cloud";
+};
+
+/** Get Tailwind color class for temperature. */
+const getTempColorClass = (temp: number): string => {
+  if (temp <= 0) return "text-blue-400";
+  if (temp <= 10) return "text-cyan-500";
+  if (temp <= 20) return "text-emerald-500";
+  if (temp <= 25) return "text-amber-500";
+  return "text-red-500";
+};
+
+/** Get temperature color class for an average of min/max. */
+const getAvgTempColorClass = (tempMin: number, tempMax: number): string => {
+  return getTempColorClass((tempMin + tempMax) / 2);
+};
+
+/** Format temperature with degree symbol. */
+const formatTemp = (temp: number): string => `${temp}°`;
+
+/** Format temperature range (e.g., "12° / 5°"). */
+const formatTempRange = (tempMax: number, tempMin: number): string => `${tempMax}° / ${tempMin}°`;
+
+export const weatherUiService = {
+  getTablerIcon,
+  getTempColorClass,
+  getAvgTempColorClass,
+  formatTemp,
+  formatTempRange,
+};
+
+export type WeatherUiService = typeof weatherUiService;

package/src/shared/account-display.ts

@@ -0,0 +1,17 @@
+import type { UserProfile, UserProvider } from "../contracts/shared";
+
+type AccountLike = {
+  provider: UserProvider;
+  profile: UserProfile;
+};
+
+type SupplementalRole = "admin" | "group-manager";
+
+export const getAccountTypeLabel = (user: Pick<AccountLike, "profile">): string =>
+  user.profile === "user" ? "Full account" : "Guest account";
+
+export const getManagementLabel = (user: Pick<AccountLike, "provider">): string =>
+  user.provider === "ipa" ? "FreeIPA" : "Local";
+
+export const getSupplementalRoleLabel = (role: SupplementalRole): string =>
+  role === "group-manager" ? "Group Manager" : "Admin";

package/src/shared/account-session.ts

@@ -0,0 +1,15 @@
+import type { User } from "../contracts/shared";
+
+export const isAdminUser = (user: Pick<User, "roles">): boolean => user.roles.includes("admin");
+
+export const isGroupManagerUser = (user: Pick<User, "roles">): boolean => user.roles.includes("group-manager");
+
+export const canManageAnyGroups = (user: Pick<User, "roles">): boolean => isAdminUser(user) || isGroupManagerUser(user);
+
+export const canManageGroup = (user: Pick<User, "roles" | "managesGroupIds">, groupId: string): boolean =>
+  isAdminUser(user) || user.managesGroupIds.includes(groupId);
+
+export const getDefaultGroupScope = (user: Pick<User, "roles">): "all" | "managed" | "member" => {
+  if (isAdminUser(user)) return "all";
+  return canManageAnyGroups(user) ? "managed" : "member";
+};

package/src/shared/icons.ts

@@ -0,0 +1,109 @@
+/**
+ * Curated list of tabler icon options for use in select inputs.
+ * Each entry has an `id` (icon class without `ti-` prefix is the tabler name,
+ * but stored as `ti-<name>` to match usage like `ti ti-<name>`),
+ * a human-readable `label`, and an `icon` class string for rendering.
+ */
+export const ICON_OPTIONS = [
+  // Documents & Writing
+  { id: "ti-notebook", label: "Notebook", icon: "ti ti-notebook" },
+  { id: "ti-book", label: "Book", icon: "ti ti-book" },
+  { id: "ti-note", label: "Note", icon: "ti ti-note" },
+  { id: "ti-notes", label: "Notes", icon: "ti ti-notes" },
+  { id: "ti-file-text", label: "Document", icon: "ti ti-file-text" },
+  { id: "ti-file-code", label: "Code", icon: "ti ti-file-code" },
+  { id: "ti-clipboard", label: "Clipboard", icon: "ti ti-clipboard" },
+  { id: "ti-list-check", label: "Checklist", icon: "ti ti-list-check" },
+  { id: "ti-bookmark", label: "Bookmark", icon: "ti ti-bookmark" },
+  { id: "ti-pencil", label: "Pencil", icon: "ti ti-pencil" },
+  { id: "ti-quote", label: "Quote", icon: "ti ti-quote" },
+  { id: "ti-tag", label: "Tag", icon: "ti ti-tag" },
+  // Objects
+  { id: "ti-star", label: "Star", icon: "ti ti-star" },
+  { id: "ti-heart", label: "Heart", icon: "ti ti-heart" },
+  { id: "ti-diamond", label: "Diamond", icon: "ti ti-diamond" },
+  { id: "ti-crown", label: "Crown", icon: "ti ti-crown" },
+  { id: "ti-trophy", label: "Trophy", icon: "ti ti-trophy" },
+  { id: "ti-flag", label: "Flag", icon: "ti ti-flag" },
+  { id: "ti-key", label: "Key", icon: "ti ti-key" },
+  { id: "ti-lock", label: "Lock", icon: "ti ti-lock" },
+  { id: "ti-shield", label: "Shield", icon: "ti ti-shield" },
+  { id: "ti-gift", label: "Gift", icon: "ti ti-gift" },
+  { id: "ti-bell", label: "Bell", icon: "ti ti-bell" },
+  { id: "ti-lamp", label: "Lamp", icon: "ti ti-lamp" },
+  { id: "ti-bolt", label: "Bolt", icon: "ti ti-bolt" },
+  { id: "ti-bulb", label: "Idea", icon: "ti ti-bulb" },
+  { id: "ti-puzzle", label: "Puzzle", icon: "ti ti-puzzle" },
+  { id: "ti-eye", label: "Eye", icon: "ti ti-eye" },
+  { id: "ti-brain", label: "Brain", icon: "ti ti-brain" },
+  { id: "ti-compass", label: "Compass", icon: "ti ti-compass" },
+  { id: "ti-wand", label: "Wand", icon: "ti ti-wand" },
+  { id: "ti-sword", label: "Sword", icon: "ti ti-sword" },
+  { id: "ti-anchor", label: "Anchor", icon: "ti ti-anchor" },
+  { id: "ti-camera", label: "Camera", icon: "ti ti-camera" },
+  { id: "ti-music", label: "Music", icon: "ti ti-music" },
+  { id: "ti-palette", label: "Palette", icon: "ti ti-palette" },
+  { id: "ti-paint", label: "Paint", icon: "ti ti-paint" },
+  { id: "ti-coffee", label: "Coffee", icon: "ti ti-coffee" },
+  // Animals
+  { id: "ti-cat", label: "Cat", icon: "ti ti-cat" },
+  { id: "ti-dog", label: "Dog", icon: "ti ti-dog" },
+  { id: "ti-fish", label: "Fish", icon: "ti ti-fish" },
+  { id: "ti-bug", label: "Bug", icon: "ti ti-bug" },
+  { id: "ti-butterfly", label: "Butterfly", icon: "ti ti-butterfly" },
+  { id: "ti-feather", label: "Feather", icon: "ti ti-feather" },
+  { id: "ti-paw", label: "Paw", icon: "ti ti-paw" },
+  { id: "ti-deer", label: "Deer", icon: "ti ti-deer" },
+  { id: "ti-horse", label: "Horse", icon: "ti ti-horse" },
+  { id: "ti-pig", label: "Pig", icon: "ti ti-pig" },
+  { id: "ti-spider", label: "Spider", icon: "ti ti-spider" },
+  { id: "ti-bat", label: "Bat", icon: "ti ti-bat" },
+  // Nature & Weather
+  { id: "ti-flower", label: "Flower", icon: "ti ti-flower" },
+  { id: "ti-leaf", label: "Leaf", icon: "ti ti-leaf" },
+  { id: "ti-tree", label: "Tree", icon: "ti ti-tree" },
+  { id: "ti-plant", label: "Plant", icon: "ti ti-plant" },
+  { id: "ti-seeding", label: "Seeding", icon: "ti ti-seeding" },
+  { id: "ti-mushroom", label: "Mushroom", icon: "ti ti-mushroom" },
+  { id: "ti-cactus", label: "Cactus", icon: "ti ti-cactus" },
+  { id: "ti-sun", label: "Sun", icon: "ti ti-sun" },
+  { id: "ti-moon", label: "Moon", icon: "ti ti-moon" },
+  { id: "ti-cloud", label: "Cloud", icon: "ti ti-cloud" },
+  { id: "ti-snowflake", label: "Snowflake", icon: "ti ti-snowflake" },
+  { id: "ti-flame", label: "Flame", icon: "ti ti-flame" },
+  { id: "ti-rainbow", label: "Rainbow", icon: "ti ti-rainbow" },
+  { id: "ti-tornado", label: "Tornado", icon: "ti ti-tornado" },
+  { id: "ti-mountain", label: "Mountain", icon: "ti ti-mountain" },
+  // Travel & Space
+  { id: "ti-home", label: "Home", icon: "ti ti-home" },
+  { id: "ti-world", label: "World", icon: "ti ti-world" },
+  { id: "ti-globe", label: "Globe", icon: "ti ti-globe" },
+  { id: "ti-map", label: "Map", icon: "ti ti-map" },
+  { id: "ti-rocket", label: "Rocket", icon: "ti ti-rocket" },
+  { id: "ti-planet", label: "Planet", icon: "ti ti-planet" },
+  { id: "ti-meteor", label: "Meteor", icon: "ti ti-meteor" },
+  { id: "ti-comet", label: "Comet", icon: "ti ti-comet" },
+  { id: "ti-tent", label: "Tent", icon: "ti ti-tent" },
+  { id: "ti-sailboat", label: "Sailboat", icon: "ti ti-sailboat" },
+  { id: "ti-plane", label: "Plane", icon: "ti ti-plane" },
+  // Food & Drink
+  { id: "ti-apple", label: "Apple", icon: "ti ti-apple" },
+  { id: "ti-cherry", label: "Cherry", icon: "ti ti-cherry" },
+  { id: "ti-lemon", label: "Lemon", icon: "ti ti-lemon" },
+  { id: "ti-pizza", label: "Pizza", icon: "ti ti-pizza" },
+  { id: "ti-cake", label: "Cake", icon: "ti ti-cake" },
+  { id: "ti-cookie", label: "Cookie", icon: "ti ti-cookie" },
+  { id: "ti-candy", label: "Candy", icon: "ti ti-candy" },
+  { id: "ti-ice-cream", label: "Ice Cream", icon: "ti ti-ice-cream" },
+  // Fun
+  { id: "ti-ghost", label: "Ghost", icon: "ti ti-ghost" },
+  { id: "ti-alien", label: "Alien", icon: "ti ti-alien" },
+  { id: "ti-atom", label: "Atom", icon: "ti ti-atom" },
+];
+
+export type IconOption = (typeof ICON_OPTIONS)[number];
+
+export const icons = {
+  ICON_OPTIONS,
+  options: ICON_OPTIONS,
+} as const;

package/src/shared/index.ts

@@ -0,0 +1,10 @@
+// Cloud-specific shared utils (NOT in stdlib)
+export * from "./account-display";
+export * from "./account-session";
+export type * from "./icons";
+export { icons } from "./icons";
+export { markdown } from "./markdown";
+
+// Re-export from stdlib for backward compatibility
+// Prefer importing directly from @valentinkolb/stdlib
+export { dates, dates as calendar, encoding, fileIcons, gradients } from "@valentinkolb/stdlib";

package/src/shared/markdown/client.ts

@@ -0,0 +1,130 @@
+/**
+ * Initialize Mermaid diagrams within a container element.
+ * Call this in onMount() of your client-side component.
+ *
+ * @param container - The container element containing rendered markdown
+ */
+export async function initMermaid(container: HTMLElement): Promise<void> {
+  const mermaid = (await import("mermaid")).default;
+  // Initialize mermaid with theme detection
+  const isDark = document.documentElement.classList.contains("dark");
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: "base",
+    themeVariables: isDark
+      ? {
+          darkMode: true,
+          background: "#09090b",
+          textColor: "#e5e7eb",
+          lineColor: "#6b7280",
+          primaryTextColor: "#e5e7eb",
+          secondaryTextColor: "#e5e7eb",
+          tertiaryTextColor: "#e5e7eb",
+          noteTextColor: "#e5e7eb",
+          mainBkg: "#111827",
+          secondBkg: "#1f2937",
+          tertiaryColor: "#374151",
+        }
+      : {
+          darkMode: false,
+          background: "#ffffff",
+          textColor: "#111827",
+          lineColor: "#6b7280",
+          primaryTextColor: "#111827",
+          secondaryTextColor: "#111827",
+          tertiaryTextColor: "#111827",
+          noteTextColor: "#111827",
+          mainBkg: "#ffffff",
+          secondBkg: "#f9fafb",
+          tertiaryColor: "#f3f4f6",
+        },
+  });
+
+  // Find mermaid blocks (rendered with fixed-height container from server)
+  const mermaidBlocks = container.querySelectorAll(".md-mermaid-block");
+  if (mermaidBlocks.length === 0) return;
+
+  const renderPromises = Array.from(mermaidBlocks).map(async (block, index) => {
+    const codeElement = block.querySelector("code.language-mermaid");
+    const innerContainer = block.querySelector(".h-full.w-full.flex") as HTMLElement;
+    if (!codeElement || !innerContainer) return;
+
+    const code = codeElement.textContent || "";
+    const mermaidId = `mermaid-${index}-${Date.now()}`;
+
+    try {
+      // Render mermaid to SVG
+      const { svg } = await mermaid.render(mermaidId, code);
+
+      // Remove loading indicator and hidden pre
+      const loading = innerContainer.querySelector(".md-mermaid-loading");
+      const pre = innerContainer.querySelector("pre");
+      loading?.remove();
+      pre?.remove();
+
+      // Create container for SVG with scaling
+      const svgContainer = document.createElement("div");
+      svgContainer.className = "flex items-center justify-center w-full h-full";
+      svgContainer.innerHTML = svg;
+
+      // Scale SVG to fit container
+      const svgElement = svgContainer.querySelector("svg");
+      if (svgElement) {
+        svgElement.style.maxWidth = "100%";
+        svgElement.style.maxHeight = "100%";
+        svgElement.style.width = "auto";
+        svgElement.style.height = "auto";
+      }
+
+      innerContainer.appendChild(svgContainer);
+    } catch (error) {
+      // Show error
+      const loading = innerContainer.querySelector(".md-mermaid-loading");
+      if (loading) {
+        loading.innerHTML = `
+            <div class="flex flex-col items-center gap-2 text-red-500">
+              <i class="ti ti-alert-circle text-xl"></i>
+              <span class="text-sm">Invalid mermaid syntax</span>
+            </div>
+          `;
+      }
+    }
+  });
+
+  await Promise.all(renderPromises);
+}
+
+/**
+ * Set external links to open in new tab.
+ * Call this in onMount() of your client-side component.
+ *
+ * @param container - The container element containing rendered markdown
+ */
+export function initExternalLinks(container: HTMLElement): void {
+  const links = container.querySelectorAll("a");
+  links.forEach((link) => {
+    if (link.href && !link.href.startsWith(window.location.origin)) {
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+    }
+  });
+}
+
+/**
+ * Initialize all markdown enhancements (Mermaid + external links).
+ * KaTeX is rendered server-side and doesn't need client initialization.
+ * Call this in onMount() of your client-side component.
+ *
+ * @param container - The container element containing rendered markdown
+ */
+export async function initMarkdownEnhancements(container: HTMLElement): Promise<void> {
+  await initMermaid(container);
+  initExternalLinks(container);
+}
+
+export const markdownClient = {
+  initMermaid,
+  initExternalLinks,
+  initEnhancements: initMarkdownEnhancements,
+  initMarkdownEnhancements,
+} as const;

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

@@ -0,0 +1,58 @@
+/**
+ * Code extension for marked
+ *
+ * Renders code blocks and inline code with consistent styling.
+ * For now, this provides basic code formatting without syntax highlighting.
+ * Full syntax highlighting can be added later with highlight.js if needed.
+ */
+
+import type { MarkedExtension, Tokens } from "marked";
+import { escapeHtml } from "../shared";
+
+export function codeExtension(): MarkedExtension {
+  return {
+    renderer: {
+      code(token: Tokens.Code): string {
+        const { text, lang } = token;
+        const escapedCode = escapeHtml(text);
+        const isMermaid = lang?.toLowerCase() === "mermaid";
+
+        // Language class for syntax highlighting / mermaid detection
+        const langClass = lang ? ` language-${escapeHtml(lang)}` : "";
+
+        // Special rendering for mermaid blocks with fixed height container
+        if (isMermaid) {
+          return (
+            `<div class="md-mermaid-block my-3 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" style="height: 400px;">` +
+            `<div class="h-full w-full flex items-center justify-center p-4">` +
+            `<pre class="hidden"><code class="language-mermaid">${escapedCode}</code></pre>` +
+            `<div class="md-mermaid-loading text-dimmed text-sm flex items-center gap-2">` +
+            `<i class="ti ti-loader-2 animate-spin"></i> Loading diagram...` +
+            `</div>` +
+            `</div>` +
+            `</div>`
+          );
+        }
+
+        // Language badge if specified
+        const langBadge = lang
+          ? `<span class="absolute top-2 right-2 text-xs text-gray-400 dark:text-gray-500 font-mono select-none">${escapeHtml(lang)}</span>`
+          : "";
+
+        return (
+          `<div class="md-code-block relative my-3">` +
+          langBadge +
+          `<pre class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md p-4 overflow-x-auto">` +
+          `<code class="text-sm font-mono text-gray-800 dark:text-gray-200 whitespace-pre${langClass}">${escapedCode}</code>` +
+          `</pre>` +
+          `</div>`
+        );
+      },
+
+      codespan(token: Tokens.Codespan): string {
+        const escapedCode = escapeHtml(token.text);
+        return `<code class="bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-1.5 py-0.5 rounded text-sm font-mono">${escapedCode}</code>`;
+      },
+    },
+  };
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Images extension for marked
+ *
+ * Renders images with the same visual style as the CodeMirror editor:
+ * - Centered figure with max-height constraint
+ * - Rounded border
+ * - Optional caption from alt text
+ */
+
+import type { MarkedExtension, Tokens } from "marked";
+import { escapeHtml, IMAGE_STYLES } from "../shared";
+
+export function imagesExtension(): MarkedExtension {
+  return {
+    renderer: {
+      image(token: Tokens.Image): string {
+        const { href, title, text: alt } = token;
+
+        // Build the image element
+        const imgAttrs = [`src="${escapeHtml(href)}"`, `alt="${escapeHtml(alt || "")}"`, `loading="lazy"`, `class="${IMAGE_STYLES.img}"`];
+
+        if (title) {
+          imgAttrs.push(`title="${escapeHtml(title)}"`);
+        }
+
+        const imgHtml = `<img ${imgAttrs.join(" ")} />`;
+
+        // Build caption if alt text provided
+        const captionHtml = alt ? `<figcaption class="${IMAGE_STYLES.caption}">${escapeHtml(alt)}</figcaption>` : "";
+
+        // Wrap in figure for centering
+        return (
+          `<div class="${IMAGE_STYLES.wrapper}">` +
+          `<figure class="${IMAGE_STYLES.figure}">` +
+          imgHtml +
+          captionHtml +
+          `</figure>` +
+          `</div>`
+        );
+      },
+    },
+  };
+}

package/src/shared/markdown/extensions/info-blocks.ts

@@ -0,0 +1,93 @@
+/**
+ * Info Blocks Extension for Marked
+ *
+ * Renders custom info blocks with syntax:
+ * ::: note
+ * Content here
+ * :::
+ *
+ * Supported types: note, info, success, warning, danger
+ */
+
+import type { MarkedExtension, Tokens } from "marked";
+import { escapeHtml } from "../shared";
+
+type BlockType = "note" | "info" | "success" | "warning" | "danger";
+
+const blockConfig: Record<BlockType, { icon: string; label: string; classes: string }> = {
+  note: {
+    icon: "ti-chevron-right",
+    label: "Note",
+    classes: "border-l-4 border-zinc-400 bg-zinc-50 dark:bg-zinc-800/50 text-zinc-800 dark:text-zinc-200",
+  },
+  info: {
+    icon: "ti-info-circle",
+    label: "Info",
+    classes: "border-l-4 border-blue-400 bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200",
+  },
+  success: {
+    icon: "ti-check",
+    label: "Success",
+    classes: "border-l-4 border-green-400 bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200",
+  },
+  warning: {
+    icon: "ti-alert-circle",
+    label: "Warning",
+    classes: "border-l-4 border-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-200",
+  },
+  danger: {
+    icon: "ti-alert-hexagon",
+    label: "Danger",
+    classes: "border-l-4 border-red-400 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200",
+  },
+};
+
+const renderInlineContent = (content: string): string => {
+  return content
+    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+    .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>")
+    .replace(/`([^`]+)`/g, '<code class="bg-black/10 dark:bg-white/10 px-1 py-0.5 rounded text-sm">$1</code>')
+    .replace(/\n/g, "<br>");
+};
+
+export function infoBlocksExtension(): MarkedExtension {
+  return {
+    extensions: [
+      {
+        name: "infoBlock",
+        level: "block",
+        start(src: string) {
+          return src.match(/^:::/)?.index;
+        },
+        tokenizer(src: string) {
+          const match = src.match(/^:::(\w+)\s*\n([\s\S]*?)\n:::/);
+          if (!match) return undefined;
+
+          const typeStr = match[1]?.toLowerCase() as BlockType;
+          if (!blockConfig[typeStr]) return undefined;
+
+          return {
+            type: "infoBlock",
+            raw: match[0],
+            blockType: typeStr,
+            content: match[2]?.trim() ?? "",
+          };
+        },
+        renderer(token: Tokens.Generic) {
+          const blockType = token.blockType as BlockType;
+          const config = blockConfig[blockType];
+          const content = escapeHtml(token.content as string);
+          const renderedContent = renderInlineContent(content);
+
+          return `<div class="info-block ${config.classes} p-4 rounded my-2">
+  <div class="flex items-center gap-1.5 font-semibold mb-1">
+    <i class="ti ${config.icon} shrink-0"></i>
+    <span>${config.label}</span>
+  </div>
+  <div>${renderedContent}</div>
+</div>`;
+        },
+      },
+    ],
+  };
+}