@startsimpli/ui 0.4.14 → 0.4.15

package/src/components/slide-deck/SlideCanvas.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import * as React from 'react'
+import { ImageOff, Loader2, RefreshCw } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import type { SlideData } from './types'
+
+export interface SlideCanvasProps {
+  slide: SlideData
+  /** Retry/regenerate handler shown in the error state. */
+  onRetry?: () => void
+  /** Render structured slides (future); falls back to content text for now. */
+  renderStructured?: (slide: SlideData) => React.ReactNode
+  className?: string
+}
+
+/**
+ * Renders a single slide at a fixed 16:9 aspect ratio. Image render mode shows
+ * the generated full-bleed image with loading / error states; structured mode
+ * delegates to `renderStructured`. App-agnostic.
+ */
+export function SlideCanvas({ slide, onRetry, renderStructured, className }: SlideCanvasProps) {
+  const status = slide.status ?? (slide.imageUrl ? 'ready' : 'pending')
+  const mode = slide.renderMode ?? 'image'
+
+  return (
+    <div
+      className={cn(
+        'relative mx-auto aspect-video w-full max-w-5xl overflow-hidden rounded-lg border border-border bg-white shadow-sm',
+        className
+      )}
+      data-status={status}
+      aria-busy={status === 'generating' || undefined}
+    >
+      {mode === 'structured' && renderStructured ? (
+        renderStructured(slide)
+      ) : status === 'ready' && slide.imageUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={slide.imageUrl}
+          alt={slide.alt ?? slide.title ?? `Slide ${slide.slideNumber}`}
+          className="h-full w-full object-contain"
+        />
+      ) : status === 'error' ? (
+        <div className="flex h-full w-full flex-col items-center justify-center gap-3 text-muted-foreground">
+          <ImageOff className="h-8 w-8" aria-hidden="true" />
+          <p className="text-sm">This slide failed to generate.</p>
+          {onRetry && (
+            <button
+              type="button"
+              onClick={onRetry}
+              className="inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm hover:bg-accent"
+            >
+              <RefreshCw className="h-3.5 w-3.5" aria-hidden="true" /> Retry
+            </button>
+          )}
+        </div>
+      ) : (
+        <div className="flex h-full w-full flex-col items-center justify-center gap-3 text-muted-foreground">
+          <Loader2 className={cn('h-8 w-8', status === 'generating' && 'animate-spin')} aria-hidden="true" />
+          <p className="text-sm">
+            {status === 'generating' ? `Generating slide ${slide.slideNumber}…` : 'Waiting to generate…'}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/slide-deck/SlideDeckViewer.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { SlideCanvas } from './SlideCanvas'
+import { SlideFilmstrip } from './SlideFilmstrip'
+import type { SlideData } from './types'
+
+export interface SlideDeckViewerProps {
+  slides: SlideData[]
+  /** Controlled active slide id. Omit for uncontrolled (defaults to first). */
+  activeId?: string
+  onActiveChange?: (id: string) => void
+  /** Regenerate the currently-active slide. */
+  onRegenerate?: (slide: SlideData) => void
+  emptyState?: React.ReactNode
+  /** Extra actions rendered in the stage toolbar (e.g. approve / edit). */
+  toolbarActions?: (slide: SlideData) => React.ReactNode
+  renderStructured?: (slide: SlideData) => React.ReactNode
+  className?: string
+}
+
+/**
+ * Google-Slides-style deck viewer: a large active-slide stage with prev/next +
+ * regenerate controls, a position indicator, and a thumbnail filmstrip.
+ * Keyboard arrows navigate. App-agnostic — `present-web` supplies the slides.
+ */
+export function SlideDeckViewer({
+  slides,
+  activeId,
+  onActiveChange,
+  onRegenerate,
+  emptyState,
+  toolbarActions,
+  renderStructured,
+  className,
+}: SlideDeckViewerProps) {
+  const isControlled = activeId !== undefined
+  const [internalId, setInternalId] = React.useState<string | undefined>(slides[0]?.id)
+
+  const currentId = isControlled ? activeId : internalId
+  const index = Math.max(0, slides.findIndex((s) => s.id === currentId))
+  const active = slides[index]
+
+  const goTo = React.useCallback(
+    (i: number) => {
+      const clamped = Math.min(slides.length - 1, Math.max(0, i))
+      const next = slides[clamped]
+      if (!next) return
+      if (!isControlled) setInternalId(next.id)
+      onActiveChange?.(next.id)
+    },
+    [slides, isControlled, onActiveChange]
+  )
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      goTo(index + 1)
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      goTo(index - 1)
+    }
+  }
+
+  if (slides.length === 0) {
+    return (
+      <div className={cn('flex h-full items-center justify-center p-6 text-center text-muted-foreground', className)}>
+        {emptyState ?? 'No slides yet.'}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex h-full min-h-0 flex-col bg-muted/20', className)}>
+      {/* Stage toolbar */}
+      <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border bg-background/60 px-3 py-2">
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={() => goTo(index - 1)}
+            disabled={index === 0}
+            aria-label="Previous slide"
+            className="rounded p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30"
+          >
+            <ChevronLeft className="h-4 w-4" aria-hidden="true" />
+          </button>
+          <span className="min-w-14 text-center text-sm font-medium tabular-nums">
+            {index + 1} / {slides.length}
+          </span>
+          <button
+            type="button"
+            onClick={() => goTo(index + 1)}
+            disabled={index === slides.length - 1}
+            aria-label="Next slide"
+            className="rounded p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30"
+          >
+            <ChevronRight className="h-4 w-4" aria-hidden="true" />
+          </button>
+        </div>
+        <div className="flex items-center gap-2">
+          {active && toolbarActions?.(active)}
+          {onRegenerate && active && (
+            <button
+              type="button"
+              onClick={() => onRegenerate(active)}
+              className="inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-sm hover:bg-accent"
+            >
+              <RefreshCw className="h-3.5 w-3.5" aria-hidden="true" /> Regenerate
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Stage */}
+      <div
+        className="flex min-h-0 flex-1 items-center justify-center p-4 focus:outline-none"
+        data-testid="slide-deck-stage"
+        tabIndex={0}
+        role="group"
+        aria-label={`Slide ${index + 1} of ${slides.length}`}
+        onKeyDown={onKeyDown}
+      >
+        {active && (
+          <SlideCanvas
+            slide={active}
+            onRetry={onRegenerate ? () => onRegenerate(active) : undefined}
+            renderStructured={renderStructured}
+          />
+        )}
+      </div>
+
+      {/* Filmstrip */}
+      <div className="shrink-0 border-t border-border bg-background/60">
+        <SlideFilmstrip
+          slides={slides}
+          activeId={currentId}
+          onSelect={(id) => goTo(slides.findIndex((s) => s.id === id))}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/slide-deck/SlideFilmstrip.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import * as React from 'react'
+import { Loader2 } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import type { SlideData } from './types'
+
+export interface SlideFilmstripProps {
+  slides: SlideData[]
+  activeId?: string
+  onSelect: (id: string) => void
+  /** `horizontal` (default) for a bottom strip, `vertical` for a side rail. */
+  orientation?: 'horizontal' | 'vertical'
+  className?: string
+}
+
+/**
+ * Scrollable strip of slide thumbnails. Highlights the active slide and emits
+ * its id on click. App-agnostic.
+ */
+export function SlideFilmstrip({
+  slides,
+  activeId,
+  onSelect,
+  orientation = 'horizontal',
+  className,
+}: SlideFilmstripProps) {
+  return (
+    <div
+      className={cn(
+        'flex gap-2 overflow-auto p-2',
+        orientation === 'horizontal' ? 'flex-row' : 'flex-col',
+        className
+      )}
+      role="group"
+      aria-label="Slides"
+    >
+      {slides.map((slide) => {
+        const active = slide.id === activeId
+        const status = slide.status ?? (slide.imageUrl ? 'ready' : 'pending')
+        return (
+          <button
+            key={slide.id}
+            type="button"
+            aria-current={active ? 'true' : undefined}
+            aria-label={`Slide ${slide.slideNumber}${slide.title ? `: ${slide.title}` : ''}`}
+            onClick={() => onSelect(slide.id)}
+            className={cn(
+              'group relative aspect-video w-28 shrink-0 overflow-hidden rounded-md border bg-white text-left transition-all',
+              active ? 'border-primary ring-2 ring-primary' : 'border-border hover:border-primary/50'
+            )}
+          >
+            <span className="absolute left-1 top-1 z-10 rounded bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-white">
+              {slide.slideNumber}
+            </span>
+            {status === 'ready' && slide.imageUrl ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={slide.imageUrl}
+                alt={slide.title ?? `Slide ${slide.slideNumber}`}
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <div className="flex h-full w-full items-center justify-center bg-muted text-muted-foreground">
+                <Loader2 className={cn('h-4 w-4', status === 'generating' && 'animate-spin')} aria-hidden="true" />
+              </div>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/slide-deck/index.ts

@@ -0,0 +1,7 @@
+export { SlideCanvas } from './SlideCanvas'
+export type { SlideCanvasProps } from './SlideCanvas'
+export { SlideFilmstrip } from './SlideFilmstrip'
+export type { SlideFilmstripProps } from './SlideFilmstrip'
+export { SlideDeckViewer } from './SlideDeckViewer'
+export type { SlideDeckViewerProps } from './SlideDeckViewer'
+export type { SlideData, SlideStatus, SlideRenderMode } from './types'

package/src/components/slide-deck/types.ts

@@ -0,0 +1,18 @@
+export type SlideStatus = 'pending' | 'generating' | 'ready' | 'error'
+
+export type SlideRenderMode = 'image' | 'structured'
+
+export interface SlideData {
+  id: string
+  slideNumber: number
+  title?: string
+  /** Raw text content / outline for this slide. */
+  content?: string
+  /** Full-bleed image URL (image render mode). */
+  imageUrl?: string
+  /** Alt text for the slide image. */
+  alt?: string
+  status?: SlideStatus
+  /** `image` (default) renders the generated image; `structured` renders blocks. */
+  renderMode?: SlideRenderMode
+}

package/src/components/team/DomainClaimCard.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+/**
+ * DomainClaimCard — renders one EmailDomainClaim row + drives the two
+ * verification paths (DNS TXT + email attestation).
+ *
+ * The card never knows the API directly — apps supply onVerifyDns /
+ * onVerifyEmail / onRevoke callbacks that typically wrap
+ * api.domainClaims.*. The verificationToken (creator-only, single-show) is
+ * rendered when present, with copy-to-clipboard help text. startsim-o7s.
+ */
+
+import * as React from 'react'
+import type { DomainClaimLite } from './types'
+import {
+  DOMAIN_CLAIM_DEFAULTS,
+  type DomainClaimCardClassNames,
+} from './domain-claim-card-default-class-names'
+
+export interface DomainClaimCardProps {
+  claim: DomainClaimLite
+  onVerifyDns?: (claim: DomainClaimLite) => Promise<void> | void
+  onInitiateEmail?: (claim: DomainClaimLite) => Promise<void> | void
+  onVerifyEmail?: (claim: DomainClaimLite, code: string) => Promise<void> | void
+  onRevoke?: (claim: DomainClaimLite) => Promise<void> | void
+  classNames?: DomainClaimCardClassNames
+  /** Override the DNS-record name hint shown to the user. */
+  dnsRecordName?: string
+}
+
+export function DomainClaimCard({
+  claim,
+  onVerifyDns,
+  onInitiateEmail,
+  onVerifyEmail,
+  onRevoke,
+  classNames,
+  dnsRecordName,
+}: DomainClaimCardProps) {
+  const cls = { ...DOMAIN_CLAIM_DEFAULTS, ...(classNames ?? {}) }
+  const [busy, setBusy] = React.useState<'dns' | 'email-initiate' | 'email-code' | 'revoke' | null>(null)
+  const [error, setError] = React.useState('')
+  const [emailCode, setEmailCode] = React.useState('')
+  const [emailInitiated, setEmailInitiated] = React.useState(false)
+
+  function recordName() {
+    return dnsRecordName ?? `_startsim-verify.${claim.domain}`
+  }
+
+  async function run<T>(label: typeof busy, fn: () => Promise<T> | T) {
+    setError('')
+    setBusy(label)
+    try {
+      await fn()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Verification failed')
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  return (
+    <article className={cls.root}>
+      <div className={cls.header}>
+        <span className={cls.domain}>{claim.domain}</span>
+        <span
+          className={[
+            cls.statusBadge,
+            claim.verified ? cls.statusVerified : cls.statusUnverified,
+          ].join(' ')}
+        >
+          {claim.verified ? 'Verified' : 'Pending verification'}
+        </span>
+      </div>
+
+      {!claim.verified && (
+        <div className={cls.body}>
+          {claim.verificationToken && (
+            <div>
+              <p className={cls.sectionLabel}>DNS TXT verification</p>
+              <p className={cls.helpText}>
+                Add a TXT record at{' '}
+                <code>{recordName()}</code> with this value, then click
+                &quot;Verify DNS&quot;.
+              </p>
+              <div className={cls.tokenRow}>
+                <code className={cls.tokenCode}>{claim.verificationToken}</code>
+              </div>
+            </div>
+          )}
+
+          <div>
+            <p className={cls.sectionLabel}>Email attestation</p>
+            <p className={cls.helpText}>
+              We&apos;ll email <code>postmaster@{claim.domain}</code> a 6-digit
+              code. Anyone at that mailbox can confirm the claim.
+            </p>
+            {emailInitiated && (
+              <div className={cls.tokenRow}>
+                <input
+                  type="text"
+                  inputMode="numeric"
+                  maxLength={6}
+                  value={emailCode}
+                  onChange={(e) => setEmailCode(e.target.value.replace(/\D/g, ''))}
+                  placeholder="123456"
+                  aria-label="Attestation code"
+                  className={cls.codeInput}
+                />
+                <button
+                  type="button"
+                  className={cls.primaryButton}
+                  disabled={busy !== null || emailCode.length < 6}
+                  onClick={() =>
+                    run('email-code', async () => {
+                      await onVerifyEmail?.(claim, emailCode)
+                      setEmailCode('')
+                    })
+                  }
+                >
+                  {busy === 'email-code' ? 'Verifying…' : 'Submit code'}
+                </button>
+              </div>
+            )}
+          </div>
+
+          {error && <p className={cls.errorText} role="alert">{error}</p>}
+        </div>
+      )}
+
+      <div className={cls.actions}>
+        {!claim.verified && (
+          <>
+            <button
+              type="button"
+              className={cls.primaryButton}
+              disabled={busy !== null}
+              onClick={() => run('dns', () => onVerifyDns?.(claim))}
+            >
+              {busy === 'dns' ? 'Checking…' : 'Verify DNS'}
+            </button>
+            <button
+              type="button"
+              className={cls.secondaryButton}
+              disabled={busy !== null}
+              onClick={() =>
+                run('email-initiate', async () => {
+                  await onInitiateEmail?.(claim)
+                  setEmailInitiated(true)
+                })
+              }
+            >
+              {busy === 'email-initiate' ? 'Sending…' : 'Email attestation'}
+            </button>
+          </>
+        )}
+        {onRevoke && (
+          <button
+            type="button"
+            className={cls.revokeButton}
+            disabled={busy !== null}
+            onClick={() => run('revoke', () => onRevoke(claim))}
+          >
+            {busy === 'revoke' ? 'Revoking…' : 'Revoke'}
+          </button>
+        )}
+      </div>
+    </article>
+  )
+}

package/src/components/team/InviteMemberDialog.tsx

@@ -0,0 +1,182 @@
+'use client'
+
+/**
+ * InviteMemberDialog — collects email + role, calls the supplied submit
+ * handler (defaults to a no-op so the caller MUST wire it; in practice the
+ * caller passes api.teamInvitations.create or useInvitations().bulkInvite).
+ *
+ * Self-contained modal — uses a fixed overlay, doesn't pull Radix Dialog,
+ * so the test harness can render the open state straightforwardly. startsim-o7s.
+ */
+
+import * as React from 'react'
+import { RoleSelector } from './RoleSelector'
+import type { InvitationLite, TeamRole } from './types'
+import {
+  INVITE_DIALOG_DEFAULTS,
+  type InviteMemberDialogClassNames,
+} from './invite-member-dialog-default-class-names'
+
+export interface InviteMemberDialogProps {
+  /** Team the invitation will be scoped to. */
+  teamId: string
+  /**
+   * Submit hook. When undefined the dialog won't send anything — useful for
+   * Storybook-style harnesses. Apps typically pass
+   *   (input) => api.teamInvitations.create(input)
+   */
+  onSubmit?: (input: { email: string; teamId: string; role: TeamRole }) => Promise<InvitationLite | void>
+  /** Notification when an invitation has been created. */
+  onInvited?: (invitation: InvitationLite | void) => void
+  /** Trigger button label. */
+  triggerLabel?: string
+  /** Title in the modal header. */
+  title?: string
+  /** Default role pre-selected. */
+  defaultRole?: TeamRole
+  /** Available roles in the dropdown. Defaults to admin/member/viewer (no owner). */
+  availableRoles?: TeamRole[]
+  classNames?: InviteMemberDialogClassNames
+  /** External open-state control. When omitted the trigger button manages it. */
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function InviteMemberDialog({
+  teamId,
+  onSubmit,
+  onInvited,
+  triggerLabel = 'Invite member',
+  title = 'Invite a teammate',
+  defaultRole = 'member',
+  availableRoles = ['admin', 'member', 'viewer'],
+  classNames,
+  open: controlledOpen,
+  onOpenChange,
+}: InviteMemberDialogProps) {
+  const cls = { ...INVITE_DIALOG_DEFAULTS, ...(classNames ?? {}) }
+  const [internalOpen, setInternalOpen] = React.useState(false)
+  const open = controlledOpen ?? internalOpen
+  const setOpen = (next: boolean) => {
+    if (controlledOpen === undefined) setInternalOpen(next)
+    onOpenChange?.(next)
+  }
+
+  const [email, setEmail] = React.useState('')
+  const [role, setRole] = React.useState<TeamRole>(defaultRole)
+  const [error, setError] = React.useState('')
+  const [success, setSuccess] = React.useState('')
+  const [submitting, setSubmitting] = React.useState(false)
+
+  function reset() {
+    setEmail('')
+    setRole(defaultRole)
+    setError('')
+    setSuccess('')
+    setSubmitting(false)
+  }
+
+  function close() {
+    setOpen(false)
+    reset()
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    setSuccess('')
+    if (!email.trim()) {
+      setError('Email is required')
+      return
+    }
+    setSubmitting(true)
+    try {
+      let invited: InvitationLite | void = undefined
+      if (onSubmit) {
+        invited = await onSubmit({ email: email.trim(), teamId, role })
+      }
+      setSuccess(`Invitation sent to ${email.trim()}`)
+      setEmail('')
+      onInvited?.(invited)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not send invitation')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className={cls.trigger}
+        onClick={() => setOpen(true)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+      >
+        {triggerLabel}
+      </button>
+      {open && (
+        <div className={cls.overlay} role="presentation" onClick={close}>
+          <div
+            className={cls.panel}
+            role="dialog"
+            aria-modal="true"
+            aria-label={title}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className={cls.header}>
+              <h2 className={cls.title}>{title}</h2>
+            </div>
+            <form onSubmit={handleSubmit}>
+              <div className={cls.body}>
+                <div className={cls.fieldRow}>
+                  <label htmlFor="invite-email" className={cls.label}>Email</label>
+                  <input
+                    id="invite-email"
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    autoComplete="email"
+                    className={cls.input}
+                    disabled={submitting}
+                  />
+                </div>
+                <div className={cls.fieldRow}>
+                  <label htmlFor="invite-role" className={cls.label}>Role</label>
+                  <RoleSelector
+                    value={role}
+                    onChange={setRole}
+                    availableRoles={availableRoles}
+                    ariaLabel="Invite role"
+                    disabled={submitting}
+                  />
+                </div>
+                {error && <p className={cls.errorText} role="alert">{error}</p>}
+                {success && <p className={cls.successText}>{success}</p>}
+              </div>
+              <div className={cls.footer}>
+                <button
+                  type="button"
+                  className={cls.cancelButton}
+                  onClick={close}
+                  disabled={submitting}
+                >
+                  Close
+                </button>
+                <button
+                  type="submit"
+                  className={cls.submitButton}
+                  disabled={submitting}
+                >
+                  {submitting ? 'Sending…' : 'Send invitation'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}