@jant/core 0.3.35 → 0.3.37

package/src/types/views.ts

@@ -2,20 +2,32 @@
  * View Model Types (render-ready, for theme components)
  */
 
-import type { Format, Status, NavItemType } from "./constants.js";
+import type { Format, Status, Visibility, NavItemType } from "./constants.js";
 import type { Post, Collection } from "./entities.js";
 
+/**
+ * Render-ready collection tag for display in post footers.
+ * Pre-computed at the viewmodel layer -- no lib/ imports needed.
+ */
+export interface CollectionTagView {
+  slug: string;
+  title: string;
+  /** Pre-rendered icon HTML (SVG or emoji span) */
+  iconHtml?: string;
+}
+
 /**
  * Render-ready post data for theme components.
  * All fields are pre-computed -- no lib/ imports needed.
  */
 export interface PostView {
   // Identity
-  id: number;
-  /** Pre-computed permalink: "/{path}" if path set, otherwise "/p/{sqid}" */
+  /** UUIDv7 identifier */
+  id: string;
+  /** Pre-computed permalink: "/{slug}" */
   permalink: string;
-  /** Custom URL path, if set. Supports multi-level paths (e.g. "2024/my-post") */
-  path?: string;
+  /** Post slug */
+  slug: string;
 
   // Content
   title?: string;
@@ -35,8 +47,9 @@ export interface PostView {
   // Metadata
   format: Format;
   status: Status;
-  featured: boolean;
+  visibility: Visibility;
   pinned: boolean;
+  featured: boolean;
   rating?: number;
 
   // Time -- pre-formatted
@@ -54,27 +67,23 @@ export interface PostView {
   // Media -- URLs pre-computed
   media: MediaView[];
 
+  // Collections this post belongs to
+  collections: CollectionTagView[];
+
   // Thread context
-  replyToId?: number;
-  threadRootId?: number;
+  /** UUIDv7 of the parent post */
+  replyToId?: string;
+  /** UUIDv7 of the thread root post */
+  threadRootId?: string;
+  /** Permalink of the thread root post (for "in thread" link on featured replies) */
+  threadRootPermalink?: string;
+  /** Whether this post is the last (most recent) in its thread. Controls reply button visibility. */
+  isLastInThread: boolean;
 
   // Raw content (for forms/editing, not typical theme use)
   body?: string;
 }
 
-/**
- * Render-ready page data for theme components.
- */
-export interface PageView {
-  id: number;
-  slug: string;
-  title?: string;
-  bodyHtml?: string;
-  status: Status;
-  createdAt: string;
-  updatedAt: string;
-}
-
 /**
  * Render-ready media data for theme components.
  * URLs are pre-computed -- no lib/ imports needed.
@@ -90,6 +99,12 @@ export interface MediaView {
   width?: number;
   height?: number;
   size?: number;
+  blurhash?: string;
+  waveform?: string;
+  posterUrl?: string;
+  originalName?: string;
+  summary?: string;
+  chars?: number;
 }
 
 /**
@@ -97,11 +112,11 @@ export interface MediaView {
  * Active/external state pre-computed.
  */
 export interface NavItemView {
-  id: number;
+  /** UUIDv7 identifier */
+  id: string;
   type: NavItemType;
   label: string;
   url: string;
-  pageId?: number;
   /** Pre-computed based on currentPath */
   isActive: boolean;
   /** Pre-computed: starts with http(s):// */
@@ -125,7 +140,12 @@ export interface SearchResult {
 export interface SearchResultView {
   post: PostView;
   rank: number;
+  /** FTS5 snippet from body_text column with <mark> tags */
   snippet?: string;
+  /** Title with matched query terms wrapped in <mark> */
+  titleHighlighted?: string;
+  /** quoteText (truncated) with matched query terms wrapped in <mark> */
+  quoteHighlighted?: string;
 }
 
 /**
@@ -134,7 +154,8 @@ export interface SearchResultView {
 export interface TimelineItemView {
   post: PostView;
   threadPreview?: {
-    replies: PostView[];
+    latestReply: PostView;
+    parentReply?: PostView;
     totalReplyCount: number;
   };
 }
@@ -167,4 +188,7 @@ export interface SiteLayoutProps {
   showHeaderAvatar?: boolean;
   siteFooterHtml?: string;
   sidebar?: import("hono/jsx").Child;
+  uploadMaxFileSize?: number;
+  showComposeDialog?: boolean;
+  showHeader?: boolean;
 }

package/src/ui/color-themes.ts

@@ -15,7 +15,7 @@ export interface ColorTheme {
   name: string;
   /** CSS variable overrides for :root (light mode) */
   light: Record<string, string>;
-  /** CSS variable overrides for .dark (dark mode) */
+  /** CSS variable overrides for dark mode (prefers-color-scheme: dark) */
   dark: Record<string, string>;
   /** Preview colors (hex) for theme picker cards */
   preview: {
@@ -28,32 +28,55 @@ export interface ColorTheme {
   };
 }
 
+interface ThemeModeColors {
+  bg: string;
+  fg: string;
+  primary: string;
+  primaryFg: string;
+  muted: string;
+  mutedFg: string;
+  border: string;
+  /** Destructive action color (defaults to BaseCoat red) */
+  destructive?: string;
+  /** Success indicator color (defaults to preset green) */
+  success?: string;
+  /** Search highlight background */
+  searchMarkBg?: string;
+  /** Search highlight text color */
+  searchMarkColor?: string;
+  /** Admin dashboard background */
+  dashBg?: string;
+}
+
+/** Default destructive/success colors that harmonize with most themes */
+const DEFAULTS = {
+  light: {
+    destructive: "oklch(0.577 0.245 27.325)",
+    success: "oklch(0.518 0.16 145.071)",
+    searchMarkBg: "oklch(0.92 0.14 90 / 0.55)",
+    searchMarkColor: "oklch(0.35 0.09 70)",
+    dashBg: "oklch(0.97 0.005 80)",
+  },
+  dark: {
+    destructive: "oklch(0.704 0.191 22.216)",
+    success: "oklch(0.627 0.194 149.214)",
+    searchMarkBg: "oklch(0.45 0.1 85 / 0.5)",
+    searchMarkColor: "oklch(0.92 0.08 90)",
+    dashBg: "oklch(0.2 0.005 80)",
+  },
+};
+
 /**
  * Create a comprehensive color theme from key colors.
  * Derives card, popover, muted, secondary, accent, and sidebar variables.
+ * Also sets --destructive, --success, --search-mark-*, and --dash-bg.
  */
 function defineTheme(opts: {
   id: string;
   name: string;
   preview: ColorTheme["preview"];
-  light: {
-    bg: string;
-    fg: string;
-    primary: string;
-    primaryFg: string;
-    muted: string;
-    mutedFg: string;
-    border: string;
-  };
-  dark: {
-    bg: string;
-    fg: string;
-    primary: string;
-    primaryFg: string;
-    muted: string;
-    mutedFg: string;
-    border: string;
-  };
+  light: ThemeModeColors;
+  dark: ThemeModeColors;
 }): ColorTheme {
   const { light, dark } = opts;
   return {
@@ -75,6 +98,8 @@ function defineTheme(opts: {
       "--muted-foreground": light.mutedFg,
       "--accent": light.muted,
       "--accent-foreground": light.fg,
+      "--destructive": light.destructive ?? DEFAULTS.light.destructive,
+      "--success": light.success ?? DEFAULTS.light.success,
       "--border": light.border,
       "--input": light.border,
       "--ring": light.primary,
@@ -86,6 +111,10 @@ function defineTheme(opts: {
       "--sidebar-accent-foreground": light.fg,
       "--sidebar-border": light.border,
       "--sidebar-ring": light.primary,
+      "--search-mark-bg": light.searchMarkBg ?? DEFAULTS.light.searchMarkBg,
+      "--search-mark-color":
+        light.searchMarkColor ?? DEFAULTS.light.searchMarkColor,
+      "--dash-bg": light.dashBg ?? DEFAULTS.light.dashBg,
     },
     dark: {
       "--background": dark.bg,
@@ -102,6 +131,8 @@ function defineTheme(opts: {
       "--muted-foreground": dark.mutedFg,
       "--accent": dark.muted,
       "--accent-foreground": dark.fg,
+      "--destructive": dark.destructive ?? DEFAULTS.dark.destructive,
+      "--success": dark.success ?? DEFAULTS.dark.success,
       "--border": dark.border,
       "--input": dark.border,
       "--ring": dark.primary,
@@ -113,6 +144,10 @@ function defineTheme(opts: {
       "--sidebar-accent-foreground": dark.fg,
       "--sidebar-border": dark.border,
       "--sidebar-ring": dark.primary,
+      "--search-mark-bg": dark.searchMarkBg ?? DEFAULTS.dark.searchMarkBg,
+      "--search-mark-color":
+        dark.searchMarkColor ?? DEFAULTS.dark.searchMarkColor,
+      "--dash-bg": dark.dashBg ?? DEFAULTS.dark.dashBg,
     },
   };
 }
@@ -137,6 +172,9 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.94 0.022 95)",
       mutedFg: "oklch(0.52 0 0)",
       border: "oklch(0.88 0.025 95)",
+      destructive: "oklch(0.55 0.22 25)",
+      success: "oklch(0.5 0.14 150)",
+      dashBg: "oklch(0.96 0.015 95)",
     },
     dark: {
       bg: "oklch(0.2 0.02 90)",
@@ -146,6 +184,9 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.26 0.018 90)",
       mutedFg: "oklch(0.62 0.012 95)",
       border: "oklch(0.32 0.018 90)",
+      destructive: "oklch(0.68 0.19 22)",
+      success: "oklch(0.62 0.15 150)",
+      dashBg: "oklch(0.18 0.015 90)",
     },
   }),
 
@@ -168,6 +209,11 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.93 0.02 75)",
       mutedFg: "oklch(0.5 0.025 55)",
       border: "oklch(0.88 0.025 75)",
+      destructive: "oklch(0.5 0.2 15)",
+      success: "oklch(0.5 0.14 155)",
+      searchMarkBg: "oklch(0.88 0.12 75 / 0.6)",
+      searchMarkColor: "oklch(0.3 0.06 55)",
+      dashBg: "oklch(0.95 0.012 75)",
     },
     dark: {
       bg: "oklch(0.16 0.03 50)",
@@ -177,14 +223,17 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.22 0.025 50)",
       mutedFg: "oklch(0.62 0.02 75)",
       border: "oklch(0.28 0.025 50)",
+      destructive: "oklch(0.65 0.2 15)",
+      success: "oklch(0.62 0.15 155)",
+      searchMarkBg: "oklch(0.42 0.1 60 / 0.55)",
+      searchMarkColor: "oklch(0.9 0.06 75)",
+      dashBg: "oklch(0.14 0.025 50)",
     },
   }),
 
-  {
+  defineTheme({
     id: "panda",
     name: "Panda",
-    light: {},
-    dark: {},
     preview: {
       lightBg: "#ffffff",
       lightText: "#1e1e1e",
@@ -193,7 +242,31 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       darkText: "#fafafa",
       darkLink: "#eaeaea",
     },
-  },
+    light: {
+      bg: "oklch(1 0 0)",
+      fg: "oklch(0.2 0 0)",
+      primary: "oklch(0.2 0 0)",
+      primaryFg: "oklch(1 0 0)",
+      muted: "oklch(0.96 0 0)",
+      mutedFg: "oklch(0.5 0 0)",
+      border: "oklch(0.9 0 0)",
+      destructive: "oklch(0.55 0.22 25)",
+      success: "oklch(0.5 0.15 145)",
+      dashBg: "oklch(0.97 0 0)",
+    },
+    dark: {
+      bg: "oklch(0.21 0 0)",
+      fg: "oklch(0.98 0 0)",
+      primary: "oklch(0.93 0 0)",
+      primaryFg: "oklch(0.15 0 0)",
+      muted: "oklch(0.27 0 0)",
+      mutedFg: "oklch(0.65 0 0)",
+      border: "oklch(0.33 0 0)",
+      destructive: "oklch(0.68 0.18 22)",
+      success: "oklch(0.62 0.16 150)",
+      dashBg: "oklch(0.18 0 0)",
+    },
+  }),
 
   defineTheme({
     id: "beach",
@@ -214,6 +287,9 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.93 0.015 85)",
       mutedFg: "oklch(0.52 0.015 65)",
       border: "oklch(0.88 0.018 85)",
+      destructive: "oklch(0.52 0.2 22)",
+      success: "oklch(0.5 0.12 170)",
+      dashBg: "oklch(0.95 0.008 85)",
     },
     dark: {
       bg: "oklch(0.27 0.03 210)",
@@ -223,6 +299,9 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.33 0.025 210)",
       mutedFg: "oklch(0.65 0.015 80)",
       border: "oklch(0.38 0.02 210)",
+      destructive: "oklch(0.68 0.18 20)",
+      success: "oklch(0.65 0.12 170)",
+      dashBg: "oklch(0.24 0.025 210)",
     },
   }),
 
@@ -245,6 +324,12 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.83 0.035 130)",
       mutedFg: "oklch(0.48 0.03 140)",
       border: "oklch(0.79 0.035 130)",
+      destructive: "oklch(0.52 0.18 25)",
+      // Use blue-teal to differentiate from the green primary
+      success: "oklch(0.48 0.1 220)",
+      searchMarkBg: "oklch(0.8 0.06 100 / 0.6)",
+      searchMarkColor: "oklch(0.3 0.04 130)",
+      dashBg: "oklch(0.85 0.028 130)",
     },
     dark: {
       bg: "oklch(0.18 0.02 140)",
@@ -254,6 +339,11 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.24 0.02 140)",
       mutedFg: "oklch(0.58 0.02 130)",
       border: "oklch(0.3 0.02 140)",
+      destructive: "oklch(0.65 0.17 22)",
+      success: "oklch(0.6 0.1 220)",
+      searchMarkBg: "oklch(0.4 0.06 110 / 0.55)",
+      searchMarkColor: "oklch(0.88 0.04 130)",
+      dashBg: "oklch(0.16 0.018 140)",
     },
   }),
 
@@ -276,6 +366,11 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.92 0 0)",
       mutedFg: "oklch(0.55 0 0)",
       border: "oklch(0.87 0 0)",
+      destructive: "oklch(0.55 0.22 25)",
+      success: "oklch(0.5 0.15 145)",
+      searchMarkBg: "oklch(0.88 0 0 / 0.7)",
+      searchMarkColor: "oklch(0.25 0 0)",
+      dashBg: "oklch(0.94 0 0)",
     },
     dark: {
       bg: "oklch(0.18 0 0)",
@@ -285,6 +380,11 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.24 0 0)",
       mutedFg: "oklch(0.6 0 0)",
       border: "oklch(0.3 0 0)",
+      destructive: "oklch(0.68 0.18 22)",
+      success: "oklch(0.62 0.16 150)",
+      searchMarkBg: "oklch(0.35 0 0 / 0.6)",
+      searchMarkColor: "oklch(0.9 0 0)",
+      dashBg: "oklch(0.16 0 0)",
     },
   }),
 
@@ -307,6 +407,11 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.93 0.016 325)",
       mutedFg: "oklch(0.52 0.015 310)",
       border: "oklch(0.88 0.016 325)",
+      destructive: "oklch(0.55 0.2 15)",
+      success: "oklch(0.5 0.14 155)",
+      searchMarkBg: "oklch(0.9 0.08 310 / 0.45)",
+      searchMarkColor: "oklch(0.3 0.04 300)",
+      dashBg: "oklch(0.95 0.01 325)",
     },
     dark: {
       bg: "oklch(0.18 0.025 300)",
@@ -316,6 +421,11 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.24 0.022 300)",
       mutedFg: "oklch(0.62 0.012 325)",
       border: "oklch(0.3 0.022 300)",
+      destructive: "oklch(0.68 0.18 18)",
+      success: "oklch(0.62 0.15 155)",
+      searchMarkBg: "oklch(0.38 0.08 290 / 0.5)",
+      searchMarkColor: "oklch(0.9 0.04 325)",
+      dashBg: "oklch(0.16 0.02 300)",
     },
   }),
 ];