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

package/src/components/assets/asset-library/shared/fieldStyles.ts

@@ -0,0 +1,62 @@
+import { styled } from 'styled-components'
+
+/** Shared field chrome — swap for platform form controls later. */
+export const StyledAssetLibraryFieldShell = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--platform-colors-border);
+
+  label span {
+    font-size: var(--platform-typography-font-size-xs, 12px);
+  }
+
+  input,
+  textarea {
+    font-size: var(--platform-typography-font-size-sm, 13px);
+  }
+
+  textarea {
+    min-height: 86px;
+  }
+`
+
+export const StyledAssetLibraryField = styled.label`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-xs);
+  font-size: var(--platform-typography-font-size-xs);
+  color: var(--platform-colors-text-secondary);
+
+  input,
+  textarea {
+    min-height: 30px;
+    padding: var(--platform-spacing-xs) var(--platform-spacing-sm);
+    border: 1px solid var(--platform-colors-border);
+    background: var(--platform-colors-background);
+    color: var(--platform-colors-text);
+    font: inherit;
+    font-size: var(--platform-typography-font-size-sm);
+    border-radius: 0;
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  textarea {
+    min-height: 64px;
+    resize: vertical;
+  }
+`
+
+export const StyledAssetLibrarySourceField = styled(StyledAssetLibraryField)`
+  textarea {
+    min-height: 160px;
+    font-family: var(--platform-typography-font-family-mono);
+    line-height: var(--platform-typography-line-height-base);
+    resize: vertical;
+  }
+`

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

@@ -0,0 +1,89 @@
+import { Button } from '../../../common/buttons/Button.js'
+import {
+  ASSET_KIND_FILTERS,
+  type AssetLibraryFilter,
+  type AssetLibrarySortMode,
+} from '../utils/assetLibraryUtils.js'
+import { styled } from 'styled-components'
+
+export interface AssetLibraryFilterPillsProps {
+  filter: AssetLibraryFilter
+  sortMode: AssetLibrarySortMode
+  sortOptions: readonly { value: AssetLibrarySortMode; label: string }[]
+  onFilterChange: (filter: AssetLibraryFilter) => void
+  onSortModeChange: (sortMode: AssetLibrarySortMode) => void
+}
+
+const StyledFilterRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  line-height: 1.4;
+`
+
+const StyledFilterGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-md);
+`
+
+const StyledFilterBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+`
+
+const StyledFilterLabel = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: var(--platform-typography-font-weight-medium);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+`
+
+export function AssetLibraryFilterPills({
+  filter,
+  sortMode,
+  sortOptions,
+  onFilterChange,
+  onSortModeChange,
+}: AssetLibraryFilterPillsProps): React.ReactElement {
+  return (
+    <StyledFilterGroup>
+      <StyledFilterBlock>
+        <StyledFilterLabel>Show</StyledFilterLabel>
+        <StyledFilterRow>
+          {ASSET_KIND_FILTERS.map(option => (
+            <Button
+              key={option.value}
+              type="button"
+              variant="text"
+              size="sm"
+              selected={filter === option.value}
+              onClick={() => onFilterChange(option.value)}
+            >
+              {option.label}
+            </Button>
+          ))}
+        </StyledFilterRow>
+      </StyledFilterBlock>
+      <StyledFilterBlock>
+        <StyledFilterLabel>Order</StyledFilterLabel>
+        <StyledFilterRow>
+          {sortOptions.map(option => (
+            <Button
+              key={option.value}
+              type="button"
+              variant="text"
+              size="sm"
+              selected={sortMode === option.value}
+              onClick={() => onSortModeChange(option.value)}
+            >
+              {option.label}
+            </Button>
+          ))}
+        </StyledFilterRow>
+      </StyledFilterBlock>
+    </StyledFilterGroup>
+  )
+}

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

@@ -0,0 +1,91 @@
+import { styled } from 'styled-components'
+import { Text } from '../../../common/typography/Text.js'
+import type { AssetLibraryListModel } from '../types.js'
+import { AssetLibraryListRow } from './AssetLibraryListRow.js'
+
+export interface AssetLibraryListProps {
+  list: AssetLibraryListModel
+  insertTargetLabel: string
+}
+
+const StyledList = styled.div`
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 14px 24px 24px;
+`
+
+const StyledSectionHeading = styled.div`
+  padding: var(--platform-spacing-sm) 2px var(--platform-spacing-xs);
+  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);
+  background: transparent;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+`
+
+const StyledEmptyList = styled.div`
+  padding: 22px 0;
+
+  p {
+    margin: 0;
+  }
+
+  p + p {
+    margin-top: 8px;
+    max-width: 34ch;
+    line-height: 1.45;
+  }
+`
+
+export function AssetLibraryList({
+  list,
+  insertTargetLabel,
+}: AssetLibraryListProps): React.ReactElement {
+  const { loading, filteredAssets, sectionedAssets, selectedAsset, assets } =
+    list
+
+  return (
+    <StyledList>
+      {loading ? (
+        <StyledEmptyList>
+          <Text as="p" size="sm" tone="secondary">
+            Loading assets…
+          </Text>
+        </StyledEmptyList>
+      ) : filteredAssets.length === 0 ? (
+        <StyledEmptyList>
+          <Text as="p" size="sm" weight="medium">
+            {assets.length === 0 ? 'No assets yet' : 'No matching assets'}
+          </Text>
+          <Text as="p" size="sm" tone="secondary">
+            {assets.length === 0
+              ? 'Upload or paste images into this workspace to populate the library.'
+              : 'Try a different search or filter.'}
+          </Text>
+        </StyledEmptyList>
+      ) : (
+        sectionedAssets.map(section => (
+          <div key={section.key}>
+            {section.label ? (
+              <StyledSectionHeading>{section.label}</StyledSectionHeading>
+            ) : null}
+            {section.assets.map(asset => (
+              <AssetLibraryListRow
+                key={asset.id}
+                asset={asset}
+                active={asset.id === selectedAsset?.id}
+                insertTargetLabel={insertTargetLabel}
+                onSelect={list.selectAsset}
+              />
+            ))}
+          </div>
+        ))
+      )}
+    </StyledList>
+  )
+}

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

@@ -0,0 +1,99 @@
+import { styled } from 'styled-components'
+import type { PlatformAssetSummary } from '../../../../bridge/types.js'
+import {
+  kindLabel,
+} from '../utils/assetLibraryUtils.js'
+import { AssetListThumbnail } from './AssetListThumbnail.js'
+
+export interface AssetLibraryListRowProps {
+  asset: PlatformAssetSummary
+  active: boolean
+  insertTargetLabel: string
+  onSelect: (assetId: string) => void
+}
+
+const StyledRow = styled.button<{ $active: boolean }>`
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  margin-bottom: 6px;
+  padding: 7px;
+  border: 1px solid
+    ${({ $active }) =>
+      $active
+        ? 'var(--platform-colors-border-strong, var(--platform-colors-border))'
+        : 'transparent'};
+  border-radius: 8px;
+  background: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-surface-hover)'
+      : 'rgb(from var(--platform-colors-surface) r g b / 0.58)'};
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover);
+  }
+`
+
+const StyledRowBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+`
+
+const StyledRowTitle = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: var(--platform-typography-font-weight-medium);
+  color: var(--platform-colors-text);
+`
+
+const StyledRowMeta = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--platform-typography-font-size-xs);
+  color: var(--platform-colors-text-secondary);
+`
+
+const StyledUsage = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--platform-typography-font-size-xs);
+  color: var(--platform-colors-text-tertiary, var(--platform-colors-text-secondary));
+`
+
+export function AssetLibraryListRow({
+  asset,
+  active,
+  insertTargetLabel,
+  onSelect,
+}: AssetLibraryListRowProps): React.ReactElement {
+  return (
+    <StyledRow
+      type="button"
+      $active={active}
+      aria-pressed={active}
+      onClick={() => onSelect(asset.id)}
+    >
+      <AssetListThumbnail asset={asset} />
+      <StyledRowBody>
+        <StyledRowTitle>{asset.label}</StyledRowTitle>
+        <StyledRowMeta>{kindLabel(asset.kind)}</StyledRowMeta>
+        <StyledUsage>
+          {asset.usedIn.length > 0
+            ? `${asset.usedIn.length} placement${asset.usedIn.length === 1 ? '' : 's'}`
+            : `Not placed in this ${insertTargetLabel}`}
+        </StyledUsage>
+      </StyledRowBody>
+    </StyledRow>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { styled } from 'styled-components'
+import { Text } from '../../../common/typography/Text.js'
+import type { AssetLibraryStatus } from '../types.js'
+
+export interface AssetLibraryListStatusProps {
+  status: AssetLibraryStatus
+}
+
+const StyledStatus = styled.div<{ $tone: AssetLibraryStatus['tone'] }>`
+  padding: var(--platform-spacing-sm) var(--platform-spacing-md);
+  border-top: 1px solid var(--platform-colors-border);
+  font-size: var(--platform-typography-font-size-sm);
+  color: ${({ $tone }) => {
+    if ($tone === 'error') return 'var(--platform-colors-danger)'
+    if ($tone === 'success') return 'var(--platform-colors-text)'
+    return 'var(--platform-colors-text-secondary)'
+  }};
+`
+
+export function AssetLibraryListStatus({
+  status,
+}: AssetLibraryListStatusProps): React.ReactElement {
+  return <StyledStatus $tone={status.tone}>{status.message}</StyledStatus>
+}

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

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

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

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

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

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

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

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