@puredesktop/puredesktop-ui-bridge 2.1.6 → 2.1.8

package/src/components/common/documents/DocumentSwitcher.tsx

@@ -0,0 +1,1176 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react'
+import { styled } from 'styled-components'
+import {
+  Boxes,
+  Clock,
+  FileStack,
+  FileUp,
+  MonitorUp,
+  Plus,
+  Search,
+  X,
+} from 'lucide-react'
+import {
+  listPlatformDocumentsByType,
+  listPlatformRecentDocuments,
+  type PlatformDocumentListEntry,
+  type PlatformRecentDocumentEntry,
+} from '../../../bridge/documents.mjs'
+import { bridge } from '../../../bridge/client.mjs'
+import { PLATFORM_BRIDGE_METHODS } from '../../../bridge/methods.mjs'
+
+/** A "Bring in" route beyond the two defaults (e.g. Research's source URL). */
+export interface DocumentSwitcherSource {
+  id: string
+  label: string
+  icon?: ReactNode
+  onSelect: () => void
+}
+
+export type DocumentPreviewStyle =
+  | 'document'
+  | 'structured'
+  | 'grid'
+  | 'none'
+
+export interface DocumentSwitcherProps {
+  appSlug: string
+  /** Document suffixes this app opens, e.g. ['.research']. */
+  suffixes: string[]
+  /** 'modal' renders full-screen over a scrim (⌘O); 'landing' renders inline
+   * as the empty-app home surface. */
+  variant?: 'modal' | 'landing'
+  open?: boolean
+  onClose?: () => void
+  onOpenDocument: (path: string) => void
+  onCreateNew: () => void
+  newLabel?: string
+  /** Main-pane title; defaults to `Open a <noun>`. */
+  title?: string
+  /** Singular item noun, e.g. 'board', 'dossier', 'report'. */
+  itemNoun?: string
+  /** Plural noun; defaults to `<noun>s`. */
+  itemNounPlural?: string
+  /** Wordmark name after "pure"; defaults to `appSlug`. */
+  wordmarkName?: string
+  /** Reading/authoring apps set true — serif item names + text previews. */
+  nameSerif?: boolean
+  /** Thumbnail style; defaults from `nameSerif` (document vs structured). */
+  previewStyle?: DocumentPreviewStyle
+  /** Extension shown in the storage footer; defaults to `suffixes[0]`. */
+  extensionLabel?: string
+  /** Folder hint shown in the storage footer, e.g. './Documents/Boards'. */
+  storageLabel?: string
+  /** In-app import of a compatible file (⌘I). Hidden when omitted. */
+  onImportFile?: () => void
+  /** Native OS file dialog. Defaults to a built-in open-file dialog. */
+  onChooseFromSystem?: () => void
+  /** Extra "Bring in" routes (bespoke per app). */
+  extraSources?: DocumentSwitcherSource[]
+  footer?: ReactNode
+  className?: string
+}
+
+interface DocItem {
+  path: string
+  name: string
+  isDraft: boolean
+  mtimeMs: number
+  kind: 'package' | 'file'
+}
+
+type BrowseSource = 'all' | 'recents' | 'drafts'
+type SortKey = 'recent' | 'name'
+
+function relativeDay(iso: string | number): string {
+  const time = typeof iso === 'number' ? iso : Date.parse(iso)
+  if (!Number.isFinite(time)) return ''
+  const days = Math.floor((Date.now() - time) / 86_400_000)
+  if (days <= 0) return 'today'
+  if (days === 1) return 'yesterday'
+  if (days < 7) return `${days}d ago`
+  return new Date(time).toLocaleDateString([], {
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+async function chooseFromSystem(): Promise<string | null> {
+  try {
+    const result = await bridge.call<{ path?: string | null }>(
+      PLATFORM_BRIDGE_METHODS.DIALOG_OPEN_FILE,
+    )
+    const path = result?.path
+    return typeof path === 'string' && path.trim() ? path : null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * The Pure file picker: a full-screen, per-app "Open" surface. One shared
+ * shell re-skinned by each app via identity tokens (`--app-*` from `data-app`),
+ * document nouns, item-name font, and a preview thumbnail. Open · New · Import ·
+ * Choose-from-system, with a recents strip and a sortable browse table. Also
+ * serves as the empty-app landing state via `variant: 'landing'`.
+ */
+export function DocumentSwitcher({
+  appSlug,
+  suffixes,
+  variant = 'modal',
+  open = true,
+  onClose,
+  onOpenDocument,
+  onCreateNew,
+  newLabel,
+  title,
+  itemNoun = 'document',
+  itemNounPlural,
+  wordmarkName,
+  nameSerif = false,
+  previewStyle,
+  extensionLabel,
+  storageLabel,
+  onImportFile,
+  onChooseFromSystem,
+  extraSources,
+  footer,
+  className,
+}: DocumentSwitcherProps): ReactElement | null {
+  const noun = itemNoun
+  const plural = itemNounPlural ?? `${noun}s`
+  const preview: DocumentPreviewStyle =
+    previewStyle ?? (nameSerif ? 'document' : 'structured')
+  const heading = title ?? `Open a ${noun}`
+  const ext = extensionLabel ?? suffixes[0] ?? ''
+
+  const [recents, setRecents] = useState<PlatformRecentDocumentEntry[]>([])
+  const [items, setItems] = useState<DocItem[] | null>(null)
+  const [query, setQuery] = useState('')
+  const [source, setSource] = useState<BrowseSource>('all')
+  const [sort, setSort] = useState<SortKey>('recent')
+  const [selected, setSelected] = useState(0)
+  const filterRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    let cancelled = false
+    void (async () => {
+      const [recentEntries, all] = await Promise.all([
+        listPlatformRecentDocuments({ appSlug, limit: 8 }).catch(() => []),
+        listPlatformDocumentsByType({ suffixes }).catch(() => []),
+      ])
+      if (cancelled) return
+      setRecents(recentEntries)
+      setItems(
+        all.map((entry: PlatformDocumentListEntry) => ({
+          path: entry.path,
+          name: entry.name,
+          isDraft: entry.isDraft,
+          mtimeMs: entry.mtimeMs,
+          kind: entry.kind,
+        })),
+      )
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [appSlug, open, suffixes])
+
+  // Focus the filter when the picker opens.
+  useEffect(() => {
+    if (open) {
+      const timer = window.setTimeout(() => filterRef.current?.focus(), 20)
+      return () => window.clearTimeout(timer)
+    }
+    return undefined
+  }, [open])
+
+  useEffect(() => {
+    setSelected(0)
+  }, [source, sort, query])
+
+  const recentPaths = useMemo(
+    () => new Set(recents.map(entry => entry.path)),
+    [recents],
+  )
+
+  const filter = query.trim().toLowerCase()
+  const rows = useMemo(() => {
+    if (!items) return []
+    let scoped =
+      source === 'drafts'
+        ? items.filter(item => item.isDraft)
+        : source === 'recents'
+        ? items.filter(item => recentPaths.has(item.path))
+        : items
+    if (filter) {
+      scoped = scoped.filter(item => item.name.toLowerCase().includes(filter))
+    }
+    const sorted = [...scoped]
+    if (sort === 'name') {
+      sorted.sort((a, b) => a.name.localeCompare(b.name))
+    } else {
+      sorted.sort((a, b) => b.mtimeMs - a.mtimeMs)
+    }
+    return sorted
+  }, [filter, items, recentPaths, sort, source])
+
+  // Recent preview cards — up to 3, newest first (recents list, else newest).
+  const recentCards = useMemo(() => {
+    if (!items) return []
+    const byPath = new Map(items.map(item => [item.path, item]))
+    const fromRecents = recents
+      .map(entry => byPath.get(entry.path))
+      .filter((item): item is DocItem => Boolean(item))
+    const source =
+      fromRecents.length > 0
+        ? fromRecents
+        : [...items].sort((a, b) => b.mtimeMs - a.mtimeMs)
+    return source.slice(0, 3)
+  }, [items, recents])
+
+  const draftCount = items?.filter(item => item.isDraft).length ?? 0
+
+  const handleChoose = onChooseFromSystem
+    ? onChooseFromSystem
+    : () => {
+        void chooseFromSystem().then(path => {
+          if (path) onOpenDocument(path)
+        })
+      }
+
+  useEffect(() => {
+    if (!open) return
+    const onKeyDown = (event: KeyboardEvent): void => {
+      const meta = event.metaKey || event.ctrlKey
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        onClose?.()
+      } else if (meta && event.key.toLowerCase() === 'n') {
+        event.preventDefault()
+        onCreateNew()
+      } else if (meta && event.key.toLowerCase() === 'i' && onImportFile) {
+        event.preventDefault()
+        onImportFile()
+      } else if (!meta && event.key === 'ArrowDown') {
+        event.preventDefault()
+        setSelected(index => Math.min(index + 1, Math.max(rows.length - 1, 0)))
+      } else if (!meta && event.key === 'ArrowUp') {
+        event.preventDefault()
+        setSelected(index => Math.max(index - 1, 0))
+      } else if (event.key === 'Enter' && rows.length > 0) {
+        const active = document.activeElement
+        // Let Enter inside the New tile / buttons act normally.
+        if (active instanceof HTMLButtonElement) return
+        event.preventDefault()
+        const item = rows[Math.min(selected, rows.length - 1)]
+        if (item) onOpenDocument(item.path)
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [
+    onClose,
+    onCreateNew,
+    onImportFile,
+    onOpenDocument,
+    open,
+    rows,
+    selected,
+  ])
+
+  if (!open) return null
+
+  const substats =
+    items === null
+      ? 'LOADING…'
+      : `${items.length} ${plural.toUpperCase()}${
+          draftCount ? ` · ${draftCount} DRAFT${draftCount === 1 ? '' : 'S'}` : ''
+        }`
+
+  const sheet = (
+    <Sheet
+      data-app={appSlug}
+      className={className}
+      $variant={variant}
+      role={variant === 'modal' ? 'dialog' : undefined}
+      aria-modal={variant === 'modal' ? true : undefined}
+      aria-label={heading}
+    >
+      {/* LEFT RAIL */}
+      <Rail>
+        <Wordmark>
+          <span>pure</span>
+          <strong>{wordmarkName ?? appSlug}</strong>
+        </Wordmark>
+
+        <RailKicker>Browse</RailKicker>
+        <RailItem
+          type="button"
+          $active={source === 'all'}
+          onClick={() => setSource('all')}
+        >
+          <Boxes size={16} strokeWidth={2} aria-hidden />
+          All {plural}
+          <RailCount>{items?.length ?? 0}</RailCount>
+        </RailItem>
+        <RailItem
+          type="button"
+          $active={source === 'recents'}
+          onClick={() => setSource('recents')}
+        >
+          <Clock size={16} strokeWidth={2} aria-hidden />
+          Recents
+        </RailItem>
+        <RailItem
+          type="button"
+          $active={source === 'drafts'}
+          onClick={() => setSource('drafts')}
+        >
+          <FileStack size={16} strokeWidth={2} aria-hidden />
+          Drafts
+          {draftCount ? <RailCount>{draftCount}</RailCount> : null}
+        </RailItem>
+
+        <RailKicker style={{ marginTop: 24 }}>Bring in</RailKicker>
+        {onImportFile ? (
+          <RailItem type="button" onClick={onImportFile}>
+            <FileUp size={16} strokeWidth={2} aria-hidden />
+            Import a file…
+          </RailItem>
+        ) : null}
+        <RailItem type="button" onClick={handleChoose}>
+          <MonitorUp size={16} strokeWidth={2} aria-hidden />
+          Choose from system…
+        </RailItem>
+        {extraSources?.map(entry => (
+          <RailItem key={entry.id} type="button" onClick={entry.onSelect}>
+            {entry.icon ?? <FileUp size={16} strokeWidth={2} aria-hidden />}
+            {entry.label}
+          </RailItem>
+        ))}
+
+        <RailFooter>
+          <RailKicker>Storage</RailKicker>
+          <StorageText>
+            Saved to <strong>PureFiles</strong>
+            <StorageMeta>
+              {storageLabel ? `${storageLabel} · ` : ''}
+              {ext}
+            </StorageMeta>
+          </StorageText>
+        </RailFooter>
+      </Rail>
+
+      {/* MAIN */}
+      <Main>
+        <MainHead>
+          <div>
+            <Heading>{heading}</Heading>
+            <SubStats>{substats}</SubStats>
+          </div>
+          <HeadControls>
+            <FilterWrap>
+              <Search size={16} strokeWidth={2} aria-hidden />
+              <FilterInput
+                ref={filterRef}
+                value={query}
+                onChange={event => setQuery(event.target.value)}
+                placeholder={`Filter ${plural}…`}
+                aria-label={`Filter ${plural}`}
+              />
+            </FilterWrap>
+            {variant === 'modal' ? (
+              <CloseButton
+                type="button"
+                onClick={() => onClose?.()}
+                aria-label="Close"
+              >
+                <X size={17} strokeWidth={2} aria-hidden />
+              </CloseButton>
+            ) : null}
+          </HeadControls>
+        </MainHead>
+
+        <Body>
+          <CardRow>
+            <NewCard type="button" onClick={onCreateNew}>
+              <NewIcon>
+                <Plus size={22} strokeWidth={2.2} aria-hidden />
+              </NewIcon>
+              <NewLabel>{newLabel ?? `New ${noun}`}</NewLabel>
+              <NewHint>⌘N</NewHint>
+            </NewCard>
+            {recentCards.map(item => (
+              <PreviewCard
+                key={item.path}
+                type="button"
+                onClick={() => onOpenDocument(item.path)}
+              >
+                <PreviewThumb>
+                  <Thumbnail $preview={preview} $serif={nameSerif} name={item.name} />
+                </PreviewThumb>
+                <PreviewMeta>
+                  <PreviewName $serif={nameSerif}>{item.name}</PreviewName>
+                  <PreviewWhen>{relativeDay(item.mtimeMs)}</PreviewWhen>
+                </PreviewMeta>
+              </PreviewCard>
+            ))}
+          </CardRow>
+
+          <ListHead>
+            <ListKicker>All {plural}</ListKicker>
+            <SortControls>
+              <SortButton
+                type="button"
+                $active={sort === 'recent'}
+                onClick={() => setSort('recent')}
+              >
+                Recent
+              </SortButton>
+              <SortButton
+                type="button"
+                $active={sort === 'name'}
+                onClick={() => setSort('name')}
+              >
+                Name
+              </SortButton>
+            </SortControls>
+          </ListHead>
+
+          <ListBox ref={listRef}>
+            {items === null ? (
+              <EmptyNote>Loading…</EmptyNote>
+            ) : rows.length === 0 ? (
+              <EmptyNote>
+                {filter
+                  ? 'Nothing matches that filter.'
+                  : source === 'drafts'
+                  ? 'No drafts yet.'
+                  : `No ${plural} yet — create the first, import one, or choose from your system.`}
+              </EmptyNote>
+            ) : (
+              rows.map((item, index) => (
+                <Row
+                  key={item.path}
+                  type="button"
+                  $selected={index === selected}
+                  onMouseEnter={() => setSelected(index)}
+                  onClick={() => onOpenDocument(item.path)}
+                >
+                  <RowIcon>
+                    <Boxes size={17} strokeWidth={2} aria-hidden />
+                  </RowIcon>
+                  <RowMain>
+                    <RowName $serif={nameSerif}>{item.name}</RowName>
+                    <RowMeta>
+                      {item.kind === 'package' ? 'Package' : 'File'} · {ext}
+                    </RowMeta>
+                  </RowMain>
+                  <RowWhen>{relativeDay(item.mtimeMs)}</RowWhen>
+                  <RowBadge $draft={item.isDraft}>
+                    {item.isDraft ? 'Draft' : capitalize(noun)}
+                  </RowBadge>
+                </Row>
+              ))
+            )}
+          </ListBox>
+          {footer}
+        </Body>
+
+        <FooterBar>
+          <FooterHints>↑↓ to navigate · ⏎ to open{onImportFile ? ' · ⌘I import' : ''}</FooterHints>
+          <FooterActions>
+            {onImportFile ? (
+              <SecondaryButton type="button" onClick={onImportFile}>
+                Import a file…
+              </SecondaryButton>
+            ) : (
+              <SecondaryButton type="button" onClick={handleChoose}>
+                Choose from system…
+              </SecondaryButton>
+            )}
+            <PrimaryButton
+              type="button"
+              disabled={rows.length === 0}
+              onClick={() => {
+                const item = rows[Math.min(selected, rows.length - 1)]
+                if (item) onOpenDocument(item.path)
+              }}
+            >
+              Open {noun}
+            </PrimaryButton>
+          </FooterActions>
+        </FooterBar>
+      </Main>
+    </Sheet>
+  )
+
+  if (variant === 'landing') return sheet
+
+  return (
+    <Scrim onMouseDown={() => onClose?.()}>
+      <SheetHolder onMouseDown={event => event.stopPropagation()}>
+        {sheet}
+      </SheetHolder>
+    </Scrim>
+  )
+}
+
+function capitalize(value: string): string {
+  return value ? value[0]!.toUpperCase() + value.slice(1) : value
+}
+
+/** A lightweight preview thumbnail derived from the doc name + app style. */
+function Thumbnail({
+  $preview,
+  $serif,
+  name,
+}: {
+  $preview: DocumentPreviewStyle
+  $serif: boolean
+  name: string
+}): ReactElement | null {
+  if ($preview === 'none') {
+    return (
+      <ThumbFallback>
+        <Boxes size={26} strokeWidth={1.6} aria-hidden />
+      </ThumbFallback>
+    )
+  }
+  if ($preview === 'document') {
+    return (
+      <ThumbDoc>
+        <ThumbDocTitle $serif={$serif}>{name}</ThumbDocTitle>
+        <ThumbLine style={{ width: '92%' }} />
+        <ThumbLine style={{ width: '80%' }} />
+        <ThumbLine style={{ width: '88%' }} />
+        <ThumbPills>
+          <ThumbPill $accent style={{ width: 22 }} />
+          <ThumbPill style={{ width: 14 }} />
+          <ThumbPill style={{ width: 18 }} />
+        </ThumbPills>
+      </ThumbDoc>
+    )
+  }
+  if ($preview === 'grid') {
+    return (
+      <ThumbGrid>
+        {Array.from({ length: 4 }).map((_, index) => (
+          <ThumbCell key={index} $accent={index === 0} />
+        ))}
+      </ThumbGrid>
+    )
+  }
+  // structured — columns of blocks (kanban-ish)
+  return (
+    <ThumbCols>
+      <ThumbCol>
+        <ThumbColHead style={{ width: '60%' }} />
+        <ThumbBlock $accent />
+        <ThumbBlock />
+      </ThumbCol>
+      <ThumbCol>
+        <ThumbColHead style={{ width: '55%' }} />
+        <ThumbBlock />
+      </ThumbCol>
+      <ThumbCol>
+        <ThumbColHead style={{ width: '50%' }} />
+      </ThumbCol>
+    </ThumbCols>
+  )
+}
+
+//#region styled-components
+
+const serifStack =
+  "var(--platform-typography-font-family-serif, 'Source Serif 4', Georgia, serif)"
+const sansStack = 'var(--platform-typography-font-family, Archivo, system-ui, sans-serif)'
+const monoStack =
+  "var(--platform-typography-font-family-mono, 'JetBrains Mono', ui-monospace, monospace)"
+const ink = 'var(--platform-colors-text, #1b1b1e)'
+const faint = 'var(--platform-colors-text-muted, #9a9aa0)'
+const line = 'var(--platform-colors-border, #ece7ee)'
+const surface = 'var(--platform-colors-surface, #faf8fb)'
+const elevated = 'var(--platform-colors-elevated, #ffffff)'
+
+const Scrim = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  background: rgba(20, 18, 22, 0.34);
+`
+
+const SheetHolder = styled.div`
+  position: absolute;
+  inset: 28px;
+  display: flex;
+`
+
+const Sheet = styled.div<{ $variant: 'modal' | 'landing' }>`
+  display: grid;
+  grid-template-columns: 296px 1fr;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  color: ${ink};
+  background: ${elevated};
+  border-radius: ${({ $variant }) => ($variant === 'modal' ? '10px' : '0')};
+  box-shadow: ${({ $variant }) =>
+    $variant === 'modal' ? '0 24px 80px rgba(14, 14, 17, 0.4)' : 'none'};
+  font-family: ${sansStack};
+`
+
+const Rail = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 30px 22px;
+  background: ${surface};
+  border-right: 1px solid ${line};
+`
+
+const Wordmark = styled.div`
+  margin-bottom: 30px;
+  font-size: 19px;
+  font-weight: 700;
+
+  span {
+    color: ${faint};
+  }
+  strong {
+    color: var(--app-acc, #1f9d57);
+    font-weight: 700;
+  }
+`
+
+const RailKicker = styled.div`
+  margin-bottom: 12px;
+  font-family: ${monoStack};
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: ${faint};
+`
+
+const RailItem = styled.button<{ $active?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  width: 100%;
+  margin-bottom: 2px;
+  padding: 10px 12px;
+  border: 0;
+  border-left: 3px solid
+    ${({ $active }) => ($active ? 'var(--app-acc, #1f9d57)' : 'transparent')};
+  border-radius: 7px;
+  background: ${({ $active }) =>
+    $active ? 'var(--app-bg, #eef7f1)' : 'transparent'};
+  color: ${({ $active }) => ($active ? 'var(--app-text, #15703f)' : '#4a4a50')};
+  font: inherit;
+  font-size: 14px;
+  font-weight: ${({ $active }) => ($active ? 600 : 400)};
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ $active }) =>
+      $active ? 'var(--app-bg, #eef7f1)' : 'rgba(20, 18, 22, 0.05)'};
+  }
+`
+
+const RailCount = styled.span`
+  margin-left: auto;
+  font-family: ${monoStack};
+  font-size: 11px;
+  color: ${faint};
+`
+
+const RailFooter = styled.div`
+  margin-top: auto;
+  padding-top: 22px;
+  border-top: 1px solid ${line};
+`
+
+const StorageText = styled.div`
+  font-size: 13px;
+  line-height: 1.5;
+  color: #6a6a70;
+
+  strong {
+    color: ${ink};
+    font-weight: 600;
+  }
+`
+
+const StorageMeta = styled.span`
+  display: block;
+  font-family: ${monoStack};
+  font-size: 11px;
+  color: ${faint};
+`
+
+const Main = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+`
+
+const MainHead = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 28px 40px 20px;
+  border-bottom: 1px solid ${line};
+`
+
+const Heading = styled.div`
+  font-family: ${serifStack};
+  font-size: 31px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.1;
+`
+
+const SubStats = styled.div`
+  margin-top: 6px;
+  font-family: ${monoStack};
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  color: ${faint};
+`
+
+const HeadControls = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`
+
+const FilterWrap = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  svg {
+    position: absolute;
+    left: 13px;
+    color: ${faint};
+    pointer-events: none;
+  }
+`
+
+const FilterInput = styled.input`
+  width: 260px;
+  padding: 11px 14px 11px 38px;
+  border: 1px solid ${line};
+  border-radius: 8px;
+  background: ${surface};
+  color: ${ink};
+  font: inherit;
+  font-size: 14px;
+  outline: none;
+
+  &:focus {
+    border-color: var(--app-acc, #1f9d57);
+  }
+`
+
+const CloseButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border: 1px solid ${line};
+  border-radius: 8px;
+  background: ${elevated};
+  color: #6a6a70;
+  cursor: pointer;
+
+  &:hover {
+    background: ${surface};
+  }
+`
+
+const Body = styled.div`
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 26px 40px 40px;
+`
+
+const CardRow = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  gap: 16px;
+  margin-bottom: 34px;
+`
+
+const cardBase = `
+  min-height: 190px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
+
+  &:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 12px 30px rgba(14, 14, 17, 0.16);
+  }
+`
+
+const NewCard = styled.button`
+  ${cardBase}
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  border: 1.5px dashed var(--app-acc, #1f9d57);
+  background: var(--app-bg, #eef7f1);
+  font: inherit;
+`
+
+const NewIcon = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 11px;
+  background: var(--app-block, #235240);
+  color: #fff;
+`
+
+const NewLabel = styled.span`
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--app-text, #15703f);
+`
+
+const NewHint = styled.span`
+  font-family: ${monoStack};
+  font-size: 10.5px;
+  color: var(--app-text, #15703f);
+  opacity: 0.7;
+`
+
+const PreviewCard = styled.button`
+  ${cardBase}
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid ${line};
+  background: ${elevated};
+  font: inherit;
+  text-align: left;
+`
+
+const PreviewThumb = styled.div`
+  flex: 1;
+  min-height: 0;
+  padding: 14px;
+  background: ${surface};
+  border-bottom: 1px solid ${line};
+  overflow: hidden;
+`
+
+const PreviewMeta = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 13px 15px;
+`
+
+const PreviewName = styled.div<{ $serif?: boolean }>`
+  overflow: hidden;
+  font-family: ${({ $serif }) => ($serif ? serifStack : sansStack)};
+  font-size: 14.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`
+
+const PreviewWhen = styled.div`
+  flex: none;
+  font-family: ${monoStack};
+  font-size: 10.5px;
+  color: ${faint};
+`
+
+const ListHead = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+`
+
+const ListKicker = styled.div`
+  font-family: ${monoStack};
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #6a6a70;
+`
+
+const SortControls = styled.div`
+  display: flex;
+  gap: 16px;
+`
+
+const SortButton = styled.button<{ $active?: boolean }>`
+  padding: 0 0 3px;
+  border: 0;
+  border-bottom: 2px solid
+    ${({ $active }) => ($active ? 'var(--app-acc, #1f9d57)' : 'transparent')};
+  background: transparent;
+  color: ${({ $active }) => ($active ? 'var(--app-text, #15703f)' : faint)};
+  font-family: ${monoStack};
+  font-size: 11px;
+  cursor: pointer;
+`
+
+const ListBox = styled.div`
+  overflow: hidden;
+  border: 1px solid ${line};
+  border-radius: 10px;
+`
+
+const Row = styled.button<{ $selected?: boolean }>`
+  display: grid;
+  grid-template-columns: 34px 1fr 96px 92px;
+  align-items: center;
+  gap: 14px;
+  width: 100%;
+  padding: 13px 18px;
+  border: 0;
+  border-bottom: 1px solid ${line};
+  background: ${({ $selected }) =>
+    $selected ? 'var(--app-bg, #eef7f1)' : 'transparent'};
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+`
+
+const RowIcon = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background: var(--app-bg, #eef7f1);
+  color: var(--app-acc, #1f9d57);
+`
+
+const RowMain = styled.div`
+  min-width: 0;
+`
+
+const RowName = styled.div<{ $serif?: boolean }>`
+  overflow: hidden;
+  font-family: ${({ $serif }) => ($serif ? serifStack : sansStack)};
+  font-size: 14.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`
+
+const RowMeta = styled.div`
+  margin-top: 2px;
+  font-family: ${monoStack};
+  font-size: 10.5px;
+  color: ${faint};
+`
+
+const RowWhen = styled.div`
+  font-family: ${monoStack};
+  font-size: 11.5px;
+  color: #6a6a70;
+`
+
+const RowBadge = styled.span<{ $draft?: boolean }>`
+  justify-self: end;
+  padding: 3px 9px;
+  border-radius: 999px;
+  font-family: ${monoStack};
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: ${({ $draft }) => ($draft ? '#8a5a12' : '#6a6a70')};
+  background: ${({ $draft }) => ($draft ? '#f6ecd6' : 'rgba(20,18,22,0.05)')};
+`
+
+const EmptyNote = styled.p`
+  margin: 0;
+  padding: 34px 20px;
+  text-align: center;
+  color: ${faint};
+  font-size: 13.5px;
+`
+
+const FooterBar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 40px;
+  border-top: 1px solid ${line};
+  background: ${surface};
+`
+
+const FooterHints = styled.div`
+  font-family: ${monoStack};
+  font-size: 11px;
+  color: ${faint};
+`
+
+const FooterActions = styled.div`
+  display: flex;
+  gap: 10px;
+`
+
+const SecondaryButton = styled.button`
+  padding: 9px 16px;
+  border: 1px solid ${line};
+  border-radius: 8px;
+  background: ${elevated};
+  color: #4a4a50;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover {
+    background: ${surface};
+  }
+`
+
+const PrimaryButton = styled.button`
+  padding: 9px 18px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--app-block, #235240);
+  color: #fff;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`
+
+// --- thumbnails ---
+
+const ThumbFallback = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: ${faint};
+`
+
+const ThumbDoc = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`
+
+const ThumbDocTitle = styled.div<{ $serif?: boolean }>`
+  margin-bottom: 4px;
+  font-family: ${({ $serif }) => ($serif ? serifStack : sansStack)};
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.25;
+  color: ${ink};
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+`
+
+const ThumbLine = styled.div`
+  height: 5px;
+  border-radius: 2px;
+  background: rgba(20, 18, 22, 0.12);
+`
+
+const ThumbPills = styled.div`
+  display: flex;
+  gap: 5px;
+  margin-top: 6px;
+`
+
+const ThumbPill = styled.span<{ $accent?: boolean }>`
+  height: 5px;
+  border-radius: 999px;
+  background: ${({ $accent }) =>
+    $accent ? 'var(--app-acc, #1f9d57)' : 'rgba(20,18,22,0.15)'};
+`
+
+const ThumbGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 6px;
+  width: 100%;
+  height: 100%;
+`
+
+const ThumbCell = styled.div<{ $accent?: boolean }>`
+  border-radius: 4px;
+  background: ${elevated};
+  border: 1px solid ${line};
+  border-left: ${({ $accent }) =>
+    $accent ? '2px solid var(--app-acc, #1f9d57)' : `1px solid ${line}`};
+`
+
+const ThumbCols = styled.div`
+  display: flex;
+  gap: 7px;
+  width: 100%;
+`
+
+const ThumbCol = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 5px;
+`
+
+const ThumbColHead = styled.div`
+  height: 6px;
+  border-radius: 2px;
+  background: rgba(20, 18, 22, 0.14);
+`
+
+const ThumbBlock = styled.div<{ $accent?: boolean }>`
+  height: 22px;
+  border-radius: 3px;
+  background: ${elevated};
+  border: 1px solid ${line};
+  border-left: ${({ $accent }) =>
+    $accent ? '2px solid var(--app-acc, #1f9d57)' : `1px solid ${line}`};
+`
+
+//#endregion