@wizzlethorpe/vaults 0.2.0 → 0.5.0

package/dist/favicon.js

@@ -5,29 +5,29 @@ const ICON_SIZE = 32;
 /**
  * Render the favicon for a vault to an ICO buffer. If the user pointed
  * `settings.favicon` at a real file, we resize that image; otherwise we
- * generate a default; a rounded square in the vault's accent colour with
- * a single uppercase letter centred on it.
+ * generate a default; a rounded square in the theme background colour with
+ * a single uppercase letter centred in the vault accent colour.
  */
 export async function buildFavicon(opts) {
     const png = opts.faviconPath
         ? await renderUserImage(opts.vaultPath, opts.faviconPath)
-        : await renderDefaultIcon(opts.letter, opts.accentColor);
-    return wrapPngAsIco(png, ICON_SIZE);
+        : await renderDefaultIcon(opts.letter, opts.backgroundColor, opts.accentColor);
+    // Modern browsers support PNG favicons; return directly.
+    return png;
 }
 async function renderUserImage(vaultPath, faviconPath) {
     const abs = isAbsolute(faviconPath) ? faviconPath : join(vaultPath, faviconPath);
     const source = await readFile(abs);
     return sharp(source).resize(ICON_SIZE, ICON_SIZE, { fit: "cover" }).png().toBuffer();
 }
-async function renderDefaultIcon(letter, accent) {
-    const fg = bestForeground(accent);
+async function renderDefaultIcon(letter, bg, accent) {
     // Round-cornered square with a single letter centred. Embedded as an
     // SVG so sharp rasterises it cleanly at the target size.
     const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="5" fill="${escAttr(accent)}"/>
+  <rect width="32" height="32" rx="5" fill="${escAttr(bg)}"/>
   <text x="16" y="22" font-family="Iowan Old Style, Palatino Linotype, Georgia, serif"
         font-size="22" font-weight="700" text-anchor="middle"
-        fill="${escAttr(fg)}">${escText(letter)}</text>
+        fill="${escAttr(accent)}">${escText(letter)}</text>
 </svg>`;
     return sharp(Buffer.from(svg)).resize(ICON_SIZE, ICON_SIZE).png().toBuffer();
 }
@@ -35,29 +35,6 @@ async function renderDefaultIcon(letter, accent) {
  * Wrap a PNG buffer in an ICO container. Modern browsers accept PNG-in-ICO
  * for any size; the dirent's width/height bytes are advisory.
  *
- * Layout:
- *   ICONDIR     (6 bytes)   reserved=0, type=1, count=1
- *   ICONDIRENTRY (16 bytes) width, height, ..., size, offset
- *   <PNG bytes>
- */
-function wrapPngAsIco(png, size) {
-    const HEADER = 6 + 16;
-    const buf = Buffer.alloc(HEADER + png.length);
-    buf.writeUInt16LE(0, 0); // reserved
-    buf.writeUInt16LE(1, 2); // type: icon
-    buf.writeUInt16LE(1, 4); // image count
-    buf.writeUInt8(size === 256 ? 0 : size, 6); // width  (0 = 256)
-    buf.writeUInt8(size === 256 ? 0 : size, 7); // height
-    buf.writeUInt8(0, 8); // palette
-    buf.writeUInt8(0, 9); // reserved
-    buf.writeUInt16LE(1, 10); // colour planes
-    buf.writeUInt16LE(32, 12); // bits per pixel
-    buf.writeUInt32LE(png.length, 14); // bytes of image data
-    buf.writeUInt32LE(HEADER, 18); // offset to image data
-    png.copy(buf, HEADER);
-    return buf;
-}
-/**
  * Pick black or white as the letter colour against `accent` so the icon
  * stays readable for whatever colour the user picked. Uses W3C relative
  * luminance.

package/dist/favicon.js.map

@@ -1 +1 @@
-{"version":3,"file":"favicon.js","sourceRoot":"","sources":["../src/favicon.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"favicon.js","sourceRoot":"","sources":["../src/favicon.ts"],"names":[],"mappings":"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"}

package/dist/render/bases.js

@@ -1,27 +1,37 @@
-// Minimum-viable Obsidian Bases support.
+// Obsidian Bases support.
 //
-// Parses ```base / ```bases code fences inside markdown, evaluates the
-// query against the variant's visible page set, and emits a sortable +
-// filterable HTML table.
+// Two entry points:
+//   1. The remark plugin parses ```base / ```bases code fences inline.
+//   2. renderBase() is exported so embed.ts can render ![[Foo]] when
+//      Foo.base exists in the vault.
 //
-// Supported (v1):
+// Both paths share the same parser + evaluator + view renderers.
+//
+// Supported (v3):
 //   - filters:   string expression OR { and|or|not: [expr|tree] } tree
-//   - views:     [{ type: table, name?, limit?, order?: [identifiers] }]
-//   - properties: { <id>: { displayName? } }
+//   - views:     table | cards | list. table is sortable; cards is a
+//                grid of clickable cards with cover images; list is a
+//                compact bulleted list.
+//   - sort:      [{ column, direction }] honored on every view type;
+//                multi-key (later entries break ties from earlier ones).
+//   - formulas:  top-level `formulas: { name: expr }` block. Reference
+//                as `formula.name` from order, filters, and other
+//                formulas. Memoized per row; cycles raise an error.
+//   - properties: { <id>: { displayName? } }; works for note.X,
+//                 file.X, and formula.X column ids.
 //   - identifiers: file.{name,basename,path,folder,ext,mtime,ctime,tags}
-//                  note.X / bare X (frontmatter)
+//                  note.X / bare X (frontmatter), formula.X
 //   - operators:  == != < <= > >= && || !  + (string concat / numeric add)
 //   - methods:    file.hasTag("..."), file.inFolder("..."),
 //                 stringValue.contains("..."), .startsWith, .endsWith,
 //                 .lower, .upper
 //   - literals:   strings (double or single quoted), numbers, true/false, null
+//   - cards-only: image: <prop>, imageFit: cover|contain, imageAspectRatio
 //
-// Deferred (TODO):
-//   - .base standalone files (only inline code fences for now)
-//   - formulas, summaries, groupBy
-//   - cards/list/map view types
+// Deferred:
+//   - summaries, groupBy
+//   - map view type
 //   - duration arithmetic (now() - "1 week" etc.)
-//   - regex / list filter chains
 //
 // Unknown view types and unknown YAML keys are warned-on, not fatal —
 // real .base files in the wild include undocumented fields.
@@ -42,7 +52,12 @@ export function basesPlugin(opts) {
         });
     };
 }
-function renderBase(source, context, warnings) {
+/**
+ * Public entry point. Renders a base's YAML source as HTML. If `viewName`
+ * is given, only the matching view is rendered (used for the
+ * `![[MyBase#ViewName]]` embed form).
+ */
+export function renderBase(source, context, warnings, viewName) {
     let doc;
     try {
         doc = yaml.load(source) ?? {};
@@ -50,8 +65,13 @@ function renderBase(source, context, warnings) {
     catch (err) {
         return errorBlock(`Failed to parse base YAML: ${err.message}`);
     }
-    // Evaluate filters once for the whole doc; views can additionally narrow.
     const allRows = collectRows(context);
+    try {
+        setupFormulas(allRows, doc);
+    }
+    catch (err) {
+        return errorBlock(`Formula error: ${err.message}`);
+    }
     let baseRows;
     try {
         baseRows = doc.filters ? allRows.filter((row) => evalFilter(doc.filters, row)) : allRows;
@@ -59,19 +79,101 @@ function renderBase(source, context, warnings) {
     catch (err) {
         return errorBlock(`Filter error: ${err.message}`);
     }
-    const views = doc.views && doc.views.length > 0 ? doc.views : [{ type: "table" }];
+    let views = doc.views && doc.views.length > 0 ? doc.views : [{ type: "table" }];
+    if (viewName) {
+        const matched = views.filter((v) => v.name === viewName);
+        if (matched.length === 0) {
+            return errorBlock(`Bases: no view named '${esc(viewName)}'.`);
+        }
+        views = matched;
+    }
     const blocks = [];
     for (const view of views) {
-        if (view.type !== "table") {
-            if (warnings)
-                warnings.push({ kind: "broken-link", target: `bases view type '${view.type}' (only 'table' is supported)` });
-            blocks.push(errorBlock(`Bases: view type '${esc(view.type)}' is not supported (use 'table').`));
-            continue;
+        try {
+            if (view.type === "table") {
+                blocks.push(renderTableView(view, baseRows, doc, context));
+            }
+            else if (view.type === "cards") {
+                blocks.push(renderCardsView(view, baseRows, doc, context));
+            }
+            else if (view.type === "list") {
+                blocks.push(renderListView(view, baseRows, doc));
+            }
+            else {
+                if (warnings)
+                    warnings.push({ kind: "broken-link", target: `bases view type '${view.type}'` });
+                blocks.push(errorBlock(`Bases: view type '${esc(view.type)}' is not supported.`));
+            }
+        }
+        catch (err) {
+            // Errors here come from formula evaluation, expression parsing, or
+            // bad sort keys; surface them inline so the rest of the page still
+            // renders rather than aborting the build.
+            blocks.push(errorBlock(`Bases: ${err.message}`));
         }
-        blocks.push(renderTableView(view, baseRows, doc, context));
     }
+    // Multi-view bases render as a tabbed container; single-view (or
+    // viewName-pinned, where the user already chose one) renders bare so
+    // simple cases stay simple. The tab strip uses each view's `name` for
+    // its label; missing names fall back to "View N".
+    if (blocks.length > 1)
+        return wrapAsTabs(blocks, views);
     return blocks.join("\n");
 }
+function wrapAsTabs(blocks, views) {
+    const tabs = blocks.map((_, i) => {
+        const label = views[i]?.name?.trim() || `View ${i + 1}`;
+        const isActive = i === 0;
+        return `<button type="button" role="tab" data-bases-tab="${i}"`
+            + ` aria-selected="${isActive ? "true" : "false"}"`
+            + ` tabindex="${isActive ? "0" : "-1"}"`
+            + ` class="bases-tab${isActive ? " bases-tab-active" : ""}">`
+            + esc(label) + `</button>`;
+    }).join("");
+    const panels = blocks.map((html, i) => `<div class="bases-tab-panel" role="tabpanel" data-bases-tab-panel="${i}"${i === 0 ? "" : " hidden"}>${html}</div>`).join("");
+    return `<div class="bases-tabbed"><div class="bases-tab-strip" role="tablist">${tabs}</div>${panels}</div>`;
+}
+const FORMULA_VISITING = Symbol("formula-visiting");
+/**
+ * Parse the doc's formulas once and attach them to each row alongside an
+ * empty memo cache. Lazily evaluated by `resolveFormula` on first access.
+ */
+function setupFormulas(rows, doc) {
+    if (!doc.formulas)
+        return;
+    const exprs = {};
+    for (const [k, v] of Object.entries(doc.formulas)) {
+        if (typeof v !== "string")
+            continue;
+        try {
+            exprs[k] = parseExpr(v);
+        }
+        catch (err) {
+            throw new Error(`'${k}': ${err.message}`);
+        }
+    }
+    for (const row of rows) {
+        row.formulaExprs = exprs;
+        row.formulaCache = new Map();
+    }
+}
+function resolveFormula(key, row) {
+    if (!row.formulaExprs || !row.formulaCache)
+        return undefined;
+    const expr = row.formulaExprs[key];
+    if (!expr)
+        return undefined;
+    if (row.formulaCache.has(key)) {
+        const v = row.formulaCache.get(key);
+        if (v === FORMULA_VISITING)
+            throw new Error(`Formula cycle: ${key}`);
+        return v;
+    }
+    row.formulaCache.set(key, FORMULA_VISITING);
+    const value = evalExpr(expr, row);
+    row.formulaCache.set(key, value);
+    return value;
+}
 function collectRows(context) {
     // pages map has multiple keys (basename slug, path slug, aliases) per page.
     // Dedupe by `path` so each page appears once.
@@ -306,7 +408,14 @@ function evalExpr(e, row) {
             // are handled in `call` below; here we just unwrap the value.
             if (obj == null)
                 return undefined;
-            if (typeof obj === "object" && !Array.isArray(obj)) {
+            if (typeof obj === "string" || Array.isArray(obj)) {
+                // Expose .length on strings and arrays so `name.length` works as
+                // a sort key without needing the explicit method-call form.
+                if (e.name === "length")
+                    return obj.length;
+                return undefined;
+            }
+            if (typeof obj === "object") {
                 return obj[e.name];
             }
             return undefined;
@@ -384,6 +493,8 @@ function resolveIdentifier(name, row) {
         return fileProperty(name.slice(5), row);
     if (name.startsWith("note."))
         return row.fm[name.slice(5)];
+    if (name.startsWith("formula."))
+        return resolveFormula(name.slice(8), row);
     // Bare identifier: resolve against frontmatter (Obsidian shorthand).
     return row.fm[name];
 }
@@ -484,13 +595,12 @@ function renderTableView(view, allRows, doc, context) {
     }
     const columns = view.order && view.order.length > 0 ? view.order : ["file.name"];
     const labels = columns.map((id) => columnLabel(id, doc));
-    // Pre-compute every row's display + raw value per column.
-    const tbl = rows.map((row) => columns.map((id) => valueForColumn(id, row, context)));
-    // Default sort: by first column, ascending.
-    const sortIdx = 0;
-    tbl.sort((a, b) => compare(a[sortIdx].raw, b[sortIdx].raw));
+    // Apply view-level sort (or default to alphabetical by title) before
+    // materializing cells; sort needs raw values, not rendered HTML.
+    rows = applySort(rows, view.sort);
     if (view.limit && view.limit > 0)
-        tbl.length = Math.min(tbl.length, view.limit);
+        rows = rows.slice(0, view.limit);
+    const tbl = rows.map((row) => columns.map((id) => valueForColumn(id, row, context)));
     const header = labels.map((l, i) => `<th data-col="${i}" tabindex="0">${esc(l)}</th>`).join("");
     const body = tbl.map((cells, ri) => {
         const tds = cells.map((c) => `<td data-raw="${escAttr(toSortKey(c.raw))}">${c.html}</td>`).join("");
@@ -511,6 +621,189 @@ function renderTableView(view, allRows, doc, context) {
   </div>
 </div>`;
 }
+// ── Cards view ─────────────────────────────────────────────────────────────
+const COVER_IMG_RE = /!\[\[([^\[\]\n|#]+\.(?:png|jpe?g|webp|gif|svg|avif|tiff?))(?:\|[^\]]*)?\]\]/i;
+function renderCardsView(view, allRows, doc, context) {
+    let rows = allRows;
+    if (view.filters)
+        rows = rows.filter((row) => evalFilter(view.filters, row));
+    rows = applySort(rows, view.sort);
+    if (view.limit && view.limit > 0)
+        rows = rows.slice(0, view.limit);
+    // Up to 2 metadata fields shown under the title (skipping file.name).
+    const metaCols = (view.order ?? []).filter((c) => c !== "file.name").slice(0, 2);
+    // The HTML pipeline's sanitize schema strips `style` attributes from divs,
+    // so we can't drive cover layout from inline CSS. Encode imageFit as a
+    // class instead; aspect-ratio rides on a CSS variable set via the only
+    // attribute we keep, `class` (the variable is read by styles.css).
+    const fitClass = view.imageFit === "contain" ? "bases-card-cover-contain" : "bases-card-cover-cover";
+    const aspectClass = view.imageAspectRatio ? aspectRatioClass(view.imageAspectRatio) : "";
+    const cards = rows.map((row) => {
+        const href = "/" + row.page.path.replace(/\.md$/i, "").split("/").map(encodeURIComponent).join("/");
+        const cover = findCoverImage(row, view.image, context);
+        const coverHtml = cover
+            ? `<div class="bases-card-cover ${fitClass}${aspectClass ? " " + aspectClass : ""}"><img src="${escAttr(cover)}" alt="" loading="lazy"></div>`
+            : "";
+        const metaHtml = metaCols
+            .map((id) => renderValue(resolveIdentifier(id, row)))
+            .filter(Boolean)
+            .map((v) => `<div class="bases-card-meta">${v}</div>`)
+            .join("");
+        return `<a class="bases-card" href="${escAttr(href)}">
+      ${coverHtml}
+      <div class="bases-card-body">
+        <div class="bases-card-title">${esc(row.page.title)}</div>
+        ${metaHtml}
+      </div>
+    </a>`;
+    }).join("");
+    const caption = view.name ? `<div class="bases-caption">${esc(view.name)}</div>` : "";
+    return `<div class="bases-block bases-cards-block">
+  ${caption}
+  <div class="bases-toolbar">
+    <input type="search" class="bases-filter" placeholder="Filter…" aria-label="Filter cards">
+    <span class="bases-count" data-total="${rows.length}">${rows.length} ${rows.length === 1 ? "card" : "cards"}</span>
+  </div>
+  <div class="bases-cards">${cards}</div>
+</div>`;
+}
+// ── List view ──────────────────────────────────────────────────────────────
+function renderListView(view, allRows, doc) {
+    let rows = allRows;
+    if (view.filters)
+        rows = rows.filter((row) => evalFilter(view.filters, row));
+    rows = applySort(rows, view.sort);
+    if (view.limit && view.limit > 0)
+        rows = rows.slice(0, view.limit);
+    // Optional inline meta after the title (joined with bullets).
+    const metaCols = (view.order ?? []).filter((c) => c !== "file.name");
+    const items = rows.map((row) => {
+        const href = "/" + row.page.path.replace(/\.md$/i, "").split("/").map(encodeURIComponent).join("/");
+        const meta = metaCols
+            .map((id) => renderValue(resolveIdentifier(id, row)))
+            .filter(Boolean)
+            .join(' <span class="bases-list-sep">·</span> ');
+        const metaSpan = meta ? `<span class="bases-list-meta">${meta}</span>` : "";
+        return `<li><a class="internal internal-link" href="${escAttr(href)}">${esc(row.page.title)}</a>${metaSpan}</li>`;
+    }).join("");
+    // Keep `doc` in the signature for symmetry with the other view renderers,
+    // even though list rendering doesn't currently consult properties.
+    void doc;
+    const caption = view.name ? `<div class="bases-caption">${esc(view.name)}</div>` : "";
+    return `<div class="bases-block bases-list-block">
+  ${caption}
+  <ul class="bases-list">${items}</ul>
+</div>`;
+}
+// ── Sorting ────────────────────────────────────────────────────────────────
+/**
+ * Multi-key stable sort honoring `view.sort`. Each entry contributes one
+ * comparison; later entries break ties from earlier ones. Direction
+ * defaults to ASC. With no spec, sort alphabetically by page title so
+ * output stays deterministic regardless of which view first ran.
+ */
+function applySort(rows, spec) {
+    if (!spec || spec.length === 0) {
+        return [...rows].sort((a, b) => compare(a.page.title, b.page.title));
+    }
+    return [...rows].sort((a, b) => {
+        for (const s of spec) {
+            const av = sortKeyFor(s.column, a);
+            const bv = sortKeyFor(s.column, b);
+            const c = compare(av, bv);
+            if (c !== 0)
+                return s.direction === "DESC" ? -c : c;
+        }
+        return 0;
+    });
+}
+function sortKeyFor(id, row) {
+    if (id === "file.name" || id === "file.basename")
+        return row.page.title;
+    return resolveIdentifier(id, row);
+}
+/**
+ * Cover-image source for a card. Preference order:
+ *   1. The view's `image:` setting names a frontmatter property → use that.
+ *   2. Look for the first `![[image.ext]]` embed in the page body.
+ * Returns the served (post-compression) URL, or null.
+ */
+function findCoverImage(row, prop, context) {
+    let raw = null;
+    if (prop) {
+        const v = row.fm[prop];
+        if (typeof v === "string" && v.length > 0)
+            raw = v;
+    }
+    // Fall back to the per-page resolved cover (image: frontmatter, or first
+    // body embed when settings.auto_image is on). Already a served URL.
+    if (!raw && row.page.coverImage)
+        return row.page.coverImage;
+    if (!raw) {
+        // Last-resort body scan: covers older callers that pre-date PageMeta.coverImage.
+        const slug = slugifySimple(row.page.path.replace(/\.md$/i, ""));
+        const source = context.markdownContent.get(slug);
+        if (source) {
+            const m = COVER_IMG_RE.exec(source);
+            if (m && m[1])
+                raw = m[1];
+        }
+    }
+    if (!raw)
+        return null;
+    // Strip a leading `![[` / trailing `]]` if the user set a wikilink-style
+    // value (`cover: ![[portrait.webp]]`), then look up in the image index.
+    raw = raw.replace(/^!\[\[/, "").replace(/\]\]$/, "").split("|")[0].trim();
+    const image = context.images.get(slugifySimple(raw.split("/").pop() || raw));
+    if (image)
+        return "/" + image.outputPath.split("/").map(encodeURIComponent).join("/");
+    // Already a URL or path: use as-is.
+    return raw.startsWith("http") ? raw : "/" + raw.split("/").map(encodeURIComponent).join("/");
+}
+/**
+ * Pick the closest pre-defined CSS class for the requested aspect ratio. We
+ * can't drive aspect-ratio from inline style (the sanitize schema strips it)
+ * so we offer a curated set covering the common photo/video/portrait shapes.
+ * `1` (square), `1.5` (3:2), `1.333` (4:3), `1.778` (16:9), `0.75` (3:4),
+ * `0.667` (2:3). Numeric strings like "1.5" and ratio strings like "3/2" or
+ * "3 / 2" are both accepted.
+ */
+function aspectRatioClass(value) {
+    const raw = String(value).trim();
+    let n;
+    const m = /^(\d+(?:\.\d+)?)\s*\/\s*(\d+(?:\.\d+)?)$/.exec(raw);
+    if (m)
+        n = Number(m[1]) / Number(m[2]);
+    else
+        n = Number(raw);
+    if (!Number.isFinite(n) || n <= 0)
+        return "";
+    const buckets = [
+        [1, "bases-card-cover-1x1"],
+        [1.5, "bases-card-cover-3x2"],
+        [1.333, "bases-card-cover-4x3"],
+        [1.778, "bases-card-cover-16x9"],
+        [0.75, "bases-card-cover-3x4"],
+        [0.667, "bases-card-cover-2x3"],
+    ];
+    let best = buckets[0];
+    for (const b of buckets) {
+        if (Math.abs(b[0] - n) < Math.abs(best[0] - n))
+            best = b;
+    }
+    return best[1];
+}
+// Mirror the slugify in build.ts without taking a dependency on the renderer's
+// slug.ts (which imports from a sibling module). Same algorithm.
+function slugifySimple(s) {
+    return s
+        .normalize("NFKD")
+        .replace(/[̀-ͯ]/g, "")
+        .toLowerCase()
+        .replace(/\.md$/i, "")
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
 function valueForColumn(id, row, context) {
     // file.name renders as a link to the page.
     if (id === "file.name" || id === "file.basename") {
@@ -553,6 +846,8 @@ function columnLabel(id, doc) {
         return explicit;
     if (id.startsWith("note."))
         return id.slice(5);
+    if (id.startsWith("formula."))
+        return id.slice(8);
     if (id.startsWith("file.")) {
         const tail = id.slice(5);
         return tail.charAt(0).toUpperCase() + tail.slice(1);