@thewhatmatters/wmds 0.4.7 → 0.4.9

package/CHANGELOG.md

@@ -7,6 +7,67 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.9
+
+**Fixes from the site's 0.4.8 upgrade: router links in every page pattern, a tighter tile caption, and a checker that no longer skips files.**
+
+- **`renderLink` on the page patterns** — one prop name everywhere, for links the app's router should handle. Without it they were plain anchors that reload the page, and swapping one in the pasted markup reads as drift.
+  - **Guides/Filter panel → Pattern — filtered index**: `renderLink={(post) => <Link href={post.href} />}` (new) — post titles.
+  - **Guides/Post page → Pattern — post page**: `renderLink={(link) => <Link href={link.href} />}` (new) — the **Breadcrumb** and the category tags. View as Markdown and the share links stay plain anchors.
+  - **Guides/Resource detail → Pattern — resource detail**: `renderLink={(item) => <Link href={item.href} />}` (new) on `ResourceDetailPage` — the **Breadcrumb**.
+  - **Pattern — filtered grid** already had it, for tiles.
+- **IndexList.Item** `render` (new) — `render={<Link href="/blog/post" />}` in place of `href`, the same shape as **LinkTile** and **Badge**. `href` is now optional.
+- **TextLink** `render` (new) — the same, for any text link. `href` is now optional; pass one or the other.
+- **`type-caption`** (new type step; `typographyClass("caption-tight")`) — `type-supporting`'s size and weight on a 16px line. For a single line directly under a label; not for wrapped text, which stays on `type-supporting`. In this release it is used on **LinkTile**'s meta line only. **Foundations → Typography** lists it.
+- **LinkTile** — the title and the meta line sit as a pair: no gap between them, and the meta line is on `type-caption`. The space between the title's text and the meta's goes from about 9px to about 5px. The 12px between the image and the title and the two-line clamp are unchanged. A tile with a meta line is 6px shorter. The `loading` placeholder's bars sit in the same 20px and 16px lines, so a placeholder is exactly as tall as a loaded tile with a one-line title.
+- **`wmds-check`** — finds a pasted pattern's header when a `"use client"` or `"use server"` directive (or blank lines) comes before it. It read line 1 only, so such a file was skipped silently and never checked for drift. Findings name the header's line.
+- **0.4.8 Consumer actions corrected** — they said to put `"use client"` above the pattern header. The header goes first and the directive below it, as the `use-wmds` skill says. Both orders now work with `wmds-check`.
+- **TileGrid docs** — the space under a masonry tile is the 2rem row gap plus less than 4px (32px to just under 36px), not "within 3px". A tile's height rounds up to the next 4px row track. The behavior has not changed.
+
+### Consumer actions
+
+Re-copy three patterns, then pass the app's link through `renderLink`. Do the wiring in a client component (a function cannot cross from a server component), and remove any `<Link>` added to pasted markup.
+
+1. **Re-copy Guides/Filter panel → Pattern — filtered index** (`node_modules/@thewhatmatters/wmds/docs/patterns/guides-filter-panel--filtered-index.tsx`) over `components/blog-index.tsx`, re-apply your content, data, and handlers, and pass `renderLink={(post) => <Link href={post.href} />}` to `<FilteredIndex>`.
+2. **Re-copy Guides/Post page → Pattern — post page** (`…/docs/patterns/guides-post-page--post-page.tsx`) over `components/post-page.tsx`, re-apply your content, and pass `renderLink={(link) => <Link href={link.href} />}` to `<PostPage>`.
+3. **Re-copy Guides/Resource detail → Pattern — resource detail** (`…/docs/patterns/guides-resource-detail--detail.tsx`) over `components/resource-detail.tsx`, re-apply your content, and pass `renderLink={(item) => <Link href={item.href} />}` to `<ResourceDetailPage>`.
+4. **Pattern headers:** the header stays on the first lines with `"use client"` below it. A file with the directive first is now checked too, so `npx wmds-check` may report drift it skipped before. Fix the drift, or re-copy.
+5. **LinkTile:** nothing to do. Tiles with a meta line are 6px shorter. Update a screenshot baseline or a test that measures a tile's height. **Pattern — filtered grid** did not change; no re-copy.
+6. **`type-caption`:** do not move other text to it. It is for one line under a label.
+7. Other apps: none. `render` on **TextLink** and **IndexList.Item** is optional.
+
+## 0.4.8
+
+**A filtered grid and a resource detail for a resources page.** Three new components and two page patterns: a tile that is one link, a grid that packs tiles in reading order, the filter panel as a component, and a resource's detail as a dialog over the grid or as its own page. The WhatMatters Resources page is the first use. See **ADR-0044**.
+
+- **LinkTile** (new) — a resource tile that is one link: `media` (an image with its `width` and `height`), `title`, a `meta` line such as the domain, an optional `tag` (a **Badge** over the image) and `source` mark (**Avatar** `xsm` or a favicon, before the title). One hit area and one focus ring; nothing interactive goes inside. `external` opens a new tab the way **Button** and **TextLink** do; `render={<Link href />}` makes it a router link. The image keeps its own ratio by default; `ratio` fixes it. `loading` is a **Skeleton** placeholder. A hairline inside the frame keeps an edge on light images in light mode and dark images in dark mode. Screen readers hear the title, the meta, the tag, then "opens in a new tab".
+- **TileGrid** (new) with **TileGrid.Item** — `layout` `masonry` (default) or `uniform`; `columns` as one number or `{ base, sm, md, lg, xl }` (default 1, 2 from `sm`, 3 from `lg`); `empty`; `busy`. Reading order and tab order are the order of the items in both layouts: masonry puts each next item in the shortest column, so the order runs across and then down. When the items change, the tiles that stay move to their places and the others fade; reduced motion changes at once.
+- **FilterPanel** (new) with **FilterPanel.Rail**, **.Trigger**, and **.Sheet** — the filter rail, its phone button, and its bottom Sheet as one component, so a page no longer pastes them. With it: `useFilterSelection`, `matchesFilterSelection`, `countFilterOptions`, `filterSelectionCount`, and the types `FilterSelection`, `FilterFacets`, `FilterPanelGroup`, `FilterPanelOption`.
+- New **Guides/Filter panel → Pattern — filtered grid** — the filtered index page with **SectionCaption** over a **TileGrid** of **LinkTile** in the main column. A tile goes to the resource's route in the app (`item.href`), not out of the site; `item.external` is there for an app that links straight out. Props: `title`, `caption`, `items`, `groups`, `layout`, `columns`, `loading`, `defaultSelection`, `selection` + `onSelectionChange`, `renderLink` (the router's link for a tile), `renderImage` (the app's image component), `overlay`.
+- New **Guides/Resource detail → Pattern — resource detail** — one module with both forms. `ResourceDetailDialog` opens over the grid (dimmed, not scrolling): the media as large as the window allows beside an info column — category eyebrow, title, the curator's note, the date added, and a **DescriptionList** (Category, Tags, Source, and the app's `rows`) — with the position, previous and next, and a close in the header, and a primary **Button** `external` to visit the resource pinned in the footer. Left and Right move between resources, Escape closes, and focus returns to the tile. On phones it is the whole screen, media first. `ResourceDetailPage` is the same content on the page grid under a **Breadcrumb**. Media is one image or one `video` with controls. The item is `{ id, title, image, video?: { src, poster, captions? }, category, tags?, meta?, note, added, addedLabel, visitHref, rows? }`.
+- **Dialog.Content** `size="full"` (new) — the window less a margin, up to 90rem × 60rem, and the whole screen on phones. `headerEnd` (new) — actions before the close. `aria-labelledby` (new) — names the dialog from a heading in its body when there is no `title`.
+- **Guides/Filter panel → Pattern — filtered index** now uses **FilterPanel** and the helpers. It looks and behaves the same and is about 90 lines shorter. `FilterGroupDef` is now `FilterPanelGroup` from the package; `FilterSelection` is imported from the package too.
+- **Guides/Post page → Pattern — post page**: `metadataStack` (new, `"before"` | `"after"`, **default `"after"`**) — where the metadata panel sits below `lg`, where the page is one column. The article now comes first, with the date and the reading time in a mono line under the title (hidden from `lg`, where the panel is beside the article). It is also the panel's place in the markup: with `metadataSide="end"` the `aside` follows the article at every width and no order utility is used. From `lg` nothing changes. `metadataStack="before"` is the old stacking. See the amendment to **ADR-0041**.
+- **`overlay`** (new prop) on **Pattern — filtered index**, **Pattern — filtered grid**, and **Guides/Post page → Pattern — post page** — page-level children such as **GridOverlay**, rendered first inside the page grid. Passing a prop leaves the pasted markup unchanged, so `wmds-check` no longer reports drift for an overlay.
+- **Decisions taken** (the requests left them open): **LinkTile** is its own component, not a **Card** option. The detail over the grid is a **Dialog**, not a **Sheet** or a **Panel**. The detail item adds `category`, `tags`, `addedLabel`, and `video.captions` to the shape asked for. No view counts and no save control. No sort, no search field in the rail, no paging or Load more, and no save button in this version — the grid shows every item in the order it is given. A video in the tile is out of scope; `media` is one image.
+- **Known limit:** a masonry grid packs after it measures its tiles. A server-rendered page shows aligned rows first and the tiles close up once at hydration, on grids of two or more columns (phones, at one column, do not move). That move is instant — no tile slides or fades; the reflow animation is for a change in the items only. Nothing moves as images load. The space under a tile is the row gap within 3px. **`layout="uniform"` has no such move**: it is CSS alone, so the server's markup is the final layout.
+
+### Consumer actions
+
+1. **WhatMatters site, Resources page: use the new grid.** Copy **Guides/Filter panel → Pattern — filtered grid** (`node_modules/@thewhatmatters/wmds/docs/patterns/guides-filter-panel--filtered-grid.tsx`) into `components/resource-grid.tsx`, keep its header comment as the first lines, and add `"use client"` below it. Each item is `{ id, title, href, image: { src, alt, width, height }, meta?, tag?, facets }` with `href: "/resources/<slug>"`; give every image its real `width` and `height`. Delete the hand-built list in `app/resources/page.tsx` and its classes.
+2. **Wire the grid in one small client file** (functions cannot cross from a server component): `components/resources.tsx` with `"use client"` renders `<FilteredGrid title="Resources" caption="Library" items={items} groups={groups} renderLink={(item) => <Link href={item.href} scroll={false} />} renderImage={(image) => <Image {...image} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" />} overlay={<SiteGridOverlay />} />`. `app/resources/page.tsx` loads the items and renders it. Change `sizes` if you change `columns`; allow the image hosts in `next.config.ts`. Do not edit the pasted file for any of this.
+3. **Add the detail.** Copy **Guides/Resource detail → Pattern — resource detail** (`…/docs/patterns/guides-resource-detail--detail.tsx`) into `components/resource-detail.tsx`, keep its header comment as the first lines, and add `"use client"` below it. Each resource needs `{ id, title, image, video?: { src, poster, captions? }, category, tags?, meta?, note, added, addedLabel, visitHref, rows? }`.
+4. **Pick the form by route.**
+   - The page: `app/resources/[slug]/page.tsx` renders `<ResourceDetailPage item={…} breadcrumb={[{ label: "Home", href: "/" }, { label: "Resources", href: "/resources" }, { label: item.title }]} overlay={<SiteGridOverlay />} />`. Delete `app/resources/[category]`: the categories become a filter group on the grid. No redirects.
+   - The dialog: a parallel slot with an intercepting route (`app/resources/@detail/(.)[slug]/page.tsx`, a `default.tsx` that returns `null`, and `{detail}` in `app/resources/layout.tsx`) renders a client component with `<ResourceDetailDialog item={…} open onClose={() => router.back()} onPrevious={previous ? () => router.replace("/resources/" + previous.slug, { scroll: false }) : undefined} onNext={…} position={"3 of 9"} />`. Leave `onPrevious` out on the first resource and `onNext` out on the last.
+   - Opening `/resources/<slug>` directly, or from a shared link, shows the page; a tile click shows the dialog over the grid.
+5. **WhatMatters site, blog index: re-copy Guides/Filter panel → Pattern — filtered index** (`…/docs/patterns/guides-filter-panel--filtered-index.tsx`) over `components/blog-index.tsx` and re-apply only your content, data, and handlers. Then remove `<SiteGridOverlay />` from the markup and pass it as `overlay={<SiteGridOverlay />}` where the page renders `<FilteredIndex>`. If the page imports `FilterGroupDef` from that file, import `FilterPanelGroup` from `@thewhatmatters/wmds` instead (same shape).
+6. **WhatMatters site, post page: re-copy Guides/Post page → Pattern — post page** (`…/docs/patterns/guides-post-page--post-page.tsx`) over `components/post-page.tsx`, re-apply your content, and move `<SiteGridOverlay />` to `overlay={<SiteGridOverlay />}`. Keep `metadataSide="end"` and `metadataColumns={3}`: with them the panel now stacks after the article below `lg`, the date and reading time sit under the title there, and the `aside` follows the article in the markup. No other prop and no class edit is needed; `metadataStack="after"` is the default. Update any test that expects the panel before the article in the DOM or above it on a phone.
+7. **Check:** `npx wmds-check` reports no `pattern-drift` for the four pasted files. Any `data-*` attributes the site adds to pasted elements are not drift and can stay.
+8. **If the one move at hydration is not acceptable** on the Resources page, pass `layout="uniform"` to `<FilteredGrid>`: every image is cropped to 4:3 and nothing moves.
+9. **Tests:** on a server-rendered grid of two or more columns, wait for `ul[data-packed]` before asserting tile positions or taking a screenshot. The detail dialog fades in over about 0.4s; wait for it before an accessibility or visual check.
+10. Other apps: an app that pasted **Pattern — post page** and re-copies it gets the panel after the article below `lg`; pass `metadataStack="before"` to keep it above. Everything else here is new; `Dialog` `size`, `headerEnd`, and `aria-labelledby` are optional.
+
 ## 0.4.7
 
 **Carousel: a row of items with a progress scrubber.** New component, built on the open `motion` package. The WhatMatters About page is the first use. See **ADR-0043**.

package/CONSUMING.md

@@ -273,7 +273,10 @@ import {
 | `DescriptionList` | `layout` (`inline` \| `stacked`), `rule` (`solid` \| `dotted` \| `none`), `variant` (`sans` \| `mono`), `DescriptionList.Item` `name` / `layout` | Components/DescriptionList — **Pattern — post metadata**, **Pattern — details** |
 | `SectionCaption` | `children`, `as`, `id`, `end`, `marker`, `rule` | Components/SectionCaption — **Pattern — column caption**, **Pattern — caption with an action** |
 | `Prose` | `size` (`lg` \| `md`), `measure` (`reading` \| `none`), `as` | Components/Prose — **Pattern — article body**. Full page: **Guides/Post page → Pattern — post page** |
-| `IndexList` | `captions`, `size`, `titleAs`, `empty`, `IndexList.Item` `meta` / `title` / `href` / `preview` | Components/IndexList — **Pattern — post index**. With filters: **Guides/Filter panel → Pattern — filtered index** |
+| `IndexList` | `captions`, `size`, `titleAs`, `empty`, `IndexList.Item` `meta` / `title` / `href` or `render` / `preview` | Components/IndexList — **Pattern — post index**. With filters: **Guides/Filter panel → Pattern — filtered index** |
+| `LinkTile` | `title`, `href` / `render`, `external`, `media`, `ratio`, `meta`, `tag`, `source`, `loading` | Components/LinkTile — **Pattern — resource tile**, **Pattern — router link** |
+| `TileGrid` | `layout` (`masonry` / `uniform`), `columns`, `empty`, `busy`, `TileGrid.Item` | Components/TileGrid — **Pattern — tile grid**. With filters: **Guides/Filter panel → Pattern — filtered grid** |
+| `FilterPanel` | `groups`, `selection`, `onSelectionChange`, `resultsLabel`, `labels`; `FilterPanel.Rail` / `.Trigger` / `.Sheet`; `useFilterSelection`, `matchesFilterSelection`, `countFilterOptions` | Components/FilterPanel — **Pattern — filter panel** |
 | `TaskRows` | `variant`, `status`, `meta`, `detailsLayout`, `TaskRows.Detail` | Components/TaskRows — **Pattern — status rows**, **capsules**, **action details** (`Detail variant="button"`), **tag chips** (`Chip readOnly size="sm"`), detail lines (`Detail` + `onPress` → `Button layout="row"`) |
 | `Badge` | `variant`, `size`, `emphasis` (`solid` \| `muted` \| `outline`), `mono`, `render` (tag links), `count`, `icon`, `avatar`, `iconOnly` | Components/Badge — copy a **Pattern** story. `avatar={{ src, alt }}` is a leading round **Avatar** sized to the badge (`badgeAvatarSize`: sm → 20px, md → 24px) and is mutually exclusive with `icon`. Pass `alt=""` when the label already speaks the word. |
 | `Status` | `variant`, `tone`, `label`, `besideLabel`, `pulsing`, `active`, `step` | Components/Status — `variant="ring"` or `variant="dot"` |

package/bin/wmds-check.mjs

@@ -230,22 +230,26 @@ for (const file of files) {
   });
 
   // Pasted patterns.
-  const header = lines[0]?.match(/^\/\/ @thewhatmatters\/wmds@([\w.-]+) · (.+)$/);
+  // The header is the file's first comment line. A "use client" / "use server" directive or blank
+  // lines may come before it.
+  const headerIndex = lines.findIndex((line) => line.trim() !== "" && !/^\s*["']use (client|server)["'];?\s*$/.test(line));
+  const headerLine = headerIndex === -1 ? 0 : headerIndex;
+  const header = lines[headerLine]?.match(/^\/\/ @thewhatmatters\/wmds@([\w.-]+) · (.+)$/);
   const id = source.match(/\?path=\/story\/([\w-]+)/)?.[1];
   if (header && id && packageRoot) {
     const shipped = path.join(packageRoot, "docs", "patterns", `${id}.tsx`);
     if (!existsSync(shipped)) {
-      report(file, 1, "pattern-removed", "error", `pattern ${id} no longer ships in ${packageVersion} — see CHANGELOG.md`);
+      report(file, headerLine + 1, "pattern-removed", "error", `pattern ${id} no longer ships in ${packageVersion} — see CHANGELOG.md`);
     } else {
       if (header[1] !== packageVersion) {
-        report(file, 1, "pattern-stale", "warn", `pasted from ${header[1]}, installed ${packageVersion} — re-copy if CHANGELOG names it`);
+        report(file, headerLine + 1, "pattern-stale", "warn", `pasted from ${header[1]}, installed ${packageVersion} — re-copy if CHANGELOG names it`);
       }
       const shippedStructure = patternStructure(readFileSync(shipped, "utf8"));
       const pastedStructure = patternStructure(source);
       if (shippedStructure.join("\n") !== pastedStructure.join("\n")) {
         report(
           file,
-          1,
+          headerLine + 1,
           "pattern-drift",
           "warn",
           `markup or classes differ from docs/patterns/${id}.tsx (${firstDifference(shippedStructure, pastedStructure)}) — allowed edits are content, data, handlers, exports`,

package/dist/components/atoms/TextLink/TextLink.d.ts

@@ -1,10 +1,16 @@
-import type { AnchorHTMLAttributes, ReactNode } from "react";
+import type { AnchorHTMLAttributes, ReactElement, ReactNode } from "react";
 import { type TextLinkVariant } from "./textLinkStyles";
 export { textLinkVariants, type TextLinkVariant } from "./textLinkStyles";
 /** Layout-only — margin or placement; not for changing the link treatment. */
 export type TextLinkLayoutClassName = string;
 export interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "className" | "href" | "target"> {
-    href: string;
+    /** Where the link goes. Leave it out when `render` carries the destination. */
+    href?: string;
+    /**
+     * Compose the link onto another element (Base UI `render`) — `render={<Link href="/blog/post" />}`
+     * for a router link. The treatment, the focus ring, and `external` stay the same.
+     */
+    render?: ReactElement;
     children: ReactNode;
     /**
      * `prose` (default) — medium weight with a solid underline, for links inside body copy.
@@ -18,5 +24,5 @@ export interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorEleme
     className?: TextLinkLayoutClassName;
 }
 /** Inline text navigation — the solid-underline prose link, or a quiet link for titles. */
-export declare function TextLink({ href, children, variant, external, className, rel, ...anchorProps }: TextLinkProps): import("react").JSX.Element;
+export declare function TextLink({ href, render, children, variant, external, className, rel, ...anchorProps }: TextLinkProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=TextLink.d.ts.map

package/dist/components/atoms/TextLink/TextLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextLink/TextLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE1E,8EAA8E;AAC9E,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAC7C;IACD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,2FAA2F;AAC3F,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAQ,EACR,OAAiB,EACjB,QAAgB,EAChB,SAAS,EACT,GAAG,EACH,GAAG,WAAW,EACf,EAAE,aAAa,+BAwBf"}
+{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextLink/TextLink.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE1E,8EAA8E;AAC9E,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAC7C;IACD,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,2FAA2F;AAC3F,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAiB,EACjB,QAAgB,EAChB,SAAS,EACT,GAAG,EACH,GAAG,WAAW,EACf,EAAE,aAAa,8EA6Bf"}

package/dist/components/atoms/TextLink/TextLink.js

@@ -3,24 +3,29 @@ import { cn as e } from "../../../lib/cn.js";
 import { textLinkExternalIconClasses as t, textLinkVariantClasses as n, textLinkVariants as r } from "./textLinkStyles.js";
 import { SquareArrowOutUpRight as i } from "lucide-react";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useRender as c } from "@base-ui/react/use-render";
 //#region src/components/atoms/TextLink/TextLink.tsx
-function c({ href: r, children: c, variant: l = "prose", external: u = !1, className: d, rel: f, ...p }) {
-	let m = u && f == null ? "noopener noreferrer" : f;
-	return /* @__PURE__ */ s("a", {
-		...p,
-		href: r,
-		target: u ? "_blank" : void 0,
-		rel: m,
-		className: e(n[l], d),
-		children: [c, u ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(i, {
-			className: t,
-			strokeWidth: 2,
-			"aria-hidden": !0
-		}), /* @__PURE__ */ o("span", {
-			className: "sr-only",
-			children: " (opens in a new tab)"
-		})] }) : null]
+function l({ href: r, render: l, children: u, variant: d = "prose", external: f = !1, className: p, rel: m, ...h }) {
+	let g = f && m == null ? "noopener noreferrer" : m;
+	return r == null && l == null && console.warn("[WMDS TextLink] Pass `href`, or `render` with a link that carries it."), c({
+		render: l,
+		defaultTagName: "a",
+		props: {
+			...h,
+			...r == null ? null : { href: r },
+			...f ? { target: "_blank" } : null,
+			...g == null ? null : { rel: g },
+			className: e(n[d], p),
+			children: /* @__PURE__ */ s(a, { children: [u, f ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(i, {
+				className: t,
+				strokeWidth: 2,
+				"aria-hidden": !0
+			}), /* @__PURE__ */ o("span", {
+				className: "sr-only",
+				children: " (opens in a new tab)"
+			})] }) : null] })
+		}
 	});
 }
 //#endregion
-export { c as TextLink, r as textLinkVariants };
+export { l as TextLink, r as textLinkVariants };

package/dist/components/molecules/IndexList/IndexList.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import { type IndexListSize, type IndexListTitleElement } from "./indexListStyles";
 export { indexListSizes, indexListTitleElements, type IndexListSize, type IndexListTitleElement, } from "./indexListStyles";
 /** Layout-only — width, margin, or grid placement. */
@@ -32,7 +32,10 @@ export interface IndexListProps {
 export interface IndexListItemProps {
     /** The row's title — a link to `href`. */
     title: string;
-    href: string;
+    /** Where the title goes. Leave it out when `render` carries the destination. */
+    href?: string;
+    /** The router's link for the title, in place of a plain anchor — `render={<Link href="/blog/post" />}`. */
+    render?: ReactElement;
     /** The meta column, for example a `<time>`. Above the title where the list is one column. */
     meta?: ReactNode;
     /** A short preview. When set, a control at the row's end expands it under the title. */
@@ -51,7 +54,7 @@ export interface IndexListItemProps {
  * optional preview that expands under the title. Optional column captions share the rows' tracks.
  */
 declare function IndexListRoot({ captions, size, titleAs, empty, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, }: IndexListProps): import("react").JSX.Element;
-declare function IndexListItem({ title, href, meta, preview, defaultOpen, open: openProp, onOpenChange, previewLabel, className, }: IndexListItemProps): import("react").JSX.Element;
+declare function IndexListItem({ title, href, render, meta, preview, defaultOpen, open: openProp, onOpenChange, previewLabel, className, }: IndexListItemProps): import("react").JSX.Element;
 export declare const IndexList: typeof IndexListRoot & {
     Item: typeof IndexListItem;
 };

package/dist/components/molecules/IndexList/IndexList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IndexList.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/IndexList/IndexList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAiBL,KAAK,aAAa,EAClB,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,cAAc,EACd,sBAAsB,EACtB,KAAK,aAAa,EAClB,KAAK,qBAAqB,GAC3B,MAAM,mBAAmB,CAAC;AAE3B,sDAAsD;AACtD,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,iGAAiG;IACjG,IAAI,EAAE,SAAS,CAAC;IAChB,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,4FAA4F;IAC5F,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,mGAAmG;IACnG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,6FAA6F;IAC7F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wFAAwF;IACxF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AASD;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,IAAW,EACX,OAAc,EACd,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,+BA8BhB;AAED,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,+BA6CpB;AAED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}
+{"version":3,"file":"IndexList.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/IndexList/IndexList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAiBL,KAAK,aAAa,EAClB,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,cAAc,EACd,sBAAsB,EACtB,KAAK,aAAa,EAClB,KAAK,qBAAqB,GAC3B,MAAM,mBAAmB,CAAC;AAE3B,sDAAsD;AACtD,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,iGAAiG;IACjG,IAAI,EAAE,SAAS,CAAC;IAChB,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,4FAA4F;IAC5F,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,mGAAmG;IACnG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AAED,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2GAA2G;IAC3G,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wFAAwF;IACxF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,wBAAwB,CAAC;CACtC;AASD;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,IAAW,EACX,OAAc,EACd,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,+BA8BhB;AAED,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,OAAO,EACP,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,+BA6CpB;AAED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}

package/dist/components/molecules/IndexList/IndexList.js

@@ -43,48 +43,49 @@ function k({ captions: t, size: n = "lg", titleAs: i = "h2", empty: o, "aria-lab
 		})
 	});
 }
-function A({ title: r, href: a, meta: s, preview: f, defaultOpen: p = !1, open: g, onOpenChange: y, previewLabel: b, className: C }) {
-	let { size: k, titleAs: A } = x(O), j = S(), [M, N] = w(p), P = g !== void 0, F = P ? g : M, I = f != null;
-	function L() {
-		let e = !F;
-		P || N(e), y?.(e);
+function A({ title: r, href: a, render: s, meta: f, preview: p, defaultOpen: g = !1, open: y, onOpenChange: b, previewLabel: C, className: k }) {
+	let { size: A, titleAs: j } = x(O), M = S(), [N, P] = w(g), F = y !== void 0, I = F ? y : N, L = p != null;
+	function R() {
+		let e = !I;
+		F || P(e), b?.(e);
 	}
 	return /* @__PURE__ */ D("li", {
-		className: e(o, C),
+		className: e(o, k),
 		children: [
-			s == null ? null : /* @__PURE__ */ E("div", {
+			f == null ? null : /* @__PURE__ */ E("div", {
 				className: c,
-				children: s
+				children: f
 			}),
 			/* @__PURE__ */ D("div", {
 				className: m,
-				children: [/* @__PURE__ */ E(A, {
-					className: e(h, _[k]),
+				children: [/* @__PURE__ */ E(j, {
+					className: e(h, _[A]),
 					children: /* @__PURE__ */ E(n, {
 						variant: "quiet",
 						href: a,
+						render: s,
 						children: r
 					})
-				}), I ? /* @__PURE__ */ E(t, {
+				}), L ? /* @__PURE__ */ E(t, {
 					size: "md",
-					className: v[k],
-					icon: /* @__PURE__ */ E(T, { className: e(i, F && "rotate-180") }),
-					"aria-label": b ?? `Preview: ${r}`,
+					className: v[A],
+					icon: /* @__PURE__ */ E(T, { className: e(i, I && "rotate-180") }),
+					"aria-label": C ?? `Preview: ${r}`,
 					title: "",
-					"aria-expanded": F,
-					"aria-controls": j,
-					onClick: L
+					"aria-expanded": I,
+					"aria-controls": M,
+					onClick: R
 				}) : null]
 			}),
-			I ? /* @__PURE__ */ E("div", {
+			L ? /* @__PURE__ */ E("div", {
 				className: e("motion-collapse", l),
-				"data-visible": F ? "true" : "false",
+				"data-visible": I ? "true" : "false",
 				children: /* @__PURE__ */ E("div", {
-					id: j,
+					id: M,
 					className: d,
 					children: /* @__PURE__ */ E("div", {
 						className: u,
-						children: f
+						children: p
 					})
 				})
 			}) : null

package/dist/components/molecules/LinkTile/LinkTile.d.ts

@@ -0,0 +1,45 @@
+import { type ReactElement, type ReactNode } from "react";
+export { linkTileLoadingRatio } from "./linkTileStyles";
+/** Layout-only — width, margin, or grid placement. */
+export type LinkTileLayoutClassName = string;
+export interface LinkTileProps {
+    /** The resource's name. Two lines at most. Not needed while `loading`. */
+    title?: string;
+    /** Where the tile goes. Leave it out when `render` carries the destination. */
+    href?: string;
+    /**
+     * Compose the tile onto another element (Base UI `render`) — `render={<Link href="/work" />}` for
+     * a router link. The tile is that one link; never put a link or a button inside it.
+     */
+    render?: ReactElement;
+    /**
+     * Another site: opens in a new tab (`target="_blank"`, a safe `rel`), tells screen readers so,
+     * and shows the mark **TextLink** `external` uses after the title.
+     */
+    external?: boolean;
+    /**
+     * The preview — an `<img>` (or `next/image`) with its `width` and `height`, so the tile holds its
+     * space before the image loads. One image; not a video.
+     */
+    media?: ReactNode;
+    /**
+     * Fixes the frame's shape as width / height (`4 / 3`, `1`, `16 / 9`) and crops the image to it —
+     * for a grid of equal tiles. Left out, the image keeps its own ratio and tiles vary in height.
+     */
+    ratio?: number;
+    /** One line under the title — for example the domain, "linear.app". */
+    meta?: ReactNode;
+    /** A **Badge** over the image's top-start corner (at the caption's end when there is no image). Not a link. */
+    tag?: ReactNode;
+    /** A mark before the title — **Avatar** `size="xsm"`, or a 20px favicon `<img alt="">`. */
+    source?: ReactNode;
+    /** A placeholder in the tile's shape, built on **Skeleton** — not a link, and hidden from screen readers. */
+    loading?: boolean;
+    className?: LinkTileLayoutClassName;
+}
+/**
+ * A resource tile that is one link — a preview image with the resource's name and where it lives
+ * under it. Screen readers hear the title, the meta line, the tag, then "opens in a new tab".
+ */
+export declare function LinkTile({ title, href, render, external, media, ratio, meta, tag, source, loading, className, }: LinkTileProps): import("react").JSX.Element;
+//# sourceMappingURL=LinkTile.d.ts.map

package/dist/components/molecules/LinkTile/LinkTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkTile.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/LinkTile/LinkTile.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,sDAAsD;AACtD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aAAa;IAC5B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+GAA+G;IAC/G,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6GAA6G;IAC7G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAuBD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,GAAG,EACH,MAAM,EACN,OAAe,EACf,SAAS,GACV,EAAE,aAAa,+BA0Ff"}

package/dist/components/molecules/LinkTile/LinkTile.js

@@ -0,0 +1,121 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { Skeleton as t } from "../../atoms/Skeleton/Skeleton.js";
+import { linkTileCaptionClasses as n, linkTileExternalIconClasses as r, linkTileFrameClasses as i, linkTileFrameFixedClasses as a, linkTileFrameNaturalClasses as o, linkTileLoadingLineClasses as s, linkTileLoadingMetaLineClasses as c, linkTileLoadingRatio as l, linkTileLoadingRootClasses as u, linkTileMetaClasses as d, linkTileRootClasses as f, linkTileSourceClasses as p, linkTileTagInlineClasses as m, linkTileTagOverClasses as h, linkTileTextClasses as g, linkTileTitleClasses as _ } from "./linkTileStyles.js";
+import { useId as v } from "react";
+import { SquareArrowOutUpRight as y } from "lucide-react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { useRender as S } from "@base-ui/react/use-render";
+//#region src/components/molecules/LinkTile/LinkTile.tsx
+function C({ render: e, ...t }) {
+	return S({
+		render: e,
+		defaultTagName: "a",
+		props: t
+	});
+}
+function w(e) {
+	return e == null ? void 0 : { aspectRatio: String(e) };
+}
+function T({ title: l, href: S, render: T, external: E = !1, media: D, ratio: O, meta: k, tag: A, source: j, loading: M = !1, className: N }) {
+	let P = v(), F = `${P}-title`, I = `${P}-meta`, L = `${P}-tag`, R = `${P}-hint`;
+	if (M) return /* @__PURE__ */ x("div", {
+		className: e(u, N),
+		"data-link-tile": "",
+		"data-loading": "",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ b("span", {
+			className: i,
+			style: w(O ?? 1.3333333333333333),
+			children: /* @__PURE__ */ b(t, { radius: "none" })
+		}), /* @__PURE__ */ x("span", {
+			className: g,
+			children: [/* @__PURE__ */ b("span", {
+				className: s,
+				children: /* @__PURE__ */ b(t, {
+					width: "70%",
+					height: 12,
+					radius: "inner",
+					index: 1
+				})
+			}), /* @__PURE__ */ b("span", {
+				className: c,
+				children: /* @__PURE__ */ b(t, {
+					width: "40%",
+					height: 10,
+					radius: "inner",
+					index: 2
+				})
+			})]
+		})]
+	});
+	S == null && T == null && console.warn("[WMDS LinkTile] Pass `href`, or `render` with a link that carries it.");
+	let z = D != null, B = [
+		F,
+		k != null && I,
+		A != null && L,
+		E && R
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ x(C, {
+		render: T,
+		...S == null ? null : { href: S },
+		...E ? {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		} : null,
+		className: e(f, N),
+		"aria-labelledby": B,
+		"data-link-tile": "",
+		"data-external": E ? "" : void 0,
+		children: [z ? /* @__PURE__ */ x("span", {
+			className: e(i, O == null ? o : a),
+			style: w(O),
+			"data-link-tile-frame": "",
+			children: [D, A == null ? null : /* @__PURE__ */ b("span", {
+				id: L,
+				className: h,
+				children: A
+			})]
+		}) : null, /* @__PURE__ */ x("span", {
+			className: n,
+			children: [
+				j == null ? null : /* @__PURE__ */ b("span", {
+					className: p,
+					"aria-hidden": "true",
+					children: j
+				}),
+				/* @__PURE__ */ x("span", {
+					className: g,
+					children: [
+						/* @__PURE__ */ x("span", {
+							id: F,
+							className: _,
+							children: [l, E ? /* @__PURE__ */ b(y, {
+								className: r,
+								strokeWidth: 2,
+								"aria-hidden": !0
+							}) : null]
+						}),
+						k == null ? null : /* @__PURE__ */ b("span", {
+							id: I,
+							className: d,
+							children: k
+						}),
+						E ? /* @__PURE__ */ b("span", {
+							id: R,
+							className: "sr-only",
+							children: "(opens in a new tab)"
+						}) : null
+					]
+				}),
+				A != null && !z ? /* @__PURE__ */ b("span", {
+					id: L,
+					className: m,
+					children: A
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { T as LinkTile, l as linkTileLoadingRatio };

package/dist/components/molecules/LinkTile/linkTileStyles.d.ts

@@ -0,0 +1,37 @@
+/** The frame's ratio (width / height) while `loading`, and for a tile with `ratio` left out there. */
+export declare const linkTileLoadingRatio: number;
+/**
+ * The whole tile is the link: one hit area and one focus ring, at the media frame's radius and
+ * 4px off the tile so it clears the image's edge.
+ */
+export declare const linkTileRootClasses: string;
+export declare const linkTileLoadingRootClasses = "flex w-full min-w-0 flex-col gap-3";
+/**
+ * The media frame. The hairline is drawn over the image, inside its edge, so a light image on the
+ * light page and a dark image on the dark page both keep an edge; it darkens on hover and focus.
+ */
+export declare const linkTileFrameClasses: string;
+/** The image keeps its own ratio: the `width` and `height` on it reserve the space before it loads. */
+export declare const linkTileFrameNaturalClasses = "[&>img]:block [&>img]:h-auto [&>img]:w-full";
+/** A fixed `ratio`: the frame sets the shape and the image fills it, cropped from the center. */
+export declare const linkTileFrameFixedClasses = "[&>img]:absolute [&>img]:inset-0 [&>img]:block [&>img]:size-full [&>img]:object-cover";
+/** The tag over the image's top-start corner. */
+export declare const linkTileTagOverClasses = "absolute start-2 top-2 z-[1] flex max-w-[calc(100%-1rem)]";
+/** Under the image: the source mark, then the title over the meta line. */
+export declare const linkTileCaptionClasses = "flex min-w-0 items-start gap-2";
+/** Holds the source mark on the title's first line. */
+export declare const linkTileSourceClasses = "flex h-5 shrink-0 items-center";
+/** The title's lines, then the meta line on its 16px line, with no gap between them: the leading is the space. */
+export declare const linkTileTextClasses = "flex min-w-0 flex-1 flex-col";
+/** The loading placeholder's title line — the title's 20px line box, with the bar centered in it. */
+export declare const linkTileLoadingLineClasses = "flex h-5 items-center";
+/** The loading placeholder's meta line — the meta's 16px line box. */
+export declare const linkTileLoadingMetaLineClasses = "flex h-4 items-center";
+/** Two lines at most. Hover and keyboard focus underline it, as a quiet **TextLink** does. */
+export declare const linkTileTitleClasses: string;
+export declare const linkTileExternalIconClasses = "ml-1 inline-block size-[0.85em] align-[-0.05em] stroke-current text-muted";
+/** One line, on the 16px caption line so it sits close under the title. */
+export declare const linkTileMetaClasses: string;
+/** A tag on a tile with no image sits at the caption's end. */
+export declare const linkTileTagInlineClasses = "flex shrink-0 items-center";
+//# sourceMappingURL=linkTileStyles.d.ts.map

package/dist/components/molecules/LinkTile/linkTileStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkTileStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/LinkTile/linkTileStyles.ts"],"names":[],"mappings":"AAIA,sGAAsG;AACtG,eAAO,MAAM,oBAAoB,QAAQ,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,mBAAmB,QAI/B,CAAC;AAEF,eAAO,MAAM,0BAA0B,uCAAuC,CAAC;AAE/E;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAMhC,CAAC;AAEF,uGAAuG;AACvG,eAAO,MAAM,2BAA2B,gDAAgD,CAAC;AAEzF,iGAAiG;AACjG,eAAO,MAAM,yBAAyB,0FACmD,CAAC;AAE1F,iDAAiD;AACjD,eAAO,MAAM,sBAAsB,8DAA8D,CAAC;AAElG,2EAA2E;AAC3E,eAAO,MAAM,sBAAsB,mCAAmC,CAAC;AAEvE,uDAAuD;AACvD,eAAO,MAAM,qBAAqB,mCAAmC,CAAC;AAEtE,kHAAkH;AAClH,eAAO,MAAM,mBAAmB,iCAAiC,CAAC;AAElE,qGAAqG;AACrG,eAAO,MAAM,0BAA0B,0BAA0B,CAAC;AAElE,sEAAsE;AACtE,eAAO,MAAM,8BAA8B,0BAA0B,CAAC;AAEtE,8FAA8F;AAC9F,eAAO,MAAM,oBAAoB,QAMhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,8EAA8E,CAAC;AAEvH,2EAA2E;AAC3E,eAAO,MAAM,mBAAmB,QAAmD,CAAC;AAEpF,+DAA+D;AAC/D,eAAO,MAAM,wBAAwB,+BAA+B,CAAC"}

package/dist/components/molecules/LinkTile/linkTileStyles.js

@@ -0,0 +1,8 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { typographyClass as t } from "../../../lib/typography.js";
+import { focusRingTransitionClasses as n, motionTransition as r } from "../../../lib/motion.js";
+//#region src/components/molecules/LinkTile/linkTileStyles.ts
+var i = 4 / 3, a = e("group/link-tile relative flex w-full min-w-0 flex-col gap-3 rounded-[var(--radius-card-body)] text-left no-underline", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-4 focus-visible:ring-offset-body", n), o = "flex w-full min-w-0 flex-col gap-3", s = e("relative block w-full overflow-hidden rounded-[var(--radius-card-body)] bg-muted-surface", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-border after:content-['']", "after:transition-[border-color,background-color] after:duration-fast after:ease-standard", "group-hover/link-tile:after:border-border-emphasized group-hover/link-tile:after:bg-overlay-hover", "group-focus-visible/link-tile:after:border-border-emphasized"), c = "[&>img]:block [&>img]:h-auto [&>img]:w-full", l = "[&>img]:absolute [&>img]:inset-0 [&>img]:block [&>img]:size-full [&>img]:object-cover", u = "absolute start-2 top-2 z-[1] flex max-w-[calc(100%-1rem)]", d = "flex min-w-0 items-start gap-2", f = "flex h-5 shrink-0 items-center", p = "flex min-w-0 flex-1 flex-col", m = "flex h-5 items-center", h = "flex h-4 items-center", g = e(t("ui-label"), "line-clamp-2 text-pretty underline decoration-transparent decoration-solid underline-offset-[0.2em]", "transition-[text-decoration-color]", r("fast"), "group-hover/link-tile:decoration-current group-focus-visible/link-tile:decoration-current"), _ = "ml-1 inline-block size-[0.85em] align-[-0.05em] stroke-current text-muted", v = e(t("caption-tight"), "truncate"), y = "flex shrink-0 items-center";
+//#endregion
+export { d as linkTileCaptionClasses, _ as linkTileExternalIconClasses, s as linkTileFrameClasses, l as linkTileFrameFixedClasses, c as linkTileFrameNaturalClasses, m as linkTileLoadingLineClasses, h as linkTileLoadingMetaLineClasses, i as linkTileLoadingRatio, o as linkTileLoadingRootClasses, v as linkTileMetaClasses, a as linkTileRootClasses, f as linkTileSourceClasses, y as linkTileTagInlineClasses, u as linkTileTagOverClasses, p as linkTileTextClasses, g as linkTileTitleClasses };

package/dist/components/molecules/TileGrid/TileGrid.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+import { type TileGridColumns, type TileGridLayout } from "./tileGridStyles";
+export { tileGridBreakpoints, tileGridDefaultColumns, tileGridLayouts, type TileGridBreakpoint, type TileGridColumns, type TileGridLayout, } from "./tileGridStyles";
+/** Layout-only — width, margin, or grid placement. */
+export type TileGridLayoutClassName = string;
+export interface TileGridProps {
+    /**
+     * `masonry` (default) — tiles keep their heights and pack upward, each next tile going to the
+     * shortest column. `uniform` — rows of equal height; give the tiles a fixed `ratio`.
+     */
+    layout?: TileGridLayout;
+    /**
+     * Columns — one number, or one per breakpoint (`{ base, sm, md, lg, xl }`; a breakpoint left out
+     * keeps the one below it). Default: `{ base: 1, sm: 2, lg: 3 }`. The gap is the grid gutter.
+     */
+    columns?: TileGridColumns;
+    /** Shown in place of the tiles when there are none — for example "No resources match these filters." */
+    empty?: ReactNode;
+    /** The tiles are placeholders for content on its way (`aria-busy`). */
+    busy?: boolean;
+    /** Names the list for screen readers, for example "Resources". */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** **TileGrid.Item** children, one per tile, each with a `key`. */
+    children?: ReactNode;
+    className?: TileGridLayoutClassName;
+}
+export interface TileGridItemProps {
+    /** One tile — a **LinkTile**, or a card. */
+    children?: ReactNode;
+    className?: TileGridLayoutClassName;
+}
+/**
+ * A grid of tiles on the page gutter. Reading order and tab order are the order of the items in
+ * both layouts: a masonry grid places each item in the shortest column, so the order runs across
+ * the top row and then down the page.
+ */
+declare function TileGridRoot({ layout, columns, empty, busy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, }: TileGridProps): import("react").JSX.Element;
+export declare const TileGrid: typeof TileGridRoot & {
+    Item: import("react").ForwardRefExoticComponent<TileGridItemProps & import("react").RefAttributes<HTMLLIElement>>;
+};
+//# sourceMappingURL=TileGrid.d.ts.map

package/dist/components/molecules/TileGrid/TileGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/TileGrid/TileGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAOL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,eAAe,EACf,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,KAAK,cAAc,GACpB,MAAM,kBAAkB,CAAC;AAE1B,sDAAsD;AACtD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,wGAAwG;IACxG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,MAAM,WAAW,iBAAiB;IAChC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED;;;;GAIG;AACH,iBAAS,YAAY,CAAC,EACpB,MAAkB,EAClB,OAAO,EACP,KAAK,EACL,IAAY,EACZ,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,QAAQ,EACR,SAAS,GACV,EAAE,aAAa,+BAwFf;AA2BD,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}