@jant/core 0.2.11 → 0.2.13

package/src/theme/components/ActionButtons.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 ActionButtonsProps {
   /**
@@ -19,7 +19,7 @@ export interface ActionButtonsProps {
   viewHref?: string;
 
   /**
-   * Delete button form action
+   * Delete action URL (sends POST via Datastar @post)
    */
   deleteAction?: string;
 
@@ -64,11 +64,29 @@ export const ActionButtons: FC<ActionButtonsProps> = ({
 
   const editClass = size === "sm" ? "btn-sm-outline" : "btn-outline";
   const viewClass = size === "sm" ? "btn-sm-ghost" : "btn-ghost";
-  const deleteClass = size === "sm" ? "btn-sm-ghost text-destructive" : "btn-ghost text-destructive";
+  const deleteClass =
+    size === "sm"
+      ? "btn-sm-ghost text-destructive"
+      : "btn-ghost text-destructive";
 
-  const defaultEditLabel = t({ message: "Edit", comment: "@context: Button to edit item" });
-  const defaultViewLabel = t({ message: "View", comment: "@context: Button to view item on public site" });
-  const defaultDeleteLabel = t({ message: "Delete", comment: "@context: Button to delete item" });
+  const defaultEditLabel = t({
+    message: "Edit",
+    comment: "@context: Button to edit item",
+  });
+  const defaultViewLabel = t({
+    message: "View",
+    comment: "@context: Button to view item on public site",
+  });
+  const defaultDeleteLabel = t({
+    message: "Delete",
+    comment: "@context: Button to delete item",
+  });
+
+  const deleteClickHandler = deleteAction
+    ? deleteConfirm
+      ? `confirm('${deleteConfirm}') && @post('${deleteAction}')`
+      : `@post('${deleteAction}')`
+    : undefined;
 
   return (
     <>
@@ -83,15 +101,13 @@ export const ActionButtons: FC<ActionButtonsProps> = ({
         </a>
       )}
       {deleteAction && (
-        <form method="post" action={deleteAction} style="display: inline">
-          <button
-            type="submit"
-            class={deleteClass}
-            onclick={deleteConfirm ? `return confirm('${deleteConfirm}')` : undefined}
-          >
-            {deleteLabel || defaultDeleteLabel}
-          </button>
-        </form>
+        <button
+          type="button"
+          class={deleteClass}
+          data-on:click__prevent={deleteClickHandler}
+        >
+          {deleteLabel || defaultDeleteLabel}
+        </button>
       )}
     </>
   );

package/src/theme/components/CrudPageHeader.tsx

@@ -36,13 +36,12 @@ export const CrudPageHeader: FC<CrudPageHeaderProps> = ({
   return (
     <div class="flex items-center justify-between mb-6">
       <h1 class="text-2xl font-semibold">{title}</h1>
-      {children || (
-        ctaLabel && ctaHref && (
+      {children ||
+        (ctaLabel && ctaHref && (
           <a href={ctaHref} class="btn">
             {ctaLabel}
           </a>
-        )
-      )}
+        ))}
     </div>
   );
 };

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

@@ -36,11 +36,7 @@ export const EmptyState: FC<EmptyStateProps> = ({
   centered = true,
 }) => {
   if (!centered) {
-    return (
-      <p class="text-muted-foreground">
-        {message}
-      </p>
-    );
+    return <p class="text-muted-foreground">{message}</p>;
   }
 
   return (

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;
@@ -22,22 +22,37 @@ export const PageForm: FC<PageFormProps> = ({
   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>
@@ -45,35 +60,50 @@ export const PageForm: FC<PageFormProps> = ({
       {/* 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", comment: "@context: Page path validation message" })}
+            title={t({
+              message: "Lowercase letters, numbers, and hyphens only",
+              comment: "@context: Page path validation message",
+            })}
             required
           />
         </div>
         <p class="text-xs text-muted-foreground mt-1">
-          {t({ message: "The URL path for this page. Use lowercase letters, numbers, and hyphens.", comment: "@context: Page path helper text" })}
+          {t({
+            message:
+              "The URL path for this page. Use lowercase letters, numbers, and hyphens.",
+            comment: "@context: Page path helper text",
+          })}
         </p>
       </div>
 
       {/* 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)...", comment: "@context: Page content placeholder" })}
+          placeholder={t({
+            message: "Page content (Markdown supported)...",
+            comment: "@context: Page content placeholder",
+          })}
           required
         >
           {page?.content ?? ""}
@@ -83,18 +113,34 @@ export const PageForm: FC<PageFormProps> = ({
       {/* 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.", comment: "@context: Page status helper text" })}
+          {t({
+            message:
+              "Published pages are accessible via their path. Drafts are not visible.",
+            comment: "@context: Page status helper text",
+          })}
         </p>
       </div>
 
@@ -102,11 +148,20 @@ export const PageForm: FC<PageFormProps> = ({
       <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") */
@@ -42,17 +42,20 @@ export const Pagination: FC<PaginationProps> = ({
     return `${url.pathname}${url.search}`;
   };
 
-  const prevText = t({ message: "Previous", comment: "@context: Pagination button - previous page" });
-  const nextText = t({ message: "Next", comment: "@context: Pagination button - next page" });
+  const prevText = t({
+    message: "Previous",
+    comment: "@context: Pagination button - previous 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">
       <div>
         {hasPrev ? (
-          <a
-            href={buildUrl(prevCursor)}
-            class="btn-outline text-sm"
-          >
+          <a href={buildUrl(prevCursor)} class="btn-outline text-sm">
             ← {prevText}
           </a>
         ) : (
@@ -64,10 +67,7 @@ export const Pagination: FC<PaginationProps> = ({
 
       <div>
         {hasNext ? (
-          <a
-            href={buildUrl(nextCursor)}
-            class="btn-outline text-sm"
-          >
+          <a href={buildUrl(nextCursor)} class="btn-outline text-sm">
             {nextText} →
           </a>
         ) : (
@@ -92,17 +92,18 @@ export interface LoadMoreProps {
   text?: string;
 }
 
-export const LoadMore: FC<LoadMoreProps> = ({
-  href,
-  hasMore,
-  text,
-}) => {
+export const LoadMore: FC<LoadMoreProps> = ({ href, hasMore, text }) => {
   const { t } = useLingui();
   if (!hasMore) {
     return null;
   }
 
-  const buttonText = text ?? t({ message: "Load more", comment: "@context: Pagination button - load more items" });
+  const buttonText =
+    text ??
+    t({
+      message: "Load more",
+      comment: "@context: Pagination button - load more items",
+    });
 
   return (
     <div class="text-center py-4">
@@ -152,18 +153,25 @@ export const PagePagination: FC<PagePaginationProps> = ({
     return `${url.pathname}${url.search}`;
   };
 
-  const prevText = t({ message: "Previous", comment: "@context: Pagination button - previous page" });
-  const nextText = t({ message: "Next", comment: "@context: Pagination button - next page" });
-  const pageText = t({ message: "Page {page}", comment: "@context: Pagination - current page indicator", values: { page: String(currentPage) } });
+  const prevText = t({
+    message: "Previous",
+    comment: "@context: Pagination button - previous page",
+  });
+  const nextText = t({
+    message: "Next",
+    comment: "@context: Pagination button - next page",
+  });
+  const pageText = t({
+    message: "Page {page}",
+    comment: "@context: Pagination - current page indicator",
+    values: { page: String(currentPage) },
+  });
 
   return (
     <nav class="flex items-center justify-between py-4" aria-label="Pagination">
       <div>
         {hasPrev ? (
-          <a
-            href={buildUrl(currentPage - 1)}
-            class="btn-outline text-sm"
-          >
+          <a href={buildUrl(currentPage - 1)} class="btn-outline text-sm">
             ← {prevText}
           </a>
         ) : (
@@ -173,16 +181,11 @@ export const PagePagination: FC<PagePaginationProps> = ({
         )}
       </div>
 
-      <span class="text-sm text-muted-foreground">
-        {pageText}
-      </span>
+      <span class="text-sm text-muted-foreground">{pageText}</span>
 
       <div>
         {hasNext ? (
-          <a
-            href={buildUrl(currentPage + 1)}
-            class="btn-outline text-sm"
-          >
+          <a href={buildUrl(currentPage + 1)} class="btn-outline text-sm">
             {nextText} →
           </a>
         ) : (

package/src/theme/components/PostForm.tsx

@@ -4,24 +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" })}</label>
-        <select name="type" class="select" required>
+        <label class="label">
+          {t({
+            message: "Type",
+            comment: "@context: Post form field - post type",
+          })}
+        </label>
+        <select data-bind="type" class="select" required>
           <option value="note" selected={post?.type === "note"}>
             {t({ message: "Note", comment: "@context: Post type option" })}
           </option>
@@ -42,23 +61,35 @@ 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" })}</label>
+        <label class="label">
+          {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>
 
       {/* Content */}
       <div class="field">
-        <label class="label">{t({ message: "Content", comment: "@context: Post form field" })}</label>
+        <label class="label">
+          {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?", comment: "@context: Post content placeholder" })}
+          placeholder={t({
+            message: "What's on your mind?",
+            comment: "@context: Post content placeholder",
+          })}
           required
         >
           {post?.content ?? ""}
@@ -67,51 +98,84 @@ 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" })}</label>
+        <label class="label">
+          {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>
 
       {/* Visibility */}
       <div class="field">
-        <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" })}
+        <label class="label">
+          {t({ message: "Visibility", comment: "@context: Post form field" })}
+        </label>
+        <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>
 
       {/* Custom path (optional) */}
       <div class="field">
-        <label class="label">{t({ message: "Custom Path (optional)", comment: "@context: Post form field" })}</label>
+        <label class="label">
+          {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>
 
       {/* Submit */}
       <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" })}
+          {isEdit
+            ? 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" })}