pbakaus_impeccable/picker/components/Artboard.astro

---
/*
  The wireframe landing page every option screen previews its answer on. One
  copy so a change to the page's anatomy lands on every screen at once.

  mode: 'bars' fills the hero with bar stacks, which is what a screen judging
  color, layout, or depth needs. 'type' swaps them for real text elements and
  adds the data-type-* hooks the font screen writes specimen copy into; that
  screen is judging glyphs, so bars would tell it nothing.

  phone: false drops the handset and leaves the desktop artboard alone in the
  frame, for a screen whose answer only reads at desktop width.
*/
interface Props {
  mode?: 'bars' | 'type';
  phone?: boolean;
  class?: string;
  strategyHook?: boolean;
  typeHook?: boolean;
  cursor?: boolean;
  /*
    Marks an artboard as one that accumulates the structural answers. The
    committed layout, boundary, corner, and depth selectors key on it, which is
    how each screen shows the page as decided so far without those answers
    reaching back to the screens that came before them.
  */
  carry?: boolean;
}

const {
  mode = 'bars',
  phone = true,
  class: className = '',
  strategyHook = false,
  typeHook = false,
  cursor = false,
  carry = false,
} = Astro.props;
const type = mode === 'type';
const classes = ['picker-artboard', className].filter(Boolean).join(' ');
// Empty string renders the bare attribute the font screen's selectors expect;
// undefined drops it entirely on the other screens.
const hook = type ? '' : undefined;
---

<div
  class={classes}
  data-artboard=""
  data-carry={carry ? '' : undefined}
  data-strategy-preview={strategyHook ? '' : undefined}
  data-type-preview={typeHook ? '' : undefined}
  aria-hidden="true"
>
  <div class="ps-desktop">
    <div class="ps-nav">
      <div class="ps-brand-block" data-type-brand={hook}></div>
      {type ? (
        <div class="ps-nav-bars"><i data-type-nav></i><i data-type-nav></i><i data-type-nav></i><i data-type-nav></i></div>
      ) : (
        <div class="ps-nav-bars"><i></i><i></i><i></i><i></i></div>
      )}
      <div class="ps-nav-action" data-type-nav-action={hook}></div>
    </div>
    <div class="ps-hero">
      <div class="ps-hero-copy">
        {type ? (
          <Fragment>
            <h2 class="pt-headline" data-type-headline></h2>
            <p class="pt-body" data-type-body></p>
            <div class="ps-actions"><i data-type-cta-primary></i><i data-type-cta-secondary></i></div>
          </Fragment>
        ) : (
          <Fragment>
            <div class="ps-eyebrow"></div>
            <div class="ps-headline"><i></i><i></i></div>
            <div class="ps-copy"><i></i></div>
            <div class="ps-actions"><i></i><i></i></div>
          </Fragment>
        )}
      </div>
      <div class="ps-image"></div>
    </div>
    <div class="ps-proof">
      <div class="ps-proof-item"><i></i><span data-type-proof={hook}></span></div>
      <i class="ps-proof-divider" aria-hidden="true"></i>
      <div class="ps-proof-item"><i></i><span data-type-proof={hook}></span></div>
      <i class="ps-proof-divider" aria-hidden="true"></i>
      <div class="ps-proof-item"><i></i><span data-type-proof={hook}></span></div>
      <i class="ps-proof-divider" aria-hidden="true"></i>
      <div class="ps-proof-item"><i></i><span data-type-proof={hook}></span></div>
    </div>
    <div class="ps-editorial">
      <div class="ps-editorial-copy">
        <strong data-type-section-title={hook}></strong>
        {type
          ? <p class="pt-section-body" data-type-section-body></p>
          : <span><i></i><i></i></span>}
        <em data-type-section-link={hook}></em>
      </div>
      <div class="ps-gallery">
        {[0, 1, 2, 3].map(() => (
          <div class="ps-gallery-item">
            <i></i>
            <span><b data-type-gallery-title={hook}></b><b data-type-gallery-meta={hook}></b></span>
          </div>
        ))}
      </div>
    </div>
    <div class="ps-footer">
      {type ? (
        <div class="ps-footer-links"><i data-type-footer-link></i><i data-type-footer-link></i><i data-type-footer-link></i><i data-type-footer-link></i></div>
      ) : (
        <div class="ps-footer-links"><i></i><i></i><i></i><i></i></div>
      )}
      <div class="ps-footer-mark" data-type-footer-mark={hook}></div>
    </div>
    {cursor && <i class="ps-cursor" data-cursor aria-hidden="true"></i>}
  </div>

  {phone && (
    <div class="ps-phone">
      <div class="ps-phone-top">
        <div class="ps-brand-block" data-type-brand={hook}></div>
        <div class="ps-nav-action" data-type-menu-action={hook}></div>
      </div>
      <div class="ps-phone-body">
        <div class="ps-image"></div>
        {type ? (
          <Fragment>
            <h2 class="pt-headline" data-type-headline></h2>
            <p class="pt-body" data-type-body></p>
          </Fragment>
        ) : (
          <Fragment>
            <div class="ps-headline"><i></i><i></i></div>
            <div class="ps-copy"><i></i><i></i></div>
          </Fragment>
        )}
        <div class="ps-actions">
          <i data-type-cta-primary={hook}></i><i data-type-cta-secondary={hook}></i>
        </div>
        <div class="ps-proof">
          <div class="ps-proof-item"><i></i><span data-type-proof={hook}></span></div>
          <i class="ps-proof-divider" aria-hidden="true"></i>
          <div class="ps-proof-item"><i></i><span data-type-proof={hook}></span></div>
        </div>
        <div class="ps-editorial-copy">
          <strong data-type-section-title={hook}></strong>
          {type
            ? <p class="pt-section-body" data-type-section-body></p>
            : <span><i></i><i></i></span>}
        </div>
        <div class="ps-gallery">
          {[0, 1].map(() => (
            <div class="ps-gallery-item">
              <i></i>
              <span><b data-type-gallery-title={hook}></b><b data-type-gallery-meta={hook}></b></span>
            </div>
          ))}
        </div>
      </div>
      <div class="ps-phone-footer">
        {type ? (
          <Fragment><i data-type-footer-link></i><i data-type-footer-link></i><i data-type-footer-link></i></Fragment>
        ) : (
          <Fragment><i></i><i></i><i></i></Fragment>
        )}
      </div>
    </div>
  )}
</div>