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

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

@@ -0,0 +1,280 @@
+import {
+  forwardRef,
+  useCallback,
+  useRef,
+  useState,
+  type FocusEvent,
+  type InputHTMLAttributes,
+  type KeyboardEvent,
+} from 'react'
+import { styled } from 'styled-components'
+import { Search, X } from 'lucide-react'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import {
+  PathBreadcrumbs,
+  type PathBreadcrumbItem,
+} from '../navigation/PathBreadcrumbs.js'
+import { BareInput } from './BareInput.js'
+
+export interface HybridSearchFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+  value: string
+  onValueChange: (value: string) => void
+  breadcrumbs: PathBreadcrumbItem[]
+  onPathSelect: (path: string) => void
+  onClear?: () => void
+  clearLabel?: string
+  pathLabel?: string
+  searchPlaceholder?: string
+}
+
+//#region styled-components
+
+const StyledHybrid = styled.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+  min-height: 22px;
+`
+
+const StyledLayer = styled.div<{ $visible: boolean }>`
+  grid-row: 1;
+  grid-column: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  width: 100%;
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  transform: translateY(${({ $visible }) => ($visible ? '0' : '2px')});
+  transition: opacity var(--platform-transition-base),
+    transform var(--platform-transition-base);
+  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};
+`
+
+const StyledPathSurface = styled.div<{ $disabled?: boolean }>`
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  width: 100%;
+  font-size: var(--platform-typography-font-size-base);
+  line-height: 1.2;
+  color: var(--platform-colors-text);
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'text')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
+`
+
+const StyledPathText = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledPathNav = styled.div`
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--platform-typography-font-size-base);
+
+  button {
+    font-size: inherit;
+  }
+
+  span[aria-hidden='true'] {
+    font-size: inherit;
+  }
+`
+
+const StyledSearchRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+  width: 100%;
+`
+
+const StyledIcon = styled.span`
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--platform-colors-text-secondary);
+`
+
+const StyledInput = styled(BareInput)`
+  flex: 1 1 auto;
+  min-height: 22px;
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: 1.2;
+`
+
+const StyledClear = styled.button`
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--platform-radius-sm);
+  background: transparent;
+  color: var(--platform-colors-text-secondary);
+  cursor: pointer;
+  transition: color var(--platform-transition-fast);
+
+  &:hover {
+    color: var(--platform-colors-text);
+  }
+`
+
+//#endregion
+
+function pathSummary(items: PathBreadcrumbItem[]): string {
+  if (items.length === 0) return './'
+  if (items.length === 1) return './'
+  return items.map(item => item.label).join(' / ')
+}
+
+export const HybridSearchField = forwardRef<
+  HTMLInputElement,
+  HybridSearchFieldProps
+>(function HybridSearchField(
+  {
+    value,
+    onValueChange,
+    breadcrumbs,
+    onPathSelect,
+    onClear,
+    clearLabel = 'Clear search',
+    pathLabel = 'Current folder path',
+    searchPlaceholder = 'Search this folder',
+    disabled = false,
+    ...rest
+  },
+  ref,
+) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [focused, setFocused] = useState(false)
+  const active = !disabled && (focused || value.trim().length > 0)
+  const showClear = Boolean(value) && !disabled
+
+  const setInputRef = useCallback(
+    (node: HTMLInputElement | null) => {
+      inputRef.current = node
+      if (typeof ref === 'function') ref(node)
+      else if (ref) ref.current = node
+    },
+    [ref],
+  )
+
+  const activate = useCallback(() => {
+    if (disabled) return
+    setFocused(true)
+    requestAnimationFrame(() => inputRef.current?.focus())
+  }, [disabled])
+
+  const deactivate = useCallback(() => {
+    setFocused(false)
+  }, [])
+
+  const handleContainerBlur = useCallback(
+    (event: FocusEvent<HTMLDivElement>) => {
+      const next = event.relatedTarget
+      if (next instanceof Node && rootRef.current?.contains(next)) return
+      if (!value.trim()) deactivate()
+    },
+    [deactivate, value],
+  )
+
+  const handlePathKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) return
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault()
+        activate()
+      }
+    },
+    [activate, disabled],
+  )
+
+  const handleInputKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key !== 'Escape') return
+      onValueChange('')
+      onClear?.()
+      deactivate()
+      inputRef.current?.blur()
+    },
+    [deactivate, onClear, onValueChange],
+  )
+
+  return (
+    <StyledHybrid ref={rootRef} onBlur={handleContainerBlur}>
+      <StyledLayer $visible={!active} aria-hidden={active}>
+        <StyledPathSurface
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          aria-label={`${pathLabel}: ${pathSummary(
+            breadcrumbs,
+          )}. Activate search.`}
+          $disabled={disabled}
+          onClick={activate}
+          onKeyDown={handlePathKeyDown}
+        >
+          {breadcrumbs.length <= 1 ? (
+            <StyledPathText>
+              {breadcrumbs.length === 1 ? `./${breadcrumbs[0].label}` : './'}
+            </StyledPathText>
+          ) : (
+            <StyledPathNav
+              onClick={event => event.stopPropagation()}
+              onKeyDown={event => event.stopPropagation()}
+            >
+              <PathBreadcrumbs
+                items={breadcrumbs}
+                nowrap
+                aria-label={pathLabel}
+                onSelect={onPathSelect}
+              />
+            </StyledPathNav>
+          )}
+        </StyledPathSurface>
+      </StyledLayer>
+
+      <StyledLayer $visible={active} aria-hidden={!active}>
+        <StyledSearchRow>
+          <StyledIcon aria-hidden="true">
+            <PlatformIcon icon={Search} size={14} strokeWidth={1.75} />
+          </StyledIcon>
+          <StyledInput
+            ref={setInputRef}
+            type="search"
+            value={value}
+            disabled={disabled}
+            placeholder={searchPlaceholder}
+            aria-label={searchPlaceholder}
+            onFocus={() => setFocused(true)}
+            onKeyDown={handleInputKeyDown}
+            onChange={event => onValueChange(event.target.value)}
+            {...rest}
+          />
+          {showClear ? (
+            <StyledClear
+              type="button"
+              title={clearLabel}
+              aria-label={clearLabel}
+              onClick={() => {
+                onClear?.()
+                onValueChange('')
+                requestAnimationFrame(() => inputRef.current?.focus())
+              }}
+            >
+              <PlatformIcon icon={X} size={12} strokeWidth={2} />
+            </StyledClear>
+          ) : null}
+        </StyledSearchRow>
+      </StyledLayer>
+    </StyledHybrid>
+  )
+})
+
+HybridSearchField.displayName = 'HybridSearchField'

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

@@ -0,0 +1,197 @@
+import {
+  useEffect,
+  useRef,
+  type ChangeEvent,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react'
+import { styled } from 'styled-components'
+import { CleanButton } from '../buttons/CleanButton.js'
+
+export interface InlineComposerAction {
+  label: string
+  kind?: 'default' | 'danger'
+  onClick: () => void
+}
+
+export interface InlineComposerProps {
+  label: string
+  value: string
+  placeholder?: string
+  primaryLabel?: string
+  actions?: InlineComposerAction[]
+  children?: ReactNode
+  onBlur?: () => void
+  onCancel: () => void
+  onChange: (value: string) => void
+  onCommit: () => void
+}
+
+export function InlineComposer({
+  label,
+  value,
+  placeholder,
+  primaryLabel = 'next',
+  actions = [],
+  children,
+  onBlur,
+  onCancel,
+  onChange,
+  onCommit,
+}: InlineComposerProps): React.ReactElement {
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const onPointerDown = (event: PointerEvent): void => {
+      const root = rootRef.current
+      if (!root || root.contains(event.target as Node | null)) return
+      onCancel()
+    }
+
+    const onKeyDown = (event: globalThis.KeyboardEvent): void => {
+      if (event.key === 'Escape') onCancel()
+    }
+
+    document.addEventListener('pointerdown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [onCancel])
+
+  return (
+    <ComposerRoot ref={rootRef}>
+      <ComposerPrompt>{label}</ComposerPrompt>
+      <ComposerInput
+        autoFocus
+        value={value}
+        onBlur={onBlur}
+        onChange={(event: ChangeEvent<HTMLInputElement>) =>
+          onChange(event.target.value)
+        }
+        onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
+          if (event.key === 'Escape') {
+            onCancel()
+            return
+          }
+          if (event.key === 'Enter' || event.key === 'Tab') {
+            event.preventDefault()
+            onCommit()
+          }
+        }}
+        placeholder={placeholder}
+      />
+      <GhostAction type="button" onClick={onCommit}>
+        {primaryLabel}
+      </GhostAction>
+      {actions.map(action => {
+        const Action = action.kind === 'danger' ? DangerAction : GhostAction
+        return (
+          <Action key={action.label} type="button" onClick={action.onClick}>
+            {action.label}
+          </Action>
+        )
+      })}
+      {children}
+    </ComposerRoot>
+  )
+}
+
+export const InlineSuggestions = styled.div`
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 7px);
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  border: 1px solid var(--platform-colors-divider);
+  border-radius: 8px;
+  background: var(--platform-colors-surface);
+  box-shadow: var(--platform-shadow-lg, 0 12px 24px rgb(0 0 0 / 14%));
+`
+
+export const InlineSuggestion = styled(CleanButton)`
+  display: block;
+  width: 100%;
+  color: var(--platform-colors-text);
+  padding: 8px 10px;
+  text-align: left;
+  justify-content: flex-start;
+
+  &:hover,
+  &:focus-visible {
+    background: var(--platform-colors-surface-hover);
+    outline: none;
+  }
+`
+
+export const InlineSuggestionMeta = styled.span`
+  display: block;
+  color: var(--platform-colors-text-secondary);
+  font-size: 0.85em;
+`
+
+const ComposerRoot = styled.div`
+  position: relative;
+  display: grid;
+  grid-template-columns:
+    minmax(70px, max-content) minmax(0, 1fr) max-content
+    max-content;
+  width: min(100%, 560px);
+  gap: 9px;
+  align-items: baseline;
+  margin: 12px auto 22px;
+  color: var(--platform-colors-text-secondary);
+  font-size: 0.92em;
+`
+
+const ComposerPrompt = styled.span`
+  flex-shrink: 0;
+  font-size: 0.82em;
+  text-transform: lowercase;
+`
+
+const ComposerInput = styled.input`
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  border-bottom: 1px solid var(--platform-colors-divider);
+  background: transparent;
+  color: var(--platform-colors-text);
+  font: inherit;
+
+  &::placeholder {
+    color: var(--platform-colors-text-secondary);
+  }
+
+  &:focus {
+    border-bottom-color: var(--platform-colors-accent);
+    outline: none;
+  }
+`
+
+const GhostAction = styled(CleanButton)`
+  border-radius: 999px;
+  color: var(--platform-colors-text-secondary);
+  font-family: var(--platform-typography-font-family, inherit);
+  font-size: var(--platform-typography-font-size-xs, 11px);
+  padding: 2px 7px;
+
+  &:hover,
+  &:focus-visible {
+    background: var(--platform-colors-surface-hover);
+    color: var(--platform-colors-text);
+    outline: none;
+  }
+`
+
+const DangerAction = styled(GhostAction)`
+  color: var(--platform-colors-danger, #b42318);
+
+  &:hover,
+  &:focus-visible {
+    background: var(--platform-colors-danger-muted, rgb(180 35 24 / 10%));
+    color: var(--platform-colors-danger, #b42318);
+  }
+`

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

@@ -0,0 +1,26 @@
+import {
+  PaletteDropdown,
+  type PaletteDropdownCreatePayload,
+  type PaletteDropdownPalette,
+} from './PaletteDropdown.js'
+
+export interface PaletteCirclePickerProps {
+  label?: string
+  value: string
+  palettes: readonly PaletteDropdownPalette[]
+  disabled?: boolean
+  sectionId?: string
+  allowCustom?: boolean
+  onChange: (id: string) => void
+  onCreatePalette?: (palette: PaletteDropdownCreatePayload) => string | void
+}
+
+/** Compact circular palette trigger for crowded app chrome. */
+export function PaletteCirclePicker({
+  label = 'Palette',
+  ...props
+}: PaletteCirclePickerProps): React.ReactElement {
+  return <PaletteDropdown {...props} label={label} variant="circle" />
+}
+
+export type { PaletteDropdownCreatePayload, PaletteDropdownPalette }