runicgateway.com/src/components/NotBuilt.astro

---
import { notBuiltFor, assertScopeNonEmpty } from '../data/notBuilt.mjs';

/**
 * The deliberate absences (PLAN.md §2, D22), rendered for one page's scope.
 *
 * §2 describes its absent-features list as "as load-bearing as the rest", and this is the
 * component that makes that true on a page rather than in a plan. It reads the shared list
 * so `/features/`, `/integrations/` and `/modules/` cannot drift into telling three
 * different stories about the same six things.
 *
 * ---------------------------------------------------------------------------------------
 * WHY IT LOOKS LIKE THE REST OF THE PAGE
 * ---------------------------------------------------------------------------------------
 * Not a warning box, not a muted footnote, not an accordion. D8's "understated honesty" is
 * a house style with a specific consequence here: a section that is visually apologetic
 * teaches a reader that absences are embarrassing, and a section that is visually hidden
 * teaches them to go looking for the ones you did not mention. These are decisions with
 * reasons, so they are set as decisions with reasons — the same panels as everything else,
 * in the same place in the rhythm.
 *
 * The one visual difference is the `resolvedBy` line, which every entry carries. An absence
 * with an exit condition is a position; an absence without one is a hole. D8 gives the
 * Integration Kit's draft status a defined removal condition and this generalises it.
 */
interface Props {
  /** Which page is asking: `features`, `integrations` or `modules`. */
  scope: string;
  /** Section heading. Each page frames the same list for its own reader. */
  title: string;
}

const { scope, title } = Astro.props;

assertScopeNonEmpty(scope);
const entries = notBuiltFor(scope);
---

<section class="page section notbuilt">
  <p class="eyebrow">Not built</p>
  <h2>{title}</h2>
  <p class="prose notbuilt__lede">
    Every one of these is a decision rather than a backlog item, so each says why. Where the
    reasoning was written down in the open, it is linked.
  </p>

  <ul class="notbuilt__grid">
    {
      entries.map((entry) => (
        <li class="panel notbuilt__item">
          <h3>{entry.title}</h3>
          <p class="notbuilt__body">{entry.body}</p>
          <p class="notbuilt__resolved">
            <span class="notbuilt__resolved-label">What would change it</span>
            {entry.resolvedBy}
          </p>
          {entry.link && (
            <p class="notbuilt__link">
              <a href={entry.link.href} rel="noopener noreferrer">
                {entry.link.label}
              </a>
            </p>
          )}
        </li>
      ))
    }
  </ul>
</section>

<style>
  .notbuilt h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  }

  .notbuilt__lede {
    margin: 0;
    color: var(--muted);
  }

  .notbuilt__grid {
    display: grid;
    gap: 1rem;
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }

  .notbuilt__item {
    display: flex;
    flex-direction: column;
  }

  .notbuilt__item h3 {
    margin: 0 0 0.6rem;
    color: var(--gold);
    font-size: 1.02rem;
  }

  /* Takes the slack, so the exit condition sits at the foot of every card in a row
     rather than immediately under a body of whatever length — the same kind of
     statement in the same place on each, which is what makes them readable as a row. */
  .notbuilt__body {
    flex: 1;
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
  }

  .notbuilt__resolved {
    margin: 1rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line-soft);
    color: var(--dim);
    font-size: 0.88rem;
  }

  .notbuilt__resolved-label {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .notbuilt__link {
    margin: 0.85rem 0 0;
    font-size: 0.88rem;
  }
</style>