@startsimpli/ui 0.4.14 → 0.4.15

package/src/components/account/change-password-form.tsx

@@ -11,7 +11,6 @@ export interface ChangePasswordFormProps {
   onSubmit: (values: {
     old_password: string
     new_password: string
-    new_password_confirm: string
   }) => Promise<void>
   /** Called after a successful password change (e.g. to sign out) */
   onSuccess?: () => void
@@ -21,38 +20,27 @@ export interface ChangePasswordFormProps {
 export function ChangePasswordForm({ onSubmit, onSuccess, disabled }: ChangePasswordFormProps) {
   const [oldPassword, setOldPassword] = useState('')
   const [newPassword, setNewPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
   const [saving, setSaving] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [success, setSuccess] = useState(false)
 
-  const isValid =
-    oldPassword.length > 0 &&
-    newPassword.length >= 8 &&
-    newPassword === confirmPassword
+  const isValid = oldPassword.length > 0 && newPassword.length >= 8
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError(null)
     setSuccess(false)
 
-    if (newPassword !== confirmPassword) {
-      setError('New passwords do not match.')
-      return
-    }
-
     setSaving(true)
 
     try {
       await onSubmit({
         old_password: oldPassword,
         new_password: newPassword,
-        new_password_confirm: confirmPassword,
       })
       setSuccess(true)
       setOldPassword('')
       setNewPassword('')
-      setConfirmPassword('')
       onSuccess?.()
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to change password')
@@ -100,21 +88,6 @@ export function ChangePasswordForm({ onSubmit, onSuccess, disabled }: ChangePass
             )}
           </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="cp-confirm-password">Confirm new password</Label>
-            <Input
-              id="cp-confirm-password"
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              disabled={disabled || saving}
-              autoComplete="new-password"
-            />
-            {confirmPassword.length > 0 && newPassword !== confirmPassword && (
-              <p className="text-xs text-destructive">Passwords do not match.</p>
-            )}
-          </div>
-
           {error && (
             <p className="text-sm text-destructive">{error}</p>
           )}

package/src/components/calendar/calendar-view.tsx

@@ -115,6 +115,22 @@ export interface CalendarViewProps<T = unknown> {
   minHeight?: number
   /** className passed to the wrapping div for Tailwind overrides. */
   className?: string
+  /**
+   * Per-event styling. Receives the original CalendarEvent (with resource)
+   * and returns optional className / inline style applied to the rendered
+   * event block. Useful for color-coding by source (e.g. real Outlook event
+   * vs locally-scheduled meeting).
+   */
+  eventPropGetter?: (event: CalendarEvent<T>) => {
+    className?: string
+    style?: React.CSSProperties
+  }
+  /**
+   * When the month grid runs out of vertical space, react-big-calendar
+   * collapses the overflow into a "+N more" link. Set true (default) to
+   * open the day's full event list as a popover when that link is clicked.
+   */
+  popup?: boolean
 }
 
 /**
@@ -150,6 +166,8 @@ export function CalendarView<T = unknown>({
   selectable = true,
   minHeight = 600,
   className,
+  eventPropGetter,
+  popup = true,
 }: CalendarViewProps<T>) {
   const normalized = React.useMemo(() => events.map(normalizeEvent), [events])
 
@@ -196,6 +214,17 @@ export function CalendarView<T = unknown>({
     [views],
   )
 
+  const rbcEventPropGetter = React.useCallback(
+    (rbcEvent: object) => {
+      if (!eventPropGetter) return {}
+      const id = (rbcEvent as InternalRBCEvent).id
+      const original = eventByInternalId.get(id)
+      if (!original) return {}
+      return eventPropGetter(original)
+    },
+    [eventPropGetter, eventByInternalId],
+  )
+
   return (
     <div className={className} style={{ minHeight }}>
       <Calendar
@@ -215,6 +244,8 @@ export function CalendarView<T = unknown>({
         onNavigate={onNavigate}
         onView={handleViewChange}
         selectable={selectable}
+        popup={popup}
+        eventPropGetter={eventPropGetter ? rbcEventPropGetter : undefined}
         style={{ height: "100%", minHeight }}
       />
     </div>

package/src/components/calendar/index.ts

@@ -11,3 +11,10 @@ export type {
   UpcomingMeetingStatus,
   UpcomingMeetingsProps,
 } from "./upcoming-meetings"
+
+export { MeetingsList } from "./meetings-list"
+export type {
+  MeetingsListItem,
+  MeetingsListProps,
+  MeetingsListStatus,
+} from "./meetings-list"

package/src/components/calendar/meetings-list.tsx

@@ -0,0 +1,202 @@
+"use client"
+
+/**
+ * MeetingsList — table-style meeting list with status badges, join links,
+ * and an optional delete action.
+ *
+ * Distinct from UpcomingMeetings (sidebar card-stack); this is the
+ * full-width table-row layout used by /calendar's "All Meetings" section
+ * and /fundraises/[id]/outreach's MeetingsTab (Upcoming + Past lists).
+ *
+ * Pure presentational. The consumer owns sort, filter, fetch, and delete
+ * confirmation.
+ *
+ * lifecycle:calendar-ui (raise-simpli-9cp)
+ */
+
+import * as React from "react"
+import { CalendarDays, ExternalLink, Plus, Trash2 } from "lucide-react"
+import { Button } from "../ui/button"
+import { cn } from "../../utils"
+
+export type MeetingsListStatus = "pending" | "confirmed" | "cancelled" | "completed"
+
+export interface MeetingsListItem {
+  id: string | number
+  title: string
+  /** ISO 8601 timestamp string */
+  scheduled_at: string
+  status: MeetingsListStatus
+  duration_minutes?: number
+  investor_name?: string
+  investor_email?: string
+  meeting_link?: string
+}
+
+export interface MeetingsListProps<T extends MeetingsListItem = MeetingsListItem> {
+  meetings: T[]
+  /** Whether the list is still loading. */
+  loading?: boolean
+  /** Number of skeleton rows to show while loading. Defaults to 4. */
+  loadingRowCount?: number
+  /** If set, each row gets a delete (trash) button that calls this with the id. */
+  onDelete?: (id: string | number) => void
+  /** If set, the whole row becomes clickable. */
+  onRowClick?: (meeting: T) => void
+  /** If set, the empty state shows a "Schedule First Meeting" CTA wired to this. */
+  onSchedule?: () => void
+  /** Empty-state copy. Defaults to "No meetings scheduled yet." */
+  emptyMessage?: string
+  /** className passed to the wrapping div. */
+  className?: string
+}
+
+const STATUS_BADGE: Record<MeetingsListStatus, { label: string; className: string }> = {
+  pending: { label: "Pending", className: "bg-yellow-100 text-yellow-800" },
+  confirmed: { label: "Confirmed", className: "bg-green-100 text-green-800" },
+  cancelled: { label: "Cancelled", className: "bg-red-100 text-red-800" },
+  completed: { label: "Completed", className: "bg-gray-100 text-gray-800" },
+}
+
+function formatDate(isoStr: string): string {
+  return new Date(isoStr).toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  })
+}
+
+function formatTime(isoStr: string): string {
+  return new Date(isoStr).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" })
+}
+
+/**
+ * @example
+ * <MeetingsList
+ *   meetings={meetings}
+ *   loading={loading}
+ *   onDelete={id => deleteMeeting(id)}
+ *   onSchedule={() => setShowSchedule(true)}
+ * />
+ */
+export function MeetingsList<T extends MeetingsListItem = MeetingsListItem>({
+  meetings,
+  loading = false,
+  loadingRowCount = 4,
+  onDelete,
+  onRowClick,
+  onSchedule,
+  emptyMessage = "No meetings scheduled yet.",
+  className,
+}: MeetingsListProps<T>) {
+  if (loading) {
+    return (
+      <div className={cn("p-4 space-y-2", className)}>
+        {Array.from({ length: loadingRowCount }).map((_, i) => (
+          <div key={i} className="h-12 bg-muted animate-pulse rounded" />
+        ))}
+      </div>
+    )
+  }
+
+  if (meetings.length === 0) {
+    return (
+      <div className={cn("text-center py-12 text-muted-foreground", className)}>
+        <CalendarDays className="h-10 w-10 mx-auto mb-3 opacity-40" />
+        <p>{emptyMessage}</p>
+        {onSchedule && (
+          <Button className="mt-3" onClick={onSchedule}>
+            <Plus className="mr-2 h-4 w-4" />
+            Schedule First Meeting
+          </Button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("divide-y", className)}>
+      {meetings.map(m => {
+        const badge = STATUS_BADGE[m.status]
+        const interactive = !!onRowClick
+        return (
+          <div
+            key={m.id}
+            role={interactive ? "button" : undefined}
+            tabIndex={interactive ? 0 : undefined}
+            onClick={interactive ? () => onRowClick(m) : undefined}
+            onKeyDown={
+              interactive
+                ? e => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      onRowClick(m)
+                    }
+                  }
+                : undefined
+            }
+            className={cn(
+              "flex items-center justify-between px-4 py-3 transition-colors",
+              interactive && "hover:bg-muted/50 cursor-pointer",
+              !interactive && "hover:bg-muted/50",
+            )}
+          >
+            <div className="flex items-center gap-4 min-w-0">
+              <div className="min-w-0">
+                <p className="font-medium text-sm truncate">{m.title}</p>
+                {(m.investor_name || m.investor_email) && (
+                  <p className="text-xs text-muted-foreground truncate">
+                    {m.investor_name || m.investor_email}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4 shrink-0 ml-4">
+              <div className="text-right text-xs text-muted-foreground hidden sm:block">
+                <p>{formatDate(m.scheduled_at)}</p>
+                <p>
+                  {formatTime(m.scheduled_at)}
+                  {m.duration_minutes ? ` · ${m.duration_minutes}min` : ""}
+                </p>
+              </div>
+
+              <span className={cn("text-xs px-2 py-0.5 rounded font-medium", badge.className)}>
+                {badge.label}
+              </span>
+
+              {m.meeting_link && (
+                <a
+                  href={m.meeting_link}
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={e => e.stopPropagation()}
+                  className="text-primary"
+                  title="Join meeting"
+                >
+                  <ExternalLink className="h-4 w-4" />
+                </a>
+              )}
+
+              {onDelete && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={e => {
+                    e.stopPropagation()
+                    onDelete(m.id)
+                  }}
+                  className="h-7 w-7 p-0 text-muted-foreground hover:text-red-600"
+                  aria-label="Delete meeting"
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/calendar/upcoming-meetings.tsx

@@ -31,12 +31,12 @@ export interface UpcomingMeeting {
   meeting_link?: string
 }
 
-export interface UpcomingMeetingsProps {
-  meetings: UpcomingMeeting[]
+export interface UpcomingMeetingsProps<T extends UpcomingMeeting = UpcomingMeeting> {
+  meetings: T[]
   /** Whether the list is still loading. Renders skeletons. */
   loading?: boolean
   /** Optional click handler when a meeting row is clicked (whole row). */
-  onMeetingClick?: (meeting: UpcomingMeeting) => void
+  onMeetingClick?: (meeting: T) => void
   /** Optional URL for the "View all" header link. Hidden if absent. */
   viewAllHref?: string
   /** Optional click handler for the "View all" header link. Used instead of href if provided. */
@@ -82,7 +82,7 @@ function formatTime(isoStr: string): string {
  *   onSchedule={() => setShowSchedule(true)}
  * />
  */
-export function UpcomingMeetings({
+export function UpcomingMeetings<T extends UpcomingMeeting = UpcomingMeeting>({
   meetings,
   loading = false,
   onMeetingClick,
@@ -92,7 +92,7 @@ export function UpcomingMeetings({
   className,
   title = "Upcoming Meetings",
   loadingRowCount = 3,
-}: UpcomingMeetingsProps) {
+}: UpcomingMeetingsProps<T>) {
   return (
     <Card className={className}>
       <CardHeader className="pb-3">

package/src/components/chat/ChatComposer.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import * as React from 'react'
+import { SendHorizonal } from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+export interface ChatComposerProps {
+  /** Controlled value. Omit for uncontrolled usage. */
+  value?: string
+  onChange?: (value: string) => void
+  /** Called with the trimmed message text on submit. */
+  onSubmit: (text: string) => void
+  placeholder?: string
+  /** Disables input entirely. */
+  disabled?: boolean
+  /** Submission in flight — input stays editable but submit is blocked. */
+  busy?: boolean
+  submitLabel?: string
+  /** Max rows the textarea grows to before scrolling. Default 10. */
+  maxRows?: number
+  className?: string
+}
+
+/**
+ * Chat input with auto-growing textarea. Enter submits, Shift+Enter inserts a
+ * newline, and large pastes are accepted as-is. Controlled or uncontrolled.
+ */
+export function ChatComposer({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = 'Message…',
+  disabled = false,
+  busy = false,
+  submitLabel = 'Send',
+  maxRows = 10,
+  className,
+}: ChatComposerProps) {
+  const isControlled = value !== undefined
+  const [internal, setInternal] = React.useState('')
+  const text = isControlled ? value! : internal
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+
+  const setText = (next: string) => {
+    if (!isControlled) setInternal(next)
+    onChange?.(next)
+  }
+
+  // auto-grow
+  React.useEffect(() => {
+    const el = textareaRef.current
+    if (!el) return
+    el.style.height = 'auto'
+    const lineHeight = 24
+    el.style.height = `${Math.min(el.scrollHeight, lineHeight * maxRows)}px`
+  }, [text, maxRows])
+
+  const canSubmit = !disabled && !busy && text.trim().length > 0
+
+  const submit = () => {
+    if (!canSubmit) return
+    onSubmit(text.trim())
+    if (!isControlled) setInternal('')
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key !== 'Enter') return
+    // Cmd/Ctrl+Enter always submits (handy for multi-line content).
+    if (e.metaKey || e.ctrlKey) {
+      e.preventDefault()
+      submit()
+      return
+    }
+    if (e.shiftKey) return // explicit newline
+    // Bare Enter submits ONLY single-line content. When the value already
+    // spans multiple lines (e.g. a pasted outline) Enter inserts a newline so
+    // the multi-line block stays intact — submit via the button or Cmd+Enter.
+    if (text.includes('\n')) return
+    e.preventDefault()
+    submit()
+  }
+
+  return (
+    <div className={cn('flex items-end gap-2 border-t border-border bg-background p-3', className)}>
+      <textarea
+        ref={textareaRef}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={1}
+        className={cn(
+          'flex-1 resize-none rounded-lg border border-input bg-background px-3 py-2 text-sm shadow-sm',
+          'placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50'
+        )}
+      />
+      <button
+        type="button"
+        onClick={submit}
+        disabled={!canSubmit}
+        aria-label={submitLabel}
+        className={cn(
+          'inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm transition-opacity',
+          'hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40'
+        )}
+      >
+        <SendHorizonal className="h-4 w-4" aria-hidden="true" />
+      </button>
+    </div>
+  )
+}

package/src/components/chat/ChatMessage.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import * as React from 'react'
+import { Wrench } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import type { ChatMessageData } from './types'
+
+export interface ChatMessageProps {
+  message: ChatMessageData
+  /** Optional custom renderer for the message body (e.g. markdown). */
+  renderContent?: (content: string, message: ChatMessageData) => React.ReactNode
+  className?: string
+}
+
+function StreamingDots() {
+  return (
+    <span className="ml-1 inline-flex gap-0.5 align-middle" aria-hidden="true">
+      <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.3s]" />
+      <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.15s]" />
+      <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-current" />
+    </span>
+  )
+}
+
+/**
+ * A single chat row. Text messages render as aligned bubbles (user right,
+ * assistant left); `tool` / `status` kinds render as compact centered system
+ * rows. Fully generic — no presentation-specific knowledge.
+ */
+export function ChatMessage({ message, renderContent, className }: ChatMessageProps) {
+  const { role, content, status, kind = 'text', toolName } = message
+  const isStreaming = status === 'streaming'
+  const isError = status === 'error'
+
+  if (kind === 'tool' || kind === 'status') {
+    return (
+      <div
+        data-role={role}
+        data-kind={kind}
+        data-status={status}
+        aria-busy={isStreaming || undefined}
+        className={cn(
+          'mx-auto flex max-w-[90%] items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-1.5 text-xs text-muted-foreground',
+          isError && 'border-red-300 bg-red-50 text-red-700',
+          className
+        )}
+      >
+        {kind === 'tool' && <Wrench className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />}
+        {toolName && <span className="font-medium text-foreground">{toolName}</span>}
+        <span className="truncate">{content}</span>
+        {isStreaming && <StreamingDots />}
+      </div>
+    )
+  }
+
+  const isUser = role === 'user'
+  const body = renderContent ? renderContent(content, message) : content
+
+  return (
+    <div
+      data-role={role}
+      data-kind={kind}
+      data-status={status}
+      aria-busy={isStreaming || undefined}
+      className={cn('flex w-full', isUser ? 'justify-end' : 'justify-start', className)}
+    >
+      <div
+        className={cn(
+          'max-w-[85%] whitespace-pre-wrap break-words rounded-2xl px-4 py-2 text-sm shadow-sm',
+          isUser
+            ? 'rounded-br-sm bg-primary text-primary-foreground'
+            : 'rounded-bl-sm bg-muted text-foreground',
+          isError && 'border border-red-300 bg-red-50 text-red-700'
+        )}
+      >
+        {body}
+        {isStreaming && <StreamingDots />}
+      </div>
+    </div>
+  )
+}

package/src/components/chat/ChatThread.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { ChatMessage } from './ChatMessage'
+import type { ChatMessageData } from './types'
+
+export interface ChatThreadProps {
+  messages: ChatMessageData[]
+  /** Rendered when there are no messages. */
+  emptyState?: React.ReactNode
+  /** Custom message renderer; defaults to <ChatMessage>. */
+  renderMessage?: (message: ChatMessageData) => React.ReactNode
+  /** Auto-scroll to the newest message on change. Default true. */
+  autoScroll?: boolean
+  renderContent?: (content: string, message: ChatMessageData) => React.ReactNode
+  className?: string
+}
+
+/**
+ * Scrollable, auto-scrolling list of chat messages. App-agnostic.
+ */
+export function ChatThread({
+  messages,
+  emptyState,
+  renderMessage,
+  autoScroll = true,
+  renderContent,
+  className,
+}: ChatThreadProps) {
+  const anchorRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (autoScroll) anchorRef.current?.scrollIntoView({ block: 'end' })
+  }, [messages, autoScroll])
+
+  if (messages.length === 0 && emptyState) {
+    return (
+      <div className={cn('flex h-full items-center justify-center p-6 text-center', className)}>
+        {emptyState}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex h-full flex-col gap-3 overflow-y-auto p-4', className)} role="log" aria-live="polite">
+      {messages.map((m) =>
+        renderMessage ? (
+          <React.Fragment key={m.id}>{renderMessage(m)}</React.Fragment>
+        ) : (
+          <ChatMessage key={m.id} message={m} renderContent={renderContent} />
+        )
+      )}
+      <div ref={anchorRef} data-testid="chat-thread-anchor" />
+    </div>
+  )
+}

package/src/components/chat/index.ts

@@ -0,0 +1,12 @@
+export { ChatMessage } from './ChatMessage'
+export type { ChatMessageProps } from './ChatMessage'
+export { ChatThread } from './ChatThread'
+export type { ChatThreadProps } from './ChatThread'
+export { ChatComposer } from './ChatComposer'
+export type { ChatComposerProps } from './ChatComposer'
+export type {
+  ChatMessageData,
+  ChatRole,
+  ChatMessageStatus,
+  ChatMessageKind,
+} from './types'

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'