@jant/core 0.3.36 → 0.3.38

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

@@ -87,7 +87,7 @@ export class JantSettingsAvatar extends LitElement {
       new CustomEvent("jant:settings-save", {
         bubbles: true,
         detail: {
-          endpoint: "/dash/settings/avatar/display",
+          endpoint: "/settings/avatar/display",
           data: { showHeaderAvatar: this._showInHeader ? "true" : "" },
           section: "avatar-display",
         },
@@ -101,7 +101,7 @@ export class JantSettingsAvatar extends LitElement {
     this.dispatchEvent(
       new CustomEvent("jant:avatar-remove", {
         bubbles: true,
-        detail: { endpoint: "/dash/settings/avatar/remove" },
+        detail: { endpoint: "/settings/avatar/remove" },
       }),
     );
   }
@@ -146,7 +146,7 @@ export class JantSettingsAvatar extends LitElement {
             ${this._renderPreview()}
             <div class="flex flex-col gap-2">
               <form
-                action="/dash/settings/avatar"
+                action="/settings/avatar"
                 method="post"
                 enctype="multipart/form-data"
                 class="inline"

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

@@ -170,7 +170,7 @@ export class JantSettingsGeneral extends LitElement {
       new CustomEvent("jant:settings-save", {
         bubbles: true,
         detail: {
-          endpoint: "/dash/settings/general",
+          endpoint: "/settings/general",
           data: {
             siteName: this._siteName,
             siteDescription: this._siteDescription,
@@ -203,7 +203,7 @@ export class JantSettingsGeneral extends LitElement {
       new CustomEvent("jant:settings-save", {
         bubbles: true,
         detail: {
-          endpoint: "/dash/settings/general/seo",
+          endpoint: "/settings/general/seo",
           data: { noindex: this._noindex ? "" : "true" },
           section: "seo",
         },
@@ -211,6 +211,24 @@ export class JantSettingsGeneral extends LitElement {
     );
   }
 
+  /** Submit on Enter from non-textarea fields */
+  private _onKeydown(
+    e: globalThis.KeyboardEvent,
+    save: () => void,
+    dirty: boolean,
+    loading: boolean,
+  ) {
+    if (
+      e.key === "Enter" &&
+      !loading &&
+      dirty &&
+      !(e.target instanceof HTMLTextAreaElement)
+    ) {
+      e.preventDefault();
+      save();
+    }
+  }
+
   // ── Render helpers ────────────────────────────────────────────────
 
   private _renderActions(
@@ -258,7 +276,15 @@ export class JantSettingsGeneral extends LitElement {
 
   private _renderGeneralForm() {
     return html`
-      <div>
+      <div
+        @keydown=${(e: globalThis.KeyboardEvent) =>
+          this._onKeydown(
+            e,
+            () => this._saveGeneral(),
+            this._generalDirty,
+            this._generalLoading,
+          )}
+      >
         <h2 class="text-lg font-semibold mb-4">${this.labels.general}</h2>
         <div class="flex flex-col gap-4">
           <div class="field">
@@ -366,7 +392,15 @@ export class JantSettingsGeneral extends LitElement {
 
   private _renderSeoForm() {
     return html`
-      <div>
+      <div
+        @keydown=${(e: globalThis.KeyboardEvent) =>
+          this._onKeydown(
+            e,
+            () => this._saveSeo(),
+            this._seoDirty,
+            this._seoLoading,
+          )}
+      >
         <h2 class="text-lg font-semibold mb-4">${this.labels.seo}</h2>
         <div>
           <label class="flex items-center gap-2 cursor-pointer">

package/src/client/components/jant-text-preview.ts

@@ -0,0 +1,232 @@
+/**
+ * Text Preview Dialog
+ *
+ * Displays attached text content (TipTap-authored) in a modal dialog.
+ * Intercepts clicks on [data-text-preview-url] buttons, fetches the
+ * stored { json, html } envelope from the URL, and renders the HTML
+ * in a native <dialog>.
+ *
+ * Light DOM only — BaseCoat and Tailwind classes apply directly.
+ */
+
+import { LitElement, html, nothing } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { showToast } from "../toast.js";
+import { jsonToMarkdown } from "../tiptap/create-editor.js";
+
+export class JantTextPreview extends LitElement {
+  static properties = {
+    _open: { state: true },
+    _html: { state: true },
+    _loading: { state: true },
+    _copied: { state: true },
+  };
+
+  declare _open: boolean;
+  declare _html: string;
+  declare _loading: boolean;
+  declare _copied: boolean;
+  /** Raw text for the copy button (markdown / plain text source) */
+  #rawText = "";
+
+  createRenderRoot() {
+    this.innerHTML = "";
+    return this;
+  }
+
+  constructor() {
+    super();
+    this._open = false;
+    this._html = "";
+    this._loading = false;
+    this._copied = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.#handleDocumentClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.#handleDocumentClick);
+  }
+
+  #handleDocumentClick = (e: Event) => {
+    const target = e.target as HTMLElement;
+    const btn = target.closest<HTMLButtonElement>("[data-text-preview-id]");
+    if (!btn) return;
+
+    e.preventDefault();
+    const mediaId = btn.dataset.textPreviewId;
+    if (mediaId) this.#openPreview(mediaId);
+  };
+
+  async #openPreview(mediaId: string) {
+    this._loading = true;
+    this._open = true;
+
+    document.body.style.overflow = "hidden";
+
+    await this.updateComplete;
+    this.querySelector<HTMLDialogElement>(".text-preview-dialog")?.showModal();
+
+    try {
+      const res = await fetch(`/api/media/${mediaId}/content`);
+      if (!res.ok) throw new Error("Fetch failed");
+
+      const raw = await res.text();
+
+      // Try parsing as { json, html } envelope (TipTap rich text)
+      try {
+        const envelope = JSON.parse(raw) as {
+          json?: import("@tiptap/core").JSONContent;
+          html?: string;
+        };
+        this._html = envelope.html || "";
+        // Serialize JSON → markdown via headless TipTap editor
+        this.#rawText = envelope.json ? jsonToMarkdown(envelope.json) : "";
+      } catch {
+        // Not JSON — raw markdown / plain text, copy as-is
+        this.#rawText = raw;
+        this._html = `<pre>${raw.replace(/</g, "&lt;")}</pre>`;
+      }
+    } catch {
+      this._html = "<p>Failed to load content.</p>";
+      this.#rawText = "";
+    } finally {
+      this._loading = false;
+    }
+  }
+
+  #close() {
+    this.querySelector<HTMLDialogElement>(".text-preview-dialog")?.close();
+    document.body.style.overflow = "";
+    this._open = false;
+    this._html = "";
+    this.#rawText = "";
+    this._copied = false;
+  }
+
+  async #copy() {
+    if (!this.#rawText) return;
+    try {
+      await globalThis.navigator.clipboard.writeText(this.#rawText);
+      this._copied = true;
+      showToast("Copied.");
+      setTimeout(() => {
+        this._copied = false;
+      }, 2000);
+    } catch {
+      showToast("Could not copy.", "error");
+    }
+  }
+
+  #handleKeydown = (e: globalThis.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      this.#close();
+    }
+  };
+
+  render() {
+    if (!this._open) return nothing;
+
+    return html`
+      <dialog
+        class="text-preview-dialog"
+        @cancel=${(e: Event) => {
+          e.preventDefault();
+          this.#close();
+        }}
+        @keydown=${this.#handleKeydown}
+        @click=${(e: Event) => {
+          // Close on backdrop click
+          if ((e.target as HTMLElement).tagName === "DIALOG") {
+            this.#close();
+          }
+        }}
+      >
+        <div class="text-preview-content">
+          <div class="text-preview-toolbar">
+            <button
+              type="button"
+              class="text-preview-btn"
+              @click=${() => this.#copy()}
+              ?disabled=${this._loading || !this.#rawText}
+              title="Copy"
+            >
+              ${this._copied
+                ? html`<svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>`
+                : html`<svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <rect width="14" height="14" x="8" y="8" rx="2" />
+                    <path
+                      d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                    />
+                  </svg>`}
+            </button>
+            <button
+              type="button"
+              class="text-preview-btn"
+              @click=${() => this.#close()}
+              title="Close"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M18 6 6 18M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          ${this._loading
+            ? html`<div class="text-preview-loading">
+                <svg
+                  class="animate-spin size-5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+                </svg>
+              </div>`
+            : html`<div class="text-preview-body prose">
+                ${unsafeHTML(this._html)}
+              </div>`}
+        </div>
+      </dialog>
+    `;
+  }
+}
+
+customElements.define("jant-text-preview", JantTextPreview);

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

@@ -3,11 +3,10 @@
  */
 
 export interface NavManagerItem {
-  id: number;
-  type: "page" | "link" | "system";
+  id: string;
+  type: "link" | "system";
   label: string;
   url: string;
-  pageId: number | null;
 }
 
 export interface SystemNavConfig {
@@ -17,17 +16,10 @@ export interface SystemNavConfig {
   description: string;
 }
 
-export interface AvailablePage {
-  id: number;
-  title: string;
-  slug: string;
-}
-
 export interface NavManagerLabels {
   preview: string;
   navigationItems: string;
   emptyState: string;
-  page: string;
   link: string;
   system: string;
   toggleEdit: string;
@@ -35,7 +27,6 @@ export interface NavManagerLabels {
   url: string;
   save: string;
   delete: string;
-  editPage: string;
   remove: string;
   orderSaved: string;
   labelRequired: string;
@@ -43,15 +34,9 @@ export interface NavManagerLabels {
   deleteFailed: string;
   systemLinks: string;
   systemLinksDescription: string;
-  addPageToNavigation: string;
   addCustomLinkToNavigation: string;
-  choosePage: string;
-  searchPages: string;
-  noPagesFound: string;
   addLink: string;
   addLinkDescription: string;
-  allPagesInNav: string;
-  createPage: string;
   urlPlaceholder: string;
   labelAndUrlRequired: string;
   maxVisibleLinks: string;
@@ -65,11 +50,11 @@ export interface NavManagerLabels {
 }
 
 export interface NavManagerUpdateDetail {
-  id: number;
+  id: string;
   label: string;
   url?: string;
 }
 
 export interface NavManagerDeleteDetail {
-  id: number;
+  id: string;
 }

package/src/client/components/post-form-template.ts

@@ -1,6 +1,91 @@
 import { html, nothing } from "lit";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type { JantPostForm } from "./jant-post-form.js";
+import type { PostMediaItem } from "./post-form-types.js";
+import { getMediaCategory } from "../../lib/upload.js";
+
+function renderFileIcon(mimeType: string) {
+  const doc = `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>`;
+
+  let inner: string;
+  if (mimeType === "application/pdf") {
+    inner = `<text x="12" y="16.5" text-anchor="middle" fill="currentColor" stroke="none" font-size="6" font-weight="700" font-family="system-ui, sans-serif">PDF</text>`;
+  } else if (mimeType === "text/markdown") {
+    inner = `<text x="12" y="16.5" text-anchor="middle" fill="currentColor" stroke="none" font-size="10" font-weight="700" font-family="system-ui, sans-serif">#</text>`;
+  } else if (mimeType === "text/csv") {
+    inner = `<line x1="8" y1="12" x2="16" y2="12"/><line x1="8" y1="15" x2="16" y2="15"/><line x1="8" y1="18" x2="16" y2="18"/><line x1="10.7" y1="12" x2="10.7" y2="18"/><line x1="13.3" y1="12" x2="13.3" y2="18"/>`;
+  } else if (getMediaCategory(mimeType) === "archive") {
+    inner = `<line x1="12" y1="10" x2="12" y2="11.5"/><line x1="12" y1="13" x2="12" y2="14.5"/><line x1="12" y1="16" x2="12" y2="17.5"/>`;
+  } else if (mimeType.startsWith("audio/")) {
+    return html`<svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      ${unsafeSVG(
+        `<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>`,
+      )}
+    </svg>`;
+  } else if (mimeType.startsWith("video/")) {
+    return html`<svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      ${unsafeSVG(
+        `<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>`,
+      )}
+    </svg>`;
+  } else {
+    inner = `<line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/>`;
+  }
+
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    ${unsafeSVG(doc + inner)}
+  </svg>`;
+}
+
+function renderMediaThumb(item: PostMediaItem) {
+  const category = getMediaCategory(item.mimeType);
+
+  if (category === "image") {
+    return html`<img
+      src=${item.thumbUrl}
+      alt=${item.alt}
+      class="w-full h-full object-cover rounded-lg border"
+      loading="lazy"
+    />`;
+  }
+
+  return html`<div
+    class="w-full h-full rounded-lg border bg-muted flex flex-col items-center justify-center gap-1 p-1 text-muted-foreground"
+  >
+    ${renderFileIcon(item.mimeType)}
+    <span class="text-[10px] leading-tight text-center truncate w-full px-1"
+      >${item.originalName}</span
+    >
+  </div>`;
+}
 
 function renderMediaList(component: JantPostForm) {
   const { media, labels, _mediaIds } = component;
@@ -32,12 +117,7 @@ function renderMediaList(component: JantPostForm) {
       }
 
       return html`<div class="relative group aspect-square" data-media-id=${id}>
-        <img
-          src=${item.thumbUrl}
-          alt=${item.alt}
-          class="w-full h-full object-cover rounded-lg border"
-          loading="lazy"
-        />
+        ${renderMediaThumb(item)}
         <button
           type="button"
           class="absolute top-1 right-1 w-5 h-5 flex items-center justify-center bg-black/60 text-white rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
@@ -107,10 +187,28 @@ export function renderPostForm(component: JantPostForm) {
           class="input"
           placeholder=${component.labels.titlePlaceholder}
           .value=${component._title}
-          @input=${(e: Event) => component.handleInput("_title", e)}
+          @input=${(e: Event) => component.handleTitleInput(e)}
         />
       </div>
 
+      <div class="field">
+        <label class="label">${component.labels.slugLabel}</label>
+        <input
+          type="text"
+          class="input"
+          placeholder=${component.labels.slugPlaceholder}
+          .value=${component._slug}
+          @input=${(e: Event) => component.handleSlugInput(e)}
+        />
+        ${component._slug
+          ? html`<p class="text-xs text-muted-foreground mt-1">
+              ${component.siteUrl}/${component._slug}
+            </p>`
+          : html`<p class="text-xs text-muted-foreground mt-1">
+              ${component.labels.slugHelp}
+            </p>`}
+      </div>
+
       <div class="field">
         <label class="label">${component.labels.bodyLabel}</label>
         <div
@@ -178,13 +276,10 @@ export function renderPostForm(component: JantPostForm) {
           @change=${(e: Event) => {
             const target = e.target as HTMLSelectElement;
             component._visibility =
-              (target.value as typeof component._visibility) ?? "listed";
+              (target.value as typeof component._visibility) ?? "public";
           }}
         >
-          <option value="listed">${component.labels.visibilityListed}</option>
-          <option value="featured">
-            ${component.labels.visibilityFeatured}
-          </option>
+          <option value="public">${component.labels.visibilityPublic}</option>
           <option value="unlisted">
             ${component.labels.visibilityUnlisted}
           </option>

package/src/client/components/post-form-types.ts

@@ -1,10 +1,10 @@
 /**
- * Shared type definitions for the dashboard post form Lit component.
+ * Shared type definitions for the post form Lit component.
  */
 
 export type PostFormat = "note" | "link" | "quote";
 export type PostStatus = "published" | "draft";
-export type PostVisibility = "listed" | "featured" | "unlisted";
+export type PostVisibility = "public" | "unlisted";
 
 export interface PostFormLabels {
   formatLabel: string;
@@ -13,6 +13,9 @@ export interface PostFormLabels {
   quoteOption: string;
   titleLabel: string;
   titlePlaceholder: string;
+  slugLabel: string;
+  slugPlaceholder: string;
+  slugHelp: string;
   bodyLabel: string;
   bodyPlaceholder: string;
   urlLabel: string;
@@ -27,8 +30,7 @@ export interface PostFormLabels {
   statusPublished: string;
   statusDraft: string;
   visibilityLabel: string;
-  visibilityListed: string;
-  visibilityFeatured: string;
+  visibilityPublic: string;
   visibilityUnlisted: string;
   pinnedLabel: string;
   collectionsLabel: string;
@@ -39,11 +41,13 @@ export interface PostFormLabels {
   mediaDialogLoading: string;
   submitSuccessMessage: string;
   submitErrorMessage: string;
+  draftFallbackMessage: string;
 }
 
 export interface PostFormInitial {
   format: PostFormat;
   title: string;
+  slug: string;
   body: string;
   url: string;
   quoteText: string;
@@ -66,6 +70,8 @@ export interface PostMediaItem {
   id: string;
   thumbUrl: string;
   alt: string;
+  mimeType: string;
+  originalName: string;
 }
 
 export interface PostSubmitDetail {
@@ -74,6 +80,7 @@ export interface PostSubmitDetail {
   data: {
     format: PostFormat;
     title?: string;
+    slug?: string;
     body?: string;
     status: PostStatus;
     visibility: PostVisibility;