@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f77aaf2

package/src/Layout/__tests__/nestedPadding.test.tsx

@@ -1,264 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file nestedPadding.test.tsx
- * @input Uses vitest, @testing-library/react, Layout, AppShell, Card, Section
- * @output Tests which outer inset a Layout's regions resolve to when Layouts
- *   are nested or composed inside padding containers
- * @position Layout tests; validates the scope of Layout's `padding` prop
- *
- * A Layout's `padding` belongs to its own regions. A nested Layout without
- * `padding` takes the nearest padding container's inset (Card, Section,
- * Dialog) or the default, and never an ancestor Layout's value. AppShell's
- * internal Layout uses `padding={0}`, so before this was scoped every page
- * Layout inside AppShell lost its default inset.
- *
- * jsdom neither inherits custom properties nor keeps logical padding
- * declarations, so `resolvedInset` reproduces the cascade from the injected
- * StyleX rules: it reads the region's republished
- * `--container-padding-inline-start` (the same expression as its applied
- * inline-start padding) and substitutes each `var()` from the nearest
- * declaring ancestor. The pixel results are verified in a browser; see the
- * pull request description.
- */
-
-import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import {Layout} from '../Layout';
-import {LayoutHeader} from '../LayoutHeader';
-import {LayoutContent} from '../LayoutContent';
-import {AppShell} from '../../AppShell';
-import {Card} from '../../Card';
-import {Section} from '../../Section';
-
-/** Custom-property declarations keyed by StyleX atomic class name. */
-function declarationsByClass(): Map<string, Map<string, string>> {
-  const byClass = new Map<string, Map<string, string>>();
-  for (const sheet of Array.from(document.styleSheets)) {
-    for (const rule of Array.from(sheet.cssRules)) {
-      if (!(rule instanceof CSSStyleRule)) {
-        continue;
-      }
-      const match = /^\.([\w-]+)$/.exec(rule.selectorText);
-      if (match == null) {
-        continue;
-      }
-      for (let i = 0; i < rule.style.length; i++) {
-        const name = rule.style[i];
-        if (name.startsWith('--')) {
-          const decls = byClass.get(match[1]) ?? new Map<string, string>();
-          decls.set(name, rule.style.getPropertyValue(name).trim());
-          byClass.set(match[1], decls);
-        }
-      }
-    }
-  }
-  return byClass;
-}
-
-/** Splits `var(--name, fallback)` args at the first top-level comma. */
-function splitVarArgs(args: string): [string, string | undefined] {
-  let depth = 0;
-  for (let i = 0; i < args.length; i++) {
-    const ch = args[i];
-    if (ch === '(') {
-      depth++;
-    } else if (ch === ')') {
-      depth--;
-    } else if (ch === ',' && depth === 0) {
-      return [args.slice(0, i).trim(), args.slice(i + 1).trim()];
-    }
-  }
-  return [args.trim(), undefined];
-}
-
-function resolveValue(
-  el: HTMLElement,
-  value: string,
-  byClass: Map<string, Map<string, string>>,
-  resolving: Set<string>,
-): string {
-  const start = value.indexOf('var(');
-  if (start === -1) {
-    return value;
-  }
-  let depth = 0;
-  let end = start + 3;
-  for (; end < value.length; end++) {
-    if (value[end] === '(') {
-      depth++;
-    } else if (value[end] === ')' && --depth === 0) {
-      break;
-    }
-  }
-  const [name, fallback] = splitVarArgs(value.slice(start + 4, end));
-  const inherited = lookup(el, name, byClass, resolving);
-  const replacement =
-    inherited ??
-    (fallback != null
-      ? resolveValue(el, fallback, byClass, resolving)
-      : `var(${name})`);
-  // `replacement` is already resolved; continue after it.
-  return (
-    value.slice(0, start) +
-    replacement +
-    resolveValue(el, value.slice(end + 1), byClass, resolving)
-  );
-}
-
-/**
- * The inherited value of a custom property at `el`: the nearest ancestor (or
- * `el`) that declares it, resolved where it is declared. `initial` is the
- * guaranteed-invalid value, so the reader's fallback applies; so is a
- * reference cycle.
- */
-function lookup(
-  el: HTMLElement,
-  name: string,
-  byClass: Map<string, Map<string, string>>,
-  resolving: Set<string> = new Set(),
-): string | undefined {
-  let depth = 0;
-  for (let node: HTMLElement | null = el; node; node = node.parentElement) {
-    depth++;
-    for (const cls of Array.from(node.classList)) {
-      const declared = byClass.get(cls)?.get(name);
-      if (declared == null) {
-        continue;
-      }
-      const key = `${name}@${depth}:${cls}`;
-      if (declared === 'initial' || resolving.has(key)) {
-        return undefined;
-      }
-      resolving.add(key);
-      const value = resolveValue(node, declared, byClass, resolving);
-      resolving.delete(key);
-      return value;
-    }
-  }
-  return undefined;
-}
-
-/**
- * The inline-start inset a region applies, as a spacing token reference.
- * LayoutHeader pads its inner wrapper; LayoutContent pads its root.
- */
-function resolvedInset(testId: string): string | undefined {
-  const region = screen.getByTestId(testId);
-  const padded = region.classList.contains('astryx-layout-header')
-    ? (region.firstElementChild as HTMLElement)
-    : region;
-  return lookup(
-    padded,
-    '--container-padding-inline-start',
-    declarationsByClass(),
-  );
-}
-
-function PageLayout({padding}: {padding?: 2}) {
-  return (
-    <Layout
-      padding={padding}
-      header={<LayoutHeader data-testid="page-header">Orders</LayoutHeader>}
-      content={<LayoutContent data-testid="page-content">Body</LayoutContent>}
-    />
-  );
-}
-
-describe('Layout padding scope', () => {
-  beforeEach(() => {
-    // AppShell reads a viewport media query; render the desktop shell.
-    vi.stubGlobal(
-      'matchMedia',
-      vi.fn().mockReturnValue({
-        matches: false,
-        media: '',
-        onchange: null,
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        dispatchEvent: vi.fn(),
-      }),
-    );
-  });
-
-  afterEach(() => {
-    vi.unstubAllGlobals();
-  });
-
-  it('gives a Layout inside AppShell content its default inset', () => {
-    render(
-      <AppShell sideNav={<nav>Nav</nav>}>
-        <PageLayout />
-      </AppShell>,
-    );
-    expect(resolvedInset('page-header')).toBe('var(--spacing-4)');
-    expect(resolvedInset('page-content')).toBe('var(--spacing-4)');
-  });
-
-  it("does not pass a full-bleed Layout's padding to a nested Layout", () => {
-    render(
-      <Layout
-        padding={0}
-        header={<LayoutHeader data-testid="outer-header">Shell</LayoutHeader>}
-        content={<PageLayout />}
-      />,
-    );
-    expect(resolvedInset('outer-header')).toBe('var(--spacing-0)');
-    expect(resolvedInset('page-header')).toBe('var(--spacing-4)');
-  });
-
-  it('does not pass a non-zero Layout padding to a nested Layout', () => {
-    render(
-      <Layout
-        padding={8}
-        header={<LayoutHeader data-testid="outer-header">Shell</LayoutHeader>}
-        content={<PageLayout />}
-      />,
-    );
-    expect(resolvedInset('outer-header')).toBe('var(--spacing-8)');
-    expect(resolvedInset('page-header')).toBe('var(--spacing-4)');
-  });
-
-  it('keeps an explicit padding on a nested Layout', () => {
-    render(<Layout padding={0} content={<PageLayout padding={2} />} />);
-    expect(resolvedInset('page-header')).toBe('var(--spacing-2)');
-  });
-
-  // Unchanged path: padding containers publish the inset for Layouts inside
-  // them. Clearing the inherited container value (rather than only an
-  // ancestor Layout's own value) would reset these to the default.
-  it("keeps a Card's padding for a Layout inside it", () => {
-    render(
-      <Card padding={2}>
-        <PageLayout />
-      </Card>,
-    );
-    expect(resolvedInset('page-header')).toBe('var(--spacing-2)');
-    expect(resolvedInset('page-content')).toBe('var(--spacing-2)');
-  });
-
-  it("keeps a Section's padding for a Layout inside it", () => {
-    render(
-      <Section padding={6}>
-        <PageLayout />
-      </Section>,
-    );
-    expect(resolvedInset('page-header')).toBe('var(--spacing-6)');
-  });
-
-  it('lets a Card inside a full-bleed Layout set the inset for its own Layout', () => {
-    render(
-      <Layout
-        padding={0}
-        content={
-          <Card padding={2}>
-            <PageLayout />
-          </Card>
-        }
-      />,
-    );
-    expect(resolvedInset('page-header')).toBe('var(--spacing-2)');
-  });
-});

package/src/Layout/overlayPaddingReset.test.tsx

@@ -1,224 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file overlayPaddingReset.test.tsx
- * @input Uses vitest, @testing-library/react, overlay components from core
- * @output Tests that overlay roots stop the container padding system at their
- *   boundary, and that the public theme token still crosses it
- * @position Layout tests; validates overlayPaddingReset in padding.stylex.ts
- *
- * The container padding system talks to descendants through INHERITED custom
- * properties, but an overlay leaves its parent's visual box while staying a DOM
- * descendant of it. Every overlay root therefore has to stop those values (see
- * #5208: a Section in a 640px sheet rendered 672px wide).
- *
- * jsdom does no layout, so these assert on the custom properties themselves —
- * the definitions the layout is computed from. The widths they stand in for are
- * verified in a browser; see the PR description.
- *
- * SYNC: When an overlay is added, add it to OVERLAYS below.
- */
-
-import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
-import {readFileSync} from 'node:fs';
-import {join} from 'node:path';
-import {render, screen} from '@testing-library/react';
-import type {ReactNode} from 'react';
-import {Dialog} from '../Dialog';
-import {BottomSheet} from '../BottomSheet';
-import {MobileNav} from '../MobileNav';
-import {Lightbox} from '../Lightbox';
-import {Popover} from '../Popover';
-import {Section} from '../Section';
-
-// jsdom implements neither the <dialog> methods nor matchMedia.
-beforeEach(() => {
-  HTMLDialogElement.prototype.showModal = vi.fn(function (
-    this: HTMLDialogElement,
-  ) {
-    this.setAttribute('open', '');
-  });
-  HTMLDialogElement.prototype.show = vi.fn(function (this: HTMLDialogElement) {
-    this.setAttribute('open', '');
-  });
-  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
-    this.removeAttribute('open');
-  });
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockReturnValue({
-      matches: false,
-      media: '',
-      onchange: null,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    }),
-  );
-});
-
-afterEach(() => {
-  vi.unstubAllGlobals();
-});
-
-/**
- * Values descendants SUBTRACT (bleed margins). The overlay root has no padding
- * of its own to escape, so these must read a literal zero.
- */
-const SUBTRACTED = [
-  '--container-padding-inline-start',
-  '--container-padding-inline-end',
-  '--container-padding-block-start',
-  '--container-padding-block-end',
-];
-
-/**
- * Values descendants ADD. These must be guaranteed-invalid (`initial`) rather
- * than zero, so readers fall through to their own default instead of losing
- * their padding — a computed empty string is what `initial` looks like here.
- */
-const CLEARED = [
-  '--layout-padding-outer-x',
-  '--layout-padding-outer-y',
-  '--layout-padding-own-outer-x',
-  '--layout-padding-own-outer-y',
-  '--layout-padding-inner-x',
-  '--layout-padding-inner-y',
-  '--_section-padding-propagated',
-];
-
-/** What a cleared custom property reads back as. See the assertion below. */
-const CLEARED_READBACK = ['', 'initial'];
-
-/** Each overlay, rendered open inside a page Section that leaks 40px. */
-const OVERLAYS: {
-  name: string;
-  render: (child: ReactNode) => ReactNode;
-  root: () => HTMLElement;
-}[] = [
-  {
-    name: 'Dialog',
-    render: child => (
-      <Dialog isOpen onOpenChange={() => {}}>
-        {child}
-      </Dialog>
-    ),
-    root: () => screen.getByRole('dialog'),
-  },
-  {
-    name: 'BottomSheet',
-    render: child => (
-      <BottomSheet isOpen onOpenChange={() => {}} label="S">
-        {child}
-      </BottomSheet>
-    ),
-    root: () =>
-      document.querySelector<HTMLElement>(
-        '.astryx-bottom-sheet',
-      ) as HTMLElement,
-  },
-  {
-    name: 'MobileNav',
-    render: child => (
-      <MobileNav isOpen onOpenChange={() => {}} label="N">
-        {child}
-      </MobileNav>
-    ),
-    root: () => screen.getByRole('dialog'),
-  },
-  {
-    name: 'Lightbox',
-    render: () => (
-      <Lightbox
-        isOpen
-        onOpenChange={() => {}}
-        media={{src: 'a.png', alt: 'a'}}
-      />
-    ),
-    root: () => screen.getByRole('dialog'),
-  },
-  {
-    name: 'Popover (useLayer surface)',
-    render: child => (
-      <Popover isOpen onOpenChange={() => {}} label="P" content={child}>
-        <button type="button">t</button>
-      </Popover>
-    ),
-    root: () => document.querySelector<HTMLElement>('[popover]') as HTMLElement,
-  },
-];
-
-describe('overlayPaddingReset', () => {
-  describe.each(OVERLAYS)('$name', ({render: renderOverlay, root}) => {
-    it('zeroes the values descendants subtract', () => {
-      render(<Section padding={10}>{renderOverlay(<div>c</div>)}</Section>);
-      const computed = getComputedStyle(root());
-      for (const name of SUBTRACTED) {
-        expect(computed.getPropertyValue(name), name).toBe('0px');
-      }
-    });
-
-    it('clears the values descendants add, so they fall to their default', () => {
-      render(<Section padding={10}>{renderOverlay(<div>c</div>)}</Section>);
-      const computed = getComputedStyle(root());
-      for (const name of CLEARED) {
-        // A browser resolves `initial` on a custom property to the
-        // guaranteed-invalid value and reports '' here; jsdom does not
-        // implement that and echoes the keyword. Either proves the
-        // declaration landed — and neither is the leaked '40px'.
-        expect(CLEARED_READBACK, name).toContain(
-          computed.getPropertyValue(name),
-        );
-      }
-    });
-  });
-
-  it('does not clear the public theme token', () => {
-    // The reset clears the PRIVATE propagation var only. The public
-    // `--astryx-section-padding` is theme surface, set once at the theme root,
-    // so it has to keep reaching inside every overlay — clearing it would
-    // blank a theme's section padding in every dialog. That is the whole
-    // reason the two names were split, and it is the mistake a later
-    // "simplification" would most plausibly make.
-    //
-    // jsdom does not inherit custom properties, so the cascade cannot show
-    // this; assert it where it is decided instead. (Verified in a browser: a
-    // theme's 20px still reaches a Section inside a Dialog nested under a
-    // 40px page Section.)
-    const source = readFileSync(join(__dirname, 'padding.stylex.ts'), 'utf8');
-    const reset = source.slice(
-      source.indexOf('export const overlayPaddingReset'),
-    );
-    expect(reset).toContain("'--_section-padding-propagated': 'initial'");
-    expect(reset).not.toContain('--astryx-section-padding');
-  });
-
-  it("stops an ancestor Section's propagated padding at the boundary", () => {
-    // The page Section propagates 40px. Without the reset it would reach the
-    // Section inside the overlay, which would pad itself 40px instead of the
-    // theme default — the second half of #5208.
-    render(
-      <Section padding={10}>
-        <Dialog isOpen onOpenChange={() => {}}>
-          <div data-testid="content">c</div>
-        </Dialog>
-      </Section>,
-    );
-    const dialog = screen.getByRole('dialog');
-    expect(CLEARED_READBACK).toContain(
-      getComputedStyle(dialog).getPropertyValue(
-        '--_section-padding-propagated',
-      ),
-    );
-    // ...while the page Section outside the overlay still propagates it.
-    // (jsdom does not resolve the token reference to its 40px value.)
-    const pageSection = document.querySelector<HTMLElement>('.astryx-section');
-    expect(
-      getComputedStyle(pageSection as HTMLElement).getPropertyValue(
-        '--_section-padding-propagated',
-      ),
-    ).toBe('var(--spacing-10)');
-  });
-});

package/src/Lightbox/Lightbox.spec.md

@@ -1,199 +0,0 @@
----
-schema_version: 3
-template_version: 3
-kind: component
-id: component:Lightbox
-authority: draft
-archive_reason: null
-superseded_by: null
-approved_by: null
-approved_at: null
-owners: [cixzhang]
-review_triggers: [behavior, theming, accessibility]
-verified_by:
-  [
-    packages/core/src/Lightbox/Lightbox.test.tsx,
-    packages/core/src/theme/themingTargets.test.ts,
-    scripts/check-knowledge.mjs,
-  ]
-modules: []
-families: [family:overlay-dismissal]
-design_specs: []
-architecture:
-  [
-    architecture:component-theming-surface,
-    architecture:interaction-modality,
-    architecture:layer-runtime,
-    architecture:public-component-api,
-  ]
-contributing: []
-system_specs: []
----
-
-# Lightbox component contract
-
-## Intent
-
-Lightbox presents one active image or video in a full-viewport viewer and may
-add gallery navigation, a caption, and a position counter. This draft records
-current consumer anatomy and theming ownership without changing runtime
-behavior, styling, targets, or public API.
-
-## Compatibility and migration
-
-- Released default preserved: `yes`
-- Compatibility class: additive documentation only; runtime, DOM, styling,
-  targets, aliases, and public API remain unchanged
-- Controlled/uncontrolled behavior: unchanged
-- Migration decision: none
-
-Consumer migration instructions belong in consumer docs and release notes.
-
-## Ownership boundary
-
-**Owns**
-
-- The Viewer overlay and its current `lightbox` target.
-- Media presentation, optional Caption and Counter placement, gallery navigation,
-  and current image zoom and pan behavior.
-
-**Does not own / non-goals**
-
-- The Close, Previous, and Next button surfaces — delegated to
-  `component:Button` through IconButton.
-- Caller-provided Caption content.
-- New targets for Media, Caption, or Counter; none exist on current `main`.
-- Shared layer hosting or dismissal policy.
-
-## Public concepts
-
-No new public concept is introduced. Consumer props and usage remain documented
-in `Lightbox.doc.mjs`.
-
-## Behavioral and layout contract
-
-| ID  | Candidate invariant                                                                                                                                                                                                                                                                | Basis                           | Draft review state                                 |
-| --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------- |
-| FR1 | The current viewer contains one active Media item and a Close button; galleries additionally contain Previous and Next buttons plus a Counter, and Caption renders only when supplied.                                                                                             | Current source, docs, and tests | Verified current behavior; no new behavior decided |
-| FR2 | Viewer overlay carries the current `lightbox` target. Media, Caption, and Counter carry no Lightbox public target.                                                                                                                                                                 | Current source and public docs  | Verified current reachability; no target change    |
-| FR3 | Close, Previous, and Next button surfaces use Button's `button` target through IconButton rather than Lightbox-owned button targets.                                                                                                                                               | Current source and target docs  | Verified current delegation; no ownership change   |
-| FR4 | The open viewer is a focus region through Core's shared focus-region module (`component:Dialog/DEC-2`): Tab from its last control moves focus to its first and Shift+Tab from its first moves focus to its last, so focus never leaves the viewer for the browser's own interface. | `component:Dialog/DEC-2`        | Owner decision; tests land with the implementation |
-
-### Allowed variation
-
-- **AV1 — Media mode.** Media may be an image or video; zoom and pan are available
-  only on the current image path.
-- **AV2 — Gallery mode.** Previous, Next, and Counter are absent for a single
-  item. Navigation button disabled state follows the current gallery boundary.
-- **AV3 — Caption content.** Caller-provided Caption content may vary without
-  becoming a Lightbox-owned target.
-
-### Representative states
-
-| State            | Required invariant                                                  | Allowed variation                             |
-| ---------------- | ------------------------------------------------------------------- | --------------------------------------------- |
-| Single image     | Viewer overlay, Media, and Close button render.                     | Caption and zoom may be absent or present.    |
-| Gallery boundary | Both navigation buttons and Counter remain rendered.                | Previous or Next is disabled at its boundary. |
-| Video            | Media renders native video controls without image zoom interaction. | Autoplay follows the existing consumer prop.  |
-| Captioned media  | Caption follows the active Media inside the centered media group.   | Caption content remains caller-provided.      |
-
-### Transformation and precedence order
-
-- No new index, zoom, pan, media, or styling precedence rule is introduced.
-
-### Performance and resources
-
-- No new performance or resource rule is introduced.
-
-## Accessibility contract
-
-Apart from Tab containment (FR4), this draft does not change or extend
-Lightbox's existing dialog naming, focus, media alternatives, announcements,
-button labels, keyboard behavior, or dismissal behavior.
-
-## Design relationships
-
-| Anatomy or state | Design requirement                                                   | Representation authority       | Hierarchy role    | Component contract |
-| ---------------- | -------------------------------------------------------------------- | ------------------------------ | ----------------- | ------------------ |
-| Viewer overlay   | Presents the full-viewport dialog and surrounding overlay treatment. | Current source and public docs | Supporting        | FR1, FR2           |
-| Media            | Presents the active image or video.                                  | Current source and public docs | Prominent         | FR1, FR2           |
-| Close button     | Provides the persistent viewer dismissal action.                     | `component:Button`             | Supporting        | FR1, FR3           |
-| Previous button  | Moves gallery presentation to the preceding item.                    | `component:Button`             | Supporting        | FR1, FR3           |
-| Next button      | Moves gallery presentation to the following item.                    | `component:Button`             | Supporting        | FR1, FR3           |
-| Caption          | Presents caller-provided context below the active Media.             | Current source and public docs | Context-dependent | FR1, FR2           |
-| Counter          | Presents current gallery position and total.                         | Current source and tests       | Supporting        | FR1, FR2           |
-
-Media, Caption, and Counter are stable visible parts, but no current public
-target reaches them. Their `none` dispositions record factual reachability, not
-a decision that they must remain unthemeable.
-
-### Theming anatomy
-
-<!-- anatomy-theming:v1 -->
-
-```json
-{
-  "Viewer overlay": {"target": "lightbox"},
-  "Media": {
-    "none": {
-      "reason": "reachability-gap: No current public target is applied to the active image or video"
-    }
-  },
-  "Close button": {
-    "delegatesTo": {"owner": "component:Button", "target": "button"}
-  },
-  "Previous button": {
-    "delegatesTo": {"owner": "component:Button", "target": "button"}
-  },
-  "Next button": {
-    "delegatesTo": {"owner": "component:Button", "target": "button"}
-  },
-  "Caption": {
-    "none": {
-      "reason": "reachability-gap: No current public target is applied to the caption container"
-    }
-  },
-  "Counter": {
-    "none": {
-      "reason": "reachability-gap: No current public target is applied to the gallery counter"
-    }
-  }
-}
-```
-
-## Family and system relationships
-
-- `architecture:component-theming-surface` owns anatomy qualification, target
-  mapping, delegation, and factual `none` dispositions.
-- `architecture:layer-runtime` owns the current native-dialog host and shared
-  layer plumbing; Lightbox retains its current media and local backdrop behavior.
-- `family:overlay-dismissal` owns shared Escape and platform-close ordering and
-  records Lightbox as a current adopter.
-- `architecture:interaction-modality` and `architecture:public-component-api`
-  own their shared modality and API boundaries; this draft changes neither.
-
-## Verification map
-
-| Contract            | Verification                                                         | Representative states                       | Mutation or failure expectation                                                                | Audit section            |
-| ------------------- | -------------------------------------------------------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------ |
-| FR1                 | `Lightbox.test.tsx` render, gallery, caption, media, and zoom suites | Single image, gallery edges, caption, video | Removing a documented part fails existing role, content, media, or navigation assertions.      | `audit:Lightbox/anatomy` |
-| FR2                 | Source inspection and `themingTargets.test.ts`                       | Viewer overlay, Media, Caption, and Counter | Removing the root target or documenting an unshipped child target fails evidence or inventory. | `audit:Lightbox/theming` |
-| FR3                 | Source inspection plus Button and IconButton public composition      | Close and gallery navigation controls       | Re-owning a control surface requires the delegated owner and this map to change.               | `audit:Lightbox/theming` |
-| Theming anatomy map | `scripts/check-knowledge.mjs`                                        | Canonical anatomy and current target        | Missing, extra, prefixed, stale, or multiply assigned mappings fail repository validation.     | `audit:Lightbox/theming` |
-
-## Decision log
-
-None. This draft records current facts and introduces no component-local design,
-API, theming, or layer-system decision.
-
-## Open questions
-
-- **OQ1 — Should Media, Caption, or Counter gain a stable public theming target?**
-  (`human-api`) Their current lack of reachability is an audit gap, not settled
-  intent.
-
-## Content boundary
-
-This file does not duplicate consumer prop tables/examples, media algorithms,
-shared layer rules, current audit results, or implementation steps. It links to
-their owners.