@jant/core 0.3.24 → 0.3.26

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

@@ -0,0 +1,34 @@
+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("has 'default' as the first theme", () => {
+    expect(BUILTIN_FONT_THEMES[0].id).toBe("default");
+  });
+
+  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();
+    }
+  });
+
+  it("has no duplicate IDs", () => {
+    const ids = BUILTIN_FONT_THEMES.map((t) => t.id);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+
+  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");
+  });
+});

package/src/{theme → ui}/color-themes.ts

@@ -118,9 +118,40 @@ function defineTheme(opts: {
 }
 
 export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
+  defineTheme({
+    id: "halloween",
+    name: "Halloween",
+    preview: {
+      lightBg: "#f9f2e3",
+      lightText: "#352200",
+      lightLink: "#b84400",
+      darkBg: "#1e1000",
+      darkText: "#dfc390",
+      darkLink: "#ff8c00",
+    },
+    light: {
+      bg: "oklch(0.97 0.015 75)",
+      fg: "oklch(0.25 0.04 55)",
+      primary: "oklch(0.47 0.17 50)",
+      primaryFg: "oklch(0.98 0.01 75)",
+      muted: "oklch(0.93 0.02 75)",
+      mutedFg: "oklch(0.5 0.025 55)",
+      border: "oklch(0.88 0.025 75)",
+    },
+    dark: {
+      bg: "oklch(0.16 0.03 50)",
+      fg: "oklch(0.85 0.025 75)",
+      primary: "oklch(0.72 0.19 55)",
+      primaryFg: "oklch(0.14 0.03 50)",
+      muted: "oklch(0.22 0.025 50)",
+      mutedFg: "oklch(0.62 0.02 75)",
+      border: "oklch(0.28 0.025 50)",
+    },
+  }),
+
   {
     id: "default",
-    name: "Default",
+    name: "Panda",
     light: {},
     dark: {},
     preview: {
@@ -226,37 +257,6 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
     },
   }),
 
-  defineTheme({
-    id: "halloween",
-    name: "Halloween",
-    preview: {
-      lightBg: "#f9f2e3",
-      lightText: "#352200",
-      lightLink: "#cc5500",
-      darkBg: "#1e1000",
-      darkText: "#dfc390",
-      darkLink: "#ff8c00",
-    },
-    light: {
-      bg: "oklch(0.97 0.015 75)",
-      fg: "oklch(0.25 0.04 55)",
-      primary: "oklch(0.6 0.2 50)",
-      primaryFg: "oklch(0.98 0.01 75)",
-      muted: "oklch(0.93 0.02 75)",
-      mutedFg: "oklch(0.5 0.025 55)",
-      border: "oklch(0.88 0.025 75)",
-    },
-    dark: {
-      bg: "oklch(0.16 0.03 50)",
-      fg: "oklch(0.85 0.025 75)",
-      primary: "oklch(0.72 0.19 55)",
-      primaryFg: "oklch(0.14 0.03 50)",
-      muted: "oklch(0.22 0.025 50)",
-      mutedFg: "oklch(0.62 0.02 75)",
-      border: "oklch(0.28 0.025 50)",
-    },
-  }),
-
   defineTheme({
     id: "notepad",
     name: "Notepad",
@@ -294,7 +294,7 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
     preview: {
       lightBg: "#f7eef5",
       lightText: "#2e1e2c",
-      lightLink: "#9845c8",
+      lightLink: "#7a30a8",
       darkBg: "#1d1428",
       darkText: "#d4c2d0",
       darkLink: "#c080fc",
@@ -302,7 +302,7 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
     light: {
       bg: "oklch(0.97 0.012 325)",
       fg: "oklch(0.25 0.02 310)",
-      primary: "oklch(0.55 0.2 300)",
+      primary: "oklch(0.45 0.2 300)",
       primaryFg: "oklch(0.98 0.008 325)",
       muted: "oklch(0.93 0.016 325)",
       mutedFg: "oklch(0.52 0.015 310)",

package/src/ui/compose/ComposeDialog.tsx

@@ -0,0 +1,414 @@
+/**
+ * Compose Dialog
+ *
+ * Full-screen compose dialog for quick post creation.
+ * Rendered server-side as part of SiteLayout for authenticated users.
+ */
+
+import type { FC } from "hono/jsx";
+import type { Collection } from "../../types.js";
+import { useLingui } from "@lingui/react/macro";
+
+export interface ComposeDialogProps {
+  collections?: Collection[];
+}
+
+export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
+  const { t } = useLingui();
+
+  const signals = JSON.stringify({
+    format: "note",
+    title: "",
+    body: "",
+    url: "",
+    quoteText: "",
+    status: "published",
+    featured: false,
+    pinned: false,
+    rating: 0,
+    collectionId: 0,
+    mediaIds: [],
+    _composeLoading: false,
+    _showRating: false,
+    _showCollection: false,
+  }).replace(/</g, "\\u003c");
+
+  return (
+    <dialog
+      id="compose-dialog"
+      class="compose-dialog backdrop:bg-black/50"
+      onclick="event.target === this && this.close()"
+    >
+      <div class="compose-dialog-inner">
+        {/* Header */}
+        <header class="compose-dialog-header">
+          <button
+            type="button"
+            class="compose-dialog-close"
+            onclick="this.closest('dialog').close()"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M18 6 6 18" />
+              <path d="M6 6l12 12" />
+            </svg>
+          </button>
+          <h2 class="compose-dialog-title">
+            {t({
+              message: "New Post",
+              comment: "@context: Compose dialog title",
+            })}
+          </h2>
+          <div class="w-5" />
+        </header>
+
+        {/* Form */}
+        <section class="compose-dialog-body">
+          <form
+            data-signals={signals}
+            data-on:submit__prevent="@post('/compose')"
+            data-indicator="_composeLoading"
+            class="flex flex-col gap-3"
+          >
+            {/* Format tabs */}
+            <div class="compose-format-tabs">
+              <button
+                type="button"
+                class="compose-format-tab"
+                data-class-compose-format-tab-active="$format === 'note'"
+                data-on:click="$format = 'note'"
+              >
+                {t({
+                  message: "Note",
+                  comment: "@context: Compose format tab",
+                })}
+              </button>
+              <button
+                type="button"
+                class="compose-format-tab"
+                data-class-compose-format-tab-active="$format === 'link'"
+                data-on:click="$format = 'link'"
+              >
+                {t({
+                  message: "Link",
+                  comment: "@context: Compose format tab",
+                })}
+              </button>
+              <button
+                type="button"
+                class="compose-format-tab"
+                data-class-compose-format-tab-active="$format === 'quote'"
+                data-on:click="$format = 'quote'"
+              >
+                {t({
+                  message: "Quote",
+                  comment: "@context: Compose format tab",
+                })}
+              </button>
+            </div>
+
+            {/* Title input */}
+            <input
+              type="text"
+              data-bind="title"
+              class="compose-title-input"
+              placeholder={t({
+                message: "Title (optional)",
+                comment: "@context: Compose title placeholder",
+              })}
+            />
+
+            {/* Body textarea */}
+            <textarea
+              data-bind="body"
+              class="compose-body-input"
+              placeholder={t({
+                message: "What's on your mind?",
+                comment: "@context: Compose body placeholder",
+              })}
+              rows={4}
+            />
+
+            {/* URL input (link/quote) */}
+            <div data-show="$format === 'link' || $format === 'quote'">
+              <input
+                type="url"
+                data-bind="url"
+                class="input text-sm"
+                placeholder="https://..."
+              />
+            </div>
+
+            {/* Quote text (quote format) */}
+            <div data-show="$format === 'quote'">
+              <textarea
+                data-bind="quoteText"
+                class="textarea text-sm"
+                placeholder={t({
+                  message: "The text being quoted...",
+                  comment: "@context: Compose quote text placeholder",
+                })}
+                rows={2}
+              />
+            </div>
+
+            {/* Rating picker (toggleable) */}
+            <div data-show="$_showRating" class="field">
+              <label class="label text-sm">
+                {t({
+                  message: "Rating",
+                  comment: "@context: Compose rating field",
+                })}
+              </label>
+              <select data-bind="rating" class="select text-sm">
+                <option value="0">
+                  {t({
+                    message: "None",
+                    comment: "@context: No rating selected",
+                  })}
+                </option>
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+              </select>
+            </div>
+
+            {/* Collection picker (toggleable) */}
+            {collections && collections.length > 0 && (
+              <div data-show="$_showCollection" class="field">
+                <label class="label text-sm">
+                  {t({
+                    message: "Collection",
+                    comment: "@context: Compose collection field",
+                  })}
+                </label>
+                <select data-bind="collectionId" class="select text-sm">
+                  <option value="0">
+                    {t({
+                      message: "None",
+                      comment: "@context: No collection selected",
+                    })}
+                  </option>
+                  {collections.map((col) => (
+                    <option key={col.id} value={col.id}>
+                      {col.title}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+
+            {/* Toolbar */}
+            <div class="compose-toolbar">
+              <div class="flex gap-1">
+                {/* Media button */}
+                <button
+                  type="button"
+                  class="compose-toolbar-btn"
+                  title={t({
+                    message: "Add Media",
+                    comment: "@context: Compose toolbar - add media",
+                  })}
+                  data-on:click="document.getElementById('compose-media-picker').showModal(); fetch('/dash/media/picker').then(r => r.text()).then(html => document.getElementById('compose-media-grid').innerHTML = html)"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+                    <circle cx="9" cy="9" r="2" />
+                    <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+                  </svg>
+                </button>
+
+                {/* Rating toggle */}
+                <button
+                  type="button"
+                  class="compose-toolbar-btn"
+                  title={t({
+                    message: "Rating",
+                    comment: "@context: Compose toolbar - toggle rating",
+                  })}
+                  data-on:click="$_showRating = !$_showRating"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+                  </svg>
+                </button>
+
+                {/* Collection toggle */}
+                {collections && collections.length > 0 && (
+                  <button
+                    type="button"
+                    class="compose-toolbar-btn"
+                    title={t({
+                      message: "Collection",
+                      comment: "@context: Compose toolbar - toggle collection",
+                    })}
+                    data-on:click="$_showCollection = !$_showCollection"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* Footer: checkboxes + submit */}
+            <div class="compose-dialog-footer">
+              <div class="flex gap-3">
+                <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <input
+                    type="checkbox"
+                    class="checkbox"
+                    data-bind="featured"
+                  />
+                  {t({
+                    message: "Featured",
+                    comment: "@context: Compose checkbox - mark as featured",
+                  })}
+                </label>
+                <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <input type="checkbox" class="checkbox" data-bind="pinned" />
+                  {t({
+                    message: "Pinned",
+                    comment: "@context: Compose checkbox - pin to top",
+                  })}
+                </label>
+              </div>
+              <div class="flex gap-2">
+                <button
+                  type="button"
+                  class="btn-outline text-sm"
+                  data-attr:disabled="$_composeLoading"
+                  data-on:click="$status = 'draft'; document.querySelector('#compose-dialog form').requestSubmit()"
+                >
+                  <svg
+                    data-show="$_composeLoading"
+                    style="display:none"
+                    class="animate-spin size-4"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    role="status"
+                  >
+                    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+                  </svg>
+                  {t({
+                    message: "Draft",
+                    comment: "@context: Compose button - save as draft",
+                  })}
+                </button>
+                <button
+                  type="submit"
+                  class="btn text-sm"
+                  data-attr:disabled="$_composeLoading"
+                >
+                  <svg
+                    data-show="$_composeLoading"
+                    style="display:none"
+                    class="animate-spin size-4"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    role="status"
+                  >
+                    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+                  </svg>
+                  {t({
+                    message: "Post",
+                    comment: "@context: Compose button - publish post",
+                  })}
+                </button>
+              </div>
+            </div>
+          </form>
+        </section>
+      </div>
+
+      {/* Nested media picker dialog */}
+      <dialog
+        id="compose-media-picker"
+        class="p-6 rounded-lg max-w-2xl w-full backdrop:bg-black/50"
+        onclick="event.target === this && this.close()"
+      >
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="text-lg font-semibold">
+            {t({
+              message: "Select Media",
+              comment: "@context: Media picker dialog title",
+            })}
+          </h2>
+          <button
+            type="button"
+            class="btn-outline text-sm"
+            onclick="this.closest('dialog').close()"
+          >
+            {t({
+              message: "Done",
+              comment: "@context: Close media picker button",
+            })}
+          </button>
+        </div>
+        <div
+          id="compose-media-grid"
+          class="grid grid-cols-4 gap-2 max-h-96 overflow-y-auto"
+        >
+          <p class="text-muted-foreground text-sm col-span-4">
+            {t({
+              message: "Loading...",
+              comment: "@context: Loading state for media picker",
+            })}
+          </p>
+        </div>
+      </dialog>
+    </dialog>
+  );
+};

package/src/ui/compose/ComposePrompt.tsx

@@ -0,0 +1,55 @@
+/**
+ * Compose Prompt
+ *
+ * "What's new?" prompt bar at the top of the content area.
+ * Clicking it opens the compose dialog.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+
+export const ComposePrompt: FC = () => {
+  const { t } = useLingui();
+
+  return (
+    <div class="compose-prompt">
+      <button
+        type="button"
+        class="compose-prompt-trigger"
+        onclick="document.getElementById('compose-dialog').showModal()"
+      >
+        <span class="compose-prompt-avatar">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 1 1 3.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+          </svg>
+        </span>
+        <span class="compose-prompt-text">
+          {t({
+            message: "What's new?",
+            comment: "@context: Compose prompt placeholder text",
+          })}
+        </span>
+      </button>
+      <button
+        type="button"
+        class="compose-prompt-post-btn"
+        onclick="document.getElementById('compose-dialog').showModal()"
+      >
+        {t({
+          message: "Post",
+          comment: "@context: Compose prompt post button",
+        })}
+      </button>
+    </div>
+  );
+};

package/src/{theme/components/TypeBadge.tsx → ui/dash/FormatBadge.tsx}

@@ -2,18 +2,17 @@
  * Format Badge Component
  *
  * Displays a badge indicating the format of a post (note, link, quote).
- * Named TypeBadge for backward compatibility with theme overrides.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
 import type { Format } from "../../types.js";
 
-export interface TypeBadgeProps {
+export interface FormatBadgeProps {
   type: Format;
 }
 
-export const TypeBadge: FC<TypeBadgeProps> = ({ type }) => {
+export const FormatBadge: FC<FormatBadgeProps> = ({ type }) => {
   const { t } = useLingui();
 
   const labels: Record<Format, string> = {

package/src/{theme/components → ui/dash}/PageForm.tsx

@@ -147,25 +147,31 @@ export const PageForm: FC<PageFormProps> = ({
 
       {/* Submit */}
       <div class="flex gap-2">
-        <button type="submit" class="btn" data-attr-disabled="$_loading">
-          <span data-show="!$_loading">
-            {isEdit
-              ? t({
-                  message: "Update Page",
-                  comment: "@context: Button to update existing page",
-                })
-              : t({
-                  message: "Create Page",
-                  comment: "@context: Button to create new page",
-                })}
-          </span>
-          <span data-show="$_loading">
-            {t({
-              message: "Processing...",
-              comment:
-                "@context: Loading text shown on submit button while request is in progress",
-            })}
-          </span>
+        <button type="submit" class="btn" data-attr:disabled="$_loading">
+          <svg
+            data-show="$_loading"
+            style="display:none"
+            class="animate-spin size-4"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            role="status"
+          >
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
+          {isEdit
+            ? t({
+                message: "Update Page",
+                comment: "@context: Button to update existing page",
+              })
+            : t({
+                message: "Create Page",
+                comment: "@context: Button to create new page",
+              })}
         </button>
         <a href={cancelUrl} class="btn-outline">
           {t({