wiki-formant 0.113.0 → 0.115.0

package/README.md

@@ -43,7 +43,7 @@ await store.save({ tagPath, slug, content, authorId, message, baseVersion: page.
 - **A save is one statement**: the page update and its revision in a CTE guarded on the version read. A lost race, a stale `baseVersion`, a page deleted since or a rename onto a taken slug writes nothing and throws a 409 `HttpError` whose body names the reason as `conflict`: `stale` and `deleted` mean reload, `taken` means another slug (`ConflictReason`).
 - **The bump is the diff's**: added, removed or moved blocks are `major`, changed prose or title `minor`; `change` overrides it. A metadata-only save moves no version and writes no revision.
 - **History is diffed on read.** A revision stores the page as saved. `history(pageId, { limit })` reads one row more than it returns, so the oldest entry shown has its real predecessor.
-- **Listings carry a snippet, not the article**: `list`, `recent` and `byIds` drop `content`.
+- **Listings carry a snippet, not the article**: `list`, `recent` and `byIds` drop `content`, and carry `banner`, the page's picture for its card (`metadata.banner`, or the `banner` option's reading).
 - **Search is four tiers**: title prefix, title, literal prose, then full text on `search_tsv` with Postgres' headline as the snippet. Hidden paths, and paths under them, are left out unless named.
 - `branch` is an agent's walk of a path and everything under it; `counts` is pages per tag path.
 - Copy the models with `npx prisma-models wiki` (`--tenant` for a tenant-keyed copy), then build the full-text column with `npx fts-ddl '"WikiPage"'`.
@@ -471,16 +471,17 @@ return new ImageResponse(<SocialCard {...{ title, eyebrow, description }} {...fi
 `wiki-formant/banner`: the banner a page is headed with, its own picture or art seeded by the page.
 
 ```tsx
-import { PageBanner, BannerArt } from 'wiki-formant/banner';
+import { PageBanner, CardBanner } from 'wiki-formant/banner';
 
 <PageBanner seed={page.title + page.tagPath} picture={banner && <Image src={banner} alt="" fill preload sizes="100vw" />}>
   <Breadcrumbs items={crumbs} />
   <h1>{page.title}</h1>
 </PageBanner>
-<span className="card-thumb"><BannerArt seed={page.title + page.tagPath} /></span>
+<CardBanner seed={page.title + page.tagPath} picture={card.banner && <Image src={card.banner} alt="" fill sizes="33vw" />} />
 ```
 
-- Every page has a banner: a page without a picture gets art seeded by `seed`, the same on every render, server and browser. Seed it as the page's card thumbnail is seeded, so the two match.
+- Every page has a banner: a page without a picture gets art seeded by `seed`, the same on every render, server and browser. `CardBanner` is the same picture or art at the top of the page's card, cropped to 4:1; seed both alike, so a card and its page match.
+- A listing carries `banner`, the picture both show: `metadata.banner` unless the store's `banner` option reads it elsewhere, such as the article's first picture. `BannerArt` alone is the art for any other frame.
 - The art is inline SVG with a class per role, coloured by custom properties: `--banner-from` and `--banner-to` the gradient (transparent unset), `--banner-mid` the blobs and half the shapes (`--ui-muted` unset), `--banner-ink` the rest and the dots (`--ui-accent` unset), over `--banner-field` (`--ui-surface` unset). A category's palette or a section's band is a style on the frame.
 - `mark` replaces the triangle with a wiki's own shape, as a path from its anchor, size and generator. `fill-opacity` on a role's class dims it under a title.
 - The frame's 4:1 is a floor, not a height (`base.css`): the trail and title grow it rather than being cropped.

package/dist/banner.d.ts

@@ -33,3 +33,16 @@ export declare function PageBanner({ seed, picture, mark, className, style, chil
     style?: CSSProperties;
     children?: ReactNode;
 }): ReactElement;
+/**
+ * The same banner at the top of a page's card: its picture, else its art,
+ * in a 4:1 frame (`base.css`). Seed it as the page's header is seeded, so a
+ * card and the page it opens wear the same art. Decorative: the card's title
+ * names it.
+ */
+export declare function CardBanner({ seed, picture, mark, className, style }: {
+    seed: string;
+    picture?: ReactNode;
+    mark?: BannerMark;
+    className?: string;
+    style?: CSSProperties;
+}): ReactElement;

package/dist/banner.js

@@ -64,3 +64,12 @@ export function BannerArt({ seed, mark = triangle, className = 'banner-art' }) {
 export function PageBanner({ seed, picture, mark, className, style, children }) {
     return (_jsxs("div", { className: className ? `page-banner ${className}` : 'page-banner', style: style, children: [picture ?? _jsx(BannerArt, { seed: seed, mark: mark }), children && _jsx("div", { className: "page-banner__body", children: children })] }));
 }
+/**
+ * The same banner at the top of a page's card: its picture, else its art,
+ * in a 4:1 frame (`base.css`). Seed it as the page's header is seeded, so a
+ * card and the page it opens wear the same art. Decorative: the card's title
+ * names it.
+ */
+export function CardBanner({ seed, picture, mark, className, style }) {
+    return (_jsx("span", { className: className ? `card-banner ${className}` : 'card-banner', style: style, "aria-hidden": true, children: picture ?? _jsx(BannerArt, { seed: seed, mark: mark }) }));
+}

package/dist/base.css

@@ -272,6 +272,17 @@ tbody > tr:nth-child(even) > :is(th, td):not(.chart *) { background-image: linea
 
 .page-refs { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; overflow: hidden; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
 .page-refs > li + li { border-top: 1px solid var(--ui-border); }
+/* A row of the list: the page's name against the age of its last change, the
+   whole row the link. The box was drawn here and the row left to each wiki, so
+   three of them restated the same flex line and a fourth, styling none, ran a
+   name into its date. A long name is cut rather than push the date off a
+   phone's width, and the date keeps its width, or it wraps to a word a line. */
+.page-ref { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.625rem var(--ui-pad); color: inherit; text-decoration: none; transition: background-color 150ms; }
+.page-ref:hover { background: var(--ui-surface-2); }
+.page-ref-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 150ms; }
+.page-ref:hover .page-ref-title { color: var(--ui-accent); }
+.page-ref-time { flex-shrink: 0; font-size: var(--ui-small); color: var(--ui-muted); }
+.page-refs-empty { color: var(--ui-muted); }
 
 .see-also-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
 .see-also-item { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 0.75rem; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); color: inherit; text-decoration: none; transition: border-color 150ms; }
@@ -463,7 +474,7 @@ tbody > tr:nth-child(even) > :is(th, td):not(.chart *) { background-image: linea
 }
 .breadcrumbs .separator { user-select: none; }
 
-/* ---- PageBanner and BannerArt -----------------------------------------------
+/* ---- PageBanner, CardBanner and BannerArt -----------------------------------------------
    4:1 is a floor, not a height: the ratio-holder and the body share one grid
    cell, so the row is as tall as whichever needs more, and a long title on a
    phone grows the banner rather than losing its trail off the top. The column
@@ -491,6 +502,9 @@ tbody > tr:nth-child(even) > :is(th, td):not(.chart *) { background-image: linea
   padding: var(--ui-pad);
 }
 .page-banner__body > :is(h1, nav) { margin: 0; }
+/* CardBanner: the same picture or art at the top of a card, cropped to 4:1. */
+.card-banner { position: relative; display: block; aspect-ratio: 4 / 1; overflow: hidden; background: var(--banner-field, var(--ui-surface)); }
+.card-banner > :is(img, picture, svg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
 .banner-art { display: block; width: 100%; height: 100%; }
 .banner-art__from { stop-color: var(--banner-from, transparent); }
 .banner-art__to { stop-color: var(--banner-to, transparent); }

package/dist/store.d.ts

@@ -26,6 +26,7 @@ export interface WikiPageRow<B = unknown> {
  */
 export type WikiPageListing = Omit<WikiPageRow, 'content'> & {
     snippet: string;
+    banner: string | null;
 };
 export interface WikiPageRef {
     tagPath: string;
@@ -72,6 +73,12 @@ export interface WikiStoreOptions<B extends DiffBlock> {
      * article's opening; a wiki that keeps a written summary in metadata says so.
      */
     snippet?: (page: Pick<WikiPageRow<B>, 'content' | 'metadata'>) => string;
+    /**
+     * The picture a page's banner and card show, if it has one. Defaults to
+     * `metadata.banner`; a wiki whose pages carry no banner of their own may
+     * read the article's first picture instead.
+     */
+    banner?: (page: Pick<WikiPageRow<B>, 'content' | 'metadata'>) => string | null | undefined;
 }
 export interface SaveInput<B> {
     tagPath: string;
@@ -173,6 +180,7 @@ export declare function wikiStore<B extends DiffBlock = DiffBlock>(o: WikiStoreO
             createdAt: Date;
             updatedAt: Date;
             snippet: string;
+            banner: string | null;
         }[];
         total: number;
     }>;

package/dist/store.js

@@ -44,9 +44,10 @@ export function orderByIds(rows, ids) {
 export function wikiStore(o) {
     const site = o.siteId ?? '';
     const opening = o.snippet ?? ((page) => describe(openingText(page.content)));
+    const bannerOf = o.banner ?? ((page) => (typeof page.metadata?.banner === 'string' ? page.metadata.banner : null));
     const listing = (row) => {
         const { content: _, ...rest } = row;
-        return { ...rest, snippet: opening(row) };
+        return { ...rest, snippet: opening(row), banner: bannerOf(row) ?? null };
     };
     const hidden = [...(o.hidden ?? [])];
     const rows = async (query, ...values) => (await o.sql(query, ...values));
@@ -168,6 +169,7 @@ export function wikiStore(o) {
             ...row,
             ...(withContent ? { content: content } : {}),
             score: tier,
+            banner: bannerOf({ content: content, metadata: row.metadata }) ?? null,
             snippet: (headline ? decodeEntities(headline).replace(/\s+/g, ' ').trim() : '')
                 || matchSnippet(content, query, () => opening({ content: content, metadata: row.metadata })),
         }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.113.0",
+  "version": "0.115.0",
   "description": "The portable half of a wiki: derived taxonomy and facet controls, a version-negotiating MCP transport, markdown twins, block rendering, a rich-text editor engine, conditional-GET plumbing, and the headers and CSP every origin sends.",
   "type": "module",
   "license": "MIT",