@jant/core 0.3.27 → 0.3.28

package/src/lib/icon-catalog.ts

@@ -0,0 +1,181 @@
+/**
+ * Icon Catalog
+ *
+ * Curated subset of Lucide icons organized by category.
+ * Used by the dashboard icon picker to keep the response payload small.
+ */
+
+/** Curated icon names (kebab-case) organized by category */
+export const ICON_CATALOG: Record<string, string[]> = {
+  general: [
+    "library",
+    "bookmark",
+    "heart",
+    "star",
+    "flag",
+    "tag",
+    "hash",
+    "circle",
+    "square",
+    "triangle",
+    "diamond",
+    "award",
+    "trophy",
+    "medal",
+    "crown",
+    "gem",
+    "sparkles",
+    "zap",
+    "flame",
+  ],
+  files: [
+    "file",
+    "file-text",
+    "folder",
+    "folder-open",
+    "archive",
+    "clipboard",
+    "notebook",
+    "book",
+    "book-open",
+    "book-marked",
+    "scroll",
+    "newspaper",
+    "sticky-note",
+  ],
+  media: [
+    "image",
+    "camera",
+    "video",
+    "film",
+    "music",
+    "headphones",
+    "mic",
+    "radio",
+    "tv",
+    "monitor",
+    "podcast",
+    "palette",
+    "brush",
+    "pen-tool",
+  ],
+  communication: [
+    "mail",
+    "message-circle",
+    "message-square",
+    "phone",
+    "at-sign",
+    "send",
+    "inbox",
+    "megaphone",
+    "bell",
+    "rss",
+  ],
+  nature: [
+    "sun",
+    "moon",
+    "cloud",
+    "snowflake",
+    "droplets",
+    "leaf",
+    "flower-2",
+    "trees",
+    "mountain",
+    "waves",
+    "bird",
+    "bug",
+    "fish",
+    "paw-print",
+  ],
+  tech: [
+    "code",
+    "terminal",
+    "cpu",
+    "database",
+    "server",
+    "hard-drive",
+    "wifi",
+    "globe",
+    "link",
+    "qr-code",
+    "smartphone",
+    "laptop",
+    "tablet",
+    "gamepad-2",
+    "bot",
+  ],
+  travel: [
+    "map",
+    "map-pin",
+    "compass",
+    "navigation",
+    "plane",
+    "car",
+    "bike",
+    "ship",
+    "train-front",
+    "building-2",
+    "home",
+    "tent",
+    "landmark",
+  ],
+  food: [
+    "coffee",
+    "wine",
+    "beer",
+    "utensils",
+    "pizza",
+    "cake",
+    "apple",
+    "cherry",
+    "grape",
+    "cookie",
+  ],
+  people: [
+    "user",
+    "users",
+    "baby",
+    "smile",
+    "laugh",
+    "angry",
+    "hand-heart",
+    "brain",
+    "dumbbell",
+    "stethoscope",
+    "graduation-cap",
+    "briefcase",
+  ],
+  objects: [
+    "key",
+    "lock",
+    "shield",
+    "clock",
+    "calendar",
+    "gift",
+    "shopping-bag",
+    "shopping-cart",
+    "wallet",
+    "scissors",
+    "wrench",
+    "hammer",
+    "lightbulb",
+    "rocket",
+    "umbrella",
+    "glasses",
+  ],
+};
+
+/**
+ * Get all curated icon names as a flat array.
+ *
+ * @returns Array of kebab-case icon names
+ *
+ * @example
+ * ```typescript
+ * const names = getAllCatalogIconNames();
+ * // ["library", "bookmark", "heart", ...]
+ * ```
+ */
+export function getAllCatalogIconNames(): string[] {
+  return Object.values(ICON_CATALOG).flat();
+}

package/src/lib/icons.ts

@@ -0,0 +1,202 @@
+/**
+ * Collection Icon Utilities
+ *
+ * Handles structured icon data (Lucide icons with color) stored as JSON in the DB.
+ * Backward-compatible with legacy emoji/text icon values.
+ */
+
+import * as lucideIcons from "lucide-static";
+
+/** Structured icon data stored as JSON in the DB `icon` column */
+export interface CollectionIcon {
+  name: string;
+  svg: string;
+  color: string;
+}
+
+/** Curated color presets for the icon picker */
+export const ICON_COLOR_PRESETS = [
+  { name: "gray", value: "#6b7280" },
+  { name: "red", value: "#ef4444" },
+  { name: "orange", value: "#f97316" },
+  { name: "amber", value: "#f59e0b" },
+  { name: "green", value: "#22c55e" },
+  { name: "teal", value: "#14b8a6" },
+  { name: "blue", value: "#3b82f6" },
+  { name: "indigo", value: "#6366f1" },
+  { name: "purple", value: "#a855f7" },
+  { name: "pink", value: "#ec4899" },
+] as const;
+
+export const DEFAULT_ICON_NAME = "library";
+export const DEFAULT_ICON_COLOR = "#6b7280";
+
+/**
+ * Convert a kebab-case icon name to PascalCase for lucide-static lookup.
+ *
+ * @param name - Kebab-case icon name (e.g. "book-open")
+ * @returns PascalCase string (e.g. "BookOpen")
+ *
+ * @example
+ * ```typescript
+ * toPascalCase("book-open") // "BookOpen"
+ * toPascalCase("library") // "Library"
+ * ```
+ */
+function toPascalCase(name: string): string {
+  return name
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+}
+
+/**
+ * Get SVG string for a Lucide icon by kebab-case name.
+ *
+ * @param name - Kebab-case icon name (e.g. "book-open", "library")
+ * @returns SVG string or null if icon not found
+ *
+ * @example
+ * ```typescript
+ * const svg = getIconSvg("library");
+ * // '<svg class="lucide lucide-library" ...'
+ * ```
+ */
+export function getIconSvg(name: string): string | null {
+  const pascalName = toPascalCase(name);
+  const svg = (lucideIcons as Record<string, string>)[pascalName];
+  return typeof svg === "string" ? svg : null;
+}
+
+/**
+ * Parse a collection icon value from the DB.
+ * Returns structured icon data or null for legacy emoji/text values or invalid JSON.
+ *
+ * @param icon - Raw icon string from the DB (JSON or legacy emoji/text)
+ * @returns Parsed CollectionIcon or null
+ *
+ * @example
+ * ```typescript
+ * parseCollectionIcon('{"name":"library","svg":"<svg...","color":"#6b7280"}')
+ * // { name: "library", svg: "<svg...", color: "#6b7280" }
+ *
+ * parseCollectionIcon("📚") // null (legacy emoji)
+ * parseCollectionIcon(null) // null
+ * ```
+ */
+export function parseCollectionIcon(
+  icon: string | null,
+): CollectionIcon | null {
+  if (!icon || !icon.startsWith("{")) return null;
+  try {
+    const parsed = JSON.parse(icon) as Record<string, unknown>;
+    if (
+      typeof parsed.name === "string" &&
+      typeof parsed.svg === "string" &&
+      typeof parsed.color === "string"
+    ) {
+      return parsed as unknown as CollectionIcon;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Create a JSON string for storing a structured icon in the DB.
+ *
+ * @param name - Kebab-case icon name
+ * @param svg - SVG string
+ * @param color - Hex color string
+ * @returns JSON string for DB storage
+ *
+ * @example
+ * ```typescript
+ * createIconValue("library", "<svg...", "#6b7280")
+ * // '{"name":"library","svg":"<svg...","color":"#6b7280"}'
+ * ```
+ */
+export function createIconValue(
+  name: string,
+  svg: string,
+  color: string,
+): string {
+  return JSON.stringify({ name, svg, color });
+}
+
+/**
+ * Render a collection icon as an HTML string.
+ *
+ * - Structured icon (JSON) -> colored SVG
+ * - Legacy emoji/text -> span with text
+ * - null + fallback -> default icon SVG
+ * - null without fallback -> empty string
+ *
+ * @param icon - Raw icon string from the DB
+ * @param opts - Rendering options
+ * @param opts.size - Icon size in pixels (default: 24)
+ * @param opts.fallback - Whether to render default icon when icon is null (default: false)
+ * @returns HTML string
+ *
+ * @example
+ * ```typescript
+ * renderCollectionIcon('{"name":"library","svg":"<svg...","color":"#3b82f6"}', { size: 16 })
+ * // '<svg ... style="color: #3b82f6" width="16" height="16">...</svg>'
+ *
+ * renderCollectionIcon("📚")
+ * // '<span>📚</span>'
+ *
+ * renderCollectionIcon(null, { fallback: true })
+ * // '<svg ... (default library icon)>'
+ * ```
+ */
+export function renderCollectionIcon(
+  icon: string | null,
+  opts?: { size?: number; fallback?: boolean },
+): string {
+  const size = opts?.size ?? 24;
+
+  const parsed = parseCollectionIcon(icon);
+  if (parsed) {
+    return applyIconSize(parsed.svg, size, parsed.color);
+  }
+
+  // Legacy emoji/text value
+  if (icon) {
+    return `<span>${escapeHtml(icon)}</span>`;
+  }
+
+  // Null — optionally show fallback
+  if (opts?.fallback) {
+    const defaultSvg = getIconSvg(DEFAULT_ICON_NAME);
+    if (defaultSvg) {
+      return applyIconSize(defaultSvg, size, DEFAULT_ICON_COLOR);
+    }
+  }
+
+  return "";
+}
+
+/**
+ * Apply size and color to an SVG string by replacing width/height attributes
+ * and adding a style attribute for color.
+ */
+function applyIconSize(svg: string, size: number, color?: string): string {
+  let result = svg
+    .replace(/width="24"/, `width="${size}"`)
+    .replace(/height="24"/, `height="${size}"`);
+  if (color) {
+    result = result.replace("<svg", `<svg style="color: ${color}"`);
+  }
+  return result;
+}
+
+/** Minimal HTML escaping for legacy emoji/text values */
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}

package/src/lib/navigation.ts

@@ -5,10 +5,8 @@
  */
 
 import type { Context } from "hono";
-import { getSiteName, getHomeDefaultView, getSiteFooter } from "./config.js";
 import type { Collection, NavItemView } from "../types.js";
 import { toNavItemViews } from "./view.js";
-import { getMediaUrl, getPublicUrlForProvider } from "./image.js";
 import { render as renderMarkdown } from "./markdown.js";
 
 /**
@@ -49,31 +47,20 @@ export interface NavigationData {
 export async function getNavigationData(c: Context): Promise<NavigationData> {
   const items = await c.var.services.navItems.list();
   const currentPath = new URL(c.req.url).pathname;
-  const [siteName, homeDefaultView, siteFooter] = await Promise.all([
-    getSiteName(c),
-    getHomeDefaultView(c),
-    getSiteFooter(c),
-  ]);
+  const appConfig = c.var.appConfig;
+
+  const siteName = appConfig.siteName;
+  const homeDefaultView = appConfig.homeDefaultView;
+  const siteFooter = appConfig.siteFooter;
 
   // Only include description if explicitly set (DB or env), not the default
-  const dbDescription = await c.var.services.settings.get("SITE_DESCRIPTION");
-  const envDescription = c.env.SITE_DESCRIPTION;
-  const siteDescription =
-    dbDescription || (typeof envDescription === "string" ? envDescription : "");
+  const siteDescription = appConfig.siteDescriptionExplicit
+    ? appConfig.siteDescription
+    : "";
 
-  // Resolve avatar URL from storage key
-  const avatarKey = await c.var.services.settings.get("SITE_AVATAR");
-  const showHeaderAvatar =
-    (await c.var.services.settings.get("SHOW_HEADER_AVATAR")) === "true";
-  let siteAvatarUrl: string | undefined;
-  if (avatarKey) {
-    const publicUrl = getPublicUrlForProvider(
-      c.env.STORAGE_DRIVER || "r2",
-      c.env.R2_PUBLIC_URL,
-      c.env.S3_PUBLIC_URL,
-    );
-    siteAvatarUrl = getMediaUrl(avatarKey, publicUrl);
-  }
+  // Avatar URL and display flag come from appConfig
+  const siteAvatarUrl = appConfig.siteAvatarUrl || undefined;
+  const showHeaderAvatar = appConfig.showHeaderAvatar;
 
   // Render footer markdown
   const siteFooterHtml = siteFooter ? renderMarkdown(siteFooter) : undefined;
@@ -83,15 +70,13 @@ export async function getNavigationData(c: Context): Promise<NavigationData> {
   // Check auth status for compose button
   let isAuthenticated = false;
   let collections: Collection[] = [];
-  if (c.var.auth) {
-    try {
-      const session = await c.var.auth.api.getSession({
-        headers: c.req.raw.headers,
-      });
-      isAuthenticated = !!session?.user;
-    } catch {
-      // Not authenticated
-    }
+  try {
+    const session = await c.var.auth.api.getSession({
+      headers: c.req.raw.headers,
+    });
+    isAuthenticated = !!session?.user;
+  } catch {
+    // Not authenticated
   }
 
   // Only load collections when authenticated (for compose dialog)

package/src/lib/pagination.ts

@@ -40,10 +40,11 @@ export function getPageNumbers(
   // Insert 0 for gaps
   const result: number[] = [];
   for (let i = 0; i < sorted.length; i++) {
-    if (i > 0 && sorted[i]! - sorted[i - 1]! > 1) {
+    const current = sorted[i] as number;
+    if (i > 0 && current - (sorted[i - 1] as number) > 1) {
       result.push(0); // ellipsis marker
     }
-    result.push(sorted[i]!);
+    result.push(current);
   }
 
   return result;

package/src/lib/post-form-bridge.ts

@@ -0,0 +1,136 @@
+/**
+ * Post Form Bridge
+ *
+ * Connects <jant-post-form> to the server by handling:
+ * - `jant:post-submit` → POST JSON and redirect on success
+ * - `jant:post-load-media` → fetch media picker HTML and manage selections
+ */
+
+import type { PostSubmitDetail } from "../ui/components/post-form-types.js";
+import type { JantPostForm } from "../ui/components/jant-post-form.js";
+import { showToast } from "./toast.js";
+
+function findPostForm(
+  target: globalThis.EventTarget | null,
+): JantPostForm | null {
+  if (target instanceof HTMLElement && target.tagName === "JANT-POST-FORM") {
+    return target as JantPostForm;
+  }
+  if (target instanceof HTMLElement) {
+    return target.closest("jant-post-form") as JantPostForm | null;
+  }
+  return document.querySelector("jant-post-form");
+}
+
+function applyMediaSelection(el: HTMLElement, selected: boolean) {
+  el.classList.toggle("ring-2", selected);
+  el.classList.toggle("ring-primary", selected);
+  el.classList.toggle("border-primary", selected);
+}
+
+async function handlePostSubmit(event: Event) {
+  const customEvent = event as CustomEvent<PostSubmitDetail>;
+  const detail = customEvent.detail;
+  if (!detail) return;
+
+  const formEl = findPostForm(customEvent.target);
+  if (!formEl || !detail.endpoint) return;
+
+  formEl.loading = true;
+
+  try {
+    const res = await fetch(detail.endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify(detail.data),
+    });
+
+    if (!res.ok) {
+      let message = detail.messages.error;
+      try {
+        const json = await res.json();
+        if (typeof json?.error === "string") message = json.error;
+        else if (typeof json?.message === "string") message = json.message;
+      } catch {
+        // Ignore JSON parse failure; keep fallback message.
+      }
+      throw new Error(message);
+    }
+
+    const json = await res.json();
+
+    if (json?.status === "redirect" && typeof json.url === "string") {
+      window.location.href = json.url;
+      return;
+    }
+
+    showToast(detail.messages.success);
+  } catch (err) {
+    const message =
+      err instanceof Error && err.message ? err.message : detail.messages.error;
+    showToast(message, "error");
+  } finally {
+    formEl.loading = false;
+  }
+}
+
+async function handleMediaLoad(event: Event) {
+  const customEvent = event as CustomEvent<{
+    endpoint: string;
+    selectedIds: string[];
+  }>;
+  const detail = customEvent.detail;
+  if (!detail?.endpoint) return;
+
+  const grid = document.getElementById("post-media-grid");
+  const formEl = findPostForm(customEvent.target);
+  if (!grid || !formEl) return;
+
+  try {
+    grid.innerHTML =
+      '<p class="text-muted-foreground text-sm col-span-4">Loading...</p>';
+
+    const res = await fetch(detail.endpoint, {
+      headers: { Accept: "text/html" },
+    });
+    const html = await res.text();
+    grid.innerHTML = html;
+  } catch {
+    grid.innerHTML =
+      '<p class="text-red-500 text-sm col-span-4">Failed to load media.</p>';
+    return;
+  }
+
+  const selected = new Set(detail.selectedIds);
+
+  grid.querySelectorAll<HTMLElement>("[data-media-id]").forEach((el) => {
+    const id = el.dataset.mediaId;
+    if (!id) return;
+    applyMediaSelection(el, selected.has(id));
+  });
+
+  grid.onclick = (e: Event) => {
+    const target = (e.target as HTMLElement).closest<HTMLElement>(
+      "[data-media-id]",
+    );
+    if (!target) return;
+    const id = target.dataset.mediaId;
+    if (!id) return;
+
+    const current = new Set(formEl.mediaIds);
+    if (current.has(id)) {
+      current.delete(id);
+      applyMediaSelection(target, false);
+    } else {
+      current.add(id);
+      applyMediaSelection(target, true);
+    }
+    formEl.mediaIds = [...current];
+  };
+}
+
+document.addEventListener("jant:post-submit", handlePostSubmit);
+document.addEventListener("jant:post-load-media", handleMediaLoad);

package/src/lib/render.tsx

@@ -21,6 +21,8 @@ export interface RenderPublicPageOptions {
   navData: NavigationData;
   /** Page content JSX to render inside SiteLayout */
   content: Child;
+  /** Optional sidebar content for sidebar layout */
+  sidebar?: Child;
 }
 
 /**
@@ -41,7 +43,7 @@ export interface RenderPublicPageOptions {
  * ```
  */
 export function renderPublicPage(c: Context, options: RenderPublicPageOptions) {
-  const { title, description, navData, content } = options;
+  const { title, description, navData, content, sidebar } = options;
 
   const layoutProps: SiteLayoutProps = {
     siteName: navData.siteName,
@@ -54,11 +56,14 @@ export function renderPublicPage(c: Context, options: RenderPublicPageOptions) {
     siteAvatarUrl: navData.siteAvatarUrl,
     showHeaderAvatar: navData.showHeaderAvatar,
     siteFooterHtml: navData.siteFooterHtml,
+    sidebar,
   };
 
-  // Read favicon and noindex from context (set by theme middleware)
-  const faviconUrl = c.get("faviconUrl") as string | undefined;
-  const noindex = c.get("noindex") as boolean | undefined;
+  // Read favicon, version, and noindex from appConfig
+  const appConfig = c.get("appConfig");
+  const faviconUrl = appConfig.siteAvatarUrl || undefined;
+  const faviconVersion = appConfig.faviconVersion || undefined;
+  const noindex = appConfig.noindex;
 
   return c.html(
     <BaseLayout
@@ -66,7 +71,9 @@ export function renderPublicPage(c: Context, options: RenderPublicPageOptions) {
       description={description}
       c={c}
       faviconUrl={faviconUrl}
+      faviconVersion={faviconVersion}
       noindex={noindex}
+      isAuthenticated={navData.isAuthenticated}
     >
       <SiteLayout {...layoutProps}>{content}</SiteLayout>
     </BaseLayout>,