@unitninety/site-kit 0.0.0-stage → 1.6.2

package/src/preview-lock/contracts.ts

@@ -0,0 +1,42 @@
+/** Public platform wire contract. Credentials and manager settings never belong here. */
+export type PreviewLockAppearance = {
+  partnerName: string
+  partnerLogoUrl: string | null
+  prospectName: string
+  prospectLogoUrl: string | null
+  backgroundColor: string
+  textColor: string
+  accentColor: string
+  heading: string
+  message: string
+  instructions: string
+}
+export type PreviewLockStatus = {
+  /** Explicit independently verified Canvas proof; never inferred from ordinary open status. */
+  canvasVerified?: boolean
+  state: 'open' | 'locked'
+  protected: boolean
+  appearance?: PreviewLockAppearance
+}
+export const LOCK_PATH = '/u90-preview-lock'
+export const LOCK_ENDPOINT = '/api/u90/preview-lock'
+export const ACCESS_COOKIE = 'u90-preview-access'
+export const HANDOFF_QUERY = 'u90-preview-handoff'
+/** Browser URL parsing semantics, including backslashes and normalised dot segments. */
+export function safeReturnTo(value: string | null | undefined): string {
+  if (!value || value.length > 2048 || !value.startsWith('/')) return '/'
+  try {
+    const url = new URL(value, 'https://u90.invalid')
+    if (
+      url.origin !== 'https://u90.invalid' ||
+      url.pathname.startsWith('//') ||
+      url.pathname === LOCK_PATH ||
+      url.pathname === LOCK_ENDPOINT
+    )
+      return '/'
+    url.searchParams.delete(HANDOFF_QUERY)
+    return url.pathname + url.search + url.hash
+  } catch {
+    return '/'
+  }
+}

package/src/preview-lock/index.ts

@@ -0,0 +1,3 @@
+export { createPreviewLock } from './server'
+export type { PreviewLockOptions, PreviewLockGate } from './server'
+export type { PreviewLockAppearance, PreviewLockStatus } from './contracts'

package/src/preview-lock/screen.tsx

@@ -0,0 +1,244 @@
+'use client'
+
+/* eslint-disable @next/next/no-img-element -- Public branded logos must not require an exempt image-optimisation endpoint. */
+
+import { useEffect, useRef, useState } from 'react'
+import type { CSSProperties, FormEvent, KeyboardEvent } from 'react'
+import { HANDOFF_QUERY, LOCK_ENDPOINT, safeReturnTo } from './contracts'
+import type { PreviewLockAppearance } from './contracts'
+
+export type PreviewLockScreenProps = {
+  appearance: PreviewLockAppearance
+  endpoint?: string
+  returnTo?: string
+  preview?: boolean
+}
+const css = `
+.u90-lock{box-sizing:border-box;position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:64px 24px 30px;background:var(--u90-lock-background);color:var(--u90-lock-text);font-family:Arial,Helvetica,sans-serif;text-align:center;overflow:hidden}
+.u90-lock *{box-sizing:border-box}.u90-lock:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--u90-lock-accent) 8%,transparent),transparent 65%)}
+.u90-lock[data-preview=true]{min-height:560px;height:100%;padding:48px 22px 26px}.u90-lock-content{width:100%;max-width:680px;margin:auto;animation:u90-lock-enter .55s ease-out}
+.u90-lock-brands{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:58px}.u90-lock-brand{display:flex;flex-direction:column;gap:12px;align-items:center;min-width:0;max-width:42%;font-size:15px;font-weight:600;letter-spacing:.02em;overflow-wrap:anywhere}.u90-lock-brand img{max-width:160px;max-height:52px;object-fit:contain}.u90-lock-cross{opacity:.35;font-size:24px;font-weight:300}
+.u90-lock-eyebrow{display:flex;align-items:center;justify-content:center;gap:13px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--u90-lock-accent);margin:0 0 18px}.u90-lock-eyebrow:before,.u90-lock-eyebrow:after{content:"";height:1px;width:27px;background:currentColor;opacity:.6}
+.u90-lock h1{font-size:clamp(30px,5vw,50px);line-height:1.12;letter-spacing:-.045em;font-weight:500;margin:0 auto 22px;max-width:600px;text-wrap:balance}.u90-lock-message{opacity:.75;font-size:16px;line-height:1.7;max-width:440px;margin:0 auto 36px;white-space:pre-line;overflow-wrap:anywhere}
+.u90-lock form{max-width:380px;margin:0 auto}.u90-lock-instructions{display:block;font-size:12px;line-height:1.6;opacity:.8;margin-bottom:16px;white-space:pre-line;overflow-wrap:anywhere}.u90-lock-digits{display:flex;gap:10px;justify-content:center}.u90-lock input{min-width:0;width:50px;height:61px;border:1px solid color-mix(in srgb,var(--u90-lock-text) 25%,transparent);background:color-mix(in srgb,var(--u90-lock-text) 4%,transparent);color:inherit;border-radius:7px;text-align:center;font-size:24px;font-family:inherit;caret-color:var(--u90-lock-accent);outline:none;transition:border-color .15s,background .15s}.u90-lock input:focus{border-color:var(--u90-lock-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--u90-lock-accent) 16%,transparent)}.u90-lock input[aria-invalid=true]{border-color:#e99788}
+.u90-lock button{width:100%;min-height:48px;margin-top:18px;border:0;border-radius:7px;background:var(--u90-lock-accent);color:var(--u90-lock-button-text);font:600 13px Arial,Helvetica,sans-serif;cursor:pointer;transition:opacity .15s}.u90-lock button:focus-visible{outline:2px solid var(--u90-lock-text);outline-offset:4px}.u90-lock button:disabled{cursor:default;opacity:.55}.u90-lock input:disabled{opacity:.6}.u90-lock-status{min-height:40px;margin:14px 0 0;font-size:12px;line-height:1.6}.u90-lock-footer{margin:46px 0 0;font-size:10px;line-height:1.7;letter-spacing:.09em;opacity:.5;text-transform:uppercase;overflow-wrap:anywhere}
+@keyframes u90-lock-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+@media(max-width:420px){.u90-lock{padding:44px 20px 24px}.u90-lock-brands{gap:18px;margin-bottom:44px}.u90-lock-brand{font-size:13px}.u90-lock-brand img{max-width:120px;max-height:42px}.u90-lock h1{font-size:34px}.u90-lock-message{font-size:14px;margin-bottom:30px}.u90-lock-digits{gap:7px}.u90-lock input{width:42px;height:54px}.u90-lock-footer{margin-top:34px}}
+@media(prefers-reduced-motion:reduce){.u90-lock-content{animation:none}.u90-lock input,.u90-lock button{transition:none}}
+`
+const logo = (value: string | null) =>
+  value && (/^https?:\/\//i.test(value) || /^\/(?!\/)/.test(value)) ? value : undefined
+const buttonText = (hex: string) => {
+  const n = hex.replace('#', '')
+  const rgb = [0, 2, 4].map((i) => parseInt(n.slice(i, i + 2), 16))
+  return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000 > 150 ? '#102020' : '#ffffff'
+}
+
+/** Same component in /manage uses preview=true: contained, disabled, no effects or requests. */
+export function PreviewLockScreen({
+  appearance,
+  endpoint = LOCK_ENDPOINT,
+  returnTo = '/',
+  preview = false,
+}: PreviewLockScreenProps) {
+  const [digits, setDigits] = useState(['', '', '', '', '', '']),
+    [pending, setPending] = useState(false),
+    [message, setMessage] = useState(''),
+    [invalid, setInvalid] = useState(false)
+  const inputs = useRef<(HTMLInputElement | null)[]>([]),
+    busy = useRef(false),
+    attempt = useRef<{ code: string; id: string } | null>(null)
+  useEffect(() => {
+    if (!preview) inputs.current[0]?.focus()
+  }, [preview])
+  useEffect(() => {
+    if (invalid && !pending && !preview) inputs.current[0]?.focus()
+  }, [invalid, pending, preview])
+  function update(index: number, value: string) {
+    if (preview || busy.current) return
+    const numbers = value.replace(/\D/g, '').slice(0, 6)
+    setInvalid(false)
+    setMessage('')
+    setDigits((current) => {
+      const next = [...current]
+      if (numbers.length > 1) {
+        next.fill('')
+        numbers.split('').forEach((n, i) => {
+          next[i] = n
+        })
+      } else next[index] = numbers
+      return next
+    })
+    inputs.current[
+      numbers.length > 1 ? Math.min(numbers.length, 6) - 1 : Math.min(index + 1, 5)
+    ]?.focus()
+  }
+  function keyboard(index: number, event: KeyboardEvent<HTMLInputElement>) {
+    if (preview || busy.current) return
+    if (event.key === 'Backspace') {
+      event.preventDefault()
+      const at = digits[index] ? index : Math.max(index - 1, 0)
+      setDigits((current) => current.map((n, i) => (i === at ? '' : n)))
+      inputs.current[at]?.focus()
+      setInvalid(false)
+      setMessage('')
+    }
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.preventDefault()
+      inputs.current[
+        Math.max(0, Math.min(5, index + (event.key === 'ArrowLeft' ? -1 : 1)))
+      ]?.focus()
+    }
+  }
+  async function submit(event: FormEvent) {
+    event.preventDefault()
+    if (preview || busy.current) return
+    const code = digits.join('')
+    if (!/^\d{6}$/.test(code)) {
+      setInvalid(true)
+      setMessage('Enter all six digits to continue.')
+      inputs.current[digits.findIndex((x) => !x)]?.focus()
+      return
+    }
+    if (!attempt.current || attempt.current.code !== code)
+      attempt.current = { code, id: crypto.randomUUID() }
+    busy.current = true
+    setPending(true)
+    setInvalid(false)
+    setMessage('Checking your access code…')
+    const controller = new AbortController(),
+      timeout = setTimeout(() => controller.abort(), 10000)
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        credentials: 'same-origin',
+        cache: 'no-store',
+        signal: controller.signal,
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ code, requestId: attempt.current.id, path: safeReturnTo(returnTo) }),
+      })
+      const result = await response.json()
+      if (response.status === 428) {
+        setMessage(
+          typeof result?.error === 'string'
+            ? result.error.slice(0, 240)
+            : 'Allow cookies for this site, then try again.',
+        )
+        return
+      }
+      if (response.ok && result?.ok === true && typeof result.returnTo === 'string') {
+        setMessage('Welcome. Opening your preview…')
+        window.location.assign(safeReturnTo(result.returnTo))
+        return
+      }
+      if (![400, 401, 429].includes(response.status)) throw Error('Unavailable')
+      attempt.current = null
+      setInvalid(true)
+      setMessage(
+        typeof result?.error === 'string'
+          ? result.error.slice(0, 240)
+          : 'That code was not accepted. Please try again.',
+      )
+      setDigits(['', '', '', '', '', ''])
+      inputs.current[0]?.focus()
+    } catch {
+      setMessage('We couldn’t connect. Check your connection and try again.')
+    } finally {
+      clearTimeout(timeout)
+      busy.current = false
+      setPending(false)
+    }
+  }
+  const style = {
+    '--u90-lock-background': appearance.backgroundColor,
+    '--u90-lock-text': appearance.textColor,
+    '--u90-lock-accent': appearance.accentColor,
+    '--u90-lock-button-text': buttonText(appearance.accentColor),
+  } as CSSProperties
+  return (
+    <section
+      className="u90-lock"
+      data-u90-preview-lock
+      data-preview={preview ? 'true' : 'false'}
+      style={style}
+      aria-label="Private website preview"
+    >
+      <style>{css}</style>
+      <div className="u90-lock-content">
+        <div className="u90-lock-brands">
+          <div className="u90-lock-brand">
+            {logo(appearance.prospectLogoUrl) && (
+              <img src={logo(appearance.prospectLogoUrl)} alt="" referrerPolicy="no-referrer" />
+            )}
+            <span>{appearance.prospectName}</span>
+          </div>
+          <span className="u90-lock-cross" aria-hidden="true">
+            ×
+          </span>
+          <div className="u90-lock-brand">
+            {logo(appearance.partnerLogoUrl) && (
+              <img src={logo(appearance.partnerLogoUrl)} alt="" referrerPolicy="no-referrer" />
+            )}
+            <span>{appearance.partnerName}</span>
+          </div>
+        </div>
+        <p className="u90-lock-eyebrow">A private preview</p>
+        <h1>{appearance.heading}</h1>
+        <p className="u90-lock-message">{appearance.message}</p>
+        <form onSubmit={submit} aria-label="Preview access code">
+          <p id="u90-lock-instructions" className="u90-lock-instructions">
+            {appearance.instructions}
+          </p>
+          <div className="u90-lock-digits">
+            {digits.map((digit, index) => (
+              <input
+                key={index}
+                ref={(element) => {
+                  inputs.current[index] = element
+                }}
+                type="text"
+                inputMode="numeric"
+                autoComplete={index === 0 ? 'one-time-code' : 'off'}
+                maxLength={6}
+                aria-label={`Digit ${index + 1}`}
+                aria-describedby="u90-lock-instructions u90-lock-status"
+                aria-invalid={invalid}
+                value={digit}
+                disabled={preview || pending}
+                onFocus={(event) => event.target.select()}
+                onChange={(event) => update(index, event.target.value)}
+                onKeyDown={(event) => keyboard(index, event)}
+                onPaste={(event) => {
+                  event.preventDefault()
+                  update(index, event.clipboardData.getData('text'))
+                }}
+              />
+            ))}
+          </div>
+          <button type="submit" disabled={preview || pending}>
+            {pending ? 'Checking…' : 'Enter preview'}
+          </button>
+          <p id="u90-lock-status" className="u90-lock-status" role="status" aria-live="polite">
+            {message ||
+              (preview
+                ? 'Appearance preview · access codes are disabled'
+                : 'Access lasts for one hour.')}
+          </p>
+        </form>
+      </div>
+      <p className="u90-lock-footer">Presented &amp; built by {appearance.partnerName}</p>
+    </section>
+  )
+}
+/** Remove the bounded handoff from browser history before onward navigation. */
+export function PreviewHandoffCleanup() {
+  useEffect(() => {
+    const url = new URL(window.location.href)
+    if (url.searchParams.has(HANDOFF_QUERY)) {
+      url.searchParams.delete(HANDOFF_QUERY)
+      window.history.replaceState(window.history.state, '', url.pathname + url.search + url.hash)
+    }
+  }, [])
+  return null
+}
+export type { PreviewLockAppearance }