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

package/src/components/common/menubar/MenuBarTrigger.tsx

@@ -1,70 +1,70 @@
-import { useRef } from 'react'
-import { styled } from 'styled-components'
-import { MenuDropdown } from '../dropdown/MenuDropdown.js'
-import type { RefObject } from 'react'
-import type {
-  MenuActionItem,
-  MenuBarTriggerProps,
-} from '../dropdown/menuTypes.js'
-
-export interface MenuBarTriggerComponentProps extends MenuBarTriggerProps {
-  menubarRef: RefObject<HTMLElement | null>
-  onSelectItem?: (item: MenuActionItem) => void
-  onClose: () => void
-}
-
-//#region styled-components
-
-const StyledTrigger = styled.button<{ $open: boolean }>`
-  padding: var(--platform-spacing-xs) var(--platform-spacing-sm);
-  border: none;
-  border-radius: 0;
-  background: ${p =>
-    p.$open ? 'var(--platform-colors-surface-hover)' : 'transparent'};
-  color: var(--platform-colors-text);
-  font-size: var(--platform-typography-font-size-base);
-  cursor: pointer;
-
-  &:hover {
-    background: var(--platform-colors-surface-hover);
-  }
-`
-
-//#endregion
-
-export function MenuBarTrigger({
-  section,
-  menubarRef,
-  open,
-  onOpen,
-  onSelectItem,
-  onClose,
-}: MenuBarTriggerComponentProps): React.ReactElement {
-  const triggerRef = useRef<HTMLButtonElement>(null)
-
-  return (
-    <>
-      <StyledTrigger
-        ref={triggerRef}
-        type="button"
-        role="menuitem"
-        data-platform-menu-trigger
-        aria-haspopup="menu"
-        aria-expanded={open}
-        $open={open}
-        onClick={() => (open ? onClose() : onOpen())}
-      >
-        {section.label}
-      </StyledTrigger>
-      <MenuDropdown
-        sectionId={section.id}
-        items={section.items}
-        open={open}
-        menubarRef={menubarRef}
-        triggerRef={triggerRef}
-        onSelectItem={onSelectItem}
-        onClose={onClose}
-      />
-    </>
-  )
-}
+import { useRef } from 'react'
+import { styled } from 'styled-components'
+import { MenuDropdown } from '../dropdown/MenuDropdown.js'
+import type { RefObject } from 'react'
+import type {
+  MenuActionItem,
+  MenuBarTriggerProps,
+} from '../dropdown/menuTypes.js'
+
+export interface MenuBarTriggerComponentProps extends MenuBarTriggerProps {
+  menubarRef: RefObject<HTMLElement | null>
+  onSelectItem?: (item: MenuActionItem) => void
+  onClose: () => void
+}
+
+//#region styled-components
+
+const StyledTrigger = styled.button<{ $open: boolean }>`
+  padding: var(--platform-spacing-xs) var(--platform-spacing-sm);
+  border: none;
+  border-radius: 0;
+  background: ${p =>
+    p.$open ? 'var(--platform-colors-surface-hover)' : 'transparent'};
+  color: var(--platform-colors-text);
+  font-size: var(--platform-typography-font-size-base);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover);
+  }
+`
+
+//#endregion
+
+export function MenuBarTrigger({
+  section,
+  menubarRef,
+  open,
+  onOpen,
+  onSelectItem,
+  onClose,
+}: MenuBarTriggerComponentProps): React.ReactElement {
+  const triggerRef = useRef<HTMLButtonElement>(null)
+
+  return (
+    <>
+      <StyledTrigger
+        ref={triggerRef}
+        type="button"
+        role="menuitem"
+        data-platform-menu-trigger
+        aria-haspopup="menu"
+        aria-expanded={open}
+        $open={open}
+        onClick={() => (open ? onClose() : onOpen())}
+      >
+        {section.label}
+      </StyledTrigger>
+      <MenuDropdown
+        sectionId={section.id}
+        items={section.items}
+        open={open}
+        menubarRef={menubarRef}
+        triggerRef={triggerRef}
+        onSelectItem={onSelectItem}
+        onClose={onClose}
+      />
+    </>
+  )
+}

package/src/components/common/narrative/NarrativeMention.tsx

@@ -1,74 +1,74 @@
-import { styled } from 'styled-components'
-
-/**
- * The suite's narrative-mention primitives: inline spans inside agent
- * prose that stay live — hoverable for detail, clickable to act.
- * Used by the briefing surfaces (mail narrative, the Desk, calendar).
- *
- * Theming flows through CSS variables with quiet fallbacks:
- * --narrative-ink, --narrative-faint, --narrative-muted,
- * --narrative-accent. Hosts set them (or inherit the defaults).
- */
-
-export const MentionWrap = styled.span`
-  position: relative;
-  display: inline;
-`
-
-export const MentionButton = styled.button<{ $dim?: boolean }>`
-  display: inline;
-  padding: 0;
-  border: 0;
-  border-bottom: 1px solid var(--narrative-underline, rgba(127, 127, 127, 0.4));
-  background: transparent;
-  color: ${({ $dim }) =>
-    $dim ? 'var(--narrative-faint, #9aa2ad)' : 'var(--narrative-ink, inherit)'};
-  font: inherit;
-  font-weight: 500;
-  cursor: pointer;
-
-  &:hover {
-    border-bottom-color: var(--narrative-accent, currentColor);
-  }
-`
-
-export const MentionHoverCard = styled.span`
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  z-index: 30;
-  display: block;
-  min-width: 240px;
-  max-width: 330px;
-  padding: 12px 14px;
-  border: 1px solid rgba(127, 127, 127, 0.28);
-  border-radius: 6px;
-  background: var(--narrative-card, #fff);
-  box-shadow: 0 14px 34px rgba(38, 46, 55, 0.14);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.55;
-  white-space: normal;
-  text-align: left;
-`
-
-export const MentionHoverTitle = styled.span`
-  display: block;
-  color: var(--narrative-ink, inherit);
-  font-weight: 650;
-`
-
-export const MentionHoverLine = styled.span`
-  display: block;
-  margin-top: 3px;
-  color: var(--narrative-muted, #737b86);
-`
-
-export const MentionHoverNote = styled.span`
-  display: block;
-  margin-top: 8px;
-  padding-left: 8px;
-  border-left: 2px solid var(--narrative-accent, #525a65);
-  color: var(--narrative-muted, #737b86);
-  font-style: italic;
-`
+import { styled } from 'styled-components'
+
+/**
+ * The suite's narrative-mention primitives: inline spans inside agent
+ * prose that stay live — hoverable for detail, clickable to act.
+ * Used by the briefing surfaces (mail narrative, the Desk, calendar).
+ *
+ * Theming flows through CSS variables with quiet fallbacks:
+ * --narrative-ink, --narrative-faint, --narrative-muted,
+ * --narrative-accent. Hosts set them (or inherit the defaults).
+ */
+
+export const MentionWrap = styled.span`
+  position: relative;
+  display: inline;
+`
+
+export const MentionButton = styled.button<{ $dim?: boolean }>`
+  display: inline;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid var(--narrative-underline, rgba(127, 127, 127, 0.4));
+  background: transparent;
+  color: ${({ $dim }) =>
+    $dim ? 'var(--narrative-faint, #9aa2ad)' : 'var(--narrative-ink, inherit)'};
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+
+  &:hover {
+    border-bottom-color: var(--narrative-accent, currentColor);
+  }
+`
+
+export const MentionHoverCard = styled.span`
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 30;
+  display: block;
+  min-width: 240px;
+  max-width: 330px;
+  padding: 12px 14px;
+  border: 1px solid rgba(127, 127, 127, 0.28);
+  border-radius: 6px;
+  background: var(--narrative-card, #fff);
+  box-shadow: 0 14px 34px rgba(38, 46, 55, 0.14);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.55;
+  white-space: normal;
+  text-align: left;
+`
+
+export const MentionHoverTitle = styled.span`
+  display: block;
+  color: var(--narrative-ink, inherit);
+  font-weight: 650;
+`
+
+export const MentionHoverLine = styled.span`
+  display: block;
+  margin-top: 3px;
+  color: var(--narrative-muted, #737b86);
+`
+
+export const MentionHoverNote = styled.span`
+  display: block;
+  margin-top: 8px;
+  padding-left: 8px;
+  border-left: 2px solid var(--narrative-accent, #525a65);
+  color: var(--narrative-muted, #737b86);
+  font-style: italic;
+`

package/src/components/common/navigation/NavigationCardRow.tsx

@@ -0,0 +1,98 @@
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export interface NavigationCardRowProps {
+  title: ReactNode
+  meta?: ReactNode
+  active?: boolean
+  disabled?: boolean
+  trailing?: ReactNode
+  onClick?: () => void
+}
+
+export const NavigationCardList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-xs, 4px);
+`
+
+const StyledRow = styled.button<{ $active?: boolean }>`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--platform-spacing-sm, 8px);
+  width: 100%;
+  min-width: 0;
+  border: 1px solid
+    ${({ $active }) =>
+      $active
+        ? 'color-mix(in srgb, var(--platform-colors-focus, #0f766e) 72%, var(--platform-colors-border, #d8dfde))'
+        : 'var(--platform-colors-border-subtle, #ebeeee)'};
+  border-radius: var(--platform-radius-sm, 8px);
+  padding: var(--platform-spacing-sm, 8px);
+  color: var(--platform-colors-text, #20272b);
+  background: ${({ $active }) =>
+    $active
+      ? 'color-mix(in srgb, var(--platform-colors-focus, #0f766e) 8%, var(--platform-colors-surface, #fff))'
+      : 'var(--platform-colors-surface, #fff)'};
+  text-align: left;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: var(--platform-colors-surface-hover, #eef7f6);
+  }
+
+  &:disabled {
+    color: var(--platform-colors-text-secondary, #6b7478);
+    cursor: default;
+    opacity: 0.65;
+  }
+`
+
+const StyledBody = styled.span`
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+`
+
+const StyledTitle = styled.span`
+  overflow: hidden;
+  color: var(--platform-colors-text, #20272b);
+  font-size: var(--platform-typography-font-size-base, 13px);
+  font-weight: 600;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledMeta = styled.span`
+  color: var(--platform-colors-text-secondary, #6b7478);
+  font-size: var(--platform-typography-font-size-xs, 11px);
+  line-height: 1.25;
+`
+
+export function NavigationCardRow({
+  title,
+  meta,
+  active,
+  disabled,
+  trailing,
+  onClick,
+}: NavigationCardRowProps): React.ReactElement {
+  return (
+    <StyledRow
+      type="button"
+      $active={active}
+      disabled={disabled}
+      aria-current={active ? 'page' : undefined}
+      onClick={onClick}
+    >
+      <StyledBody>
+        <StyledTitle>{title}</StyledTitle>
+        {meta ? <StyledMeta>{meta}</StyledMeta> : null}
+      </StyledBody>
+      {trailing}
+    </StyledRow>
+  )
+}

package/src/components/common/navigation/PathBreadcrumbs.tsx

@@ -1,78 +1,78 @@
-import { Fragment } from 'react'
-import { styled } from 'styled-components'
-
-export interface PathBreadcrumbItem {
-  label: string
-  path: string
-}
-
-export interface PathBreadcrumbsProps {
-  items: PathBreadcrumbItem[]
-  onSelect: (path: string) => void
-  'aria-label'?: string
-  /** Keep crumbs on one line (toolbar headers). */
-  nowrap?: boolean
-}
-
-//#region styled-components
-
-const StyledNav = styled.nav<{ $nowrap?: boolean }>`
-  display: flex;
-  align-items: center;
-  flex-wrap: ${({ $nowrap }) => ($nowrap ? 'nowrap' : 'wrap')};
-  gap: var(--platform-spacing-xs);
-  min-width: 0;
-  overflow: hidden;
-`
-
-const StyledSep = styled.span`
-  flex: 0 0 auto;
-  color: var(--platform-colors-text-disabled);
-  font-size: var(--platform-typography-font-size-sm);
-  user-select: none;
-`
-
-const StyledCrumb = styled.button`
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--platform-colors-accent);
-  font-size: var(--platform-typography-font-size-sm);
-  line-height: 1;
-  cursor: pointer;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-
-  &:disabled {
-    color: var(--platform-colors-text);
-    cursor: default;
-  }
-`
-
-//#endregion
-
-export function PathBreadcrumbs({
-  items,
-  onSelect,
-  'aria-label': ariaLabel = 'Path',
-  nowrap = false,
-}: PathBreadcrumbsProps): React.ReactElement {
-  return (
-    <StyledNav aria-label={ariaLabel} $nowrap={nowrap}>
-      {items.map((item, index) => (
-        <Fragment key={item.path}>
-          {index > 0 ? <StyledSep aria-hidden="true">/</StyledSep> : null}
-          <StyledCrumb
-            type="button"
-            disabled={index === items.length - 1}
-            onClick={() => onSelect(item.path)}
-          >
-            {item.label}
-          </StyledCrumb>
-        </Fragment>
-      ))}
-    </StyledNav>
-  )
-}
+import { Fragment } from 'react'
+import { styled } from 'styled-components'
+
+export interface PathBreadcrumbItem {
+  label: string
+  path: string
+}
+
+export interface PathBreadcrumbsProps {
+  items: PathBreadcrumbItem[]
+  onSelect: (path: string) => void
+  'aria-label'?: string
+  /** Keep crumbs on one line (toolbar headers). */
+  nowrap?: boolean
+}
+
+//#region styled-components
+
+const StyledNav = styled.nav<{ $nowrap?: boolean }>`
+  display: flex;
+  align-items: center;
+  flex-wrap: ${({ $nowrap }) => ($nowrap ? 'nowrap' : 'wrap')};
+  gap: var(--platform-spacing-xs);
+  min-width: 0;
+  overflow: hidden;
+`
+
+const StyledSep = styled.span`
+  flex: 0 0 auto;
+  color: var(--platform-colors-text-disabled);
+  font-size: var(--platform-typography-font-size-sm);
+  user-select: none;
+`
+
+const StyledCrumb = styled.button`
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--platform-colors-accent);
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: 1;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+
+  &:disabled {
+    color: var(--platform-colors-text);
+    cursor: default;
+  }
+`
+
+//#endregion
+
+export function PathBreadcrumbs({
+  items,
+  onSelect,
+  'aria-label': ariaLabel = 'Path',
+  nowrap = false,
+}: PathBreadcrumbsProps): React.ReactElement {
+  return (
+    <StyledNav aria-label={ariaLabel} $nowrap={nowrap}>
+      {items.map((item, index) => (
+        <Fragment key={item.path}>
+          {index > 0 ? <StyledSep aria-hidden="true">/</StyledSep> : null}
+          <StyledCrumb
+            type="button"
+            disabled={index === items.length - 1}
+            onClick={() => onSelect(item.path)}
+          >
+            {item.label}
+          </StyledCrumb>
+        </Fragment>
+      ))}
+    </StyledNav>
+  )
+}