@startsimpli/ui 0.4.13 → 0.4.15

package/src/components/chat/types.ts

@@ -0,0 +1,20 @@
+export type ChatRole = 'user' | 'assistant' | 'system' | 'tool'
+
+export type ChatMessageStatus = 'streaming' | 'complete' | 'error'
+
+export type ChatMessageKind = 'text' | 'tool' | 'status'
+
+export interface ChatMessageData {
+  id: string
+  role: ChatRole
+  content: string
+  /** Display name for the author (defaults derived from role). */
+  author?: string
+  timestamp?: string | number | Date
+  /** `streaming` shows a live indicator; `error` styles the bubble as failed. */
+  status?: ChatMessageStatus
+  /** `tool`/`status` render as compact system rows rather than chat bubbles. */
+  kind?: ChatMessageKind
+  /** Name of the tool when kind === 'tool'. */
+  toolName?: string
+}

package/src/components/index.ts

@@ -53,6 +53,15 @@ export * from './unified-table/utils'
 // Export Navigation
 export * from './navigation/sidebar'
 
+// Workspace layout primitives (SplitPane, DualPaneWorkspace) — generic two-pane shell
+export * from './workspace'
+
+// Chat surface primitives (ChatThread, ChatMessage, ChatComposer)
+export * from './chat'
+
+// Slide-deck viewer (Google-Slides-style canvas + filmstrip)
+export * from './slide-deck'
+
 // HTML rendering with XSS protection
 export { SafeHtml } from './safe-html'
 
@@ -101,6 +110,10 @@ export * from './command-palette'
 // Settings components (SettingsLayout, SettingsNav, SettingsCard)
 export * from './settings'
 
+// Team management (startsim-o7s) — MembersTable, InviteMemberDialog, RoleSelector,
+// PendingInvitationCallout, DomainClaimCard, LeaveTeamDialog, OrgSwitcher.
+export * from './team'
+
 // Kanban board layout
 export * from './kanban'
 
@@ -110,6 +123,9 @@ export * from './lists'
 // Pipeline components (StageTransitionModal)
 export * from './pipeline'
 
+// Calendar (month/week/day event grid wrapping react-big-calendar)
+export * from './calendar'
+
 // Activity components (timeline, quick log, log dialog)
 export { ActivityTimeline } from './ActivityTimeline'
 export type { ActivityTimelineProps, ActivityTimelineItem } from './ActivityTimeline'

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>
+  )
+}