@orbytes/astrolab 0.4.0-next.1 → 0.4.0-next.2

package/src/chrome/StoryView.astro

@@ -1,24 +1,33 @@
 ---
 // A component's page — <subpath>/dashboard/<storyId>, the route Astrobook's core generates for every
-// story (../core/lib/pages/story.astro renders this). REDESIGNED 2026-09-24:
+// story (../core/lib/pages/story.astro renders this).
 //
-//   · the story is an <iframe> of its bare route on a canvas you size (./ViewportStage.astro), no
-//     longer rendered inline beside the chrome — so this page carries none of the site's CSS;
-//   · the tree stops at the component, and the component's stories are TABS here, a dropdown past
-//     four; previous / next (and j / k) step through every story of the tier in tree order;
-//   · the component's marks (responsive, marked for deletion) live in the status menu behind its
-//     pills, and everything that leaves the lab (VS Code, full screen, staging, a link) in ⋯.
+//   · the story is an <iframe> of its bare route on a canvas you size (./ViewportStage.astro), never
+//     rendered inline beside the chrome — so this page carries none of the site's CSS;
+//   · the tree stops at the component; the component's variants are ALWAYS a dropdown ("Default
+//     1 of 3"), at any count, and previous / next (and j / k) step through every variant of the
+//     tier in tree order (decided 2026-09-24: no tabs in the navbar);
+//   · the identity is the name, the version and an eye: no pills. The eye opens the Properties
+//     panel — live and slot, open pins, the responsive marks, the source file (./Properties.astro);
+//   · everything that leaves the lab, and the pin and preview switches, are in ⋯ (./ActionsMenu.astro).
 //
-// The navbar is interim — ops/navbar-brief.md is the design it will be replaced with.
+// THE NAVBAR (Figma `Astrolab` › Lab / Components › Navbar, View=Story) is one grid laid out by a
+// container query on its own width, because the sidebars change the main area and never the
+// viewport: ONE row when the navbar is 1040px wide or more — identity · variants · previous / next
+// · device switch + Viewport field · Comment · Parameters · ⋯ — otherwise TWO rows, the viewport
+// row last, and under 552px three or four, the identity on a row of its own with ⋯. The rules are
+// lab.css › "The navbar" and "The narrow navbar".
 import Shell from "./Shell.astro";
 import Tree from "./Tree.astro";
 import Icon from "./Icon.astro";
+import Properties from "./Properties.astro";
+import ActionsMenu from "./ActionsMenu.astro";
 import ViewportControls from "./ViewportControls.astro";
 import ViewportStage from "./ViewportStage.astro";
-import { hrefs, labConfig, type Crumb, type TreeNode } from "./model";
+import { hrefs, tasksBase, type Crumb, type TreeNode } from "./model";
 import { componentsOf, tierTree } from "./trees";
 import { pinCounts } from "./pins-data";
-import { buildLabIndex, isSectionLike, livePillText, liveTitle, tierLabel } from "../shell/lab-index";
+import { buildLabIndex, isSectionLike, tierLabel } from "../shell/lab-index";
 
 interface Props {
   story: string;
@@ -38,21 +47,23 @@ const prev = at > 0 ? sequence[at - 1] : null;
 const next = at >= 0 && at < sequence.length - 1 ? sequence[at + 1] : null;
 
 const pins = await pinCounts();
-const openPins = pins.openFor(mod.componentFile);
+const tally = pins.forFile(mod.componentFile);
 const liveStory = mod.stories.find((s) => s.live);
 const section = isSectionLike(item);
-const tierDef = labConfig.tiers.find((t) => t.id === item.tier);
-const cullable = Boolean(tierDef?.cullable);
-const blocked = mod.live
-  ? "live on the site — cannot be marked"
+const variantAt = mod.stories.indexOf(item) + 1;
+
+// The Properties panel's "On the site" lines: every page the component is mounted on, or what
+// uses it, or the honest grey "Not on any page".
+const site = liveStory
+  ? liveStory.liveOn.map((m) => ({ text: `Live on ${m.page} — slot ${m.slot} of ${m.of}`, live: true }))
   : mod.usedBy.length
-    ? `used by ${mod.usedBy.length} live component${mod.usedBy.length === 1 ? "" : "s"} — cannot be marked`
-    : null;
+    ? [{ text: `Used by ${mod.usedBy.length}`, live: true }]
+    : [{ text: "Not on any page", live: false }];
 
 // Level 2's breadcrumb names the PANEL's place — Site › Sections — as the design does; where the
 // component sits inside the tier is the tree's job, and which component it is, the navbar's.
 const crumbs: Crumb[] = [{ label: "Site" }, { label: tierLabel(item.tier), href: hrefs.tier(item.tier) }];
-const TAB_LIMIT = 4;
+const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? "" : "s"}`;
 ---
 
 <Shell
@@ -72,180 +83,110 @@ const TAB_LIMIT = 4;
 >
   <Tree slot="panel" nodes={tree} />
 
-  <Fragment slot="navbar">
-    <div class="lab-navbar__id">
-      <h1 class="lab-navbar__title">
-        {mod.moduleName}
-        {mod.version && <small>{mod.version}</small>}
-      </h1>
-      <button class="lab-status-btn" type="button" popovertarget="lab-status-menu" title="Status and marks">
-        {liveStory && <span class="lab-pill lab-pill--live" title={liveTitle(liveStory)}>{livePillText(liveStory)}</span>}
-        {!mod.live && mod.usedBy.length > 0 && <span class="lab-pill lab-pill--used">used by {mod.usedBy.length}</span>}
-        {!mod.live && !mod.usedBy.length && <span class="lab-pill">unused</span>}
-        {mod.responsive && (
-          <span class:list={["lab-pill", mod.responsive.done ? "lab-pill--responsive" : "lab-pill--unresponsive"]} data-lab-resp-pill>
-            {mod.responsive.done ? "responsive" : "not responsive"}
-          </span>
-        )}
-        <span class="lab-pill lab-pill--marked" data-lab-cull-pill hidden>marked for deletion</span>
-        {openPins > 0 && <span class="lab-pill lab-pill--brand">{openPins} open pin{openPins === 1 ? "" : "s"}</span>}
-        <Icon name="chevron-down" size="sm" />
-      </button>
+  <div class="lab-nb" slot="navbar" data-lab-nb>
+    <div class="lab-nb__id">
+      <div class="lab-nb__line">
+        <h1 class="lab-nb__name" title={mod.moduleName}>{mod.moduleName}</h1>
+        {mod.version && <span class="lab-nb__tag">{mod.version}</span>}
+        <Properties
+          site={site}
+          pins={tasksBase ? { ...tally, href: `${tasksBase}/all` } : null}
+          responsive={mod.responsive ? { file: mod.moduleFile, ...mod.responsive } : null}
+          source={mod.componentFile}
+        />
+      </div>
     </div>
 
-    <nav class="lab-tabs" aria-label="Stories">
-      {
-        mod.stories.length <= TAB_LIMIT ? (
+    <div class="lab-nb__variants">
+      <button
+        class="lab-variant-btn"
+        type="button"
+        popovertarget="lab-variant-menu"
+        title={`${plural(mod.stories.length, "variant")} · j / k step`}
+      >
+        <span class="lab-variant-btn__name">{item.storyName}</span>
+        <span class="lab-variant-btn__count">{variantAt} of {mod.stories.length}</span>
+        <Icon name="chevron-down" size="sm" />
+      </button>
+      <div class="lab-menu lab-menu--variants" id="lab-variant-menu" popover role="menu" data-lab-align="end">
+        <p class="lab-menu__label">{plural(mod.stories.length, "variant")}</p>
+        {
           mod.stories.map((s) => (
             <a
-              class="lab-tab"
+              class="lab-menu__item"
+              role="menuitemradio"
+              aria-checked={String(s.storyId === item.storyId)}
               href={s.dashboardUrl}
-              aria-current={s.storyId === item.storyId ? "page" : undefined}
               data-lab-keep-viewport
             >
-              {s.storyName}
+              <span class="lab-menu__mark"><Icon name="check" size="sm" class="lab-menu__tick" /></span>
+              <span class="lab-menu__text">{s.storyName}</span>
             </a>
           ))
-        ) : (
-          <>
-            <button class="lab-btn lab-btn--sm" type="button" popovertarget="lab-story-menu">
-              {item.storyName}
-              <span class="lab-tabs__count">{mod.stories.indexOf(item) + 1} / {mod.stories.length}</span>
-              <Icon name="chevron-down" />
-            </button>
-            <div class="lab-menu" id="lab-story-menu" popover role="menu">
-              <p class="lab-menu__label">{mod.stories.length} stories</p>
-              {mod.stories.map((s) => (
-                <a
-                  class="lab-menu__item"
-                  role="menuitemradio"
-                  aria-checked={String(s.storyId === item.storyId)}
-                  href={s.dashboardUrl}
-                  data-lab-keep-viewport
-                >
-                  {s.storyName}
-                  <Icon name="check" size="sm" class="lab-menu__tick" />
-                </a>
-              ))}
-            </div>
-          </>
-        )
-      }
-    </nav>
+        }
+        <hr />
+        <p class="lab-menu__note">j / k — next and previous</p>
+      </div>
 
-    <div class="lab-navbar__tools">
-      <div class="lab-seg" role="group" aria-label="Previous and next story">
+      <div class="lab-nb__step" role="group" aria-label="Previous and next variant">
         {
           prev ? (
-            <a class="lab-btn lab-btn--sm lab-btn--icon" href={prev.dashboardUrl} title={`Previous: ${prev.moduleName} — ${prev.storyName} (k)`} data-lab-step="prev" data-lab-keep-viewport>
-              <Icon name="chevron-left" />
-              <span class="lab-visually-hidden">Previous story</span>
+            <a
+              class="lab-tool lab-tool--icon"
+              href={prev.dashboardUrl}
+              title={`Previous variant · k — ${prev.moduleName} — ${prev.storyName}`}
+              data-lab-step="prev"
+              data-lab-keep-viewport
+            >
+              <Icon name="chevron-left" size="sm" />
+              <span class="lab-visually-hidden">Previous variant</span>
             </a>
           ) : (
-            <span class="lab-btn lab-btn--sm lab-btn--icon" aria-disabled="true" data-lab-step><Icon name="chevron-left" /></span>
+            <button class="lab-tool lab-tool--icon" type="button" disabled data-lab-step>
+              <Icon name="chevron-left" size="sm" />
+              <span class="lab-visually-hidden">Previous variant</span>
+            </button>
           )
         }
         {
           next ? (
-            <a class="lab-btn lab-btn--sm lab-btn--icon" href={next.dashboardUrl} title={`Next: ${next.moduleName} — ${next.storyName} (j)`} data-lab-step="next" data-lab-keep-viewport>
-              <Icon name="chevron-right" />
-              <span class="lab-visually-hidden">Next story</span>
+            <a
+              class="lab-tool lab-tool--icon"
+              href={next.dashboardUrl}
+              title={`Next variant · j — ${next.moduleName} — ${next.storyName}`}
+              data-lab-step="next"
+              data-lab-keep-viewport
+            >
+              <Icon name="chevron-right" size="sm" />
+              <span class="lab-visually-hidden">Next variant</span>
             </a>
           ) : (
-            <span class="lab-btn lab-btn--sm lab-btn--icon" aria-disabled="true" data-lab-step><Icon name="chevron-right" /></span>
+            <button class="lab-tool lab-tool--icon" type="button" disabled data-lab-step>
+              <Icon name="chevron-right" size="sm" />
+              <span class="lab-visually-hidden">Next variant</span>
+            </button>
           )
         }
       </div>
     </div>
 
-    <ViewportControls defaultW={section ? 1440 : 960} defaultH={section ? 900 : 540} kind={section ? "section" : "component"} />
+    <ViewportControls
+      defaultW={section ? 1440 : 960}
+      defaultH={section ? 900 : 540}
+      kind={section ? "section" : "component"}
+      comment={Boolean(tasksBase)}
+      parameters
+    />
 
-    <div class="lab-navbar__tools">
-      <button class="lab-btn lab-btn--sm lab-btn--icon" type="button" popovertarget="lab-actions-menu" title="More">
-        <Icon name="more" />
-        <span class="lab-visually-hidden">More actions</span>
-      </button>
-    </div>
-
-    <div class="lab-menu" id="lab-actions-menu" popover role="menu" data-lab-align="end">
-      {
-        item.editorUrl && (
-          <a class="lab-menu__item" role="menuitem" href={item.editorUrl}>
-            <Icon name="code" />
-            Open in VS Code
-          </a>
-        )
-      }
-      <a class="lab-menu__item" role="menuitem" href={item.storyUrl} target="_blank" rel="noopener">
-        <Icon name="expand" />
-        Open full screen
-      </a>
-      {
-        item.stagingUrl && (
-          <a class="lab-menu__item" role="menuitem" href={item.stagingUrl} target="_blank" rel="noopener">
-            <Icon name="external" />
-            View on staging
-          </a>
-        )
-      }
-      <button class="lab-menu__item" type="button" role="menuitem" data-lab-copy-link>
-        <Icon name="link" />
-        <span data-lab-copy-label>Copy link to this size</span>
-      </button>
-    </div>
-
-    <div class="lab-menu lab-status-menu" id="lab-status-menu" popover role="menu">
-      <p class="lab-menu__label">On the site</p>
-      <p class="lab-status-menu__fact">
-        {
-          liveStory
-            ? liveStory.liveOn.map((m) => `${m.page} · slot ${m.slot} of ${m.of}`).join(", ")
-            : mod.usedBy.length
-              ? `Used by ${mod.usedBy.map((f) => f.split("/").pop()).join(", ")}`
-              : "Not mounted by any page, and nothing live uses it."
-        }
-      </p>
-      {
-        mod.componentFile && (
-          <p class="lab-status-menu__fact lab-mono">{mod.componentFile}</p>
-        )
-      }
-      {
-        mod.responsive && (
-          <>
-            <hr />
-            <p class="lab-menu__label">Responsive</p>
-            <label class="lab-menu__item lab-menu__check">
-              <input type="checkbox" data-lab-mark="approved" data-file={mod.moduleFile} checked={mod.responsive.approved} disabled />
-              Approved for responsive work
-            </label>
-            <label class="lab-menu__item lab-menu__check">
-              <input type="checkbox" data-lab-mark="done" data-file={mod.moduleFile} checked={mod.responsive.done} disabled />
-              Made responsive
-            </label>
-          </>
-        )
-      }
-      {
-        cullable && (
-          <>
-            <hr />
-            <p class="lab-menu__label">Clean-up</p>
-            <label class="lab-menu__item lab-menu__check" title={blocked ?? undefined}>
-              <input type="checkbox" data-lab-mark="cull" data-file={mod.moduleFile} data-blocked={blocked ?? undefined} disabled />
-              Mark for deletion
-            </label>
-            {blocked && <p class="lab-status-menu__fact">{blocked}</p>}
-          </>
-        )
-      }
-      <p class="lab-status-menu__note" data-lab-marks-note>Marks can be changed on the dev server only.</p>
+    <div class="lab-nb__actions">
+      <ActionsMenu editorUrl={item.editorUrl} fullScreenUrl={item.storyUrl} stagingUrl={item.stagingUrl} pins={Boolean(tasksBase)} />
     </div>
-  </Fragment>
+  </div>
 
-  <ViewportStage src={item.storyUrl} title={`${mod.moduleName} — ${item.storyName}`} />
+  <ViewportStage src={item.storyUrl} title={`${mod.moduleName} — ${item.storyName}`} pins={Boolean(tasksBase)} tasksHref={tasksBase ? `${tasksBase}/all` : null} parameters />
 </Shell>
 
 <script>
   import "./marks-client";
+  import "./navbar-client";
 </script>

package/src/chrome/Tree.astro

@@ -3,7 +3,14 @@
 // groups are <details>, rows are links. The shell script adds memory (which groups you closed),
 // search, the filter menu and j/k on top. Connector lines are CSS on the <li>, so the tree carries
 // no connector markup at all.
+//
+// Rows carry no icons and read at 12px (decided 2026-09-24, to condense level 2). A node's `icon`
+// is still accepted — the data layer keeps it — and simply not drawn.
+//
+// A tree whose root rows carry a slot is the Sections tree, which draws its own rows and sort
+// control (./SectionsTree.astro).
 import Icon from "./Icon.astro";
+import SectionsTree from "./SectionsTree.astro";
 import type { TreeNode } from "./model";
 
 interface Props {
@@ -14,6 +21,7 @@ interface Props {
 }
 
 const { nodes, depth = 0, root = true } = Astro.props;
+const sections = root && nodes.some((node) => node.slot !== undefined);
 
 /** Whether a node is, or holds, the current page — those groups render open whatever was stored. */
 const holdsCurrent = (node: TreeNode): boolean =>
@@ -22,62 +30,57 @@ const holdsCurrent = (node: TreeNode): boolean =>
 const searchText = (node: TreeNode) => `${node.label} ${node.search ?? ""}`.toLowerCase();
 ---
 
-<ul class={root ? "lab-tree" : "lab-tree__group"} role={root ? "tree" : "group"} data-lab-tree={root ? "" : undefined}>
-  {
-    nodes.map((node) => {
-      const hasChildren = (node.children?.length ?? 0) > 0;
-      const icon = node.icon ?? (hasChildren ? "folder" : "page");
-      const trailing = (
-        <>
-          {node.count !== undefined && <span class="lab-tree__count">{node.count}</span>}
-          {node.dot && <span class={`lab-dot lab-dot--${node.dot}`} title={node.dotTitle} />}
-        </>
-      );
-      return (
-        <li
-          class="lab-tree__node"
-          role="none"
-          style={`--lab-d:${depth}`}
-          data-lab-search={searchText(node)}
-          data-lab-facets={node.facets}
-        >
-          {hasChildren ? (
-            <details open data-lab-tree-id={node.id} data-lab-holds-current={holdsCurrent(node) ? "" : undefined}>
-              <summary
+{
+  sections ? (
+    <SectionsTree nodes={nodes} />
+  ) : (
+    <ul class={root ? "lab-tree" : "lab-tree__group"} role={root ? "tree" : "group"} data-lab-tree={root ? "" : undefined}>
+      {nodes.map((node) => {
+        const hasChildren = (node.children?.length ?? 0) > 0;
+        const trailing = (
+          <>
+            {node.count !== undefined && <span class="lab-tree__count">{node.count}</span>}
+            {node.dot && <span class={`lab-dot lab-dot--${node.dot}`} title={node.dotTitle} />}
+          </>
+        );
+        return (
+          <li
+            class="lab-tree__node"
+            role="none"
+            style={`--lab-d:${depth}`}
+            data-lab-search={searchText(node)}
+            data-lab-facets={node.facets}
+          >
+            {hasChildren ? (
+              <details open data-lab-tree-id={node.id} data-lab-holds-current={holdsCurrent(node) ? "" : undefined}>
+                <summary class="lab-tree__row" role="treeitem" aria-current={node.current ? "page" : undefined} title={node.title}>
+                  <span class="lab-tree__label">{node.href ? <a href={node.href}>{node.label}</a> : node.label}</span>
+                  {trailing}
+                  <Icon name="chevron-down" size="sm" class="lab-tree__chevron" />
+                </summary>
+                <Astro.self nodes={node.children!} depth={depth + 1} root={false} />
+              </details>
+            ) : node.href && !node.disabled ? (
+              <a
                 class="lab-tree__row"
                 role="treeitem"
+                href={node.href}
                 aria-current={node.current ? "page" : undefined}
                 title={node.title}
+                data-lab-leaf
               >
-                <Icon name={icon} size="sm" />
-                <span class="lab-tree__label">{node.href ? <a href={node.href}>{node.label}</a> : node.label}</span>
+                <span class="lab-tree__label">{node.label}</span>
                 {trailing}
-                <Icon name="chevron-down" size="sm" class="lab-tree__chevron" />
-              </summary>
-              <Astro.self nodes={node.children!} depth={depth + 1} root={false} />
-            </details>
-          ) : node.href && !node.disabled ? (
-            <a
-              class="lab-tree__row"
-              role="treeitem"
-              href={node.href}
-              aria-current={node.current ? "page" : undefined}
-              title={node.title}
-              data-lab-leaf
-            >
-              <Icon name={icon} size="sm" />
-              <span class="lab-tree__label">{node.label}</span>
-              {trailing}
-            </a>
-          ) : (
-            <span class="lab-tree__row" role="treeitem" aria-disabled="true" title={node.title}>
-              <Icon name={icon} size="sm" />
-              <span class="lab-tree__label">{node.label}</span>
-              {trailing}
-            </span>
-          )}
-        </li>
-      );
-    })
-  }
-</ul>
+              </a>
+            ) : (
+              <span class="lab-tree__row" role="treeitem" aria-disabled="true" title={node.title}>
+                <span class="lab-tree__label">{node.label}</span>
+                {trailing}
+              </span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  )
+}