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

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

@@ -0,0 +1,349 @@
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from 'react'
+import { ChevronDown, Plus, Search } from 'lucide-react'
+import { styled } from 'styled-components'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import { SelectMenuControl } from '../dropdown/SelectMenuControl.js'
+
+export interface WorkspacePickerOption {
+  id: string
+  name: string
+  meta?: string | number
+}
+
+export interface WorkspacePickerProps {
+  label?: string
+  options: readonly WorkspacePickerOption[]
+  activeId: string | null
+  placeholder?: string
+  createLabel?: string
+  createPlaceholderName?: string
+  showCreateWhenEmpty?: boolean
+  disabled?: boolean
+  menuPlacement?: 'below' | 'above' | 'auto'
+  onSelect: (id: string) => void
+  onCreate: (name: string) => void
+}
+
+const StyledRoot = styled.div`
+  position: relative;
+  min-width: 0;
+  width: 100%;
+`
+
+const StyledLabel = styled.label`
+  display: block;
+  margin-bottom: 8px;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+`
+
+const StyledControl = styled.div<{ $open: boolean }>`
+  position: relative;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) 18px;
+  align-items: center;
+  gap: 8px;
+  min-height: 38px;
+  padding: 0 10px;
+  border: 1px solid
+    ${({ $open }) =>
+      $open
+        ? 'var(--platform-colors-border-strong)'
+        : 'var(--platform-colors-border)'};
+  border-radius: 9px;
+  background: var(--platform-colors-surface);
+  color: var(--platform-colors-text);
+`
+
+const StyledIconSlot = styled.span`
+  display: inline-flex;
+  color: var(--platform-colors-text-secondary);
+`
+
+const StyledInput = styled.input`
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: 1.2;
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const StyledMenu = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: min(280px, 100%);
+  overflow-y: auto;
+`
+
+const StyledOption = styled.button<{ $active?: boolean }>`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 7px;
+  background: ${({ $active }) =>
+    $active ? 'var(--platform-colors-surface-active)' : 'transparent'};
+  color: var(--platform-colors-text);
+  font: inherit;
+  font-size: var(--platform-typography-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover);
+  }
+`
+
+const StyledOptionName = styled.span`
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledOptionMeta = styled.span`
+  min-width: 22px;
+  padding: 1px 7px;
+  border-radius: var(--platform-radius-full);
+  background: var(--platform-colors-bg);
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: 700;
+  text-align: center;
+`
+
+const StyledCreateOption = styled(StyledOption)`
+  grid-template-columns: 18px minmax(0, 1fr);
+  margin-top: 4px;
+  border-top: 1px solid var(--platform-colors-border);
+  border-radius: 0;
+  padding-top: 10px;
+  color: var(--platform-colors-text);
+`
+
+const StyledEmpty = styled.div`
+  padding: 8px;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+`
+
+function normalizeName(value: string): string {
+  return value.trim().replace(/\s+/g, ' ')
+}
+
+export function WorkspacePicker({
+  label = 'Workspace',
+  options,
+  activeId,
+  placeholder = 'Find or create workspace',
+  createLabel = 'Create',
+  createPlaceholderName,
+  showCreateWhenEmpty = false,
+  disabled,
+  menuPlacement = 'below',
+  onSelect,
+  onCreate,
+}: WorkspacePickerProps): React.ReactElement {
+  const rootRef = useRef<HTMLDivElement | null>(null)
+  const controlRef = useRef<HTMLDivElement | null>(null)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const inputId = useId()
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [highlightedIndex, setHighlightedIndex] = useState(0)
+  const safeOptions = useMemo(
+    () =>
+      options
+        .filter(option => option?.id && typeof option.name === 'string')
+        .map(option => ({
+          ...option,
+          name: option.name.trim() || 'Untitled',
+        })),
+    [options],
+  )
+
+  const activeOption =
+    safeOptions.find(option => option.id === activeId) ?? safeOptions[0] ?? null
+  const normalizedQuery = normalizeName(query)
+  const lowerQuery = normalizedQuery.toLocaleLowerCase()
+
+  const filteredOptions = useMemo(() => {
+    if (!lowerQuery) return [...safeOptions]
+    return safeOptions.filter(option =>
+      option.name.toLocaleLowerCase().includes(lowerQuery),
+    )
+  }, [lowerQuery, safeOptions])
+
+  const canCreate =
+    Boolean(normalizedQuery) &&
+    !safeOptions.some(option => option.name.toLocaleLowerCase() === lowerQuery)
+  const canCreateEmpty = showCreateWhenEmpty && !normalizedQuery
+  const showCreateOption = canCreate || canCreateEmpty
+
+  const menuItemCount = filteredOptions.length + (showCreateOption ? 1 : 0)
+
+  useEffect(() => {
+    setHighlightedIndex(0)
+  }, [query, open])
+
+  const showMenu = (): void => {
+    if (disabled) return
+    setOpen(true)
+    setQuery('')
+  }
+
+  const selectOption = (id: string): void => {
+    onSelect(id)
+    setOpen(false)
+    setQuery('')
+    inputRef.current?.blur()
+  }
+
+  const createWorkspace = (): void => {
+    if (!showCreateOption) return
+    onCreate(normalizedQuery || createPlaceholderName || '')
+    setOpen(false)
+    setQuery('')
+    inputRef.current?.blur()
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+    if (!open && ['ArrowDown', 'Enter'].includes(event.key)) {
+      event.preventDefault()
+      showMenu()
+      return
+    }
+
+    if (!open) return
+
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      setOpen(false)
+      setQuery('')
+      inputRef.current?.blur()
+      return
+    }
+
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      if (!menuItemCount) return
+      setHighlightedIndex(current => {
+        const offset = event.key === 'ArrowDown' ? 1 : -1
+        return (current + offset + menuItemCount) % menuItemCount
+      })
+      return
+    }
+
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      const highlightedOption = filteredOptions[highlightedIndex]
+      if (highlightedOption) {
+        selectOption(highlightedOption.id)
+        return
+      }
+      if (showCreateOption) createWorkspace()
+    }
+  }
+
+  return (
+    <StyledRoot ref={rootRef}>
+      {label ? <StyledLabel htmlFor={inputId}>{label}</StyledLabel> : null}
+      <StyledControl ref={controlRef} $open={open}>
+        <StyledIconSlot aria-hidden="true">
+          <PlatformIcon icon={Search} size={14} strokeWidth={1.8} />
+        </StyledIconSlot>
+        <StyledInput
+          ref={inputRef}
+          id={inputId}
+          value={open ? query : activeOption?.name ?? ''}
+          placeholder={placeholder}
+          disabled={disabled}
+          role="combobox"
+          aria-expanded={open}
+          aria-autocomplete="list"
+          onFocus={showMenu}
+          onChange={event => {
+            setQuery(event.target.value)
+            setOpen(true)
+          }}
+          onKeyDown={handleKeyDown}
+        />
+        <StyledIconSlot aria-hidden="true">
+          <PlatformIcon icon={ChevronDown} size={14} strokeWidth={1.8} />
+        </StyledIconSlot>
+      </StyledControl>
+      <SelectMenuControl
+        anchorRef={controlRef}
+        open={open}
+        placement={menuPlacement}
+        minWidth={320}
+        panelVariant="workspace"
+        wrapChildren={false}
+        role="listbox"
+        aria-label={label}
+        onClose={() => {
+          setOpen(false)
+          setQuery('')
+        }}
+      >
+        <StyledMenu>
+          {filteredOptions.map((option, index) => (
+            <StyledOption
+              key={option.id}
+              type="button"
+              role="option"
+              aria-selected={option.id === activeId}
+              $active={index === highlightedIndex || option.id === activeId}
+              onPointerEnter={() => setHighlightedIndex(index)}
+              onClick={() => selectOption(option.id)}
+            >
+              <StyledOptionName>{option.name}</StyledOptionName>
+              {option.meta === undefined || option.meta === null ? null : (
+                <StyledOptionMeta>{option.meta}</StyledOptionMeta>
+              )}
+            </StyledOption>
+          ))}
+          {showCreateOption ? (
+            <StyledCreateOption
+              type="button"
+              $active={highlightedIndex === filteredOptions.length}
+              onPointerEnter={() => setHighlightedIndex(filteredOptions.length)}
+              onClick={createWorkspace}
+            >
+              <PlatformIcon icon={Plus} size={14} strokeWidth={1.9} />
+              <StyledOptionName>
+                {normalizedQuery
+                  ? `${createLabel} "${normalizedQuery}"`
+                  : createLabel}
+              </StyledOptionName>
+            </StyledCreateOption>
+          ) : null}
+          {!filteredOptions.length && !showCreateOption ? (
+            <StyledEmpty>No matching workspaces.</StyledEmpty>
+          ) : null}
+        </StyledMenu>
+      </SelectMenuControl>
+    </StyledRoot>
+  )
+}

package/src/components/common/inputs/fieldStyles.ts

@@ -0,0 +1,137 @@
+import { css } from 'styled-components'
+
+const fieldFocusStyles = css`
+  border-color: var(
+    --platform-colors-border-strong,
+    var(--platform-colors-border)
+  );
+  box-shadow: 0 0 0 1px var(--platform-colors-surface-hover);
+  outline: none;
+`
+
+/** Flex field shell — border/background on wrapper; control inside is chromeless. */
+export const fieldControlShellCss = css<{ $disabled?: boolean }>`
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  align-self: stretch;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: var(--platform-colors-surface);
+  color: var(--platform-colors-text);
+  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'text')};
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+
+  &:hover {
+    border-color: ${({ $disabled }) =>
+      $disabled
+        ? 'var(--platform-colors-border)'
+        : 'var(--platform-colors-border-strong)'};
+  }
+
+  &:focus-within {
+    ${fieldFocusStyles}
+  }
+`
+
+export const fieldControlInsetCss = css`
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: var(--platform-spacing-xs) var(--platform-spacing-sm);
+`
+
+/** Compact inline control for toolbars and dense chrome rows. */
+export const fieldCompactShellCss = css<{
+  $disabled?: boolean
+  $maxWidth?: string
+}>`
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: ${({ $maxWidth }) => $maxWidth ?? '100%'};
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: var(--platform-colors-surface);
+  color: var(--platform-colors-text);
+  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'text')};
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+
+  &:hover {
+    border-color: ${({ $disabled }) =>
+      $disabled
+        ? 'var(--platform-colors-border)'
+        : 'var(--platform-colors-border-strong)'};
+  }
+
+  &:focus-within {
+    ${fieldFocusStyles}
+  }
+
+  &[data-expanded='true'] {
+    ${fieldFocusStyles}
+  }
+`
+
+/** Native textarea reset — lives inside FieldControlShell only. */
+export const bareTextareaControlStyles = css`
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: calc(var(--platform-spacing-xl) * 3);
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: var(--platform-typography-line-height-base);
+  resize: vertical;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+
+  &::placeholder {
+    color: var(--platform-colors-text-secondary);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`
+
+export const fieldSelectTriggerStyles = css<{ $disabled?: boolean }>`
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--platform-spacing-sm);
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: var(--platform-typography-line-height-base);
+  text-align: left;
+  white-space: nowrap;
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  outline: none;
+
+  & > span:first-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`