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

package/src/components/common/desk/DeskCard.tsx

@@ -0,0 +1,157 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export type DeskCardTone = 'ready' | 'busy' | 'neutral'
+
+export interface DeskCardProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  person: ReactNode
+  action: ReactNode
+  reason?: ReactNode
+  status?: ReactNode
+  tone?: DeskCardTone
+  accent?: boolean
+  dim?: boolean
+  dropBefore?: boolean
+}
+
+const StyledCard = styled.button<{
+  $accent: boolean
+  $dim: boolean
+  $dropBefore: boolean
+}>`
+  position: relative;
+  display: block;
+  width: 100%;
+  margin-bottom: 8px;
+  padding: 11px 13px;
+  border: 1px solid
+    ${({ $accent }) => ($accent ? '#d9dee5' : 'rgba(217, 222, 229, 0.9)')};
+  border-left: ${({ $accent }) =>
+    $accent
+      ? '2px solid var(--desk-card-accent, var(--platform-colors-accent))'
+      : '1px solid rgba(217, 222, 229, 0.9)'};
+  border-radius: ${({ $accent }) => ($accent ? '0' : '6px')};
+  background: ${({ $accent, $dim }) =>
+    $accent
+      ? 'var(--desk-card-paper, var(--platform-colors-surface))'
+      : $dim
+      ? 'rgba(255, 255, 255, 0.55)'
+      : 'rgba(255, 255, 255, 0.85)'};
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+
+  &::before {
+    position: absolute;
+    top: -5px;
+    right: 2px;
+    left: 2px;
+    height: 2px;
+    border-radius: 999px;
+    background: ${({ $dropBefore }) =>
+      $dropBefore
+        ? 'var(--desk-card-accent, var(--platform-colors-accent))'
+        : 'transparent'};
+    content: '';
+  }
+
+  &:hover {
+    background: ${({ $accent }) =>
+      $accent ? 'var(--desk-card-paper, #fff)' : '#ffffff'};
+  }
+`
+
+const TopLine = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+`
+
+const Person = styled.div<{ $dim: boolean }>`
+  overflow: hidden;
+  color: ${({ $dim }) =>
+    $dim
+      ? 'var(--desk-card-muted, var(--platform-colors-text-secondary))'
+      : 'var(--desk-card-ink, var(--platform-colors-text))'};
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const Status = styled.span<{ $tone: DeskCardTone }>`
+  flex: 0 0 auto;
+  color: ${({ $tone }) =>
+    $tone === 'ready'
+      ? 'var(--platform-colors-semantic-green-text, #3f7c52)'
+      : $tone === 'busy'
+      ? 'var(--platform-colors-semantic-orange-text, #8a6012)'
+      : 'var(--desk-card-faint, var(--platform-colors-text-tertiary))'};
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+`
+
+const Action = styled.div<{ $dim: boolean }>`
+  display: -webkit-box;
+  margin-top: 8px;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  color: ${({ $dim }) =>
+    $dim
+      ? 'var(--desk-card-muted, var(--platform-colors-text-secondary))'
+      : 'var(--desk-card-ink, var(--platform-colors-text))'};
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.35;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+`
+
+const Reason = styled.div`
+  display: -webkit-box;
+  margin-top: 5px;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  color: var(--desk-card-muted, var(--platform-colors-text-secondary));
+  font-size: 12px;
+  line-height: 1.45;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+`
+
+export function DeskCard({
+  person,
+  action,
+  reason,
+  status,
+  tone = 'neutral',
+  accent = false,
+  dim = false,
+  dropBefore = false,
+  type = 'button',
+  ...buttonProps
+}: DeskCardProps): React.ReactElement {
+  return (
+    <StyledCard
+      {...buttonProps}
+      type={type}
+      $accent={accent}
+      $dim={dim}
+      $dropBefore={dropBefore}
+    >
+      <TopLine>
+        <Person $dim={dim}>{person}</Person>
+        {status ? <Status $tone={tone}>{status}</Status> : null}
+      </TopLine>
+      <Action $dim={dim}>{action}</Action>
+      {reason ? <Reason>{reason}</Reason> : null}
+    </StyledCard>
+  )
+}

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

@@ -0,0 +1,30 @@
+export {
+  ActionReader,
+  type ActionReaderAction,
+  type ActionReaderProps,
+} from './ActionReader.js'
+export {
+  ActivityLedger,
+  type ActivityLedgerItem,
+  type ActivityLedgerProps,
+  type ActivityLedgerTone,
+} from './ActivityLedger.js'
+export {
+  DailyBrief,
+  type DailyBriefProps,
+  type DailyBriefSpan,
+} from './DailyBrief.js'
+export {
+  CreationDesk,
+  CreationDeskFieldBox,
+  CreationDeskFieldTextarea,
+  CreationDeskNote,
+  CreationDeskRow,
+  CreationDeskSection,
+  CreationDeskSectionLabel,
+  CreationDeskSourceCard,
+  CreationDeskSourceHead,
+  CreationDeskTextarea,
+  type CreationDeskProps,
+} from './CreationDesk.js'
+export { DeskCard, type DeskCardProps, type DeskCardTone } from './DeskCard.js'

package/src/components/common/dropdown/ContextMenu.tsx

@@ -0,0 +1,87 @@
+import { useCallback, useEffect } from 'react'
+import { FlexCol } from '../containers/flex.js'
+import { MenuDropdownEntry } from './MenuDropdownEntry.js'
+import { StyledMenuPanel } from './MenuPanel.js'
+import { MenuPortal } from './MenuPortal.js'
+import { isMenuInteractionTarget } from './menuPortalConstants.js'
+import type { MenuActionItem, MenuEntry } from './menuTypes.js'
+
+export interface ContextMenuProps {
+  x: number
+  y: number
+  open: boolean
+  items: MenuEntry[]
+  'aria-label'?: string
+  onSelectItem?: (item: MenuActionItem) => void
+  onClose: () => void
+}
+
+export function ContextMenu({
+  x,
+  y,
+  open,
+  items,
+  'aria-label': ariaLabel = 'Context menu',
+  onSelectItem,
+  onClose,
+}: ContextMenuProps): React.ReactElement | null {
+  const handleSelect = useCallback(
+    (item: MenuActionItem) => {
+      onSelectItem?.(item)
+      onClose()
+    },
+    [onClose, onSelectItem],
+  )
+
+  useEffect(() => {
+    if (!open) return
+
+    const onPointerDown = (event: MouseEvent): void => {
+      if (isMenuInteractionTarget(event.target)) return
+      onClose()
+    }
+
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return (
+    <MenuPortal
+      anchorRef={{ current: null }}
+      open={open}
+      placement="at-point"
+      point={{ x, y }}
+      depth={0}
+    >
+      <StyledMenuPanel
+        open={open}
+        indent={false}
+        role="menu"
+        aria-label={ariaLabel}
+        onClick={event => event.stopPropagation()}
+      >
+        <FlexCol $gap="xs" $width="100%">
+          {items.map((entry, index) => (
+            <MenuDropdownEntry
+              key={entry.type === 'divider' ? `divider-${index}` : entry.id}
+              entry={entry}
+              index={index}
+              depth={0}
+              onSelect={handleSelect}
+            />
+          ))}
+        </FlexCol>
+      </StyledMenuPanel>
+    </MenuPortal>
+  )
+}

package/src/components/common/dropdown/MenuButtonDropdown.tsx

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { styled } from 'styled-components'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import { Button } from '../buttons/Button.js'
+import { IconButton } from '../buttons/IconButton.js'
+import { MenuDropdown } from './MenuDropdown.js'
+import { isMenuInteractionTarget } from './menuPortalConstants.js'
+import type { MenuActionItem, MenuEntry } from './menuTypes.js'
+
+export interface MenuButtonDropdownProps {
+  label: string
+  items: MenuEntry[]
+  icon?: LucideIcon
+  disabled?: boolean
+  variant?: 'ghost' | 'subtle' | 'primary' | 'text'
+  size?: 'sm' | 'md'
+  sectionId?: string
+  onSelectItem?: (item: MenuActionItem) => void
+}
+
+//#region styled-components
+
+const StyledWrap = styled.div`
+  position: relative;
+  display: inline-flex;
+`
+
+const TextTriggerContent = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+`
+
+//#endregion
+
+export function MenuButtonDropdown({
+  label,
+  items,
+  icon,
+  disabled = false,
+  variant = 'subtle',
+  size = 'sm',
+  sectionId = 'menu-button',
+  onSelectItem,
+}: MenuButtonDropdownProps): React.ReactElement {
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const [open, setOpen] = useState(false)
+
+  const close = useCallback(() => setOpen(false), [])
+
+  useEffect(() => {
+    if (!open) return
+
+    const onPointerDown = (event: MouseEvent): void => {
+      if (isMenuInteractionTarget(event.target)) return
+      close()
+    }
+
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') close()
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [close, open])
+
+  const handleSelect = useCallback(
+    (item: MenuActionItem) => {
+      onSelectItem?.(item)
+      close()
+    },
+    [close, onSelectItem],
+  )
+
+  const toggleOpen = useCallback(() => {
+    setOpen(current => !current)
+  }, [])
+
+  const triggerProps = {
+    ref: triggerRef,
+    type: 'button' as const,
+    disabled,
+    'data-platform-menu-trigger': true,
+    'aria-haspopup': 'menu' as const,
+    'aria-expanded': open,
+    onClick: toggleOpen,
+  }
+
+  return (
+    <StyledWrap onClick={event => event.stopPropagation()}>
+      {icon ? (
+        <IconButton {...triggerProps} title={label} aria-label={label}>
+          <PlatformIcon icon={icon} size={16} strokeWidth={1.75} />
+        </IconButton>
+      ) : (
+        <Button {...triggerProps} variant={variant} size={size}>
+          <TextTriggerContent>
+            <span>{label}</span>
+            <PlatformIcon icon={ChevronDown} size={13} strokeWidth={1.8} />
+          </TextTriggerContent>
+        </Button>
+      )}
+      <MenuDropdown
+        sectionId={sectionId}
+        items={items}
+        open={open}
+        triggerRef={triggerRef}
+        placement="below-start"
+        onSelectItem={handleSelect}
+        onClose={close}
+      />
+    </StyledWrap>
+  )
+}

package/src/components/common/dropdown/MenuDropdown.tsx

@@ -0,0 +1,63 @@
+import { FlexCol } from '../containers/flex.js'
+import { MenuDropdownEntry } from './MenuDropdownEntry.js'
+import { StyledChatMenuPanel, StyledMenuPanel } from './MenuPanel.js'
+import { MenuPortal } from './MenuPortal.js'
+import {
+  isMenuDivider,
+  type MenuActionItem,
+  type MenuDropdownProps,
+} from './menuTypes.js'
+
+export function MenuDropdown({
+  sectionId,
+  items,
+  open,
+  menubarRef,
+  triggerRef,
+  placement = 'below-menubar-start',
+  widthMode = 'intrinsic',
+  minWidth,
+  panelVariant = 'default',
+  onSelectItem,
+  onClose,
+}: MenuDropdownProps): React.ReactElement | null {
+  const handleSelect = (item: MenuActionItem) => {
+    onSelectItem?.(item)
+    onClose()
+  }
+
+  const Panel = panelVariant === 'chat' ? StyledChatMenuPanel : StyledMenuPanel
+
+  return (
+    <MenuPortal
+      anchorRef={placement === 'below-menubar-start' ? menubarRef! : triggerRef}
+      alignRef={placement === 'below-menubar-start' ? triggerRef : undefined}
+      open={open}
+      placement={placement}
+      depth={0}
+      widthMode={widthMode}
+      minWidth={minWidth}
+    >
+      <Panel
+        $fillWidth={widthMode === 'anchor'}
+        open={open}
+        indent={false}
+        role="menu"
+        aria-label={`${sectionId} menu`}
+        data-section-id={sectionId}
+      >
+        <FlexCol $gap="xs" $width="100%">
+          {items.map((entry, index) => (
+            <MenuDropdownEntry
+              key={isMenuDivider(entry) ? `divider-${index}` : entry.id}
+              entry={entry}
+              index={index}
+              depth={0}
+              onSelect={handleSelect}
+            />
+          ))}
+        </FlexCol>
+      </Panel>
+    </MenuPortal>
+  )
+}

package/src/components/common/dropdown/MenuDropdownEntry.tsx

@@ -0,0 +1,51 @@
+import { styled } from 'styled-components'
+import { MenuDropdownItem } from './MenuDropdownItem.js'
+import { MenuDropdownSubmenu } from './MenuDropdownSubmenu.js'
+import {
+  isMenuDivider,
+  isMenuSubmenu,
+  type MenuActionItem,
+  type MenuEntry,
+} from './menuTypes.js'
+
+export interface MenuDropdownEntryProps {
+  entry: MenuEntry
+  index: number
+  /** Portal stacking depth for nested flyouts (parent menu surface is 0). */
+  depth: number
+  onSelect: (item: MenuActionItem) => void
+}
+
+//#region styled-components
+
+const StyledDivider = styled.hr`
+  margin: var(--platform-spacing-xs) 0;
+  border: none;
+  border-top: 1px solid var(--platform-colors-divider);
+`
+
+//#endregion
+
+export function MenuDropdownEntry({
+  entry,
+  index,
+  depth,
+  onSelect,
+}: MenuDropdownEntryProps): React.ReactElement | null {
+  if (isMenuDivider(entry)) {
+    return <StyledDivider key={`divider-${index}`} />
+  }
+
+  if (isMenuSubmenu(entry)) {
+    return (
+      <MenuDropdownSubmenu
+        key={entry.id}
+        item={entry}
+        depth={depth + 1}
+        onSelect={onSelect}
+      />
+    )
+  }
+
+  return <MenuDropdownItem key={entry.id} item={entry} onSelect={onSelect} />
+}

package/src/components/common/dropdown/MenuDropdownItem.tsx

@@ -0,0 +1,82 @@
+import { styled } from 'styled-components'
+import type { MenuActionItem } from './menuTypes.js'
+
+export interface MenuDropdownItemProps {
+  item: MenuActionItem
+  onSelect: (item: MenuActionItem) => void
+}
+
+//#region styled-components
+
+const StyledItem = styled.button<{
+  $disabled?: boolean
+  $tone?: MenuActionItem['tone']
+}>`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--platform-spacing-md);
+  width: 100%;
+  min-height: 30px;
+  padding: 5px 8px;
+  border: none;
+  border-radius: var(--platform-radius-sm);
+  background: transparent;
+  color: ${p =>
+    p.$tone === 'danger'
+      ? 'var(--platform-colors-text-danger)'
+      : 'var(--platform-colors-text)'};
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: 1.3;
+  text-align: left;
+  cursor: ${p => (p.$disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${p => (p.$disabled ? 0.45 : 1)};
+
+  &:hover:not(:disabled) {
+    background: var(--platform-colors-surface-hover);
+  }
+
+  & > span:first-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+
+const StyledShortcut = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  font-family: var(--platform-typography-font-family-mono);
+`
+
+//#endregion
+
+export function MenuDropdownItem({
+  item,
+  onSelect,
+}: MenuDropdownItemProps): React.ReactElement {
+  const selectItem = (): void => {
+    if (!item.disabled) onSelect(item)
+  }
+
+  return (
+    <StyledItem
+      type="button"
+      role="menuitem"
+      disabled={item.disabled}
+      $disabled={item.disabled}
+      $tone={item.tone}
+      onPointerDown={event => {
+        if (event.pointerType === 'mouse' || event.pointerType === 'touch') {
+          event.preventDefault()
+          selectItem()
+        }
+      }}
+      onClick={selectItem}
+    >
+      <span>{item.label}</span>
+      {item.shortcut ? <StyledShortcut>{item.shortcut}</StyledShortcut> : null}
+    </StyledItem>
+  )
+}