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-nav-lede">
        {!type && <i class="ps-menu"></i>}
        <div class="ps-brand-block" data-type-brand={hook}></div>
        {!type && <i class="ps-brand-word"></i>}
      </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-tail">
        {!type && <i class="ps-search"></i>}
        <div class="ps-nav-action" data-type-nav-action={hook}></div>
        {!type && <i class="ps-avatar"></i>}
      </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><i></i><i></i></div>
            <div class="ps-actions"><i></i><i></i></div>
          </Fragment>
        )}
      </div>
      <div class="ps-image"></div>
    </div>
    <div class="ps-proof">
      {[0, 1, 2, 3].map((n) => (
        <Fragment>
          {n > 0 && <i class="ps-proof-divider" aria-hidden="true"></i>}
          <div class="ps-proof-item">
            <i></i>
            {type
              ? <span data-type-proof></span>
              : <span class="ps-proof-lines"><b></b><b></b></span>}
          </div>
        </Fragment>
      ))}
    </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>
            {type
              ? <span><b data-type-gallery-title></b><b data-type-gallery-meta></b></span>
              : <span><b></b><b></b><b></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>
    {/*
      Off-grid marks, drawn only where the page has already left the field:
      opacity rides --pvs-drift, so on the three disciplined answers they are
      rendered and invisible and the answers that pay for them are the ones
      that asked. Absolute, so the desktop grid still has exactly its five
      declared rows.
    */}
    {!type && (
      <Fragment>
        <i class="ps-scatter ps-scatter--lead" aria-hidden="true"></i>
        <i class="ps-scatter ps-scatter--trail" aria-hidden="true"></i>
      </Fragment>
    )}
    {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-nav-lede">
          <div class="ps-brand-block" data-type-brand={hook}></div>
          {!type && <i class="ps-brand-word"></i>}
        </div>
        <div class="ps-nav-tail">
          <div class="ps-nav-action" data-type-menu-action={hook}></div>
          {!type && <i class="ps-menu"></i>}
        </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">
          {[0, 1].map((n) => (
            <Fragment>
              {n > 0 && <i class="ps-proof-divider" aria-hidden="true"></i>}
              <div class="ps-proof-item">
                <i></i>
                {type
                  ? <span data-type-proof></span>
                  : <span class="ps-proof-lines"><b></b><b></b></span>}
              </div>
            </Fragment>
          ))}
        </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>
              {type
                ? <span><b data-type-gallery-title></b><b data-type-gallery-meta></b></span>
                : <span><b></b><b></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>