feat(gallery, docs-portal, corpora-curator): every member can publish its own component library, aggregated without being owned

The federated design system has two layers. The federal one — the token
vocabulary — got its surface when the swatch page shipped. The local layer never
did: seventeen members own their own components, composition patterns and
interaction idioms, and no page anywhere rendered a single one of them. The
number that started this whole effort — 158 button rule-sets, 13 card recipes,
34 badge treatments, 6 spinners — had only ever been counted, never looked at.

Each member now publishes a component library from its own bundle, exposed over
Module Federation as `./gallery` alongside the `./mount` it already had. Two
contracts: `./mount` is what the member does, `./gallery` is what it is made of.
Same bundle and same stylesheet, so the specimens are the real components rather
than a copy that drifted.

The aggregation rule is the architectural point. `apps/docs-portal` becomes a
federation HOST and indexes the libraries, but it imports no member's
components — it loads a library the member built and shipped, from that member's
own bundle. A central library that imported from members would have re-created
exactly the single queue federation exists to avoid. The index is central; the
libraries are not.

`packages/gallery` is one runtime for all seventeen catalogs. It owns how a
library is browsed, isolated, deep-linked and audited, and knows nothing about
any member — prefix, root class, origin and fixtures all arrive as data. Class
recipes are first-class alongside components, because a gallery that catalogued
only `.svelte` files would have shown none of the 158 buttons: not one of them
is a component.

Three modes render side by side from the real cascade. `theme.css` scopes its
mode blocks to `[data-mode='…']` rather than `:root[data-mode='…']`, so an
ordinary `<div>` re-points the whole token vocabulary for its subtree — dark,
light and vibrant at once, on a surface selector, because a component that
vanishes on `--color-surface-raised` is the swatch page's P2/P3 failure one
level down.

Every specimen carries a contract audit measured at render time from the CSSOM
rules that actually matched it: F1a (Tier-1 token read directly), F4 (bare
z-index), F8 (colour literal), F2/F3 (unprefixed class), plus contrast off every
painted text node against its COMPOSITED background — the house
`color-mix(…, transparent)` idiom makes a naive background transparent and a
naive checker useless. `pnpm design:drift` sweeps files and reports per member;
this reports per component, in the mode you are looking at. It still reports the
same 99 findings it did before this work: the gallery adds no drift of its own.

The route that matters for review is a single specimen at its own bare URL —
`http://<lan-ip>:3017/#/gallery/source-row/active?iso=1` — no chrome, openable
on a phone by someone who has neither this repo nor the shell running.
Standalone the member owns its hash so the gallery routes on it; federated the
hash belongs to the shell and the gallery keeps its route in state instead. The
catalog is imported dynamically so every fixture and pattern file stays out of
the product bundle.

`corpora-curator` is the pilot, and building its library surfaced five things no
static sweep had — including that its components are not prop-driven (all four
read the `curation` runes singleton, so every fixture stages it), that
`SourceList` filtered-to-nothing renders identically to empty, and that three
badge treatments coexist that look fine apart and obviously redundant in one
frame.

Files changed:
- packages/gallery/ — the runtime: Gallery, SpecimenFrame, ControlsPanel,
  AuditPanel, router, audit, types, README with the adoption recipe
- apps/corpora-curator/src/gallery/ — the pilot catalog, fixtures, patterns,
  federated mount; plus the `./gallery` expose and the standalone hash branch
- apps/docs-portal/ — MemberLibraries, members.ts, the tokens/components view
  split, and the portal becoming a federation host
- shell/src/App.svelte, shell/src/DevelopersMenu.svelte — the Component
  libraries entry, handed over in sessionStorage so the remote's mount(target)
  contract stays as narrow as it was
- context-v/specs/Federated-Component-Libraries.md
- changelog/2026-08-08_03_Every-Microfrontend-Can-Now-Publish-What-It-Is-Made-Of.md

Also included:
- apps/docs-portal/src/members.ts and the pilot catalog's comment still carried
  the pre-rename `sc` prefix. The members index doubles as the prefix table, so
  that one was rendering the wrong value; both now read `cc`.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PZJvZWco3z7SR2dEhFqEjA

Author: mpstaton

apps/corpora-curator/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@augment-it/federation": "workspace:*",
+    "@augment-it/gallery": "workspace:*",
     "@augment-it/theme": "workspace:*",
     "@augment-it/workspace": "workspace:*",
     "svelte": "^5.56.4"

apps/corpora-curator/rsbuild.config.ts

@@ -27,6 +27,12 @@ export default defineConfig({
       filename: 'remoteEntry.js',
       exposes: {
         './mount': './src/mount.ts',
+        // The member's component library. A second contract alongside the
+        // product surface: `./mount` is what this member does, `./gallery` is
+        // what it is made of. Same bundle and same stylesheet, so the specimens
+        // are the real components rather than a copy that drifted.
+        // See context-v/specs/Federated-Component-Libraries.md.
+        './gallery': './src/gallery/mount.ts',
       },
       dts: false,
     }),

apps/corpora-curator/src/gallery/catalog.ts

@@ -0,0 +1,145 @@
+// Fixture data for the corpora-curator gallery.
+//
+// WHY THIS FILE HAS A `seed()` AT ALL — and what it is telling you.
+//
+// Every component in this member reads the `curation` runes singleton rather
+// than taking props. That is the house convention (Per-App-Workspace-Conventions:
+// single source of truth, components read derived getters and call actions), and
+// it is a perfectly good convention for an app. It is a bad one for a component
+// LIBRARY: a component whose inputs are ambient cannot be rendered in a state
+// its author did not anticipate, which means it cannot be reviewed in one.
+//
+// Rather than refactor five components to make the gallery look tidy, the
+// gallery seeds the singleton and says so — every fixture that needs `seed()`
+// shows an "Ambient dependency" note on its Usage tab. That is the honest
+// reading: these components ARE isolatable, but only by staging the world
+// around them, and the cost of each new state is a hand-written world.
+//
+// The prop-driven entries in this catalog (the pattern recipes) need none of
+// this. That contrast is the argument for pushing presentational leaves —
+// rows, chips, fields — down to props, and it is visible here rather than
+// asserted in a document.
+
+import { curation } from '../curation.svelte';
+import type { Source, Strategy } from '../types';
+
+export const TAG_VOCAB = [
+  'Workforce-Development',
+  'Work-Based-Learning',
+  'Employer-Partnerships',
+  'Apprenticeship',
+  'Credential-Attainment',
+  'Rural-Access',
+  'HNWI',
+];
+
+export const STRATEGIES: Strategy[] = [
+  {
+    slug: 'turning-jobs-into-degrees',
+    type: 'strategy',
+    client_slugs: ['reach-edu'],
+    title: 'Turning Jobs Into Degrees',
+    tags: ['Work-Based-Learning', 'Credential-Attainment'],
+  },
+  {
+    slug: 'rural-income-mobility',
+    type: 'strategy',
+    client_slugs: ['reach-edu'],
+    title: 'Rural Income Mobility',
+    tags: ['Rural-Access'],
+  },
+  {
+    slug: 'employer-of-record-models',
+    type: 'strategy',
+    client_slugs: ['reach-edu'],
+    title: 'Employer-of-Record Models',
+    tags: [],
+  },
+];
+
+export const SOURCES: Source[] = [
+  {
+    source_uuid: 'src-0001',
+    url: 'https://www.brookings.edu/articles/the-degree-is-not-the-job/',
+    normalized_url: 'brookings.edu/articles/the-degree-is-not-the-job',
+    title: 'The degree is not the job',
+    authors: ['Anthony P. Carnevale', 'Nicole Smith'],
+    publisher: 'Brookings',
+    published_date: '2025-11-04',
+    tags: ['Work-Based-Learning', 'Credential-Attainment'],
+    status: 'fetched',
+    content_pulled: true,
+    source_slug: 'the-degree-is-not-the-job',
+  },
+  {
+    source_uuid: 'src-0002',
+    url: 'https://example.org/reports/apprenticeship-at-scale-2026.pdf',
+    title: 'Apprenticeship at Scale 2026',
+    publisher: 'National Skills Coalition',
+    published_date: '2026-02-18',
+    tags: ['Apprenticeship', 'Employer-Partnerships'],
+    status: 'fetched',
+    content_pulled: true,
+    source_slug: 'apprenticeship-at-scale-2026',
+    binary_filename: 'apprenticeship-at-scale-2026.pdf',
+    binary_bytes: 4_182_301,
+  },
+  {
+    // The row that exists to be the ugly one: no title, no publisher, a URL
+    // long enough to test truncation, and a failed fetch. A gallery whose
+    // fixtures are all well-formed is a gallery that has never seen the
+    // product.
+    source_uuid: 'src-0003',
+    url: 'https://www.dol.gov/agencies/eta/apprenticeship/policy/registered-apprenticeship-national-guidelines-standards-of-apprenticeship-2026-revision',
+    tags: [],
+    status: 'metadata-only',
+    verdict_error: true,
+  },
+  {
+    source_uuid: 'src-0004',
+    url: 'https://www.rand.org/pubs/research_reports/RRA2214-1.html',
+    title: 'Rural Postsecondary Access and the Income Ladder',
+    publisher: 'RAND',
+    published_date: '2026-01-09',
+    tags: ['Rural-Access'],
+    status: 'metadata-only',
+  },
+];
+
+type CurationPatch = Partial<{
+  connection: 'idle' | 'connecting' | 'open' | 'closed' | 'error' | 'auth_required';
+  lastError: string | null;
+  clientSlug: string | null;
+  domainType: string;
+  strategies: Strategy[];
+  activeSlug: string | null;
+  sources: Source[];
+  focusIdx: number;
+  listFilter: string;
+  tagVocab: string[];
+  saveStatus: string;
+}>;
+
+/**
+ * Stage the world, then apply the fixture's deltas.
+ *
+ * Always writes EVERY field, never just the ones a fixture cares about —
+ * otherwise the previous fixture's state leaks into the next one and a
+ * specimen quietly renders something nobody declared.
+ */
+export function seed(patch: CurationPatch = {}): void {
+  const base: Required<CurationPatch> = {
+    connection: 'open',
+    lastError: null,
+    clientSlug: 'reach-edu',
+    domainType: 'strategy',
+    strategies: STRATEGIES,
+    activeSlug: 'turning-jobs-into-degrees',
+    sources: SOURCES,
+    focusIdx: 0,
+    listFilter: '',
+    tagVocab: TAG_VOCAB,
+    saveStatus: '',
+  };
+  Object.assign(curation, base, patch);
+}

apps/corpora-curator/src/gallery/fixtures.ts

@@ -0,0 +1,18 @@
+// Federation-exposed gallery mount — the second thing this member exposes.
+//
+// A member now publishes two contracts: `./mount` is the product surface, and
+// `./gallery` is what it is made of. Same remote, same bundle, same stylesheet,
+// so the specimens are the real components and not a copy that drifted.
+//
+// IMPORT ORDER IS LOAD-BEARING and identical to ./src/mount.ts's: the gallery
+// package pulls in token-baseline.css (the @property floor that keeps a member
+// legible when it outruns the deployed shell — see packages/federation), so it
+// must evaluate BEFORE '../app.css', whose rules read those tokens. ES module
+// imports evaluate in declaration order. Swap these two lines and the specimens
+// render unstyled.
+
+import { makeGalleryMount } from '@augment-it/gallery';
+import '../app.css';
+import catalog from './catalog';
+
+export const mountStrategyCuratorGallery = makeGalleryMount(catalog);

apps/corpora-curator/src/gallery/mount.ts

@@ -0,0 +1,176 @@
+<script module lang="ts">
+  // The un-componentised half of this member's library.
+  //
+  // corpora-curator has four .svelte files and roughly forty class recipes.
+  // The recipes are where the design lives — `.cc-card`, `.cc-row`, the four
+  // button variants, the chips — and they are exactly the things that drift,
+  // because nothing stops a sixth button variant from being added to app.css.
+  // (The federation-wide measurement that started all this counted 158 button
+  // rule-sets and 34 badge treatments; none of them were components.)
+  //
+  // So they get catalogued as first-class entries, as markup rather than as
+  // components. Each snippet takes the resolved props object, so the gallery's
+  // controls drive them the same way they drive a real component.
+  //
+  // Exported from `<script module>`: legal because none of these reference
+  // instance state — they read only their own parameter.
+  export {
+    buttons,
+    card,
+    fields,
+    chips,
+    tags,
+    sourceRow,
+    headerBar,
+    banner,
+    attachedFile,
+    emptyState,
+  };
+</script>
+
+{#snippet buttons(p: Record<string, unknown>)}
+  <div class="cc-actions">
+    <button disabled={Boolean(p.disabled)}>{String(p.label ?? 'Fetch metadata')}</button>
+    <button class="cc-primary" disabled={Boolean(p.disabled)}>+ Add</button>
+    <button class="cc-link">‹ corpora</button>
+    <button class="cc-danger" disabled={Boolean(p.disabled)}>Remove source</button>
+  </div>
+{/snippet}
+
+{#snippet card(p: Record<string, unknown>)}
+  <section class="cc-card">
+    <h3>{String(p.heading ?? 'Source 1 of 4')}</h3>
+    <div class="cc-field">
+      <span class="cc-label">Publisher</span>
+      <span class="cc-value">{String(p.body ?? 'Brookings')}</span>
+    </div>
+    <div class="cc-field">
+      <span class="cc-label">Published</span>
+      <span class="cc-value cc-mono">2025-11-04</span>
+    </div>
+  </section>
+{/snippet}
+
+{#snippet fields(p: Record<string, unknown>)}
+  <div>
+    <div class="cc-field">
+      <span class="cc-label">Title <span class="cc-muted cc-mini">— editable</span></span>
+      <!-- svelte-ignore a11y_autofocus -->
+      <input class:cc-saved={Boolean(p.saved)} value={String(p.value ?? 'The degree is not the job')} />
+    </div>
+    <div class="cc-field">
+      <span class="cc-label">Slug <span class="cc-muted cc-mini">— lowercase-kebab</span></span>
+      <input class="cc-mono" value="the-degree-is-not-the-job" />
+    </div>
+    <div class="cc-field">
+      <span class="cc-label">Extract</span>
+      <textarea placeholder="paste a quote…"></textarea>
+    </div>
+    <div class="cc-field">
+      <span class="cc-label">Kind</span>
+      <select>
+        <option>Quotes</option>
+        <option>Stats</option>
+        <option>References</option>
+        <option>Mentions</option>
+      </select>
+    </div>
+  </div>
+{/snippet}
+
+{#snippet chips(p: Record<string, unknown>)}
+  <div class="cc-actions">
+    <span class="cc-pill">reach-edu</span>
+    <span class="cc-pill">strategy</span>
+    <span class="cc-pill">{String(p.count ?? 4)} sources</span>
+    <span class="cc-status-chip">metadata-only</span>
+    <span class="cc-status-chip">fetched</span>
+    <span class="cc-conn status-open">open</span>
+    <span class="cc-conn status-error">error</span>
+    <span class="cc-conn status-closed">closed</span>
+    <span class="cc-conn">connecting</span>
+  </div>
+{/snippet}
+
+{#snippet tags(p: Record<string, unknown>)}
+  <div class="cc-field">
+    <span class="cc-label">Tags <span class="cc-muted cc-mini">— Train-Case, workspace vocabulary</span></span>
+    <div class="cc-tags">
+      <span class="cc-tag">Work-Based-Learning<button class="cc-tag-x" aria-label="remove tag">×</button></span>
+      <span class="cc-tag">Credential-Attainment<button class="cc-tag-x" aria-label="remove tag">×</button></span>
+      <span class="cc-tag-mini">Rural-Access</span>
+    </div>
+    {#if p.suggesting}
+      <div class="cc-tag-input">
+        <input value="Emp" />
+        <div class="cc-tag-suggest">
+          <button>Employer-Partnerships</button>
+          <button>Employment-Outcomes</button>
+        </div>
+      </div>
+    {:else}
+      <div class="cc-tag-input"><input placeholder="add a tag…" /></div>
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet sourceRow(p: Record<string, unknown>)}
+  <div class="cc-list">
+    <button class="cc-row" class:active={Boolean(p.active)}>
+      <span class="cc-dot"></span>
+      <span class="cc-row-body">
+        <span class="cc-row-title">{String(p.title ?? 'The degree is not the job')}</span>
+        <span class="cc-row-meta">
+          <span>Brookings</span>
+          <span class="cc-status-chip">fetched</span>
+          <span class="cc-tag-mini">Work-Based-Learning</span>
+        </span>
+      </span>
+    </button>
+    <button class="cc-row">
+      <span class="cc-dot err"></span>
+      <span class="cc-row-body">
+        <span class="cc-row-title"
+          >https://www.dol.gov/agencies/eta/apprenticeship/policy/registered-apprenticeship-national-guidelines</span
+        >
+        <span class="cc-row-meta"><span class="cc-status-chip">metadata-only</span></span>
+      </span>
+    </button>
+  </div>
+{/snippet}
+
+{#snippet headerBar(p: Record<string, unknown>)}
+  <header class="cc-header">
+    <span class="cc-brand">Corpora Curator</span>
+    <span class="cc-pill">reach-edu</span>
+    <span class="cc-pill">strategy</span>
+    <button class="cc-back">‹ All corpora</button>
+    <span class="cc-strategy">{String(p.strategy ?? 'Turning Jobs Into Degrees')}</span>
+    <span class="cc-pill">4 sources</span>
+    <span class="cc-spacer"></span>
+    <span class="cc-conn status-{String(p.status ?? 'open')}">{String(p.status ?? 'open')}</span>
+  </header>
+{/snippet}
+
+{#snippet banner(p: Record<string, unknown>)}
+  <div class="cc-banner">
+    {String(p.message ?? 'source.add failed — capability not registered on this workspace')}
+  </div>
+{/snippet}
+
+{#snippet attachedFile(p: Record<string, unknown>)}
+  <div>
+    <div class="cc-attached">
+      <span class="cc-attached-dot">●</span>
+      <span class="cc-attached-name">{String(p.filename ?? 'apprenticeship-at-scale-2026.pdf')}</span>
+      <span class="cc-muted cc-mini">4.0 MB</span>
+    </div>
+    <a class="cc-urllink" href="https://example.org/reports/apprenticeship-at-scale-2026.pdf"
+      >https://example.org/reports/apprenticeship-at-scale-2026.pdf</a
+    >
+  </div>
+{/snippet}
+
+{#snippet emptyState(p: Record<string, unknown>)}
+  <p class="cc-muted cc-pad cc-mini">{String(p.message ?? 'No sources yet. Paste a URL to add one.')}</p>
+{/snippet}