describe-me 0.1.0

package/src/states-gallery.ts

@@ -0,0 +1,191 @@
+import { createCache, createMirror, rebuildIntoSandboxedIframe } from 'rrweb-snapshot'
+import type { ManifestFrame, ManifestTest } from '@describe-me/core/types'
+import { loadSnapshot } from './data.js'
+import { el } from './el.js'
+import { select } from './state.js'
+
+/** Bumped on every gallery render, so snapshots that arrive late are dropped. */
+let galleryToken = 0
+
+async function paintThumb(thumb: HTMLElement, frame: ManifestFrame, token: number): Promise<void> {
+  const node = await loadSnapshot(frame.snapshot)
+  if (token !== galleryToken || !thumb.isConnected) {
+    return
+  }
+
+  const { iframe } = rebuildIntoSandboxedIframe(node, {
+    root: thumb,
+    iframeAttributes: { title: frame.label },
+    cache: createCache(),
+    mirror: createMirror(),
+    hackCss: true,
+  })
+
+  // Styles are in place after a frame; only then do the boxes have their final size.
+  requestAnimationFrame(() => fitThumb(thumb, iframe))
+}
+
+const SKIPPED_TAGS = new Set(['SCRIPT', 'NOSCRIPT', 'STYLE', 'LINK', 'META', 'TITLE'])
+
+/**
+ * Whether an element draws something itself. Layout wrappers (the test
+ * container, a full-width flex row) stretch across the page and would make
+ * every thumbnail zoom out to the whole viewport.
+ */
+function isVisual(element: Element, view: Window): boolean {
+  if (element.children.length === 0) {
+    return true
+  }
+
+  const style = view.getComputedStyle(element)
+  const hasBackground =
+    style.backgroundColor !== 'rgba(0, 0, 0, 0)' && style.backgroundColor !== 'transparent'
+
+  const hasBorder = parseFloat(style.borderTopWidth) > 0 || parseFloat(style.borderLeftWidth) > 0
+  const hasShadow = style.boxShadow !== 'none'
+
+  return hasBackground || hasBorder || hasShadow
+}
+
+/** The box around everything that actually paints in the snapshot, in the iframe's own pixels. */
+function contentBox(body: HTMLElement, view: Window): DOMRect | null {
+  let box: DOMRect | null = null
+
+  for (const element of Array.from(body.querySelectorAll('*'))) {
+    if (SKIPPED_TAGS.has(element.tagName) || !isVisual(element, view)) {
+      continue
+    }
+
+    const rect = element.getBoundingClientRect()
+    if (rect.width === 0 || rect.height === 0) {
+      continue
+    }
+
+    if (!box) {
+      box = DOMRect.fromRect(rect)
+      continue
+    }
+
+    const right = Math.max(box.right, rect.right)
+    const bottom = Math.max(box.bottom, rect.bottom)
+    box.x = Math.min(box.x, rect.x)
+    box.y = Math.min(box.y, rect.y)
+    box.width = right - box.x
+    box.height = bottom - box.y
+  }
+
+  return box
+}
+
+const THUMB_PADDING = 16
+
+/**
+ * Zoom the snapshot so the component fills the tile instead of sitting in the
+ * corner of a full-size page. Never enlarges beyond natural size.
+ */
+function fitThumb(thumb: HTMLElement, iframe: HTMLIFrameElement): void {
+  const body = iframe.contentDocument?.body
+  const view = iframe.contentWindow
+  const box = body && view ? contentBox(body, view) : null
+  if (!box) {
+    return
+  }
+
+  const width = thumb.clientWidth - THUMB_PADDING * 2
+  const height = thumb.clientHeight - THUMB_PADDING * 2
+  const scale = Math.min(width / box.width, height / box.height, 1)
+  const offsetX = THUMB_PADDING + (width - box.width * scale) / 2 - box.x * scale
+  const offsetY = THUMB_PADDING + (height - box.height * scale) / 2 - box.y * scale
+
+  iframe.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`
+}
+
+/**
+ * The overview column scrolls, not the page, and an observer rooted at the
+ * viewport would never see the tiles below its fold.
+ */
+function scrollRoot(node: HTMLElement): HTMLElement | null {
+  let parent = node.parentElement
+  while (parent) {
+    const overflow = getComputedStyle(parent).overflowY
+    if (overflow === 'auto' || overflow === 'scroll') {
+      return parent
+    }
+
+    parent = parent.parentElement
+  }
+
+  return null
+}
+
+/** Build each thumbnail once its tile comes near the visible part of the column. */
+function paintWhenVisible(gallery: HTMLElement, pending: Map<Element, ManifestFrame>): void {
+  const token = galleryToken
+  const observer = new IntersectionObserver(
+    (entries) => {
+      if (token !== galleryToken) {
+        observer.disconnect()
+        return
+      }
+
+      for (const entry of entries) {
+        const frame = pending.get(entry.target)
+        if (entry.isIntersecting && frame) {
+          pending.delete(entry.target)
+          observer.unobserve(entry.target)
+          void paintThumb(entry.target as HTMLElement, frame, token)
+        }
+      }
+    },
+    { root: scrollRoot(gallery), rootMargin: '400px' },
+  )
+
+  for (const thumb of pending.keys()) {
+    observer.observe(thumb)
+  }
+}
+
+/** One scaled-down tile per test, showing its last frame and leading to it. */
+export function renderStatesGallery(tests: ManifestTest[]): HTMLElement {
+  const token = ++galleryToken
+  const gallery = el('div', { class: 'gallery' })
+  const pending = new Map<Element, ManifestFrame>()
+
+  for (const test of tests) {
+    const lastIndex = Math.max(0, test.frames.length - 1)
+    const last = test.frames[lastIndex]
+    const thumb = el('div', { class: 'thumb' })
+    if (last) {
+      pending.set(thumb, last)
+    } else {
+      thumb.append(el('div', { class: 'hint' }, 'no frames'))
+    }
+
+    gallery.append(
+      el(
+        'button',
+        {
+          class: 'tile',
+          title: test.fullName,
+          click: () => select(test.id, lastIndex),
+        },
+        thumb,
+        el(
+          'span',
+          { class: 'cap' },
+          el('span', { class: `dot ${test.state}` }),
+          el('span', { class: 'cap-name' }, test.name),
+        ),
+      ),
+    )
+  }
+
+  // The scroll container only exists once the caller has put the gallery on screen.
+  requestAnimationFrame(() => {
+    if (token === galleryToken && gallery.isConnected) {
+      paintWhenVisible(gallery, pending)
+    }
+  })
+
+  return gallery
+}

package/src/style.css

@@ -0,0 +1,527 @@
+:root {
+  --bg: #fafafa;
+  --panel: #ffffff;
+  --ink: #141414;
+  --muted: #7a7a7a;
+  --line: #e6e6e6;
+  --hover: #f0f0f0;
+  --accent: #2b5cff;
+  --pass: #1f9d55;
+  --fail: #d43f3f;
+  --skip: #b5b5b5;
+  --stage: #ffffff;
+  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  color-scheme: light dark;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #101010;
+    --panel: #171717;
+    --ink: #ececec;
+    --muted: #8a8a8a;
+    --line: #2a2a2a;
+    --hover: #202020;
+    --stage: #ffffff;
+  }
+}
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+body {
+  background: var(--bg);
+  color: var(--ink);
+  font: 13px/1.45 var(--mono);
+}
+button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+a {
+  color: inherit;
+}
+
+#app {
+  height: 100%;
+  display: grid;
+  grid-template-rows: 44px 1fr;
+}
+.header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel);
+}
+.wordmark {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.wordmark .me {
+  color: var(--accent);
+}
+.summary {
+  color: var(--muted);
+}
+.summary b {
+  color: var(--ink);
+  font-weight: 500;
+}
+.summary .fail {
+  color: var(--fail);
+}
+.header .right {
+  margin-left: auto;
+  color: var(--muted);
+}
+.live {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.live::before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--pass);
+}
+
+.body {
+  display: grid;
+  grid-template-columns: 300px 1fr 320px;
+  min-height: 0;
+}
+.sidebar {
+  border-right: 1px solid var(--line);
+  overflow: auto;
+  padding: 12px 8px;
+  background: var(--panel);
+}
+.module {
+  margin-bottom: 14px;
+}
+.module-button,
+.suite-button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border-radius: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.module-button {
+  color: var(--muted);
+  padding: 4px 8px;
+  font-size: 12px;
+}
+.suite {
+  padding-left: 12px;
+}
+.suite-button {
+  padding: 3px 8px;
+  color: var(--ink);
+}
+.module-button:hover,
+.suite-button:hover {
+  background: var(--hover);
+}
+.module-button.active,
+.suite-button.active {
+  background: var(--ink);
+  color: var(--bg);
+}
+.test {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  padding: 4px 8px;
+  border-radius: 6px;
+  padding-left: 20px;
+}
+.test:hover {
+  background: var(--hover);
+}
+.test.active {
+  background: var(--ink);
+  color: var(--bg);
+}
+.dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex: none;
+}
+.dot.passed {
+  background: var(--pass);
+}
+.dot.failed {
+  background: var(--fail);
+}
+.dot.skipped,
+.dot.pending {
+  background: var(--skip);
+}
+.test .n {
+  color: var(--muted);
+  margin-left: auto;
+  font-size: 11px;
+}
+.test.active .n {
+  color: inherit;
+  opacity: 0.7;
+}
+
+.main {
+  display: grid;
+  grid-template-rows: 40px 1fr auto;
+  min-width: 0;
+  min-height: 0;
+}
+.crumbs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  overflow: hidden;
+  white-space: nowrap;
+}
+.crumbs .sep {
+  opacity: 0.5;
+}
+.crumbs .cur {
+  color: var(--ink);
+}
+.crumbs .tools {
+  margin-left: auto;
+  display: flex;
+  gap: 4px;
+}
+.crumbs .tools button {
+  padding: 2px 8px;
+  border-radius: 5px;
+  color: var(--muted);
+}
+.crumbs .tools button.on {
+  background: var(--hover);
+  color: var(--ink);
+}
+.stage {
+  position: relative;
+  overflow: auto;
+  padding: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  background-image: radial-gradient(var(--line) 1px, transparent 1px);
+  background-size: 16px 16px;
+}
+.stage iframe {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--stage);
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
+  transition: width 0.15s ease;
+}
+.stage .empty {
+  color: var(--muted);
+  align-self: center;
+}
+
+.timeline {
+  border-top: 1px solid var(--line);
+  padding: 10px 16px;
+  display: flex;
+  gap: 6px;
+  overflow-x: auto;
+  background: var(--panel);
+}
+.frame {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  white-space: nowrap;
+  color: var(--muted);
+}
+.frame:hover {
+  background: var(--hover);
+}
+.frame.active {
+  border-color: var(--ink);
+  color: var(--ink);
+}
+.frame .k {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.7;
+}
+.frame .t {
+  opacity: 0.6;
+  font-size: 11px;
+}
+.frame.render .k {
+  color: var(--accent);
+  opacity: 1;
+}
+.frame.action .k {
+  color: var(--pass);
+  opacity: 1;
+}
+.frame.step .k {
+  color: #c77d00;
+  opacity: 1;
+}
+.frame.end .k {
+  color: var(--muted);
+}
+
+.inspector {
+  border-left: 1px solid var(--line);
+  overflow: auto;
+  padding: 16px;
+  background: var(--panel);
+}
+.inspector h3 {
+  margin: 0 0 8px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+  font-weight: 500;
+}
+.inspector section {
+  margin-bottom: 20px;
+}
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.status .dot {
+  width: 8px;
+  height: 8px;
+}
+.kv {
+  width: 100%;
+  border-collapse: collapse;
+}
+.kv td {
+  padding: 3px 0;
+  vertical-align: top;
+  border-bottom: 1px solid var(--line);
+}
+.kv td:first-child {
+  color: var(--muted);
+  padding-right: 12px;
+  white-space: nowrap;
+}
+.kv td:last-child {
+  word-break: break-word;
+}
+.val-string {
+  color: #b0501f;
+}
+.val-number,
+.val-boolean {
+  color: var(--accent);
+}
+.val-fn {
+  color: var(--muted);
+  font-style: italic;
+}
+.err {
+  color: var(--fail);
+  white-space: pre-wrap;
+  font-size: 12px;
+}
+.hint {
+  color: var(--muted);
+  font-size: 12px;
+}
+kbd {
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 0 4px;
+  font: inherit;
+  font-size: 11px;
+}
+
+.overview {
+  overflow: auto;
+  min-width: 0;
+  min-height: 0;
+  padding: 20px 24px 48px;
+}
+.overview-head {
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--line);
+}
+.overview-head h1 {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.overview-meta {
+  margin-left: auto;
+  color: var(--muted);
+}
+.overview-section {
+  margin-top: 22px;
+}
+.overview-section h2 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+.overview h3 {
+  margin: 18px 0 8px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+  font-weight: 500;
+}
+.overview .empty {
+  color: var(--muted);
+  padding: 24px 0;
+}
+.head-hint {
+  margin-left: 10px;
+  color: var(--muted);
+  text-transform: none;
+  letter-spacing: 0;
+  opacity: 0.85;
+}
+
+.props th {
+  text-align: left;
+  padding: 0 12px 5px 0;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  border-bottom: 1px solid var(--line);
+}
+.props td {
+  padding: 7px 12px 7px 0;
+}
+.props td.prop-name {
+  color: var(--ink);
+}
+.props .req {
+  color: var(--fail);
+}
+.props .prop-type {
+  color: var(--muted);
+  white-space: pre-wrap;
+}
+.props .prop-covered {
+  width: 52%;
+}
+.chip {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  margin: 0 6px 4px 0;
+  padding: 1px 8px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+.chip.covered {
+  color: var(--pass);
+  background: color-mix(in srgb, var(--pass) 14%, transparent);
+  border-color: color-mix(in srgb, var(--pass) 32%, transparent);
+}
+.chip.missing {
+  color: var(--fail);
+  background: color-mix(in srgb, var(--fail) 14%, transparent);
+  border-color: color-mix(in srgb, var(--fail) 32%, transparent);
+}
+.chip-default {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 14px;
+}
+.tile {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--panel);
+}
+.tile:hover {
+  border-color: var(--muted);
+}
+.thumb {
+  height: 150px;
+  overflow: hidden;
+  background: var(--stage);
+  border-bottom: 1px solid var(--line);
+}
+.thumb iframe {
+  width: 800px;
+  height: 500px;
+  border: 0;
+  transform: scale(0.3);
+  transform-origin: 0 0;
+  pointer-events: none;
+}
+.thumb .hint {
+  padding: 10px;
+}
+.cap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  min-width: 0;
+}
+.cap-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.missing-line {
+  color: var(--fail);
+}
+.component-line {
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+}

package/src/suite-key.ts

@@ -0,0 +1,19 @@
+/**
+ * The identity of a sidebar selection: a module plus a suite path inside it.
+ * A module-level selection has an empty path, so its key ends with `::`.
+ */
+export function suiteKey(moduleId: string, path: string[]): string {
+  return `${moduleId}::${path.join(' > ')}`
+}
+
+/** The inverse of `suiteKey`. A key without a separator is read as a whole module. */
+export function parseSuiteKey(key: string): { moduleId: string; path: string[] } {
+  const cut = key.indexOf('::')
+  if (cut < 0) {
+    return { moduleId: key, path: [] }
+  }
+
+  const tail = key.slice(cut + 2)
+
+  return { moduleId: key.slice(0, cut), path: tail ? tail.split(' > ') : [] }
+}