@jant/core 0.2.10 → 0.2.12

package/src/i18n/README.md

@@ -85,7 +85,10 @@ function DashboardContent({ postCount }: { postCount: number }) {
       {/* 3. With embedded components - use Trans */}
       <p>
         <Trans comment="@context: Help text">
-          Read the <a href="/docs" class="underline">documentation</a>
+          Read the{" "}
+          <a href="/docs" class="underline">
+            documentation
+          </a>
         </Trans>
       </p>
     </div>
@@ -118,7 +121,7 @@ dashRoute.get("/", async (c) => {
 
   return c.html(
     <Layout title={i18n._({ message: "Dashboard", comment: "@context: ..." })}>
-      <MyComponent c={c} />  {/* Need to pass c prop */}
+      <MyComponent c={c} /> {/* Need to pass c prop */}
     </Layout>
   );
 });
@@ -138,14 +141,14 @@ dashRoute.get("/", async (c) => {
   return c.html(
     <I18nProvider c={c}>
       <Layout>
-        <MyComponent />  {/* No need to pass c prop */}
+        <MyComponent /> {/* No need to pass c prop */}
       </Layout>
     </I18nProvider>
   );
 });
 
 function MyComponent() {
-  const { t } = useLingui();  // Like React hook
+  const { t } = useLingui(); // Like React hook
   return <h1>{t({ message: "Hello", comment: "@context: ..." })}</h1>;
 }
 ```
@@ -159,10 +162,10 @@ function MyComponent() {
 ```tsx
 // ✅ Correct - comment is crucial for AI translation
 const { t } = useLingui();
-t({ message: "Dashboard", comment: "@context: Page title" })
+t({ message: "Dashboard", comment: "@context: Page title" });
 
 // ❌ Wrong - missing comment reduces translation quality
-t({ message: "Dashboard" })
+t({ message: "Dashboard" });
 ```
 
 ### 2. **I18nProvider must wrap your app**
@@ -173,10 +176,10 @@ c.html(
   <I18nProvider c={c}>
     <App />
   </I18nProvider>
-)
+);
 
 // ❌ Wrong - useLingui() will throw error
-c.html(<App />)  // useLingui() inside App won't find i18n context
+c.html(<App />); // useLingui() inside App won't find i18n context
 ```
 
 ### 3. **useLingui() only works inside components**
@@ -201,10 +204,10 @@ dashRoute.get("/", async (c) => {
 const { t } = useLingui();
 
 // ✅ Correct - values as second parameter
-t({ message: "Hello {name}", comment: "@context: Greeting" }, { name: "Alice" })
+t({ message: "Hello {name}", comment: "@context: Greeting" }, { name: "Alice" });
 
 // ❌ Wrong - values inside first parameter (not supported)
-t({ message: "Hello {name}", comment: "@context: Greeting", values: { name: "Alice" } })
+t({ message: "Hello {name}", comment: "@context: Greeting", values: { name: "Alice" } });
 ```
 
 ---
@@ -227,14 +230,14 @@ Provides i18n context to all child components. Must wrap your app in route handl
 
 ```tsx
 interface I18nProviderProps {
-  c: Context;  // Hono context
+  c: Context; // Hono context
   children: JSX.Element;
 }
 
 // Usage
 <I18nProvider c={c}>
   <YourApp />
-</I18nProvider>
+</I18nProvider>;
 ```
 
 ### `useLingui()`
@@ -243,10 +246,10 @@ Hook to access i18n functionality inside components. Must be used within `I18nPr
 
 ```tsx
 function useLingui(): {
-  i18n: I18n;  // Lingui i18n instance
+  i18n: I18n; // Lingui i18n instance
   t: (descriptor: MessageDescriptor, values?: Record<string, any>) => string;
   _: (descriptor: MessageDescriptor, values?: Record<string, any>) => string;
-}
+};
 
 // Usage
 function MyComponent() {
@@ -263,15 +266,15 @@ Component for translations with embedded JSX elements. Simplified implementation
 
 ```tsx
 interface TransProps {
-  comment?: string;  // @context comment for translators
-  id?: string;       // Optional message ID
-  children: JSX.Element;  // JSX content with embedded elements
+  comment?: string; // @context comment for translators
+  id?: string; // Optional message ID
+  children: JSX.Element; // JSX content with embedded elements
 }
 
 // Usage
 <Trans comment="@context: Help text">
   Read the <a href="/docs">documentation</a>
-</Trans>
+</Trans>;
 ```
 
 **Note**: This is a simplified implementation. For complex translations with dynamic content, use `t()` with placeholders instead.
@@ -290,6 +293,7 @@ This implementation mimics React's Context API but is optimized for Hono JSX SSR
 ### Why Global State is Safe
 
 Unlike React (client-side with multiple re-renders), Hono JSX renders once per request on the server:
+
 - Request arrives → I18nProvider sets global i18n → Components render → Response sent
 - Next request → New i18n instance → Components render → Response sent
 

package/src/i18n/context.tsx

@@ -79,7 +79,7 @@ export function useLingui() {
   if (!currentI18n) {
     throw new Error(
       "useLingui() called outside of I18nProvider. " +
-      "Make sure your component is wrapped in <I18nProvider c={c}>...</I18nProvider>"
+        "Make sure your component is wrapped in <I18nProvider c={c}>...</I18nProvider>"
     );
   }
 

package/src/lib/image-processor.ts

@@ -53,10 +53,7 @@ function readExifOrientation(buffer: ArrayBuffer): number {
       const exifOffset = offset + 4;
 
       // Check for "Exif\0\0"
-      if (
-        view.getUint32(exifOffset) !== 0x45786966 ||
-        view.getUint16(exifOffset + 4) !== 0x0000
-      ) {
+      if (view.getUint32(exifOffset) !== 0x45786966 || view.getUint16(exifOffset + 4) !== 0x0000) {
         return 1;
       }
 
@@ -148,12 +145,7 @@ async function process(file: File, options: ProcessOptions = {}): Promise<Blob>
   const srcHeight = isRotated ? img.width : img.height;
 
   // Calculate output size
-  const { width, height } = calculateDimensions(
-    srcWidth,
-    srcHeight,
-    opts.maxWidth,
-    opts.maxHeight
-  );
+  const { width, height } = calculateDimensions(srcWidth, srcHeight, opts.maxWidth, opts.maxHeight);
 
   // Create canvas
   const canvas = document.createElement("canvas");

package/src/lib/image.ts

@@ -93,11 +93,7 @@ export function getImageUrl(
  * // Returns: "https://cdn.example.com/uploads/file.webp"
  * ```
  */
-export function getMediaUrl(
-  mediaId: string,
-  r2Key: string,
-  r2PublicUrl?: string
-): string {
+export function getMediaUrl(mediaId: string, r2Key: string, r2PublicUrl?: string): string {
   if (r2PublicUrl) {
     return `${r2PublicUrl}/${r2Key}`;
   }

package/src/lib/schemas.ts

@@ -39,7 +39,11 @@ export const CreatePostSchema = z.object({
   visibility: VisibilitySchema,
   sourceUrl: z.string().url().optional().or(z.literal("")),
   sourceName: z.string().optional(),
-  path: z.string().regex(/^[a-z0-9-]*$/).optional().or(z.literal("")),
+  path: z
+    .string()
+    .regex(/^[a-z0-9-]*$/)
+    .optional()
+    .or(z.literal("")),
   replyToId: z.string().optional(), // Sqid format
   publishedAt: z.number().int().positive().optional(),
 });
@@ -58,11 +62,7 @@ export const UpdatePostSchema = CreatePostSchema.partial();
  * // type is PostType, throws if invalid
  * ```
  */
-export function parseFormData<T>(
-  formData: FormData,
-  key: string,
-  schema: z.ZodSchema<T>
-): T {
+export function parseFormData<T>(formData: FormData, key: string, schema: z.ZodSchema<T>): T {
   const value = formData.get(key);
   if (value === null) {
     throw new Error(`Missing required field: ${key}`);

package/src/lib/sse.ts

@@ -58,10 +58,7 @@ export interface SSEStream {
    * });
    * ```
    */
-  patchElements(
-    html: string,
-    options?: { mode?: PatchMode; selector?: string }
-  ): Promise<void>;
+  patchElements(html: string, options?: { mode?: PatchMode; selector?: string }): Promise<void>;
 
   /**
    * Execute JavaScript on the client
@@ -97,10 +94,7 @@ export interface SSEStream {
  * });
  * ```
  */
-export function sse(
-  c: Context,
-  handler: (stream: SSEStream) => Promise<void>
-): Response {
+export function sse(c: Context, handler: (stream: SSEStream) => Promise<void>): Response {
   const encoder = new TextEncoder();
 
   const stream = new ReadableStream({

package/src/preset.css

@@ -2,9 +2,11 @@
  * Jant Core Preset
  *
  * Includes basecoat UI and component styles.
- * Source scanning is handled by tailwind.config.ts in user projects.
+ * @source "./" tells Tailwind to scan @jant/core source files for class usage.
  */
 
+@source "./";
+
 @import "basecoat-css";
 @import "./styles/components.css";
 

package/src/routes/api/posts.ts

@@ -23,7 +23,7 @@ postsApiRoutes.get("/", async (c) => {
   const posts = await c.var.services.posts.list({
     type,
     visibility: visibility ? [visibility] : ["featured", "quiet"],
-    cursor: cursor ? sqid.decode(cursor) ?? undefined : undefined,
+    cursor: cursor ? (sqid.decode(cursor) ?? undefined) : undefined,
     limit,
   });
 
@@ -50,16 +50,12 @@ postsApiRoutes.get("/:id", async (c) => {
 
 // Create post (requires auth)
 postsApiRoutes.post("/", requireAuthApi(), async (c) => {
-
   const rawBody = await c.req.json();
 
   // Validate request body
   const parseResult = CreatePostSchema.safeParse(rawBody);
   if (!parseResult.success) {
-    return c.json(
-      { error: "Validation failed", details: parseResult.error.flatten() },
-      400
-    );
+    return c.json({ error: "Validation failed", details: parseResult.error.flatten() }, 400);
   }
 
   const body = parseResult.data;
@@ -72,7 +68,7 @@ postsApiRoutes.post("/", requireAuthApi(), async (c) => {
     sourceUrl: body.sourceUrl || undefined,
     sourceName: body.sourceName,
     path: body.path || undefined,
-    replyToId: body.replyToId ? sqid.decode(body.replyToId) ?? undefined : undefined,
+    replyToId: body.replyToId ? (sqid.decode(body.replyToId) ?? undefined) : undefined,
     publishedAt: body.publishedAt,
   });
 
@@ -81,7 +77,6 @@ postsApiRoutes.post("/", requireAuthApi(), async (c) => {
 
 // Update post (requires auth)
 postsApiRoutes.put("/:id", requireAuthApi(), async (c) => {
-
   const id = sqid.decode(c.req.param("id"));
   if (!id) return c.json({ error: "Invalid ID" }, 400);
 
@@ -90,10 +85,7 @@ postsApiRoutes.put("/:id", requireAuthApi(), async (c) => {
   // Validate request body
   const parseResult = UpdatePostSchema.safeParse(rawBody);
   if (!parseResult.success) {
-    return c.json(
-      { error: "Validation failed", details: parseResult.error.flatten() },
-      400
-    );
+    return c.json({ error: "Validation failed", details: parseResult.error.flatten() }, 400);
   }
 
   const body = parseResult.data;
@@ -116,7 +108,6 @@ postsApiRoutes.put("/:id", requireAuthApi(), async (c) => {
 
 // Delete post (requires auth)
 postsApiRoutes.delete("/:id", requireAuthApi(), async (c) => {
-
   const id = sqid.decode(c.req.param("id"));
   if (!id) return c.json({ error: "Invalid ID" }, 400);
 

package/src/routes/api/upload.ts

@@ -24,7 +24,14 @@ uploadApiRoutes.use("*", requireAuthApi());
  * Render a media card HTML string for SSE response
  */
 function renderMediaCard(
-  media: { id: string; r2Key: string; mimeType: string; originalName: string; alt: string | null; size: number },
+  media: {
+    id: string;
+    r2Key: string;
+    mimeType: string;
+    originalName: string;
+    alt: string | null;
+    size: number;
+  },
   r2PublicUrl?: string,
   imageTransformUrl?: string
 ): string {
@@ -54,7 +61,11 @@ function renderMediaCard(
             loading="lazy"
           />
         </button>
-        <a href="/dash/media/${media.id}" class="block mt-2 text-xs truncate hover:underline" title="${media.originalName}">
+        <a
+          href="/dash/media/${media.id}"
+          class="block mt-2 text-xs truncate hover:underline"
+          title="${media.originalName}"
+        >
           ${media.originalName}
         </a>
         <div class="text-xs text-muted-foreground">${sizeStr}</div>
@@ -72,7 +83,11 @@ function renderMediaCard(
           <span class="text-xs">${media.mimeType}</span>
         </div>
       </a>
-      <a href="/dash/media/${media.id}" class="block mt-2 text-xs truncate hover:underline" title="${media.originalName}">
+      <a
+        href="/dash/media/${media.id}"
+        class="block mt-2 text-xs truncate hover:underline"
+        title="${media.originalName}"
+      >
         ${media.originalName}
       </a>
       <div class="text-xs text-muted-foreground">${sizeStr}</div>
@@ -165,11 +180,7 @@ uploadApiRoutes.post("/", async (c) => {
 
     // SSE response for Datastar
     if (wantsSSE(c)) {
-      const cardHtml = renderMediaCard(
-        media,
-        c.env.R2_PUBLIC_URL,
-        c.env.IMAGE_TRANSFORM_URL
-      );
+      const cardHtml = renderMediaCard(media, c.env.R2_PUBLIC_URL, c.env.IMAGE_TRANSFORM_URL);
 
       return sse(c, async (stream) => {
         // Replace placeholder with real media card

package/src/routes/dash/collections.tsx

@@ -7,7 +7,13 @@ import { useLingui } from "../../i18n/index.js";
 import type { Bindings, Collection, Post } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
-import { EmptyState, ListItemRow, ActionButtons, CrudPageHeader, DangerZone } from "../../theme/components/index.js";
+import {
+  EmptyState,
+  ListItemRow,
+  ActionButtons,
+  CrudPageHeader,
+  DangerZone,
+} from "../../theme/components/index.js";
 import * as sqid from "../../lib/sqid.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
@@ -21,14 +27,20 @@ function CollectionsListContent({ collections }: { collections: Collection[] })
     <>
       <CrudPageHeader
         title={t({ message: "Collections", comment: "@context: Dashboard heading" })}
-        ctaLabel={t({ message: "New Collection", comment: "@context: Button to create new collection" })}
+        ctaLabel={t({
+          message: "New Collection",
+          comment: "@context: Button to create new collection",
+        })}
         ctaHref="/dash/collections/new"
       />
 
       {collections.length === 0 ? (
         <EmptyState
           message={t({ message: "No collections yet.", comment: "@context: Empty state message" })}
-          ctaText={t({ message: "New Collection", comment: "@context: Button to create new collection" })}
+          ctaText={t({
+            message: "New Collection",
+            comment: "@context: Button to create new collection",
+          })}
           ctaHref="/dash/collections/new"
         />
       ) : (
@@ -64,16 +76,31 @@ function NewCollectionContent() {
   const { t } = useLingui();
   return (
     <>
-      <h1 class="text-2xl font-semibold mb-6">{t({ message: "New Collection", comment: "@context: Page heading" })}</h1>
+      <h1 class="text-2xl font-semibold mb-6">
+        {t({ message: "New Collection", comment: "@context: Page heading" })}
+      </h1>
 
       <form method="post" action="/dash/collections" class="flex flex-col gap-4 max-w-lg">
         <div class="field">
-          <label class="label">{t({ message: "Title", comment: "@context: Collection form field" })}</label>
-          <input type="text" name="title" class="input" required placeholder={t({ message: "My Collection", comment: "@context: Collection title placeholder" })} />
+          <label class="label">
+            {t({ message: "Title", comment: "@context: Collection form field" })}
+          </label>
+          <input
+            type="text"
+            name="title"
+            class="input"
+            required
+            placeholder={t({
+              message: "My Collection",
+              comment: "@context: Collection title placeholder",
+            })}
+          />
         </div>
 
         <div class="field">
-          <label class="label">{t({ message: "Slug", comment: "@context: Collection form field" })}</label>
+          <label class="label">
+            {t({ message: "Slug", comment: "@context: Collection form field" })}
+          </label>
           <input
             type="text"
             name="path"
@@ -83,18 +110,34 @@ function NewCollectionContent() {
             pattern="[a-z0-9-]+"
           />
           <p class="text-xs text-muted-foreground mt-1">
-            {t({ message: "URL-safe identifier (lowercase, numbers, hyphens)", comment: "@context: Collection path help text" })}
+            {t({
+              message: "URL-safe identifier (lowercase, numbers, hyphens)",
+              comment: "@context: Collection path help text",
+            })}
           </p>
         </div>
 
         <div class="field">
-          <label class="label">{t({ message: "Description (optional)", comment: "@context: Collection form field" })}</label>
-          <textarea name="description" class="textarea" rows={3} placeholder={t({ message: "What's this collection about?", comment: "@context: Collection description placeholder" })} />
+          <label class="label">
+            {t({ message: "Description (optional)", comment: "@context: Collection form field" })}
+          </label>
+          <textarea
+            name="description"
+            class="textarea"
+            rows={3}
+            placeholder={t({
+              message: "What's this collection about?",
+              comment: "@context: Collection description placeholder",
+            })}
+          />
         </div>
 
         <div class="flex gap-2">
           <button type="submit" class="btn">
-            {t({ message: "Create Collection", comment: "@context: Button to save new collection" })}
+            {t({
+              message: "Create Collection",
+              comment: "@context: Button to save new collection",
+            })}
           </button>
           <a href="/dash/collections" class="btn-outline">
             {t({ message: "Cancel", comment: "@context: Button to cancel form" })}
@@ -107,7 +150,11 @@ function NewCollectionContent() {
 
 function ViewCollectionContent({ collection, posts }: { collection: Collection; posts: Post[] }) {
   const { t } = useLingui();
-  const postsHeader = t({ message: "Posts in Collection ({count})", comment: "@context: Collection posts section heading", values: { count: String(posts.length) } });
+  const postsHeader = t({
+    message: "Posts in Collection ({count})",
+    comment: "@context: Collection posts section heading",
+    values: { count: String(posts.length) },
+  });
 
   return (
     <>
@@ -124,9 +171,7 @@ function ViewCollectionContent({ collection, posts }: { collection: Collection;
         />
       </div>
 
-      {collection.description && (
-        <p class="text-muted-foreground mb-6">{collection.description}</p>
-      )}
+      {collection.description && <p class="text-muted-foreground mb-6">{collection.description}</p>}
 
       <div class="card">
         <header>
@@ -134,7 +179,12 @@ function ViewCollectionContent({ collection, posts }: { collection: Collection;
         </header>
         <section>
           {posts.length === 0 ? (
-            <p class="text-muted-foreground">{t({ message: "No posts in this collection.", comment: "@context: Empty state message" })}</p>
+            <p class="text-muted-foreground">
+              {t({
+                message: "No posts in this collection.",
+                comment: "@context: Empty state message",
+              })}
+            </p>
           ) : (
             <div class="flex flex-col divide-y">
               {posts.map((post) => (
@@ -150,7 +200,10 @@ function ViewCollectionContent({ collection, posts }: { collection: Collection;
                   <form method="post" action={`/dash/collections/${collection.id}/remove-post`}>
                     <input type="hidden" name="postId" value={post.id} />
                     <button type="submit" class="btn-sm-ghost text-destructive">
-                      {t({ message: "Remove", comment: "@context: Button to remove post from collection" })}
+                      {t({
+                        message: "Remove",
+                        comment: "@context: Button to remove post from collection",
+                      })}
                     </button>
                   </form>
                 </div>
@@ -174,16 +227,26 @@ function EditCollectionContent({ collection }: { collection: Collection }) {
 
   return (
     <>
-      <h1 class="text-2xl font-semibold mb-6">{t({ message: "Edit Collection", comment: "@context: Page heading" })}</h1>
-
-      <form method="post" action={`/dash/collections/${collection.id}`} class="flex flex-col gap-4 max-w-lg">
+      <h1 class="text-2xl font-semibold mb-6">
+        {t({ message: "Edit Collection", comment: "@context: Page heading" })}
+      </h1>
+
+      <form
+        method="post"
+        action={`/dash/collections/${collection.id}`}
+        class="flex flex-col gap-4 max-w-lg"
+      >
         <div class="field">
-          <label class="label">{t({ message: "Title", comment: "@context: Collection form field" })}</label>
+          <label class="label">
+            {t({ message: "Title", comment: "@context: Collection form field" })}
+          </label>
           <input type="text" name="title" class="input" required value={collection.title} />
         </div>
 
         <div class="field">
-          <label class="label">{t({ message: "Slug", comment: "@context: Collection form field" })}</label>
+          <label class="label">
+            {t({ message: "Slug", comment: "@context: Collection form field" })}
+          </label>
           <input
             type="text"
             name="path"
@@ -195,7 +258,9 @@ function EditCollectionContent({ collection }: { collection: Collection }) {
         </div>
 
         <div class="field">
-          <label class="label">{t({ message: "Description (optional)", comment: "@context: Collection form field" })}</label>
+          <label class="label">
+            {t({ message: "Description (optional)", comment: "@context: Collection form field" })}
+          </label>
           <textarea name="description" class="textarea" rows={3}>
             {collection.description ?? ""}
           </textarea>
@@ -203,7 +268,10 @@ function EditCollectionContent({ collection }: { collection: Collection }) {
 
         <div class="flex gap-2">
           <button type="submit" class="btn">
-            {t({ message: "Update Collection", comment: "@context: Button to save collection changes" })}
+            {t({
+              message: "Update Collection",
+              comment: "@context: Button to save collection changes",
+            })}
           </button>
           <a href={`/dash/collections/${collection.id}`} class="btn-outline">
             {t({ message: "Cancel", comment: "@context: Button to cancel form" })}
@@ -212,7 +280,10 @@ function EditCollectionContent({ collection }: { collection: Collection }) {
       </form>
 
       <DangerZone
-        actionLabel={t({ message: "Delete Collection", comment: "@context: Button to delete collection" })}
+        actionLabel={t({
+          message: "Delete Collection",
+          comment: "@context: Button to delete collection",
+        })}
         formAction={`/dash/collections/${collection.id}/delete`}
         confirmMessage="Are you sure you want to delete this collection?"
       />
@@ -289,7 +360,12 @@ collectionsRoutes.get("/:id/edit", async (c) => {
   const siteName = (await c.var.services.settings.get("SITE_NAME")) ?? "Jant";
 
   return c.html(
-    <DashLayout c={c} title={`Edit: ${collection.title}`} siteName={siteName} currentPath="/dash/collections">
+    <DashLayout
+      c={c}
+      title={`Edit: ${collection.title}`}
+      siteName={siteName}
+      currentPath="/dash/collections"
+    >
       <EditCollectionContent collection={collection} />
     </DashLayout>
   );

package/src/routes/dash/index.tsx

@@ -63,7 +63,10 @@ function DashboardContent({
       {/* ✅ Trans component with embedded JSX! */}
       <p>
         <Trans comment="@context: Help text with link">
-          Need help? Visit the <a href="/docs" class="underline">documentation</a>
+          Need help? Visit the{" "}
+          <a href="/docs" class="underline">
+            documentation
+          </a>
         </Trans>
       </p>
     </div>
@@ -80,10 +83,7 @@ dashIndexRoutes.get("/", async (c) => {
 
   return c.html(
     <DashLayout c={c} title="Dashboard" siteName={siteName} currentPath="/dash">
-      <DashboardContent
-        publishedCount={publishedPosts.length}
-        draftCount={draftPosts.length}
-      />
+      <DashboardContent publishedCount={publishedPosts.length} draftCount={draftPosts.length} />
     </DashLayout>
   );
 });