@jant/core 0.6.6 → 0.6.8

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

@@ -36,6 +36,7 @@ import {
   getSelectedFirstOrder,
 } from "../collection-picker-order.js";
 import type { JantComposeEditor } from "./jant-compose-editor.js";
+import { convertComposeFormat } from "./compose-format-convert.js";
 import { getMediaCategory } from "../../lib/upload.js";
 import { getSlugValidationIssue } from "../../lib/slug-format.js";
 import { createTiptapEditor } from "../tiptap/create-editor.js";
@@ -666,7 +667,7 @@ export class JantComposeDialog extends LitElement {
     super();
     this.collections = [];
     this.labels = {} as ComposeLabels;
-    this.uploadMaxFileSize = 500;
+    this.uploadMaxFileSize = 1024;
     this.pageMode = false;
     this.closeHref = "/";
     this.autoRestoreDraft = false;
@@ -743,13 +744,14 @@ export class JantComposeDialog extends LitElement {
       this._scheduleCollectionPickerAutofocus();
     }
     if (
-      changed.has("_format") ||
       changed.has("_collectionIds") ||
       changed.has("_slug") ||
       changed.has("_publishedAtInput") ||
       changed.has("_visibility")
     ) {
-      // Schedule draft auto-save (new-post and edit modes, not draft-load)
+      // Schedule draft auto-save (new-post and edit modes, not draft-load).
+      // `_format` is intentionally excluded: a bare format switch is exploratory
+      // and shouldn't persist a draft on its own (see `_switchFormat`).
       if (!this._draftSourceId) {
         this._scheduleDraftSave();
       }
@@ -2269,6 +2271,10 @@ export class JantComposeDialog extends LitElement {
 
   private _handleDialogCancel = (e: Event) => {
     e.preventDefault();
+    // Defensive: some browsers dispatch <dialog> `cancel` for Escape even
+    // when the IME consumed it. Mirror the guard from _handleKeydown.
+    const ke = e as Partial<globalThis.KeyboardEvent>;
+    if (ke.isComposing || ke.keyCode === 229) return;
     if (this._shouldIgnoreEscapeClose()) return;
     if (this._dismissEscapeOverlay()) return;
     this.requestClose();
@@ -2411,6 +2417,10 @@ export class JantComposeDialog extends LitElement {
 
   private _handleKeydown = (e: Event) => {
     const ke = e as globalThis.KeyboardEvent;
+    // Let IME consume keys during composition (e.g. CJK candidate selection).
+    // Without this, pressing Escape to dismiss the IME popup would trigger the
+    // "Save to drafts?" prompt. See GitHub issue #120.
+    if (ke.isComposing || ke.keyCode === 229) return;
     if (ke.key !== "Escape") {
       this._clearFilePickerEscapeState();
     }
@@ -2448,7 +2458,7 @@ export class JantComposeDialog extends LitElement {
           "jant-compose-editor",
         )[this._focusedThreadIndex];
         editor?.dispatchEvent(
-          new CustomEvent("jant:thread-format-change", {
+          new CustomEvent("jant:format-change", {
             detail: { format: target },
             bubbles: true,
           }),
@@ -3044,6 +3054,14 @@ export class JantComposeDialog extends LitElement {
     const editor = this._editor;
     if (!editor) return;
 
+    // Only persist genuine unsaved changes. Without this, merely opening a post
+    // for edit (or restoring a draft) would write a local draft of the
+    // unchanged content, since loading fires content-change events.
+    if (!this._hasUnsavedChanges()) {
+      globalThis.localStorage.removeItem(this._currentDraftStorageKey());
+      return;
+    }
+
     const data = editor.getData();
     const hasContent =
       !!data.body ||
@@ -3055,7 +3073,7 @@ export class JantComposeDialog extends LitElement {
       data.attachedTexts.length > 0;
 
     if (!hasContent) {
-      globalThis.localStorage.removeItem(JantComposeDialog._DRAFT_KEY);
+      globalThis.localStorage.removeItem(this._currentDraftStorageKey());
       return;
     }
 
@@ -3090,7 +3108,7 @@ export class JantComposeDialog extends LitElement {
 
     try {
       globalThis.localStorage.setItem(
-        JantComposeDialog._DRAFT_KEY,
+        this._currentDraftStorageKey(),
         JSON.stringify(draft),
       );
     } catch {
@@ -3541,10 +3559,43 @@ export class JantComposeDialog extends LitElement {
 
   private static readonly _FORMATS: ComposeFormat[] = ["note", "link", "quote"];
 
+  /**
+   * Whether a format switch should convert fields (fold/extract). Only when
+   * editing an existing post or a server draft — for a brand-new post, switching
+   * just hides/shows fields and nothing is persisted yet, so conversion would
+   * pollute the body for no benefit.
+   */
+  private _shouldConvertOnFormatSwitch(): boolean {
+    return !!(this._editPostId || this._draftSourceId);
+  }
+
   private _switchFormat(target: ComposeFormat) {
     if (this._format === target) return;
-    if (this._editPostId) return;
+    const editor = this._editor;
+    if (editor && this._shouldConvertOnFormatSwitch()) {
+      // Fold fields the target can't hold into the body before the format
+      // change recreates the editor from `_bodyJson`. Synchronous, so the old
+      // Tiptap instance can't fire onUpdate and clobber what we just wrote.
+      // `applyConvertedFields` suppresses the one content-change event the
+      // conversion emits, so the switch itself never schedules a draft save.
+      editor.applyConvertedFields(
+        convertComposeFormat(
+          this._format,
+          target,
+          editor.getConvertibleFields(),
+        ),
+      );
+    }
+    // A bare format switch shouldn't persist a local draft, so drop any save
+    // already pending from loading the post.
+    this._cancelDraftSaveTimer();
     this._format = target;
+    // Sync the editor's format this tick. Lit commits the `.format` binding
+    // only after this render returns, so `_canPublish()` (which reads
+    // `editor.getData()`, keyed on the editor's format) would otherwise compute
+    // against the stale format for one render and leave the submit button
+    // wrongly disabled.
+    if (editor) editor.format = target;
     this._showPublishPanel = false;
     if (this._shouldAutofocusFormatInput()) {
       globalThis.requestAnimationFrame(() => this._editor?.focusInput());
@@ -3563,6 +3614,16 @@ export class JantComposeDialog extends LitElement {
     const draftButtonLabel = this._hasContent()
       ? this.labels.saveAsDraft
       : this.labels.drafts;
+    // Format selector sits inline (above each post) whenever more than one post
+    // is on screen — a reply (parent shown above) or a multi-post thread. The
+    // header then shows a plain title instead of the format selector.
+    const isReply = !!(this._replyToId && this._replyToData);
+    const showTitle = isReply || this._threadItems.length > 0;
+    const headerTitle = this._editPostId
+      ? this.labels.editTitle
+      : isReply
+        ? this.labels.replyTitle
+        : this.labels.newThread;
 
     return html`
       <header class="compose-dialog-header">
@@ -3575,39 +3636,33 @@ export class JantComposeDialog extends LitElement {
         </button>
 
         <div class="compose-dialog-header-center">
-          ${this._editPostId
-            ? html`<span class="compose-dialog-title"
-                >${this.labels.editPost}</span
-              >`
-            : this._threadItems.length > 0
-              ? html`<span class="compose-dialog-title"
-                  >${this.labels.newThread}</span
-                >`
-              : html`
-                  <div class="compose-segmented">
-                    <div
-                      class=${classMap({
-                        "compose-format-pill": true,
-                        "compose-format-pill-link": this._format === "link",
-                        "compose-format-pill-quote": this._format === "quote",
-                      })}
-                    ></div>
-                    ${formats.map(
-                      (f) => html`
-                        <button
-                          type="button"
-                          class=${classMap({
-                            "compose-segmented-item": true,
-                            "compose-segmented-item-active": this._format === f,
-                          })}
-                          @click=${() => this._switchFormat(f)}
-                        >
-                          ${formatLabels[f]}
-                        </button>
-                      `,
-                    )}
-                  </div>
-                `}
+          ${showTitle
+            ? html`<span class="compose-dialog-title">${headerTitle}</span>`
+            : html`
+                <div class="compose-segmented">
+                  <div
+                    class=${classMap({
+                      "compose-format-pill": true,
+                      "compose-format-pill-link": this._format === "link",
+                      "compose-format-pill-quote": this._format === "quote",
+                    })}
+                  ></div>
+                  ${formats.map(
+                    (f) => html`
+                      <button
+                        type="button"
+                        class=${classMap({
+                          "compose-segmented-item": true,
+                          "compose-segmented-item-active": this._format === f,
+                        })}
+                        @click=${() => this._switchFormat(f)}
+                      >
+                        ${formatLabels[f]}
+                      </button>
+                    `,
+                  )}
+                </div>
+              `}
         </div>
 
         <div class="compose-dialog-header-actions">
@@ -5289,9 +5344,7 @@ export class JantComposeDialog extends LitElement {
         @focusin=${() => {
           this._focusedThreadIndex = index;
         }}
-        @jant:thread-format-change=${(
-          e: CustomEvent<{ format: ComposeFormat }>,
-        ) => {
+        @jant:format-change=${(e: CustomEvent<{ format: ComposeFormat }>) => {
           e.stopPropagation();
           this._threadItems = this._threadItems.map((it, i) =>
             i === index ? { ...it, format: e.detail.format } : it,
@@ -5415,6 +5468,7 @@ export class JantComposeDialog extends LitElement {
       .format=${this._format}
       .labels=${this.labels}
       .uploadMaxFileSize=${this.uploadMaxFileSize}
+      .inlineFormat=${isReply}
       .slashCommandDiscovered=${this.slashCommandDiscovered}
     ></jant-compose-editor>`;
 
@@ -5438,7 +5492,15 @@ export class JantComposeDialog extends LitElement {
               ? html`
                   <div class="compose-thread-layout">
                     ${this._renderReplyContext()}
-                    <div class="compose-editor-row">
+                    <div
+                      class="compose-editor-row"
+                      @jant:format-change=${(
+                        e: CustomEvent<{ format: ComposeFormat }>,
+                      ) => {
+                        e.stopPropagation();
+                        this._switchFormat(e.detail.format);
+                      }}
+                    >
                       <div class="compose-thread-dot"></div>
                       ${editor}
                     </div>

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

@@ -30,6 +30,7 @@ import type {
   ComposeEditorSelection,
   ComposeFullscreenOpenDetail,
 } from "./compose-types.js";
+import type { ComposeConvertFields } from "./compose-format-convert.js";
 import {
   UPLOAD_ACCEPT,
   getMediaCategory,
@@ -178,6 +179,7 @@ export class JantComposeEditor extends LitElement {
     uploadMaxFileSize: { type: Number },
     threadItem: { type: Boolean, attribute: "thread-item" },
     removable: { type: Boolean },
+    inlineFormat: { type: Boolean, attribute: "inline-format" },
     slashCommandDiscovered: { type: Boolean },
     _title: { state: true },
     _bodyJson: { state: true },
@@ -203,6 +205,7 @@ export class JantComposeEditor extends LitElement {
   declare uploadMaxFileSize: number;
   declare threadItem: boolean;
   declare removable: boolean;
+  declare inlineFormat: boolean;
   declare slashCommandDiscovered: boolean;
   declare _title: string;
   declare _bodyJson: JSONContent | null;
@@ -234,6 +237,14 @@ export class JantComposeEditor extends LitElement {
   private _scrollBufferApplied = false;
   private _filePickerCleanup: (() => void) | null = null;
   private _suppressAttachedTextOpenUntil = 0;
+  /**
+   * Set by {@link applyConvertedFields} so the format-conversion content writes
+   * don't emit a content-changed event (which would schedule a draft autosave).
+   * A bare format switch shouldn't persist a local draft — see `_switchFormat`.
+   * Always consumed: a switch also changes `format`, so `updated()` is guaranteed
+   * to run this cycle.
+   */
+  private _suppressContentChangedOnce = false;
   #inlineImageUploadGeneration = 0;
   #inlineImageUploadPromises = new Set<Promise<void>>();
   #sortable: { destroy(): void } | null = null;
@@ -247,9 +258,10 @@ export class JantComposeEditor extends LitElement {
     super();
     this.format = "note";
     this.labels = {} as ComposeLabels;
-    this.uploadMaxFileSize = 500;
+    this.uploadMaxFileSize = 1024;
     this.threadItem = false;
     this.removable = false;
+    this.inlineFormat = false;
     this.slashCommandDiscovered = false;
     this._title = "";
     this._bodyJson = null;
@@ -903,13 +915,19 @@ export class JantComposeEditor extends LitElement {
       }
     }
 
-    // Notify parent dialog of content changes for draft auto-save
-    for (const key of changed.keys()) {
-      if (JantComposeEditor._CONTENT_PROPS.has(key as string)) {
-        this.dispatchEvent(
-          new Event("jant:compose-content-changed", { bubbles: true }),
-        );
-        break;
+    // Notify parent dialog of content changes for draft auto-save. A format
+    // conversion writes content fields too, but it's not a user edit, so skip
+    // the notification once when asked.
+    if (this._suppressContentChangedOnce) {
+      this._suppressContentChangedOnce = false;
+    } else {
+      for (const key of changed.keys()) {
+        if (JantComposeEditor._CONTENT_PROPS.has(key as string)) {
+          this.dispatchEvent(
+            new Event("jant:compose-content-changed", { bubbles: true }),
+          );
+          break;
+        }
       }
     }
   }
@@ -924,6 +942,39 @@ export class JantComposeEditor extends LitElement {
     };
   }
 
+  /**
+   * Raw field values for format conversion. Unlike {@link getData}, this returns
+   * every field regardless of the current format (so a hidden quote/url survives
+   * a switch) plus the freshest, normalized body.
+   */
+  getConvertibleFields(): ComposeConvertFields {
+    return {
+      title: this._title,
+      url: this._url,
+      quoteText: this._quoteText,
+      quoteAuthor: this._quoteAuthor,
+      showTitle: this._showTitle,
+      bodyJson: this._normalizeDocJson(
+        this._editor?.getJSON() ?? this._bodyJson,
+      ),
+    };
+  }
+
+  /**
+   * Write back fields produced by `convertComposeFormat`. The body is applied via
+   * `_bodyJson` only — the imminent format change recreates the editor from it, so
+   * calling `setContent` here would be redundant.
+   */
+  applyConvertedFields(fields: ComposeConvertFields): void {
+    this._suppressContentChangedOnce = true;
+    this._title = fields.title;
+    this._url = fields.url;
+    this._quoteText = fields.quoteText;
+    this._quoteAuthor = fields.quoteAuthor;
+    this._showTitle = fields.showTitle;
+    this._bodyJson = fields.bodyJson;
+  }
+
   /** Pre-fill all fields for edit mode or draft restore */
   populate(data: {
     format: string;
@@ -1736,6 +1787,7 @@ export class JantComposeEditor extends LitElement {
                   @input=${(e: Event) => this._onInput("_title", e)}
                   @focus=${(e: Event) => this._onFieldFocus(e)}
                   @keydown=${(e: globalThis.KeyboardEvent) => {
+                    if (e.isComposing || e.keyCode === 229) return;
                     if (e.key === "Enter") {
                       e.preventDefault();
                       this._editor?.commands.focus("start");
@@ -2432,7 +2484,7 @@ export class JantComposeEditor extends LitElement {
     `;
   }
 
-  private _renderThreadPostHeader() {
+  private _renderFormatHeader() {
     const formatLabels: Record<ComposeFormat, string> = {
       note: this.labels.note,
       link: this.labels.link,
@@ -2462,7 +2514,7 @@ export class JantComposeEditor extends LitElement {
                 @click=${() => {
                   if (this.format !== f) {
                     this.dispatchEvent(
-                      new CustomEvent("jant:thread-format-change", {
+                      new CustomEvent("jant:format-change", {
                         bubbles: true,
                         detail: { format: f },
                       }),
@@ -2517,7 +2569,9 @@ export class JantComposeEditor extends LitElement {
 
   render() {
     return html`
-      ${this.threadItem ? this._renderThreadPostHeader() : nothing}
+      ${this.threadItem || this.inlineFormat
+        ? this._renderFormatHeader()
+        : nothing}
       <section class="compose-body">
         ${this.format === "note"
           ? this._renderNoteFields()

package/src/client/components/jant-compose-fullscreen.ts

@@ -188,6 +188,8 @@ export class JantComposeFullscreen extends LitElement {
 
   private _onDocumentKeydown = (e: globalThis.KeyboardEvent) => {
     if (!this._open || e.key !== "Escape") return;
+    // Let IME consume Escape during composition (e.g. CJK candidate dismiss).
+    if (e.isComposing || e.keyCode === 229) return;
     if (this._hasActiveEscapeOverlay()) return;
 
     e.preventDefault();
@@ -273,6 +275,7 @@ export class JantComposeFullscreen extends LitElement {
                 this._title = (e.target as HTMLInputElement).value;
               }}
               @keydown=${(e: globalThis.KeyboardEvent) => {
+                if (e.isComposing || e.keyCode === 229) return;
                 if (e.key === "Enter") {
                   e.preventDefault();
                   this._editor?.commands.focus("start");

package/src/client/components/jant-nav-manager.ts

@@ -103,6 +103,10 @@ export class JantNavManager extends LitElement {
     if (!("key" in event) || event.key !== "Escape" || !this._showPreviewMore) {
       return;
     }
+    // Defensive: nav editor has many text inputs; let IME swallow Escape
+    // when the user is dismissing a CJK candidate popup.
+    const ke = event as globalThis.KeyboardEvent;
+    if (ke.isComposing || ke.keyCode === 229) return;
 
     event.preventDefault();
     this.#closePreviewMore();

package/src/client/components/jant-post-menu.ts

@@ -169,6 +169,9 @@ export class JantPostMenu extends LitElement {
 
   #handleKeydown = (e: Event) => {
     const ke = e as globalThis.KeyboardEvent;
+    // Let IME consume Escape during composition (e.g. dismissing the CJK
+    // candidate popup in the collection search input).
+    if (ke.isComposing || ke.keyCode === 229) return;
     if (ke.key === "Escape") {
       if (this._addCollectionPanelOpen) {
         this.#closeAddCollectionPanel();

package/src/client/components/jant-repo-picker.ts

@@ -418,6 +418,9 @@ export class JantRepoPicker extends LitElement {
 
   #handleEscape = (e: KeyboardEvent) => {
     if (e.key !== "Escape") return;
+    // Let IME consume Escape during composition (e.g. dismissing the CJK
+    // candidate popup in the owner/repo search inputs).
+    if (e.isComposing || e.keyCode === 229) return;
     if (this._ownerOpen || this._repoOpen) {
       this._ownerOpen = false;
       this._repoOpen = false;

package/src/client/components/jant-settings-general.ts

@@ -450,6 +450,7 @@ export class JantSettingsGeneral extends LitElement {
   };
 
   private _onLocalePickerKeydown = (e: KeyboardEvent) => {
+    if (e.isComposing || e.keyCode === 229) return;
     if (e.key === "Escape" && this._localeOpen) {
       this._localeOpen = false;
       this._localeQuery = "";
@@ -614,6 +615,8 @@ export class JantSettingsGeneral extends LitElement {
     dirty: boolean,
     loading: boolean,
   ) {
+    // Pressing Enter to commit an IME candidate must not also submit the form.
+    if (e.isComposing || e.keyCode === 229) return;
     if (
       e.key === "Enter" &&
       !loading &&

package/src/client/compose-bridge.ts

@@ -26,6 +26,7 @@ import {
   queueToastForNextPage,
 } from "./toast.js";
 import { openReplyForArticle } from "./compose-launch.js";
+import { hydratePartial } from "./hydrate-partial.js";
 import { getJsonString, readJsonObject } from "./json.js";
 import { uploadViaSession } from "./upload-session.js";
 import { publicPath } from "./runtime-paths.js";
@@ -75,6 +76,10 @@ async function refreshTimelineThreadView(
     if (!html) return false;
 
     content.innerHTML = html;
+    // Swapped-in markup carries interactions whose per-element setup only runs
+    // on DOMContentLoaded (thread "Show more" toggle, feed video autoplay, audio
+    // waveform); re-initialize them or they stay inert until a full reload.
+    hydratePartial(content);
     return true;
   } catch {
     return false;
@@ -97,6 +102,7 @@ async function refreshPostCardView(postId: string): Promise<boolean> {
       );
       if (!content) return false;
       content.innerHTML = html;
+      hydratePartial(content);
       return true;
     }
 
@@ -106,6 +112,11 @@ async function refreshPostCardView(postId: string): Promise<boolean> {
     if (!article) return false;
 
     article.outerHTML = html;
+    // outerHTML detaches `article`; re-query the replacement to hydrate it.
+    const nextArticle = document.querySelector<HTMLElement>(
+      `article[data-post-id="${postId}"]`,
+    );
+    if (nextArticle) hydratePartial(nextArticle);
     return true;
   } catch {
     return false;
@@ -125,6 +136,12 @@ async function refreshPostPageView(postId: string): Promise<boolean> {
     if (!html) return false;
 
     container.outerHTML = html;
+    // outerHTML detaches `container`; re-query the replacement to hydrate it
+    // (see refreshTimelineThreadView).
+    const next = document.querySelector<HTMLElement>(
+      `[data-post-view][data-post-view-id="${postId}"]`,
+    );
+    if (next) hydratePartial(next);
     return true;
   } catch {
     return false;

package/src/client/feed-video-player.ts

@@ -337,7 +337,7 @@ function handleMuteToggle(event: Event): void {
 }
 
 export function initFeedVideoPlayer(
-  root: globalThis.ParentNode = document,
+  root: globalThis.Document | globalThis.Element = document,
 ): void {
   const videos = root.querySelectorAll<HTMLVideoElement>(
     "[data-feed-short-video]",

package/src/client/hydrate-partial.ts

@@ -0,0 +1,25 @@
+/**
+ * Re-initialize interactive behaviors inside a server-rendered fragment that
+ * was swapped into the DOM after page load — e.g. compose-bridge replacing a
+ * timeline item or post view after a reply or edit.
+ *
+ * Most interactions survive a swap on their own: note-expand and the audio
+ * transport use document-level event delegation, and media-scroll-hint runs its
+ * own MutationObserver. The ones gathered here need per-element setup
+ * (IntersectionObserver / ResizeObserver / canvas drawing) that otherwise only
+ * runs once on DOMContentLoaded, so a freshly swapped fragment would stay inert
+ * until a full reload. Each initializer is idempotent, so calling this on a root
+ * that already contains initialized nodes is safe.
+ */
+
+import { setupThreadContexts } from "./thread-context.js";
+import { initFeedVideoPlayer } from "./feed-video-player.js";
+import { initPrecomputedWaveforms } from "./audio-player.js";
+
+export function hydratePartial(
+  root: globalThis.Document | globalThis.Element,
+): void {
+  setupThreadContexts(root);
+  initFeedVideoPlayer(root);
+  initPrecomputedWaveforms(root);
+}

package/src/client/json.ts

@@ -32,6 +32,60 @@ export function getJsonNumber(value: unknown, key: string): number | undefined {
 export async function readJsonObject(
   response: Response,
 ): Promise<Record<string, unknown>> {
-  const data = await response.json();
-  return isJsonObject(data) ? data : {};
+  const text = await response.text();
+  if (!text.trim()) return {};
+  try {
+    const data = JSON.parse(text);
+    return isJsonObject(data) ? data : {};
+  } catch {
+    throw new Error(
+      `Expected JSON (HTTP ${response.status}) but got: ${truncate(text.trim(), 200)}`,
+    );
+  }
+}
+
+/**
+ * Read a server error message from a failed Response.
+ * Prefers JSON `{ error }`, falls back to the raw text body so server-side
+ * failures (e.g. plain-text 404 from an edge/proxy) reach the user instead of
+ * being masked by a cryptic JSON parse error.
+ */
+export async function readErrorMessage(
+  response: Response,
+  fallback: string,
+): Promise<string> {
+  let text: string;
+  try {
+    text = await response.text();
+  } catch {
+    return fallback;
+  }
+  return extractErrorMessage(text, fallback);
+}
+
+/** Same as readErrorMessage but for a body already read as text (e.g. XHR). */
+export function readErrorMessageFromText(
+  text: string,
+  fallback: string,
+): string {
+  return extractErrorMessage(text, fallback);
+}
+
+function extractErrorMessage(text: string, fallback: string): string {
+  const trimmed = text.trim();
+  if (!trimmed) return fallback;
+  try {
+    const data = JSON.parse(trimmed);
+    if (isJsonObject(data)) {
+      const msg = getJsonString(data, "error");
+      if (msg) return msg;
+    }
+  } catch {
+    // Not JSON — fall through and surface the raw text below.
+  }
+  return truncate(trimmed, 200);
+}
+
+function truncate(value: string, max: number): string {
+  return value.length > max ? `${value.slice(0, max)}…` : value;
 }