anentrypoint-design 0.0.414 → 0.0.416

package/dist/247420.js

@@ -183,8 +183,29 @@ ${a?`<meta property="og:image" content="${a}">`:""}
 ${i?`<meta name="twitter:site" content="${i}">`:""}
 ${a?`<meta name="twitter:image" content="${a}">`:""}`;if(n.ldJson!==!1&&(n.description||r)){let m=JSON.stringify({"@context":"https://schema.org","@type":"WebSite",name:e,url:n.url||"",description:n.description||"",inLanguage:n.lang||"en"}).replace(/</g,"\\u003c");p+=`
 <script type="application/ld+json">${m}<\/script>`}return p}function Am({faviconHref:e,faviconGlyph:t}){return e?`<link rel="icon" href="${Be(e)}">`:t?`<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E${encodeURIComponent(t)}%3C/text%3E%3C/svg%3E">`:""}function Tm({cssHref:e,pkgVersion:t}){return e?`<link rel="stylesheet" href="${e}">`:`<link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@${t}/dist/247420.css">`}var Rm=`
-.app-stage { width: 100%; max-width: var(--stage-wide, min(96vw, 1440px)); margin-inline: auto; padding: var(--space-6, 48px) var(--space-4, 24px) var(--space-8, 96px); display: grid; gap: var(--space-6, 48px); box-sizing: border-box }
+.app-stage { width: 100%; max-width: var(--stage-wide, min(96%, 1600px)); margin-inline: auto; padding: var(--space-6, 48px) var(--space-4, 24px) var(--space-8, 96px); display: grid; gap: var(--space-6, 48px); box-sizing: border-box }
 @media (max-width: 768px) { .app-stage { padding: var(--space-4, 24px) var(--space-3, 16px) var(--space-6, 48px); gap: var(--space-5, 32px) } }
+/* Tier movements \u2014 the stage's uniform gap is deliberately overridden here.
+   Panels inside one tier sit tight (--space-3, 16px) because they are peers;
+   between tiers that reopens to --space-5 on top of the stage's own --space-6,
+   so the three movements read as distinct instead of one repeating slab. */
+.app-stage > .ds-tier { display: grid; gap: var(--space-3, 16px) }
+.app-stage > .ds-tier + .ds-tier { margin-top: var(--space-5, 32px) }
+.ds-tier-head { display: grid; gap: var(--space-2, 8px); margin-bottom: var(--space-1, 4px); justify-items: start }
+/* The tier label is an h2 so the three movements are real landmarks in the
+   accessibility tree; it keeps the .eyebrow voice, so the UA heading margin
+   and size are reset back onto the mono kicker scale. */
+.ds-tier-head > h2.eyebrow { margin: 0; font-size: var(--fs-tiny, 11px); line-height: 1.2 }
+.ds-tier-lede { margin: 0; max-width: var(--measure, 68ch); color: var(--fg-3); font-size: var(--fs-sm, 15px) }
+/* The lead tier carries the accent spine so the primary path is visible at a
+   squint; supporting tiers stay unmarked rather than competing. The head div
+   is the tier's first child, so the marker is an explicit class rather than a
+   positional :first-of-type, which would not match past it. */
+.ds-tier-lead { border-radius: 0 var(--r-2, 14px) var(--r-2, 14px) 0; padding-left: calc(var(--space-3, 16px) + var(--bw-chunk, 6px)); position: relative }
+.ds-tier-lead::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--bw-chunk, 6px); background: var(--accent); border-radius: var(--bw-chunk, 6px) 0 0 var(--bw-chunk, 6px) }
+/* Tertiary tier reads at prose weight: quieter rows, no panel fill competition. */
+.ds-tier-read .panel { background: var(--panel-1, var(--bg)) }
+.ds-tier-read .row .meta { color: var(--fg-3) }
 .page-body > :first-child { margin-top: 0 }
 .page-body h1 { margin-top: 0 } .page-body h2 { margin-top: var(--space-5, 32px) } .page-body h3 { margin-top: var(--space-4, 24px) }
 .page-body > * + * { margin-top: var(--space-3, 16px) }
@@ -271,10 +292,10 @@ function examplesNode(examples) {
   return C.Section({
     title: 'explore',
     children: examples.map((e, i) => {
-      const kids = [
-        h('span', { key: 'c', class: 'code' }, String(i + 1).padStart(2, '0')),
-        h('span', { key: 't', class: 'title' }, String(e.label || e.name || e.href || '')),
-      ];
+      const code = e.code == null ? '' : String(e.code).trim();
+      const kids = [];
+      if (code) kids.push(h('span', { key: 'c', class: 'code' }, code));
+      kids.push(h('span', { key: 't', class: 'title' }, String(e.label || e.name || e.href || '')));
       if (e.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' \u2014 ' + e.desc));
       kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, '->'));
       return h('a', { key: i, class: 'row', href: e.href || '#' }, ...kids);
@@ -286,10 +307,10 @@ function panelNode(panel, idx) {
   const items = Array.isArray(panel.items) ? panel.items : [];
   if (!items.length) return null;
   const rows = items.map((it, i) => {
-    const kids = [
-      h('span', { key: 'c', class: 'code' }, String(it.code || String(i + 1).padStart(2, '0'))),
-      h('span', { key: 't', class: 'title' }, String(it.title || it.name || '')),
-    ];
+    const code = it.code == null ? '' : String(it.code).trim();
+    const kids = [];
+    if (code) kids.push(h('span', { key: 'c', class: 'code' }, code));
+    kids.push(h('span', { key: 't', class: 'title' }, String(it.title || it.name || '')));
     if (it.sub || it.desc) kids.push(h('span', { key: 'm', class: 'meta dim' }, ' \u2014 ' + (it.sub || it.desc)));
     kids.push(h('span', { key: 'a', class: 'ds-row-arrow' }, it.meta || '->'));
     return h('a', { key: i, class: 'row', href: it.href || '#' }, ...kids);
@@ -339,13 +360,42 @@ function __md(md) {
 
 const bodyNode = data.bodyHtml ? C.Section({ children: h('div', { class: 'page-body', innerHTML: data.bodyHtml }) }) : null;
 
+function tierNode(tier, children) {
+  const kids = children.filter(Boolean);
+  if (!kids.length) return null;
+  const labelId = 'tier-' + tier.key + '-label';
+  const head = h('div', { key: 'h', class: 'ds-tier-head' },
+    h('h2', { class: 'eyebrow', id: labelId }, tier.label),
+    tier.lede ? h('p', { class: 'ds-tier-lede' }, tier.lede) : null,
+  );
+  return h('section', { key: tier.key, class: 'ds-tier ds-tier-' + tier.key, id: tier.key, 'aria-labelledby': labelId }, head, ...kids);
+}
+
+const panelsById = new Map((data.panels || []).map((p) => [p.id || p.title || p.name || '', p]));
+const takePanel = (id) => { const p = panelsById.get(id); if (p) panelsById.delete(id); return p ? panelNode(p) : null; };
+
+const TIERS = [
+  { key: 'open', label: 'open', lede: 'browse and try the system running.', ids: ['kits', 'previews', 'decks'], extra: () => [examplesNode(data.examples)] },
+  { key: 'ships', label: 'ships', lede: 'what the package contains.', ids: ['file_browser', 'desktop_os', 'web_components', 'api_exports'], extra: () => [] },
+  { key: 'read', label: 'read', lede: 'understand the rules behind it.', ids: ['docs', 'features'], extra: () => [quickstartNode(data.quickstart)] },
+];
+
+const tierNodes = TIERS.map((t) => {
+  const kids = [...t.ids.map(takePanel), ...t.extra()].filter(Boolean);
+  if (t.key === 'open' && kids.length) {
+    const lead = kids[0];
+    if (lead.props) lead.props.class = (lead.props.class || '') + ' ds-tier-lead';
+  }
+  return tierNode(t, kids);
+});
+const leftoverPanels = [...panelsById.values()].map(panelNode);
+
 const mainChildren = [
   heroNode(data.hero),
   marqueeNode(data.marquee),
   ...data.sections.map(sectionNode),
-  ...(data.panels || []).map(panelNode),
-  quickstartNode(data.quickstart),
-  examplesNode(data.examples),
+  ...tierNodes,
+  ...leftoverPanels,
   bodyNode,
 ].filter(Boolean);