@jant/core 0.3.36 → 0.3.37

package/src/services/search.ts

@@ -1,10 +1,13 @@
 /**
  * Search Service (v2)
  *
- * Full-text search using FTS5
+ * Full-text search using FTS5 trigram for queries ≥ 3 characters.
+ * Falls back to LIKE for shorter queries (common in CJK languages where
+ * 2-character words cannot form a trigram).
  */
 
 import type { Post, Status, Format, SearchResult } from "../types.js";
+import { escapeHtml } from "../lib/html.js";
 
 export type { SearchResult };
 
@@ -24,100 +27,182 @@ export interface SearchService {
 }
 
 interface RawSearchRow {
-  id: number;
+  id: string;
   format: string;
   status: string;
-  visibility: string;
-  pinned: number;
-  path: string | null;
+  visibility: string | null;
+  effective_visibility: string | null;
+  pinned_at: number | null;
+  featured_at: number | null;
+  slug: string;
   title: string | null;
   url: string | null;
   body: string | null;
   body_html: string | null;
+  body_text: string | null;
   quote_text: string | null;
   summary: string | null;
   rating: number | null;
-  collection_id: number | null;
-  reply_to_id: number | null;
-  thread_id: number | null;
+  collection_id: string | null;
+  reply_to_id: string | null;
+  thread_id: string;
   deleted_at: number | null;
-  published_at: number;
+  published_at: number | null;
+  last_activity_at: number | null;
   created_at: number;
   updated_at: number;
   rank: number;
-  snippet: string;
+  snippet: string | null;
+}
+
+function mapRow(row: RawSearchRow): SearchResult {
+  return {
+    post: {
+      id: row.id,
+      format: row.format as Post["format"],
+      status: row.status as Post["status"],
+      visibility: (row.effective_visibility ??
+        row.visibility) as Post["visibility"],
+      pinnedAt: row.pinned_at,
+      featuredAt: row.featured_at,
+      slug: row.slug,
+      title: row.title,
+      url: row.url,
+      body: row.body,
+      bodyHtml: row.body_html,
+      bodyText: row.body_text,
+      quoteText: row.quote_text,
+      summary: row.summary,
+      rating: row.rating,
+      replyToId: row.reply_to_id,
+      threadId: row.thread_id,
+      deletedAt: row.deleted_at,
+      publishedAt: row.published_at,
+      lastActivityAt:
+        row.last_activity_at ?? row.published_at ?? row.updated_at,
+      createdAt: row.created_at,
+      updatedAt: row.updated_at,
+    },
+    rank: row.rank,
+    snippet: row.snippet
+      ? escapeHtml(row.snippet)
+          .replaceAll(String.fromCharCode(2), "<mark>")
+          .replaceAll(String.fromCharCode(3), "</mark>")
+      : undefined,
+  };
 }
 
 export function createSearchService(d1: D1Database): SearchService {
+  async function searchFts(
+    query: string,
+    options: SearchOptions,
+  ): Promise<SearchResult[]> {
+    const limit = options.limit ?? 20;
+    const offset = options.offset ?? 0;
+    const status = options.status ?? ["published"];
+
+    const ftsQuery = query
+      .trim()
+      .split(/\s+/)
+      .filter((term) => term.length > 0)
+      .map((term) => `"${term.replace(/"/g, '""')}"*`)
+      .join(" ");
+
+    if (!ftsQuery) return [];
+
+    const statusPlaceholders = status.map(() => "?").join(", ");
+    const formatFilter = options.format ? "AND post.format = ?" : "";
+    const formatParams = options.format ? [options.format] : [];
+
+    const stmt = d1.prepare(`
+      SELECT
+        post.*,
+        COALESCE(post.visibility, root_post.visibility) AS effective_visibility,
+        path_registry.path AS slug,
+        post_fts.rank AS rank,
+        snippet(post_fts, 1, char(2), char(3), '...', 32) AS snippet
+      FROM post_fts
+      JOIN post ON post.rowid = post_fts.rowid
+      JOIN post AS root_post ON root_post.id = post.thread_id
+      JOIN path_registry
+        ON path_registry.post_id = post.id
+       AND path_registry.kind = 'slug'
+      WHERE post_fts MATCH ?
+        AND post.deleted_at IS NULL
+        AND post.status IN (${statusPlaceholders})
+        ${formatFilter}
+      ORDER BY post_fts.rank
+      LIMIT ? OFFSET ?
+    `);
+
+    const { results } = await stmt
+      .bind(ftsQuery, ...status, ...formatParams, limit, offset)
+      .all<RawSearchRow>();
+
+    return (results || []).map(mapRow);
+  }
+
+  async function searchLike(
+    query: string,
+    options: SearchOptions,
+  ): Promise<SearchResult[]> {
+    const limit = options.limit ?? 20;
+    const offset = options.offset ?? 0;
+    const status = options.status ?? ["published"];
+    const like = `%${query}%`;
+
+    const statusPlaceholders = status.map(() => "?").join(", ");
+    const formatFilter = options.format ? "AND post.format = ?" : "";
+    const formatParams = options.format ? [options.format] : [];
+
+    const stmt = d1.prepare(`
+      SELECT
+        post.*,
+        COALESCE(post.visibility, root_post.visibility) AS effective_visibility,
+        path_registry.path AS slug,
+        0 AS rank,
+        NULL AS snippet
+      FROM post
+      JOIN post AS root_post ON root_post.id = post.thread_id
+      JOIN path_registry
+        ON path_registry.post_id = post.id
+       AND path_registry.kind = 'slug'
+      WHERE (
+        post.title LIKE ? OR
+        post.body_text LIKE ? OR
+        post.quote_text LIKE ? OR
+        post.url LIKE ?
+      )
+      AND post.deleted_at IS NULL
+      AND post.status IN (${statusPlaceholders})
+      ${formatFilter}
+      ORDER BY post.published_at DESC
+      LIMIT ? OFFSET ?
+    `);
+
+    const { results } = await stmt
+      .bind(like, like, like, like, ...status, ...formatParams, limit, offset)
+      .all<RawSearchRow>();
+
+    return (results || []).map(mapRow);
+  }
+
   return {
     async search(query, options = {}) {
-      const limit = options.limit ?? 20;
-      const offset = options.offset ?? 0;
-      const status = options.status ?? ["published"];
-
-      // Escape and prepare the query for FTS5
-      const ftsQuery = query
-        .trim()
-        .split(/\s+/)
-        .filter((term) => term.length > 0)
-        .map((term) => `"${term.replace(/"/g, '""')}"*`)
-        .join(" ");
-
-      if (!ftsQuery) {
-        return [];
+      const trimmed = query.trim();
+      if (!trimmed) return [];
+
+      // Trigram FTS requires at least 3 characters.
+      // For shorter queries (common in CJK), fall back to LIKE.
+      const charCount = [...trimmed].length;
+      if (charCount < 3) {
+        return searchLike(trimmed, options);
       }
 
-      // Build status placeholders
-      const statusPlaceholders = status.map(() => "?").join(", ");
-
-      // Build format filter
-      const formatFilter = options.format ? "AND posts.format = ?" : "";
-      const formatParams = options.format ? [options.format] : [];
-
-      const stmt = d1.prepare(`
-        SELECT
-          posts.*,
-          posts_fts.rank AS rank,
-          snippet(posts_fts, 1, '<mark>', '</mark>', '...', 32) AS snippet
-        FROM posts_fts
-        JOIN posts ON posts.id = posts_fts.rowid
-        WHERE posts_fts MATCH ?
-          AND posts.deleted_at IS NULL
-          AND posts.status IN (${statusPlaceholders})
-          ${formatFilter}
-        ORDER BY posts_fts.rank
-        LIMIT ? OFFSET ?
-      `);
-
-      const { results } = await stmt
-        .bind(ftsQuery, ...status, ...formatParams, limit, offset)
-        .all<RawSearchRow>();
-
-      return (results || []).map((row) => ({
-        post: {
-          id: row.id,
-          format: row.format as Post["format"],
-          status: row.status as Post["status"],
-          visibility: row.visibility as Post["visibility"],
-          pinned: row.pinned,
-          path: row.path,
-          title: row.title,
-          url: row.url,
-          body: row.body,
-          bodyHtml: row.body_html,
-          quoteText: row.quote_text,
-          summary: row.summary,
-          rating: row.rating,
-          replyToId: row.reply_to_id,
-          threadId: row.thread_id,
-          deletedAt: row.deleted_at,
-          publishedAt: row.published_at,
-          createdAt: row.created_at,
-          updatedAt: row.updated_at,
-        },
-        rank: row.rank,
-        snippet: row.snippet,
-      }));
+      const ftsResults = await searchFts(trimmed, options);
+      if (ftsResults.length > 0) return ftsResults;
+
+      return searchLike(trimmed, options);
     },
   };
 }

package/src/styles/components.css

@@ -5,6 +5,20 @@
  * AFTER Tailwind is initialized in the user's CSS entry.
  */
 
+/* Search result highlight */
+mark {
+  background-color: var(--search-mark-bg);
+  color: var(--search-mark-color);
+  border-radius: 2px;
+  padding: 0 2px;
+}
+
+.search-snippet {
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  line-height: var(--leading);
+}
+
 /* Icon stroke width — CSS property overrides SVG presentational attributes */
 svg[stroke-width] {
   stroke-width: var(--icon-stroke);
@@ -28,7 +42,17 @@ svg[stroke-width].icon-fine {
 /* Toast notifications */
 @layer components {
   .toast-container {
-    @apply fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none;
+    @apply fixed flex flex-col gap-2 pointer-events-none;
+    /* Override browser popover defaults for both idle and open states */
+    @apply inset-auto border-none bg-transparent p-0 m-0 overflow-visible;
+    top: 1rem;
+    right: 1rem;
+
+    &:popover-open {
+      @apply inset-auto border-none bg-transparent p-0 m-0 overflow-visible;
+      top: 1rem;
+      right: 1rem;
+    }
   }
 
   .toast {
@@ -54,6 +78,17 @@ svg[stroke-width].icon-fine {
     color: var(--color-destructive);
   }
 
+  .toast-action {
+    @apply shrink-0 text-xs font-medium no-underline;
+    color: var(--color-foreground);
+    opacity: 0.7;
+    transition: opacity 0.15s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   .toast-close {
     @apply shrink-0 translate-y-0.5 cursor-pointer rounded-sm p-0 border-0 bg-transparent;
     color: var(--color-muted-foreground);
@@ -92,7 +127,7 @@ svg[stroke-width].icon-fine {
   }
 }
 
-/* Dashboard header */
+/* Admin header */
 @layer components {
   .dash-header {
     padding: 20px 0 0;
@@ -132,7 +167,7 @@ svg[stroke-width].icon-fine {
     justify-content: center;
     color: white;
     font-size: 0.625rem;
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     line-height: 1;
   }
 
@@ -165,7 +200,7 @@ svg[stroke-width].icon-fine {
 
   .dash-header-link-active {
     color: var(--color-foreground);
-    font-weight: 500;
+    font-weight: var(--fw-medium);
   }
 
   .dash-header-visit {
@@ -243,7 +278,7 @@ svg[stroke-width].icon-fine {
 
   .dash-breadcrumb-current {
     color: var(--color-foreground);
-    font-weight: 500;
+    font-weight: var(--fw-medium);
   }
 }
 
@@ -304,12 +339,28 @@ svg[stroke-width].icon-fine {
     color: var(--color-muted-foreground);
     opacity: 0.5;
   }
+
+  .settings-export-form {
+    display: contents;
+  }
+
+  button.settings-item {
+    @apply w-full text-left cursor-pointer;
+    background: none;
+    border: none;
+    font: inherit;
+    border-bottom: 1px solid var(--color-border);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
 }
 
-/* Dashboard scoped font rules */
+/* Admin scoped font rules */
 @layer components {
   .dash-heading {
-    font-family: Georgia, "Times New Roman", serif;
+    font-family: var(--font-serif);
   }
 }
 

package/src/styles/tokens.css

@@ -7,22 +7,39 @@
  */
 
 :root {
-  /* Typography */
-  --font-body: system-ui, sans-serif;
+  /* Typography — Font families */
+  --font-body:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
   --font-heading: var(--font-body);
-  --font-mono: ui-monospace, monospace;
+  --font-serif:
+    ui-serif, "New York Small", "New York", "Iowan Old Style", Charter, Georgia,
+    "Times New Roman", Times, "Songti SC", "Noto Serif CJK SC", "STSong",
+    "SimSun", serif;
+  --font-mono:
+    ui-monospace, Menlo, Monaco, Consolas, "Cascadia Code", "Courier New",
+    monospace;
+
+  /* Typography — Font weights */
+  --fw-light: 300;
+  --fw-regular: 400;
+  --fw-medium: 500;
+  --fw-semibold: 600;
+  --fw-bold: 700;
+  --fw-extrabold: 800;
   --text-sm: 0.8125rem;
   --text-base: 0.9375rem;
   --text-lg: 1.0625rem;
   --leading: 1.5;
 
   /* Layout */
-  --site-width: 600px;
+  --site-width: 500px;
   --site-padding: 1.5rem;
   --content-gap: 1rem;
   --space-xl: 2rem;
 
-  /* Sidebar layout (dashboard + site sidebar pages) */
+  /* Sidebar layout (admin + site sidebar pages) */
   --sidebar-width: 12rem;
   --sidebar-gap: 2rem;
 
@@ -43,7 +60,14 @@
   --icon-stroke-fine: 1.5;
 
   /* Derived color tokens (from BaseCoat variables) */
+  --site-accent: var(--primary);
+  --site-accent-text: var(--primary-foreground);
   --site-column-outline: var(--border);
+  --site-border-light: color-mix(
+    in srgb,
+    var(--site-column-outline) 52%,
+    transparent
+  );
   --site-threadline: var(--border);
   --site-page-bg: var(--background);
   --site-elevated-bg: var(--background);
@@ -53,14 +77,68 @@
   --site-text-placeholder: oklch(from var(--muted-foreground) l c h / 0.5);
   --site-media-outline: var(--border);
   --site-divider: var(--border);
+  --site-feed-card-bg: color-mix(
+    in srgb,
+    var(--site-elevated-bg) 88%,
+    var(--site-nav-hover-bg)
+  );
+  --site-feed-card-border: color-mix(
+    in srgb,
+    var(--site-divider) 78%,
+    transparent
+  );
+  --site-feed-card-shadow: color-mix(
+    in srgb,
+    var(--site-text-primary) 12%,
+    transparent
+  );
+  --site-feed-divider-color: color-mix(
+    in srgb,
+    var(--site-text-secondary) 30%,
+    transparent
+  );
+  --site-feed-link-tint: color-mix(in srgb, var(--site-accent) 7%, transparent);
+  --site-feed-quote-tint: color-mix(
+    in srgb,
+    var(--site-accent) 10%,
+    transparent
+  );
+  --site-thread-context-bg: color-mix(
+    in srgb,
+    var(--site-nav-hover-bg) 58%,
+    transparent
+  );
+  --site-thread-context-border: color-mix(
+    in srgb,
+    var(--site-divider) 74%,
+    transparent
+  );
+  --site-thread-gap-bg: color-mix(
+    in srgb,
+    var(--site-nav-hover-bg) 42%,
+    transparent
+  );
+  --site-thread-item-spacing: 14px;
+  --site-thread-context-max-height: 188px;
+  --site-thread-dot-ring: color-mix(
+    in srgb,
+    var(--site-accent) 16%,
+    transparent
+  );
+
+  /* Search highlight */
+  --search-mark-bg: oklch(0.92 0.14 90 / 0.55);
+  --search-mark-color: oklch(0.35 0.09 70);
 
-  /* Dashboard */
+  /* Admin */
   --dash-bg: oklch(0.97 0.005 80);
   --dash-card-radius: 10px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --search-mark-bg: oklch(0.45 0.1 85 / 0.5);
+    --search-mark-color: oklch(0.92 0.08 90);
     --dash-bg: oklch(0.2 0.005 80);
   }
 }