@jant/core 0.2.12 → 0.2.13

package/src/theme/components/CrudPageHeader.tsx

@@ -27,7 +27,12 @@ export interface CrudPageHeaderProps extends PropsWithChildren {
   // Optional children to render in place of default CTA button (useful for custom actions like upload buttons)
 }
 
-export const CrudPageHeader: FC<CrudPageHeaderProps> = ({ title, ctaLabel, ctaHref, children }) => {
+export const CrudPageHeader: FC<CrudPageHeaderProps> = ({
+  title,
+  ctaLabel,
+  ctaHref,
+  children,
+}) => {
   return (
     <div class="flex items-center justify-between mb-6">
       <h1 class="text-2xl font-semibold">{title}</h1>

package/src/theme/components/DangerZone.tsx

@@ -6,7 +6,7 @@
  */
 
 import type { FC, PropsWithChildren } from "hono/jsx";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 
 export interface DangerZoneProps extends PropsWithChildren {
   /**
@@ -57,21 +57,27 @@ export const DangerZone: FC<DangerZoneProps> = ({
     comment: "@context: Section heading for dangerous/destructive actions",
   });
 
+  const clickHandler = confirmMessage
+    ? `confirm('${confirmMessage}') && @post('${formAction}')`
+    : `@post('${formAction}')`;
+
   return (
     <div class="mt-8 pt-8 border-t">
-      <h2 class="text-lg font-medium text-destructive mb-4">{title || defaultTitle}</h2>
-      {description && <p class="text-sm text-muted-foreground mb-4">{description}</p>}
+      <h2 class="text-lg font-medium text-destructive mb-4">
+        {title || defaultTitle}
+      </h2>
+      {description && (
+        <p class="text-sm text-muted-foreground mb-4">{description}</p>
+      )}
       {children}
-      <form method="post" action={formAction}>
-        <button
-          type="submit"
-          class="btn-destructive"
-          disabled={disabled}
-          onclick={confirmMessage ? `return confirm('${confirmMessage}')` : undefined}
-        >
-          {actionLabel}
-        </button>
-      </form>
+      <button
+        type="button"
+        class="btn-destructive"
+        disabled={disabled}
+        data-on:click__prevent={clickHandler}
+      >
+        {actionLabel}
+      </button>
     </div>
   );
 };

package/src/theme/components/EmptyState.tsx

@@ -29,7 +29,12 @@ export interface EmptyStateProps {
   centered?: boolean;
 }
 
-export const EmptyState: FC<EmptyStateProps> = ({ message, ctaText, ctaHref, centered = true }) => {
+export const EmptyState: FC<EmptyStateProps> = ({
+  message,
+  ctaText,
+  ctaHref,
+  centered = true,
+}) => {
   if (!centered) {
     return <p class="text-muted-foreground">{message}</p>;
   }

package/src/theme/components/PageForm.tsx

@@ -6,7 +6,7 @@
 
 import type { FC } from "hono/jsx";
 import type { Post } from "../../types.js";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 
 export interface PageFormProps {
   page?: Post;
@@ -14,26 +14,45 @@ export interface PageFormProps {
   cancelUrl?: string;
 }
 
-export const PageForm: FC<PageFormProps> = ({ page, action, cancelUrl = "/dash/pages" }) => {
+export const PageForm: FC<PageFormProps> = ({
+  page,
+  action,
+  cancelUrl = "/dash/pages",
+}) => {
   const { t } = useLingui();
   const isEdit = !!page;
 
+  const signals = JSON.stringify({
+    title: page?.title ?? "",
+    path: page?.path ?? "",
+    content: page?.content ?? "",
+    visibility: page?.visibility ?? "unlisted",
+  }).replace(/</g, "\\u003c");
+
   return (
-    <form method="post" action={action} class="flex flex-col gap-4">
-      {/* Hidden type field */}
-      <input type="hidden" name="type" value="page" />
+    <form
+      data-signals={signals}
+      data-on:submit__prevent={`@post('${action}')`}
+      class="flex flex-col gap-4"
+    >
+      <div id="page-form-message"></div>
 
       {/* Title */}
       <div class="field">
         <label class="label">
-          {t({ message: "Title", comment: "@context: Page form field label - title" })}
+          {t({
+            message: "Title",
+            comment: "@context: Page form field label - title",
+          })}
         </label>
         <input
           type="text"
-          name="title"
+          data-bind="title"
           class="input"
-          placeholder={t({ message: "Page title...", comment: "@context: Page title placeholder" })}
-          value={page?.title ?? ""}
+          placeholder={t({
+            message: "Page title...",
+            comment: "@context: Page title placeholder",
+          })}
           required
         />
       </div>
@@ -41,16 +60,18 @@ export const PageForm: FC<PageFormProps> = ({ page, action, cancelUrl = "/dash/p
       {/* Path */}
       <div class="field">
         <label class="label">
-          {t({ message: "Path", comment: "@context: Page form field label - URL path" })}
+          {t({
+            message: "Path",
+            comment: "@context: Page form field label - URL path",
+          })}
         </label>
         <div class="flex items-center gap-2">
           <span class="text-muted-foreground">/</span>
           <input
             type="text"
-            name="path"
+            data-bind="path"
             class="input flex-1"
             placeholder="about"
-            value={page?.path ?? ""}
             pattern="[a-z0-9\-]+"
             title={t({
               message: "Lowercase letters, numbers, and hyphens only",
@@ -61,7 +82,8 @@ export const PageForm: FC<PageFormProps> = ({ page, action, cancelUrl = "/dash/p
         </div>
         <p class="text-xs text-muted-foreground mt-1">
           {t({
-            message: "The URL path for this page. Use lowercase letters, numbers, and hyphens.",
+            message:
+              "The URL path for this page. Use lowercase letters, numbers, and hyphens.",
             comment: "@context: Page path helper text",
           })}
         </p>
@@ -70,10 +92,13 @@ export const PageForm: FC<PageFormProps> = ({ page, action, cancelUrl = "/dash/p
       {/* Content */}
       <div class="field">
         <label class="label">
-          {t({ message: "Content", comment: "@context: Page form field label - content" })}
+          {t({
+            message: "Content",
+            comment: "@context: Page form field label - content",
+          })}
         </label>
         <textarea
-          name="content"
+          data-bind="content"
           class="textarea min-h-48"
           placeholder={t({
             message: "Page content (Markdown supported)...",
@@ -88,19 +113,32 @@ export const PageForm: FC<PageFormProps> = ({ page, action, cancelUrl = "/dash/p
       {/* Visibility */}
       <div class="field">
         <label class="label">
-          {t({ message: "Status", comment: "@context: Page form field label - publish status" })}
+          {t({
+            message: "Status",
+            comment: "@context: Page form field label - publish status",
+          })}
         </label>
-        <select name="visibility" class="select">
-          <option value="unlisted" selected={page?.visibility === "unlisted" || !page}>
-            {t({ message: "Published", comment: "@context: Page status option - published" })}
+        <select data-bind="visibility" class="select">
+          <option
+            value="unlisted"
+            selected={page?.visibility === "unlisted" || !page}
+          >
+            {t({
+              message: "Published",
+              comment: "@context: Page status option - published",
+            })}
           </option>
           <option value="draft" selected={page?.visibility === "draft"}>
-            {t({ message: "Draft", comment: "@context: Page status option - draft" })}
+            {t({
+              message: "Draft",
+              comment: "@context: Page status option - draft",
+            })}
           </option>
         </select>
         <p class="text-xs text-muted-foreground mt-1">
           {t({
-            message: "Published pages are accessible via their path. Drafts are not visible.",
+            message:
+              "Published pages are accessible via their path. Drafts are not visible.",
             comment: "@context: Page status helper text",
           })}
         </p>
@@ -110,11 +148,20 @@ export const PageForm: FC<PageFormProps> = ({ page, action, cancelUrl = "/dash/p
       <div class="flex gap-2">
         <button type="submit" class="btn">
           {isEdit
-            ? t({ message: "Update Page", comment: "@context: Button to update existing page" })
-            : t({ message: "Create Page", comment: "@context: Button to create new page" })}
+            ? 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({ message: "Cancel", comment: "@context: Button to cancel and go back" })}
+          {t({
+            message: "Cancel",
+            comment: "@context: Button to cancel and go back",
+          })}
         </a>
       </div>
     </form>

package/src/theme/components/Pagination.tsx

@@ -5,7 +5,7 @@
  */
 
 import type { FC } from "hono/jsx";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 
 export interface PaginationProps {
   /** Base URL for pagination links (e.g., "/archive", "/search?q=test") */
@@ -46,7 +46,10 @@ export const Pagination: FC<PaginationProps> = ({
     message: "Previous",
     comment: "@context: Pagination button - previous page",
   });
-  const nextText = t({ message: "Next", comment: "@context: Pagination button - next page" });
+  const nextText = t({
+    message: "Next",
+    comment: "@context: Pagination button - next page",
+  });
 
   return (
     <nav class="flex items-center justify-between py-4" aria-label="Pagination">
@@ -56,7 +59,9 @@ export const Pagination: FC<PaginationProps> = ({
             ← {prevText}
           </a>
         ) : (
-          <span class="btn-outline text-sm opacity-50 cursor-not-allowed">← {prevText}</span>
+          <span class="btn-outline text-sm opacity-50 cursor-not-allowed">
+            ← {prevText}
+          </span>
         )}
       </div>
 
@@ -66,7 +71,9 @@ export const Pagination: FC<PaginationProps> = ({
             {nextText} →
           </a>
         ) : (
-          <span class="btn-outline text-sm opacity-50 cursor-not-allowed">{nextText} →</span>
+          <span class="btn-outline text-sm opacity-50 cursor-not-allowed">
+            {nextText} →
+          </span>
         )}
       </div>
     </nav>
@@ -92,7 +99,11 @@ export const LoadMore: FC<LoadMoreProps> = ({ href, hasMore, text }) => {
   }
 
   const buttonText =
-    text ?? t({ message: "Load more", comment: "@context: Pagination button - load more items" });
+    text ??
+    t({
+      message: "Load more",
+      comment: "@context: Pagination button - load more items",
+    });
 
   return (
     <div class="text-center py-4">
@@ -146,7 +157,10 @@ export const PagePagination: FC<PagePaginationProps> = ({
     message: "Previous",
     comment: "@context: Pagination button - previous page",
   });
-  const nextText = t({ message: "Next", comment: "@context: Pagination button - next page" });
+  const nextText = t({
+    message: "Next",
+    comment: "@context: Pagination button - next page",
+  });
   const pageText = t({
     message: "Page {page}",
     comment: "@context: Pagination - current page indicator",
@@ -161,7 +175,9 @@ export const PagePagination: FC<PagePaginationProps> = ({
             ← {prevText}
           </a>
         ) : (
-          <span class="btn-outline text-sm opacity-50 cursor-not-allowed">← {prevText}</span>
+          <span class="btn-outline text-sm opacity-50 cursor-not-allowed">
+            ← {prevText}
+          </span>
         )}
       </div>
 
@@ -173,7 +189,9 @@ export const PagePagination: FC<PagePaginationProps> = ({
             {nextText} →
           </a>
         ) : (
-          <span class="btn-outline text-sm opacity-50 cursor-not-allowed">{nextText} →</span>
+          <span class="btn-outline text-sm opacity-50 cursor-not-allowed">
+            {nextText} →
+          </span>
         )}
       </div>
     </nav>

package/src/theme/components/PostForm.tsx

@@ -4,26 +4,43 @@
 
 import type { FC } from "hono/jsx";
 import type { Post } from "../../types.js";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 
 export interface PostFormProps {
   post?: Post;
   action: string;
-  method?: "get" | "post";
 }
 
-export const PostForm: FC<PostFormProps> = ({ post, action, method = "post" }) => {
+export const PostForm: FC<PostFormProps> = ({ post, action }) => {
   const { t } = useLingui();
   const isEdit = !!post;
 
+  const signals = JSON.stringify({
+    type: post?.type ?? "note",
+    title: post?.title ?? "",
+    content: post?.content ?? "",
+    sourceUrl: post?.sourceUrl ?? "",
+    visibility: post?.visibility ?? "quiet",
+    path: post?.path ?? "",
+  }).replace(/</g, "\\u003c");
+
   return (
-    <form method={method} action={action} class="flex flex-col gap-4">
+    <form
+      data-signals={signals}
+      data-on:submit__prevent={`@post('${action}')`}
+      class="flex flex-col gap-4"
+    >
+      <div id="post-form-message"></div>
+
       {/* Type selector */}
       <div class="field">
         <label class="label">
-          {t({ message: "Type", comment: "@context: Post form field - post type" })}
+          {t({
+            message: "Type",
+            comment: "@context: Post form field - post type",
+          })}
         </label>
-        <select name="type" class="select" required>
+        <select data-bind="type" class="select" required>
           <option value="note" selected={post?.type === "note"}>
             {t({ message: "Note", comment: "@context: Post type option" })}
           </option>
@@ -45,14 +62,19 @@ export const PostForm: FC<PostFormProps> = ({ post, action, method = "post" }) =
       {/* Title (optional) */}
       <div class="field">
         <label class="label">
-          {t({ message: "Title (optional)", comment: "@context: Post form field" })}
+          {t({
+            message: "Title (optional)",
+            comment: "@context: Post form field",
+          })}
         </label>
         <input
           type="text"
-          name="title"
+          data-bind="title"
           class="input"
-          placeholder={t({ message: "Post title...", comment: "@context: Post title placeholder" })}
-          value={post?.title ?? ""}
+          placeholder={t({
+            message: "Post title...",
+            comment: "@context: Post title placeholder",
+          })}
         />
       </div>
 
@@ -62,7 +84,7 @@ export const PostForm: FC<PostFormProps> = ({ post, action, method = "post" }) =
           {t({ message: "Content", comment: "@context: Post form field" })}
         </label>
         <textarea
-          name="content"
+          data-bind="content"
           class="textarea min-h-32"
           placeholder={t({
             message: "What's on your mind?",
@@ -77,14 +99,16 @@ export const PostForm: FC<PostFormProps> = ({ post, action, method = "post" }) =
       {/* Source URL (for link/quote types) */}
       <div class="field">
         <label class="label">
-          {t({ message: "Source URL (optional)", comment: "@context: Post form field" })}
+          {t({
+            message: "Source URL (optional)",
+            comment: "@context: Post form field",
+          })}
         </label>
         <input
           type="url"
-          name="sourceUrl"
+          data-bind="sourceUrl"
           class="input"
           placeholder="https://..."
-          value={post?.sourceUrl ?? ""}
         />
       </div>
 
@@ -93,18 +117,33 @@ export const PostForm: FC<PostFormProps> = ({ post, action, method = "post" }) =
         <label class="label">
           {t({ message: "Visibility", comment: "@context: Post form field" })}
         </label>
-        <select name="visibility" class="select">
-          <option value="quiet" selected={post?.visibility === "quiet" || !post}>
-            {t({ message: "Quiet (normal)", comment: "@context: Post visibility option" })}
+        <select data-bind="visibility" class="select">
+          <option
+            value="quiet"
+            selected={post?.visibility === "quiet" || !post}
+          >
+            {t({
+              message: "Quiet (normal)",
+              comment: "@context: Post visibility option",
+            })}
           </option>
           <option value="featured" selected={post?.visibility === "featured"}>
-            {t({ message: "Featured", comment: "@context: Post visibility option" })}
+            {t({
+              message: "Featured",
+              comment: "@context: Post visibility option",
+            })}
           </option>
           <option value="unlisted" selected={post?.visibility === "unlisted"}>
-            {t({ message: "Unlisted", comment: "@context: Post visibility option" })}
+            {t({
+              message: "Unlisted",
+              comment: "@context: Post visibility option",
+            })}
           </option>
           <option value="draft" selected={post?.visibility === "draft"}>
-            {t({ message: "Draft", comment: "@context: Post visibility option" })}
+            {t({
+              message: "Draft",
+              comment: "@context: Post visibility option",
+            })}
           </option>
         </select>
       </div>
@@ -112,14 +151,16 @@ export const PostForm: FC<PostFormProps> = ({ post, action, method = "post" }) =
       {/* Custom path (optional) */}
       <div class="field">
         <label class="label">
-          {t({ message: "Custom Path (optional)", comment: "@context: Post form field" })}
+          {t({
+            message: "Custom Path (optional)",
+            comment: "@context: Post form field",
+          })}
         </label>
         <input
           type="text"
-          name="path"
+          data-bind="path"
           class="input"
           placeholder="my-custom-url"
-          value={post?.path ?? ""}
         />
       </div>
 
@@ -127,8 +168,14 @@ export const PostForm: FC<PostFormProps> = ({ post, action, method = "post" }) =
       <div class="flex gap-2">
         <button type="submit" class="btn">
           {isEdit
-            ? t({ message: "Update", comment: "@context: Button to update existing post" })
-            : t({ message: "Publish", comment: "@context: Button to publish new post" })}
+            ? t({
+                message: "Update",
+                comment: "@context: Button to update existing post",
+              })
+            : t({
+                message: "Publish",
+                comment: "@context: Button to publish new post",
+              })}
         </button>
         <a href="/dash/posts" class="btn-outline">
           {t({ message: "Cancel", comment: "@context: Button to cancel form" })}

package/src/theme/components/PostList.tsx

@@ -3,7 +3,7 @@
  */
 
 import type { FC } from "hono/jsx";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Post } from "../../types.js";
 import * as sqid from "../../lib/sqid.js";
 import * as time from "../../lib/time.js";
@@ -43,7 +43,10 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
           actions={
             <ActionButtons
               editHref={`/dash/posts/${sqid.encode(post.id)}/edit`}
-              editLabel={t({ message: "Edit", comment: "@context: Button to edit post" })}
+              editLabel={t({
+                message: "Edit",
+                comment: "@context: Button to edit post",
+              })}
               viewHref={`/p/${sqid.encode(post.id)}`}
               viewLabel={t({
                 message: "View",
@@ -55,12 +58,20 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
           <div class="flex items-center gap-2 mb-1">
             <TypeBadge type={post.type} />
             <VisibilityBadge visibility={post.visibility} />
-            <span class="text-xs text-muted-foreground">{time.formatDate(post.publishedAt)}</span>
+            <span class="text-xs text-muted-foreground">
+              {time.formatDate(post.publishedAt)}
+            </span>
           </div>
-          <a href={`/dash/posts/${sqid.encode(post.id)}`} class="font-medium hover:underline">
+          <a
+            href={`/dash/posts/${sqid.encode(post.id)}`}
+            class="font-medium hover:underline"
+          >
             {post.title ||
               post.content?.slice(0, 60) ||
-              t({ message: "Untitled", comment: "@context: Default title for untitled post" })}
+              t({
+                message: "Untitled",
+                comment: "@context: Default title for untitled post",
+              })}
           </a>
           {post.content && !post.title && (
             <p class="text-sm text-muted-foreground mt-1 line-clamp-2">

package/src/theme/components/ThreadView.tsx

@@ -5,7 +5,7 @@
  */
 
 import type { FC } from "hono/jsx";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { Post } from "../../types.js";
 import * as sqid from "../../lib/sqid.js";
 import * as time from "../../lib/time.js";
@@ -46,7 +46,10 @@ const ThreadPost: FC<{
       />
 
       <footer class="mt-3 flex items-center gap-3 text-sm text-muted-foreground">
-        <time class="dt-published" datetime={time.toISOString(post.publishedAt)}>
+        <time
+          class="dt-published"
+          datetime={time.toISOString(post.publishedAt)}
+        >
           {time.formatDate(post.publishedAt)}
         </time>
         {isRoot && (
@@ -58,8 +61,14 @@ const ThreadPost: FC<{
           </span>
         )}
         {!isCurrent && (
-          <a href={`/p/${sqid.encode(post.id)}`} class="text-xs hover:underline">
-            {t({ message: "Permalink", comment: "@context: Link to individual post in thread" })}
+          <a
+            href={`/p/${sqid.encode(post.id)}`}
+            class="text-xs hover:underline"
+          >
+            {t({
+              message: "Permalink",
+              comment: "@context: Link to individual post in thread",
+            })}
           </a>
         )}
       </footer>
@@ -86,7 +95,10 @@ export const ThreadView: FC<ThreadViewProps> = ({ posts, currentPostId }) => {
 
   const threadLabel =
     posts.length === 1
-      ? t({ message: "Thread with 1 post", comment: "@context: Thread view header - single post" })
+      ? t({
+          message: "Thread with 1 post",
+          comment: "@context: Thread view header - single post",
+        })
       : t({
           message: "Thread with {count} posts",
           comment: "@context: Thread view header - multiple posts",
@@ -101,12 +113,18 @@ export const ThreadView: FC<ThreadViewProps> = ({ posts, currentPostId }) => {
         {posts.map((post, index) => (
           <div key={post.id} class="relative">
             {/* Connection line */}
-            {index > 0 && <div class="absolute left-6 -top-3 w-0.5 h-3 bg-border" />}
+            {index > 0 && (
+              <div class="absolute left-6 -top-3 w-0.5 h-3 bg-border" />
+            )}
             {index < posts.length - 1 && (
               <div class="absolute left-6 -bottom-3 w-0.5 h-3 bg-border" />
             )}
 
-            <ThreadPost post={post} isCurrent={post.id === currentPostId} isRoot={index === 0} />
+            <ThreadPost
+              post={post}
+              isCurrent={post.id === currentPostId}
+              isRoot={index === 0}
+            />
           </div>
         ))}
       </div>

package/src/theme/components/TypeBadge.tsx

@@ -5,7 +5,7 @@
  */
 
 import type { FC } from "hono/jsx";
-import { useLingui } from "../../i18n/index.js";
+import { useLingui } from "@lingui/react/macro";
 import type { PostType } from "../../types.js";
 
 export interface TypeBadgeProps {
@@ -17,10 +17,19 @@ export const TypeBadge: FC<TypeBadgeProps> = ({ type }) => {
 
   const labels: Record<PostType, string> = {
     note: t({ message: "Note", comment: "@context: Post type badge - note" }),
-    article: t({ message: "Article", comment: "@context: Post type badge - article" }),
+    article: t({
+      message: "Article",
+      comment: "@context: Post type badge - article",
+    }),
     link: t({ message: "Link", comment: "@context: Post type badge - link" }),
-    quote: t({ message: "Quote", comment: "@context: Post type badge - quote" }),
-    image: t({ message: "Image", comment: "@context: Post type badge - image" }),
+    quote: t({
+      message: "Quote",
+      comment: "@context: Post type badge - quote",
+    }),
+    image: t({
+      message: "Image",
+      comment: "@context: Post type badge - image",
+    }),
     page: t({ message: "Page", comment: "@context: Post type badge - page" }),
   };