@jant/core 0.3.34 → 0.3.36

package/src/types/bindings.ts

@@ -27,6 +27,11 @@ export interface Bindings {
   S3_SECRET_ACCESS_KEY?: string;
   S3_REGION?: string;
   S3_PUBLIC_URL?: string;
+  // Upload
+  UPLOAD_MAX_FILE_SIZE?: string;
+  // Summary extraction
+  SUMMARY_MAX_PARAGRAPHS?: string;
+  SUMMARY_MAX_CHARS?: string;
   // RSS feed
   RSS_FEED_LIMIT?: string;
 }

package/src/types/config.ts

@@ -33,7 +33,7 @@ export const CONFIG_FIELDS = {
     envOnly: false,
   },
   HEADER_NAV_MAX_VISIBLE: {
-    defaultValue: "3",
+    defaultValue: "2",
     envOnly: false,
   },
 
@@ -98,6 +98,18 @@ export const CONFIG_FIELDS = {
     defaultValue: "",
     envOnly: true,
   },
+  UPLOAD_MAX_FILE_SIZE: {
+    defaultValue: "500",
+    envOnly: true,
+  },
+  SUMMARY_MAX_PARAGRAPHS: {
+    defaultValue: "5",
+    envOnly: true,
+  },
+  SUMMARY_MAX_CHARS: {
+    defaultValue: "500",
+    envOnly: true,
+  },
 
   // Internal settings (DB-only, not configurable via env or dashboard)
   THEME: {
@@ -195,6 +207,16 @@ export interface AppConfig {
   s3PublicUrl: string;
   imageTransformUrl: string;
 
+  // Upload (ENV only, parsed to number)
+  /** Max upload file size in MB. Defaults to 500. */
+  uploadMaxFileSize: number;
+
+  // Summary extraction (ENV only)
+  /** Max paragraphs to include in auto-extracted summary. Defaults to 5. */
+  summaryMaxParagraphs: number;
+  /** Max characters to include in auto-extracted summary. Defaults to 500. */
+  summaryMaxChars: number;
+
   // Pagination/Feed (ENV only, parsed to number)
   pageSize: number;
   rssFeedLimit: number;

package/src/types/constants.ts

@@ -8,6 +8,9 @@ export type Format = (typeof FORMATS)[number];
 export const STATUSES = ["draft", "published"] as const;
 export type Status = (typeof STATUSES)[number];
 
+export const VISIBILITIES = ["listed", "featured", "unlisted"] as const;
+export type Visibility = (typeof VISIBILITIES)[number];
+
 export const SORT_ORDERS = [
   "newest",
   "oldest",

package/src/types/entities.ts

@@ -2,13 +2,19 @@
  * Entity Types (database-level models)
  */
 
-import type { Format, Status, SortOrder, NavItemType } from "./constants.js";
+import type {
+  Format,
+  Status,
+  Visibility,
+  SortOrder,
+  NavItemType,
+} from "./constants.js";
 
 export interface Post {
   id: number;
   format: Format;
   status: Status;
-  featured: number; // 0 | 1
+  visibility: Visibility;
   pinned: number; // 0 | 1
   path: string | null;
   title: string | null;
@@ -16,6 +22,7 @@ export interface Post {
   body: string | null;
   bodyHtml: string | null;
   quoteText: string | null;
+  summary: string | null;
   rating: number | null;
   replyToId: number | null;
   threadId: number | null;

package/src/types/operations.ts

@@ -2,12 +2,18 @@
  * Operation Types (create/update DTOs)
  */
 
-import type { Format, Status, SortOrder, NavItemType } from "./constants.js";
+import type {
+  Format,
+  Status,
+  Visibility,
+  SortOrder,
+  NavItemType,
+} from "./constants.js";
 
 export interface CreatePost {
   format: Format;
   status?: Status;
-  featured?: boolean;
+  visibility?: Visibility;
   pinned?: boolean;
   path?: string;
   title?: string;
@@ -24,7 +30,7 @@ export interface CreatePost {
 export interface UpdatePost {
   format?: Format;
   status?: Status;
-  featured?: boolean;
+  visibility?: Visibility;
   pinned?: boolean;
   path?: string | null;
   title?: string | null;

package/src/types/props.ts

@@ -2,7 +2,7 @@
  * Page-Level Props & Feed Data Types
  */
 
-import type { Format } from "./constants.js";
+import type { Format, Visibility } from "./constants.js";
 import type { Collection } from "./entities.js";
 import type {
   PostView,
@@ -45,7 +45,7 @@ export interface ArchivePageProps {
   hasMore: boolean;
   nextCursor?: number;
   format?: Format;
-  featured?: boolean;
+  visibility?: Visibility;
 }
 
 /** Props for the search page component */
@@ -60,7 +60,7 @@ export interface SearchPageProps {
 /** Props for the single collection page component */
 export interface CollectionPageProps {
   collection: Collection;
-  posts: PostView[];
+  items: TimelineItemView[];
   hasMore: boolean;
   nextCursor?: number;
 }

package/src/types/views.ts

@@ -2,7 +2,7 @@
  * View Model Types (render-ready, for theme components)
  */
 
-import type { Format, Status, NavItemType } from "./constants.js";
+import type { Format, Status, Visibility, NavItemType } from "./constants.js";
 import type { Post, Collection } from "./entities.js";
 
 /**
@@ -35,7 +35,7 @@ export interface PostView {
   // Metadata
   format: Format;
   status: Status;
-  featured: boolean;
+  visibility: Visibility;
   pinned: boolean;
   rating?: number;
 
@@ -167,4 +167,5 @@ export interface SiteLayoutProps {
   showHeaderAvatar?: boolean;
   siteFooterHtml?: string;
   sidebar?: import("hono/jsx").Child;
+  uploadMaxFileSize?: number;
 }

package/src/ui/compose/ComposeDialog.tsx

@@ -15,9 +15,13 @@ import { useLingui } from "@lingui/react/macro";
 
 export interface ComposeDialogProps {
   collections?: Collection[];
+  uploadMaxFileSize?: number;
 }
 
-export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
+export const ComposeDialog: FC<ComposeDialogProps> = ({
+  collections,
+  uploadMaxFileSize,
+}) => {
   const { t } = useLingui();
 
   const labels = JSON.stringify({
@@ -90,9 +94,13 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
       message: "Media",
       comment: "@context: Compose toolbar - media tooltip",
     }),
-    score: t({
-      message: "Score",
-      comment: "@context: Compose toolbar - score tooltip",
+    rate: t({
+      message: "Rate",
+      comment: "@context: Compose toolbar - rate tooltip",
+    }),
+    emoji: t({
+      message: "Emoji",
+      comment: "@context: Compose toolbar - emoji picker tooltip",
     }),
     title: t({
       message: "Title",
@@ -107,7 +115,7 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
       comment: "@context: Compose collection combobox search placeholder",
     }),
     noCollections: t({
-      message: "No collections found.",
+      message: "No matching collections.",
       comment: "@context: Compose collection combobox empty state",
     }),
     post: t({
@@ -127,7 +135,7 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
       comment: "@context: Alt text textarea placeholder",
     }),
     altHint: t({
-      message: "Alt text improves accessibility",
+      message: "Helps screen readers describe the image",
       comment: "@context: Hint text in alt text panel",
     }),
     addMore: t({
@@ -142,6 +150,11 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
       message: "Published!",
       comment: "@context: Toast shown after successful deferred publish",
     }),
+    retryAll: t({
+      message: "Click to retry all",
+      comment:
+        "@context: Tooltip hint on failed upload overlay, tells user clicking retries all failed uploads",
+    }),
   }).replace(/</g, "\\u003c");
 
   const collectionsJson = JSON.stringify(
@@ -158,7 +171,11 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
       class="compose-dialog"
       onclick="event.target === this && this.close()"
     >
-      <jant-compose-dialog collections={collectionsJson} labels={labels}>
+      <jant-compose-dialog
+        collections={collectionsJson}
+        labels={labels}
+        upload-max-file-size={uploadMaxFileSize ?? 500}
+      >
         {/* SSR fallback skeleton */}
         <div class="compose-dialog-inner">
           <div class="compose-dialog-header" />

package/src/ui/dash/PageForm.tsx

@@ -31,6 +31,8 @@ export const PageForm: FC<PageFormProps> = ({
 
   return (
     <form
+      data-page-form
+      {...(isEdit ? { "data-page-edit": "" } : {})}
       data-signals={signals}
       data-on:submit__prevent={`@post('${action}')`}
       data-indicator="_loading"

package/src/ui/dash/PostList.tsx

@@ -22,11 +22,12 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
     return (
       <EmptyState
         message={t({
-          message: "No posts yet.",
+          message:
+            "Nothing published yet. Write your first post to get started.",
           comment: "@context: Empty state message when no posts exist",
         })}
         ctaText={t({
-          message: "Create your first post",
+          message: "Write your first post",
           comment: "@context: Button in empty state to create first post",
         })}
         ctaHref="/dash/posts/new"
@@ -53,8 +54,7 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
               })}
               deleteAction={`/dash/posts/${sqid.encode(post.id)}/delete`}
               deleteConfirm={t({
-                message:
-                  "Are you sure you want to delete this post? This cannot be undone.",
+                message: "Delete this post permanently? This can't be undone.",
                 comment:
                   "@context: Confirmation dialog when deleting a post from the list",
               })}
@@ -65,7 +65,7 @@ export const PostList: FC<PostListProps> = ({ posts }) => {
             <FormatBadge type={post.format} />
             <StatusBadge
               status={post.status}
-              featured={post.featured}
+              visibility={post.visibility}
               pinned={post.pinned}
             />
             <span class="text-xs text-muted-foreground">

package/src/ui/dash/StatusBadge.tsx

@@ -1,22 +1,22 @@
 /**
  * Status Badge Component
  *
- * Displays badges for post status, featured, and pinned state.
+ * Displays badges for post status, visibility, and pinned state.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { Status } from "../../types.js";
+import type { Status, Visibility } from "../../types.js";
 
 export interface StatusBadgeProps {
   status: Status;
-  featured?: boolean;
+  visibility?: Visibility;
   pinned?: boolean;
 }
 
 export const StatusBadge: FC<StatusBadgeProps> = ({
   status,
-  featured,
+  visibility,
   pinned,
 }) => {
   const { t } = useLingui();
@@ -40,7 +40,7 @@ export const StatusBadge: FC<StatusBadgeProps> = ({
   return (
     <span class="flex items-center gap-1">
       <span class={statusVariants[status]}>{statusLabels[status]}</span>
-      {featured && (
+      {visibility === "featured" && (
         <span class="badge-primary">
           {t({
             message: "Featured",
@@ -48,6 +48,14 @@ export const StatusBadge: FC<StatusBadgeProps> = ({
           })}
         </span>
       )}
+      {visibility === "unlisted" && (
+        <span class="badge-outline">
+          {t({
+            message: "Unlisted",
+            comment: "@context: Post badge - unlisted",
+          })}
+        </span>
+      )}
       {pinned && (
         <span class="badge-outline">
           {t({

package/src/ui/dash/appearance/AdvancedContent.tsx

@@ -3,7 +3,6 @@
  */
 
 import { useLingui } from "@lingui/react/macro";
-import { AppearanceNav } from "./AppearanceNav.js";
 
 export function AdvancedContent({ customCSS }: { customCSS: string }) {
   const { t } = useLingui();
@@ -11,67 +10,59 @@ export function AdvancedContent({ customCSS }: { customCSS: string }) {
   const cssSignals = JSON.stringify({ customCSS }).replace(/</g, "\\u003c");
 
   return (
-    <>
-      <AppearanceNav currentTab="advanced" />
-
-      <form
-        data-signals={cssSignals}
-        data-on:submit__prevent="@post('/dash/appearance/custom-css')"
-        data-indicator="_cssLoading"
-        class="max-w-3xl"
-      >
-        <fieldset>
-          <legend class="text-lg font-semibold">
-            {t({
-              message: "Custom CSS",
-              comment: "@context: Appearance settings heading for custom CSS",
-            })}
-          </legend>
-          <p class="text-sm text-muted-foreground mb-4">
-            {t({
-              message:
-                "Add custom CSS to override any styles. Use data attributes like [data-page], [data-post], [data-format] to target specific elements.",
-              comment: "@context: Custom CSS settings description",
-            })}
-          </p>
-          <textarea
-            data-bind="customCSS"
-            class="textarea font-mono text-sm min-h-32"
-            rows={8}
-            placeholder={t({
-              message: "/* Your custom CSS here */",
-              comment: "@context: Custom CSS textarea placeholder",
-            })}
-          >
-            {customCSS}
-          </textarea>
-        </fieldset>
-        <button
-          type="submit"
-          class="btn mt-4"
-          data-attr:disabled="$_cssLoading"
-        >
-          <svg
-            data-show="$_cssLoading"
-            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>
+    <form
+      data-signals={cssSignals}
+      data-on:submit__prevent="@post('/dash/settings/custom-css')"
+      data-indicator="_cssLoading"
+      class="max-w-3xl"
+    >
+      <fieldset>
+        <legend class="text-lg font-semibold">
+          {t({
+            message: "Custom CSS",
+            comment: "@context: Appearance settings heading for custom CSS",
+          })}
+        </legend>
+        <p class="text-sm text-muted-foreground mb-4">
           {t({
-            message: "Save CSS",
-            comment: "@context: Button to save custom CSS",
+            message:
+              "Add custom CSS to override any styles. Use data attributes like [data-page], [data-post], [data-format] to target specific elements.",
+            comment: "@context: Custom CSS settings description",
           })}
-        </button>
-      </form>
-    </>
+        </p>
+        <textarea
+          data-bind="customCSS"
+          class="textarea font-mono text-sm min-h-32"
+          rows={8}
+          placeholder={t({
+            message: "/* Your custom CSS here */",
+            comment: "@context: Custom CSS textarea placeholder",
+          })}
+        >
+          {customCSS}
+        </textarea>
+      </fieldset>
+      <button type="submit" class="btn mt-4" data-attr:disabled="$_cssLoading">
+        <svg
+          data-show="$_cssLoading"
+          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: "Save CSS",
+          comment: "@context: Button to save custom CSS",
+        })}
+      </button>
+    </form>
   );
 }

package/src/ui/dash/appearance/ColorThemeContent.tsx

@@ -4,7 +4,6 @@
 
 import { useLingui } from "@lingui/react/macro";
 import type { ColorTheme } from "../../color-themes.js";
-import { AppearanceNav } from "./AppearanceNav.js";
 
 function ThemeCard({
   theme,
@@ -87,40 +86,36 @@ export function ColorThemeContent({
   );
 
   return (
-    <>
-      <AppearanceNav currentTab="color" />
-
-      <div
-        data-signals={themeSignals}
-        data-on:change="@post('/dash/appearance/color')"
-        class="max-w-3xl"
-      >
-        <fieldset>
-          <legend class="text-lg font-semibold">
-            {t({
-              message: "Color theme",
-              comment: "@context: Appearance settings heading",
-            })}
-          </legend>
-          <p class="text-sm text-muted-foreground mb-4">
-            {t({
-              message:
-                "This will theme both your site and your dashboard. All color themes support dark mode.",
-              comment: "@context: Appearance settings description",
-            })}
-          </p>
+    <div
+      data-signals={themeSignals}
+      data-on:change="@post('/dash/settings/color-theme')"
+      class="max-w-3xl"
+    >
+      <fieldset>
+        <legend class="text-lg font-semibold">
+          {t({
+            message: "Color theme",
+            comment: "@context: Appearance settings heading",
+          })}
+        </legend>
+        <p class="text-sm text-muted-foreground mb-4">
+          {t({
+            message:
+              "This will theme both your site and your dashboard. All color themes support dark mode.",
+            comment: "@context: Appearance settings description",
+          })}
+        </p>
 
-          <div class="flex flex-col gap-4">
-            {themes.map((theme) => (
-              <ThemeCard
-                key={theme.id}
-                theme={theme}
-                selected={theme.id === currentThemeId}
-              />
-            ))}
-          </div>
-        </fieldset>
-      </div>
-    </>
+        <div class="flex flex-col gap-4">
+          {themes.map((theme) => (
+            <ThemeCard
+              key={theme.id}
+              theme={theme}
+              selected={theme.id === currentThemeId}
+            />
+          ))}
+        </div>
+      </fieldset>
+    </div>
   );
 }