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

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

@@ -1,13 +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;
-`
+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/EditableSecretField.tsx

@@ -0,0 +1,292 @@
+import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons'
+import { Pencil, Trash2 } from 'lucide-react'
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from 'react'
+import { styled } from 'styled-components'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import { IconButton } from '../buttons/IconButton.js'
+import { FlexRow } from '../containers/flex.js'
+import { Text } from '../typography/Text.js'
+import { TextField } from './TextField.js'
+
+export interface EditableSecretFieldProps {
+  configured: boolean
+  disabled?: boolean
+  busy?: boolean
+  configuredMask?: string
+  emptyLabel?: string
+  addPlaceholder?: string
+  replacePlaceholder?: string
+  onSave: (value: string) => Promise<void>
+  onRemove?: () => Promise<void>
+  'aria-label'?: string
+}
+
+const CONFIGURED_MASK = '••••••••••••'
+
+const StyledRoot = styled(FlexRow)`
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+`
+
+const StyledValue = styled.div<{ $editing: boolean }>`
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 28px;
+`
+
+const StyledSurface = styled.div<{ $visible: boolean }>`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  transform: translateY(${({ $visible }) => ($visible ? '0' : '2px')});
+  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};
+  transition: opacity 180ms ease, transform 180ms ease;
+`
+
+const StyledEmptyLabel = styled(Text)`
+  padding: 0 var(--platform-spacing-xs);
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: 28px;
+  white-space: nowrap;
+`
+
+const StyledReadonlyField = styled(TextField)`
+  width: 100%;
+  cursor: default;
+`
+
+const StyledActions = styled(FlexRow)<{
+  $editing: boolean
+  $configured: boolean
+}>`
+  flex-shrink: 0;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+  max-width: ${({ $editing, $configured }) =>
+    $editing ? '56px' : $configured ? '52px' : '26px'};
+  opacity: 1;
+  transition: max-width 200ms ease;
+`
+
+const StyledActionSlot = styled.div<{ $visible: boolean }>`
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  transform: scale(${({ $visible }) => ($visible ? 1 : 0.92)});
+  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};
+  transition: opacity 160ms ease, transform 160ms ease;
+`
+
+const StyledFilledIcon = styled.span<{ $tone?: 'primary' | 'danger' }>`
+  display: inline-flex;
+  font-size: 15px;
+  line-height: 0;
+  color: ${({ $tone }) =>
+    $tone === 'danger'
+      ? 'var(--platform-colors-danger)'
+      : 'var(--platform-colors-text)'};
+`
+
+export function EditableSecretField({
+  configured,
+  disabled = false,
+  busy = false,
+  configuredMask = CONFIGURED_MASK,
+  emptyLabel = 'Not set',
+  addPlaceholder = 'Paste key…',
+  replacePlaceholder = 'Replace key…',
+  onSave,
+  onRemove,
+  'aria-label': ariaLabel,
+}: EditableSecretFieldProps): React.ReactElement {
+  const inputId = useId()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  const locked = disabled || busy || submitting
+  const canSave = draft.trim().length > 0 && !locked
+
+  const exitEdit = useCallback(() => {
+    setEditing(false)
+    setDraft('')
+  }, [])
+
+  useEffect(() => {
+    if (!editing) return
+    const frame = requestAnimationFrame(() => inputRef.current?.focus())
+    return () => cancelAnimationFrame(frame)
+  }, [editing])
+
+  const run = async (
+    action: () => Promise<void>,
+    options?: { exitAfter?: boolean },
+  ): Promise<void> => {
+    setSubmitting(true)
+    try {
+      await action()
+      if (options?.exitAfter !== false) {
+        exitEdit()
+      }
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleSave = (): void => {
+    if (!canSave) return
+    void run(async () => onSave(draft.trim()))
+  }
+
+  const handleCancel = (): void => {
+    exitEdit()
+  }
+
+  const handleDelete = (): void => {
+    if (!configured || !onRemove) return
+    void run(onRemove, { exitAfter: false })
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      handleSave()
+      return
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      exitEdit()
+    }
+  }
+
+  const showConfiguredMask = configured && !editing
+  const showEmpty = !configured && !editing
+  const showEditor = editing
+
+  return (
+    <StyledRoot $align="center" $width="100%">
+      <StyledValue $editing={editing} aria-live="polite">
+        <StyledSurface $visible={showEmpty}>
+          <StyledEmptyLabel size="sm" tone="secondary">
+            {emptyLabel}
+          </StyledEmptyLabel>
+        </StyledSurface>
+
+        <StyledSurface $visible={showConfiguredMask}>
+          <StyledReadonlyField
+            variant="compact"
+            type="password"
+            readOnly
+            tabIndex={-1}
+            value={configuredMask}
+            aria-label={ariaLabel ? `${ariaLabel} (saved)` : 'Saved key'}
+          />
+        </StyledSurface>
+
+        <StyledSurface $visible={showEditor}>
+          <TextField
+            ref={inputRef}
+            id={inputId}
+            variant="compact"
+            type="password"
+            autoComplete="off"
+            spellCheck={false}
+            placeholder={configured ? replacePlaceholder : addPlaceholder}
+            value={draft}
+            disabled={locked}
+            aria-label={ariaLabel}
+            onChange={event => setDraft(event.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </StyledSurface>
+      </StyledValue>
+
+      <StyledActions
+        $editing={editing}
+        $configured={configured}
+        $align="center"
+      >
+        {!editing ? (
+          <>
+            <StyledActionSlot $visible>
+              <IconButton
+                type="button"
+                size="sm"
+                disabled={locked}
+                aria-label={ariaLabel ? `Edit ${ariaLabel}` : 'Edit key'}
+                onClick={() => setEditing(true)}
+              >
+                <PlatformIcon icon={Pencil} size={14} strokeWidth={1.9} />
+              </IconButton>
+            </StyledActionSlot>
+
+            {configured && onRemove ? (
+              <StyledActionSlot $visible>
+                <IconButton
+                  type="button"
+                  size="sm"
+                  variant="dangerHover"
+                  disabled={locked}
+                  aria-label={
+                    ariaLabel ? `Remove ${ariaLabel}` : 'Remove key'
+                  }
+                  onClick={handleDelete}
+                >
+                  <PlatformIcon icon={Trash2} size={14} strokeWidth={1.9} />
+                </IconButton>
+              </StyledActionSlot>
+            ) : null}
+          </>
+        ) : (
+          <>
+            <StyledActionSlot $visible>
+              <IconButton
+                type="button"
+                size="sm"
+                disabled={!canSave}
+                aria-label={ariaLabel ? `Save ${ariaLabel}` : 'Save key'}
+                onClick={handleSave}
+              >
+                <StyledFilledIcon $tone="primary">
+                  <CheckCircleFilled />
+                </StyledFilledIcon>
+              </IconButton>
+            </StyledActionSlot>
+
+            <StyledActionSlot $visible>
+              <IconButton
+                type="button"
+                size="sm"
+                disabled={locked}
+                aria-label="Cancel edit"
+                onClick={handleCancel}
+              >
+                <StyledFilledIcon>
+                  <CloseCircleFilled />
+                </StyledFilledIcon>
+              </IconButton>
+            </StyledActionSlot>
+          </>
+        )}
+      </StyledActions>
+    </StyledRoot>
+  )
+}

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

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

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