@flamingo-stack/openframe-frontend-core 0.0.285 → 0.0.286

package/src/components/embeds/figma-embed.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, ToggleGroup, ToggleGroupItem } from '../ui'
+import { FigmaIcon } from '../icons-v2-generated'
+import { ExternalLink, Play, LayoutGrid } from 'lucide-react'
+import { toFigmaEmbedUrl, toFigmaOriginalUrl, isFigmaSlidesUrl } from '../../utils/embed-url-converters'
+import { EmbedIframe } from './embed-iframe'
+
+export interface FigmaEmbedProps {
+  /** Any Figma URL (design/file/proto/board/slides/deck) or an already-resolved embed URL. */
+  url: string
+  /** Heading shown above the embed. Defaults to "Figma Design". */
+  title?: string
+  /**
+   * iframe height (CSS value). The data-room document viewer omits it (full
+   * height, `calc(100vh - 250px)`); inline markdown passes e.g. `"70vh"` so the
+   * embed sits naturally inside article content.
+   */
+  height?: string
+  /** iframe loading strategy. Defaults to `"lazy"`; the data-room viewer passes `"eager"`. */
+  loading?: 'eager' | 'lazy'
+}
+
+type SlidesView = 'present' | 'browse'
+
+/**
+ * Two-state present/browse toggle for Figma Slides. `present` (default) uses
+ * Figma's deck viewer (full-bleed slide + `‹ n/N ›` nav bar + keyboard nav);
+ * `browse` uses the thumbnail-rail + zoom viewer.
+ */
+function SlidesViewToggle({
+  view,
+  onChange,
+}: {
+  view: SlidesView
+  onChange: (v: SlidesView) => void
+}) {
+  const options: { key: SlidesView; label: string; Icon: typeof Play }[] = [
+    { key: 'present', label: 'Present', Icon: Play },
+    { key: 'browse', label: 'Browse', Icon: LayoutGrid },
+  ]
+  return (
+    <ToggleGroup
+      type="single"
+      value={view}
+      onValueChange={(v: string) => {
+        if (v && v !== view) onChange(v as SlidesView)
+      }}
+      aria-label="Figma slides view mode"
+      className="flex shrink-0 items-center gap-0.5 rounded-lg border border-ods-border bg-ods-card p-0.5"
+    >
+      {options.map(({ key, label, Icon }) => {
+        const active = view === key
+        return (
+          <ToggleGroupItem
+            key={key}
+            value={key}
+            aria-label={label}
+            className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium transition-colors ${
+              active
+                ? 'bg-ods-accent text-ods-text-on-accent'
+                : 'text-ods-text-secondary hover:text-ods-text-primary hover:bg-ods-bg-hover'
+            }`}
+          >
+            <Icon className="h-4 w-4 shrink-0" />
+            {label}
+          </ToggleGroupItem>
+        )
+      })}
+    </ToggleGroup>
+  )
+}
+
+/**
+ * Single source of truth for every Figma surface — the data-room document viewer
+ * and in-article markdown both render this. A header (icon + title + "Open in
+ * Figma") over an interactive Figma iframe, built from the canonical
+ * `toFigmaEmbedUrl` / `toFigmaOriginalUrl` converters + the shared `<EmbedIframe>`.
+ * Only height/loading differ per surface.
+ *
+ * For Slides decks, a present/browse toggle (default = present) lets viewers flip
+ * slides with Figma's native nav bar + keyboard, or switch to the thumbnail-rail
+ * browse view.
+ */
+export function FigmaEmbed({ url, title, height, loading = 'lazy' }: FigmaEmbedProps) {
+  const [view, setView] = useState<SlidesView>('present')
+  const isSlides = url ? isFigmaSlidesUrl(url) : false
+  const embedSrc = url ? toFigmaEmbedUrl(url, { slidesView: view }) : null
+  const originalUrl = (() => {
+    if (!url) return null
+    try {
+      const parsed = new URL(toFigmaOriginalUrl(url))
+      const host = parsed.hostname.toLowerCase()
+      const okHost = host === 'figma.com' || host.endsWith('.figma.com')
+      const okProtocol = parsed.protocol === 'https:' || parsed.protocol === 'http:'
+      return okHost && okProtocol ? parsed.toString() : null
+    } catch {
+      return null
+    }
+  })()
+  const heading = title || 'Figma Design'
+
+  return (
+    <div className="my-6 space-y-3">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-2 min-w-0">
+          <FigmaIcon className="w-5 h-5 shrink-0" />
+          <span className="font-sans text-base font-semibold text-ods-text-primary truncate">
+            {heading}
+          </span>
+        </div>
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+          {isSlides && embedSrc && <SlidesViewToggle view={view} onChange={setView} />}
+          {originalUrl && (
+            <Button
+              variant="outline"
+              size="small-legacy"
+              href={originalUrl}
+              openInNewTab
+              leftIcon={<FigmaIcon className="w-4 h-4" />}
+              rightIcon={<ExternalLink className="w-4 h-4" />}
+              className="w-full sm:w-auto"
+            >
+              Open in Figma
+            </Button>
+          )}
+        </div>
+      </div>
+      {embedSrc ? (
+        <EmbedIframe
+          src={embedSrc}
+          title={heading}
+          allow="clipboard-write; clipboard-read; fullscreen"
+          loading={loading}
+          height={height}
+          allowFullScreen
+        />
+      ) : (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <FigmaIcon className="w-16 h-16 text-ods-text-secondary mb-4" />
+          <p className="text-ods-text-secondary">Figma URL not configured</p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/embeds/google-sheets-viewer.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import React from 'react'
+import { Button } from '../ui'
+import { ExternalLink } from 'lucide-react'
+import { GoogleSheetsIcon } from '../icons-v2-generated'
+import { EmbedIframe } from './embed-iframe'
+import { toGoogleSheetsEmbedUrl, toGoogleSheetsOriginalUrl } from '../../utils/embed-url-converters'
+
+export interface GoogleSheetsViewerProps {
+  externalUrl: string
+  fileName?: string
+  height?: string
+}
+
+export function GoogleSheetsViewer({ externalUrl, fileName, height }: GoogleSheetsViewerProps) {
+  const displayName = fileName || 'Google Sheet'
+
+  if (!externalUrl) {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <GoogleSheetsIcon className="w-16 h-16 text-ods-text-secondary mb-4" />
+        <p className="text-ods-text-secondary">Google Sheet URL not configured</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-2 min-w-0">
+          <GoogleSheetsIcon className="w-5 h-5 shrink-0" />
+          <h2 className="text-xl font-semibold text-ods-text-primary truncate">{displayName}</h2>
+        </div>
+        <Button
+          variant="outline"
+          size="small-legacy"
+          href={toGoogleSheetsOriginalUrl(externalUrl)}
+          openInNewTab
+          leftIcon={<GoogleSheetsIcon className="w-4 h-4" />}
+          rightIcon={<ExternalLink className="w-4 h-4" />}
+          className="w-full sm:w-auto"
+        >
+          Open in Google Sheets
+        </Button>
+      </div>
+      <EmbedIframe
+        src={toGoogleSheetsEmbedUrl(externalUrl)}
+        title={displayName}
+        height={height}
+      />
+    </div>
+  )
+}

package/src/components/embeds/index.ts

@@ -0,0 +1,11 @@
+export { EmbedIframe } from './embed-iframe'
+export type { EmbedIframeProps } from './embed-iframe'
+
+export { PdfViewer } from './pdf-viewer'
+export type { PdfViewerProps } from './pdf-viewer'
+
+export { GoogleSheetsViewer } from './google-sheets-viewer'
+export type { GoogleSheetsViewerProps } from './google-sheets-viewer'
+
+export { FigmaEmbed } from './figma-embed'
+export type { FigmaEmbedProps } from './figma-embed'

package/src/components/embeds/pdf-viewer.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import React from 'react'
+import { Button } from '../ui'
+import { Download, Eye } from 'lucide-react'
+import { AdobePdfIcon } from '../icons-v2-generated'
+import { EmbedIframe } from './embed-iframe'
+
+export interface PdfViewerProps {
+  src: string
+  fileName?: string
+  onPreview?: () => void
+  onDownload?: () => void
+  height?: string
+}
+
+export function PdfViewer({ src, fileName, onPreview, onDownload, height }: PdfViewerProps) {
+  const displayName = fileName || 'PDF Document'
+
+  if (!src) {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <AdobePdfIcon className="w-16 h-16 text-ods-text-secondary mb-4" />
+        <p className="text-ods-text-secondary">PDF file not available</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-2 min-w-0">
+          <AdobePdfIcon className="w-5 h-5 shrink-0" />
+          <h2 className="text-xl font-semibold text-ods-text-primary truncate">{displayName}</h2>
+        </div>
+        <div className="flex items-center gap-2 w-full sm:w-auto">
+          <Button
+            variant="outline"
+            size="small-legacy"
+            href={onPreview ? undefined : src}
+            openInNewTab={!onPreview}
+            onClick={onPreview}
+            leftIcon={<Eye className="w-4 h-4" />}
+            className="flex-1 sm:flex-initial"
+          >
+            Preview
+          </Button>
+          <Button
+            variant="outline"
+            size="small-legacy"
+            href={onDownload ? undefined : src}
+            openInNewTab={!onDownload}
+            onClick={onDownload}
+            leftIcon={<Download className="w-4 h-4" />}
+            className="flex-1 sm:flex-initial"
+          >
+            Download
+          </Button>
+        </div>
+      </div>
+      <EmbedIframe src={src} title={displayName} height={height} />
+    </div>
+  )
+}

package/src/components/index.ts

@@ -2,6 +2,8 @@
 
 // Components exports
 export * from './chat'
+export * from './docs'
+export * from './embeds'
 export * from './features'
 export * from './icons'
 export * from './navigation'

package/src/components/navigation/index.ts

@@ -56,6 +56,11 @@ export type { HeaderGlobalSearchProps } from './header-global-search'
 export { HeaderOrganizationFilter } from './header-organization-filter'
 export type { HeaderOrganizationFilterOrganization, HeaderOrganizationFilterProps } from './header-organization-filter'
 
+// Multi-level navigation — sidebar + mobile dropdown for the doc-viewer
+// (DocViewer / DocSourceViewer) and any other tree-shaped navigation surface.
+export { MultiLevelNavigation, MobileNavigationDropdown } from './multi-level-navigation'
+export type { NavigationNode } from './multi-level-navigation'
+
 // Re-export types from navigation types
 export type {
   MobileNavConfig, NavigationItem, NavigationSidebarConfig,

package/src/components/navigation/multi-level-navigation.tsx

@@ -0,0 +1,358 @@
+"use client"
+
+import { ChevronRight, ChevronDown, ChevronUp, FileText, Folder, FolderOpen } from 'lucide-react'
+import { cn } from '../../utils/cn'
+import { DEFAULT_FOLDER_INDEX_FILE as CANONICAL_FOLDER_INDEX_FILE } from '../../utils/doc-tree-nav'
+
+export interface NavigationNode {
+  id: string
+  name: string
+  path: string
+  type: 'file' | 'folder'
+  hasReadme?: boolean
+  children?: NavigationNode[]
+  slug?: string
+  // Mirror DocNode's extra optional fields so a DocNode tree is structurally
+  // assignable to NavigationNode[] without an `as` cast. NavigationNode
+  // intentionally never reads these — they're carried for type-compat only.
+  documentType?: 'markdown' | 'pdf' | 'google_sheet' | 'figma' | 'file'
+  sortOrder?: number
+}
+
+interface MultiLevelNavigationProps {
+  nodes: NavigationNode[]
+  selectedPath: string
+  expandedNodes: Set<string>
+  onNodeClick: (node: NavigationNode) => void
+  onToggleExpand?: (nodeId: string) => void
+  isLoading?: boolean
+  className?: string
+  /** Folder-index filename (default `'README.md'`, case-insensitive). When the
+   *  selectedPath is a folder with this file, the visual ribbon moves to the
+   *  child file. */
+  folderIndexFile?: string
+}
+
+// SSOT lives in `doc-tree-nav` (canonical case `'README.md'`). The visual
+// comparator below lowercases both sides, so re-exporting the canonical
+// constant under the same local name preserves call-site syntax without
+// drifting from the SSOT.
+const DEFAULT_FOLDER_INDEX_FILE = CANONICAL_FOLDER_INDEX_FILE
+
+/**
+ * Compute the visual "selected" state for a navigation node.
+ *
+ * Folder-with-README convention: when `selectedPath` is a folder that has a
+ * README, the FOLDER doesn't get the ribbon — its README child does. The folder
+ * is just a container; the README is the actual document being viewed.
+ *
+ * Mirror case: a README file whose parent folder is the `selectedPath` gets the
+ * visual selection ribbon (implicit). This handles both the auto-select-first-
+ * folder landing path AND the user-clicks-folder case.
+ */
+function isNodeVisuallySelected(
+  node: NavigationNode,
+  selectedPath: string,
+  folderIndexFile: string = DEFAULT_FOLDER_INDEX_FILE,
+): boolean {
+  const FOLDER_INDEX_FILE = folderIndexFile.toLowerCase()
+  // Path comparisons keyed on `node.path` (raw, includes `.md`). Do NOT use
+  // `node.name` — the tree-builder runs it through `formatDocName` which strips
+  // the `.md` extension, so `node.name.toLowerCase() === 'readme.md'` is always
+  // false.
+  if (selectedPath === node.path) {
+    // Explicit match — but folder-with-README defers to its README child.
+    return !(node.type === 'folder' && node.hasReadme)
+  }
+  if (node.type !== 'file') return false
+  const pathLower = node.path.toLowerCase()
+  // Implicit: README child whose parent folder is the selectedPath.
+  if (
+    selectedPath !== '' &&
+    pathLower === `${selectedPath.toLowerCase()}/${FOLDER_INDEX_FILE}`
+  ) {
+    return true
+  }
+  // Implicit: ROOT README on the landing page (selectedPath === '' means
+  // "no explicit doc selected" — the viewer falls back to the root folder-
+  // index file, so that file IS the active document).
+  if (selectedPath === '' && pathLower === FOLDER_INDEX_FILE) {
+    return true
+  }
+  return false
+}
+
+export function MultiLevelNavigation({
+  nodes,
+  selectedPath,
+  expandedNodes,
+  onNodeClick,
+  onToggleExpand,
+  isLoading,
+  className,
+  folderIndexFile = DEFAULT_FOLDER_INDEX_FILE,
+}: MultiLevelNavigationProps) {
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-2", className)}>
+        {[1, 2, 3, 4].map((i) => (
+          <div key={i} className="p-3 bg-ods-skeleton rounded-lg animate-pulse h-12" />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("space-y-2", className)} role="list" aria-label="Navigation list">
+      {nodes.map(node => (
+        <NavigationItem
+          key={node.id}
+          node={node}
+          selectedPath={selectedPath}
+          expandedNodes={expandedNodes}
+          onNodeClick={onNodeClick}
+          onToggleExpand={onToggleExpand}
+          level={0}
+          folderIndexFile={folderIndexFile}
+        />
+      ))}
+    </div>
+  )
+}
+
+interface NavigationItemProps {
+  node: NavigationNode
+  selectedPath: string
+  expandedNodes: Set<string>
+  onNodeClick: (node: NavigationNode) => void
+  onToggleExpand?: (nodeId: string) => void
+  level: number
+  folderIndexFile: string
+}
+
+function NavigationItem({
+  node,
+  selectedPath,
+  expandedNodes,
+  onNodeClick,
+  onToggleExpand,
+  level,
+  folderIndexFile,
+}: NavigationItemProps) {
+  const isExpanded = expandedNodes.has(node.id)
+  const isSelected = isNodeVisuallySelected(node, selectedPath, folderIndexFile)
+  const hasChildren = node.children && node.children.length > 0
+
+  return (
+    <div className="space-y-1" role="listitem">
+      <div className={cn("px-2", level > 0 && "ml-4")}>
+        <div
+          className={cn(
+            "w-full rounded-lg transition-all duration-150 border relative",
+            isSelected
+              ? "bg-ods-border border-ods-border"
+              : "bg-ods-card border-ods-border"
+          )}
+        >
+          <div className="flex items-center relative">
+            <button
+              className={cn(
+                "w-full flex items-center h-12 px-2 rounded-lg text-[16px] font-medium font-['DM_Sans'] transition-all duration-150 leading-[1.33em] text-ods-text-primary",
+                !isSelected && "hover:bg-ods-bg-secondary",
+                hasChildren && "pr-12"
+              )}
+              onClick={() => onNodeClick(node)}
+              aria-label={`${isSelected ? 'Selected' : 'Select'} ${node.name}`}
+            >
+              <span className="flex-shrink-0 mr-2">
+                {node.type === 'folder' ? (
+                  isExpanded ? <FolderOpen className="h-4 w-4" /> : <Folder className="h-4 w-4" />
+                ) : (
+                  <FileText className="h-4 w-4" />
+                )}
+              </span>
+              <span className="text-left truncate flex-1 min-w-0">
+                {node.name.endsWith('.md') ? node.name.replace('.md', '') : node.name}
+              </span>
+              {node.type === 'folder' && node.hasReadme && (
+                <span className="text-[10px] bg-ods-bg-secondary text-ods-text-tertiary px-1.5 py-0.5 rounded mr-2">
+                  README
+                </span>
+              )}
+            </button>
+
+            {hasChildren && (
+              <button
+                className="absolute right-0 top-0 flex items-center justify-center w-12 h-12 text-ods-text-secondary hover:text-ods-text-primary transition-colors duration-150"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (onToggleExpand) {
+                    onToggleExpand(node.id)
+                  } else {
+                    onNodeClick(node)
+                  }
+                }}
+                aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${node.name}`}
+              >
+                {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+              </button>
+            )}
+          </div>
+
+          {isSelected && (
+            <div className="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-[calc(100%-8px)] bg-ods-accent rounded-l" />
+          )}
+        </div>
+      </div>
+
+      {hasChildren && isExpanded && (
+        <div className="space-y-1">
+          {node.children!.map(child => (
+            <NavigationItem
+              key={child.id}
+              node={child}
+              selectedPath={selectedPath}
+              expandedNodes={expandedNodes}
+              onNodeClick={onNodeClick}
+              onToggleExpand={onToggleExpand}
+              level={level + 1}
+              folderIndexFile={folderIndexFile}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function MobileNavigationDropdown({
+  nodes,
+  selectedPath,
+  expandedNodes,
+  onNodeClick,
+  onToggleExpand,
+  isLoading,
+  className,
+  folderIndexFile = DEFAULT_FOLDER_INDEX_FILE,
+}: MultiLevelNavigationProps) {
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-2", className)}>
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="p-3 bg-ods-skeleton rounded-lg animate-pulse h-10" />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {nodes.map(node => (
+        <MobileNavigationItem
+          key={node.id}
+          node={node}
+          selectedPath={selectedPath}
+          expandedNodes={expandedNodes}
+          onNodeClick={onNodeClick}
+          onToggleExpand={onToggleExpand}
+          level={0}
+          folderIndexFile={folderIndexFile}
+        />
+      ))}
+    </div>
+  )
+}
+
+function MobileNavigationItem({
+  node,
+  selectedPath,
+  expandedNodes,
+  onNodeClick,
+  onToggleExpand,
+  level,
+  folderIndexFile,
+}: NavigationItemProps) {
+  const isExpanded = expandedNodes.has(node.id)
+  const isSelected = isNodeVisuallySelected(node, selectedPath, folderIndexFile)
+  const hasChildren = node.children && node.children.length > 0
+
+  return (
+    <div className="space-y-1">
+      <div className={cn("px-2", level > 0 && "ml-3")}>
+        <div
+          className={cn(
+            "w-full rounded-lg transition-all duration-150 border relative",
+            isSelected
+              ? "bg-ods-border border-ods-border"
+              : "bg-ods-card border-ods-border"
+          )}
+        >
+          <div className="flex items-center relative">
+            <button
+              className={cn(
+                "w-full flex items-center h-11 px-2 rounded-lg text-[15px] font-medium font-['DM_Sans'] transition-all duration-150 leading-[1.33em] text-ods-text-primary",
+                !isSelected && "hover:bg-ods-bg-secondary",
+                hasChildren && "pr-11"
+              )}
+              onClick={() => onNodeClick(node)}
+            >
+              <span className="flex-shrink-0 mr-2">
+                {node.type === 'folder' ? (
+                  isExpanded ? <FolderOpen className="h-4 w-4" /> : <Folder className="h-4 w-4" />
+                ) : (
+                  <FileText className="h-4 w-4" />
+                )}
+              </span>
+              <span className="text-left truncate flex-1 min-w-0 text-sm">
+                {node.name.endsWith('.md') ? node.name.replace('.md', '') : node.name}
+              </span>
+              {node.type === 'folder' && node.hasReadme && (
+                <span className="text-[10px] bg-ods-bg-secondary text-ods-text-tertiary px-1.5 py-0.5 rounded mr-2">
+                  README
+                </span>
+              )}
+            </button>
+
+            {hasChildren && (
+              <button
+                className="absolute right-0 top-0 flex items-center justify-center w-11 h-11 text-ods-text-secondary hover:text-ods-text-primary transition-colors duration-150"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (onToggleExpand) {
+                    onToggleExpand(node.id)
+                  } else {
+                    onNodeClick(node)
+                  }
+                }}
+                aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${node.name}`}
+              >
+                {isExpanded ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
+              </button>
+            )}
+          </div>
+
+          {isSelected && (
+            <div className="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-[calc(100%-8px)] bg-ods-accent rounded-l" />
+          )}
+        </div>
+      </div>
+
+      {hasChildren && isExpanded && (
+        <div className="space-y-1">
+          {node.children!.map(child => (
+            <MobileNavigationItem
+              key={child.id}
+              node={child}
+              selectedPath={selectedPath}
+              expandedNodes={expandedNodes}
+              onNodeClick={onNodeClick}
+              onToggleExpand={onToggleExpand}
+              level={level + 1}
+              folderIndexFile={folderIndexFile}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}