@orbytes/astrolab 0.3.0

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@orbytes/astrolab",
+  "version": "0.3.0",
+  "type": "module",
+  "description": "The orbytes component lab and pin board — an Astrobook shell for Astro sites (live/used-by pills, a viewport configurator, responsive and cull marks, a parameters panel) plus a dev-only click-to-ticket feedback board at /pin.",
+  "keywords": [
+    "astro",
+    "astro-integration",
+    "component-lab",
+    "dev-toolbar",
+    "feedback",
+    "orbytes"
+  ],
+  "author": "William Teig <william@orbytes.io>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "workspaces": [
+    "testbeds/*"
+  ],
+  "scripts": {
+    "build:core": "node scripts/build-core.mjs",
+    "prepare": "npm run build:core",
+    "prepack": "npm run build:core",
+    "dev": "npm --workspace testbed-orbytes-v2 run dev",
+    "build": "npm --workspace testbed-orbytes-v2 run build",
+    "preview": "npm --workspace testbed-orbytes-v2 run preview",
+    "build:staging": "npm --workspace testbed-orbytes-v2 run build:staging",
+    "check:isolation": "npm --workspace testbed-orbytes-v2 run check:isolation",
+    "verify": "npm --workspace testbed-orbytes-v2 run verify"
+  },
+  "bin": {
+    "orbytes-lab-cull": "bin/lab-cull.mjs",
+    "orbytes-pin-gallery": "bin/pin-gallery.mjs"
+  },
+  "main": "./index.mjs",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.mjs"
+    },
+    "./params": "./src/shell/lab-params.ts",
+    "./head": "./src/LabHead.astro",
+    "./home": "./src/Home.astro",
+    "./defaults": "./defaults.mjs",
+    "./pin": "./src/pin/index.mjs",
+    "./pin/board": "./src/pin/board.mjs",
+    "./pin/tickets": "./src/pin/tickets.mjs",
+    "./pin/source-stamp": "./src/pin/source-stamp.mjs",
+    "./pin/shot": "./src/pin/shot.mjs",
+    "./pin/toolbar": "./src/pin/toolbar.js",
+    "./shell/*": "./src/shell/*",
+    "./core": "./src/core/index.ts",
+    "./core/client": "./src/core/client.ts",
+    "./core/components/*": "./src/core/lib/components/*",
+    "./core/pages/*": "./src/core/lib/pages/*",
+    "./ui/*": "./src/ui/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "README.md",
+    "bin",
+    "defaults.mjs",
+    "dist",
+    "docs",
+    "index.d.ts",
+    "index.mjs",
+    "src",
+    "virtual.d.ts"
+  ],
+  "dependencies": {
+    "@sveltejs/acorn-typescript": "^1.0.12",
+    "acorn": "^8.18.0",
+    "fdir": "^6.5.0",
+    "slash": "^5.1.0",
+    "yoctocolors": "^2.2.0"
+  },
+  "peerDependencies": {
+    "astro": ">=7",
+    "playwright": ">=1.50.0"
+  },
+  "peerDependenciesMeta": {
+    "playwright": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.2",
+    "playwright": "^1.63.0"
+  }
+}

package/src/Empty.astro

@@ -0,0 +1,4 @@
+---
+// The stand-in for the consumer's `head` component when it does not pass one. LabHead.astro always
+// mounts something, so nothing there has to branch on whether a site contributed a head.
+---

package/src/Home.astro

@@ -0,0 +1,298 @@
+---
+// Lab home — Astrobook's `home` component, given to it by the integration (../index.mjs).
+// Replaces the stock splash with the lab index: a row of tier cards (each opening its folder page
+// at <subpath>/browse/<tier>), then every story as a live thumbnail card grouped by tier, each
+// card carrying its derived pill — live slot, used-by, or nothing.
+//
+// Everything drawn here comes from ./shell/lab-index.ts, which reads Astrobook's own story list
+// (so ids and URLs never drift from what it routes) and derives "live" from what the pages under
+// src/pages/ actually mount. The cards themselves are ./shell/CardGrid.astro, shared with the
+// folder pages.
+import { execSync } from "node:child_process";
+import labConfig from "virtual:orbytes-lab/config.mjs";
+import CardGrid from "./shell/CardGrid.astro";
+import {
+  buildLabIndex,
+  labBase,
+  liveCountOf,
+  sortTiers,
+  STAGING_URL,
+  tierLabel,
+} from "./shell/lab-index";
+
+const index = buildLabIndex();
+const tiers = sortTiers([...new Set(index.items.map((item) => item.tier))]).map((tier) => {
+  const items = index.items.filter((item) => item.tier === tier);
+  return {
+    tier,
+    label: tierLabel(tier),
+    href: tier ? `${labBase}/browse/${tier}` : `${labBase}/browse`,
+    count: items.length,
+    live: liveCountOf(items),
+    items,
+  };
+});
+
+// Local branches → per-branch preview builds, when the consumer configured a URL template.
+// `previewUrlTemplate` is a string with a {branch} placeholder rather than a function because the
+// config crosses a virtual module and has to stay JSON-serialisable. No template, no branch list:
+// a host that does not build branches has nothing to link to.
+const previewTemplate = labConfig.previewUrlTemplate;
+let branches: string[] = [];
+if (previewTemplate) {
+  try {
+    branches = execSync('git branch --format="%(refname:short)"', { encoding: "utf8" })
+      .split("\n")
+      .map((line) => line.trim())
+      .filter(Boolean);
+  } catch {
+    branches = [];
+  }
+}
+const previewAlias = (branch: string) =>
+  (previewTemplate ?? "").replace(
+    /\{branch\}/g,
+    branch
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, ""),
+  );
+---
+
+<div class="lab-home lab-chrome">
+  <header class="lab-home__header">
+    <p class="lab-home__eyebrow">// component lab</p>
+    <h1 class="lab-home__title">{labConfig.title}</h1>
+    <p class="lab-home__intro">
+      Every section, component and exploration in the build, rendered live. Cards open the story
+      in the dashboard; thumbnails are the bare renders themselves, scaled down. A white pill means
+      a page mounts that component right now, and names the page when it is not the home page. On
+      section versions a second pill says whether that version has been made responsive; tick it in
+      the sidebar. Where a deployed lab is configured, each card also links to the same story
+      there — the real minified build, which this dev server is not — and, locally, to the
+      component in VS Code.
+    </p>
+    {
+      STAGING_URL && (
+        <a class="lab-home__staging" href={STAGING_URL} target="_blank" rel="noopener">
+          Staging site
+          <span aria-hidden="true">&nbsp;&#8599;</span>
+        </a>
+      )
+    }
+  </header>
+
+  <section class="lab-home__tiers">
+    {
+      tiers.map((tier) => (
+        <a class="tier-card" href={tier.href}>
+          <span class="tier-card__eyebrow">// {tier.tier || "root"}</span>
+          <span class="tier-card__name">{tier.label}</span>
+          <span class="tier-card__meta">
+            <span>
+              {tier.count} stor{tier.count === 1 ? "y" : "ies"}
+            </span>
+            {tier.live > 0 && <span class="tier-card__live">{tier.live} live</span>}
+          </span>
+        </a>
+      ))
+    }
+  </section>
+
+  {
+    branches.length > 0 && (
+      <section class="lab-home__branches">
+        <h2 class="lab-home__group-title">Branches</h2>
+        <ul>
+          {branches.map((branch) => (
+            <li>
+              <code>{branch}</code>
+              <a href={previewAlias(branch)} target="_blank" rel="noopener">
+                branch preview
+              </a>
+            </li>
+          ))}
+        </ul>
+      </section>
+    )
+  }
+
+  {
+    tiers.map((tier) => (
+      <section class="lab-home__group">
+        <h2 class="lab-home__group-title">
+          <a href={tier.href}>{tier.label}</a>
+        </h2>
+        <CardGrid items={tier.items} />
+      </section>
+    ))
+  }
+</div>
+
+<style>
+  .lab-home {
+    background-color: var(--lab-color-bg);
+    color: var(--lab-color-text);
+    font-family: var(--lab-font-body);
+    min-height: 100%;
+    padding: 3em 2.5em 5em;
+  }
+
+  .lab-home__eyebrow {
+    font-family: var(--lab-font-mono);
+    font-weight: 500;
+    color: var(--lab-color-text-muted);
+    margin-bottom: 0.75em;
+  }
+
+  .lab-home__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;
+  }
+
+  .lab-home__intro {
+    max-width: 42em;
+    color: var(--lab-color-text-faint);
+    line-height: 1.55;
+    margin-bottom: 1.5em;
+  }
+
+  .lab-home__staging {
+    display: inline-block;
+    font-family: var(--lab-font-mono);
+    font-weight: 500;
+    color: var(--lab-color-text-strong);
+    text-decoration: none;
+    border: 1px solid var(--lab-color-border);
+    border-left: 1px solid var(--lab-color-text-strong);
+    padding: 0.75em 1.25em;
+    transition: background-color var(--lab-transition), color var(--lab-transition);
+  }
+
+  .lab-home__staging:hover,
+  .lab-home__staging:focus-visible {
+    background-color: var(--lab-color-text-strong);
+    color: var(--lab-color-accent-text);
+  }
+
+  .lab-home__tiers {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
+    gap: 1em;
+    margin-top: 2.5em;
+  }
+
+  .tier-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    text-decoration: none;
+    border: 1px solid var(--lab-color-border);
+    background-color: var(--lab-color-surface);
+    padding: 1.25em 1.5em;
+    transition: border-color var(--lab-transition);
+  }
+
+  .tier-card:hover,
+  .tier-card:focus-visible {
+    border-color: var(--lab-color-border-strong);
+  }
+
+  .tier-card__eyebrow {
+    font-family: var(--lab-font-mono);
+    font-weight: 500;
+    font-size: 0.75em;
+    color: var(--lab-color-text-faint);
+  }
+
+  .tier-card__name {
+    font-family: var(--lab-font-heading);
+    font-size: 1.4em;
+    font-weight: 500;
+    color: var(--lab-color-text-strong);
+  }
+
+  .tier-card__meta {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1em;
+    font-family: var(--lab-font-mono);
+    font-size: 0.8em;
+    color: var(--lab-color-text-faint);
+  }
+
+  .tier-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);
+  }
+
+  .lab-home__branches {
+    margin-top: 2.5em;
+  }
+
+  .lab-home__branches ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .lab-home__branches li {
+    display: flex;
+    align-items: baseline;
+    gap: 1em;
+    padding: 0.5em 0;
+    border-bottom: 1px solid var(--lab-color-border);
+  }
+
+  .lab-home__branches code {
+    font-family: var(--lab-font-mono);
+    color: var(--lab-color-text-strong);
+  }
+
+  .lab-home__branches a {
+    font-family: var(--lab-font-mono);
+    font-size: 0.85em;
+    color: var(--lab-color-text-faint);
+    text-decoration: none;
+  }
+
+  .lab-home__branches a:hover,
+  .lab-home__branches a:focus-visible {
+    color: var(--lab-color-text-strong);
+    text-decoration: underline;
+  }
+
+  .lab-home__group {
+    margin-top: 3em;
+  }
+
+  .lab-home__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);
+  }
+
+  .lab-home__group-title a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .lab-home__group-title a:hover,
+  .lab-home__group-title a:focus-visible {
+    color: var(--lab-color-text-strong);
+    text-decoration: underline;
+  }
+</style>