@obvi/blueprint 1.0.9 → 1.1.0

package/dist/blueprint-choices.js

@@ -0,0 +1,567 @@
+// blueprint-choices.js — interactive choice / preflight Web Components.
+//
+// Authoring shrinks to a small set of elements; each component expands to
+// light-DOM markup styled by blueprint.css. Interaction is CSS-only (radio /
+// checkbox + :has() + native form reset). Per-instance scoped rules are
+// injected only where value-specific selectors are required (tab panels,
+// verdict labels, preflight gate).
+//
+//   <bp-choice layout="tabs" verdict="Adopted">
+//     <bp-choice-option value="a" tab="Draft A" title="Phased rollout">
+//       <p>…</p>
+//       <bp-rationale><p><strong>Trade-off.</strong> …</p></bp-rationale>
+//     </bp-choice-option>
+//   </bp-choice>
+//
+// layout:  tabs | stack | gallery
+// resolved: option value of an already-made decision — renders statically
+//           (no inputs, no reset); the named option carries the verdict
+// verdict: kicker on the committed banner (default "Chosen")
+// adopt:   tabs-only commit button label (default "Adopt this direction")
+// hint:    footer hint; reconsider: reset button label (default "Reconsider")
+// compare: gallery-only <details> summary (omit to skip compare block)
+
+/** @typedef {'tabs' | 'stack' | 'gallery'} ChoiceLayout */
+
+let choiceSeq = 0
+
+/** @param {string} prefix */
+function nextId(prefix) {
+  choiceSeq += 1
+  return `${prefix}-${choiceSeq}`
+}
+
+/** @param {ParentNode} root */
+function extractRationale(root) {
+  const node = root.querySelector(':scope > bp-rationale')
+  if (!node) return null
+  const wrap = node.ownerDocument.createElement('div')
+  wrap.className = 'bp-choice-rationale'
+  wrap.append(...node.childNodes)
+  return wrap
+}
+
+/** @param {Element} root */
+function bodyWithoutRationale(root) {
+  const frag = root.ownerDocument.createDocumentFragment()
+  for (const child of root.childNodes) {
+    if (child instanceof Element && child.tagName === 'BP-RATIONALE') continue
+    if (child instanceof Element && child.getAttribute('slot') === 'frame') continue
+    frag.append(child.cloneNode(true))
+  }
+  return frag
+}
+
+/** @param {Element} root */
+function frameContent(root) {
+  const slotted = root.querySelector(':scope > [slot="frame"]')
+  if (slotted) {
+    const frame = slotted.cloneNode(true)
+    frame.removeAttribute('slot')
+    return frame
+  }
+  return null
+}
+
+/**
+ * @param {Document} doc
+ * @param {string} tag
+ * @param {string} [className]
+ */
+function el(doc, tag, className) {
+  const node = doc.createElement(tag)
+  if (className) node.className = className
+  return node
+}
+
+/**
+ * @param {Document} doc
+ * @param {string} text
+ * @param {string} [className]
+ */
+function label(doc, text, className) {
+  const node = el(doc, 'span', className ?? 'bp-label')
+  node.textContent = text
+  return node
+}
+
+/**
+ * @param {Document} doc
+ * @param {string} kicker
+ * @param {Array<{ value: string, title: string }>} options
+ */
+function buildVerdict(doc, kicker, options, meta = 'You · just now') {
+  const verdict = el(doc, 'div', 'bp-choice__verdict')
+  verdict.append(label(doc, kicker))
+  for (const opt of options) {
+    const pick = el(doc, 'p', 'bp-choice__verdict-pick')
+    pick.dataset.for = opt.value
+    pick.textContent = opt.title
+    verdict.append(pick)
+  }
+  if (meta) {
+    const metaEl = el(doc, 'span', 'bp-choice__verdict-meta')
+    metaEl.textContent = meta
+    verdict.append(metaEl)
+  }
+  return verdict
+}
+
+/**
+ * @param {Document} doc
+ * @param {string} hint
+ * @param {string} reconsider
+ */
+function buildFooter(doc, hint, reconsider) {
+  const actions = el(doc, 'div', 'bp-choice__actions')
+  if (hint) {
+    const hintEl = el(doc, 'span', 'bp-choice__hint')
+    hintEl.textContent = hint
+    actions.append(hintEl)
+  }
+  const reset = el(doc, 'button', 'bp-choice__reset')
+  reset.type = 'reset'
+  reset.textContent = reconsider
+  actions.append(reset)
+  return actions
+}
+
+/**
+ * @param {string} scope
+ * @param {string} viewName
+ * @param {string} pickName
+ * @param {Array<{ value: string, title: string }>} options
+ */
+function scopedTabRules(scope, viewName, pickName, options) {
+  const lines = options.map(
+    (opt) =>
+      `${scope}:has([name="${viewName}"][value="${opt.value}"]:checked) .bp-choice__panel[data-value="${opt.value}"]{display:block}` +
+      `${scope}:has([name="${pickName}"][value="${opt.value}"]:checked) .bp-choice__verdict-pick[data-for="${opt.value}"]{display:block}`
+  )
+  return lines.join('\n')
+}
+
+/** @param {HTMLElement} host */
+function readOptions(host) {
+  return [...host.querySelectorAll(':scope > bp-choice-option')].map((node) => ({
+    el: node,
+    value: node.getAttribute('value') ?? '',
+    tab: node.getAttribute('tab') ?? node.getAttribute('label') ?? node.getAttribute('value') ?? '',
+    title: node.getAttribute('title') ?? node.getAttribute('caption') ?? node.getAttribute('tab') ?? '',
+    optionLabel: node.getAttribute('label') ?? node.getAttribute('tab') ?? '',
+    caption: node.getAttribute('caption') ?? node.getAttribute('title') ?? '',
+  }))
+}
+
+/**
+ * Static, non-interactive rendering: the decision is already made. The option
+ * named by `resolved` carries the verdict; the rest read as considered-and-set-
+ * aside. No form, no inputs, no reset.
+ *
+ * @param {Document} doc
+ * @param {{ options: ReturnType<typeof readOptions>, verdictKicker: string, resolvedValue: string }} spec
+ */
+function buildResolvedChoice(doc, { options, verdictKicker, resolvedValue }) {
+  const root = el(doc, 'div', 'bp-choice bp-choice--resolved')
+  const winner = options.find((o) => o.value === resolvedValue) ?? options[0]
+
+  const verdict = buildVerdict(
+    doc,
+    verdictKicker,
+    options.map((o) => ({ value: o.value, title: o.title })),
+    ''
+  )
+  const winnerPick = winner && verdict.querySelector(`.bp-choice__verdict-pick[data-for="${winner.value}"]`)
+  if (winnerPick) winnerPick.setAttribute('data-resolved', '')
+  root.append(verdict)
+
+  const stack = el(doc, 'div', 'bp-choice__stack')
+  for (const opt of options) {
+    const card = el(doc, 'div', 'bp-choice__card')
+    if (winner && opt.value === winner.value) card.setAttribute('data-resolved', '')
+
+    const head = el(doc, 'div', 'bp-choice__card-head')
+    if (opt.optionLabel) head.append(label(doc, opt.optionLabel))
+    const chosen = el(doc, 'span', 'bp-choice__tag bp-choice__tag--ink bp-choice__card-chosen')
+    chosen.textContent = `✓ ${verdictKicker}`
+    const rejected = el(doc, 'span', 'bp-choice__tag bp-choice__tag--out bp-choice__card-rejected')
+    rejected.textContent = 'Not chosen'
+    head.append(chosen, rejected)
+    card.append(head)
+
+    const h4 = el(doc, 'h4')
+    h4.textContent = opt.title
+    card.append(h4)
+    card.append(bodyWithoutRationale(opt.el))
+    const rationale = extractRationale(opt.el)
+    if (rationale) card.append(rationale)
+    stack.append(card)
+  }
+  root.append(stack)
+  return root
+}
+
+class BlueprintRationaleElement extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return
+    this.dataset.bpRendered = '1'
+    this.classList.add('bp-choice-rationale')
+  }
+}
+
+class BlueprintChoiceOptionElement extends HTMLElement {}
+
+class BlueprintChoiceElement extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return
+    this.dataset.bpRendered = '1'
+
+    const doc = this.ownerDocument
+    /** @type {ChoiceLayout} */
+    const layout = (this.getAttribute('layout') || 'stack').toLowerCase()
+    const verdictKicker = this.getAttribute('verdict') ?? 'Chosen'
+    const adoptLabel = this.getAttribute('adopt') ?? 'Adopt this direction'
+    const hint = this.getAttribute('hint') ?? ''
+    const reconsider = this.getAttribute('reconsider') ?? 'Reconsider'
+    const compareSummary = this.getAttribute('compare')
+    const compareBody = this.querySelector(':scope > [slot="compare"]')
+
+    const options = readOptions(this)
+
+    // resolved: render the decision as already made (no interaction).
+    const resolvedValue = this.getAttribute('resolved')
+    if (resolvedValue !== null) {
+      this.replaceChildren(buildResolvedChoice(doc, { options, verdictKicker, resolvedValue }))
+      return
+    }
+
+    const scopeId = nextId('bp-choice')
+    const viewName = `${scopeId}-view`
+    const pickName = `${scopeId}-pick`
+
+    const form = el(doc, 'form', `bp-choice bp-choice--${layout}`)
+    form.dataset.bpChoice = scopeId
+
+    const titleOpts = options.map((o) => ({ value: o.value, title: o.title }))
+    form.append(buildVerdict(doc, verdictKicker, titleOpts))
+
+    if (layout === 'tabs') {
+      const seg = el(doc, 'div', 'bp-choice__seg')
+      seg.setAttribute('role', 'tablist')
+      for (const [index, opt] of options.entries()) {
+        const segOpt = el(doc, 'label', 'bp-choice__seg-opt')
+        const input = doc.createElement('input')
+        input.type = 'radio'
+        input.name = viewName
+        input.value = opt.value
+        input.className = 'bp-choice__view'
+        if (index === 0) input.checked = true
+        segOpt.append(input, doc.createTextNode(opt.tab))
+        seg.append(segOpt)
+      }
+      form.append(seg)
+
+      const panels = el(doc, 'div', 'bp-choice__panels')
+      for (const opt of options) {
+        const panel = el(doc, 'div', 'bp-choice__panel')
+        panel.dataset.value = opt.value
+        const h3 = el(doc, 'h3')
+        h3.textContent = opt.title
+        panel.append(h3)
+        panel.append(bodyWithoutRationale(opt.el))
+        const rationale = extractRationale(opt.el)
+        if (rationale) panel.append(rationale)
+
+        const actions = el(doc, 'div', 'bp-choice__actions')
+        const adopt = el(doc, 'label', 'bp-choice__adopt')
+        const commit = doc.createElement('input')
+        commit.type = 'radio'
+        commit.name = pickName
+        commit.value = opt.value
+        commit.className = 'bp-choice__commit'
+        adopt.append(commit, doc.createTextNode(adoptLabel))
+        actions.append(adopt)
+        panel.append(actions)
+        panels.append(panel)
+      }
+      form.append(panels)
+
+      const style = el(doc, 'style')
+      style.textContent = scopedTabRules(`[data-bp-choice="${scopeId}"]`, viewName, pickName, titleOpts)
+      form.prepend(style)
+
+      form.append(
+        buildFooter(
+          doc,
+          hint || 'Switch tabs to preview · adopt to commit',
+          reconsider
+        )
+      )
+    }
+
+    if (layout === 'stack') {
+      const stack = el(doc, 'div', 'bp-choice__stack')
+      for (const opt of options) {
+        const card = el(doc, 'label', 'bp-choice__card')
+        const input = doc.createElement('input')
+        input.type = 'radio'
+        input.name = pickName
+        input.value = opt.value
+        input.className = 'bp-choice__pick'
+        card.append(input)
+
+        const head = el(doc, 'div', 'bp-choice__card-head')
+        if (opt.optionLabel) head.append(label(doc, opt.optionLabel))
+        const chosen = el(doc, 'span', 'bp-choice__tag bp-choice__tag--ink bp-choice__card-chosen')
+        chosen.textContent = '✓ Chosen'
+        const rejected = el(doc, 'span', 'bp-choice__tag bp-choice__tag--out bp-choice__card-rejected')
+        rejected.textContent = 'Not chosen'
+        head.append(chosen, rejected)
+        card.append(head)
+
+        const h4 = el(doc, 'h4')
+        h4.textContent = opt.title
+        card.append(h4)
+        card.append(bodyWithoutRationale(opt.el))
+        const rationale = extractRationale(opt.el)
+        if (rationale) card.append(rationale)
+        stack.append(card)
+      }
+      form.append(stack)
+      form.append(
+        buildFooter(
+          doc,
+          hint || 'Select a card to commit · rejected drafts stay readable below',
+          reconsider
+        )
+      )
+    }
+
+    if (layout === 'gallery') {
+      const gallery = el(doc, 'div', 'bp-choice__gallery')
+      for (const opt of options) {
+        const mock = el(doc, 'label', 'bp-choice__mock')
+        const input = doc.createElement('input')
+        input.type = 'radio'
+        input.name = pickName
+        input.value = opt.value
+        input.className = 'bp-choice__pick'
+        mock.append(input)
+
+        const frame = el(doc, 'div', 'bp-choice__mock-frame')
+        const frameInner = frameContent(opt.el)
+        if (frameInner) frame.append(frameInner)
+        mock.append(frame)
+
+        const cap = el(doc, 'div', 'bp-choice__mock-cap')
+        const h4 = el(doc, 'h4')
+        h4.textContent = opt.caption
+        cap.append(h4)
+        const chosen = el(doc, 'span', 'bp-choice__tag bp-choice__tag--ink bp-choice__mock-pick bp-choice__mock-chosen')
+        chosen.textContent = '✓ Chosen'
+        const rejected = el(doc, 'span', 'bp-choice__tag bp-choice__tag--out bp-choice__mock-pick bp-choice__mock-rejected')
+        rejected.textContent = 'Not chosen'
+        cap.append(chosen, rejected)
+        mock.append(cap)
+        gallery.append(mock)
+      }
+      form.append(gallery)
+
+      if (compareSummary && compareBody) {
+        const details = el(doc, 'details', 'bp-choice__compare')
+        const summary = el(doc, 'summary')
+        summary.textContent = compareSummary
+        details.append(summary)
+        const body = el(doc, 'div', 'bp-choice__compare-body')
+        body.append(compareBody.cloneNode(true))
+        details.append(body)
+        form.append(details)
+      }
+
+      form.append(
+        buildFooter(doc, hint || 'Select a mockup to track the decision', reconsider)
+      )
+    }
+
+    this.replaceChildren(form)
+  }
+}
+
+class BlueprintPreflightAElement extends HTMLElement {}
+
+class BlueprintPreflightQElement extends HTMLElement {}
+
+class BlueprintPreflightElement extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return
+    this.dataset.bpRendered = '1'
+
+    const doc = this.ownerDocument
+    const title = this.getAttribute('title') ?? 'Before drafting'
+    const draftName = this.getAttribute('draft') ?? 'section'
+    const hint = this.getAttribute('hint') ?? 'Answer all questions to unlock · choices stay editable'
+    const reconsider = this.getAttribute('reconsider') ?? 'Reset answers'
+    const scopeId = nextId('bp-preflight')
+
+    const questions = [...this.querySelectorAll(':scope > bp-preflight-q')]
+    const form = el(doc, 'form')
+    const panel = el(doc, 'div', 'bp-preflight')
+    panel.dataset.bpPreflight = scopeId
+
+    const bar = el(doc, 'div', 'bp-preflight__bar')
+    bar.append(label(doc, title))
+    const count = el(doc, 'span', 'bp-preflight__count')
+    count.textContent = `${questions.length} required`
+    bar.append(count)
+    panel.append(bar)
+
+    const list = el(doc, 'div', 'bp-preflight__questions')
+    /** @type {string[]} */
+    const gateSelectors = []
+
+    for (const qNode of questions) {
+      const qName = qNode.getAttribute('name') ?? nextId('q')
+      const kind = (qNode.getAttribute('kind') || 'one').toLowerCase()
+      const prompt = qNode.getAttribute('prompt') ?? ''
+      const answers = [...qNode.querySelectorAll(':scope > bp-preflight-a')]
+
+      const q = el(doc, 'div', 'bp-preflight__q')
+      const promptEl = el(doc, 'p', 'bp-preflight__prompt')
+      promptEl.append(doc.createTextNode(prompt))
+      const kindEl = el(doc, 'span', 'bp-preflight__kind')
+      kindEl.textContent = kind === 'many' ? '· choose any' : '· choose one'
+      promptEl.append(kindEl)
+      const resolved = el(doc, 'span', 'bp-choice__tag bp-choice__tag--ink bp-preflight__resolved')
+      resolved.textContent = '✓ Resolved'
+      promptEl.append(resolved)
+      q.append(promptEl)
+
+      const chips = el(doc, 'div', 'bp-preflight__chips')
+      for (const aNode of answers) {
+        const chip = el(doc, 'label', 'bp-preflight__chip')
+        const input = doc.createElement('input')
+        input.type = kind === 'many' ? 'checkbox' : 'radio'
+        input.name = qName
+        input.value = aNode.getAttribute('value') ?? aNode.textContent?.trim() ?? ''
+        chip.append(input, doc.createTextNode(aNode.textContent?.trim() ?? ''))
+        chips.append(chip)
+      }
+      q.append(chips)
+
+      const rationale = extractRationale(qNode)
+      if (rationale) q.append(rationale)
+      list.append(q)
+      gateSelectors.push(`[name="${qName}"]:checked`)
+    }
+    panel.append(list)
+
+    const gateWrap = el(doc, 'div')
+    gateWrap.style.padding = 'var(--bp-space-3)'
+    const gate = el(doc, 'div', 'bp-preflight__gate')
+    const locked = el(doc, 'div', 'bp-preflight__gate-locked')
+    const lockedTag = el(doc, 'span', 'bp-choice__tag')
+    lockedTag.textContent = `⌧ Section fenced — resolve the ${questions.length} decisions above to draft`
+    locked.append(lockedTag)
+    const ready = el(doc, 'div', 'bp-preflight__gate-ready')
+    const readyP = el(doc, 'p')
+    readyP.style.margin = '0 0 var(--bp-space-1)'
+    readyP.textContent = 'All decisions resolved.'
+    const draftBtn = el(doc, 'span', 'bp-preflight__draft')
+    draftBtn.textContent = `Draft “${draftName}” →`
+    ready.append(readyP, draftBtn)
+    gate.append(locked, ready)
+    gateWrap.append(gate)
+    panel.append(gateWrap)
+
+    const style = el(doc, 'style')
+    const gateRule = gateSelectors.map((sel) => `:has(${sel})`).join('')
+    style.textContent =
+      `[data-bp-preflight="${scopeId}"]${gateRule}{--bp-preflight-ready:1}` +
+      `[data-bp-preflight="${scopeId}"]${gateRule}{border-color:var(--bp-ink-line)}` +
+      `[data-bp-preflight="${scopeId}"]${gateRule} .bp-preflight__gate{background-image:none;border-style:solid}` +
+      `[data-bp-preflight="${scopeId}"]${gateRule} .bp-preflight__gate-locked{display:none}` +
+      `[data-bp-preflight="${scopeId}"]${gateRule} .bp-preflight__gate-ready{display:block}`
+    panel.prepend(style)
+
+    const footer = el(doc, 'div', 'bp-preflight__footer')
+    const hintEl = el(doc, 'span', 'bp-choice__hint')
+    hintEl.textContent = hint
+    const reset = el(doc, 'button', 'bp-choice__reset')
+    reset.type = 'reset'
+    reset.textContent = reconsider
+    footer.append(hintEl, reset)
+
+    form.append(panel, footer)
+    this.replaceChildren(form)
+  }
+}
+
+class BlueprintChoiceRecordRowElement extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return
+    this.dataset.bpRendered = '1'
+
+    const doc = this.ownerDocument
+    const rowLabel = this.getAttribute('label') ?? ''
+    const value = this.getAttribute('value') ?? ''
+    const alts = this.getAttribute('alts') ?? ''
+
+    const dl = el(doc, 'dl', 'bp-choice-record__row')
+    const dt = el(doc, 'dt')
+    dt.textContent = rowLabel
+    const dd = el(doc, 'dd')
+    dd.textContent = value
+    dl.append(dt, dd)
+    if (alts) {
+      const tag = el(doc, 'span', 'bp-choice__tag bp-choice__tag--out')
+      tag.textContent = alts
+      dl.append(tag)
+    }
+
+    const considered = this.querySelector(':scope > [slot="considered"]')
+    const nodes = [dl]
+    if (considered) {
+      const details = el(doc, 'details', 'bp-choice__compare')
+      details.style.marginTop = 'var(--bp-space-2)'
+      const summary = el(doc, 'summary')
+      summary.textContent = '＋ Show the options considered'
+      details.append(summary)
+      const body = el(doc, 'div', 'bp-choice__compare-body')
+      body.append(considered.cloneNode(true))
+      details.append(body)
+      nodes.push(details)
+    }
+    this.replaceChildren(...nodes)
+  }
+}
+
+class BlueprintChoiceRecordElement extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return
+    this.dataset.bpRendered = '1'
+    const wrap = this.ownerDocument.createElement('div')
+    wrap.className = 'bp-choice-record'
+    wrap.append(...this.childNodes)
+    this.replaceChildren(wrap)
+  }
+}
+
+/** @param {string} name @param {typeof HTMLElement} ctor */
+function define(name, ctor) {
+  if (typeof customElements !== 'undefined' && !customElements.get(name)) {
+    customElements.define(name, ctor)
+  }
+}
+
+export function registerBlueprintChoiceElements() {
+  define('bp-rationale', BlueprintRationaleElement)
+  define('bp-choice-option', BlueprintChoiceOptionElement)
+  define('bp-choice', BlueprintChoiceElement)
+  define('bp-preflight-a', BlueprintPreflightAElement)
+  define('bp-preflight-q', BlueprintPreflightQElement)
+  define('bp-preflight', BlueprintPreflightElement)
+  define('bp-choice-record-row', BlueprintChoiceRecordRowElement)
+  define('bp-choice-record', BlueprintChoiceRecordElement)
+}
+
+registerBlueprintChoiceElements()