@holdyapp/sdk 0.2.1 → 1.0.0

package/src/render/kinds/shared.ts

@@ -1,67 +0,0 @@
-import type { InterventionPayload, OutcomeValue } from '../../types'
-
-export interface RenderHandlers {
-  onExecuted(metadata?: Record<string, unknown>): void
-  onDismissed(metadata?: Record<string, unknown>): void
-  onFailed(metadata?: Record<string, unknown>): void
-}
-
-export interface RenderControl {
-  el: HTMLElement
-  dismiss: (outcome?: OutcomeValue, metadata?: Record<string, unknown>) => void
-}
-
-/** Cria botão fechar SDK-owned · dispatch dismissed. */
-export function buildCloseButton(onDismiss: () => void): HTMLButtonElement {
-  const btn = document.createElement('button')
-  btn.type = 'button'
-  btn.className = 'holdy-close'
-  btn.setAttribute('aria-label', 'Fechar')
-  btn.textContent = '×'
-  btn.addEventListener('click', (e) => {
-    e.stopPropagation()
-    onDismiss()
-  })
-  return btn
-}
-
-/** Cria CTA button OU anchor SDK-owned · dispatch executed. */
-export function buildCtaButton(
-  payload: InterventionPayload,
-  onExecuted: () => void,
-): HTMLElement | null {
-  if (!payload.cta_text) return null
-
-  let el: HTMLElement
-  if (payload.cta_href) {
-    const a = document.createElement('a')
-    a.href = payload.cta_href
-    a.rel = 'noopener noreferrer'
-    a.target = '_self'
-    el = a
-  } else {
-    el = document.createElement('button')
-    ;(el as HTMLButtonElement).type = 'button'
-  }
-  el.className = 'holdy-btn'
-  // textContent only · NEVER innerHTML.
-  el.textContent = payload.cta_text
-  el.addEventListener('click', () => onExecuted())
-  return el
-}
-
-export function buildTextNode(text: string): HTMLParagraphElement {
-  const p = document.createElement('p')
-  p.className = 'holdy-card-text'
-  p.textContent = text
-  return p
-}
-
-export function buildActionsRow(...children: Array<HTMLElement | null>): HTMLDivElement | null {
-  const filtered = children.filter((c): c is HTMLElement => c !== null)
-  if (filtered.length === 0) return null
-  const row = document.createElement('div')
-  row.className = 'holdy-card-actions'
-  filtered.forEach((c) => row.appendChild(c))
-  return row
-}

package/src/render/kinds/spotlight.ts

@@ -1,176 +0,0 @@
-import type { InterventionPayload } from '../../types'
-import {
-  buildActionsRow,
-  buildCloseButton,
-  buildCtaButton,
-  buildTextNode,
-  type RenderControl,
-  type RenderHandlers,
-} from './shared'
-
-const SPOTLIGHT_PADDING = 6
-const TOOLTIP_GAP_PX = 12
-
-/**
- * Spotlight · backdrop escurecido com "buraco" recortado no anchor +
- * tooltip apontando.
- *
- * UX:
- *   · backdrop tem clip-path criando ring around o elemento
- *   · tooltip aparece abaixo (ou acima se sem espaço)
- *   · clique no anchor original (atravessa o buraco via pointer-events:none
- *     na área do hole) executa
- *   · backdrop click fora do hole dismissa
- *   · ESC dismissa
- *
- * Uso: onboarding step "veja esse botão", first-time UI guidance.
- */
-export function renderSpotlight(
-  payload: InterventionPayload,
-  anchor: Element | null,
-  handlers: RenderHandlers,
-): RenderControl {
-  if (!anchor) {
-    handlers.onFailed({ reason: 'anchor_unresolved' })
-    const empty = document.createElement('div')
-    return { el: empty, dismiss: () => undefined }
-  }
-
-  const container = document.createElement('div')
-  container.className = 'holdy-spotlight-container'
-
-  const backdrop = document.createElement('div')
-  backdrop.className = 'holdy-spotlight-backdrop'
-  container.appendChild(backdrop)
-
-  const ring = document.createElement('div')
-  ring.className = 'holdy-spotlight-ring'
-  container.appendChild(ring)
-
-  const card = document.createElement('div')
-  card.className = 'holdy-card holdy-spotlight-tooltip'
-  card.setAttribute('role', 'dialog')
-
-  if (payload.title) {
-    const h = document.createElement('h3')
-    h.className = 'holdy-card-title'
-    h.textContent = payload.title
-    card.appendChild(h)
-  }
-  const text = buildTextNode(payload.text)
-  card.appendChild(text)
-
-  const close = buildCloseButton(() => dismiss('dismissed'))
-  const cta = buildCtaButton(payload, () => {
-    handlers.onExecuted()
-    cleanup()
-  })
-
-  const actions = buildActionsRow(cta, close)
-  if (actions) card.appendChild(actions)
-  else card.appendChild(close)
-
-  container.appendChild(card)
-
-  // Anchor click intercept · marca executed também (sem precisar do CTA)
-  const onAnchorClick = (): void => {
-    handlers.onExecuted({ via: 'anchor_click' })
-    cleanup()
-  }
-  ;(anchor as HTMLElement).addEventListener('click', onAnchorClick, { once: true, capture: true })
-
-  // Backdrop click dismissa
-  backdrop.addEventListener('click', () => dismiss('dismissed', { reason: 'backdrop_click' }))
-
-  const onKeydown = (e: KeyboardEvent): void => {
-    if (e.key === 'Escape') {
-      e.stopPropagation()
-      dismiss('dismissed', { reason: 'esc' })
-    }
-  }
-  document.addEventListener('keydown', onKeydown, true)
-
-  const position = (): void => {
-    const rect = anchor.getBoundingClientRect()
-    if (rect.width === 0 && rect.height === 0) {
-      // Anchor sumiu · dismiss silencioso (no_show)
-      dismiss('no_show', { reason: 'anchor_disappeared' })
-      return
-    }
-
-    const top = Math.max(0, rect.top - SPOTLIGHT_PADDING)
-    const left = Math.max(0, rect.left - SPOTLIGHT_PADDING)
-    const width = rect.width + SPOTLIGHT_PADDING * 2
-    const height = rect.height + SPOTLIGHT_PADDING * 2
-
-    ring.style.top = `${top}px`
-    ring.style.left = `${left}px`
-    ring.style.width = `${width}px`
-    ring.style.height = `${height}px`
-
-    // Clip-path no backdrop pra criar buraco
-    backdrop.style.clipPath = `polygon(
-      0 0, 100% 0, 100% 100%, 0 100%, 0 0,
-      ${left}px ${top}px,
-      ${left}px ${top + height}px,
-      ${left + width}px ${top + height}px,
-      ${left + width}px ${top}px,
-      ${left}px ${top}px
-    )`
-
-    // Tooltip abaixo ou acima do ring
-    const cardRect = card.getBoundingClientRect()
-    let cardTop = top + height + TOOLTIP_GAP_PX
-    let cardLeft = left + width / 2 - cardRect.width / 2
-
-    if (cardLeft < 8) cardLeft = 8
-    const maxLeft = window.innerWidth - cardRect.width - 8
-    if (cardLeft > maxLeft) cardLeft = maxLeft
-    if (cardTop + cardRect.height > window.innerHeight - 8) {
-      cardTop = top - cardRect.height - TOOLTIP_GAP_PX
-    }
-    card.style.top = `${Math.max(8, cardTop)}px`
-    card.style.left = `${cardLeft}px`
-  }
-
-  // Init off-screen
-  card.style.top = '-9999px'
-  card.style.left = '-9999px'
-
-  requestAnimationFrame(() => {
-    position()
-    window.addEventListener('scroll', position, true)
-    window.addEventListener('resize', position)
-  })
-
-  let dismissed = false
-  const cleanup = (): void => {
-    if (dismissed) return
-    dismissed = true
-    container.remove()
-    document.removeEventListener('keydown', onKeydown, true)
-    window.removeEventListener('scroll', position, true)
-    window.removeEventListener('resize', position)
-    ;(anchor as HTMLElement).removeEventListener('click', onAnchorClick, true)
-  }
-
-  const dismiss = (
-    outcome: 'dismissed' | 'no_show' | 'failed' = 'dismissed',
-    metadata?: Record<string, unknown>,
-  ): void => {
-    if (dismissed) return
-    if (outcome === 'dismissed') handlers.onDismissed(metadata)
-    if (outcome === 'no_show') {
-      // Não dispara onFailed · no_show é caso normal de anchor desaparecer
-      // mid-render. Caller (HoldySdk.renderDecision) já reporta no_show via
-      // outcomeTracker antes mesmo de chamar render. Aqui apenas cleanup.
-    }
-    if (outcome === 'failed') handlers.onFailed(metadata)
-    cleanup()
-  }
-
-  return {
-    el: container,
-    dismiss: (o) => dismiss(o === 'failed' || o === 'no_show' ? o : 'dismissed'),
-  }
-}

package/src/render/kinds/tooltip.ts

@@ -1,82 +0,0 @@
-import type { InterventionPayload } from '../../types'
-import {
-  buildActionsRow,
-  buildCloseButton,
-  buildCtaButton,
-  buildTextNode,
-  type RenderControl,
-  type RenderHandlers,
-} from './shared'
-
-const TOOLTIP_GAP_PX = 8
-
-export function renderTooltip(
-  payload: InterventionPayload,
-  anchor: Element | null,
-  handlers: RenderHandlers,
-): RenderControl {
-  const card = document.createElement('div')
-  card.className = 'holdy-card holdy-tooltip'
-  card.setAttribute('role', 'tooltip')
-
-  const text = buildTextNode(payload.text)
-  card.appendChild(text)
-
-  const close = buildCloseButton(() => dismiss('dismissed'))
-  const cta = buildCtaButton(payload, () => {
-    handlers.onExecuted()
-    cleanup()
-  })
-
-  const actions = buildActionsRow(cta, close)
-  if (actions) card.appendChild(actions)
-  else card.appendChild(close)
-
-  let dismissed = false
-  const cleanup = (): void => {
-    if (dismissed) return
-    dismissed = true
-    card.remove()
-    window.removeEventListener('scroll', position, true)
-    window.removeEventListener('resize', position)
-  }
-
-  const dismiss = (outcome: 'dismissed' | 'no_show' | 'failed' = 'dismissed'): void => {
-    if (dismissed) return
-    if (outcome === 'dismissed') handlers.onDismissed()
-    if (outcome === 'failed') handlers.onFailed()
-    cleanup()
-  }
-
-  const position = (): void => {
-    if (!anchor) return
-    const rect = anchor.getBoundingClientRect()
-    if (rect.width === 0 && rect.height === 0) return
-    const cardRect = card.getBoundingClientRect()
-    let top = rect.bottom + TOOLTIP_GAP_PX
-    let left = rect.left + rect.width / 2 - cardRect.width / 2
-    // Keep in viewport
-    const maxLeft = window.innerWidth - cardRect.width - 8
-    if (left < 8) left = 8
-    if (left > maxLeft) left = maxLeft
-    if (top + cardRect.height > window.innerHeight - 8) {
-      // Flip above
-      top = rect.top - cardRect.height - TOOLTIP_GAP_PX
-    }
-    card.style.top = `${Math.max(8, top)}px`
-    card.style.left = `${left}px`
-  }
-
-  // Initial render off-screen pra medir antes de posicionar.
-  card.style.top = '-9999px'
-  card.style.left = '-9999px'
-
-  // Caller anexa ao shadow root, então retornamos card + ativador.
-  requestAnimationFrame(() => {
-    position()
-    window.addEventListener('scroll', position, true)
-    window.addEventListener('resize', position)
-  })
-
-  return { el: card, dismiss: (o) => dismiss(o === 'failed' || o === 'no_show' ? o : 'dismissed') }
-}

package/src/render/root.ts

@@ -1,69 +0,0 @@
-import type { ThemeConfig } from '../types'
-import { applyThemeVars, getStyleSheet, injectFallbackStyle } from './styles'
-
-const HOST_TAG = 'holdy-root'
-let hostEl: HTMLElement | null = null
-let shadow: ShadowRoot | null = null
-
-function defineCustomElement(): void {
-  if (typeof customElements === 'undefined') return
-  if (customElements.get(HOST_TAG)) return
-  // Minimal subclass · we keep behavior in plain functions.
-  class HoldyRoot extends HTMLElement {}
-  try {
-    customElements.define(HOST_TAG, HoldyRoot)
-  } catch {
-    // Already defined by another instance · safe to ignore.
-  }
-}
-
-export function ensureRoot(theme: ThemeConfig | undefined): ShadowRoot | null {
-  if (typeof document === 'undefined') return null
-  if (shadow) {
-    if (hostEl) applyThemeVars(hostEl, theme)
-    return shadow
-  }
-  defineCustomElement()
-
-  hostEl = document.createElement(HOST_TAG)
-  hostEl.setAttribute('aria-live', 'polite')
-  hostEl.setAttribute('data-holdy-root', '1')
-  hostEl.style.position = 'fixed'
-  hostEl.style.top = '0'
-  hostEl.style.left = '0'
-  hostEl.style.width = '0'
-  hostEl.style.height = '0'
-  hostEl.style.zIndex = '2147483647'
-  hostEl.style.pointerEvents = 'none'
-
-  const root = hostEl.attachShadow({ mode: 'closed' })
-  shadow = root
-  const sheet = getStyleSheet()
-  if (sheet && 'adoptedStyleSheets' in root) {
-    try {
-      ;(root as ShadowRoot & { adoptedStyleSheets: CSSStyleSheet[] }).adoptedStyleSheets = [sheet]
-    } catch {
-      injectFallbackStyle(root)
-    }
-  } else {
-    injectFallbackStyle(root)
-  }
-
-  applyThemeVars(hostEl, theme)
-
-  if (document.body) {
-    document.body.appendChild(hostEl)
-  } else {
-    document.addEventListener('DOMContentLoaded', () => {
-      if (hostEl && !hostEl.isConnected) document.body.appendChild(hostEl)
-    })
-  }
-  return shadow
-}
-
-export function appendToRoot(node: HTMLElement): void {
-  if (!shadow) return
-  // Re-enable pointer events on actual cards (root host is pointer-events:none).
-  node.style.pointerEvents = 'auto'
-  shadow.appendChild(node)
-}

package/src/render/styles.ts

@@ -1,280 +0,0 @@
-import type { ThemeConfig } from '../types'
-import { DEFAULT_THEME } from '../types'
-
-const BASE_CSS = `
-:host {
-  --holdy-primary: var(--holdy-cfg-primary, #ca2121);
-  --holdy-font: var(--holdy-cfg-font, system-ui, -apple-system, sans-serif);
-  --holdy-radius: var(--holdy-cfg-radius, 8px);
-  --holdy-offset: var(--holdy-cfg-offset, 8px);
-  --holdy-bg: #ffffff;
-  --holdy-fg: #1a1a1a;
-  --holdy-muted: #737373;
-  --holdy-border: rgba(0, 0, 0, 0.08);
-  --holdy-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  all: initial;
-  font-family: var(--holdy-font);
-  color: var(--holdy-fg);
-}
-
-@media (prefers-color-scheme: dark) {
-  :host {
-    --holdy-bg: #111111;
-    --holdy-fg: #f5f5f5;
-    --holdy-muted: #a3a3a3;
-    --holdy-border: rgba(255, 255, 255, 0.12);
-    --holdy-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-  }
-}
-
-.holdy-card {
-  background: var(--holdy-bg);
-  color: var(--holdy-fg);
-  border: 1px solid var(--holdy-border);
-  border-radius: var(--holdy-radius);
-  box-shadow: var(--holdy-shadow);
-  padding: 12px 14px;
-  font-size: 14px;
-  line-height: 1.45;
-  max-width: 320px;
-  pointer-events: auto;
-}
-
-.holdy-card-text {
-  margin: 0;
-}
-
-.holdy-card-actions {
-  display: flex;
-  gap: 8px;
-  margin-top: 10px;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.holdy-btn {
-  font-family: var(--holdy-font);
-  font-size: 13px;
-  font-weight: 500;
-  padding: 6px 12px;
-  border-radius: 6px;
-  border: none;
-  cursor: pointer;
-  background: var(--holdy-primary);
-  color: #ffffff;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-}
-
-.holdy-btn:focus-visible {
-  outline: 2px solid var(--holdy-primary);
-  outline-offset: 2px;
-}
-
-.holdy-btn-ghost {
-  background: transparent;
-  color: var(--holdy-muted);
-  border: 1px solid var(--holdy-border);
-}
-
-.holdy-close {
-  background: transparent;
-  border: none;
-  color: var(--holdy-muted);
-  font-size: 16px;
-  line-height: 1;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-}
-
-.holdy-close:hover {
-  color: var(--holdy-fg);
-}
-
-.holdy-tooltip {
-  position: fixed;
-  z-index: 2147483647;
-  max-width: 280px;
-}
-
-.holdy-banner {
-  position: fixed;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: var(--holdy-offset);
-  z-index: 2147483647;
-  max-width: min(560px, calc(100vw - 32px));
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.holdy-banner .holdy-card-text {
-  flex: 1;
-}
-
-.holdy-cta {
-  position: fixed;
-  right: var(--holdy-offset);
-  bottom: var(--holdy-offset);
-  z-index: 2147483647;
-  max-width: 320px;
-}
-
-.holdy-card-title {
-  margin: 0 0 6px;
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.3;
-}
-
-/* ── Modal (Wave 2) ─────────────────────────────────────────────── */
-.holdy-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2147483647;
-  padding: 20px;
-  pointer-events: auto;
-}
-
-.holdy-modal {
-  max-width: 480px;
-  width: 100%;
-  padding: 20px 22px;
-}
-
-.holdy-modal:focus {
-  outline: none;
-}
-
-/* ── Checklist (Wave 2) ─────────────────────────────────────────── */
-.holdy-checklist {
-  position: fixed;
-  right: var(--holdy-offset);
-  bottom: var(--holdy-offset);
-  z-index: 2147483647;
-  max-width: 320px;
-  padding: 14px 16px;
-}
-
-.holdy-checklist-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
-.holdy-checklist-title {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.3;
-  flex: 1;
-}
-
-.holdy-checklist-list {
-  list-style: none;
-  padding: 0;
-  margin: 8px 0 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.holdy-checklist-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  line-height: 1.4;
-}
-
-.holdy-checklist-item.is-done .holdy-checklist-label {
-  text-decoration: line-through;
-  color: var(--holdy-muted);
-}
-
-.holdy-checklist-checkbox {
-  accent-color: var(--holdy-primary);
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.holdy-checklist-label {
-  color: var(--holdy-fg);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.holdy-checklist-label:hover {
-  color: var(--holdy-primary);
-}
-
-/* ── Spotlight (Wave 2) ─────────────────────────────────────────── */
-.holdy-spotlight-container {
-  position: fixed;
-  inset: 0;
-  z-index: 2147483647;
-  pointer-events: none;
-}
-
-.holdy-spotlight-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.55);
-  pointer-events: auto;
-  transition: clip-path 120ms ease-out;
-}
-
-.holdy-spotlight-ring {
-  position: absolute;
-  border-radius: 8px;
-  box-shadow: 0 0 0 2px var(--holdy-primary), 0 0 24px rgba(202, 33, 33, 0.4);
-  pointer-events: none;
-  transition: top 120ms, left 120ms, width 120ms, height 120ms;
-}
-
-.holdy-spotlight-tooltip {
-  position: absolute;
-  max-width: 320px;
-  pointer-events: auto;
-}
-`
-
-let cachedSheet: CSSStyleSheet | null = null
-
-export function getStyleSheet(): CSSStyleSheet | null {
-  if (typeof CSSStyleSheet === 'undefined') return null
-  if (cachedSheet) return cachedSheet
-  try {
-    const sheet = new CSSStyleSheet()
-    sheet.replaceSync(BASE_CSS)
-    cachedSheet = sheet
-    return sheet
-  } catch {
-    return null
-  }
-}
-
-export function applyThemeVars(host: HTMLElement, theme: ThemeConfig | undefined): void {
-  const t = theme ?? DEFAULT_THEME
-  host.style.setProperty('--holdy-cfg-primary', t.primary_color)
-  host.style.setProperty('--holdy-cfg-font', t.font_family)
-  host.style.setProperty('--holdy-cfg-radius', `${t.border_radius_px}px`)
-  host.style.setProperty('--holdy-cfg-offset', `${t.position_offset_px}px`)
-}
-
-/** Fallback pra browsers sem adoptedStyleSheets (Safari <16.4). */
-export function injectFallbackStyle(root: ShadowRoot): void {
-  const el = document.createElement('style')
-  el.textContent = BASE_CSS
-  root.appendChild(el)
-}