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

package/src/components/assets/asset-library/sidebar/AssetLibrarySidebar.tsx

@@ -1,48 +1,48 @@
-import type {
-  AssetLibraryActionsModel,
-  AssetLibraryListModel,
-} from '../types.js'
-import { StyledAssetLibrarySidebar } from '../layout/assetLibraryLayout.js'
-import { AssetLibraryList } from './AssetLibraryList.js'
-import { AssetLibraryListStatus } from './AssetLibraryListStatus.js'
-import { AssetLibrarySidebarActions } from './AssetLibrarySidebarActions.js'
-import { AssetLibrarySidebarToolbar } from './AssetLibrarySidebarToolbar.js'
-
-export interface AssetLibrarySidebarProps {
-  collectionPath: string
-  collectionLabel: string
-  insertTargetLabel: string
-  currentDocumentFile?: string | null
-  currentDocumentTitle?: string | null
-  list: AssetLibraryListModel
-  actions: AssetLibraryActionsModel
-}
-
-export function AssetLibrarySidebar({
-  collectionPath,
-  collectionLabel,
-  insertTargetLabel,
-  currentDocumentFile,
-  currentDocumentTitle,
-  list,
-  actions,
-}: AssetLibrarySidebarProps): React.ReactElement {
-  return (
-    <StyledAssetLibrarySidebar>
-      <AssetLibrarySidebarToolbar
-        collectionPath={collectionPath}
-        collectionLabel={collectionLabel}
-        insertTargetLabel={insertTargetLabel}
-        currentDocumentFile={currentDocumentFile}
-        currentDocumentTitle={currentDocumentTitle}
-        list={list}
-      />
-      <AssetLibrarySidebarActions
-        actions={actions}
-        listLoading={list.loading}
-      />
-      <AssetLibraryList list={list} insertTargetLabel={insertTargetLabel} />
-      {list.status ? <AssetLibraryListStatus status={list.status} /> : null}
-    </StyledAssetLibrarySidebar>
-  )
-}
+import type {
+  AssetLibraryActionsModel,
+  AssetLibraryListModel,
+} from '../types.js'
+import { StyledAssetLibrarySidebar } from '../layout/assetLibraryLayout.js'
+import { AssetLibraryList } from './AssetLibraryList.js'
+import { AssetLibraryListStatus } from './AssetLibraryListStatus.js'
+import { AssetLibrarySidebarActions } from './AssetLibrarySidebarActions.js'
+import { AssetLibrarySidebarToolbar } from './AssetLibrarySidebarToolbar.js'
+
+export interface AssetLibrarySidebarProps {
+  collectionPath: string
+  collectionLabel: string
+  insertTargetLabel: string
+  currentDocumentFile?: string | null
+  currentDocumentTitle?: string | null
+  list: AssetLibraryListModel
+  actions: AssetLibraryActionsModel
+}
+
+export function AssetLibrarySidebar({
+  collectionPath,
+  collectionLabel,
+  insertTargetLabel,
+  currentDocumentFile,
+  currentDocumentTitle,
+  list,
+  actions,
+}: AssetLibrarySidebarProps): React.ReactElement {
+  return (
+    <StyledAssetLibrarySidebar>
+      <AssetLibrarySidebarToolbar
+        collectionPath={collectionPath}
+        collectionLabel={collectionLabel}
+        insertTargetLabel={insertTargetLabel}
+        currentDocumentFile={currentDocumentFile}
+        currentDocumentTitle={currentDocumentTitle}
+        list={list}
+      />
+      <AssetLibrarySidebarActions
+        actions={actions}
+        listLoading={list.loading}
+      />
+      <AssetLibraryList list={list} insertTargetLabel={insertTargetLabel} />
+      {list.status ? <AssetLibraryListStatus status={list.status} /> : null}
+    </StyledAssetLibrarySidebar>
+  )
+}

package/src/components/assets/asset-library/sidebar/AssetLibrarySidebarActions.tsx

@@ -1,38 +1,38 @@
-import { Upload } from 'lucide-react'
-import { styled } from 'styled-components'
-import { Button } from '../../../common/buttons/Button.js'
-import { PlatformIcon } from '../../../chrome/PlatformIcon.js'
-import type { AssetLibraryActionsModel } from '../types.js'
-
-export interface AssetLibrarySidebarActionsProps {
-  actions: AssetLibraryActionsModel
-  listLoading: boolean
-}
-
-const StyledActionRow = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--platform-spacing-xs);
-  padding: 8px 24px 14px;
-`
-
-export function AssetLibrarySidebarActions({
-  actions,
-  listLoading,
-}: AssetLibrarySidebarActionsProps): React.ReactElement {
-  return (
-    <StyledActionRow>
-      <Button
-        type="button"
-        variant="text"
-        size="sm"
-        loading={actions.busy === 'uploading'}
-        disabled={listLoading || Boolean(actions.busy)}
-        onClick={() => void actions.uploadAsset()}
-      >
-        <PlatformIcon icon={Upload} size={14} />
-        Upload image
-      </Button>
-    </StyledActionRow>
-  )
-}
+import { Upload } from 'lucide-react'
+import { styled } from 'styled-components'
+import { Button } from '../../../common/buttons/Button.js'
+import { PlatformIcon } from '../../../chrome/PlatformIcon.js'
+import type { AssetLibraryActionsModel } from '../types.js'
+
+export interface AssetLibrarySidebarActionsProps {
+  actions: AssetLibraryActionsModel
+  listLoading: boolean
+}
+
+const StyledActionRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-xs);
+  padding: 8px 24px 14px;
+`
+
+export function AssetLibrarySidebarActions({
+  actions,
+  listLoading,
+}: AssetLibrarySidebarActionsProps): React.ReactElement {
+  return (
+    <StyledActionRow>
+      <Button
+        type="button"
+        variant="text"
+        size="sm"
+        loading={actions.busy === 'uploading'}
+        disabled={listLoading || Boolean(actions.busy)}
+        onClick={() => void actions.uploadAsset()}
+      >
+        <PlatformIcon icon={Upload} size={14} />
+        Upload image
+      </Button>
+    </StyledActionRow>
+  )
+}

package/src/components/assets/asset-library/sidebar/AssetLibrarySidebarToolbar.tsx

@@ -1,78 +1,78 @@
-import { styled } from 'styled-components'
-import { SearchField } from '../../../common/inputs/SearchField.js'
-import { Text } from '../../../common/typography/Text.js'
-import type { AssetLibraryListModel } from '../types.js'
-import { AssetLibraryFilterPills } from './AssetLibraryFilterPills.js'
-
-export interface AssetLibrarySidebarToolbarProps {
-  collectionPath: string
-  collectionLabel: string
-  insertTargetLabel: string
-  currentDocumentFile?: string | null
-  currentDocumentTitle?: string | null
-  list: Pick<
-    AssetLibraryListModel,
-    | 'query'
-    | 'filter'
-    | 'sortMode'
-    | 'sortOptions'
-    | 'setQuery'
-    | 'setFilter'
-    | 'setSortMode'
-  >
-}
-
-const StyledToolbar = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-width: 0;
-  padding: 20px 24px 16px;
-  border-bottom: 1px solid var(--platform-colors-border);
-`
-
-const StyledHeading = styled(Text)`
-  margin: 0;
-  color: var(--platform-colors-text);
-  font-size: var(--platform-typography-font-size-sm);
-  font-weight: var(--platform-typography-font-weight-medium);
-`
-
-const StyledHint = styled(Text)`
-  margin: -4px 0 2px;
-  max-width: 34ch;
-  color: var(--platform-colors-text-secondary);
-  font-size: var(--platform-typography-font-size-xs);
-  line-height: 1.45;
-`
-
-export function AssetLibrarySidebarToolbar({
-  collectionLabel,
-  currentDocumentFile,
-  currentDocumentTitle,
-  list,
-}: AssetLibrarySidebarToolbarProps): React.ReactElement {
-  const hasDocumentScope = Boolean(currentDocumentTitle ?? currentDocumentFile)
-
-  return (
-    <StyledToolbar>
-      <StyledHeading as="h3">{collectionLabel} assets</StyledHeading>
-      {hasDocumentScope ? (
-        <StyledHint as="p">This document first, then the wider library.</StyledHint>
-      ) : null}
-      <SearchField
-        value={list.query}
-        onValueChange={list.setQuery}
-        placeholder="Search assets"
-        aria-label="Search assets"
-      />
-      <AssetLibraryFilterPills
-        filter={list.filter}
-        sortMode={list.sortMode}
-        sortOptions={list.sortOptions}
-        onFilterChange={list.setFilter}
-        onSortModeChange={list.setSortMode}
-      />
-    </StyledToolbar>
-  )
-}
+import { styled } from 'styled-components'
+import { SearchField } from '../../../common/inputs/SearchField.js'
+import { Text } from '../../../common/typography/Text.js'
+import type { AssetLibraryListModel } from '../types.js'
+import { AssetLibraryFilterPills } from './AssetLibraryFilterPills.js'
+
+export interface AssetLibrarySidebarToolbarProps {
+  collectionPath: string
+  collectionLabel: string
+  insertTargetLabel: string
+  currentDocumentFile?: string | null
+  currentDocumentTitle?: string | null
+  list: Pick<
+    AssetLibraryListModel,
+    | 'query'
+    | 'filter'
+    | 'sortMode'
+    | 'sortOptions'
+    | 'setQuery'
+    | 'setFilter'
+    | 'setSortMode'
+  >
+}
+
+const StyledToolbar = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid var(--platform-colors-border);
+`
+
+const StyledHeading = styled(Text)`
+  margin: 0;
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: var(--platform-typography-font-weight-medium);
+`
+
+const StyledHint = styled(Text)`
+  margin: -4px 0 2px;
+  max-width: 34ch;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  line-height: 1.45;
+`
+
+export function AssetLibrarySidebarToolbar({
+  collectionLabel,
+  currentDocumentFile,
+  currentDocumentTitle,
+  list,
+}: AssetLibrarySidebarToolbarProps): React.ReactElement {
+  const hasDocumentScope = Boolean(currentDocumentTitle ?? currentDocumentFile)
+
+  return (
+    <StyledToolbar>
+      <StyledHeading as="h3">{collectionLabel} assets</StyledHeading>
+      {hasDocumentScope ? (
+        <StyledHint as="p">This document first, then the wider library.</StyledHint>
+      ) : null}
+      <SearchField
+        value={list.query}
+        onValueChange={list.setQuery}
+        placeholder="Search assets"
+        aria-label="Search assets"
+      />
+      <AssetLibraryFilterPills
+        filter={list.filter}
+        sortMode={list.sortMode}
+        sortOptions={list.sortOptions}
+        onFilterChange={list.setFilter}
+        onSortModeChange={list.setSortMode}
+      />
+    </StyledToolbar>
+  )
+}

package/src/components/assets/asset-library/sidebar/AssetListThumbnail.tsx

@@ -1,86 +1,86 @@
-import { File } from 'lucide-react'
-import { styled } from 'styled-components'
-import { usePlatformFileBinaryDataUrl } from '../../../../bridge/react/usePlatformFileBinaryDataUrl.js'
-import type { PlatformAssetSummary } from '../../../../bridge/types.js'
-import { PlatformIcon } from '../../../chrome/PlatformIcon.js'
-import { Text } from '../../../common/typography/Text.js'
-import {
-  inlineKindShortLabel,
-  isFileThumbnailAsset,
-} from '../utils/assetLibraryUtils.js'
-
-const StyledThumb = styled.div`
-  display: grid;
-  place-items: center;
-  width: 72px;
-  height: 54px;
-  border: 1px solid rgb(from var(--platform-colors-border) r g b / 0.72);
-  border-radius: 6px;
-  background: var(--platform-colors-app-viewport, var(--platform-colors-bg));
-  overflow: hidden;
-
-  img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-`
-
-const StyledKindLabel = styled.span`
-  font-size: var(--platform-typography-font-size-xs);
-  font-weight: var(--platform-typography-font-weight-medium);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--platform-colors-text-secondary);
-`
-
-export interface AssetListThumbnailProps {
-  asset: PlatformAssetSummary
-}
-
-export function AssetListThumbnail({
-  asset,
-}: AssetListThumbnailProps): React.ReactElement {
-  const loadThumbnail = isFileThumbnailAsset(asset)
-  const preview = usePlatformFileBinaryDataUrl(
-    asset.absolutePath,
-    loadThumbnail,
-  )
-
-  if (!loadThumbnail) {
-    return (
-      <StyledThumb aria-hidden>
-        {asset.kind === 'other' ? (
-          <PlatformIcon icon={File} size={16} />
-        ) : (
-          <StyledKindLabel>{inlineKindShortLabel(asset.kind)}</StyledKindLabel>
-        )}
-      </StyledThumb>
-    )
-  }
-
-  if (preview.loading) {
-    return (
-      <StyledThumb aria-hidden>
-        <Text size="sm" tone="secondary">
-          …
-        </Text>
-      </StyledThumb>
-    )
-  }
-
-  if (preview.src) {
-    return (
-      <StyledThumb aria-hidden>
-        <img src={preview.src} alt="" />
-      </StyledThumb>
-    )
-  }
-
-  return (
-    <StyledThumb aria-hidden>
-      <PlatformIcon icon={File} size={16} />
-    </StyledThumb>
-  )
-}
+import { File } from 'lucide-react'
+import { styled } from 'styled-components'
+import { usePlatformFileBinaryDataUrl } from '../../../../bridge/react/usePlatformFileBinaryDataUrl.js'
+import type { PlatformAssetSummary } from '../../../../bridge/types.js'
+import { PlatformIcon } from '../../../chrome/PlatformIcon.js'
+import { Text } from '../../../common/typography/Text.js'
+import {
+  inlineKindShortLabel,
+  isFileThumbnailAsset,
+} from '../utils/assetLibraryUtils.js'
+
+const StyledThumb = styled.div`
+  display: grid;
+  place-items: center;
+  width: 72px;
+  height: 54px;
+  border: 1px solid rgb(from var(--platform-colors-border) r g b / 0.72);
+  border-radius: 6px;
+  background: var(--platform-colors-app-viewport, var(--platform-colors-bg));
+  overflow: hidden;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`
+
+const StyledKindLabel = styled.span`
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: var(--platform-typography-font-weight-medium);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--platform-colors-text-secondary);
+`
+
+export interface AssetListThumbnailProps {
+  asset: PlatformAssetSummary
+}
+
+export function AssetListThumbnail({
+  asset,
+}: AssetListThumbnailProps): React.ReactElement {
+  const loadThumbnail = isFileThumbnailAsset(asset)
+  const preview = usePlatformFileBinaryDataUrl(
+    asset.absolutePath,
+    loadThumbnail,
+  )
+
+  if (!loadThumbnail) {
+    return (
+      <StyledThumb aria-hidden>
+        {asset.kind === 'other' ? (
+          <PlatformIcon icon={File} size={16} />
+        ) : (
+          <StyledKindLabel>{inlineKindShortLabel(asset.kind)}</StyledKindLabel>
+        )}
+      </StyledThumb>
+    )
+  }
+
+  if (preview.loading) {
+    return (
+      <StyledThumb aria-hidden>
+        <Text size="sm" tone="secondary">
+          …
+        </Text>
+      </StyledThumb>
+    )
+  }
+
+  if (preview.src) {
+    return (
+      <StyledThumb aria-hidden>
+        <img src={preview.src} alt="" />
+      </StyledThumb>
+    )
+  }
+
+  return (
+    <StyledThumb aria-hidden>
+      <PlatformIcon icon={File} size={16} />
+    </StyledThumb>
+  )
+}