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

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

@@ -0,0 +1,7 @@
+export {
+  EvidenceDossier,
+  type EvidenceDossierProps,
+  type EvidenceFinding,
+  type EvidenceSource,
+  type EvidenceStrength,
+} from './EvidenceDossier.js'

package/src/components/common/tiles/CatalogCard.tsx

@@ -0,0 +1,116 @@
+import { styled } from 'styled-components'
+import { CapabilityPills } from '../feedback/CapabilityPills.js'
+
+export type CatalogCardStatus = 'active' | 'planned'
+
+export interface CatalogCardProps {
+  name: string
+  productName: string
+  description: string
+  status?: CatalogCardStatus
+  capabilities?: string[]
+  footer?: string
+}
+
+//#region styled-components
+
+const StyledCard = styled.article<{ $active: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+  padding: var(--platform-spacing-md);
+  min-width: 0;
+  border: 1px solid
+    ${({ $active }) =>
+      $active
+        ? 'var(--platform-colors-accent)'
+        : 'var(--platform-colors-border)'};
+  border-radius: var(--platform-radius-md);
+  background: ${({ $active }) =>
+    $active
+      ? 'rgb(from var(--platform-colors-accent) r g b / 7%)'
+      : 'var(--platform-colors-surface-hover)'};
+  box-sizing: border-box;
+`
+
+const StyledTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+`
+
+const StyledNameBlock = styled.div`
+  min-width: 0;
+`
+
+const StyledName = styled.div`
+  font-weight: var(--platform-typography-font-weight-medium);
+  color: var(--platform-colors-text);
+`
+
+const StyledProduct = styled.div`
+  margin-top: 2px;
+  font-size: var(--platform-typography-font-size-sm);
+  color: var(--platform-colors-text-disabled);
+`
+
+const StyledStatusBadge = styled.span<{ $active: boolean }>`
+  flex: 0 0 auto;
+  align-self: flex-start;
+  padding: 2px var(--platform-spacing-sm);
+  border-radius: var(--platform-radius-full);
+  background: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-accent)'
+      : 'var(--platform-colors-surface-active)'};
+  color: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text-inverse)'
+      : 'var(--platform-colors-text-secondary)'};
+  font-size: var(--platform-typography-font-size-sm);
+`
+
+const StyledDescription = styled.p`
+  margin: 0;
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: var(--platform-typography-line-height-base);
+  color: var(--platform-colors-text-secondary);
+`
+
+const StyledFooter = styled.div`
+  padding-top: var(--platform-spacing-xs);
+  border-top: 1px solid var(--platform-colors-border);
+  font-size: var(--platform-typography-font-size-sm);
+  color: var(--platform-colors-text-disabled);
+`
+
+//#endregion
+
+export function CatalogCard({
+  name,
+  productName,
+  description,
+  status = 'planned',
+  capabilities = [],
+  footer,
+}: CatalogCardProps): React.ReactElement {
+  const active = status === 'active'
+
+  return (
+    <StyledCard $active={active}>
+      <StyledTop>
+        <StyledNameBlock>
+          <StyledName>{name}</StyledName>
+          <StyledProduct>{productName}</StyledProduct>
+        </StyledNameBlock>
+        <StyledStatusBadge $active={active}>
+          {active ? 'Active' : 'Planned'}
+        </StyledStatusBadge>
+      </StyledTop>
+      <StyledDescription>{description}</StyledDescription>
+      {capabilities.length ? <CapabilityPills items={capabilities} /> : null}
+      {footer ? <StyledFooter>{footer}</StyledFooter> : null}
+    </StyledCard>
+  )
+}

package/src/components/common/tiles/Tile.tsx

@@ -0,0 +1,45 @@
+import { Button } from '../buttons/Button.js'
+import { FlexCol } from '../containers/flex.js'
+import { Text } from '../typography/Text.js'
+
+export interface TileProps {
+  title: string
+  description?: string
+  meta?: string
+  disabled?: boolean
+  selected?: boolean
+  onClick?: () => void
+}
+
+export function Tile({
+  title,
+  description,
+  meta,
+  disabled = false,
+  selected = false,
+  onClick,
+}: TileProps): React.ReactElement {
+  return (
+    <Button
+      variant="tile"
+      fullWidth
+      disabled={disabled}
+      selected={selected}
+      onClick={onClick}
+    >
+      <FlexCol $align="start" $gap="sm" $width="100%">
+        <Text weight="medium">{title}</Text>
+        {description ? (
+          <Text size="sm" tone="secondary">
+            {description}
+          </Text>
+        ) : null}
+        {meta ? (
+          <Text size="sm" tone="secondary" mono>
+            {meta}
+          </Text>
+        ) : null}
+      </FlexCol>
+    </Button>
+  )
+}

package/src/components/common/tiles/TileGrid.tsx

@@ -0,0 +1,13 @@
+import { AutoFillGrid } from '../containers/AutoFillGrid.js'
+
+export interface TileGridProps {
+  children: React.ReactNode
+  minColumnWidth?: number
+}
+
+export function TileGrid({
+  children,
+  minColumnWidth = 220,
+}: TileGridProps): React.ReactElement {
+  return <AutoFillGrid minColumnWidth={minColumnWidth}>{children}</AutoFillGrid>
+}

package/src/components/common/typography/Heading.tsx

@@ -0,0 +1,27 @@
+import { Text, type TextWeight } from './Text.js'
+
+export type HeadingLevel = 1 | 2 | 3
+
+export interface HeadingProps {
+  level?: HeadingLevel
+  weight?: TextWeight
+  children: React.ReactNode
+}
+
+const levelTag: Record<HeadingLevel, 'h1' | 'h2' | 'h3'> = {
+  1: 'h1',
+  2: 'h2',
+  3: 'h3',
+}
+
+export function Heading({
+  level = 1,
+  weight = 'bold',
+  children,
+}: HeadingProps): React.ReactElement {
+  return (
+    <Text as={levelTag[level]} size="lg" weight={weight}>
+      {children}
+    </Text>
+  )
+}

package/src/components/common/typography/Kicker.tsx

@@ -0,0 +1,30 @@
+import { styled } from 'styled-components'
+
+export interface KickerProps {
+  children: React.ReactNode
+  /** Inline span for compact toolbar rows (default block paragraph). */
+  inline?: boolean
+}
+
+//#region styled-components
+
+const StyledKicker = styled.p<{ $inline?: boolean }>`
+  margin: 0;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: var(--platform-typography-font-weight-medium);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  line-height: 1;
+  display: ${({ $inline }) => ($inline ? 'inline' : 'block')};
+`
+
+//#endregion
+
+export function Kicker({
+  children,
+  inline = false,
+}: KickerProps): React.ReactElement {
+  return <StyledKicker $inline={inline}>{children}</StyledKicker>
+}

package/src/components/common/typography/Text.tsx

@@ -0,0 +1,80 @@
+import { styled } from 'styled-components'
+
+export type TextSize = 'sm' | 'base' | 'lg'
+export type TextWeight = 'normal' | 'medium' | 'bold'
+export type TextTone = 'primary' | 'secondary' | 'accent' | 'danger' | 'inverse'
+export type TextAlign = 'left' | 'center'
+
+export interface TextProps {
+  as?: 'span' | 'p' | 'strong' | 'label' | 'h1' | 'h2' | 'h3'
+  size?: TextSize
+  weight?: TextWeight
+  tone?: TextTone
+  mono?: boolean
+  align?: TextAlign
+  children: React.ReactNode
+}
+
+//#region styled-components
+
+const sizeMap: Record<TextSize, string> = {
+  sm: 'var(--platform-typography-font-size-sm)',
+  base: 'var(--platform-typography-font-size-base)',
+  lg: 'var(--platform-typography-font-size-lg)',
+}
+
+const weightMap: Record<TextWeight, string> = {
+  normal: 'var(--platform-typography-font-weight-normal)',
+  medium: 'var(--platform-typography-font-weight-medium)',
+  bold: 'var(--platform-typography-font-weight-bold)',
+}
+
+const toneMap: Record<TextTone, string> = {
+  primary: 'var(--platform-colors-text)',
+  secondary: 'var(--platform-colors-text-secondary)',
+  accent: 'var(--platform-colors-accent)',
+  danger: 'var(--platform-colors-danger)',
+  inverse: 'var(--platform-colors-text-inverse)',
+}
+
+const StyledText = styled.span<{
+  $size: TextSize
+  $weight: TextWeight
+  $tone: TextTone
+  $mono: boolean
+  $align: TextAlign
+}>`
+  margin: 0;
+  font-family: ${({ $mono }) =>
+    $mono ? 'var(--platform-typography-font-family-mono)' : 'inherit'};
+  font-size: ${({ $size }) => sizeMap[$size]};
+  font-weight: ${({ $weight }) => weightMap[$weight]};
+  color: ${({ $tone }) => toneMap[$tone]};
+  line-height: var(--platform-typography-line-height-base);
+  text-align: ${({ $align }) => $align};
+`
+
+//#endregion
+
+export function Text({
+  as = 'span',
+  size = 'base',
+  weight = 'normal',
+  tone = 'primary',
+  mono = false,
+  align = 'left',
+  children,
+}: TextProps): React.ReactElement {
+  return (
+    <StyledText
+      as={as}
+      $size={size}
+      $weight={weight}
+      $tone={tone}
+      $mono={mono}
+      $align={align}
+    >
+      {children}
+    </StyledText>
+  )
+}

package/src/components/credentials/CredentialsPanel.tsx

@@ -0,0 +1,169 @@
+import { useState } from 'react'
+import { Button } from '../common/buttons/Button.js'
+import { FlexCol } from '../common/containers/flex.js'
+import { InlineBanner } from '../common/feedback/InlineBanner.js'
+import { FormField } from '../common/inputs/FormField.js'
+import { TextField } from '../common/inputs/TextField.js'
+import { Text } from '../common/typography/Text.js'
+import type {
+  CredentialsEntryView,
+  CredentialsStorageStatusView,
+} from './credentialsTypes.js'
+import { styled } from 'styled-components'
+
+export interface CredentialsPanelProps {
+  entries: CredentialsEntryView[]
+  storageStatus: CredentialsStorageStatusView | null
+  loading?: boolean
+  error?: Error | null
+  onSave: (id: string, value: string) => Promise<void>
+  onDelete: (id: string) => Promise<void>
+}
+
+//#region styled-components
+
+const StyledEntry = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+  padding: var(--platform-spacing-md);
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 0;
+  background: var(--platform-colors-surface);
+`
+
+const StyledEntryHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--platform-spacing-md);
+`
+
+const StyledActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-sm);
+`
+
+//#endregion
+
+export function CredentialsPanel({
+  entries,
+  storageStatus,
+  loading = false,
+  error = null,
+  onSave,
+  onDelete,
+}: CredentialsPanelProps): React.ReactElement {
+  const [drafts, setDrafts] = useState<Record<string, string>>({})
+  const [busyId, setBusyId] = useState<string | null>(null)
+  const [actionError, setActionError] = useState<string | null>(null)
+
+  const storageBlocked =
+    storageStatus !== null &&
+    (!storageStatus.encryptionAvailable || !storageStatus.secure)
+
+  const run = async (
+    id: string,
+    action: () => Promise<void>,
+  ): Promise<void> => {
+    setBusyId(id)
+    setActionError(null)
+    try {
+      await action()
+      setDrafts(current => ({ ...current, [id]: '' }))
+    } catch (cause) {
+      setActionError(
+        cause instanceof Error ? cause.message : 'Could not update credential',
+      )
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  return (
+    <FlexCol $gap="md" $width="100%">
+      {storageStatus?.warning ? (
+        <InlineBanner variant="warning">{storageStatus.warning}</InlineBanner>
+      ) : null}
+      {error ? (
+        <InlineBanner variant="danger">{error.message}</InlineBanner>
+      ) : null}
+      {actionError ? (
+        <InlineBanner variant="danger">{actionError}</InlineBanner>
+      ) : null}
+      {loading ? (
+        <Text size="sm" tone="secondary">
+          Loading credential status…
+        </Text>
+      ) : null}
+
+      {entries.map(entry => {
+        const draft = drafts[entry.id] ?? ''
+        const busy = busyId === entry.id
+
+        return (
+          <StyledEntry key={entry.id}>
+            <StyledEntryHeader>
+              <FlexCol $gap="xs">
+                <Text weight="medium">{entry.label}</Text>
+                {entry.description ? (
+                  <Text size="sm" tone="secondary">
+                    {entry.description}
+                  </Text>
+                ) : null}
+              </FlexCol>
+              <Text size="sm" tone={entry.configured ? 'primary' : 'secondary'}>
+                {entry.configured ? 'Configured' : 'Not set'}
+              </Text>
+            </StyledEntryHeader>
+
+            <FormField
+              label="Secret"
+              hint="Write-only. Existing values are never shown."
+            >
+              <TextField
+                type="password"
+                autoComplete="off"
+                placeholder={
+                  entry.configured
+                    ? 'Enter a new value to replace'
+                    : 'Paste key…'
+                }
+                value={draft}
+                disabled={loading || busy || storageBlocked}
+                onChange={event =>
+                  setDrafts(current => ({
+                    ...current,
+                    [entry.id]: event.target.value,
+                  }))
+                }
+              />
+            </FormField>
+
+            <StyledActions>
+              <Button
+                variant="primary"
+                disabled={!draft.trim() || loading || busy || storageBlocked}
+                onClick={() =>
+                  void run(entry.id, () => onSave(entry.id, draft.trim()))
+                }
+              >
+                Save
+              </Button>
+              {entry.configured ? (
+                <Button
+                  variant="subtle"
+                  disabled={loading || busy}
+                  onClick={() => void run(entry.id, () => onDelete(entry.id))}
+                >
+                  Remove
+                </Button>
+              ) : null}
+            </StyledActions>
+          </StyledEntry>
+        )
+      })}
+    </FlexCol>
+  )
+}

package/src/components/credentials/credentialsTypes.ts

@@ -0,0 +1,14 @@
+/** Presentational types — no secret values, shell-only consumer. */
+export interface CredentialsEntryView {
+  id: string
+  label: string
+  description?: string
+  configured: boolean
+}
+
+export interface CredentialsStorageStatusView {
+  encryptionAvailable: boolean
+  backend: string | null
+  secure: boolean
+  warning?: string
+}