@orbytes/astrolab 0.3.0 → 0.4.0-next.2

package/src/chrome/ActionsMenu.astro

@@ -0,0 +1,97 @@
+---
+// The navbar's ⋯ button and its menu — Figma `Astrolab` › Menu › Type=Actions. Everything that
+// leaves the lab (VS Code, the bare variant full screen, staging, a link at this exact size), then
+// two sections that are switches rather than places:
+//
+//   Pins     Show pins (on) and Show resolved (off) — they govern the markers drawn on the framed
+//            preview. They moved here from the navbar (decided 2026-09-24); the navbar keeps only
+//            Comment. Only while the pin board runs, which is `astro dev` with the board enabled.
+//   Preview  Dark mode — the PREVIEW's own light or dark, separate from the chrome's. Hidden until
+//            the framed site turns out to have a dark mode (./viewport-client.ts looks for one).
+//
+// Checkable rows are `menuitemcheckbox` buttons, so the menu stays one list a keyboard can walk.
+// Behaviour: ./navbar-client.ts (pins), ./viewport-client.ts (copy link, dark mode).
+import Icon from "./Icon.astro";
+
+interface Props {
+  editorUrl?: string | null;
+  /** The bare variant, alone in a tab. */
+  fullScreenUrl?: string | null;
+  stagingUrl?: string | null;
+  /** Show the Pins section — only where the pin board runs. */
+  pins: boolean;
+}
+
+const { editorUrl, fullScreenUrl, stagingUrl, pins } = Astro.props;
+---
+
+<button
+  class="lab-tool lab-tool--icon lab-nb__more"
+  type="button"
+  popovertarget="lab-actions-menu"
+  title="More actions"
+>
+  <Icon name="more" size="sm" />
+  <span class="lab-visually-hidden">More actions</span>
+</button>
+<div class="lab-menu lab-menu--actions" id="lab-actions-menu" popover role="menu" data-lab-align="end">
+  {
+    editorUrl && (
+      <a class="lab-menu__item" role="menuitem" href={editorUrl}>
+        <span class="lab-menu__mark"><Icon name="code" size="sm" /></span>
+        <span class="lab-menu__text">Open in VS Code</span>
+      </a>
+    )
+  }
+  {
+    fullScreenUrl && (
+      <a class="lab-menu__item" role="menuitem" href={fullScreenUrl} target="_blank" rel="noopener">
+        <span class="lab-menu__mark"><Icon name="expand" size="sm" /></span>
+        <span class="lab-menu__text">Open full screen</span>
+        <span class="lab-menu__hint">the bare variant</span>
+      </a>
+    )
+  }
+  {
+    stagingUrl && (
+      <a class="lab-menu__item" role="menuitem" href={stagingUrl} target="_blank" rel="noopener">
+        <span class="lab-menu__mark"><Icon name="staging" size="sm" /></span>
+        <span class="lab-menu__text">View on staging</span>
+      </a>
+    )
+  }
+  {(editorUrl || fullScreenUrl || stagingUrl) && <hr />}
+  <button class="lab-menu__item" type="button" role="menuitem" data-lab-copy-link>
+    <span class="lab-menu__mark"><Icon name="link" size="sm" /></span>
+    <span class="lab-menu__text" data-lab-copy-label>Copy link to this exact size</span>
+    <span class="lab-menu__hint" data-lab-copy-size></span>
+  </button>
+  {
+    pins && (
+      <>
+        <hr />
+        <p class="lab-menu__label" id="lab-actions-pins">Pins</p>
+        <div role="group" aria-labelledby="lab-actions-pins">
+          <button class="lab-menu__item" type="button" role="menuitemcheckbox" aria-checked="true" data-lab-pins-toggle="show">
+            <span class="lab-menu__mark"><span class="lab-menu__box" aria-hidden="true" /></span>
+            <span class="lab-menu__text">Show pins</span>
+          </button>
+          <button class="lab-menu__item" type="button" role="menuitemcheckbox" aria-checked="false" data-lab-pins-toggle="resolved">
+            <span class="lab-menu__mark"><span class="lab-menu__box" aria-hidden="true" /></span>
+            <span class="lab-menu__text">Show resolved</span>
+          </button>
+        </div>
+      </>
+    )
+  }
+  <div data-lab-preview-group hidden>
+    <hr />
+    <p class="lab-menu__label" id="lab-actions-preview">Preview</p>
+    <div role="group" aria-labelledby="lab-actions-preview">
+      <button class="lab-menu__item" type="button" role="menuitemcheckbox" aria-checked="false" data-lab-preview-theme>
+        <span class="lab-menu__mark"><span class="lab-menu__box" aria-hidden="true" /></span>
+        <span class="lab-menu__text">Dark mode</span>
+      </button>
+    </div>
+  </div>
+</div>

package/src/chrome/ComponentCard.astro

@@ -0,0 +1,76 @@
+---
+// One card per COMPONENT (a stories module), not per story — the tree stops at the component and
+// so does the grid. The thumbnail is its first story's bare render (/lab/stories/<id>) in a lazy
+// <iframe> sized to a virtual viewport and scaled to the card by ../chrome/shell-client.ts: page
+// width for section-like tiers, a component stage otherwise. The whole card opens the component;
+// the icon links under it sit above that link.
+//
+// A live component carries the Sections tree's slot badge, not a "live · slot N of M" pill: one sign
+// for "live in slot N" across the lab (decided 2026-09-24, ASTROL-26). The title keeps the long form.
+import Icon from "./Icon.astro";
+import { componentState, type LabComponent } from "./trees";
+import { isSectionLike, livePillText, liveTitle } from "../shell/lab-index";
+
+interface Props {
+  mod: LabComponent;
+}
+
+const { mod } = Astro.props;
+const first = mod.stories[0]!;
+const liveStory = mod.stories.find((s) => s.live);
+const section = isSectionLike(first);
+const state = componentState(mod);
+---
+
+<article class="lab-card" data-lab-search={state.search} data-lab-facets={state.facets}>
+  <a class="lab-card__main" href={first.dashboardUrl}>
+    <span class="lab-card__thumb" data-frame-w={section ? 1440 : 960} data-frame-h={section ? 900 : 540}>
+      <iframe src={first.storyUrl} title={`${mod.moduleName} — ${first.storyName}`} loading="lazy" tabindex="-1"></iframe>
+    </span>
+    <span class="lab-card__body">
+      <span class="lab-card__name">
+        <span>{mod.moduleName}</span>
+        {mod.version && <span class="lab-card__version">{mod.version}</span>}
+      </span>
+      <span class="lab-card__sub">
+        {mod.stories.length} variant{mod.stories.length === 1 ? "" : "s"}{mod.summary ? ` · ${mod.summary}` : ""}
+      </span>
+      <span class="lab-card__pills">
+        {liveStory?.live && (
+          <span class="lab-slot" data-state="slotted" title={liveTitle(liveStory) ?? livePillText(liveStory) ?? undefined}>
+            <span class="lab-visually-hidden">Live in slot </span>{liveStory.live.slot}
+          </span>
+        )}
+        {!mod.live && mod.usedBy.length > 0 && (
+          <span class="lab-pill lab-pill--used" title={mod.usedBy.join("\n")}>used by {mod.usedBy.length}</span>
+        )}
+        {mod.responsive && (
+          <span
+            class:list={["lab-pill", mod.responsive.done ? "lab-pill--responsive" : "lab-pill--unresponsive"]}
+            title={mod.responsive.approved ? "approved for responsive work" : "not approved for responsive work yet"}
+          >
+            {mod.responsive.done ? "responsive" : "not responsive"}
+          </span>
+        )}
+      </span>
+    </span>
+  </a>
+  {
+    (first.editorUrl || first.stagingUrl) && (
+      <span class="lab-card__links">
+        {first.editorUrl && (
+          <a class="lab-icon-btn lab-card__link" href={first.editorUrl} title="Open in VS Code">
+            <Icon name="code" />
+            <span class="lab-visually-hidden">Open in VS Code</span>
+          </a>
+        )}
+        {first.stagingUrl && (
+          <a class="lab-icon-btn lab-card__link" href={first.stagingUrl} target="_blank" rel="noopener" title="View on staging">
+            <Icon name="external" />
+            <span class="lab-visually-hidden">View on staging</span>
+          </a>
+        )}
+      </span>
+    )
+  }
+</article>

package/src/chrome/Icon.astro

@@ -0,0 +1,21 @@
+---
+// One icon from the sprite (./Sprite.astro). Decorative by default; pass `label` when the icon is
+// the only thing naming a control.
+import type { IconName } from "./icons";
+
+interface Props {
+  name: IconName;
+  size?: "sm" | "md";
+  class?: string;
+  label?: string;
+}
+
+const { name, size = "md", class: extra, label } = Astro.props;
+---
+
+<svg
+  class:list={["lab-icon", size === "sm" && "lab-icon--sm", extra]}
+  aria-hidden={label ? undefined : "true"}
+  role={label ? "img" : undefined}
+  aria-label={label}
+><use href={`#lab-i-${name}`}></use></svg>

package/src/chrome/LICENSE-icons

@@ -0,0 +1,43 @@
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/chrome/Nav.astro

@@ -0,0 +1,131 @@
+---
+// Level 1 — the main nav (Figma `Sidebar navigation`, the white card). Home, the Site group (Pages,
+// one entry per tier, Assets), the Tasks group when the pin board is running, and Support and
+// Settings at the foot. Collapses to a 64px icon rail (⌘⇧B); in the rail a group's items open as
+// a flyout on hover or focus, under the group's name, drawn by CSS alone (../ui/lab.css › level 1
+// as a rail).
+//
+// The header carries the collapse button and the LAB's own light/dark toggle — a moon, beside the
+// logo, under the logomark in the rail (decided 2026-09-24). It switches the chrome only; the
+// preview's light/dark is a separate setting of its own.
+//
+// The logo and the Support / Settings pages are placeholders until they are designed.
+import Icon from "./Icon.astro";
+import { labConfig, navModel, type NavKey } from "./model";
+
+interface Props {
+  active: NavKey;
+}
+
+const { active } = Astro.props;
+const model = navModel();
+const isOpen = (group: { items: { key: NavKey }[] }) => group.items.some((item) => item.key === active);
+---
+
+<nav class="lab-l1" aria-label="Lab">
+  <div class="lab-l1__card">
+    <div class="lab-l1__top">
+      <div class="lab-l1__header">
+        <a class="lab-brand" href={model.home.href} title={labConfig.title}>
+          <span class="lab-brand__mark" aria-hidden="true"></span>
+          <span class="lab-brand__name">Astrolab</span>
+        </a>
+        {/* The collapse button's name and tooltip follow the state: "Collapse menu" when level 1
+            is open, "Expand menu" in the rail (./shell-client.ts keeps aria-label in step). */}
+        <button
+          class="lab-icon-btn lab-l1__btn lab-tipped"
+          type="button"
+          data-lab-toggle="l1"
+          data-lab-l1-btn
+          aria-label="Collapse menu"
+          aria-describedby="lab-tip-l1"
+        >
+          <Icon name="chevrons-left" size="sm" class="lab-l1-btn__collapse" />
+          <Icon name="chevrons-right" size="sm" class="lab-l1-btn__expand" />
+          <span class="lab-tip lab-tip--l1" id="lab-tip-l1" role="tooltip">
+            <span class="lab-tip__title">
+              <span class="lab-l1-btn__collapse">Collapse menu</span><span class="lab-l1-btn__expand">Expand menu</span> · ⌘⇧B
+            </span>
+            <span class="lab-tip__text">⌘B shows or hides the panel</span>
+            <span class="lab-tip__text">⌘. hides both (focus mode)</span>
+          </span>
+        </button>
+        <button
+          class="lab-icon-btn lab-l1__btn lab-theme-btn"
+          type="button"
+          data-lab-theme-toggle
+          aria-pressed="false"
+          aria-label="Dark mode for the lab"
+          title="Dark mode for the lab"
+        >
+          <Icon name="moon" size="sm" />
+        </button>
+      </div>
+
+      <div class="lab-l1__nav">
+        <a
+          class="lab-nav-item"
+          href={model.home.href}
+          aria-current={active === "home" ? "page" : undefined}
+          data-tip={model.home.label}
+          data-lab-nav-key="home"
+        >
+          <Icon name={model.home.icon} />
+          <span class="lab-nav-item__label">{model.home.label}</span>
+        </a>
+        {
+          model.groups.map((group) => (
+            <>
+              <hr class="lab-divider" />
+              <div class="lab-nav-group" data-lab-group={group.id} data-lab-holds-current={isOpen(group) ? "" : undefined}>
+                <button
+                  class="lab-nav-item"
+                  type="button"
+                  aria-expanded="true"
+                  aria-current={isOpen(group) ? "true" : undefined}
+                  data-tip={group.label}
+                  data-lab-group-toggle
+                >
+                  <Icon name={group.icon} />
+                  <span class="lab-nav-item__label">{group.label}</span>
+                  <Icon name="chevron-down" size="sm" class="lab-nav-group__chevron" />
+                </button>
+                <div class="lab-nav-group__items">
+                  <p class="lab-nav-group__flyout-label" aria-hidden="true">{group.label}</p>
+                  {group.items.map((item) => (
+                    <a
+                      class="lab-nav-item"
+                      href={item.href}
+                      aria-current={item.key === active ? "page" : undefined}
+                      data-lab-nav-key={item.key}
+                    >
+                      <Icon name={item.icon} />
+                      <span class="lab-nav-item__label">{item.label}</span>
+                    </a>
+                  ))}
+                </div>
+              </div>
+            </>
+          ))
+        }
+      </div>
+    </div>
+
+    <div class="lab-l1__footer">
+      {
+        model.footer.map((item) => (
+          <a
+            class="lab-nav-item"
+            href={item.href}
+            aria-current={item.key === active ? "page" : undefined}
+            data-tip={item.label}
+            data-lab-nav-key={item.key}
+          >
+            <Icon name={item.icon} />
+            <span class="lab-nav-item__label">{item.label}</span>
+          </a>
+        ))
+      }
+    </div>
+  </div>
+</nav>

package/src/chrome/Panel.astro

@@ -0,0 +1,117 @@
+---
+// Level 2 — the panel (Figma `Sidebar navigation`, the grey column): breadcrumb, search with its
+// filter menu, the tree in the default slot, and the coffee footer. Closes with ⌘B or its own
+// button; while closed it peeks out over the stage — below the navbar, never over it — when the
+// pointer reaches the stage's left edge.
+//
+// Only the Site views have one. Kanban Board and All Tasks have no level 2 (decided 2026-09-24).
+//
+// The coffee link is a placeholder until it has a destination.
+import Icon from "./Icon.astro";
+import { labBase, type Crumb, type FilterOption } from "./model";
+
+interface Props {
+  crumbs: Crumb[];
+  /** Label for the panel landmark, e.g. "Pages". */
+  label: string;
+  search?: boolean;
+  searchPlaceholder?: string;
+  filters?: FilterOption[];
+  filterLabel?: string;
+}
+
+const { crumbs, label, search = true, searchPlaceholder = "Search", filters, filterLabel = "Show" } = Astro.props;
+---
+
+<aside class="lab-l2" id="lab-l2" aria-label={label}>
+  <div class="lab-l2__header">
+    <div class="lab-l2__crumbs-row">
+      <nav aria-label="Breadcrumb">
+        <ol class="lab-crumbs">
+          <li class="lab-crumbs__item">
+            <a href={labBase || "/"} title="Lab home"><Icon name="home" /><span class="lab-visually-hidden">Lab home</span></a>
+          </li>
+          {
+            crumbs.map((crumb, i) => (
+              <li class="lab-crumbs__item" aria-current={i === crumbs.length - 1 ? "page" : undefined}>
+                {crumb.href && i < crumbs.length - 1 ? <a href={crumb.href}>{crumb.label}</a> : crumb.label}
+              </li>
+            ))
+          }
+        </ol>
+      </nav>
+      {/* One button, two actions: docked, it hides the panel; while the panel only peeks, it keeps
+          it open. Its name follows the action — ./shell-client.ts swaps the label when a peek
+          starts and ends (decided 2026-09-24). */}
+      <button
+        class="lab-icon-btn lab-l2__close"
+        type="button"
+        data-lab-toggle="l2"
+        data-lab-l2-btn
+        aria-label="Hide panel"
+        title="Hide panel · ⌘B"
+      >
+        <Icon name="panel-close" class="lab-l2__close-hide" />
+        <Icon name="panel-open" class="lab-l2__close-dock" />
+      </button>
+    </div>
+
+    {
+      search && (
+        <div class="lab-input">
+          <Icon name="search" size="sm" />
+          <input
+            class="lab-input__field"
+            type="search"
+            placeholder={searchPlaceholder}
+            aria-label={searchPlaceholder}
+            autocomplete="off"
+            spellcheck="false"
+            data-lab-tree-search
+          />
+          <kbd class="lab-input__kbd">⌘K</kbd>
+          {filters && filters.length > 0 && (
+            <button
+              class="lab-icon-btn"
+              type="button"
+              popovertarget="lab-tree-filter"
+              title="Filter"
+              data-lab-filter-btn
+            >
+              <Icon name="filter" size="sm" />
+              <span class="lab-visually-hidden">Filter</span>
+            </button>
+          )}
+        </div>
+      )
+    }
+    {
+      filters && filters.length > 0 && (
+        <div class="lab-menu" id="lab-tree-filter" popover role="menu" data-lab-align="end">
+          <p class="lab-menu__label">{filterLabel}</p>
+          <button class="lab-menu__item" type="button" role="menuitemradio" aria-checked="true" data-lab-filter="">
+            All
+            <Icon name="check" size="sm" class="lab-menu__tick" />
+          </button>
+          {filters.map((option) => (
+            <button class="lab-menu__item" type="button" role="menuitemradio" aria-checked="false" data-lab-filter={option.value}>
+              {option.label}
+              <Icon name="check" size="sm" class="lab-menu__tick" />
+            </button>
+          ))}
+        </div>
+      )
+    }
+  </div>
+
+  <div class="lab-l2__body" data-lab-l2-body>
+    <slot />
+  </div>
+
+  <div class="lab-l2__footer">
+    <span class="lab-nav-item lab-coffee" aria-disabled="true" title="The link is still to come">
+      <Icon name="coffee" />
+      <span class="lab-nav-item__label">Buy Me A Coffee</span>
+    </span>
+  </div>
+</aside>

package/src/chrome/Properties.astro

@@ -0,0 +1,104 @@
+---
+// The eye beside a component's (or page's) name, and the Properties panel it opens. It replaces the
+// navbar's status pills and their status menu (decided 2026-09-24: no pills in the identity — a
+// panel that opens when you hover a small eye beside the name). Figma `Astrolab` › Menu ›
+// Type=Properties, and the four cases on the `Lab / Properties` sheet.
+//
+// In order: On the site (live and its slot, used by, or not on any page), Open pins (with a row to
+// the task list), Responsive (the two marks, sections only), Source file. Mark for deletion is not
+// here: it was removed from the lab as a feature (decided 2026-09-24).
+//
+// Not a menu. The panel is a `popover="manual"` dialog: hovering the eye opens it after a short
+// delay and it stays open while the pointer is on the eye or the panel; clicking the eye (or
+// Enter / Space) pins it open until Escape or a click outside. Behaviour: ./navbar-client.ts. The
+// marks are live checkboxes whenever the panel is open (./marks-client.ts).
+import Icon from "./Icon.astro";
+
+interface Props {
+  /** One line per fact under "On the site"; `live` draws the green dot, otherwise it is grey. */
+  site: { text: string; live: boolean }[];
+  /** Open and resolved pins, and where the row leads. Null when the pin board is not running. */
+  pins: { open: number; resolved: number; href: string } | null;
+  /** The responsive marks for this file, or null when the lab keeps none for it. */
+  responsive: { file: string; approved: boolean; done: boolean } | null;
+  source: string | null;
+}
+
+const { site, pins, responsive, source } = Astro.props;
+
+const pinLine = (open: number, resolved: number) =>
+  open === 0 && resolved === 0 ? "No pins" : `${open === 0 ? "No open pins" : `${open} open`} · ${resolved} resolved`;
+---
+
+<button
+  class="lab-tool lab-tool--icon"
+  type="button"
+  aria-expanded="false"
+  aria-controls="lab-props"
+  title="Properties — hover to look, click to pin open"
+  data-lab-props-trigger
+>
+  <Icon name="properties" size="sm" />
+  <span class="lab-visually-hidden">Properties</span>
+</button>
+<div class="lab-menu lab-props" id="lab-props" popover="manual" role="dialog" aria-label="Properties" data-lab-props>
+  <p class="lab-menu__label">On the site</p>
+  <div class="lab-props__facts">
+    {
+      site.map((line) => (
+        <p class="lab-props__fact">
+          <span class:list={["lab-props__dot", line.live && "lab-props__dot--live"]} aria-hidden="true" />
+          {line.text}
+        </p>
+      ))
+    }
+  </div>
+  {
+    pins && (
+      <>
+        <hr />
+        <p class="lab-menu__label">Open pins</p>
+        <a class="lab-menu__item" href={pins.href}>
+          <span class="lab-menu__mark lab-props__pin">
+            <Icon name="marker" size="sm" />
+          </span>
+          <span class="lab-menu__text">{pinLine(pins.open, pins.resolved)}</span>
+          <Icon name="chevron-right" size="sm" class="lab-menu__trail" />
+        </a>
+      </>
+    )
+  }
+  {
+    responsive && (
+      <>
+        <hr />
+        <p class="lab-menu__label">Responsive</p>
+        <label class="lab-menu__item">
+          <span class="lab-menu__mark">
+            <input class="lab-checkbox" type="checkbox" data-lab-mark="approved" data-file={responsive.file} checked={responsive.approved} disabled />
+          </span>
+          <span class="lab-menu__text">Approved for responsive work</span>
+        </label>
+        <label class="lab-menu__item">
+          <span class="lab-menu__mark">
+            <input class="lab-checkbox" type="checkbox" data-lab-mark="done" data-file={responsive.file} checked={responsive.done} disabled />
+          </span>
+          <span class="lab-menu__text">Made responsive</span>
+        </label>
+      </>
+    )
+  }
+  {
+    source && (
+      <>
+        <hr />
+        <p class="lab-menu__label">Source file</p>
+        <p class="lab-props__source">{source}</p>
+      </>
+    )
+  }
+  <hr />
+  <p class="lab-props__note" data-lab-marks-note>
+    {responsive ? "Click the eye to pin · marks save to the repo" : "Click the eye to pin"}
+  </p>
+</div>