npm - @orbytes/astrolab - Versions diffs - 0.3.0 - Mend

@orbytes/astrolab 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/LICENSE +37 -0
package/README.md +410 -0
package/bin/lab-cull.mjs +401 -0
package/bin/pin-gallery.mjs +121 -0
package/defaults.mjs +120 -0
package/dist/core/astro-integration.js +130 -0
package/dist/core/index.js +6 -0
package/dist/core/lib-paths.js +29 -0
package/dist/core/options.js +173 -0
package/dist/core/utils/get-exports.js +52 -0
package/dist/core/utils/invariant.js +12 -0
package/dist/core/utils/kebab-case.js +15 -0
package/dist/core/utils/path-builder.js +22 -0
package/dist/core/utils/path.js +53 -0
package/dist/core/virtual-module/get-story-modules.js +60 -0
package/dist/core/virtual-module/story-modules.js +8 -0
package/dist/core/virtual-module/virtual-module-ids.js +22 -0
package/dist/core/virtual-module/virtual-routes.js +83 -0
package/dist/core/virtual-module/vite-plugin.js +98 -0
package/docs/PIN-CONTRACT.md +263 -0
package/docs/PIN.md +429 -0
package/index.d.ts +279 -0
package/index.mjs +347 -0
package/package.json +93 -0
package/src/Empty.astro +4 -0
package/src/Home.astro +298 -0
package/src/LabHead.astro +1102 -0
package/src/core/LICENSE-astrobook +166 -0
package/src/core/astro-integration.ts +166 -0
package/src/core/client.ts +89 -0
package/src/core/index.ts +7 -0
package/src/core/lib/components/empty.astro +1 -0
package/src/core/lib/components/head.astro +1 -0
package/src/core/lib/components/home.astro +8 -0
package/src/core/lib/components/with-decorators.astro +22 -0
package/src/core/lib/pages/app.astro +19 -0
package/src/core/lib/pages/preview.astro +17 -0
package/src/core/lib/pages/story.astro +16 -0
package/src/core/lib-paths.ts +72 -0
package/src/core/options.ts +262 -0
package/src/core/utils/get-exports.ts +59 -0
package/src/core/utils/invariant.ts +13 -0
package/src/core/utils/kebab-case.ts +30 -0
package/src/core/utils/path-builder.ts +45 -0
package/src/core/utils/path.ts +80 -0
package/src/core/virtual-module/get-story-modules.ts +110 -0
package/src/core/virtual-module/story-modules.ts +9 -0
package/src/core/virtual-module/virtual-module-ids.ts +17 -0
package/src/core/virtual-module/virtual-routes.ts +130 -0
package/src/core/virtual-module/vite-plugin.ts +125 -0
package/src/pin/board.mjs +1521 -0
package/src/pin/index.mjs +666 -0
package/src/pin/shot.mjs +427 -0
package/src/pin/source-stamp.mjs +159 -0
package/src/pin/tickets.mjs +697 -0
package/src/pin/toolbar.js +3181 -0
package/src/shell/Browse.astro +371 -0
package/src/shell/CardGrid.astro +297 -0
package/src/shell/Viewport.astro +1330 -0
package/src/shell/index.json.ts +12 -0
package/src/shell/lab-index.ts +344 -0
package/src/shell/lab-params.ts +245 -0
package/src/shell/live-files.mjs +164 -0
package/src/shell/marks.mjs +136 -0
package/src/types/index.ts +6 -0
package/src/types/types.ts +239 -0
package/src/types/virtual.d.ts +29 -0
package/src/ui/components/app.astro +13 -0
package/src/ui/components/build-path.ts +13 -0
package/src/ui/components/build-tree.ts +108 -0
package/src/ui/components/collapse-duration.ts +28 -0
package/src/ui/components/compress-terms.ts +10 -0
package/src/ui/components/dashboard-layout.astro +39 -0
package/src/ui/components/home.astro +65 -0
package/src/ui/components/layout.astro +110 -0
package/src/ui/components/preview-layout.astro +109 -0
package/src/ui/components/sidebar-button-fullscreen.astro +38 -0
package/src/ui/components/sidebar-button-search.astro +23 -0
package/src/ui/components/sidebar-button-theme.astro +9 -0
package/src/ui/components/sidebar-button.astro +24 -0
package/src/ui/components/sidebar-resize-handle.astro +74 -0
package/src/ui/components/sidebar-search-panel.astro +41 -0
package/src/ui/components/sidebar-search-script.ts +103 -0
package/src/ui/components/sidebar-title.astro +17 -0
package/src/ui/components/sidebar-tree-node.astro +143 -0
package/src/ui/components/sidebar-tree.astro +84 -0
package/src/ui/components/sidebar.astro +29 -0
package/src/ui/components/theme-message.ts +26 -0
package/src/ui/components/theme-script.astro +71 -0
package/src/ui/components/theme-toggle.astro +63 -0
package/src/ui/components/theme.ts +32 -0
package/src/ui/index.ts +4 -0
package/src/ui/lab.css +549 -0
package/virtual.d.ts +42 -0

package/src/shell/Browse.astro ADDED Viewed

@@ -0,0 +1,371 @@
+---
+// Folder pages — <subpath>/browse/[...path], injected by ../../index.mjs. One page per folder in
+// the lab index (sections, sections/Section02Manifesto, …) plus the root, which lists the tiers.
+// Each page shows the folder's sub-folders as cards and its stories as live-render cards with
+// their pills, behind a client-side filter box.
+//
+// This page is NOT rendered through Astrobook's layout, so it carries its own <head> — and with
+// it <LabHead />, which brings the chrome stylesheet (../ui/lab.css) and the UNCONDITIONAL
+// noindex. A consumer's lab gate walks every built lab page and fails on any without it. Do not
+// drop that import.
+//
+// CHANGED 2026-09-22 — the lab is not styled in the styles of the website being built. This
+// file used to open with `import "virtual:orbytes-lab/user-css.mjs"` — it asked for the
+// consumer's stylesheets by hand, because Astrobook injects the `css` option into its own pages
+// only. A folder page is pure chrome: it renders no story, and its thumbnails are iframes of
+// /lab/stories/<id>, which are their own documents and get the consumer's CSS there. So it asks
+// for nothing now, and the chrome below is drawn entirely in `--lab-*` tokens. Reasoning:
+// ../ui/lab.css.
+import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
+import LabHead from "../LabHead.astro";
+import CardGrid from "./CardGrid.astro";
+import { buildLabIndex, itemsUnder, labBase, type LabFolder } from "./lab-index";
+export const getStaticPaths = (() => {
+  const index = buildLabIndex();
+  return [
+    { params: { path: undefined }, props: { index, folder: null } },
+    ...index.folders.map((folder) => ({ params: { path: folder.path }, props: { index, folder } })),
+  ];
+}) satisfies GetStaticPaths;
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+const { index, folder } = Astro.props as Props;
+const browseBase = `${labBase}/browse`;
+const folderByPath = new Map(index.folders.map((f) => [f.path, f]));
+const itemById = new Map(index.items.map((i) => [i.storyId, i]));
+const children: LabFolder[] = folder
+  ? folder.children.map((p) => folderByPath.get(p)).filter((f): f is LabFolder => Boolean(f))
+  : index.folders.filter((f) => !f.path.includes("/"));
+const items = folder
+  ? folder.items.map((id) => itemById.get(id)).filter((i) => i !== undefined)
+  : index.items.filter((i) => i.directory === "");
+const storyCount = (f: LabFolder) => itemsUnder(index, f.path).length;
+const firstStory = folder ? itemsUnder(index, folder.path)[0] : index.items[0];
+const segments = folder ? folder.path.split("/") : [];
+const crumbs = [
+  { label: "lab", href: labBase },
+  ...segments.map((segment, i) => ({
+    label: segment,
+    href: `${browseBase}/${segments.slice(0, i + 1).join("/")}`,
+  })),
+];
+const title = crumbs.map((c) => c.label).join(" › ");
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+    <LabHead />
+  </head>
+  <body>
+    <div class="browse lab-chrome">
+      <header class="browse__header">
+        <nav class="browse__crumbs" aria-label="Breadcrumb">
+          <a class="browse__back" href={labBase}>← lab</a>
+          <ol>
+            {
+              crumbs.map((crumb, i) => (
+                <li>
+                  {i < crumbs.length - 1 ? <a href={crumb.href}>{crumb.label}</a> : <span aria-current="page">{crumb.label}</span>}
+                </li>
+              ))
+            }
+          </ol>
+        </nav>
+        <h1 class="browse__title">{folder ? folder.name : "Orbytes lab"}</h1>
+        <p class="browse__meta">
+          {children.length > 0 && <span>{children.length} folder{children.length === 1 ? "" : "s"}</span>}
+          {items.length > 0 && <span>{items.length} stor{items.length === 1 ? "y" : "ies"} here</span>}
+          {folder && folder.liveCount > 0 && <span class="browse__live">{folder.liveCount} live</span>}
+          {
+            folder && folder.responsive.of > 0 && (
+              <span class="browse__responsive" title="section versions made responsive">
+                {folder.responsive.done}/{folder.responsive.of} responsive
+              </span>
+            )
+          }
+          {
+            firstStory && (
+              <a href={firstStory.dashboardUrl}>
+                open in the dashboard <span aria-hidden="true">&#8599;</span>
+              </a>
+            )
+          }
+        </p>
+        <label class="browse__filter">
+          <span class="browse__filter-label">// filter</span>
+          <input id="lab-filter" type="search" placeholder="name, section, version, tag…" autocomplete="off" />
+        </label>
+      </header>
+      {
+        children.length > 0 && (
+          <section class="browse__group">
+            <h2 class="browse__group-title">Folders</h2>
+            <div class="browse__folders">
+              {children.map((child) => {
+                const count = storyCount(child);
+                return (
+                  <a class="folder-card" href={`${browseBase}/${child.path}`} data-search={child.path.toLowerCase()}>
+                    <span class="folder-card__name">{child.name}</span>
+                    <span class="folder-card__meta">
+                      <span>
+                        {count} stor{count === 1 ? "y" : "ies"}
+                      </span>
+                      {child.responsive.of > 0 && (
+                        <span class="folder-card__responsive" title="section versions made responsive">
+                          {child.responsive.done}/{child.responsive.of} responsive
+                        </span>
+                      )}
+                      {child.liveCount > 0 && <span class="folder-card__live">{child.liveCount} live</span>}
+                    </span>
+                  </a>
+                );
+              })}
+            </div>
+          </section>
+        )
+      }
+      {
+        items.length > 0 && (
+          <section class="browse__group">
+            <h2 class="browse__group-title">Stories</h2>
+            <CardGrid items={items} />
+          </section>
+        )
+      }
+      {children.length === 0 && items.length === 0 && <p class="browse__empty">Nothing in this folder.</p>}
+    </div>
+    <script>
+      // Client-side filter: every term typed must appear in a card's data-search text.
+      const input = document.getElementById("lab-filter") as HTMLInputElement | null;
+      const cards = document.querySelectorAll<HTMLElement>("[data-search]");
+      input?.addEventListener("input", () => {
+        const terms = input.value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+        for (const card of cards) {
+          const text = card.dataset.search ?? "";
+          card.hidden = !terms.every((term) => text.includes(term));
+        }
+      });
+    </script>
+  </body>
+</html>
+<style is:global>
+  /* The filter hides cards with the `hidden` attribute; the cards' own `display` rules (CardGrid's
+     scoped styles) would otherwise beat the UA stylesheet, so this is global and !important. */
+  [hidden] {
+    display: none !important;
+  }
+</style>
+<style>
+  .browse {
+    background-color: var(--lab-color-bg);
+    color: var(--lab-color-text);
+    font-family: var(--lab-font-body);
+    min-height: 100vh;
+    padding: 3em 2.5em 5em;
+  }
+  .browse__crumbs {
+    display: flex;
+    align-items: baseline;
+    gap: 1.5em;
+    font-family: var(--lab-font-mono);
+    font-weight: 500;
+    font-size: 0.85em;
+    color: var(--lab-color-text-muted);
+    margin-bottom: 1.25em;
+  }
+  .browse__crumbs ol {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    gap: 0.5em;
+  }
+  .browse__crumbs li + li::before {
+    content: "›";
+    color: var(--lab-color-text-faint);
+    margin-right: 0.5em;
+  }
+  .browse__crumbs a,
+  .browse__back {
+    color: var(--lab-color-text-faint);
+    text-decoration: none;
+  }
+  .browse__crumbs a:hover,
+  .browse__crumbs a:focus-visible,
+  .browse__back:hover,
+  .browse__back:focus-visible {
+    color: var(--lab-color-text-strong);
+    text-decoration: underline;
+  }
+  .browse__crumbs [aria-current] {
+    color: var(--lab-color-text-strong);
+  }
+  .browse__title {
+    font-family: var(--lab-font-heading);
+    color: var(--lab-color-text-strong);
+    font-size: 2.25em;
+    font-weight: 500;
+    letter-spacing: -0.5px;
+    margin-bottom: 0.4em;
+  }
+  .browse__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 1.25em;
+    font-family: var(--lab-font-mono);
+    font-size: 0.85em;
+    color: var(--lab-color-text-faint);
+    margin-bottom: 1.5em;
+  }
+  .browse__meta a {
+    color: var(--lab-color-text-strong);
+    text-decoration: none;
+    border-bottom: 1px solid var(--lab-color-border);
+  }
+  .browse__meta a:hover,
+  .browse__meta a:focus-visible {
+    border-bottom-color: var(--lab-color-text-strong);
+  }
+  .browse__responsive,
+  .folder-card__responsive {
+    line-height: 1;
+    padding: 0.45em 0.85em;
+    border-radius: var(--lab-radius-pill);
+    border: 1px dashed var(--lab-color-border);
+    color: var(--lab-color-text-faint);
+  }
+  .browse__live,
+  .folder-card__live {
+    font-weight: 500;
+    line-height: 1;
+    padding: 0.45em 0.85em;
+    border-radius: var(--lab-radius-pill);
+    background-color: var(--lab-color-accent);
+    color: var(--lab-color-accent-text);
+  }
+  .browse__filter {
+    display: flex;
+    align-items: baseline;
+    gap: 1em;
+    max-width: 36em;
+    border: 1px solid var(--lab-color-border);
+    border-left: 1px solid var(--lab-color-text-strong);
+    padding: 0.65em 1em;
+  }
+  .browse__filter-label {
+    font-family: var(--lab-font-mono);
+    font-weight: 500;
+    font-size: 0.85em;
+    color: var(--lab-color-text-muted);
+    white-space: nowrap;
+  }
+  .browse__filter input {
+    flex: 1;
+    font: inherit;
+    font-family: var(--lab-font-mono);
+    font-size: 0.9em;
+    color: var(--lab-color-text-strong);
+    background: transparent;
+    border: 0;
+    outline: none;
+  }
+  .browse__filter input::placeholder {
+    color: var(--lab-color-text-faint);
+  }
+  .browse__filter:focus-within {
+    border-color: var(--lab-color-border-strong);
+    border-left-color: var(--lab-color-text-strong);
+  }
+  .browse__group {
+    margin-top: 3em;
+  }
+  .browse__group-title {
+    font-family: var(--lab-font-mono);
+    font-weight: 500;
+    font-size: 1em;
+    color: var(--lab-color-text-muted);
+    margin-bottom: 1em;
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid var(--lab-color-border);
+  }
+  .browse__folders {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
+    gap: 1em;
+  }
+  .folder-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+    text-decoration: none;
+    border: 1px solid var(--lab-color-border);
+    background-color: var(--lab-color-surface);
+    padding: 1.1em 1.25em;
+    transition: border-color var(--lab-transition);
+  }
+  .folder-card:hover,
+  .folder-card:focus-visible {
+    border-color: var(--lab-color-border-strong);
+  }
+  .folder-card__name {
+    color: var(--lab-color-text-strong);
+    font-weight: 500;
+  }
+  .folder-card__meta {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1em;
+    font-family: var(--lab-font-mono);
+    font-size: 0.75em;
+    color: var(--lab-color-text-faint);
+  }
+  .browse__empty {
+    margin-top: 3em;
+    font-family: var(--lab-font-mono);
+    font-size: 0.85em;
+    color: var(--lab-color-text-faint);
+  }
+</style>

package/src/shell/CardGrid.astro ADDED Viewed

@@ -0,0 +1,297 @@
+---
+// One card per story: a scaled-down live <iframe> of the bare render, the module and story
+// names, the pills derived from the index — `live · slot N of M` when a page mounts the component
+// (`live · /about, slot 3` when that page is not the home page), `used by N` when a live component
+// imports it, plus the responsive mark on section versions — and a row of links: the viewport
+// configurator, the same story on staging, and (dev only) the component in VS Code. Factored out
+// of Home.astro so the folder pages (Browse.astro) draw the identical card.
+//
+// Thumbnails are the bare story routes themselves (/lab/stories/<id>) rendered in a virtual
+// viewport: sections at 1440×900 (page width), everything else at 960×540.
+//
+// The card is a <div> holding several links, not one <a>: the main link (thumb + label) opens the
+// dashboard and the link row sits under it. An <a> cannot nest in an <a>.
+import { isSectionLike, labBase, livePillText, liveTitle, type LabItem } from "./lab-index";
+interface Props {
+  items: LabItem[];
+  /** Shown when there is nothing to draw. */
+  empty?: string;
+}
+const { items, empty = "No stories here." } = Astro.props;
+type Pill = { text: string; kind: string; title?: string };
+const pillsOf = (item: LabItem): Pill[] => {
+  const pills: Pill[] = [];
+  const live = livePillText(item);
+  if (live) pills.push({ text: live, kind: "live", title: liveTitle(item) });
+  else if (item.usedBy.length > 0)
+    pills.push({ text: `used by ${item.usedBy.length}`, kind: "used", title: item.usedBy.join("\n") });
+  if (item.responsive) {
+    pills.push({
+      text: item.responsive.done ? "responsive" : "not responsive",
+      kind: item.responsive.done ? "responsive" : "unresponsive",
+      title: item.responsive.approved
+        ? "approved for responsive work"
+        : "not approved for responsive work yet",
+    });
+  }
+  return pills;
+};
+// What the page-level filter box matches against.
+const searchText = (item: LabItem) =>
+  [
+    item.moduleName,
+    item.storyName,
+    item.section,
+    item.version,
+    item.tier,
+    item.livePage,
+    item.live ? "live" : "",
+    // "unresponsive", not "not responsive": the filter is a substring match per term, so a card
+    // that said "not responsive" would still be a hit for "responsive". Same on the sidebar rows.
+    item.responsive ? (item.responsive.done ? "responsive" : "unresponsive") : "",
+    ...item.tags,
+  ]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase();
+---
+{
+  items.length === 0 ? (
+    <p class="lab-grid__empty">{empty}</p>
+  ) : (
+    <div class="lab-grid">
+      {items.map((item) => {
+        const section = isSectionLike(item);
+        const pills = pillsOf(item);
+        return (
+          <div class="lab-card" data-search={searchText(item)}>
+            <a class="lab-card__main" href={item.dashboardUrl}>
+              <span
+                class="lab-card__thumb"
+                data-frame-w={section ? 1440 : 960}
+                data-frame-h={section ? 900 : 540}
+              >
+                <iframe
+                  src={item.storyUrl}
+                  title={`${item.moduleName} — ${item.storyName}`}
+                  loading="lazy"
+                  tabindex="-1"
+                />
+                {pills.length > 0 && (
+                  <span class="lab-card__pills">
+                    {pills.map((pill) => (
+                      <span class:list={["lab-card__pill", `lab-card__pill--${pill.kind}`]} title={pill.title}>
+                        {pill.text}
+                      </span>
+                    ))}
+                  </span>
+                )}
+              </span>
+              <span class="lab-card__label">
+                <span class="lab-card__name">
+                  {item.moduleName}
+                  {item.version && <span class="lab-card__version">{item.version}</span>}
+                </span>
+                <span class="lab-card__variant">{item.storyName}</span>
+              </span>
+            </a>
+            <span class="lab-card__links">
+              <a
+                href={`${labBase}/viewport/${item.storyId}`}
+                title="Open in the viewport configurator"
+                data-astro-reload
+              >
+                viewport <span aria-hidden="true">&#8690;</span>
+              </a>
+              {item.stagingUrl && (
+                <a href={item.stagingUrl} title="The same story on the deployed lab" target="_blank" rel="noopener">
+                  staging <span aria-hidden="true">&#8599;</span>
+                </a>
+              )}
+              {item.editorUrl && (
+                <a href={item.editorUrl} title="Open the component in VS Code">
+                  code <span aria-hidden="true">&#8599;</span>
+                </a>
+              )}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  )
+}
+<script>
+  // Scale each thumbnail iframe so its virtual viewport (data-frame-w × data-frame-h) fits the
+  // card width exactly. Re-run on resize and after every Astro view-transition swap (the lab home
+  // sits inside Astrobook's ClientRouter, where module scripts do not re-execute on navigation).
+  const fit = () => {
+    for (const thumb of document.querySelectorAll<HTMLElement>(".lab-card__thumb")) {
+      const iframe = thumb.querySelector("iframe");
+      if (!iframe) continue;
+      const frameW = Number(thumb.dataset.frameW) || 1440;
+      const frameH = Number(thumb.dataset.frameH) || 900;
+      const scale = thumb.clientWidth / frameW;
+      iframe.style.width = `${frameW}px`;
+      iframe.style.height = `${frameH}px`;
+      iframe.style.transform = `scale(${scale})`;
+      thumb.style.height = `${Math.round(frameH * scale)}px`;
+    }
+  };
+  fit();
+  window.addEventListener("resize", fit);
+  document.addEventListener("astro:page-load", fit);
+</script>
+<style>
+  .lab-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
+    gap: 1.5em;
+  }
+  .lab-grid__empty {
+    font-family: var(--lab-font-mono);
+    font-size: 0.85em;
+    color: var(--lab-color-text-faint);
+  }
+  .lab-card {
+    position: relative;
+    display: block;
+    border: 1px solid var(--lab-color-border);
+    background-color: var(--lab-color-surface);
+    transition: border-color var(--lab-transition);
+  }
+  .lab-card:hover,
+  .lab-card:focus-within {
+    border-color: var(--lab-color-border-strong);
+  }
+  .lab-card__main {
+    display: block;
+    text-decoration: none;
+  }
+  .lab-card__main:focus-visible {
+    outline: none;
+  }
+  /* The link row under the label. Three links no longer fit over the label's right end, so they
+     get their own row rather than a cramped overlay. */
+  .lab-card__links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.25em;
+    padding: 0 1em 0.85em;
+  }
+  .lab-card__links a {
+    font-family: var(--lab-font-mono);
+    font-weight: 500;
+    font-size: 0.75em;
+    line-height: 1.5;
+    color: var(--lab-color-text-faint);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: color var(--lab-transition), border-color var(--lab-transition);
+  }
+  .lab-card__links a:hover,
+  .lab-card__links a:focus-visible {
+    color: var(--lab-color-text-strong);
+    border-bottom-color: var(--lab-color-text-strong);
+    outline: none;
+  }
+  .lab-card__thumb {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    background-color: var(--lab-color-bg);
+    border-bottom: 1px solid var(--lab-color-border);
+  }
+  .lab-card__thumb iframe {
+    border: 0;
+    transform-origin: 0 0;
+    pointer-events: none; /* the card is the link; the live render is display-only */
+  }
+  .lab-card__pills {
+    position: absolute;
+    top: 0.6em;
+    left: 0.6em;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4em;
+  }
+  .lab-card__pill {
+    font-family: var(--lab-font-mono);
+    font-weight: 500;
+    font-size: 0.7em;
+    line-height: 1;
+    padding: 0.5em 0.85em;
+    border-radius: var(--lab-radius-pill);
+    border: 1px solid var(--lab-color-border);
+    background-color: var(--lab-color-surface-raised);
+    color: var(--lab-color-text-muted);
+  }
+  .lab-card__pill--live {
+    background-color: var(--lab-color-accent);
+    border-color: var(--lab-color-accent);
+    color: var(--lab-color-accent-text);
+  }
+  /* The responsive mark: solid border when the version has been made responsive, dashed when it
+     has not — the same two-state reading as the sidebar's pill. */
+  .lab-card__pill--responsive {
+    border-color: var(--lab-color-border-strong);
+    color: var(--lab-color-text-strong);
+  }
+  .lab-card__pill--unresponsive {
+    border-style: dashed;
+    color: var(--lab-color-text-faint);
+  }
+  .lab-card__label {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1em;
+    padding: 0.75em 1em 0.5em;
+  }
+  .lab-card__name {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.6em;
+    color: var(--lab-color-text-strong);
+    font-weight: 500;
+    font-size: 0.95em;
+  }
+  .lab-card__version {
+    font-family: var(--lab-font-mono);
+    font-size: 0.75em;
+    color: var(--lab-color-text-faint);
+    border: 1px solid var(--lab-color-border);
+    padding: 0.1em 0.5em;
+  }
+  .lab-card__variant {
+    font-family: var(--lab-font-mono);
+    font-size: 0.8em;
+    color: var(--lab-color-text-faint);
+  }
+</style>