@jant/core 0.3.27 → 0.3.28

package/src/types/app-context.ts

@@ -0,0 +1,25 @@
+/**
+ * App Context Types
+ *
+ * Shared app-level types used across routes, middleware, and lib.
+ * Lives here (not in app.tsx) to avoid forbidden upward imports
+ * from feature modules to composition roots.
+ */
+
+import type { Hono } from "hono";
+import type { Services } from "../services/index.js";
+import type { Auth } from "../auth.js";
+import type { AppConfig } from "./config.js";
+import type { StorageDriver } from "../lib/storage.js";
+import type { Bindings } from "./bindings.js";
+
+export interface AppVariables {
+  services: Services;
+  auth: Auth;
+  appConfig: AppConfig;
+  allSettings: Record<string, string>;
+  themeStyle: string;
+  storage: StorageDriver | null;
+}
+
+export type App = Hono<{ Bindings: Bindings; Variables: AppVariables }>;

package/src/types/bindings.ts

@@ -6,6 +6,7 @@ export interface Bindings {
   DB: D1Database;
   R2?: R2Bucket;
   SITE_URL: string;
+  DEFAULT_THEME?: string;
   AUTH_SECRET?: string;
   R2_PUBLIC_URL?: string;
   IMAGE_TRANSFORM_URL?: string;

package/src/types/config.ts

@@ -4,9 +4,6 @@
  * Single Source of Truth for all configuration fields.
  */
 
-import type { ColorTheme } from "../ui/color-themes.js";
-import type { FeedData, SitemapData } from "./views.js";
-
 /**
  * Configuration Registry - Single Source of Truth
  *
@@ -37,6 +34,10 @@ export const CONFIG_FIELDS = {
   },
 
   // Environment-only (deployment/infrastructure config)
+  DEFAULT_THEME: {
+    defaultValue: "halloween",
+    envOnly: true,
+  },
   SITE_URL: {
     defaultValue: "",
     envOnly: true,
@@ -125,6 +126,11 @@ export const CONFIG_FIELDS = {
     envOnly: false,
     internal: true,
   },
+  SITE_FAVICON_VERSION: {
+    defaultValue: "",
+    envOnly: false,
+    internal: true,
+  },
   FONT_THEME: {
     defaultValue: "",
     envOnly: false,
@@ -157,27 +163,58 @@ export const CONFIG_FIELDS = {
 export type ConfigKey = keyof typeof CONFIG_FIELDS;
 
 /**
- * Main Jant configuration
- *
- * Configuration Philosophy:
- * - Use environment variables for runtime config (API keys, feature flags, site settings)
- * - Use code config (this object) for CSS customization and feed overrides
+ * Unified application configuration
  *
- * Site-level settings (name, description, language) are configured via
- * environment variables, not here. See lib/config.ts for details.
+ * Resolved once per request from DB settings + env + defaults.
+ * Access via `c.var.appConfig` in routes and lib functions.
  */
-export interface JantConfig {
-  /** CSS variable overrides (highest priority after custom CSS) */
-  cssVariables?: Record<string, string>;
-  /** Replace built-in color themes with custom list */
-  colorThemes?: ColorTheme[];
-  /** Custom feed renderers */
-  feed?: {
-    /** Custom RSS 2.0 renderer -- returns XML string */
-    rss?: (data: FeedData) => string;
-    /** Custom Atom renderer -- returns XML string */
-    atom?: (data: FeedData) => string;
-    /** Custom Sitemap renderer -- returns XML string */
-    sitemap?: (data: SitemapData) => string;
+export interface AppConfig {
+  // Site identity (DB > ENV > Default)
+  siteName: string;
+  siteDescription: string;
+  /** true only when description is set in DB or ENV (not just the default) */
+  siteDescriptionExplicit: boolean;
+  siteLanguage: string;
+  homeDefaultView: string;
+  timeZone: string;
+  siteFooter: string;
+  noindex: boolean;
+
+  // Infrastructure (ENV only)
+  siteUrl: string;
+  authConfigured: boolean;
+
+  // Media (ENV only)
+  storageDriver: string;
+  r2PublicUrl: string;
+  s3PublicUrl: string;
+  imageTransformUrl: string;
+
+  // Pagination/Feed (ENV only, parsed to number)
+  pageSize: number;
+  rssFeedLimit: number;
+
+  // Demo (ENV only)
+  demoEmail: string;
+  demoPassword: string;
+
+  // Theme (DB internal)
+  themeId: string;
+  defaultThemeId: string;
+  fontThemeId: string;
+  customCSS: string;
+
+  // Site appearance (DB internal)
+  siteAvatar: string;
+  showHeaderAvatar: boolean;
+  /** Derived: getMediaUrl(siteAvatar, publicUrl) */
+  siteAvatarUrl: string;
+  faviconVersion: string;
+
+  // Dashboard form placeholders (ENV > Default, without DB)
+  fallbacks: {
+    siteName: string;
+    siteDescription: string;
+    defaultTheme: string;
   };
 }

package/src/types/entities.ts

@@ -17,7 +17,6 @@ export interface Post {
   bodyHtml: string | null;
   quoteText: string | null;
   rating: number | null;
-  collectionId: number | null;
   replyToId: number | null;
   threadId: number | null;
   deletedAt: number | null;
@@ -78,11 +77,22 @@ export interface Collection {
   icon: string | null;
   sortOrder: SortOrder;
   position: number;
-  showDivider: number; // 0 | 1
   createdAt: number;
   updatedAt: number;
 }
 
+export interface CollectionDivider {
+  id: number;
+  position: number;
+  createdAt: number;
+  updatedAt: number;
+}
+
+export interface PostCollection {
+  postId: number;
+  collectionId: number;
+}
+
 export interface NavItem {
   id: number;
   type: NavItemType;

package/src/types/lingui-react-macro.d.ts

@@ -9,7 +9,7 @@
  */
 
 declare module "@lingui/react/macro" {
-  import type { I18n } from "@lingui/core";
+  import type { I18n, MessageDescriptor } from "@lingui/core";
   import type { FC, PropsWithChildren } from "hono/jsx";
 
   interface TranslationDescriptor {
@@ -20,8 +20,8 @@ declare module "@lingui/react/macro" {
   }
 
   export function useLingui(): {
-    t: (descriptor: TranslationDescriptor) => string;
-    _: (descriptor: TranslationDescriptor) => string;
+    t: (descriptor: TranslationDescriptor | MessageDescriptor) => string;
+    _: (descriptor: TranslationDescriptor | MessageDescriptor) => string;
     i18n: I18n;
   };
 

package/src/types/operations.ts

@@ -15,7 +15,7 @@ export interface CreatePost {
   body?: string;
   quoteText?: string;
   rating?: number;
-  collectionId?: number;
+  collectionIds?: number[];
   replyToId?: number;
   publishedAt?: number;
   mediaIds?: string[];
@@ -32,7 +32,7 @@ export interface UpdatePost {
   body?: string | null;
   quoteText?: string | null;
   rating?: number | null;
-  collectionId?: number | null;
+  collectionIds?: number[];
   publishedAt?: number;
   mediaIds?: string[];
 }
@@ -74,7 +74,6 @@ export interface CreateCollection {
   icon?: string;
   sortOrder?: SortOrder;
   position?: number;
-  showDivider?: boolean;
 }
 
 export interface UpdateCollection {
@@ -84,5 +83,4 @@ export interface UpdateCollection {
   icon?: string | null;
   sortOrder?: SortOrder;
   position?: number;
-  showDivider?: boolean;
 }

package/src/types/views.ts

@@ -39,9 +39,6 @@ export interface PostView {
   pinned: boolean;
   rating?: number;
 
-  // Collection
-  collectionId?: number;
-
   // Time -- pre-formatted
   /** ISO 8601 string */
   publishedAt: string;
@@ -169,4 +166,5 @@ export interface SiteLayoutProps {
   siteAvatarUrl?: string;
   showHeaderAvatar?: boolean;
   siteFooterHtml?: string;
+  sidebar?: import("hono/jsx").Child;
 }

package/src/ui/__tests__/font-themes.test.ts

@@ -2,8 +2,8 @@ import { describe, it, expect } from "vitest";
 import { BUILTIN_FONT_THEMES } from "../font-themes.js";
 
 describe("BUILTIN_FONT_THEMES", () => {
-  it("contains 4 themes", () => {
-    expect(BUILTIN_FONT_THEMES).toHaveLength(4);
+  it("contains 5 themes", () => {
+    expect(BUILTIN_FONT_THEMES).toHaveLength(5);
   });
 
   it("has 'default' as the first theme", () => {
@@ -13,9 +13,10 @@ describe("BUILTIN_FONT_THEMES", () => {
   it("each theme has required fields", () => {
     for (const theme of BUILTIN_FONT_THEMES) {
       expect(theme.id).toBeTruthy();
-      expect(theme.name).toBeTruthy();
-      expect(theme.fontFamily).toBeTruthy();
-      expect(theme.description).toBeTruthy();
+      expect(theme.name.message).toBeTruthy();
+      expect(theme.headingFontFamily).toBeTruthy();
+      expect(theme.bodyFontFamily).toBeTruthy();
+      expect(theme.description.message).toBeTruthy();
     }
   });
 
@@ -27,8 +28,26 @@ describe("BUILTIN_FONT_THEMES", () => {
   it("includes expected theme IDs", () => {
     const ids = BUILTIN_FONT_THEMES.map((t) => t.id);
     expect(ids).toContain("default");
-    expect(ids).toContain("serif");
-    expect(ids).toContain("humanist");
-    expect(ids).toContain("mono");
+    expect(ids).toContain("classic-editorial");
+    expect(ids).toContain("modern-editorial");
+    expect(ids).toContain("literary");
+    expect(ids).toContain("geometric");
+  });
+
+  it("default theme uses the same font for heading and body", () => {
+    const defaultTheme = BUILTIN_FONT_THEMES.find(
+      (t) => t.id === "default",
+    ) as (typeof BUILTIN_FONT_THEMES)[number];
+    expect(defaultTheme.headingFontFamily).toBe(defaultTheme.bodyFontFamily);
+  });
+
+  it("pairing themes have distinct heading and body fonts", () => {
+    const pairingIds = ["classic-editorial", "modern-editorial", "literary"];
+    for (const id of pairingIds) {
+      const theme = BUILTIN_FONT_THEMES.find(
+        (t) => t.id === id,
+      ) as (typeof BUILTIN_FONT_THEMES)[number];
+      expect(theme.headingFontFamily).not.toBe(theme.bodyFontFamily);
+    }
   });
 });

package/src/ui/color-themes.ts

@@ -150,7 +150,7 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
   }),
 
   {
-    id: "default",
+    id: "panda",
     name: "Panda",
     light: {},
     dark: {},

package/src/ui/components/__tests__/jant-collection-form.test.ts

@@ -0,0 +1,153 @@
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach } from "vitest";
+import type {
+  CollectionFormInitial,
+  CollectionFormLabels,
+  CollectionSubmitDetail,
+} from "../collection-types.js";
+import "../jant-collection-form.js";
+import type { JantCollectionForm } from "../jant-collection-form.js";
+
+const labels: CollectionFormLabels = {
+  titleLabel: "Title",
+  titlePlaceholder: "Placeholder Title",
+  slugLabel: "Slug",
+  slugHelp: "Help text",
+  descriptionLabel: "Description",
+  descriptionPlaceholder: "Placeholder Description",
+  iconLabel: "Icon",
+  chooseIcon: "Choose Icon",
+  removeIcon: "Remove",
+  dialogTitle: "Choose Icon",
+  dialogClose: "Close",
+  searchIconsPlaceholder: "Search icons...",
+  sortOrderLabel: "Sort Order",
+  sortNewest: "Newest first",
+  sortOldest: "Oldest first",
+  sortRatingDesc: "Highest rated",
+  sortRatingAsc: "Lowest rated",
+  submitLabel: "Create Collection",
+  cancelLabel: "Cancel",
+};
+
+const initial: CollectionFormInitial = {
+  title: "",
+  slug: "",
+  description: "",
+  sortOrder: "newest",
+  icon: "",
+};
+
+async function createElement(
+  overrides: Partial<JantCollectionForm> = {},
+): Promise<JantCollectionForm> {
+  const el = document.createElement(
+    "jant-collection-form",
+  ) as JantCollectionForm;
+  el.labels = labels;
+  el.initial = initial;
+  el.action = "/dash/collections";
+  el.cancelHref = "/dash/collections";
+  el.isEdit = false;
+  Object.assign(el, overrides);
+  document.body.appendChild(el);
+  await el.updateComplete;
+  return el;
+}
+
+describe("JantCollectionForm", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders form fields with labels", async () => {
+    const el = await createElement();
+    const inputs = el.querySelectorAll("input");
+    expect(inputs.length).toBeGreaterThan(0);
+
+    const titleLabel = el.querySelector(".field .label");
+    expect(titleLabel?.textContent?.trim()).toBe("Title");
+
+    const submitButton = el.querySelector<HTMLButtonElement>(
+      "button[type=submit]",
+    );
+    expect(submitButton?.textContent?.trim()).toBe("Create Collection");
+  });
+
+  it("auto-generates slug when not editing", async () => {
+    const el = await createElement();
+    const titleInput = el.querySelectorAll<HTMLInputElement>("input")[0];
+    const slugInput = el.querySelectorAll<HTMLInputElement>("input")[1];
+
+    titleInput.value = "My Great Collection!";
+    titleInput.dispatchEvent(new Event("input", { bubbles: true }));
+    await el.updateComplete;
+
+    expect(slugInput.value).toBe("my-great-collection");
+  });
+
+  it("does not overwrite slug when editing", async () => {
+    const el = await createElement({
+      isEdit: true,
+      initial: {
+        ...initial,
+        title: "Existing",
+        slug: "existing-slug",
+      },
+    });
+    await el.updateComplete;
+
+    const titleInput = el.querySelectorAll<HTMLInputElement>("input")[0];
+    const slugInput = el.querySelectorAll<HTMLInputElement>("input")[1];
+
+    titleInput.value = "Updated Title";
+    titleInput.dispatchEvent(new Event("input", { bubbles: true }));
+    await el.updateComplete;
+
+    expect(slugInput.value).toBe("existing-slug");
+  });
+
+  it("dispatches jant:collection-submit on submit", async () => {
+    const el = await createElement();
+
+    const titleInput = el.querySelectorAll<HTMLInputElement>("input")[0];
+    const slugInput = el.querySelectorAll<HTMLInputElement>("input")[1];
+    const descriptionTextarea =
+      el.querySelector<HTMLTextAreaElement>("textarea");
+    const select = el.querySelector<HTMLSelectElement>("select");
+
+    titleInput.value = "Books";
+    titleInput.dispatchEvent(new Event("input", { bubbles: true }));
+    slugInput.value = "books";
+    slugInput.dispatchEvent(new Event("input", { bubbles: true }));
+    if (descriptionTextarea) {
+      descriptionTextarea.value = "All about books";
+      descriptionTextarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+    if (select) {
+      select.value = "rating_desc";
+      select.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    let detail: CollectionSubmitDetail | null = null;
+    el.addEventListener("jant:collection-submit", (event) => {
+      const customEvent = event as CustomEvent<CollectionSubmitDetail>;
+      detail = customEvent.detail;
+    });
+
+    const form = el.querySelector("form");
+    form?.dispatchEvent(
+      new Event("submit", { bubbles: true, cancelable: true }),
+    );
+
+    expect(detail).not.toBeNull();
+    const d = detail as unknown as CollectionSubmitDetail;
+    expect(d.endpoint).toBe("/dash/collections");
+    expect(d.data.title).toBe("Books");
+    expect(d.data.slug).toBe("books");
+    expect(d.data.description).toBe("All about books");
+    expect(d.data.sortOrder).toBe("rating_desc");
+    expect(d.data.icon).toBeUndefined();
+  });
+});