@jant/core 0.3.31 → 0.3.33

package/src/styles/ui.css

@@ -49,7 +49,7 @@
 
   .site-header-top-bordered {
     padding-bottom: 12px;
-    border-bottom: 0.5px solid var(--site-divider);
+    /* border-bottom: 0.5px solid var(--site-divider); */
   }
 
   .site-header-right {
@@ -130,42 +130,73 @@
     color: var(--site-text-primary);
   }
 
-  .site-description {
-    font-size: var(--text-sm);
+  /* --- "More" overflow dropdown for > 4 nav links ----------------------- */
+
+  .site-header-more-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 999px;
+    border: none;
+    background: none;
     color: var(--site-text-secondary);
-    margin: 2px 0 0;
-    line-height: var(--leading);
+    cursor: pointer;
+    transition:
+      color 0.15s,
+      background-color 0.15s;
+  }
+
+  .site-header-more-btn:hover {
+    color: var(--site-text-primary);
+    background-color: var(--site-nav-hover-bg);
+  }
+
+  .site-header-more [data-popover] {
+    min-width: 170px;
   }
 
   /* --- Browse filter tabs ------------------------------------------------- */
 
   .site-browse-nav {
     display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 16px 0 var(--space-xl);
+    align-items: baseline;
+    gap: 10px;
+    padding: 16px 0;
   }
 
   .site-browse-sep {
-    color: var(--site-divider);
     font-size: var(--text-sm);
+    color: var(--site-text-primary);
+    opacity: 0.15;
+    user-select: none;
   }
 
   .site-browse-link {
     font-size: var(--text-base);
-    color: var(--site-text-secondary);
+    font-weight: 400;
+    color: var(--site-text-primary);
     text-decoration: none;
-    font-weight: 500;
-    transition: color 0.15s;
+    opacity: 0.28;
+    transition: opacity 0.2s ease;
   }
 
   .site-browse-link:hover {
-    color: var(--site-text-primary);
+    opacity: 0.55;
   }
 
   .site-browse-link-active {
-    color: var(--site-text-primary);
-    font-weight: 700;
+    opacity: 1;
+    font-weight: 500;
+  }
+
+  /* --- Home header wrapper (compose-prompt + browse-nav) ------------------ */
+
+  .site-home-header {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--space-xl);
   }
 
   /* --- Main content area -------------------------------------------------- */
@@ -177,7 +208,7 @@
 
   .site-content {
     background-color: var(--site-elevated-bg);
-    padding: 0 var(--site-padding);
+    padding: 0px var(--site-padding) var(--space-xl);
   }
 
   /* --- Sidebar layout (shared by dashboard and site sidebar pages) ------- */
@@ -311,7 +342,13 @@
     align-items: center;
     gap: 12px;
     padding: 16px 0;
-    margin: -20px 0 12px;
+    margin: 10px 0;
+    border-bottom: 0.5px solid oklch(from var(--site-divider) l c h / 0.5);
+    transition: border-color 0.15s;
+  }
+
+  .compose-prompt:hover {
+    border-bottom-color: var(--site-divider);
   }
 
   .compose-prompt-trigger {
@@ -322,26 +359,28 @@
     min-width: 0;
     padding: 0;
     border: none;
+    outline: none;
     background: none;
     cursor: pointer;
     text-align: left;
+    color: var(--site-text-primary);
+    opacity: 0.5;
+    transition: opacity 0.15s;
+  }
+
+  .compose-prompt-trigger:hover {
+    opacity: 0.7;
   }
 
   .compose-prompt-avatar {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--avatar-size);
-    height: var(--avatar-size);
     flex-shrink: 0;
-    border-radius: var(--avatar-radius);
-    border: 1.5px solid var(--site-column-outline);
-    color: var(--site-text-secondary);
   }
 
   .compose-prompt-text {
     font-size: var(--text-base);
-    color: var(--site-text-secondary);
   }
 
   .compose-prompt-post-btn {
@@ -396,8 +435,9 @@
     --compose-margin-top: max(80px, 10vh);
 
     padding: 0;
+    outline: none;
     border: none;
-    border-radius: 20px;
+    border-radius: 10px;
     width: calc(100% - 20px);
     max-width: calc(var(--site-width) - var(--site-padding) * 2 - 20px);
     max-height: calc(100dvh - var(--compose-margin-top) - 20px);
@@ -1296,9 +1336,13 @@
   .site-footer {
     max-width: var(--site-width);
     margin: var(--space-xl) auto 0;
-    padding: var(--content-gap) var(--site-padding) var(--space-xl);
-    border-top: 0.5px solid var(--site-divider);
+    padding: 0 var(--site-padding) var(--space-xl);
     color: var(--site-text-secondary);
     font-size: var(--text-sm);
   }
+
+  .site-footer > .site-container {
+    border-top: 0.5px solid var(--site-divider);
+    padding-top: var(--content-gap);
+  }
 }

package/src/types/bindings.ts

@@ -15,6 +15,7 @@ export interface Bindings {
   // Timeline
   PAGE_SIZE?: string;
   // Site configuration (optional - can be overridden in DB)
+  HEADER_NAV_MAX_VISIBLE?: string;
   SITE_NAME?: string;
   SITE_DESCRIPTION?: string;
   SITE_LANGUAGE?: string;

package/src/types/config.ts

@@ -21,7 +21,7 @@ export const CONFIG_FIELDS = {
     envOnly: false,
   },
   SITE_DESCRIPTION: {
-    defaultValue: "A microblog powered by Jant",
+    defaultValue: "Thoughts, links, and quotes — one post at a time",
     envOnly: false,
   },
   SITE_LANGUAGE: {
@@ -32,10 +32,14 @@ export const CONFIG_FIELDS = {
     defaultValue: "latest",
     envOnly: false,
   },
+  HEADER_NAV_MAX_VISIBLE: {
+    defaultValue: "3",
+    envOnly: false,
+  },
 
   // Environment-only (deployment/infrastructure config)
   DEFAULT_THEME: {
-    defaultValue: "halloween",
+    defaultValue: "notepad",
     envOnly: true,
   },
   SITE_URL: {
@@ -176,6 +180,7 @@ export interface AppConfig {
   siteDescriptionExplicit: boolean;
   siteLanguage: string;
   homeDefaultView: string;
+  headerNavMaxVisible: number;
   timeZone: string;
   siteFooter: string;
   noindex: boolean;

package/src/types/constants.ts

@@ -16,9 +16,17 @@ export const SORT_ORDERS = [
 ] as const;
 export type SortOrder = (typeof SORT_ORDERS)[number];
 
-export const NAV_ITEM_TYPES = ["page", "link"] as const;
+export const NAV_ITEM_TYPES = ["page", "link", "system"] as const;
 export type NavItemType = (typeof NAV_ITEM_TYPES)[number];
 
+export const SYSTEM_NAV_KEYS = {
+  rss: { defaultLabel: "RSS", url: "/feed" },
+  dashboard: { defaultLabel: "Dashboard", url: "/dash" },
+  collections: { defaultLabel: "Collections", url: "/collections" },
+  archive: { defaultLabel: "Archive", url: "/archive" },
+} as const;
+export type SystemNavKey = keyof typeof SYSTEM_NAV_KEYS;
+
 export const MAX_MEDIA_ATTACHMENTS = 20;
 export const MAX_PINNED_POSTS = 3;
 

package/src/types/sortablejs.d.ts

@@ -1,14 +1,20 @@
 /**
  * Minimal type declarations for sortablejs
  *
- * Only covers the API surface used by nav-reorder.ts.
+ * Only covers the API surface used by jant-nav-manager and collections-reorder.
  */
 
 declare module "sortablejs" {
+  interface SortableEvent {
+    oldIndex?: number;
+    newIndex?: number;
+    item: HTMLElement;
+  }
+
   interface SortableOptions {
     animation?: number;
     handle?: string;
-    onEnd?: (event: { oldIndex?: number; newIndex?: number }) => void;
+    onEnd?: (event: SortableEvent) => void;
   }
 
   interface SortableInstance {

package/src/types/views.ts

@@ -157,12 +157,12 @@ export interface ArchiveGroup {
  */
 export interface SiteLayoutProps {
   siteName: string;
-  siteDescription?: string;
   links: NavItemView[];
   currentPath: string;
   isAuthenticated?: boolean;
   collections?: Collection[];
   homeDefaultView?: string;
+  headerNavMaxVisible?: number;
   siteAvatarUrl?: string;
   showHeaderAvatar?: boolean;
   siteFooterHtml?: string;

package/src/ui/color-themes.ts

@@ -118,6 +118,37 @@ function defineTheme(opts: {
 }
 
 export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
+  defineTheme({
+    id: "notepad",
+    name: "Notepad",
+    preview: {
+      lightBg: "#fdfce8",
+      lightText: "#333333",
+      lightLink: "#2060b8",
+      darkBg: "#2a291a",
+      darkText: "#d2d2b8",
+      darkLink: "#6695cc",
+    },
+    light: {
+      bg: "oklch(0.985 0.018 95)",
+      fg: "oklch(0.27 0 0)",
+      primary: "oklch(0.5 0.17 260)",
+      primaryFg: "oklch(0.985 0.01 95)",
+      muted: "oklch(0.94 0.022 95)",
+      mutedFg: "oklch(0.52 0 0)",
+      border: "oklch(0.88 0.025 95)",
+    },
+    dark: {
+      bg: "oklch(0.2 0.02 90)",
+      fg: "oklch(0.87 0.015 95)",
+      primary: "oklch(0.65 0.14 260)",
+      primaryFg: "oklch(0.98 0.01 95)",
+      muted: "oklch(0.26 0.018 90)",
+      mutedFg: "oklch(0.62 0.012 95)",
+      border: "oklch(0.32 0.018 90)",
+    },
+  }),
+
   defineTheme({
     id: "halloween",
     name: "Halloween",
@@ -257,37 +288,6 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
     },
   }),
 
-  defineTheme({
-    id: "notepad",
-    name: "Notepad",
-    preview: {
-      lightBg: "#fdfce8",
-      lightText: "#333333",
-      lightLink: "#2060b8",
-      darkBg: "#2a291a",
-      darkText: "#d2d2b8",
-      darkLink: "#6695cc",
-    },
-    light: {
-      bg: "oklch(0.985 0.018 95)",
-      fg: "oklch(0.27 0 0)",
-      primary: "oklch(0.5 0.17 260)",
-      primaryFg: "oklch(0.985 0.01 95)",
-      muted: "oklch(0.94 0.022 95)",
-      mutedFg: "oklch(0.52 0 0)",
-      border: "oklch(0.88 0.025 95)",
-    },
-    dark: {
-      bg: "oklch(0.2 0.02 90)",
-      fg: "oklch(0.87 0.015 95)",
-      primary: "oklch(0.65 0.14 260)",
-      primaryFg: "oklch(0.98 0.01 95)",
-      muted: "oklch(0.26 0.018 90)",
-      mutedFg: "oklch(0.62 0.012 95)",
-      border: "oklch(0.32 0.018 90)",
-    },
-  }),
-
   defineTheme({
     id: "sonnet",
     name: "Sonnet",

package/src/ui/components/__tests__/jant-settings-avatar.test.ts

@@ -33,9 +33,6 @@ const labels: SettingsLabels = {
   aboutBlog: "About this blog",
   aboutBlogHelp: "Displayed above your blog posts.",
   language: "Language",
-  defaultHomepageView: "Default Homepage View",
-  latest: "Latest",
-  featured: "Featured",
   timeZone: "Time Zone",
   siteFooter: "Site Footer",
   markdownSupported: "Markdown supported",

package/src/ui/components/__tests__/jant-settings-general.test.ts

@@ -34,9 +34,6 @@ const labels: SettingsLabels = {
   aboutBlog: "About this blog",
   aboutBlogHelp: "Displayed above your blog posts.",
   language: "Language",
-  defaultHomepageView: "Default Homepage View",
-  latest: "Latest",
-  featured: "Featured",
   timeZone: "Time Zone",
   siteFooter: "Site Footer",
   footerHelp: "Displayed at the bottom of posts.",
@@ -61,7 +58,6 @@ const initialData = {
   siteName: "My Blog",
   siteDescription: "A test blog",
   siteLanguage: "en",
-  homeDefaultView: "latest",
   timeZone: "UTC",
   siteFooter: "Footer text",
   noindex: false,
@@ -112,8 +108,8 @@ describe("JantSettingsGeneral", () => {
   it("renders timezone options", async () => {
     const el = await createElement();
     const selects = el.querySelectorAll("select");
-    // Third select is timezone (language, homepage view, timezone)
-    const tzSelect = selects[2];
+    // Second select is timezone (language, timezone)
+    const tzSelect = selects[1];
     const options = tzSelect?.querySelectorAll("option");
     expect(options?.length).toBe(2);
     expect(options?.[0]?.value).toBe("UTC");

package/src/ui/components/jant-compose-dialog.ts

@@ -246,6 +246,7 @@ export class JantComposeDialog extends LitElement {
             @click=${() => this._submit("draft")}
           >
             <svg
+              class="icon-fine"
               width="18"
               height="18"
               viewBox="0 0 18 18"
@@ -363,7 +364,7 @@ export class JantComposeDialog extends LitElement {
               stroke-width="1.4"
               stroke-linecap="round"
               stroke-linejoin="round"
-              class="shrink-0"
+              class="shrink-0 icon-fine"
             >
               <rect x="3" y="5" width="12" height="10" rx="2" />
               <path d="M6 5V4a1 1 0 011-1h4a1 1 0 011 1v1" />
@@ -382,7 +383,7 @@ export class JantComposeDialog extends LitElement {
               stroke-width="1.4"
               stroke-linecap="round"
               stroke-linejoin="round"
-              class="shrink-0 opacity-50"
+              class="shrink-0 opacity-50 icon-fine"
             >
               <path d="M3 4l2 2 2-2" />
             </svg>

package/src/ui/components/jant-compose-editor.ts

@@ -235,6 +235,15 @@ export class JantComposeEditor extends LitElement {
     const attachment = this._attachments[index];
     if (attachment) {
       URL.revokeObjectURL(attachment.previewUrl);
+      this.dispatchEvent(
+        new CustomEvent("jant:attachment-removed", {
+          bubbles: true,
+          detail: {
+            clientId: attachment.clientId,
+            mediaId: attachment.mediaId,
+          },
+        }),
+      );
     }
     this._attachments = this._attachments.filter((_, i) => i !== index);
     // Close alt panel if it was showing the removed item
@@ -420,7 +429,7 @@ export class JantComposeEditor extends LitElement {
           stroke="currentColor"
           stroke-width="1.3"
           stroke-linecap="round"
-          class="text-muted-foreground"
+          class="text-muted-foreground icon-fine"
         >
           <rect x="3" y="2" width="12" height="14" rx="2" />
           <line x1="6" y1="6" x2="12" y2="6" />
@@ -461,6 +470,7 @@ export class JantComposeEditor extends LitElement {
             }}
           >
             <svg
+              class="icon-fine"
               width="16"
               height="16"
               viewBox="0 0 16 16"
@@ -527,6 +537,7 @@ export class JantComposeEditor extends LitElement {
             @click=${() => this._closeAltPanel()}
           >
             <svg
+              class="icon-fine"
               width="16"
               height="16"
               viewBox="0 0 16 16"
@@ -599,7 +610,7 @@ export class JantComposeEditor extends LitElement {
                           viewBox="0 0 24 24"
                           fill="none"
                           stroke="currentColor"
-                          stroke-width="2.5"
+                          style="stroke-width: 2.5"
                           stroke-linecap="round"
                         >
                           <path d="M21 12a9 9 0 1 1-6.219-8.56" />
@@ -613,6 +624,7 @@ export class JantComposeEditor extends LitElement {
                         class="compose-attachment-overlay compose-attachment-error"
                       >
                         <svg
+                          class="icon-fine"
                           width="16"
                           height="16"
                           viewBox="0 0 16 16"
@@ -666,6 +678,7 @@ export class JantComposeEditor extends LitElement {
           @click=${() => this._openFilePicker()}
         >
           <svg
+            class="icon-fine"
             width="18"
             height="18"
             viewBox="0 0 18 18"
@@ -697,6 +710,7 @@ export class JantComposeEditor extends LitElement {
           @click=${() => this._openAttachedText()}
         >
           <svg
+            class="icon-fine"
             width="18"
             height="18"
             viewBox="0 0 18 18"
@@ -725,6 +739,7 @@ export class JantComposeEditor extends LitElement {
           }}
         >
           <svg
+            class="icon-fine"
             width="18"
             height="18"
             viewBox="0 0 18 18"