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

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

@@ -1,54 +1,54 @@
-import { useMemo } from 'react'
-import { setSurfacePalette } from '../../../bridge/theme.mjs'
-import { usePlatformThemeDocumentAttrs } from '../../../bridge/react/usePlatformThemeDocumentAttrs.js'
-import {
-  SURFACE_PALETTE_DEFAULT_ID,
-  SURFACE_PALETTES,
-  surfacePaletteSwatches,
-} from '../../../theme/surfacePalettes.js'
-import { PaletteCirclePicker } from './PaletteCirclePicker.js'
-
-const DEFAULT_SWATCHES = ['#2e3338', '#737b86', '#ffffff', '#f5f3ef']
-
-export interface SurfacePalettePickerProps {
-  label?: string
-  sectionId?: string
-  disabled?: boolean
-}
-
-/** Workspace chrome palette — persists via shell `theme.setSurfacePalette`. */
-export function SurfacePalettePicker({
-  label = 'Surface palette',
-  sectionId = 'surface-palette',
-  disabled,
-}: SurfacePalettePickerProps): React.ReactElement {
-  const { surfacePalette } = usePlatformThemeDocumentAttrs()
-  const palettes = useMemo(
-    () => [
-      {
-        id: SURFACE_PALETTE_DEFAULT_ID,
-        label: 'Default',
-        colors: DEFAULT_SWATCHES,
-      },
-      ...SURFACE_PALETTES.map(palette => ({
-        id: palette.id,
-        label: palette.label,
-        colors: surfacePaletteSwatches(palette),
-      })),
-    ],
-    [],
-  )
-
-  return (
-    <PaletteCirclePicker
-      label={label}
-      sectionId={sectionId}
-      value={surfacePalette || SURFACE_PALETTE_DEFAULT_ID}
-      palettes={palettes}
-      disabled={disabled}
-      onChange={id => {
-        void setSurfacePalette(id)
-      }}
-    />
-  )
-}
+import { useMemo } from 'react'
+import { setSurfacePalette } from '../../../bridge/theme.mjs'
+import { usePlatformThemeDocumentAttrs } from '../../../bridge/react/usePlatformThemeDocumentAttrs.js'
+import {
+  SURFACE_PALETTE_DEFAULT_ID,
+  SURFACE_PALETTES,
+  surfacePaletteSwatches,
+} from '../../../theme/surfacePalettes.js'
+import { PaletteCirclePicker } from './PaletteCirclePicker.js'
+
+const DEFAULT_SWATCHES = ['#2e3338', '#737b86', '#ffffff', '#f5f3ef']
+
+export interface SurfacePalettePickerProps {
+  label?: string
+  sectionId?: string
+  disabled?: boolean
+}
+
+/** Workspace chrome palette — persists via shell `theme.setSurfacePalette`. */
+export function SurfacePalettePicker({
+  label = 'Surface palette',
+  sectionId = 'surface-palette',
+  disabled,
+}: SurfacePalettePickerProps): React.ReactElement {
+  const { surfacePalette } = usePlatformThemeDocumentAttrs()
+  const palettes = useMemo(
+    () => [
+      {
+        id: SURFACE_PALETTE_DEFAULT_ID,
+        label: 'Default',
+        colors: DEFAULT_SWATCHES,
+      },
+      ...SURFACE_PALETTES.map(palette => ({
+        id: palette.id,
+        label: palette.label,
+        colors: surfacePaletteSwatches(palette),
+      })),
+    ],
+    [],
+  )
+
+  return (
+    <PaletteCirclePicker
+      label={label}
+      sectionId={sectionId}
+      value={surfacePalette || SURFACE_PALETTE_DEFAULT_ID}
+      palettes={palettes}
+      disabled={disabled}
+      onChange={id => {
+        void setSurfacePalette(id)
+      }}
+    />
+  )
+}

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

@@ -1,22 +1,22 @@
-import { forwardRef, type TextareaHTMLAttributes } from 'react'
-import { FlexCol } from '../containers/flex.js'
-import { BareTextarea } from './BareTextarea.js'
-import { FieldControlShell } from './FieldControlShell.js'
-
-export interface TextAreaFieldProps
-  extends TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-export const TextAreaField = forwardRef<
-  HTMLTextAreaElement,
-  TextAreaFieldProps
->(function TextAreaField({ disabled, ...rest }, ref) {
-  return (
-    <FieldControlShell disabled={disabled} multiline>
-      <FlexCol $flex="1" $width="100%" $minHeight="0">
-        <BareTextarea ref={ref} disabled={disabled} {...rest} />
-      </FlexCol>
-    </FieldControlShell>
-  )
-})
-
-TextAreaField.displayName = 'TextAreaField'
+import { forwardRef, type TextareaHTMLAttributes } from 'react'
+import { FlexCol } from '../containers/flex.js'
+import { BareTextarea } from './BareTextarea.js'
+import { FieldControlShell } from './FieldControlShell.js'
+
+export interface TextAreaFieldProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+export const TextAreaField = forwardRef<
+  HTMLTextAreaElement,
+  TextAreaFieldProps
+>(function TextAreaField({ disabled, ...rest }, ref) {
+  return (
+    <FieldControlShell disabled={disabled} multiline>
+      <FlexCol $flex="1" $width="100%" $minHeight="0">
+        <BareTextarea ref={ref} disabled={disabled} {...rest} />
+      </FlexCol>
+    </FieldControlShell>
+  )
+})
+
+TextAreaField.displayName = 'TextAreaField'

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

@@ -1,51 +1,51 @@
-import { forwardRef, type InputHTMLAttributes } from 'react'
-import { styled } from 'styled-components'
-import { FlexRow } from '../containers/flex.js'
-import { BareInput } from './BareInput.js'
-import { FieldControlShell } from './FieldControlShell.js'
-import { fieldCompactShellCss } from './fieldStyles.js'
-
-export type TextFieldVariant = 'default' | 'compact'
-
-export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
-  variant?: TextFieldVariant
-  /** Only used with `variant="compact"`. */
-  maxWidth?: string
-}
-
-const StyledCompactShell = styled(FlexRow)<{
-  $disabled?: boolean
-  $maxWidth?: string
-}>`
-  ${fieldCompactShellCss}
-`
-
-export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-  function TextField(
-    { disabled, variant = 'default', maxWidth, ...rest },
-    ref,
-  ) {
-    if (variant === 'compact') {
-      return (
-        <StyledCompactShell
-          $width="100%"
-          $align="center"
-          $disabled={disabled}
-          $maxWidth={maxWidth}
-        >
-          <BareInput ref={ref} disabled={disabled} {...rest} />
-        </StyledCompactShell>
-      )
-    }
-
-    return (
-      <FieldControlShell disabled={disabled}>
-        <FlexRow $flex="1" $align="center" $width="100%">
-          <BareInput ref={ref} disabled={disabled} {...rest} />
-        </FlexRow>
-      </FieldControlShell>
-    )
-  },
-)
-
-TextField.displayName = 'TextField'
+import { forwardRef, type InputHTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+import { FlexRow } from '../containers/flex.js'
+import { BareInput } from './BareInput.js'
+import { FieldControlShell } from './FieldControlShell.js'
+import { fieldCompactShellCss } from './fieldStyles.js'
+
+export type TextFieldVariant = 'default' | 'compact'
+
+export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  variant?: TextFieldVariant
+  /** Only used with `variant="compact"`. */
+  maxWidth?: string
+}
+
+const StyledCompactShell = styled(FlexRow)<{
+  $disabled?: boolean
+  $maxWidth?: string
+}>`
+  ${fieldCompactShellCss}
+`
+
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  function TextField(
+    { disabled, variant = 'default', maxWidth, ...rest },
+    ref,
+  ) {
+    if (variant === 'compact') {
+      return (
+        <StyledCompactShell
+          $width="100%"
+          $align="center"
+          $disabled={disabled}
+          $maxWidth={maxWidth}
+        >
+          <BareInput ref={ref} disabled={disabled} {...rest} />
+        </StyledCompactShell>
+      )
+    }
+
+    return (
+      <FieldControlShell disabled={disabled}>
+        <FlexRow $flex="1" $align="center" $width="100%">
+          <BareInput ref={ref} disabled={disabled} {...rest} />
+        </FlexRow>
+      </FieldControlShell>
+    )
+  },
+)
+
+TextField.displayName = 'TextField'

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

@@ -1,110 +1,110 @@
-import { styled } from 'styled-components'
-
-export interface ToggleSwitchProps {
-  checked: boolean
-  onChange: (checked: boolean) => void
-  disabled?: boolean
-  label?: React.ReactNode
-  description?: React.ReactNode
-  className?: string
-  'aria-label'?: string
-}
-
-const StyledToggle = styled.label`
-  display: inline-flex;
-  align-items: center;
-  gap: var(--platform-spacing-xs);
-  min-width: 0;
-  color: var(--platform-colors-text);
-  font-size: var(--platform-typography-font-size-xs);
-  line-height: 1.25;
-`
-
-const StyledTrack = styled.span<{ $checked: boolean; $disabled?: boolean }>`
-  position: relative;
-  flex: 0 0 auto;
-  width: 30px;
-  height: 18px;
-  border: 1px solid
-    ${({ $checked }) =>
-      $checked
-        ? 'var(--platform-colors-accent)'
-        : 'var(--platform-colors-border)'};
-  border-radius: 999px;
-  background: ${({ $checked }) =>
-    $checked
-      ? 'var(--platform-colors-accent)'
-      : 'var(--platform-colors-surface-active)'};
-  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
-  transition: background 120ms ease, border-color 120ms ease;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: ${({ $checked }) => ($checked ? '14px' : '2px')};
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: var(--platform-colors-surface);
-    box-shadow: 0 1px 2px rgb(from var(--platform-colors-text) r g b / 0.22);
-    transition: left 120ms ease;
-  }
-`
-
-const StyledInput = styled.input`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-
-  &:focus-visible + ${StyledTrack} {
-    outline: 2px solid var(--platform-colors-focus-ring);
-    outline-offset: 2px;
-  }
-`
-
-const StyledCopy = styled.span`
-  display: grid;
-  min-width: 0;
-  gap: 1px;
-`
-
-const StyledDescription = styled.span`
-  color: var(--platform-colors-text-secondary);
-`
-
-/** Small native switch for compact binary settings. */
-export function ToggleSwitch({
-  checked,
-  onChange,
-  disabled,
-  label,
-  description,
-  className,
-  'aria-label': ariaLabel,
-}: ToggleSwitchProps): React.ReactElement {
-  return (
-    <StyledToggle className={className}>
-      <StyledInput
-        type="checkbox"
-        checked={checked}
-        disabled={disabled}
-        aria-label={ariaLabel}
-        onChange={event => onChange(event.currentTarget.checked)}
-      />
-      <StyledTrack $checked={checked} $disabled={disabled} aria-hidden="true" />
-      {label || description ? (
-        <StyledCopy>
-          {label ? <span>{label}</span> : null}
-          {description ? (
-            <StyledDescription>{description}</StyledDescription>
-          ) : null}
-        </StyledCopy>
-      ) : null}
-    </StyledToggle>
-  )
-}
+import { styled } from 'styled-components'
+
+export interface ToggleSwitchProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  disabled?: boolean
+  label?: React.ReactNode
+  description?: React.ReactNode
+  className?: string
+  'aria-label'?: string
+}
+
+const StyledToggle = styled.label`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-xs);
+  line-height: 1.25;
+`
+
+const StyledTrack = styled.span<{ $checked: boolean; $disabled?: boolean }>`
+  position: relative;
+  flex: 0 0 auto;
+  width: 30px;
+  height: 18px;
+  border: 1px solid
+    ${({ $checked }) =>
+      $checked
+        ? 'var(--platform-colors-accent)'
+        : 'var(--platform-colors-border)'};
+  border-radius: 999px;
+  background: ${({ $checked }) =>
+    $checked
+      ? 'var(--platform-colors-accent)'
+      : 'var(--platform-colors-surface-active)'};
+  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
+  transition: background 120ms ease, border-color 120ms ease;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: ${({ $checked }) => ($checked ? '14px' : '2px')};
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--platform-colors-surface);
+    box-shadow: 0 1px 2px rgb(from var(--platform-colors-text) r g b / 0.22);
+    transition: left 120ms ease;
+  }
+`
+
+const StyledInput = styled.input`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+
+  &:focus-visible + ${StyledTrack} {
+    outline: 2px solid var(--platform-colors-focus-ring);
+    outline-offset: 2px;
+  }
+`
+
+const StyledCopy = styled.span`
+  display: grid;
+  min-width: 0;
+  gap: 1px;
+`
+
+const StyledDescription = styled.span`
+  color: var(--platform-colors-text-secondary);
+`
+
+/** Small native switch for compact binary settings. */
+export function ToggleSwitch({
+  checked,
+  onChange,
+  disabled,
+  label,
+  description,
+  className,
+  'aria-label': ariaLabel,
+}: ToggleSwitchProps): React.ReactElement {
+  return (
+    <StyledToggle className={className}>
+      <StyledInput
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        onChange={event => onChange(event.currentTarget.checked)}
+      />
+      <StyledTrack $checked={checked} $disabled={disabled} aria-hidden="true" />
+      {label || description ? (
+        <StyledCopy>
+          {label ? <span>{label}</span> : null}
+          {description ? (
+            <StyledDescription>{description}</StyledDescription>
+          ) : null}
+        </StyledCopy>
+      ) : null}
+    </StyledToggle>
+  )
+}