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

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

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

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

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

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