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

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

@@ -0,0 +1,82 @@
+import { Button } from '../buttons/Button.js'
+import { FlexRow } from '../containers/flex.js'
+import { styled } from 'styled-components'
+
+export type InlineBannerVariant = 'danger' | 'warning'
+
+export interface InlineBannerProps {
+  variant?: InlineBannerVariant
+  children: React.ReactNode
+  actions?: React.ReactNode
+  onDismiss?: () => void
+  dismissLabel?: string
+}
+
+//#region styled-components
+
+const StyledRoot = styled.div<{ $variant: InlineBannerVariant }>`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-md);
+  padding: var(--platform-spacing-sm) var(--platform-spacing-md);
+  border: 1px solid
+    ${({ $variant }) =>
+      $variant === 'danger'
+        ? 'var(--platform-colors-danger)'
+        : 'var(--platform-colors-warning)'};
+  border-radius: var(--platform-radius-md);
+  background: ${({ $variant }) =>
+    $variant === 'danger'
+      ? 'rgb(from var(--platform-colors-danger) r g b / 8%)'
+      : 'rgb(from var(--platform-colors-warning) r g b / 12%)'};
+  color: ${({ $variant }) =>
+    $variant === 'danger'
+      ? 'var(--platform-colors-text-danger)'
+      : 'var(--platform-colors-text)'};
+  font-size: var(--platform-typography-font-size-sm);
+`
+
+const StyledMessage = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+  flex: 1;
+  min-width: 0;
+`
+
+const StyledActions = styled(FlexRow)`
+  flex: 0 0 auto;
+`
+
+//#endregion
+
+export function InlineBanner({
+  variant = 'warning',
+  children,
+  actions,
+  onDismiss,
+  dismissLabel = 'Dismiss',
+}: InlineBannerProps): React.ReactElement {
+  return (
+    <StyledRoot role="alert" $variant={variant}>
+      <StyledMessage>{children}</StyledMessage>
+      {actions ? (
+        <StyledActions $align="center" $gap="xs" $width="auto">
+          {actions}
+        </StyledActions>
+      ) : null}
+      {onDismiss ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={onDismiss}
+          aria-label={dismissLabel}
+          title={dismissLabel}
+        >
+          ✕
+        </Button>
+      ) : null}
+    </StyledRoot>
+  )
+}

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

@@ -0,0 +1,104 @@
+import { styled } from 'styled-components'
+
+export type PlatformChipTone =
+  | 'blue'
+  | 'orange'
+  | 'green'
+  | 'red'
+  | 'neutral'
+  | 'meta'
+
+export interface PlatformChipProps {
+  tone?: PlatformChipTone
+  label?: string
+  title?: string
+  children: React.ReactNode
+}
+
+//#region styled-components
+
+const toneMap: Record<
+  PlatformChipTone,
+  { bg: string; fg: string; border: string }
+> = {
+  blue: {
+    bg: 'var(--platform-colors-semantic-blue-muted, #e5effd)',
+    fg: 'var(--platform-colors-semantic-blue-text, #356fae)',
+    border: 'var(--platform-colors-semantic-blue-border, #cfe0f8)',
+  },
+  orange: {
+    bg: 'var(--platform-colors-semantic-orange-muted, #f8edd6)',
+    fg: 'var(--platform-colors-semantic-orange-text, #8a6012)',
+    border: 'var(--platform-colors-semantic-orange-border, #efd99e)',
+  },
+  green: {
+    bg: 'var(--platform-colors-semantic-green-muted, #e1f0e6)',
+    fg: 'var(--platform-colors-semantic-green-text, #3f7c52)',
+    border: 'var(--platform-colors-semantic-green-border, #c8e2d0)',
+  },
+  red: {
+    bg: 'var(--platform-colors-semantic-red-muted, #f5e3e2)',
+    fg: 'var(--platform-colors-semantic-red-text, #964947)',
+    border: 'var(--platform-colors-semantic-red-border, #ebcac8)',
+  },
+  neutral: {
+    bg: 'var(--platform-colors-surface-hover, #e7eaee)',
+    fg: 'var(--platform-colors-text-secondary, #6d7680)',
+    border: 'var(--platform-colors-border, #d9dee5)',
+  },
+  meta: {
+    bg: '#f8f9fb',
+    fg: 'var(--platform-colors-text-secondary, #6d7680)',
+    border: 'var(--platform-colors-border-soft, #e5e8ed)',
+  },
+}
+
+const StyledChip = styled.span<{ $tone: PlatformChipTone }>`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ $tone }) => ($tone === 'meta' ? '6px' : '0')};
+  max-width: 100%;
+  min-height: 20px;
+  padding: 0 8px;
+  border: 1px solid ${({ $tone }) => toneMap[$tone].border};
+  border-radius: ${({ $tone }) => ($tone === 'meta' ? '6px' : '0')};
+  background: ${({ $tone }) => toneMap[$tone].bg};
+  color: ${({ $tone }) => toneMap[$tone].fg};
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: ${({ $tone }) =>
+    $tone === 'meta'
+      ? 'var(--platform-typography-font-weight-medium)'
+      : 'inherit'};
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledMetaLabel = styled.span`
+  color: #8b939d;
+  font-size: 10px;
+  font-weight: var(--platform-typography-font-weight-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+`
+
+const StyledMetaValue = styled.span`
+  color: #606a75;
+`
+
+//#endregion
+
+export function PlatformChip({
+  tone = 'neutral',
+  label,
+  title,
+  children,
+}: PlatformChipProps): React.ReactElement {
+  return (
+    <StyledChip $tone={tone} title={title}>
+      {label ? <StyledMetaLabel>{label}</StyledMetaLabel> : null}
+      {label ? <StyledMetaValue>{children}</StyledMetaValue> : children}
+    </StyledChip>
+  )
+}

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

@@ -0,0 +1,75 @@
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export type QuietPillTone =
+  | 'accent'
+  | 'danger'
+  | 'gold'
+  | 'neutral'
+  | 'success'
+
+export interface QuietPillProps {
+  tone?: QuietPillTone
+  children: ReactNode
+  className?: string
+  title?: string
+}
+
+//#region styled-components
+
+const StyledPill = styled.span<{ $tone: QuietPillTone }>`
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 28px;
+  padding: 4px 10px;
+  border: 1px solid
+    ${({ $tone }) =>
+      $tone === 'accent'
+        ? 'rgb(from var(--quiet-accent, var(--platform-colors-accent)) r g b / 34%)'
+        : $tone === 'danger'
+        ? 'rgb(from var(--platform-colors-danger) r g b / 36%)'
+        : $tone === 'gold'
+        ? 'rgb(from var(--quiet-secondary, var(--platform-colors-warning)) r g b / 42%)'
+        : $tone === 'success'
+        ? 'rgb(from var(--platform-colors-success) r g b / 42%)'
+        : 'var(--platform-colors-border)'};
+  border-radius: var(--platform-radius-full);
+  background: ${({ $tone }) =>
+    $tone === 'accent'
+      ? 'rgb(from var(--quiet-accent, var(--platform-colors-accent)) r g b / 10%)'
+      : $tone === 'danger'
+      ? 'rgb(from var(--platform-colors-danger) r g b / 9%)'
+      : $tone === 'gold'
+      ? 'rgb(from var(--quiet-secondary, var(--platform-colors-warning)) r g b / 14%)'
+      : $tone === 'success'
+      ? 'rgb(from var(--platform-colors-success) r g b / 13%)'
+      : 'rgb(255 255 255 / 62%)'};
+  color: ${({ $tone }) =>
+    $tone === 'danger'
+      ? 'var(--platform-colors-danger)'
+      : $tone === 'success'
+      ? 'var(--platform-colors-success)'
+      : 'var(--platform-colors-text-secondary)'};
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: 650;
+  transition: border-color var(--platform-transition-base),
+    background var(--platform-transition-base),
+    color var(--platform-transition-base),
+    transform var(--platform-transition-base);
+`
+
+//#endregion
+
+export function QuietPill({
+  tone = 'neutral',
+  children,
+  className,
+  title,
+}: QuietPillProps): React.ReactElement {
+  return (
+    <StyledPill $tone={tone} className={className} title={title}>
+      {children}
+    </StyledPill>
+  )
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { styled } from 'styled-components'
+
+/**
+ * The suite checkbox: a native input with platform accent and sizing.
+ * Use for to-dos, table cells, and option rows.
+ */
+export const Checkbox = styled.input.attrs({ type: 'checkbox' })`
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: var(--platform-colors-accent, #525a65);
+  cursor: pointer;
+`

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

@@ -0,0 +1,49 @@
+import { FlexCol, FlexRow } from '../containers/flex.js'
+import { styled } from 'styled-components'
+import { fieldControlInsetCss, fieldControlShellCss } from './fieldStyles.js'
+
+export interface FieldControlShellProps {
+  children: React.ReactNode
+  disabled?: boolean
+  multiline?: boolean
+}
+
+//#region styled-components
+
+const StyledShell = styled(FlexRow)<{
+  $disabled?: boolean
+  $multiline?: boolean
+}>`
+  ${fieldControlShellCss}
+  flex: 1 1 auto;
+  align-items: ${({ $multiline }) => ($multiline ? 'stretch' : 'center')};
+  flex-direction: ${({ $multiline }) => ($multiline ? 'column' : 'row')};
+`
+
+const StyledInset = styled(FlexCol)<{ $multiline?: boolean }>`
+  ${fieldControlInsetCss}
+  flex-direction: column;
+  min-height: ${({ $multiline }) =>
+    $multiline ? 'calc(var(--platform-spacing-xl) * 3)' : 'auto'};
+`
+
+//#endregion
+
+export function FieldControlShell({
+  children,
+  disabled = false,
+  multiline = false,
+}: FieldControlShellProps): React.ReactElement {
+  return (
+    <StyledShell
+      $width="100%"
+      $align={multiline ? 'stretch' : 'center'}
+      $disabled={disabled}
+      $multiline={multiline}
+    >
+      <StyledInset $multiline={multiline} $flex="1" $gap="xs" $width="100%">
+        {children}
+      </StyledInset>
+    </StyledShell>
+  )
+}

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

@@ -0,0 +1,40 @@
+import { FlexCol } from '../containers/flex.js'
+import { Text } from '../typography/Text.js'
+
+export interface FormFieldProps {
+  label?: string
+  htmlFor?: string
+  hint?: string
+  error?: string
+  children: React.ReactNode
+}
+
+export function FormField({
+  label,
+  htmlFor,
+  hint,
+  error,
+  children,
+}: FormFieldProps): React.ReactElement {
+  return (
+    <FlexCol $gap="xs" $width="100%">
+      {label ? (
+        <label htmlFor={htmlFor}>
+          <Text as="span" size="sm" tone="secondary">
+            {label}
+          </Text>
+        </label>
+      ) : null}
+      {children}
+      {error ? (
+        <Text as="p" size="sm" tone="danger">
+          {error}
+        </Text>
+      ) : hint ? (
+        <Text as="p" size="sm" tone="secondary">
+          {hint}
+        </Text>
+      ) : null}
+    </FlexCol>
+  )
+}