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

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

@@ -1,30 +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'
+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

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

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

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