@jant/core 0.3.27 → 0.3.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jant/core",
-  "version": "0.3.27",
+  "version": "0.3.28",
   "description": "A modern, open-source microblogging platform built on Cloudflare Workers",
   "type": "module",
   "exports": {
@@ -8,12 +8,7 @@
       "types": "./src/index.ts",
       "default": "./dist/index.js"
     },
-    "./i18n": {
-      "types": "./src/i18n/index.ts",
-      "default": "./dist/i18n/index.js"
-    },
-    "./preset.css": "./src/preset.css",
-    "./client": "./dist/client.js"
+    "./i18n": "./src/i18n/index.ts"
   },
   "files": [
     "dist",
@@ -25,16 +20,18 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.987.0",
     "@lingui/core": "^5.9.0",
+    "@lingui/react": "^5.9.0",
     "@tailwindcss/typography": "^0.5.19",
     "basecoat-css": "^0.3.10",
     "better-auth": "^1.4.18",
     "drizzle-orm": "^0.45.1",
-    "hono": "^4.11.7",
+    "lit": "^3.3.2",
+    "lucide-static": "^0.574.0",
     "marked": "^17.0.1",
+    "pinyin-pro": "^3.28.0",
     "sortablejs": "^1.15.6",
     "sqids": "^0.3.0",
     "uuidv7": "^1.1.0",
-    "vite-ssr-components": "^0.5.2",
     "zod": "^4.3.6"
   },
   "peerDependencies": {
@@ -42,22 +39,27 @@
     "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
+    "@cloudflare/vite-plugin": "^1.22.1",
     "@cloudflare/workers-types": "^4.20260131.0",
     "@lingui/cli": "^5.9.0",
     "@lingui/conf": "^5.9.0",
     "@lingui/format-po": "^5.9.0",
     "@lingui/swc-plugin": "^5.10.1",
-    "@swc/cli": "^0.6.0",
     "@swc/core": "^1.15.11",
     "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^25.1.0",
     "better-sqlite3": "^12.6.2",
     "drizzle-kit": "^0.31.8",
     "glob": "^13.0.0",
+    "happy-dom": "^20.6.3",
+    "@tailwindcss/vite": "^4.1.18",
     "tailwindcss": "^4.1.18",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.18"
+    "unplugin-swc": "^1.5.9",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "wrangler": "^4.61.1"
   },
   "repository": {
     "type": "git",
@@ -83,14 +85,18 @@
     "node": ">=24.0.0"
   },
   "scripts": {
-    "build": "pnpm build:lib",
-    "build:lib": "swc src -d dist --strip-leading-paths --ignore '**/__tests__/**' && pnpm build:types",
-    "build:types": "tsc -p tsconfig.build.json",
-    "typecheck": "tsc --noEmit",
+    "build": "pnpm build:lib && pnpm build:client",
+    "build:client": "vite build --config vite.config.client.ts",
+    "build:lib": "vite build --config vite.config.worker.ts",
+    "typecheck": "tsc -b --noEmit",
     "db:generate": "drizzle-kit generate",
     "i18n:extract": "lingui extract",
     "i18n:compile": "lingui compile --typescript",
     "i18n:build": "pnpm i18n:extract && pnpm i18n:compile",
+    "dev": "pnpm db:migrate:local && vite dev",
+    "dev:debug": "pnpm db:migrate:local && vite dev --port 19019",
+    "db:migrate:local": "yes | wrangler d1 migrations apply DB --local",
+    "db:migrate:remote": "wrangler d1 migrations apply DB --remote",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"

package/src/__tests__/helpers/app.ts

@@ -6,7 +6,7 @@
 
 import { Hono } from "hono";
 import type { Bindings } from "../../types.js";
-import type { AppVariables } from "../../app.js";
+import type { AppVariables } from "../../types/app-context.js";
 import { createTestDatabase } from "./db.js";
 import { createPostService } from "../../services/post.js";
 import { createPageService } from "../../services/page.js";
@@ -16,8 +16,12 @@ import { createMediaService } from "../../services/media.js";
 import { createCollectionService } from "../../services/collection.js";
 import { createSearchService } from "../../services/search.js";
 import { createNavItemService } from "../../services/navigation.js";
+import { createAuthService } from "../../services/auth.js";
 import type { Database } from "../../db/index.js";
 import type BetterSqlite3 from "better-sqlite3";
+import { errorHandler } from "../../middleware/error-handler.js";
+import { createI18n } from "../../i18n/i18n.js";
+import { resolveConfig } from "../../lib/resolve-config.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -40,19 +44,24 @@ export function createTestApp(options: TestAppOptions = {}) {
   // Create a mock D1 for search service
   const mockD1 = createMockD1(sqlite);
 
+  const settingsService = createSettingsService(db);
   const services = {
     posts: createPostService(db),
     pages: createPageService(db),
-    settings: createSettingsService(db),
+    settings: settingsService,
     redirects: createRedirectService(db),
     media: createMediaService(db),
     collections: createCollectionService(db),
     search: createSearchService(mockD1),
     navItems: createNavItemService(db),
+    auth: createAuthService(db, settingsService),
   };
 
   const app = new Hono<Env>();
 
+  // Global error handler: maps DomainError → HTTP responses
+  app.onError(errorHandler);
+
   // Inject env bindings and services middleware
   app.use("*", async (c, next) => {
     // Provide mock env bindings so c.env.* works in route handlers
@@ -61,9 +70,16 @@ export function createTestApp(options: TestAppOptions = {}) {
     } as AppVariables["services"] extends never ? never : Bindings;
 
     c.set("services", services as AppVariables["services"]);
-    c.set("config", {});
+    const allSettings = await services.settings.getAll();
+    c.set("allSettings", allSettings);
+    c.set("appConfig", resolveConfig(c.env, allSettings));
     c.set("storage", null);
 
+    // i18n (English default for tests)
+    const i18n = createI18n("en");
+    c.set("lang", "en");
+    c.set("i18n", i18n);
+
     if (options.authenticated) {
       // Mock auth that always returns a session
       c.set("auth", {

package/src/__tests__/helpers/db.ts

@@ -89,7 +89,51 @@ export function createTestDatabase(options?: { fts?: boolean }) {
   // Apply 0006: rename slug to path on posts
   applyMigration(sqlite, "0006_rename_slug_to_path.sql");
 
+  // Apply 0007: post_collections M:N junction table
+  const m7 = readFileSync(
+    resolve(MIGRATIONS_DIR, "0007_post_collections_m2m.sql"),
+    "utf-8",
+  );
+  for (const stmt of m7.split("--> statement-breakpoint")) {
+    const trimmed = stmt.trim();
+    if (!trimmed) continue;
+    // Skip FTS trigger statements if FTS not requested
+    const isFts = trimmed.includes("posts_fts");
+    if (!options?.fts && isFts) continue;
+    try {
+      sqlite.exec(trimmed);
+    } catch {
+      // Ignore DROP TRIGGER failures silently
+      if (!trimmed.startsWith("DROP TRIGGER")) {
+        throw new Error(`Migration 0007 failed: ${trimmed.slice(0, 100)}`);
+      }
+    }
+  }
+
+  // Apply 0008: collection_dividers table
+  applyMigration(sqlite, "0008_add_collection_dividers.sql");
+
+  // Apply 0009: drop show_divider column from collections
+  applyMigration(sqlite, "0009_drop_collection_show_divider.sql");
+
+  // Apply 0010: performance indexes
+  applyMigration(sqlite, "0010_add_performance_indexes.sql");
+
   const db = drizzle(sqlite, { schema });
 
+  // Polyfill D1 batch() for test compatibility.
+  // In production, D1 batch executes statements atomically in a single transaction.
+  // In tests, better-sqlite3 is synchronous and single-threaded so sequential
+  // execution is effectively atomic.
+  Object.defineProperty(db, "batch", {
+    value: async (queries: PromiseLike<unknown>[]) => {
+      const results = [];
+      for (const q of queries) {
+        results.push(await q);
+      }
+      return results;
+    },
+  });
+
   return { db, sqlite };
 }

package/src/__tests__/helpers/lingui-core-macro-mock.ts

@@ -0,0 +1,33 @@
+/**
+ * Mock for @lingui/core/macro in the Vitest environment.
+ *
+ * The real module requires the Babel macro ecosystem which is not available
+ * under Vitest. This mock replicates the *post-transformation* API surface:
+ * `msg()` / `defineMessage()` return a MessageDescriptor whose `id` equals
+ * the source `message`. At runtime `i18n._()` falls back to `message` when
+ * the ID is not in the catalog, so English source strings propagate through.
+ */
+
+import type { MessageDescriptor } from "@lingui/core";
+
+type MacroInput =
+  | { id?: string; message: string; comment?: string; context?: string }
+  | TemplateStringsArray;
+
+function toDescriptor(
+  input: MacroInput,
+  ...args: unknown[]
+): MessageDescriptor {
+  if (typeof input === "object" && "message" in input) {
+    return { id: input.message, message: input.message } as MessageDescriptor;
+  }
+  // Template literal form: msg`some text`
+  const raw = (input as TemplateStringsArray).reduce(
+    (acc, str, i) => acc + str + (args[i] ?? ""),
+    "",
+  );
+  return { id: raw, message: raw } as MessageDescriptor;
+}
+
+export const msg = toDescriptor;
+export const defineMessage = toDescriptor;

package/src/app.tsx

@@ -4,11 +4,10 @@
 
 import { Hono } from "hono";
 import { createDatabase } from "./db/index.js";
-import { createServices, type Services } from "./services/index.js";
-import { createAuth, type Auth } from "./auth.js";
+import { createServices } from "./services/index.js";
+import { createAuth } from "./auth.js";
 import { i18nMiddleware } from "./i18n/index.js";
-import type { Bindings, JantConfig } from "./types.js";
-import { SETTINGS_KEYS } from "./lib/constants.js";
+import type { Bindings } from "./types.js";
 
 // Routes - Auth
 import { setupRoutes } from "./routes/auth/setup.js";
@@ -34,6 +33,7 @@ import { mediaRoutes as dashMediaRoutes } from "./routes/dash/media.js";
 import { settingsRoutes as dashSettingsRoutes } from "./routes/dash/settings.js";
 import { redirectsRoutes as dashRedirectsRoutes } from "./routes/dash/redirects.js";
 import { collectionsRoutes as dashCollectionsRoutes } from "./routes/dash/collections.js";
+import { appearanceRoutes as dashAppearanceRoutes } from "./routes/dash/appearance.js";
 
 // Routes - API
 import { postsApiRoutes } from "./routes/api/posts.js";
@@ -53,152 +53,148 @@ import { sitemapRoutes } from "./routes/feed/sitemap.js";
 // Middleware
 import { requireAuth } from "./middleware/auth.js";
 import { requireOnboarding } from "./middleware/onboarding.js";
+import { errorHandler } from "./middleware/error-handler.js";
+import { withConfig } from "./middleware/config.js";
 
-import { getAvailableThemes, buildThemeStyle } from "./lib/theme.js";
-import { createStorageDriver, type StorageDriver } from "./lib/storage.js";
-import { BUILTIN_FONT_THEMES } from "./ui/font-themes.js";
-import { getMediaUrl, getPublicUrlForProvider } from "./lib/image.js";
+import { createStorageDriver } from "./lib/storage.js";
 import { base64ToUint8Array } from "./lib/favicon.js";
+import { type AppVariables, type App } from "./types/app-context.js";
 
-// Extend Hono's context variables
-export interface AppVariables {
-  services: Services;
-  auth: Auth;
-  config: JantConfig;
-  themeStyle: string;
-  customCSS: string;
-  isAuthenticated: boolean;
-  storage: StorageDriver | null;
-  faviconUrl?: string;
-  noindex?: boolean;
-}
-
-export type App = Hono<{ Bindings: Bindings; Variables: AppVariables }>;
+export type { AppVariables, App };
 
 /**
  * Create a Jant application
  *
- * @param config - Optional configuration
  * @returns Hono app instance
  *
- * Site settings (name, description, language) should be configured via
- * environment variables (SITE_NAME, SITE_DESCRIPTION, SITE_LANGUAGE).
- * They can also be set in the dashboard, which stores them in the database.
- *
  * @example
  * ```typescript
  * import { createApp } from "@jant/core";
  *
- * export default createApp({
- *   cssVariables: { "--card-radius": "0" },
- * });
+ * export default createApp();
  * ```
  */
-export function createApp(config: JantConfig = {}): App {
-  const resolvedConfig: JantConfig = { ...config };
-
+export function createApp(): App {
   const app = new Hono<{ Bindings: Bindings; Variables: AppVariables }>();
 
-  // Initialize services, auth, and config middleware
+  // Global error handler: maps DomainError → HTTP responses
+  app.onError(errorHandler);
+
+  // Lightweight init — no DB queries
   app.use("*", async (c, next) => {
+    if (!c.env.AUTH_SECRET) {
+      return c.html(
+        `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Configuration Error</title>
+<style>body{font-family:system-ui,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;background:#fafafa;color:#111}div{max-width:480px;text-align:center}h1{font-size:1.25rem;font-weight:600}p{color:#666;line-height:1.6}code{background:#eee;padding:2px 6px;border-radius:4px;font-size:.9em}</style>
+</head>
+<body>
+<div>
+<h1>AUTH_SECRET is not set</h1>
+<p>Set <code>AUTH_SECRET</code> in <code>.dev.vars</code> or <code>wrangler.toml</code> to start Jant.</p>
+</div>
+</body>
+</html>`,
+        500,
+      );
+    }
+
     // Use withSession() to enable D1 Read Replication
     const session = c.env.DB.withSession();
 
     // Note: Drizzle ORM doesn't officially support D1DatabaseSession yet (issue #2226)
     // but it works at runtime. We use type assertion as a temporary workaround.
     const db = createDatabase(session as unknown as D1Database);
-    const services = createServices(db, session as unknown as D1Database);
-    c.set("services", services);
-    c.set("config", resolvedConfig);
+    c.set("services", createServices(db, session as unknown as D1Database));
     c.set("storage", createStorageDriver(c.env));
 
-    if (!c.env.AUTH_SECRET) {
-      // eslint-disable-next-line no-console -- Startup warning is intentional
-      console.warn(
-        "[Jant] AUTH_SECRET is not set. Authentication is disabled. Set AUTH_SECRET in .dev.vars or wrangler.toml to enable auth.",
-      );
-    }
-
-    if (c.env.AUTH_SECRET) {
-      const baseURL = c.env.SITE_URL || new URL(c.req.url).origin;
-      const requestUrl = new URL(c.req.url);
-      const auth = createAuth(session as unknown as D1Database, {
+    const baseURL = c.env.SITE_URL || new URL(c.req.url).origin;
+    const requestUrl = new URL(c.req.url);
+    c.set(
+      "auth",
+      createAuth(session as unknown as D1Database, {
         secret: c.env.AUTH_SECRET,
         baseURL,
         useSecureCookies: requestUrl.protocol === "https:",
-      });
-      c.set("auth", auth);
-    }
+      }),
+    );
 
     await next();
   });
 
-  // Onboarding gate — redirect to /setup if not yet initialized
-  app.use("*", requireOnboarding());
+  // --- Routes that don't need config/theme ---
 
-  // Theme middleware - resolve active color theme, font theme, custom CSS, and auth state
-  app.use("*", async (c, next) => {
-    const [themeId, fontThemeId, customCSS, noindexValue, avatarKey] =
-      await Promise.all([
-        c.var.services.settings.get(SETTINGS_KEYS.THEME),
-        c.var.services.settings.get("FONT_THEME"),
-        c.var.services.settings.get(SETTINGS_KEYS.CUSTOM_CSS),
-        c.var.services.settings.get("NOINDEX"),
-        c.var.services.settings.get("SITE_AVATAR"),
-      ]);
-    const themes = getAvailableThemes(resolvedConfig);
-    const activeTheme = themeId
-      ? themes.find((t) => t.id === themeId)
-      : undefined;
-
-    // Build font override CSS variables
-    const fontTheme = fontThemeId
-      ? BUILTIN_FONT_THEMES.find((f) => f.id === fontThemeId)
-      : undefined;
-    const fontOverrides: Record<string, string> = {};
-    if (fontTheme) {
-      fontOverrides["--font-body"] = fontTheme.fontFamily;
-    }
+  // Health check
+  app.get("/health", (c) => c.json({ status: "ok" }));
 
-    const themeStyle = buildThemeStyle(activeTheme, {
-      ...resolvedConfig.cssVariables,
-      ...fontOverrides,
-    });
-    c.set("themeStyle", themeStyle);
-    c.set("customCSS", customCSS ?? "");
-
-    // Noindex
-    c.set("noindex", noindexValue === "true");
-
-    // Resolve favicon from avatar storage key
-    if (avatarKey) {
-      const publicUrl = getPublicUrlForProvider(
-        c.env.STORAGE_DRIVER || "r2",
-        c.env.R2_PUBLIC_URL,
-        c.env.S3_PUBLIC_URL,
-      );
-      c.set("faviconUrl", getMediaUrl(avatarKey, publicUrl));
+  // Media files from storage (path matches storage key: media/YYYY/MM/uuid.ext)
+  app.get("/media/*", async (c) => {
+    const storage = c.var.storage;
+    if (!storage) {
+      return c.notFound();
     }
 
-    // Check auth state for data-authenticated attribute on <body>
-    let isAuthenticated = false;
-    if (c.var.auth) {
-      try {
-        const session = await c.var.auth.api.getSession({
-          headers: c.req.raw.headers,
-        });
-        isAuthenticated = !!session;
-      } catch {
-        // Not authenticated
-      }
+    // The storage key is the full path without the leading "/"
+    const storageKey = c.req.path.slice(1);
+    const object = await storage.get(storageKey);
+    if (!object) {
+      return c.notFound();
     }
-    c.set("isAuthenticated", isAuthenticated);
 
-    await next();
+    const headers = new Headers();
+    headers.set(
+      "Content-Type",
+      object.contentType || "application/octet-stream",
+    );
+    headers.set("Cache-Control", "public, max-age=31536000, immutable");
+
+    return new Response(object.body, { headers });
   });
 
-  // i18n middleware
-  app.use("*", i18nMiddleware());
+  // better-auth handler
+  app.all("/api/auth/*", async (c) => {
+    return c.var.auth.handler(c.req.raw);
+  });
+
+  // Favicon routes - serve from DB settings (small files, avoids R2 round-trip)
+  app.get("/favicon.ico", async (c) => {
+    const data = await c.var.services.settings.get("SITE_FAVICON_ICO");
+    if (!data) return c.notFound();
+
+    return new Response(base64ToUint8Array(data), {
+      headers: {
+        "Content-Type": "image/x-icon",
+        "Cache-Control": "public, max-age=86400",
+      },
+    });
+  });
+
+  app.get("/apple-touch-icon.png", async (c) => {
+    const storage = c.var.storage;
+    const storageKey = await c.var.services.settings.get(
+      "SITE_FAVICON_APPLE_TOUCH",
+    );
+    if (!storage || !storageKey) return c.notFound();
+
+    const object = await storage.get(storageKey);
+    if (!object) return c.notFound();
+
+    return new Response(object.body, {
+      headers: {
+        "Content-Type": "image/png",
+        "Cache-Control": "public, max-age=86400",
+      },
+    });
+  });
+
+  // --- Middleware for all remaining routes ---
+
+  // Onboarding gate — redirect to /setup if not yet initialized
+  app.use("*", requireOnboarding());
 
   // Trailing slash redirect (redirect /foo/ to /foo)
   app.use("*", async (c, next) => {
@@ -226,47 +222,11 @@ export function createApp(config: JantConfig = {}): App {
     await next();
   });
 
-  // Health check
-  app.get("/health", (c) =>
-    c.json({
-      status: "ok",
-      auth: c.env.AUTH_SECRET ? "configured" : "missing",
-      authSecretLength: c.env.AUTH_SECRET?.length ?? 0,
-    }),
-  );
-
-  // Favicon routes - serve from DB settings (small files, avoids R2 round-trip)
-  app.get("/favicon.ico", async (c) => {
-    const data = await c.var.services.settings.get("SITE_FAVICON_ICO");
-    if (!data) return c.notFound();
-
-    return new Response(base64ToUint8Array(data), {
-      headers: {
-        "Content-Type": "image/x-icon",
-        "Cache-Control": "public, max-age=86400",
-      },
-    });
-  });
-
-  app.get("/apple-touch-icon.png", async (c) => {
-    const data = await c.var.services.settings.get("SITE_FAVICON_APPLE_TOUCH");
-    if (!data) return c.notFound();
-
-    return new Response(base64ToUint8Array(data), {
-      headers: {
-        "Content-Type": "image/png",
-        "Cache-Control": "public, max-age=86400",
-      },
-    });
-  });
+  // Config + i18n — loads settings, resolves config/theme
+  app.use("*", withConfig());
+  app.use("*", i18nMiddleware());
 
-  // better-auth handler
-  app.all("/api/auth/*", async (c) => {
-    if (!c.var.auth) {
-      return c.json({ error: "Auth not configured. Set AUTH_SECRET." }, 500);
-    }
-    return c.var.auth.handler(c.req.raw);
-  });
+  // --- Routes that need config ---
 
   // API Routes
   app.route("/api/posts", postsApiRoutes);
@@ -287,36 +247,13 @@ export function createApp(config: JantConfig = {}): App {
   app.route("/dash/pages", dashPagesRoutes);
   app.route("/dash/media", dashMediaRoutes);
   app.route("/dash/settings", dashSettingsRoutes);
-  app.route("/dash/redirects", dashRedirectsRoutes);
+  app.route("/dash/appearance", dashAppearanceRoutes);
+  app.route("/dash/settings/redirects", dashRedirectsRoutes);
   app.route("/dash/collections", dashCollectionsRoutes);
   // API routes
   app.route("/api/upload", uploadApiRoutes);
   app.route("/api/search", searchApiRoutes);
 
-  // Media files from storage (path matches storage key: media/YYYY/MM/uuid.ext)
-  app.get("/media/*", async (c) => {
-    const storage = c.var.storage;
-    if (!storage) {
-      return c.notFound();
-    }
-
-    // The storage key is the full path without the leading "/"
-    const storageKey = c.req.path.slice(1);
-    const object = await storage.get(storageKey);
-    if (!object) {
-      return c.notFound();
-    }
-
-    const headers = new Headers();
-    headers.set(
-      "Content-Type",
-      object.contentType || "application/octet-stream",
-    );
-    headers.set("Cache-Control", "public, max-age=31536000, immutable");
-
-    return new Response(object.body, { headers });
-  });
-
   // Compose route (auth enforced in route middleware)
   app.route("/compose", composeRoutes);
 

package/src/client.ts

@@ -13,3 +13,16 @@ import "./lib/image-processor.js";
 import "./lib/media-upload.js";
 import "./lib/avatar-upload.js";
 import "./lib/nav-reorder.js";
+import "./lib/collections-reorder.js";
+
+// Lit Web Components
+import "./ui/components/jant-compose-dialog.js";
+import "./ui/components/jant-compose-editor.js";
+import "./lib/compose-bridge.js";
+import "./ui/components/jant-settings-general.js";
+import "./ui/components/jant-settings-avatar.js";
+import "./lib/settings-bridge.js";
+import "./ui/components/jant-collection-form.js";
+import "./lib/collection-form-bridge.js";
+import "./ui/components/jant-post-form.js";
+import "./lib/post-form-bridge.js";