npm - @orbytes/astrolab - Versions diffs - 0.3.0 → 0.4.0-next.2 - Mend

@orbytes/astrolab 0.3.0 → 0.4.0-next.2

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 (82) hide show

package/README.md +261 -116
package/bin/pin-gallery.mjs +53 -19
package/defaults.mjs +72 -20
package/dist/core/virtual-module/virtual-routes.js +12 -1
package/docs/PIN-CONTRACT.md +84 -10
package/docs/PIN.md +117 -37
package/index.d.ts +41 -23
package/index.mjs +46 -91
package/package.json +7 -3
package/src/Home.astro +166 -264
package/src/LabHead.astro +37 -1047
package/src/chrome/ActionsMenu.astro +97 -0
package/src/chrome/ComponentCard.astro +76 -0
package/src/chrome/Icon.astro +21 -0
package/src/chrome/LICENSE-icons +43 -0
package/src/chrome/Nav.astro +131 -0
package/src/chrome/Panel.astro +117 -0
package/src/chrome/Properties.astro +104 -0
package/src/chrome/SectionsTree.astro +128 -0
package/src/chrome/Shell.astro +120 -0
package/src/chrome/Sprite.astro +23 -0
package/src/chrome/StoryView.astro +192 -0
package/src/chrome/Tree.astro +86 -0
package/src/chrome/ViewportControls.astro +173 -0
package/src/chrome/ViewportStage.astro +55 -0
package/src/chrome/fonts/OFL.txt +93 -0
package/src/chrome/fonts/inter-latin-wght-normal.woff2 +0 -0
package/src/chrome/icons.ts +68 -0
package/src/chrome/marks-client.ts +75 -0
package/src/chrome/model.ts +156 -0
package/src/chrome/navbar-client.ts +324 -0
package/src/chrome/params-client.ts +434 -0
package/src/chrome/pins-data.ts +63 -0
package/src/chrome/shell-client.ts +468 -0
package/src/chrome/site-data.ts +230 -0
package/src/chrome/trees.ts +257 -0
package/src/chrome/viewport-client.ts +405 -0
package/src/chrome/views/Assets.astro +125 -0
package/src/chrome/views/Pages.astro +214 -0
package/src/chrome/views/Placeholder.astro +37 -0
package/src/chrome/views/Tasks.astro +79 -0
package/src/core/LICENSE-astrobook +21 -0
package/src/core/lib/components/home.astro +4 -2
package/src/core/lib/pages/story.astro +12 -10
package/src/core/utils/kebab-case.ts +2 -2
package/src/core/virtual-module/virtual-routes.ts +20 -4
package/src/pin/board.mjs +414 -190
package/src/pin/index.mjs +67 -22
package/src/pin/tickets.mjs +6 -5
package/src/pin/toolbar.js +82 -4
package/src/shell/Browse.astro +131 -353
package/src/shell/Viewport.astro +22 -1315
package/src/shell/lab-index.ts +28 -18
package/src/shell/lab-params.ts +113 -6
package/src/shell/live-files.mjs +212 -10
package/src/shell/marks.mjs +17 -41
package/src/ui/components/app.astro +5 -7
package/src/ui/components/preview-layout.astro +17 -0
package/src/ui/components/theme-script.astro +17 -5
package/src/ui/lab.css +3754 -371
package/virtual.d.ts +13 -4
package/bin/lab-cull.mjs +0 -401
package/src/shell/CardGrid.astro +0 -297
package/src/ui/components/build-path.ts +0 -13
package/src/ui/components/build-tree.ts +0 -108
package/src/ui/components/collapse-duration.ts +0 -28
package/src/ui/components/compress-terms.ts +0 -10
package/src/ui/components/dashboard-layout.astro +0 -39
package/src/ui/components/home.astro +0 -65
package/src/ui/components/layout.astro +0 -110
package/src/ui/components/sidebar-button-fullscreen.astro +0 -38
package/src/ui/components/sidebar-button-search.astro +0 -23
package/src/ui/components/sidebar-button-theme.astro +0 -9
package/src/ui/components/sidebar-button.astro +0 -24
package/src/ui/components/sidebar-resize-handle.astro +0 -74
package/src/ui/components/sidebar-search-panel.astro +0 -41
package/src/ui/components/sidebar-search-script.ts +0 -103
package/src/ui/components/sidebar-title.astro +0 -17
package/src/ui/components/sidebar-tree-node.astro +0 -143
package/src/ui/components/sidebar-tree.astro +0 -84
package/src/ui/components/sidebar.astro +0 -29
package/src/ui/components/theme-toggle.astro +0 -63

package/src/shell/Browse.astro CHANGED Viewed

@@ -1,371 +1,149 @@
 ---
-// 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.
+// Folder pages — <subpath>/browse/[...path], injected by ../../index.mjs. One page per tier and per
+// folder under it (sections, sections/Section02Manifesto, …), plus the root, which lists the tiers.
+// Level 2 is the tier's tree; the content is the folder's components as cards, grouped by the
+// sub-folder they sit in, and the panel's search and filter narrow both at once.
 //
-// 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.
+// REDESIGNED 2026-09-24 onto the chrome shell (../chrome/Shell.astro). Cards are per component
+// now, not per story — a component's stories are its variants, chosen on its own page. The title
+// bar is the listing one (Figma `Lab / Listing`): title, counts, and filter chips that drive the
+// same filter as level 2's menu. On the sections tier, level 2 is the Sections tree.
 //
-// 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.
+// Pure chrome: this page renders no story. Its thumbnails are iframes of /lab/stories/<id>, which
+// are their own documents and get the consumer's CSS there (decided 2026-09-22 — ../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";
+import Shell from "../chrome/Shell.astro";
+import Tree from "../chrome/Tree.astro";
+import ComponentCard from "../chrome/ComponentCard.astro";
+import { hrefs, labConfig, type Crumb, type FilterOption, type TreeNode } from "../chrome/model";
+import { componentsOf, tierTree, type LabComponent } from "../chrome/trees";
+import { buildLabIndex, sortTiers, tierLabel } 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 } })),
+    { params: { path: undefined }, props: { folder: "" } },
+    ...index.folders.map((folder) => ({ params: { path: folder.path }, props: { folder: folder.path } })),
   ];
 }) 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 { folder } = Astro.props as Props;
+const index = buildLabIndex();
+const all = componentsOf(index);
+const segments = folder ? folder.split("/") : [];
+const tier = segments[0] ?? "";
+const under = (mod: LabComponent) => !folder || mod.directory === folder || mod.directory.startsWith(`${folder}/`);
+// One grid, in the tree's own order, so the cards read in the same sequence as level 2. The root
+// page (no folder) lists every tier in turn, each under its name.
+const leafOrder = (tierId: string) => {
+  const ids: string[] = [];
+  const walk = (nodes: TreeNode[]) => {
+    for (const node of nodes) node.children ? walk(node.children) : ids.push(node.id);
+  };
+  walk(tierTree(index, tierId));
+  return ids;
+};
+const inOrder = (tierId: string) => {
+  const byId = new Map(all.filter((m) => m.tier === tierId).map((m) => [`mod:${m.moduleId}`, m]));
+  return leafOrder(tierId).map((id) => byId.get(id)!).filter(Boolean);
+};
+const ordered: (readonly [string, LabComponent[]])[] = folder
+  ? [["", inOrder(tier).filter(under)] as const]
+  : sortTiers([...new Set(all.map((m) => m.tier))]).map((t) => [t, inOrder(t)] as const);
+const mods = ordered.flatMap(([, list]) => list);
+const tierDef = labConfig.tiers.find((t) => t.id === tier);
+const title = folder ? (segments.length === 1 ? tierLabel(tier) : segments[segments.length - 1]!) : "All components";
+// Level 2's breadcrumb names the panel's place (Site › Sections); a deeper folder is the navbar's.
+const crumbs: Crumb[] = folder
+  ? [{ label: "Site" }, { label: tierLabel(tier), href: hrefs.tier(tier) }]
+  : [{ label: "Site" }, { label: "All components" }];
+const filters: FilterOption[] = [
+  { value: "live", label: "Live on the site" },
+  { value: "used", label: "Used by something live" },
+  { value: "unused", label: "Unused" },
+  ...(tierDef?.responsive
+    ? [
+        { value: "responsive", label: "Made responsive" },
+        { value: "unresponsive", label: "Not responsive yet" },
+      ]
+    : []),
+];
+const live = mods.filter((m) => m.live).length;
+const used = mods.filter((m) => !m.live && m.usedBy.length).length;
+const unused = mods.length - live - used;
+const stories = mods.reduce((n, m) => n + m.stories.length, 0);
+const plural = (n: number, one: string, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
+// What one of these is called: "sections" on the sections tier, "components" anywhere else.
+const noun = tier ? tierLabel(tier).toLowerCase() : "components";
+const counts = [
+  segments.length > 1 ? segments.slice(0, -1).map((s, i) => (i === 0 ? tierLabel(s) : s)).join(" / ") : null,
+  plural(mods.length, noun.replace(/s$/, ""), noun),
+  plural(stories, "variant"),
+  live > 0 ? `${live} live` : null,
+  used > 0 ? `${used} used` : null,
+  unused > 0 ? `${unused} unused` : null,
+].filter(Boolean);
+// The title bar's filter chips set the same filter as level 2's menu (./../chrome/shell-client.ts).
+const chips = [
+  { value: "", label: "All", n: mods.length },
+  { value: "live", label: "Live", n: live },
+  { value: "used", label: "Used", n: used },
+  { value: "unused", label: "Unused", n: unused },
 ];
-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>
-                );
-              })}
+<Shell
+  title={title}
+  active={tier ? `tier:${tier}` : "home"}
+  navbarClass="lab-navbar--listing"
+  panel={folder ? { label: tierLabel(tier), crumbs, filters, filterLabel: "Show components", searchPlaceholder: `Search ${tierLabel(tier).toLowerCase()}` } : undefined}
+>
+  {folder && <Tree slot="panel" nodes={tierTree(index, tier)} />}
+  <Fragment slot="navbar">
+    <div class="lab-listing-bar">
+      <h1 class="lab-listing-bar__title">{title}</h1>
+      <p class="lab-listing-bar__counts">{counts.join(" · ")}</p>
+      <div class="lab-chips" role="radiogroup" aria-label="Show">
+        {
+          chips.map((chip) => (
+            <button class="lab-chip" type="button" role="radio" aria-checked={String(chip.value === "")} data-lab-filter={chip.value}>
+              {chip.label} {chip.n}
+            </button>
+          ))
+        }
+      </div>
+    </div>
+  </Fragment>
+  <div class="lab-page">
+    {
+      mods.length === 0 ? (
+        <div class="lab-empty">
+          <strong>Nothing here yet</strong>
+          Add a <code>*.stories.ts</code> file under <code>{labConfig.directory}/{folder}</code> and it appears here.
+        </div>
+      ) : (
+        ordered.map(([key, list]) => (
+          <section data-lab-filter-section>
+            {key && (
+              <h2 class="lab-section-title">
+                <a href={hrefs.tier(key)}>{tierLabel(key)}</a>
+                <small>{list.length}</small>
+              </h2>
+            )}
+            <div class="lab-cards">
+              {list.map((mod) => <ComponentCard mod={mod} />)}
             </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>
+        ))
+      )
+    }
+  </div>
+</Shell>