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

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

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

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

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

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

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

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

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

@@ -1,30 +1,36 @@
-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>
-}
+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-kicker-color, var(--platform-colors-text-secondary));
+  font-size: var(
+    --platform-kicker-font-size,
+    var(--platform-typography-font-size-sm)
+  );
+  font-weight: var(
+    --platform-kicker-font-weight,
+    var(--platform-typography-font-weight-medium)
+  );
+  letter-spacing: var(--platform-kicker-letter-spacing, 0.08em);
+  text-transform: var(--platform-kicker-text-transform, uppercase);
+  /* white-space: nowrap; */
+  line-height: var(--platform-kicker-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

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