@startsimpli/ui 0.4.57 → 0.4.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.57",
+  "version": "0.4.59",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -22,6 +22,7 @@
     "./email-editor": "./src/components/email-editor/index.ts",
     "./workflows": "./src/components/workflows/index.ts",
     "./workflows/styles": "./src/components/workflows/workflows.css",
+    "./presentations": "./src/components/presentations/index.ts",
     "./terminal/styles": "./src/components/terminal/xterm.css",
     "./session": "./src/components/session/index.ts",
     "./session-console": "./src/components/session/AgentSessionConsole.tsx",
@@ -41,8 +42,8 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/api": "0.5.44",
-    "@startsimpli/auth": "0.4.30"
+    "@startsimpli/auth": "0.4.30",
+    "@startsimpli/api": "0.5.44"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/components/kanban/KanbanBoard.tsx

@@ -155,6 +155,10 @@ export function KanbanBoard<T>({
                               ref={dp.innerRef}
                               {...dp.draggableProps}
                               {...dp.dragHandleProps}
+                              // @hello-pangea/dnd's DraggableStyle isn't assignable to
+                              // the radix-augmented CSSProperties; the spread already
+                              // sets it, this re-asserts the type for consumer tsc.
+                              style={dp.draggableProps.style as React.CSSProperties}
                               className={cn(ds.isDragging && 'opacity-80')}
                             >
                               {renderCard(item)}

package/src/components/presentations/DeckBuilderWorkspace.test.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { DeckBuilderWorkspace } from './DeckBuilderWorkspace'
+import type { DeckBuilder } from './types'
+
+/**
+ * The composer is pure: it renders whatever the injected `builder` exposes and
+ * lights up optional affordances (style chip, reference uploader) only when the
+ * builder declares them. These tests drive it with hand-rolled builders — no app
+ * import — proving the surface is app-agnostic.
+ */
+
+function makeBuilder(overrides: Partial<DeckBuilder> = {}): DeckBuilder {
+  return {
+    deckTitle: '',
+    phase: 'empty',
+    messages: [],
+    slides: [],
+    setActiveId: jest.fn(),
+    sendMessage: jest.fn(),
+    regenerate: jest.fn(),
+    ...overrides,
+  }
+}
+
+function renderWithClient(ui: React.ReactElement) {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+  return render(<QueryClientProvider client={client}>{ui}</QueryClientProvider>)
+}
+
+describe('DeckBuilderWorkspace', () => {
+  it('renders the dual-pane surface from a minimal injected builder', () => {
+    renderWithClient(<DeckBuilderWorkspace builder={makeBuilder()} />)
+
+    // Toolbar shows the placeholder title + the empty-outline hint.
+    expect(screen.getByText('New presentation')).toBeInTheDocument()
+    expect(screen.getByText('Paste an outline to begin')).toBeInTheDocument()
+
+    // Empty deck pane surfaces its empty-state copy.
+    expect(
+      screen.getByText(/Your slides will render here as a live deck/i)
+    ).toBeInTheDocument()
+
+    // Phase-empty composer uses the outline placeholder.
+    expect(
+      screen.getByPlaceholderText(/Paste your outline/i)
+    ).toBeInTheDocument()
+  })
+
+  it('routes composer submissions to builder.sendMessage', () => {
+    const builder = makeBuilder()
+    renderWithClient(<DeckBuilderWorkspace builder={builder} />)
+
+    const textarea = screen.getByPlaceholderText(/Paste your outline/i)
+    // Single-line content submits on bare Enter.
+    fireEvent.change(textarea, { target: { value: 'My deck outline' } })
+    fireEvent.keyDown(textarea, { key: 'Enter' })
+
+    expect(builder.sendMessage).toHaveBeenCalledWith('My deck outline')
+  })
+
+  it('shows the derived-style chip only when the builder provides deckStyle', () => {
+    const { rerender } = renderWithClient(
+      <DeckBuilderWorkspace builder={makeBuilder()} />
+    )
+    expect(screen.queryByTestId('deck-style-chip')).not.toBeInTheDocument()
+
+    const client = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+    rerender(
+      <QueryClientProvider client={client}>
+        <DeckBuilderWorkspace
+          builder={makeBuilder({
+            deckStyle: { theme: 'Modern Professional', source: 'reference' },
+          })}
+        />
+      </QueryClientProvider>
+    )
+    const chip = screen.getByTestId('deck-style-chip')
+    expect(chip).toBeInTheDocument()
+    expect(chip).toHaveTextContent('Modern Professional')
+    // `source: 'reference'` marks it as cloned.
+    expect(chip).toHaveTextContent(/cloned/i)
+  })
+
+  it('wires the reference uploader only when the builder supports attachments', () => {
+    // Demo-style builder: no attachments capability -> no attach affordance.
+    const { unmount } = renderWithClient(
+      <DeckBuilderWorkspace builder={makeBuilder()} />
+    )
+    expect(screen.queryByTestId('chat-attach-input')).not.toBeInTheDocument()
+    unmount()
+
+    // Backend-style builder: supportsAttachments + an injected client -> uploader on.
+    const attachments = {
+      listAttachments: jest.fn().mockResolvedValue([]),
+      uploadAttachment: jest.fn(),
+      deleteAttachment: jest.fn(),
+    }
+    renderWithClient(
+      <DeckBuilderWorkspace
+        builder={makeBuilder({
+          supportsAttachments: true,
+          documentId: 'doc-1',
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          attachments: attachments as any,
+        })}
+      />
+    )
+    expect(screen.getByTestId('chat-attach-input')).toBeInTheDocument()
+  })
+})

package/src/components/presentations/DeckBuilderWorkspace.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import * as React from 'react'
+import Link from 'next/link'
+import { ArrowLeft, Download, FileText, Palette, Presentation, Sparkles } from 'lucide-react'
+import { useQuery } from '@tanstack/react-query'
+import type { Attachment } from '@startsimpli/api'
+import { DualPaneWorkspace } from '../workspace'
+import { ChatThread, ChatComposer } from '../chat'
+import type { ChatMessageData, ChatMessageAttachment } from '../chat/types'
+import { SlideDeckViewer } from '../slide-deck'
+import type { DeckBuilder } from './types'
+
+/**
+ * Reopen display: if no message already carries attachments (the conversation
+ * payload didn't echo them), hang the document's persisted reference attachments
+ * off the earliest user message so they reappear in the chat after reopen.
+ */
+function hydratePriorAttachments(
+  messages: ChatMessageData[],
+  prior: Attachment[] | undefined
+): ChatMessageData[] {
+  if (!prior || prior.length === 0) return messages
+  if (messages.some((m) => m.attachments && m.attachments.length > 0)) return messages
+  const targetIdx = messages.findIndex((m) => m.role === 'user')
+  if (targetIdx === -1) return messages
+  const chips: ChatMessageAttachment[] = prior
+    .filter((a) => a.purpose === 'reference')
+    .map((a) => ({
+      id: a.id,
+      fileUrl: a.fileUrl,
+      filename: a.filename,
+      contentType: a.contentType,
+    }))
+  if (chips.length === 0) return messages
+  return messages.map((m, i) => (i === targetIdx ? { ...m, attachments: chips } : m))
+}
+
+export interface DeckBuilderWorkspaceProps {
+  /** Where the back arrow points. Omit to hide it (e.g. on a public /try page). */
+  backHref?: string
+  /**
+   * The orchestrator to render — injected, never imported here. The consuming
+   * app wires a demo/no-backend engine or the backend workflow-run consumer;
+   * both expose the identical `DeckBuilder` contract. Reference-attachment
+   * support (uploader + reopen hydration) rides on `builder.attachments`.
+   */
+  builder: DeckBuilder
+}
+
+/**
+ * The chat | slides deck-builder page composer. Composed entirely from generic
+ * @startsimpli/ui primitives (`DualPaneWorkspace` + chat + `SlideDeckViewer`)
+ * wired to an injected deck-builder orchestrator.
+ *
+ * Pure + app-agnostic: the orchestrator is a prop (`builder`) so the same
+ * surface can be driven by a demo engine or a backend workflow-run consumer,
+ * and the reference-attachments client rides on the builder — the app renders
+ * this as a thin `<DeckBuilderWorkspace builder={...} />` wrapper.
+ */
+export function DeckBuilderWorkspace({ backHref, builder }: DeckBuilderWorkspaceProps) {
+  const {
+    deckTitle,
+    phase,
+    messages,
+    slides,
+    activeId,
+    pptxUrl,
+    pdfUrl,
+    isWorking,
+    documentId,
+    deckStyle,
+    attachments,
+    setActiveId,
+    sendMessage,
+    regenerate,
+    deleteSlide,
+    moveSlide,
+    insertSlide,
+    editSlide,
+    reorderSlide,
+  } = builder
+
+  // Only a backend-backed engine has a Document for reference uploads to land
+  // on AND an attachments client wired up; a demo engine would strand every file
+  // as a forever-queued chip, so it gets no uploader (attach affordance hidden).
+  const canAttach = builder.supportsAttachments === true && !!attachments
+
+  // A turn is in progress (agent thinking / slides generating). Prefer the
+  // builder's own signal; fall back to slide status for engines that omit it.
+  const busy = isWorking ?? slides.some((s) => s.status === 'generating')
+
+  // Reference attachments are bundled into the shared ChatComposer: pass it the
+  // document-scoped uploader and the composer self-manages upload state (chips,
+  // downscale, retry, remove). Uploads are document-scoped — for a brand-new deck
+  // with no document yet, the composer holds files client-side and flushes them
+  // the moment the first turn creates the document and `documentId` arrives. The
+  // backend agent gathers references off the Document, so we do NOT thread
+  // attachment ids through the turn — landing the upload on `documentId` is enough.
+
+  // Reopen: surface the document's persisted reference attachments. Fetched off
+  // the injected attachments client (mirrors @startsimpli/hooks `useAttachments`
+  // — the surface takes react-query as a peer, so keep the query inline rather
+  // than couple this package to @startsimpli/hooks). Disabled until a real
+  // documentId + client exist. Hydrated onto the earliest user message when the
+  // conversation payload didn't already carry them, so they reappear on reopen.
+  const { data: priorAttachments } = useQuery({
+    queryKey: ['attachments', 'list', documentId ?? ''],
+    queryFn: () => attachments!.listAttachments(documentId!),
+    enabled: !!attachments && !!documentId && documentId !== 'new',
+  })
+  const messagesWithAttachments = React.useMemo(
+    () => hydratePriorAttachments(messages, priorAttachments),
+    [messages, priorAttachments]
+  )
+
+  // Compact display of the deck's derived style: theme + any non-"auto" palette/
+  // font. "auto" is the placeholder default, so it's dropped to avoid noise.
+  // Style values can be anything from a short label ("Modern Professional") to a
+  // multi-sentence prose spec (when cloned from a reference image via vision), so
+  // each bit is hard-truncated to a glanceable phrase and the chip is width-
+  // capped + single-line — the full spec lives in the hover title.
+  const shortBit = (v: string) => {
+    const firstPhrase = v.split(/[.;,—]/)[0].trim()
+    const s = (firstPhrase || v).trim()
+    return s.length > 28 ? `${s.slice(0, 28).trimEnd()}…` : s
+  }
+  const rawBits = deckStyle
+    ? [deckStyle.theme, deckStyle.palette, deckStyle.font]
+        .filter((v): v is string => !!v && v !== 'auto')
+        .filter((v, i, a) => a.indexOf(v) === i)
+    : []
+  const styleLabel = rawBits.map(shortBit).join(' · ')
+  const styleTitle = [deckStyle?.theme, deckStyle?.palette, deckStyle?.font, deckStyle?.mood]
+    .filter((v): v is string => !!v && v !== 'auto')
+    .join('\n\n')
+  const styleChip = deckStyle && (rawBits.length > 0 || deckStyle.source === 'reference') && (
+    <div
+      className="hidden max-w-[280px] items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-gray-600 sm:inline-flex"
+      data-testid="deck-style-chip"
+      title={styleTitle || 'Deck style'}
+    >
+      {deckStyle.source === 'reference' ? (
+        <Sparkles className="h-3.5 w-3.5 shrink-0 text-primary-600" aria-hidden="true" />
+      ) : (
+        <Palette className="h-3.5 w-3.5 shrink-0 text-gray-400" aria-hidden="true" />
+      )}
+      <span className="truncate font-medium capitalize">{styleLabel || 'Custom style'}</span>
+      {deckStyle.source === 'reference' && (
+        <span className="shrink-0 text-primary-600">· cloned</span>
+      )}
+    </div>
+  )
+
+  const toolbar = (
+    <div className="flex items-center justify-between gap-3 bg-white px-4 py-2">
+      <div className="flex items-center gap-3">
+        {backHref && (
+          <Link
+            href={backHref}
+            className="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
+            aria-label="Back"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        )}
+        <Presentation className="h-5 w-5 text-primary-600" aria-hidden="true" />
+        <div className="leading-tight">
+          <div className="text-sm font-semibold text-gray-900">{deckTitle || 'New presentation'}</div>
+          <div className="text-xs text-gray-400">
+            {slides.length > 0 ? `${slides.length} slides · ${phase}` : 'Paste an outline to begin'}
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        {styleChip}
+        {pptxUrl && (
+          <a
+            href={pptxUrl}
+            download={`${deckTitle || 'deck'}.pptx.txt`}
+            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"
+          >
+            <Download className="h-3.5 w-3.5" /> PPTX
+          </a>
+        )}
+        {pdfUrl && (
+          <a
+            href={pdfUrl}
+            download={`${deckTitle || 'deck'}.pdf.txt`}
+            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"
+          >
+            <FileText className="h-3.5 w-3.5" /> PDF
+          </a>
+        )}
+      </div>
+    </div>
+  )
+
+  const chat = (
+    <div className="flex h-full min-h-0 flex-col bg-white">
+      <ChatThread
+        messages={messagesWithAttachments}
+        busy={busy}
+        busyLabel="Working on your deck…"
+        className="flex-1"
+        emptyState={<span className="text-sm text-gray-400">Your conversation will appear here.</span>}
+      />
+      <ChatComposer
+        onSubmit={sendMessage}
+        busy={busy}
+        uploader={canAttach ? attachments : undefined}
+        documentId={documentId}
+        placeholder={
+          phase === 'empty'
+            ? 'Paste your outline (title on line 1, then slides)…'
+            : 'Reply — “looks good”, “redo slide 2 …”, “compile”…'
+        }
+      />
+    </div>
+  )
+
+  const deck = (
+    <SlideDeckViewer
+      slides={slides}
+      activeId={activeId}
+      onActiveChange={setActiveId}
+      onRegenerate={regenerate}
+      onDelete={deleteSlide}
+      onMove={moveSlide}
+      onInsert={insertSlide}
+      onEdit={editSlide}
+      onReorder={reorderSlide}
+      emptyState={
+        <div className="max-w-sm">
+          <Presentation className="mx-auto mb-3 h-10 w-10 text-gray-300" aria-hidden="true" />
+          <p className="text-sm text-gray-500">
+            Your slides will render here as a live deck — paste an outline in the chat to start.
+          </p>
+        </div>
+      }
+    />
+  )
+
+  return (
+    <DualPaneWorkspace
+      toolbar={toolbar}
+      leftLabel="Chat"
+      rightLabel="Slides"
+      left={chat}
+      right={deck}
+      collapsible
+      initialLeftSize={38}
+      storageKey="present-web:builder-split"
+      className="h-full"
+    />
+  )
+}

package/src/components/presentations/index.ts

@@ -0,0 +1,13 @@
+/**
+ * @startsimpli/ui/presentations — the deck-builder page composer.
+ *
+ * A dual-pane (chat | live slide deck) surface composed entirely from generic
+ * @startsimpli/ui primitives and driven by an injected orchestrator that
+ * satisfies the `DeckBuilder` contract. Isolated behind a dedicated subpath so
+ * consumers that don't build presentations don't pull it in (mirrors gantt /
+ * workflows / collection).
+ */
+
+export { DeckBuilderWorkspace } from './DeckBuilderWorkspace'
+export type { DeckBuilderWorkspaceProps } from './DeckBuilderWorkspace'
+export type { DeckBuilder, DeckStyle, DeckBuilderPhase } from './types'

package/src/components/presentations/types.ts

@@ -0,0 +1,82 @@
+import type { AttachmentsApi } from '@startsimpli/api'
+import type { ChatMessageData } from '../chat/types'
+import type { SlideData } from '../slide-deck/types'
+
+/**
+ * @startsimpli/ui/presentations — the deck-builder page composer contract.
+ *
+ * `DeckBuilder` is the pure view-model interface the `DeckBuilderWorkspace`
+ * composer consumes. It is deliberately engine-agnostic: any orchestrator that
+ * satisfies this shape (a demo/no-backend engine, or the backend workflow-run
+ * consumer) can drive the same dual-pane surface. The concrete orchestrators
+ * live in the consuming app (present-web); this package owns only the surface +
+ * the contract it renders against.
+ */
+
+export type DeckBuilderPhase = 'empty' | 'review_first' | 'walking' | 'ready'
+
+/**
+ * The deck's ONE derived style spec, surfaced for display on the toolbar
+ * (theme/palette/font/mood). `source: 'reference'` marks a style cloned from an
+ * uploaded reference image (the design-cloning path). Display-only — the
+ * orchestrator owns styling.
+ */
+export interface DeckStyle {
+  theme?: string
+  palette?: string
+  font?: string
+  mood?: string
+  source?: string
+}
+
+/**
+ * The orchestrator contract driving the dual-pane deck builder. Required fields
+ * are what every engine must provide; the rest are optional capabilities the
+ * surface lights up when present (per-slide actions, export urls, reference
+ * attachments, a derived style chip).
+ */
+export interface DeckBuilder {
+  deckTitle: string
+  phase: DeckBuilderPhase
+  messages: ChatMessageData[]
+  slides: SlideData[]
+  activeId?: string
+  pptxUrl?: string
+  pdfUrl?: string
+  /** True while a turn is being processed (agent thinking / slides generating). */
+  isWorking?: boolean
+  /** The backend-derived style spec, surfaced for a compact toolbar chip. */
+  deckStyle?: DeckStyle
+  /**
+   * True when this engine has a real backend document that reference uploads can
+   * land on. A local/demo engine omits it, so the composer suppresses the attach
+   * affordance and never strands a file as a forever-queued chip.
+   */
+  supportsAttachments?: boolean
+  /**
+   * The active document id (the deck being edited), once one exists. Drives
+   * document-scoped reference-attachment uploads + reopen hydration. Undefined
+   * for a brand-new deck until the first turn creates it, and for a demo engine.
+   */
+  documentId?: string
+  /**
+   * Reference-attachments client (e.g. `@startsimpli/api` `api.attachments`).
+   * Ride it on the builder so the composer stays a `{ builder }`-only surface:
+   * the composer wires it as the chat composer's uploader and reads persisted
+   * references off it on reopen. Omit on engines without a backend document.
+   */
+  attachments?: AttachmentsApi
+  setActiveId: (id: string) => void
+  sendMessage: (text: string) => void
+  regenerate: (slide: SlideData) => void
+  /** Delete a slide (dispatched as an agent turn). Optional — demo engine omits it. */
+  deleteSlide?: (slide: SlideData) => void
+  /** Move a slide one position left/right (dispatched as an agent turn). Optional. */
+  moveSlide?: (slide: SlideData, direction: 'left' | 'right') => void
+  /** Insert a blank slide after the given slide (dispatched as an agent turn). Optional. */
+  insertSlide?: (afterSlide: SlideData) => void
+  /** Edit a slide's title/content then regenerate it (dispatched as an agent turn). Optional. */
+  editSlide?: (slide: SlideData, edits: { title?: string; content?: string }) => void
+  /** Drag-reorder: move the slide at fromIndex to toIndex (0-based; agent turn). Optional. */
+  reorderSlide?: (fromIndex: number, toIndex: number) => void
+}

package/src/theme/tailwind.preset.ts

@@ -3,7 +3,7 @@ import type { Config } from 'tailwindcss'
 // Presets intentionally omit `content` — each consuming app supplies its own.
 // tailwindcss exposes PresetsConfig = Partial<Config> for this purpose.
 const preset: Partial<Config> = {
-  darkMode: ['class'],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {