@jant/core 0.6.11 → 0.6.13

package/src/styles/ui.css

@@ -2237,13 +2237,13 @@
   }
 
   .post-header-block {
-    margin-bottom: 1.5rem;
+    margin-bottom: 1.7rem;
   }
 
   .post-header-block-detail {
     display: flex;
     flex-direction: column;
-    gap: 0.55rem;
+    gap: 0.7rem;
   }
 
   .post-header-block .feed-link-title,
@@ -2944,8 +2944,8 @@
     padding-left: 0;
     font-family: var(--font-serif);
     color: var(--site-text-primary);
-    font-size: var(--type-content-subtitle);
-    line-height: var(--type-heading-leading);
+    font-size: var(--type-content-quote);
+    line-height: var(--type-content-quote-leading);
     white-space: pre-line;
     text-wrap: pretty;
   }
@@ -4535,6 +4535,7 @@
     --compose-title-input-size: var(--type-content-subtitle);
     --compose-title-input-leading: var(--type-display-leading);
     --compose-quote-input-size: var(--type-content-subtitle);
+    --compose-quote-input-leading: 1.32;
     --compose-inline-input-size: var(--type-ui-input);
     --compose-panel-label-size: var(--type-ui-control);
     --compose-panel-hint-size: var(--type-ui-hint);
@@ -5201,7 +5202,7 @@
     font-size: var(--compose-quote-input-size);
     font-style: normal;
     font-weight: var(--fw-regular);
-    line-height: 1.32;
+    line-height: var(--compose-quote-input-leading);
     letter-spacing: -0.02em;
     min-height: 9rem;
     padding-top: 0.5rem;
@@ -7007,6 +7008,14 @@
     max-width: 100%;
   }
 
+  .compose-attachment:has(.compose-attachment-preview-fallback) {
+    width: 112px;
+  }
+
+  .compose-attachment:only-child:has(.compose-attachment-preview-fallback) {
+    width: min(100%, 160px);
+  }
+
   .compose-attachment-thumb {
     position: relative;
     border-radius: var(--media-radius, 0.5rem);
@@ -7014,6 +7023,13 @@
     background-color: var(--site-nav-hover-bg);
   }
 
+  .compose-attachment:has(.compose-attachment-preview-fallback)
+    .compose-attachment-thumb,
+  .compose-attachment:has(.compose-attachment-preview-fallback)
+    .compose-attachment-sortable {
+    width: 100%;
+  }
+
   .compose-attachment-sortable {
     display: block;
     cursor: grab;
@@ -7064,8 +7080,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 120px;
-    aspect-ratio: 1 / 1;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    padding: 10px;
     border: 1px solid color-mix(in srgb, var(--site-divider) 88%, transparent);
     border-radius: var(--media-radius, 0.5rem);
     background: linear-gradient(
@@ -7077,9 +7096,24 @@
   }
 
   .compose-attachment-preview-fallback svg {
+    width: 24px;
+    height: 24px;
     opacity: 0.82;
   }
 
+  .compose-attachment-preview-fallback-label {
+    max-width: 100%;
+    overflow: hidden;
+    color: var(--site-text-secondary);
+    font-family: var(--font-ui);
+    font-size: var(--type-2xs);
+    font-weight: var(--fw-medium);
+    line-height: 1.2;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   /* Single image: constrain to container width. min-width keeps the preview
      wide enough for the remove button; a very long image overflows it and is
      cropped from the top (object-fit: cover) instead of shrinking to a sliver. */
@@ -7092,8 +7126,7 @@
   }
 
   .compose-attachment:only-child .compose-attachment-preview-fallback {
-    width: min(100%, 320px);
-    max-width: 100%;
+    width: 100%;
     aspect-ratio: 4 / 3;
   }
 
@@ -7106,8 +7139,13 @@
   }
 
   .compose-attachment:not(:only-child) .compose-attachment-preview-fallback {
-    width: 150px;
-    aspect-ratio: 3 / 4;
+    width: 100%;
+    aspect-ratio: 4 / 3;
+  }
+
+  .compose-attachment:only-child .compose-attachment-preview-fallback svg {
+    width: 28px;
+    height: 28px;
   }
 
   .compose-attachment-overlay {
@@ -7196,6 +7234,14 @@
       box-shadow 0.18s ease;
   }
 
+  .compose-attachment:has(.compose-attachment-preview-fallback)
+    .compose-attachment-remove {
+    top: 5px;
+    right: 5px;
+    width: 24px;
+    height: 24px;
+  }
+
   .compose-attachment-remove:hover {
     transform: translateY(-0.5px);
     background-color: color-mix(in srgb, black 58%, transparent);
@@ -7221,6 +7267,13 @@
     pointer-events: none;
   }
 
+  .compose-attachment:has(.compose-attachment-preview-fallback)
+    .compose-attachment-remove
+    svg {
+    width: 12px;
+    height: 12px;
+  }
+
   .compose-attachment-alt {
     border: none;
     background: transparent;
@@ -7428,6 +7481,53 @@
     position: relative;
   }
 
+  .compose-reply-compose-layout {
+    --compose-title-input-size: var(--type-content-subtitle);
+    --compose-title-input-leading: 1.35;
+    --compose-quote-input-size: calc(var(--type-content-body) * 1.06);
+    --compose-quote-input-leading: 1.42;
+    --compose-inline-input-size: var(--type-base);
+  }
+
+  .compose-reply-compose-layout .compose-quote-wrap {
+    margin-top: 0.4rem;
+    padding: 24px 18px 18px;
+    border-radius: 0.95rem;
+  }
+
+  .compose-reply-compose-layout .compose-link-url-wrap {
+    margin-top: 0.4rem;
+  }
+
+  .compose-reply-compose-layout .compose-quote-mark {
+    top: 0.58rem;
+    left: 0.9rem;
+    width: 1.55rem;
+  }
+
+  .compose-reply-compose-layout .compose-quote-text {
+    min-height: 6.5rem;
+    padding-top: 0.35rem;
+  }
+
+  @media (min-width: 700px) {
+    .compose-reply-compose-layout .compose-quote-wrap {
+      padding: 25px 20px 18px;
+      border-radius: 1rem;
+    }
+
+    .compose-reply-compose-layout .compose-quote-mark {
+      top: 0.62rem;
+      left: 1rem;
+      width: 1.6rem;
+    }
+
+    .compose-reply-compose-layout .compose-quote-text {
+      min-height: 6.5rem;
+      padding-top: 0.35rem;
+    }
+  }
+
   /* Continuous vertical line through the rail */
   .compose-thread-layout::before {
     content: "";
@@ -7490,6 +7590,92 @@
     background: transparent;
   }
 
+  .compose-reply-compose-layout .compose-editor-row .compose-attachments-dock {
+    --compose-reply-attachment-width: 96px;
+    --compose-reply-attachment-height: 72px;
+
+    max-height: min(116px, 18dvh);
+    padding-block: 4px 2px;
+  }
+
+  .compose-reply-compose-layout .compose-editor-row .compose-attachments {
+    gap: 6px;
+    padding-block: 0;
+  }
+
+  .compose-reply-compose-layout .compose-editor-row .compose-attachment {
+    gap: 2px;
+    max-width: none;
+  }
+
+  .compose-reply-compose-layout
+    .compose-editor-row
+    .compose-attachment:has(.compose-attachment-preview-fallback) {
+    width: var(--compose-reply-attachment-width);
+  }
+
+  .compose-reply-compose-layout
+    .compose-editor-row
+    .compose-attachment:only-child
+    .compose-attachment-img,
+  .compose-reply-compose-layout
+    .compose-editor-row
+    .compose-attachment:not(:only-child)
+    .compose-attachment-img {
+    width: var(--compose-reply-attachment-width);
+    height: var(--compose-reply-attachment-height);
+    min-width: 0;
+    max-width: var(--compose-reply-attachment-width);
+    max-height: var(--compose-reply-attachment-height);
+    object-fit: cover;
+    object-position: center;
+  }
+
+  .compose-reply-compose-layout
+    .compose-editor-row
+    .compose-attachment-preview-fallback,
+  .compose-reply-compose-layout
+    .compose-editor-row
+    .compose-attachment-processing {
+    width: var(--compose-reply-attachment-width);
+    height: var(--compose-reply-attachment-height);
+    aspect-ratio: auto;
+  }
+
+  .compose-reply-compose-layout
+    .compose-editor-row
+    .compose-attachment-preview-fallback
+    svg {
+    width: 28px;
+    height: 28px;
+  }
+
+  .compose-reply-compose-layout
+    .compose-editor-row
+    .compose-attachment-file-card,
+  .compose-reply-compose-layout
+    .compose-editor-row
+    .compose-attachment:not(:only-child)
+    .compose-attachment-file-card {
+    width: 112px;
+    height: var(--compose-reply-attachment-height);
+    gap: 4px;
+    padding: 8px 10px;
+  }
+
+  .compose-reply-compose-layout .compose-editor-row .compose-attachment-alt {
+    padding: 1px 3px;
+    font-size: var(--type-ui-micro);
+    line-height: 1.2;
+  }
+
+  .compose-reply-compose-layout .compose-editor-row .compose-attachment-remove {
+    top: 4px;
+    right: 4px;
+    width: 20px;
+    height: 20px;
+  }
+
   /* Dot marker for thread positions */
   .compose-thread-dot {
     width: var(--site-thread-marker-size);
@@ -7977,6 +8163,10 @@
     padding-top: 8px;
   }
 
+  .compose-reply-compose-layout .compose-thread-post-header + .compose-body {
+    padding-top: 12px;
+  }
+
   /* Thread format selector: pill-tag style (lighter than the main segmented) */
   .compose-thread-segmented {
     background: transparent;
@@ -8700,6 +8890,11 @@
     font-family: var(--font-body);
   }
 
+  .compose-reply-compose-layout .compose-tiptap-body .tiptap {
+    font-size: var(--type-content-body);
+    line-height: var(--type-body-leading);
+  }
+
   .compose-tiptap-thoughts .tiptap {
     min-height: 72px;
   }
@@ -8738,23 +8933,36 @@
 
   .compose-tiptap-body .tiptap h2 {
     font-size: var(--type-content-title);
-    font-style: italic;
     margin-top: 2.1rem;
     margin-bottom: 1.4rem;
   }
 
   .compose-tiptap-body .tiptap h3 {
     font-size: var(--type-content-subtitle);
-    font-style: italic;
     margin-top: 2rem;
     margin-bottom: 1.4rem;
   }
 
+  .compose-reply-compose-layout
+    .compose-tiptap-body
+    .tiptap
+    :is(h1, h2, h3, h4) {
+    font-size: var(--type-secondary);
+    line-height: 1.32;
+    margin-top: 1.4rem;
+    margin-bottom: 0.75rem;
+  }
+
   .compose-tiptap-body .tiptap p {
     margin-top: 1.4rem;
     margin-bottom: 1.4rem;
   }
 
+  .compose-reply-compose-layout .compose-tiptap-body .tiptap p {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
   /* In inline-format compose (reply / edit-reply / thread — the editors wrapped
      in .compose-editor-row), the format header sits right above the body, so the
      first block's 1.4rem top margin reads as a gap between the format pills and
@@ -8952,6 +9160,134 @@
     display: block;
   }
 
+  .tiptap-image-figure[data-load-state="missing"] img {
+    display: none;
+  }
+
+  .tiptap-image-missing {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    gap: 14px;
+    min-height: clamp(132px, 26vw, 220px);
+    padding: 18px;
+    border-radius: 4px;
+    background: linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--site-elevated-bg) 88%, var(--site-accent)),
+      var(--site-elevated-bg)
+    );
+    color: var(--site-text-secondary);
+    text-align: left;
+  }
+
+  .tiptap-image-figure[data-load-state="missing"] .tiptap-image-missing {
+    display: flex;
+  }
+
+  .tiptap-image-missing:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 3px;
+  }
+
+  .tiptap-image-missing-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
+    border-radius: 999px;
+    border: 1px solid var(--site-divider);
+    background: var(--compose-paper-bg);
+    color: var(--site-text-secondary);
+    flex-shrink: 0;
+  }
+
+  .tiptap-image-missing-copy {
+    display: grid;
+    gap: 3px;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .tiptap-image-missing-copy strong {
+    color: var(--site-text-primary);
+    font-family: var(--font-ui);
+    font-size: var(--type-sm);
+    line-height: 1.2;
+  }
+
+  .tiptap-image-missing-source {
+    max-width: 100%;
+    overflow: hidden;
+    color: var(--site-text-secondary);
+    font-family: var(--font-mono);
+    font-size: var(--type-2xs);
+    line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tiptap-image-missing-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    flex: 0 0 auto;
+  }
+
+  .tiptap-image-missing-actions button {
+    border: 1px solid var(--site-divider);
+    border-radius: 5px;
+    padding: 5px 8px;
+    background: var(--compose-paper-bg);
+    color: var(--site-text-primary);
+    font-family: var(--font-ui);
+    font-size: var(--type-2xs);
+    line-height: 1.2;
+    cursor: pointer;
+    transition:
+      border-color 0.16s ease,
+      color 0.16s ease,
+      background-color 0.16s ease;
+  }
+
+  .tiptap-image-missing-actions button:hover {
+    border-color: color-mix(
+      in srgb,
+      var(--site-accent) 45%,
+      var(--site-divider)
+    );
+    color: var(--site-accent);
+  }
+
+  .tiptap-image-missing-actions button:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  .tiptap-image-missing-actions button:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
+  .tiptap-image-missing-delete {
+    color: var(--destructive);
+  }
+
+  @media (max-width: 640px) {
+    .tiptap-image-missing {
+      align-items: stretch;
+      flex-direction: column;
+    }
+
+    .tiptap-image-missing-actions,
+    .tiptap-image-missing-actions button {
+      width: 100%;
+    }
+  }
+
   /* Layout variants — in compact dialog, wide/full just fill the container */
   .tiptap-image-figure[data-layout="wide"],
   .tiptap-image-figure[data-layout="full"] {

package/src/types/bindings.ts

@@ -36,7 +36,6 @@ export interface Bindings {
   SITE_DESCRIPTION?: EnvBindingValue;
   SITE_LANGUAGE?: EnvBindingValue;
   DASHBOARD_LANGUAGE?: EnvBindingValue;
-  HOME_DEFAULT_VIEW?: EnvBindingValue;
   MAIN_RSS_FEED?: EnvBindingValue;
   TIME_ZONE?: EnvBindingValue;
   SITE_FOOTER?: EnvBindingValue;

package/src/types/config.ts

@@ -4,6 +4,8 @@
  * Single Source of Truth for all configuration fields.
  */
 
+import type { FeedKind } from "./constants.js";
+
 /**
  * Configuration Registry - Single Source of Truth
  *
@@ -53,11 +55,6 @@ export const CONFIG_FIELDS = {
     envOnly: false,
     envKeys: ["CJK_SERIF_FONT"],
   },
-  HOME_DEFAULT_VIEW: {
-    defaultValue: "latest",
-    envOnly: false,
-    envKeys: ["HOME_DEFAULT_VIEW"],
-  },
   MAIN_RSS_FEED: {
     defaultValue: "featured",
     envOnly: false,
@@ -470,8 +467,7 @@ export interface AppConfig {
   dashboardLanguage: string;
   /** CJK serif font locale: "off", "zh-Hans", "zh-Hant", "ja", or "ko" */
   cjkSerifFont: string;
-  homeDefaultView: string;
-  mainRssFeed: string;
+  mainRssFeed: FeedKind;
   /** Canonical IANA timezone identifier used for date/time display. */
   timeZone: string;
   siteFooter: string;

package/src/types/views.ts

@@ -171,6 +171,19 @@ export interface NavItemView {
   freshAt?: number;
 }
 
+export type SuggestedNavLinkTargetType = "page" | "collection" | "archive";
+
+export type SuggestedNavLinkNavItemType = "link" | "collection";
+
+export interface SuggestedNavLink {
+  key: string;
+  label: string;
+  url: string;
+  targetType: SuggestedNavLinkTargetType;
+  navItemType: SuggestedNavLinkNavItemType;
+  collectionId?: string;
+}
+
 /**
  * Search result from FTS5
  */

package/src/ui/compose/ComposeDialog.tsx

@@ -59,6 +59,34 @@ export const ComposeForm: FC<ComposeFormProps> = ({
           "@context: Toast when several pasted remote images couldn't be rehosted; {count} is the number of images",
       }),
     ),
+    brokenImageUnavailable: i18n._(
+      msg({
+        message: "Image unavailable",
+        comment:
+          "@context: Inline editor placeholder title shown when an image cannot load",
+      }),
+    ),
+    brokenImageDelete: i18n._(
+      msg({
+        message: "Delete image",
+        comment:
+          "@context: Inline editor button label for removing a broken image",
+      }),
+    ),
+    brokenImageReplace: i18n._(
+      msg({
+        message: "Replace image",
+        comment:
+          "@context: Inline editor button label for replacing a broken image",
+      }),
+    ),
+    brokenImageOpen: i18n._(
+      msg({
+        message: "Open image URL",
+        comment:
+          "@context: Inline editor button label for opening the original URL of a broken image",
+      }),
+    ),
     note: i18n._(
       msg({
         message: "Note",

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

@@ -7,12 +7,14 @@ import { useLingui } from "../../../i18n/context.js";
 import type {
   CollectionsDirectoryData,
   NavItem,
+  SuggestedNavLink,
   SystemNavKey,
 } from "../../../types.js";
 import { SYSTEM_NAV_KEYS } from "../../../types.js";
 import type {
   NavManagerCollection,
   NavManagerLabels,
+  NavManagerSuggestedLink,
   SystemNavConfig,
 } from "../../../client/components/nav-manager-types.js";
 import { toPublicHref, toPublicPath } from "../../../lib/url.js";
@@ -30,12 +32,14 @@ import {
 export function NavigationContent({
   navItems,
   directoryData,
+  suggestedLinks,
   mainRssFeed,
   siteName,
   sitePathPrefix = "",
 }: {
   navItems: NavItem[];
   directoryData: CollectionsDirectoryData;
+  suggestedLinks: SuggestedNavLink[];
   mainRssFeed: string;
   siteName: string;
   sitePathPrefix?: string;
@@ -61,6 +65,27 @@ export function NavigationContent({
   );
   const moreLabel = i18n._(NAV_MORE_LABEL);
 
+  const suggestedTargetLabels = {
+    page: i18n._(
+      msg({
+        message: "Page",
+        comment: "@context: Suggested navigation link target type",
+      }),
+    ),
+    collection: i18n._(
+      msg({
+        message: "Collection",
+        comment: "@context: Suggested navigation link target type",
+      }),
+    ),
+    archive: i18n._(
+      msg({
+        message: "Archive",
+        comment: "@context: Suggested navigation link target type",
+      }),
+    ),
+  } satisfies Record<SuggestedNavLink["targetType"], string>;
+
   // Serialize nav items for the Lit component
   const itemsData = navItems.map((item) => {
     // System link URLs are always computed from constants, never from DB
@@ -110,6 +135,13 @@ export function NavigationContent({
     return result;
   })();
 
+  const suggestedLinksData: NavManagerSuggestedLink[] = suggestedLinks.map(
+    (link) => ({
+      ...link,
+      targetLabel: suggestedTargetLabels[link.targetType],
+    }),
+  );
+
   // Build system nav config array for the Lit component
   const systemNavData: SystemNavConfig[] = (
     Object.keys(SYSTEM_NAV_KEYS) as SystemNavKey[]
@@ -236,7 +268,7 @@ export function NavigationContent({
     systemLinksDescription: i18n._(
       msg({
         message:
-          "Toggle built-in navigation items. Their order controls what shows in the header and which feed the homepage opens first.",
+          "Show or hide built-in destinations in the header and More menu.",
         comment: "@context: Description for built-in nav toggles",
       }),
     ),
@@ -297,6 +329,30 @@ export function NavigationContent({
         comment: "@context: Error toast when nav link fields are empty",
       }),
     ),
+    suggestedLinks: i18n._(
+      msg({
+        message: "Suggested links",
+        comment: "@context: Section heading for suggested nav links",
+      }),
+    ),
+    suggestedLinksDescription: i18n._(
+      msg({
+        message: "Add common destinations that already exist on your site.",
+        comment: "@context: Description for suggested nav links",
+      }),
+    ),
+    addSuggestedLink: i18n._(
+      msg({
+        message: "Add",
+        comment: "@context: Button to add a suggested nav link",
+      }),
+    ),
+    suggestedLinkAdded: i18n._(
+      msg({
+        message: "Link added to navigation.",
+        comment: "@context: Toast after adding a suggested nav link",
+      }),
+    ),
     collection: i18n._(
       msg({
         message: "collection",
@@ -356,6 +412,7 @@ export function NavigationContent({
         labels={escapeJson(labels)}
         system-nav-items={escapeJson(systemNavData)}
         collections={escapeJson(collectionsData)}
+        suggested-links={escapeJson(suggestedLinksData)}
         site-name={siteName}
       >
         {/* SSR fallback: static preview until JS hydrates */}