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

package/src/components/common/feedback/WorkProgressPanel.tsx

@@ -1,156 +1,156 @@
-import { styled } from 'styled-components'
-
-export interface WorkProgressMetric {
-  label: string
-  value: number | string
-}
-
-export interface WorkProgressPanelProps {
-  title: string
-  note?: string
-  metrics?: WorkProgressMetric[]
-  activity?: string[]
-  emptyActivityLabel?: string
-  className?: string
-}
-
-const Panel = styled.div`
-  border: 1px solid rgba(210, 217, 226, 0.92);
-  border-radius: 8px;
-  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
-  padding: 22px;
-  display: grid;
-  gap: 18px;
-`
-
-const Top = styled.div`
-  display: flex;
-  align-items: start;
-  justify-content: space-between;
-  gap: 18px;
-`
-
-const Title = styled.div`
-  color: #2e3338;
-  font-size: 18px;
-  font-weight: 800;
-  line-height: 1.2;
-`
-
-const Note = styled.div`
-  margin-top: 5px;
-  color: #65707d;
-  font-size: 13px;
-  line-height: 1.45;
-`
-
-const Pulse = styled.div`
-  width: 42px;
-  height: 42px;
-  flex: 0 0 auto;
-  border-radius: 50%;
-  border: 2px solid #d7dee7;
-  border-top-color: #5f77a4;
-  animation: work-progress-spin 1.1s linear infinite;
-
-  @keyframes work-progress-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`
-
-const Metrics = styled.div<{ $count: number }>`
-  display: grid;
-  grid-template-columns: repeat(
-    ${({ $count }) => Math.max(1, Math.min($count, 4))},
-    minmax(0, 1fr)
-  );
-  gap: 10px;
-
-  @media (max-width: 720px) {
-    grid-template-columns: 1fr;
-  }
-`
-
-const Metric = styled.div`
-  border-top: 1px solid #e2e7ee;
-  padding-top: 9px;
-  color: #8a94a1;
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-
-  strong {
-    display: block;
-    color: #2e3338;
-    font-size: 22px;
-    line-height: 1;
-    letter-spacing: 0;
-  }
-`
-
-const Activity = styled.div`
-  display: grid;
-  gap: 7px;
-  color: #65707d;
-  font-size: 12px;
-  line-height: 1.35;
-`
-
-const ActivityItem = styled.div`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 8px;
-  align-items: baseline;
-
-  &::before {
-    content: '';
-    width: 6px;
-    height: 6px;
-    border-radius: 999px;
-    background: #7b91b8;
-    transform: translateY(-1px);
-  }
-`
-
-export function WorkProgressPanel({
-  title,
-  note,
-  metrics = [],
-  activity = [],
-  emptyActivityLabel = 'Waiting for the first change…',
-  className,
-}: WorkProgressPanelProps): React.ReactElement {
-  return (
-    <Panel className={className}>
-      <Top>
-        <div>
-          <Title>{title}</Title>
-          {note ? <Note>{note}</Note> : null}
-        </div>
-        <Pulse aria-hidden="true" />
-      </Top>
-      {metrics.length ? (
-        <Metrics $count={metrics.length}>
-          {metrics.map(item => (
-            <Metric key={item.label}>
-              <strong>{item.value}</strong>
-              {item.label}
-            </Metric>
-          ))}
-        </Metrics>
-      ) : null}
-      <Activity>
-        {activity.length > 0 ? (
-          activity.map((item, index) => (
-            <ActivityItem key={`${index}-${item}`}>{item}</ActivityItem>
-          ))
-        ) : (
-          <ActivityItem>{emptyActivityLabel}</ActivityItem>
-        )}
-      </Activity>
-    </Panel>
-  )
-}
+import { styled } from 'styled-components'
+
+export interface WorkProgressMetric {
+  label: string
+  value: number | string
+}
+
+export interface WorkProgressPanelProps {
+  title: string
+  note?: string
+  metrics?: WorkProgressMetric[]
+  activity?: string[]
+  emptyActivityLabel?: string
+  className?: string
+}
+
+const Panel = styled.div`
+  border: 1px solid rgba(210, 217, 226, 0.92);
+  border-radius: 8px;
+  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
+  padding: 22px;
+  display: grid;
+  gap: 18px;
+`
+
+const Top = styled.div`
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 18px;
+`
+
+const Title = styled.div`
+  color: #2e3338;
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 1.2;
+`
+
+const Note = styled.div`
+  margin-top: 5px;
+  color: #65707d;
+  font-size: 13px;
+  line-height: 1.45;
+`
+
+const Pulse = styled.div`
+  width: 42px;
+  height: 42px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  border: 2px solid #d7dee7;
+  border-top-color: #5f77a4;
+  animation: work-progress-spin 1.1s linear infinite;
+
+  @keyframes work-progress-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`
+
+const Metrics = styled.div<{ $count: number }>`
+  display: grid;
+  grid-template-columns: repeat(
+    ${({ $count }) => Math.max(1, Math.min($count, 4))},
+    minmax(0, 1fr)
+  );
+  gap: 10px;
+
+  @media (max-width: 720px) {
+    grid-template-columns: 1fr;
+  }
+`
+
+const Metric = styled.div`
+  border-top: 1px solid #e2e7ee;
+  padding-top: 9px;
+  color: #8a94a1;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+
+  strong {
+    display: block;
+    color: #2e3338;
+    font-size: 22px;
+    line-height: 1;
+    letter-spacing: 0;
+  }
+`
+
+const Activity = styled.div`
+  display: grid;
+  gap: 7px;
+  color: #65707d;
+  font-size: 12px;
+  line-height: 1.35;
+`
+
+const ActivityItem = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px;
+  align-items: baseline;
+
+  &::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: #7b91b8;
+    transform: translateY(-1px);
+  }
+`
+
+export function WorkProgressPanel({
+  title,
+  note,
+  metrics = [],
+  activity = [],
+  emptyActivityLabel = 'Waiting for the first change…',
+  className,
+}: WorkProgressPanelProps): React.ReactElement {
+  return (
+    <Panel className={className}>
+      <Top>
+        <div>
+          <Title>{title}</Title>
+          {note ? <Note>{note}</Note> : null}
+        </div>
+        <Pulse aria-hidden="true" />
+      </Top>
+      {metrics.length ? (
+        <Metrics $count={metrics.length}>
+          {metrics.map(item => (
+            <Metric key={item.label}>
+              <strong>{item.value}</strong>
+              {item.label}
+            </Metric>
+          ))}
+        </Metrics>
+      ) : null}
+      <Activity>
+        {activity.length > 0 ? (
+          activity.map((item, index) => (
+            <ActivityItem key={`${index}-${item}`}>{item}</ActivityItem>
+          ))
+        ) : (
+          <ActivityItem>{emptyActivityLabel}</ActivityItem>
+        )}
+      </Activity>
+    </Panel>
+  )
+}

package/src/components/common/feedback/index.ts

@@ -1,33 +1,33 @@
-export { Badge, type BadgeProps, type BadgeTone } from './Badge.js'
-export {
-  CapabilityPills,
-  type CapabilityPillsProps,
-} from './CapabilityPills.js'
-export {
-  EmptyState,
-  type EmptyStateAction,
-  type EmptyStateProps,
-  type EmptyStateTone,
-  type EmptyStateVariant,
-} from './EmptyState.js'
-export { InfoHint, type InfoHintProps } from './InfoHint.js'
-export {
-  InlineBanner,
-  type InlineBannerProps,
-  type InlineBannerVariant,
-} from './InlineBanner.js'
-export {
-  PlatformChip,
-  type PlatformChipProps,
-  type PlatformChipTone,
-} from './PlatformChip.js'
-export {
-  QuietPill,
-  type QuietPillProps,
-  type QuietPillTone,
-} from './QuietPill.js'
-export {
-  WorkProgressPanel,
-  type WorkProgressMetric,
-  type WorkProgressPanelProps,
-} from './WorkProgressPanel.js'
+export { Badge, type BadgeProps, type BadgeTone } from './Badge.js'
+export {
+  CapabilityPills,
+  type CapabilityPillsProps,
+} from './CapabilityPills.js'
+export {
+  EmptyState,
+  type EmptyStateAction,
+  type EmptyStateProps,
+  type EmptyStateTone,
+  type EmptyStateVariant,
+} from './EmptyState.js'
+export { InfoHint, type InfoHintProps } from './InfoHint.js'
+export {
+  InlineBanner,
+  type InlineBannerProps,
+  type InlineBannerVariant,
+} from './InlineBanner.js'
+export {
+  PlatformChip,
+  type PlatformChipProps,
+  type PlatformChipTone,
+} from './PlatformChip.js'
+export {
+  QuietPill,
+  type QuietPillProps,
+  type QuietPillTone,
+} from './QuietPill.js'
+export {
+  WorkProgressPanel,
+  type WorkProgressMetric,
+  type WorkProgressPanelProps,
+} from './WorkProgressPanel.js'

package/src/components/common/files/FileTable.tsx

@@ -0,0 +1,225 @@
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import { extensionIconMap } from '../../../utils/extensionIconMap.js'
+import { normalizeExtension, switchOn } from '../../../utils/generalUtils.js'
+import type { LucideIcon } from 'lucide-react'
+import { styled } from 'styled-components'
+
+export type FileTableRowKind = 'file' | 'folder' | 'package'
+
+export interface FileTableRow {
+  id: string
+  name: string
+  kind: FileTableRowKind
+  extension?: string
+  mimeType?: string
+  byteLength?: number
+  updatedAt?: string
+  meta?: string
+}
+
+export interface FileTableProps {
+  rows: readonly FileTableRow[]
+  selectedId?: string | null
+  onOpenRow?: (row: FileTableRow) => void
+  onSelectRow?: (row: FileTableRow) => void
+  renderActions?: (row: FileTableRow) => React.ReactNode
+  emptyMessage?: string
+}
+
+const StyledFileTable = styled.div`
+  min-width: 0;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 8px;
+  background: var(--platform-colors-surface);
+  overflow: hidden;
+`
+
+const StyledHeader = styled.div`
+  display: grid;
+  grid-template-columns: minmax(220px, 1fr) 120px 110px 150px minmax(
+      140px,
+      auto
+    );
+  gap: var(--platform-spacing-sm);
+  align-items: center;
+  min-height: 34px;
+  padding: 0 var(--platform-spacing-md);
+  border-bottom: 1px solid var(--platform-colors-border-subtle);
+  color: var(--platform-colors-text-secondary);
+  background: color-mix(
+    in srgb,
+    var(--platform-colors-surface-hover) 54%,
+    transparent
+  );
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+`
+
+const StyledRow = styled.button<{ $active?: boolean }>`
+  display: grid;
+  grid-template-columns: minmax(220px, 1fr) 120px 110px 150px minmax(
+      140px,
+      auto
+    );
+  gap: var(--platform-spacing-sm);
+  align-items: center;
+  width: 100%;
+  min-height: 42px;
+  padding: 0 var(--platform-spacing-md);
+  border: 0;
+  border-bottom: 1px solid var(--platform-colors-border-subtle);
+  background: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-accent-muted)'
+      : 'var(--platform-colors-surface)'};
+  color: var(--platform-colors-text);
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover);
+  }
+
+  &:last-child {
+    border-bottom: 0;
+  }
+`
+
+const StyledName = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: 650;
+
+  svg {
+    flex: 0 0 auto;
+    color: var(--platform-colors-text-secondary);
+  }
+`
+
+const StyledNameText = styled.span`
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+`
+
+const StyledPrimary = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledMeta = styled.span`
+  overflow: hidden;
+  color: var(--platform-colors-text-secondary);
+  font-size: 11px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledCell = styled.span<{ $align?: 'center' | 'right' }>`
+  min-width: 0;
+  overflow: hidden;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  text-align: ${({ $align = 'left' }) => $align};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledActions = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+`
+
+const StyledEmpty = styled.div`
+  padding: var(--platform-spacing-xl);
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  text-align: center;
+`
+
+function iconForRow(row: FileTableRow): LucideIcon {
+  if (row.kind === 'folder') return extensionIconMap.dir ?? extensionIconMap._
+  const extension = row.extension ?? row.name.split('.').pop() ?? ''
+  return (
+    switchOn(normalizeExtension(extension), extensionIconMap) ??
+    extensionIconMap._
+  )
+}
+
+function typeLabel(row: FileTableRow): string {
+  if (row.kind === 'folder') return 'Folder'
+  if (row.kind === 'package') return 'Package'
+  return row.mimeType || 'File'
+}
+
+function formatBytes(byteLength?: number): string {
+  if (byteLength === undefined) return '—'
+  if (byteLength < 1024) return `${byteLength} B`
+  if (byteLength < 1024 * 1024) return `${Math.round(byteLength / 1024)} KB`
+  return `${(byteLength / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function formatDate(value?: string): string {
+  if (!value) return '—'
+  return new Date(value).toLocaleDateString()
+}
+
+export function FileTable({
+  rows,
+  selectedId,
+  onOpenRow,
+  onSelectRow,
+  renderActions,
+  emptyMessage = 'No files.',
+}: FileTableProps): React.ReactElement {
+  return (
+    <StyledFileTable>
+      <StyledHeader>
+        <span>Name</span>
+        <span>Type</span>
+        <span>Size</span>
+        <span>Modified</span>
+        <span>Actions</span>
+      </StyledHeader>
+      {rows.length === 0 ? <StyledEmpty>{emptyMessage}</StyledEmpty> : null}
+      {rows.map(row => (
+        <StyledRow
+          key={row.id}
+          type="button"
+          $active={row.id === selectedId}
+          onClick={() => onSelectRow?.(row)}
+          onDoubleClick={() => onOpenRow?.(row)}
+        >
+          <StyledName>
+            <PlatformIcon icon={iconForRow(row)} size={16} strokeWidth={1.75} />
+            <StyledNameText>
+              <StyledPrimary>{row.name}</StyledPrimary>
+              {row.meta ? <StyledMeta>{row.meta}</StyledMeta> : null}
+            </StyledNameText>
+          </StyledName>
+          <StyledCell>{typeLabel(row)}</StyledCell>
+          <StyledCell>{formatBytes(row.byteLength)}</StyledCell>
+          <StyledCell>{formatDate(row.updatedAt)}</StyledCell>
+          <StyledActions
+            onClick={event => {
+              event.stopPropagation()
+            }}
+          >
+            {renderActions?.(row)}
+          </StyledActions>
+        </StyledRow>
+      ))}
+    </StyledFileTable>
+  )
+}

package/src/components/common/inputs/BareInput.tsx

@@ -1,31 +1,31 @@
-import { css, styled } from 'styled-components'
-
-/** Reset input chrome — compose with `styled(BareInput)` or spread `bareInputStyles`. */
-export const bareInputStyles = css`
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  color: var(--platform-colors-text);
-  font: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  outline: none;
-
-  &::placeholder {
-    color: var(--platform-colors-text-secondary);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-`
-
-export const BareInput = styled.input`
-  ${bareInputStyles}
-`
+import { css, styled } from 'styled-components'
+
+/** Reset input chrome — compose with `styled(BareInput)` or spread `bareInputStyles`. */
+export const bareInputStyles = css`
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: var(--platform-typography-line-height-base, 1.35);
+  outline: none;
+
+  &::placeholder {
+    color: var(--platform-colors-text-secondary);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+`
+
+export const BareInput = styled.input`
+  ${bareInputStyles}
+`

package/src/components/common/inputs/BareTextarea.tsx

@@ -1,10 +1,10 @@
-import { css, styled } from 'styled-components'
-import { bareTextareaControlStyles } from './fieldStyles.js'
-
-export const bareTextareaStyles = css`
-  ${bareTextareaControlStyles}
-`
-
-export const BareTextarea = styled.textarea`
-  ${bareTextareaStyles}
-`
+import { css, styled } from 'styled-components'
+import { bareTextareaControlStyles } from './fieldStyles.js'
+
+export const bareTextareaStyles = css`
+  ${bareTextareaControlStyles}
+`
+
+export const BareTextarea = styled.textarea`
+  ${bareTextareaStyles}
+`