@jant/core 0.6.16 → 0.7.0

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

@@ -310,47 +310,51 @@ export class JantTextPreview extends LitElement {
               </svg>
             </button>
             <div class="text-preview-toolbar-actions">
-              ${this.#shareHref
-                ? html`<button
-                    type="button"
-                    class="text-preview-btn"
-                    @click=${() => this.#copyLink()}
-                    ?disabled=${this._loading}
-                    title="Copy link"
-                    aria-label="Copy shareable link"
-                  >
-                    ${this._linkCopied
-                      ? 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"
-                        >
-                          <path
-                            d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-                          />
-                          <path
-                            d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-                          />
-                        </svg>`}
-                  </button>`
-                : nothing}
+              ${
+                this.#shareHref
+                  ? html`<button
+                      type="button"
+                      class="text-preview-btn"
+                      @click=${() => this.#copyLink()}
+                      ?disabled=${this._loading}
+                      title="Copy link"
+                      aria-label="Copy shareable link"
+                    >
+                      ${
+                        this._linkCopied
+                          ? 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"
+                            >
+                              <path
+                                d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+                              />
+                              <path
+                                d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+                              />
+                            </svg>`
+                      }
+                    </button>`
+                  : nothing
+              }
               <button
                 type="button"
                 class="text-preview-btn"
@@ -359,54 +363,58 @@ export class JantTextPreview extends LitElement {
                 title="Copy text"
                 aria-label="Copy text content"
               >
-                ${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>`}
+                ${
+                  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>
             </div>
           </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>`}
+          ${
+            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>
     `;

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

@@ -7,12 +7,17 @@ import type { CollectionFormLabels } from "./collection-types.js";
 
 export interface NavManagerItem {
   id: string;
-  type: "link" | "system" | "collection" | "page";
+  type: "link" | "system" | "collection" | "smart_collection" | "page";
   systemKey?: SystemNavKey;
   collectionId?: string;
+  smartCollectionId?: string;
   postId?: string;
+  /** Author's override, or `""` when the item follows its target's title */
   label: string;
+  /** Resolved label from the server-rendered list */
   displayLabel?: string;
+  /** Target's current title, present on mutation responses */
+  targetTitle?: string;
   url: string;
   placement?: "header" | "more";
 }
@@ -24,6 +29,36 @@ export interface NavManagerPage {
   updatedAt: number;
 }
 
+/**
+ * What the server made of an address the author pasted into the page picker:
+ * the item it could become, or why it cannot become one.
+ *
+ * `address` is what to show back and what to prefill the link form with — the
+ * public path for anything on this site, the pasted URL for anything else.
+ */
+export type NavAddressResolution =
+  | { kind: "page"; address: string; page: NavManagerPage }
+  | {
+      kind: "collection";
+      address: string;
+      collection: { id: string; title: string; slug: string };
+    }
+  | {
+      kind: "smart_collection";
+      address: string;
+      smartCollection: { id: string; title: string; slug: string };
+    }
+  | {
+      kind:
+        | "external"
+        | "link_only"
+        | "untitled"
+        | "unpublished"
+        | "private"
+        | "not_found";
+      address: string;
+    };
+
 export interface SystemNavConfig {
   key: SystemNavKey;
   label: string;
@@ -37,6 +72,14 @@ export interface NavManagerCollection {
   slug: string;
   /** Group label from directory divider, if this collection belongs to one */
   group?: string | null;
+  /**
+   * True for a collection whose members come from conditions.
+   *
+   * Both kinds belong in navigation — a reader following either lands on a
+   * page of posts — so the picker lists them together and marks which is
+   * which, rather than keeping two lists that would need two empty states.
+   */
+  isSmart?: boolean;
 }
 
 export interface NavManagerSuggestedLink {
@@ -84,7 +127,17 @@ export interface NavManagerLabels {
   addPageDescription: string;
   addPage: string;
   searchPages: string;
+  searchPagesHint: string;
   recentPages: string;
+  addressMatch: string;
+  addressAlreadyAdded: string;
+  addressNotFound: string;
+  addressUnpublished: string;
+  addressPrivate: string;
+  addressUntitled: string;
+  addressExternal: string;
+  addressLinkOnly: string;
+  addressAddAsLink: string;
   searchingPages: string;
   noMatchingPages: string;
   noPages: string;
@@ -111,6 +164,8 @@ export interface NavManagerLabels {
   back: string;
   collection: string;
   addCollection: string;
+  /** Tooltip on the icon marking a smart collection in the picker. */
+  smartCollectionLabel?: string;
   addCollectionToNavigation: string;
   addCollectionDescription: string;
   allCollectionsAdded: string;
@@ -126,6 +181,12 @@ export interface NavManagerLabels {
   confirmDeleteCollection: string;
   headerSection: string;
   moreSection: string;
+  /**
+   * Label on the preview's overflow button. Mirrors the real site header, so it
+   * comes from the public nav catalog (untranslated) rather than `moreSection`,
+   * which is the translated settings section heading.
+   */
+  previewMore: string;
   moreEmptyHint: string;
   placementSaved: string;
   cancel: string;

package/src/client/components/settings-types.ts

@@ -23,9 +23,9 @@ export interface SettingsLabels {
   aboutPageConflict: string;
   createAboutPage: string;
   editAboutPage: string;
-  languageAndTime: string;
+  timeSection: string;
   home: string;
-  search: string;
+  siteVisibility: string;
   siteName: string;
   aboutBlog: string;
   aboutBlogHelp: string;
@@ -37,6 +37,7 @@ export interface SettingsLabels {
   mainRssFeedWarning: string;
   availableFeedUrls: string;
   availableFeedUrlsHelp: string;
+  feedsDocs: string;
   mainFeedUrl: string;
   latestFeedUrl: string;
   featuredFeedUrl: string;
@@ -48,23 +49,20 @@ export interface SettingsLabels {
   featuredFeedOptionDescription: string;
   showJantBrandingOnHome: string;
   markdownSupported: string;
-  siteLanguage: string;
-  siteLanguageHelp: string;
-  /** Placeholder shown inside the locale combobox search field. */
-  siteLanguageSearchPlaceholder: string;
-  /** Empty-state message when the search filters out every option. */
-  siteLanguageNoMatches: string;
-  /** Lead text before the live `<html lang>` preview. */
-  contentLanguagePreview: string;
-  dashboardLanguage: string;
-  dashboardLanguageHelp: string;
-  cjkFont: string;
-  cjkFontHelp: string;
   timeZone: string;
 
   // Search
   allowIndexing: string;
   demoSeoLocked: string;
+  discoverName: string;
+  discoverRules: string;
+  discoverEnabled: string;
+  discoverIntro: string;
+  discoverDemoLocked: string;
+  discoverFeedsOffLocked: string;
+  discoverSearchOff: string;
+  discoverAnnounce: string;
+  discoverAnnounceManual: string;
 
   // Actions
   save: string;
@@ -80,29 +78,16 @@ export interface SettingsTimezone {
   label: string;
 }
 
-/** CJK font option for the select dropdown */
-export interface SettingsCjkFont {
-  value: string;
-  label: string;
-}
-
-/** Dashboard UI language option for the select dropdown */
-export interface SettingsDashboardLanguage {
-  value: string;
-  label: string;
-}
-
 export interface SettingsInitialData {
   siteName: string;
   siteDescription: string;
-  siteLanguage: string;
-  dashboardLanguage: string;
-  cjkSerifFont: string;
   mainRssFeed: string;
   timeZone: string;
   siteFooter: string;
   showJantBrandingOnHome: boolean;
   noindex: boolean;
+  /** Stored Discover choice; "" when the owner has never used the control. */
+  discover: string;
 }
 
 export type SettingsAboutPageStatus =

package/src/client/components/smart-collection-conditions.ts

@@ -0,0 +1,285 @@
+/**
+ * Condition controls for the smart collection dialog.
+ *
+ * Each control renders one dimension and produces a string in that dimension's
+ * **URL spelling** — the same one a query string carries. That is the whole
+ * trick: the dialog never encodes a value itself, so it cannot invent a second
+ * vocabulary beside the registry's, and adding a dimension that reuses an
+ * existing control shape adds nothing here at all.
+ *
+ * There is no "unset" option in any control. A row exists or it does not, and
+ * that is already how "unset" is said; a second way to say it would be two
+ * switches for one state.
+ */
+
+import { html, type TemplateResult } from "lit";
+import {
+  FILTER_DIMENSION_KEYS,
+  FILTER_DIMENSIONS,
+  parsePostFilterSelection,
+  serializePostFilterSelection,
+  type PostFilterSelection,
+} from "../../lib/filter-dimensions.js";
+import { FORMATS, MEDIA_KINDS } from "../../types/constants.js";
+import type {
+  SmartCollectionDialogLabels,
+  SmartConditionRow,
+} from "./smart-collection-dialog-types.js";
+
+export type DimensionKey = (typeof FILTER_DIMENSION_KEYS)[number];
+
+type Emit = (value: string) => void;
+
+interface DimensionControl {
+  /** The value a freshly added row starts on. */
+  defaultValue: string;
+  render(
+    value: string,
+    emit: Emit,
+    labels: SmartCollectionDialogLabels,
+  ): TemplateResult;
+}
+
+/** A plain `<select>` over a fixed list of URL values. */
+function selectControl(
+  dimension: DimensionKey,
+  values: readonly string[],
+): DimensionControl["render"] {
+  return (value, emit, labels) => html`
+    <select
+      class="select smart-condition-select"
+      .value=${value}
+      @change=${(event: Event) =>
+        emit((event.target as HTMLSelectElement).value)}
+    >
+      ${values.map(
+        (option) => html`
+          <option value=${option} ?selected=${option === value}>
+            ${labels.values[`${dimension}.${option}`] ?? option}
+          </option>
+        `,
+      )}
+    </select>
+  `;
+}
+
+/** `any` / `none`, the two states a presence dimension has. */
+function presenceControl(dimension: DimensionKey): DimensionControl["render"] {
+  return selectControl(dimension, ["any", "none"]);
+}
+
+/**
+ * The media control, over the one folded vocabulary.
+ *
+ * `any`, `none`, or a set of kinds — one value, because a presence flag beside
+ * a kind list would allow "no media, of kinds image and video", which means
+ * nothing. Ticking a kind while `any` or `none` is selected replaces it.
+ */
+const mediaControl: DimensionControl["render"] = (value, emit, labels) => {
+  const kinds = value === "any" || value === "none" ? [] : value.split(",");
+
+  const toggleKind = (kind: string, checked: boolean) => {
+    const next = checked
+      ? [...kinds, kind]
+      : kinds.filter((entry) => entry !== kind);
+    // An empty set is not a third meaning — it falls back to "has media".
+    emit(next.length > 0 ? next.join(",") : "any");
+  };
+
+  return html`
+    <div class="smart-condition-media">
+      <select
+        class="select smart-condition-select"
+        .value=${value === "none" ? "none" : "any"}
+        @change=${(event: Event) =>
+          emit((event.target as HTMLSelectElement).value)}
+      >
+        <option value="any" ?selected=${value !== "none"}>
+          ${labels.values["media.any"] ?? "any"}
+        </option>
+        <option value="none" ?selected=${value === "none"}>
+          ${labels.values["media.none"] ?? "none"}
+        </option>
+      </select>
+      ${
+        value === "none"
+          ? null
+          : html`
+              <div class="smart-condition-media-kinds">
+                ${MEDIA_KINDS.map(
+                  (kind) => html`
+                    <label class="smart-condition-kind">
+                      <input
+                        class="input"
+                        type="checkbox"
+                        .checked=${kinds.includes(kind)}
+                        @change=${(event: Event) =>
+                          toggleKind(
+                            kind,
+                            (event.target as HTMLInputElement).checked,
+                          )}
+                      />
+                      <span>${labels.values[`media.${kind}`] ?? kind}</span>
+                    </label>
+                  `,
+                )}
+              </div>
+            `
+      }
+    </div>
+  `;
+};
+
+/** A year, typed. Bounded below by the first year a Unix timestamp can name. */
+const yearControl: DimensionControl["render"] = (value, emit) => html`
+  <input
+    class="input smart-condition-year"
+    type="number"
+    min="1971"
+    step="1"
+    .value=${value}
+    @input=${(event: Event) => emit((event.target as HTMLInputElement).value)}
+  />
+`;
+
+/**
+ * A collection, chosen from the ones this site has.
+ *
+ * The options are filled in by the dialog host, which knows the site's
+ * collections; the control only spells the chosen slug.
+ */
+const collectionControl: DimensionControl["render"] = (value, emit, labels) => {
+  const options = Object.entries(labels.values)
+    .filter(([key]) => key.startsWith("collection."))
+    .map(([key, label]) => [key.slice("collection.".length), label] as const);
+
+  return html`
+    <select
+      class="select smart-condition-select"
+      .value=${value}
+      @change=${(event: Event) =>
+        emit((event.target as HTMLSelectElement).value)}
+    >
+      ${options.map(
+        ([slug, label]) => html`
+          <option value=${slug} ?selected=${slug === value}>${label}</option>
+        `,
+      )}
+    </select>
+  `;
+};
+
+/** One control per dimension. Adding a dimension that reuses a shape adds none. */
+export const DIMENSION_CONTROLS: Record<DimensionKey, DimensionControl> = {
+  collection: { defaultValue: "", render: collectionControl },
+  format: {
+    defaultValue: FORMATS[0],
+    render: selectControl("format", FORMATS),
+  },
+  title: { defaultValue: "any", render: presenceControl("title") },
+  year: {
+    defaultValue: String(new Date().getUTCFullYear()),
+    render: yearControl,
+  },
+  media: { defaultValue: "any", render: mediaControl },
+  replies: { defaultValue: "any", render: presenceControl("replies") },
+  visibility: {
+    defaultValue: "public",
+    // `private` is absent on purpose: a smart collection is a published page,
+    // so it can never name the one set only its author can see.
+    render: selectControl("visibility", ["public", "featured", "hidden"]),
+  },
+};
+
+/** The empty selection — no conditions, which means every post. */
+export function emptySelection(): PostFilterSelection {
+  return {};
+}
+
+/**
+ * Read a stored selection into condition rows.
+ *
+ * Goes through the registry's serializer so every row holds the same URL
+ * spelling the controls produce.
+ *
+ * @param selection - A stored selection, as the API returns it
+ * @returns One row per set dimension, in registry order
+ * @example
+ * selectionToRows({ format: "quote" }); // [{ key: "format", value: "quote" }]
+ */
+export function selectionToRows(
+  selection: Record<string, unknown>,
+): SmartConditionRow[] {
+  const params = serializePostFilterSelection(
+    selection as PostFilterSelection,
+    { collections: collectionVocabulary() },
+  );
+
+  const rows: SmartConditionRow[] = [];
+  for (const key of FILTER_DIMENSION_KEYS) {
+    const value = params.get(FILTER_DIMENSIONS[key].url.param);
+    if (value !== null) rows.push({ key, value });
+  }
+  return rows;
+}
+
+/**
+ * Turn condition rows back into a selection the API accepts.
+ *
+ * Runs the rows through the registry's own parser rather than mapping them by
+ * hand — the values are already in the URL spelling, so this is exactly the
+ * read the archive performs.
+ *
+ * @param rows - The dialog's condition rows
+ * @returns The selection, with any unreadable row dropped
+ * @example
+ * rowsToSelection([{ key: "format", value: "quote" }]); // { format: "quote" }
+ */
+export function rowsToSelection(
+  rows: readonly SmartConditionRow[],
+): PostFilterSelection {
+  const params = new URLSearchParams();
+  for (const row of rows) {
+    if (!row.value) continue;
+    const dimension = FILTER_DIMENSIONS[row.key];
+    if (dimension) params.set(dimension.url.param, row.value);
+  }
+
+  const { selection } = parsePostFilterSelection(
+    (key) => params.get(key) ?? undefined,
+    { collections: collectionVocabulary() },
+  );
+  return selection;
+}
+
+/**
+ * The site's collections, as slug↔id lookups.
+ *
+ * Filled in by the dialog host before the dialog opens. Kept module-level
+ * because both conversions above need it and neither is called from a place
+ * that has it to hand.
+ */
+let vocabulary = {
+  idBySlug: new Map<string, string>(),
+  slugById: new Map<string, string>(),
+  titleById: new Map<string, string>(),
+};
+
+export function setCollectionVocabulary(
+  collections: readonly { id: string; slug: string; title: string }[],
+): void {
+  const idBySlug = new Map<string, string>();
+  const slugById = new Map<string, string>();
+  const titleById = new Map<string, string>();
+  for (const collection of collections) {
+    idBySlug.set(collection.slug, collection.id);
+    slugById.set(collection.id, collection.slug);
+    titleById.set(collection.id, collection.title);
+  }
+  vocabulary = { idBySlug, slugById, titleById };
+}
+
+/** The current lookups. Exported so the upgrade check can resolve a slug. */
+export function collectionVocabulary() {
+  return vocabulary;
+}