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

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

@@ -1,166 +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>
-  )
-}
+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

@@ -1,27 +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);
-`
+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

@@ -1,42 +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}
-    />
-  )
-}
+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}
+    />
+  )
+}