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

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

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

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