@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1

package/src/components/common/preview/FileTextPreview.tsx

@@ -0,0 +1,96 @@
+import { styled } from 'styled-components'
+import { FlexCol } from '../containers/flex.js'
+import { Text } from '../typography/Text.js'
+import {
+  previewFrameCss,
+  previewViewportFrameCss,
+  StyledPreviewStatus,
+} from './previewLayout.js'
+
+export interface FileTextPreviewProps {
+  content: string | null
+  truncated?: boolean
+  loading?: boolean
+  error?: string | null
+  fillViewport?: boolean
+}
+
+//#region styled-components
+
+const StyledTextPreview = styled(FlexCol)<{ $fillViewport?: boolean }>`
+  ${({ $fillViewport }) =>
+    $fillViewport ? previewViewportFrameCss : previewFrameCss}
+  min-height: 0;
+  max-height: ${({ $fillViewport }) => ($fillViewport ? 'none' : '240px')};
+  flex: ${({ $fillViewport }) => ($fillViewport ? '1' : '0 1 auto')};
+  overflow: auto;
+  border: ${({ $fillViewport }) =>
+    $fillViewport ? '0' : '1px solid var(--platform-colors-border)'};
+  background: var(--platform-colors-app-viewport);
+
+  pre {
+    margin: 0;
+    padding: ${({ $fillViewport }) =>
+      $fillViewport ? '0' : 'var(--platform-spacing-sm)'};
+    font-family: var(--platform-typography-font-family-mono);
+    font-size: var(--platform-typography-font-size-sm);
+    line-height: var(--platform-typography-line-height-base);
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+    color: var(--platform-colors-text);
+  }
+`
+
+//#endregion
+
+export function FileTextPreview({
+  content,
+  truncated = false,
+  loading = false,
+  error = null,
+  fillViewport = false,
+}: FileTextPreviewProps): React.ReactElement {
+  if (loading) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="secondary">
+          Loading preview…
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  if (error) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="danger">
+          {error}
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  if (!content) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="secondary">
+          No text preview available.
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  return (
+    <StyledTextPreview $fillViewport={fillViewport}>
+      <pre>{content}</pre>
+      {truncated ? (
+        <StyledPreviewStatus>
+          <Text size="sm" tone="secondary">
+            Preview truncated.
+          </Text>
+        </StyledPreviewStatus>
+      ) : null}
+    </StyledTextPreview>
+  )
+}

package/src/components/common/preview/FileVideoPreview.tsx

@@ -0,0 +1,87 @@
+import { styled } from 'styled-components'
+import { FlexCol } from '../containers/flex.js'
+import { Text } from '../typography/Text.js'
+import {
+  previewFrameCss,
+  previewViewportFrameCss,
+  StyledPreviewStatus,
+} from './previewLayout.js'
+
+export interface FileVideoPreviewProps {
+  src: string | null
+  title?: string
+  loading?: boolean
+  error?: string | null
+  fillViewport?: boolean
+}
+
+//#region styled-components
+
+const StyledVideoPreview = styled(FlexCol)<{ $fillViewport?: boolean }>`
+  ${({ $fillViewport }) =>
+    $fillViewport ? previewViewportFrameCss : previewFrameCss}
+  align-items: center;
+  justify-content: center;
+  min-height: ${({ $fillViewport }) => ($fillViewport ? '0' : '160px')};
+  max-height: ${({ $fillViewport }) => ($fillViewport ? 'none' : '320px')};
+  flex: ${({ $fillViewport }) => ($fillViewport ? '1' : '0 1 auto')};
+  overflow: hidden;
+  border: ${({ $fillViewport }) =>
+    $fillViewport ? '0' : '1px solid var(--platform-colors-border)'};
+  background: var(--platform-colors-app-viewport);
+
+  video {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: ${({ $fillViewport }) => ($fillViewport ? '100%' : 'auto')};
+    max-height: ${({ $fillViewport }) => ($fillViewport ? '100%' : '320px')};
+    background: #000;
+  }
+`
+
+//#endregion
+
+export function FileVideoPreview({
+  src,
+  title = '',
+  loading = false,
+  error = null,
+  fillViewport = false,
+}: FileVideoPreviewProps): React.ReactElement {
+  if (loading) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="secondary">
+          Loading preview…
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  if (error) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="danger">
+          {error}
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  if (!src) {
+    return (
+      <StyledPreviewStatus>
+        <Text size="sm" tone="secondary">
+          No video preview available.
+        </Text>
+      </StyledPreviewStatus>
+    )
+  }
+
+  return (
+    <StyledVideoPreview $fillViewport={fillViewport}>
+      <video src={src} controls preload="metadata" title={title} />
+    </StyledVideoPreview>
+  )
+}

package/src/components/common/preview/PlatformFilePreview.tsx

@@ -0,0 +1,166 @@
+import { styled } from 'styled-components'
+import {
+  entrySupportsFilePreview,
+  type FilePreviewKind,
+} from '../../../bridge/filePreviewKind.js'
+import {
+  usePlatformFilePreview,
+  type UsePlatformFilePreviewResult,
+} from '../../../bridge/react/usePlatformFilePreview.js'
+import type { PlatformFilePreviewEntry } from '../../../bridge/types.js'
+import { Text } from '../typography/Text.js'
+import { FileAudioPreview } from './FileAudioPreview.js'
+import { FileImagePreview } from './FileImagePreview.js'
+import { FilePdfPreview } from './FilePdfPreview.js'
+import { previewFrameCss } from './previewLayout.js'
+import { FileTextPreview } from './FileTextPreview.js'
+import { FileVideoPreview } from './FileVideoPreview.js'
+
+export interface PlatformFilePreviewProps {
+  entry: PlatformFilePreviewEntry | null
+  /** Shell preview tab: PDF iframe fills the viewport. */
+  fillViewport?: boolean
+  /**
+   * Pre-loaded preview state (shell renderer via `platformShell.invoke`).
+   * When omitted, loads via plugin bridge (`usePlatformFilePreview`).
+   */
+  preview?: UsePlatformFilePreviewResult
+  /** Kinds to show an open-in-shell hint instead of inline UI (default: none). */
+  excludeKinds?: readonly FilePreviewKind[]
+}
+
+//#region styled-components
+
+const StyledPreviewBox = styled.div`
+  ${previewFrameCss}
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-xs);
+  padding: var(--platform-spacing-sm);
+  border: 1px solid var(--platform-colors-border);
+  background: var(--platform-colors-app-viewport);
+`
+
+const StyledPreviewBadge = styled.span`
+  display: inline-flex;
+  align-self: flex-start;
+  padding: 2px var(--platform-spacing-sm);
+  border: 1px solid var(--platform-colors-border);
+  font-size: var(--platform-typography-font-size-sm);
+  color: var(--platform-colors-text-secondary);
+  text-transform: capitalize;
+`
+
+//#endregion
+
+function isExcludedKind(
+  kind: FilePreviewKind | null,
+  excludeKinds: readonly FilePreviewKind[],
+): boolean {
+  return kind !== null && excludeKinds.includes(kind)
+}
+
+export function PlatformFilePreview({
+  entry,
+  fillViewport = false,
+  preview: previewProp,
+  excludeKinds = [],
+}: PlatformFilePreviewProps): React.ReactElement | null {
+  const bridgePreview = usePlatformFilePreview(previewProp ? null : entry)
+  const preview = previewProp ?? bridgePreview
+  const { previewKind, textContent, textTruncated, mediaUrl, loading, error } =
+    preview
+
+  if (!entry || !entrySupportsFilePreview(entry)) return null
+
+  if (previewKind === 'folder') {
+    return (
+      <StyledPreviewBox>
+        <StyledPreviewBadge>Folder</StyledPreviewBadge>
+        <Text as="p" size="sm" tone="secondary">
+          Open this folder to browse its contents.
+        </Text>
+      </StyledPreviewBox>
+    )
+  }
+
+  if (isExcludedKind(previewKind, excludeKinds)) {
+    return (
+      <StyledPreviewBox>
+        <StyledPreviewBadge>{previewKind}</StyledPreviewBadge>
+        <Text as="p" size="sm" tone="secondary">
+          Double-click or Open for full preview in a shell tab.
+        </Text>
+      </StyledPreviewBox>
+    )
+  }
+
+  if (previewKind === 'image') {
+    return (
+      <FileImagePreview
+        src={mediaUrl}
+        alt={entry.name}
+        loading={loading}
+        error={error}
+        fillViewport={fillViewport}
+      />
+    )
+  }
+
+  if (previewKind === 'video') {
+    return (
+      <FileVideoPreview
+        src={mediaUrl}
+        title={entry.name}
+        loading={loading}
+        error={error}
+        fillViewport={fillViewport}
+      />
+    )
+  }
+
+  if (previewKind === 'audio') {
+    return (
+      <FileAudioPreview
+        src={mediaUrl}
+        title={entry.name}
+        loading={loading}
+        error={error}
+        fillViewport={fillViewport}
+      />
+    )
+  }
+
+  if (previewKind === 'pdf') {
+    return (
+      <FilePdfPreview
+        src={mediaUrl}
+        title={entry.name}
+        loading={loading}
+        error={error}
+        fillViewport={fillViewport}
+      />
+    )
+  }
+
+  if (previewKind === 'text') {
+    return (
+      <FileTextPreview
+        content={textContent}
+        truncated={textTruncated}
+        loading={loading}
+        error={error}
+        fillViewport={fillViewport}
+      />
+    )
+  }
+
+  return (
+    <StyledPreviewBox>
+      <StyledPreviewBadge>{entry.extension || 'file'}</StyledPreviewBadge>
+      <Text as="p" size="sm" tone="secondary">
+        No inline preview is available yet.
+      </Text>
+    </StyledPreviewBox>
+  )
+}

package/src/components/common/preview/previewLayout.ts

@@ -0,0 +1,27 @@
+import { css, styled } from 'styled-components'
+import { flexPanelBlockCss } from '../containers/flex.js'
+
+/** Preview surfaces inside panel columns — stretch to body, never width: 100%. */
+export const previewFrameCss = css`
+  ${flexPanelBlockCss}
+`
+
+/** Shell preview tab — fill the workspace pane (no inspector thumbnail caps). */
+export const previewViewportFrameCss = css`
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  max-width: 100%;
+  align-self: stretch;
+  box-sizing: border-box;
+`
+
+export const StyledPreviewFrame = styled.div`
+  ${previewFrameCss}
+`
+
+export const StyledPreviewStatus = styled.div`
+  ${previewFrameCss}
+  padding: var(--platform-spacing-sm);
+`

package/src/components/common/render/Each.tsx

@@ -0,0 +1,42 @@
+import { Children, type ReactNode } from 'react'
+
+export interface EachProps<T> {
+  of: readonly T[]
+  as: (item: T, index: number) => ReactNode
+  if?: boolean
+  or?: ReactNode
+}
+
+/** Map `of` to nodes via `as`; keys come from `Children.toArray`, not inline in JSX. */
+export function Each<T>({
+  of,
+  as,
+  if: condition = true,
+  or = null,
+}: EachProps<T>): ReactNode {
+  if (!condition) return or ?? null
+  return Children.toArray(of.map((item, index) => as(item, index)))
+}
+
+export interface EachEntryProps<V> {
+  of: Readonly<Record<string, V>>
+  as: (entry: readonly [string, V], index: number) => ReactNode
+  if?: boolean
+  or?: ReactNode
+}
+
+export function EachEntry<V>({
+  of,
+  as,
+  if: condition = true,
+  or = null,
+}: EachEntryProps<V>): ReactNode {
+  return (
+    <Each
+      of={Object.entries(of) as [string, V][]}
+      as={as}
+      if={condition}
+      or={or}
+    />
+  )
+}