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

package/src/components/common/layout/panelLayoutState.ts

@@ -0,0 +1,174 @@
+import {
+  PLATFORM_PANEL_LAYOUT_PREFERENCE_KEY,
+  PLATFORM_PANEL_LAYOUT_STATE_VERSION,
+} from './panelLayoutConstants.js'
+import type {
+  PanelConfig,
+  PanelLayoutPreferenceState,
+  PanelLayoutSizes,
+} from './panelLayoutTypes.js'
+
+export function normalizePanelSizes(
+  sizes: PanelLayoutSizes,
+  configs: PanelConfig[],
+): PanelLayoutSizes {
+  if (sizes.length !== configs.length || sizes.length === 0) {
+    return sizes
+  }
+
+  const clamped = sizes.map((size, index) => {
+    const minSize = configs[index]?.minSize ?? 5
+    const maxSize = configs[index]?.maxSize ?? 95
+    return clamp(size, minSize, maxSize)
+  })
+
+  const total = clamped.reduce((sum, value) => sum + value, 0)
+  if (total <= 0) {
+    return evenPanelSizes(configs.length)
+  }
+
+  return clamped.map(value => (value / total) * 100)
+}
+
+export function evenPanelSizes(count: number): PanelLayoutSizes {
+  if (count <= 0) return []
+  const base = 100 / count
+  return Array.from({ length: count }, () => base)
+}
+
+export function resizeAdjacentPanels(
+  sizes: PanelLayoutSizes,
+  configs: PanelConfig[],
+  index: number,
+  deltaPercent: number,
+): PanelLayoutSizes {
+  if (index < 0 || index >= sizes.length - 1) return sizes
+
+  const next = [...sizes]
+  const leftMin = configs[index]?.minSize ?? 5
+  const leftMax = configs[index]?.maxSize ?? 95
+  const rightMin = configs[index + 1]?.minSize ?? 5
+  const rightMax = configs[index + 1]?.maxSize ?? 95
+
+  let left = next[index] + deltaPercent
+  let right = next[index + 1] - deltaPercent
+
+  if (left < leftMin) {
+    right -= leftMin - left
+    left = leftMin
+  } else if (left > leftMax) {
+    right -= leftMax - left
+    left = leftMax
+  }
+
+  if (right < rightMin) {
+    left -= rightMin - right
+    right = rightMin
+  } else if (right > rightMax) {
+    left -= rightMax - right
+    right = rightMax
+  }
+
+  next[index] = left
+  next[index + 1] = right
+  return normalizePanelSizes(next, configs)
+}
+
+export function serializePanelLayoutPreference(
+  sizes: PanelLayoutSizes,
+): PanelLayoutPreferenceState {
+  return {
+    version: PLATFORM_PANEL_LAYOUT_STATE_VERSION,
+    sizes,
+  }
+}
+
+export function patchPanelLayoutPreference(
+  sizes: PanelLayoutSizes,
+): Record<string, PanelLayoutPreferenceState> {
+  return {
+    [PLATFORM_PANEL_LAYOUT_PREFERENCE_KEY]:
+      serializePanelLayoutPreference(sizes),
+  }
+}
+
+export function readPanelLayoutFromAppSettings(
+  appSettings: Record<string, unknown>,
+  defaultSizes: PanelLayoutSizes,
+  configs: PanelConfig[],
+): PanelLayoutSizes {
+  const parsed = parsePanelLayoutPreference(
+    appSettings[PLATFORM_PANEL_LAYOUT_PREFERENCE_KEY],
+  )
+  if (!parsed || parsed.length !== defaultSizes.length) {
+    return normalizePanelSizes(defaultSizes, configs)
+  }
+  return normalizePanelSizes(parsed, configs)
+}
+
+export function parsePanelLayoutPreference(
+  value: unknown,
+): PanelLayoutSizes | null {
+  if (!value || typeof value !== 'object') return null
+  const record = value as Record<string, unknown>
+  if (record.version !== PLATFORM_PANEL_LAYOUT_STATE_VERSION) return null
+  if (!Array.isArray(record.sizes)) return null
+  const sizes = record.sizes.filter(
+    (entry): entry is number =>
+      typeof entry === 'number' && Number.isFinite(entry),
+  )
+  return sizes.length > 0 ? sizes : null
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value))
+}
+
+/** Hide the handle between `handleIndex` and `handleIndex + 1` when either side is collapsed. */
+export function isPanelResizeHandleHidden(
+  handleIndex: number,
+  collapsed: readonly boolean[],
+): boolean {
+  return Boolean(collapsed[handleIndex] || collapsed[handleIndex + 1])
+}
+
+export function visiblePanelResizeHandleCount(
+  collapsed: readonly boolean[],
+  handleCount: number,
+): number {
+  let count = 0
+  for (let index = 0; index < handleCount; index += 1) {
+    if (!isPanelResizeHandleHidden(index, collapsed)) count += 1
+  }
+  return count
+}
+
+/** Renormalize stored sizes across non-collapsed panels (sum → 100). */
+export function visiblePanelLayoutSizes(
+  sizes: PanelLayoutSizes,
+  collapsed: readonly boolean[],
+): PanelLayoutSizes {
+  if (sizes.length === 0) return sizes
+
+  let visibleTotal = 0
+  for (let index = 0; index < sizes.length; index += 1) {
+    if (collapsed[index]) continue
+    visibleTotal += sizes[index] ?? 0
+  }
+
+  if (visibleTotal <= 0) {
+    return sizes.map(() => 0)
+  }
+
+  return sizes.map((size, index) =>
+    collapsed[index] ? 0 : ((size ?? 0) / visibleTotal) * 100,
+  )
+}
+
+export function panelFlexBasis(
+  sizePercent: number,
+  visibleDividerCount: number,
+): string {
+  const ratio = sizePercent / 100
+  return `calc((100% - ${visibleDividerCount * 2}px) * ${ratio})`
+}

package/src/components/common/layout/panelLayoutTypes.ts

@@ -0,0 +1,19 @@
+/** Percent widths for sibling panels; must sum to 100 after normalization. */
+export type PanelLayoutSizes = number[]
+
+export interface PanelLayoutPreferenceState {
+  version: number
+  sizes: PanelLayoutSizes
+}
+
+export type PanelGroupDirection = 'horizontal' | 'vertical'
+
+export interface PanelLayoutPersistence {
+  load(): PanelLayoutSizes | null
+  save(sizes: PanelLayoutSizes): void
+}
+
+export interface PanelConfig {
+  minSize?: number
+  maxSize?: number
+}

package/src/components/common/layout/tabs/Tabs.tsx

@@ -0,0 +1,136 @@
+import type { ReactNode } from 'react'
+import { switchOn } from '../../../../utils/generalUtils.js'
+import { CleanButton } from '../../buttons/CleanButton.js'
+import { FlexCol, FlexRow, type SpacingToken } from '../../containers/flex.js'
+import {
+  ScrollPanel,
+  type ScrollPanelProps,
+} from '../../containers/ScrollPanel.js'
+import { Each } from '../../render/Each.js'
+import { styled } from 'styled-components'
+
+export interface TabDefinition {
+  id: string
+  label: string
+  content: ReactNode
+}
+
+export interface TabsProps {
+  tabs: readonly TabDefinition[]
+  activeTabId: string
+  onTabChange: (tabId: string) => void
+  bodyPadding?: ScrollPanelProps['padding']
+  'aria-label'?: string
+  tabActions?: ReactNode
+}
+
+//#region styled-components
+
+const StyledRoot = styled(FlexCol)`
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  align-self: stretch;
+  overflow: hidden;
+`
+
+const StyledTabBar = styled(FlexRow)<{ $pad: SpacingToken }>`
+  padding-inline: var(
+    --platform-modal-inset,
+    var(--platform-spacing-${({ $pad }) => $pad})
+  );
+`
+
+const StyledHeaderRow = styled(FlexRow)`
+  flex: 0 1 auto;
+  min-width: 0;
+  width: auto;
+  gap: var(--platform-spacing-md);
+  border-bottom: 1px solid var(--platform-colors-border);
+  overflow-x: auto;
+`
+
+const StyledTabTrigger = styled(CleanButton)<{ $active?: boolean }>`
+  flex-shrink: 0;
+  padding-block: var(--platform-spacing-sm);
+  padding-inline: 0;
+  border-bottom: 2px solid transparent;
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: var(--platform-typography-font-weight-normal);
+
+  &[aria-selected='true'] {
+    color: var(--platform-colors-text);
+    font-weight: var(--platform-typography-font-weight-medium);
+    border-bottom: 2px solid var(--platform-colors-accent);
+  }
+`
+
+//#endregion
+
+export function Tabs({
+  tabs,
+  activeTabId,
+  onTabChange,
+  bodyPadding = 'md',
+  'aria-label': ariaLabel = 'Tabs',
+  tabActions,
+}: TabsProps): React.ReactElement {
+  const bodyByTabId = tabs.reduce<Partial<Record<string, ReactNode>>>(
+    (cases, tab) => {
+      cases[tab.id] = tab.content
+      return cases
+    },
+    {},
+  )
+
+  function renderTabTrigger(tab: TabDefinition): React.ReactElement {
+    const active = tab.id === activeTabId
+    return (
+      <StyledTabTrigger
+        className="tab-btn"
+        type="button"
+        role="tab"
+        aria-selected={active}
+        tabIndex={active ? 0 : -1}
+        onClick={() => onTabChange(tab.id)}
+      >
+        {tab.label}
+      </StyledTabTrigger>
+    )
+  }
+
+  return (
+    <StyledRoot>
+      <StyledTabBar
+        $pad={bodyPadding}
+        $align="center"
+        $width="100%"
+        $flex="0 0 auto"
+        className="tbs-actions-container"
+      >
+        <StyledHeaderRow
+          role="tablist"
+          aria-label={ariaLabel}
+          className="tabs-header"
+        >
+          <Each of={tabs} as={renderTabTrigger} />
+        </StyledHeaderRow>
+        {tabActions ? (
+          <FlexRow
+            $flex="1"
+            $justify="end"
+            $align="center"
+            $gap="sm"
+            $minHeight="0"
+          >
+            {tabActions}
+          </FlexRow>
+        ) : null}
+      </StyledTabBar>
+      <ScrollPanel padding={bodyPadding}>
+        {switchOn(activeTabId, bodyByTabId) ?? null}
+      </ScrollPanel>
+    </StyledRoot>
+  )
+}

package/src/components/common/lists/listRowStyles.ts

@@ -0,0 +1,32 @@
+import { css, styled } from 'styled-components'
+import { CleanButton } from '../buttons/CleanButton.js'
+
+/** Shared list row layout + active colors. Extend with `styled(ListRow)` / `styled(ListRowButton)`. */
+export const listRowBaseCss = css<{ $active?: boolean }>`
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--platform-spacing-sm);
+  width: 100%;
+  min-width: 0;
+  padding: var(--platform-spacing-xs) var(--platform-spacing-sm);
+  text-align: left;
+  color: ${({ $active }) =>
+    $active ? 'var(--platform-colors-accent)' : 'var(--platform-colors-text)'};
+  background: ${({ $active }) =>
+    $active ? 'var(--platform-colors-accent-muted)' : 'transparent'};
+`
+
+export const ListRow = styled.div<{ $active?: boolean }>`
+  ${listRowBaseCss}
+`
+
+export const ListRowButton = styled(CleanButton)<{ $active?: boolean }>`
+  ${listRowBaseCss}
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: var(--platform-colors-surface-hover);
+    color: var(--platform-colors-text);
+  }
+`

package/src/components/common/lists/quiet-ledger/QuietActivityList.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export interface QuietActivityListItem {
+  id: string
+  text: ReactNode
+  meta?: ReactNode
+}
+
+export interface QuietActivityListProps {
+  items: readonly QuietActivityListItem[]
+  empty?: ReactNode
+}
+
+const List = styled.ul`
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`
+
+const Item = styled.li`
+  display: grid;
+  gap: 4px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--platform-colors-border);
+`
+
+const Text = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: 13px;
+  line-height: 1.45;
+`
+
+const Meta = styled.span`
+  color: var(--platform-colors-text-tertiary);
+  font-size: 11px;
+  line-height: 1.35;
+`
+
+const Empty = styled.p`
+  margin: 0;
+  color: var(--platform-colors-text-tertiary);
+  font-size: 14px;
+  line-height: 1.5;
+`
+
+export function QuietActivityList({
+  items,
+  empty = 'No activity yet.',
+}: QuietActivityListProps): React.ReactElement {
+  if (!items.length) return <Empty>{empty}</Empty>
+  return (
+    <List>
+      {items.map(item => (
+        <Item key={item.id}>
+          <Text>{item.text}</Text>
+          {item.meta ? <Meta>{item.meta}</Meta> : null}
+        </Item>
+      ))}
+    </List>
+  )
+}

package/src/components/common/lists/quiet-ledger/QuietLedgerRow.tsx

@@ -0,0 +1,119 @@
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+
+export interface QuietLedgerRowProps {
+  title: ReactNode
+  meta?: ReactNode
+  badge?: ReactNode
+  summary?: ReactNode
+  preview?: ReactNode
+  link?: ReactNode
+  details?: ReactNode
+  actions?: ReactNode
+  compact?: boolean
+}
+
+const Row = styled.article<{ $compact: boolean }>`
+  padding: ${({ $compact }) => ($compact ? '12px 0' : '20px 0')};
+  border-bottom: 1px solid var(--platform-colors-border);
+`
+
+const Head = styled.div`
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  align-items: flex-start;
+`
+
+const Title = styled.h3`
+  margin: 0;
+  color: var(--platform-colors-text);
+  font-size: 17px;
+  line-height: 1.25;
+  letter-spacing: 0;
+`
+
+const Meta = styled.div`
+  margin-top: 4px;
+  color: var(--platform-colors-text-tertiary);
+  font-size: 12px;
+  line-height: 1.4;
+`
+
+const Summary = styled.p`
+  max-width: 70ch;
+  margin: 11px 0 0;
+  color: var(--platform-colors-text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+`
+
+const Preview = styled.p`
+  max-width: 70ch;
+  margin: 7px 0 0;
+  color: var(--platform-colors-text-tertiary);
+  font-size: 13px;
+  line-height: 1.45;
+`
+
+const LinkSlot = styled.div`
+  margin-top: 9px;
+  font-size: 12px;
+
+  a {
+    color: var(--platform-colors-text-secondary);
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: var(--platform-colors-text);
+    text-decoration: underline;
+  }
+`
+
+const Details = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 12px;
+  color: var(--platform-colors-text-tertiary);
+  font-size: 12px;
+`
+
+const Actions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  margin-top: 12px;
+  color: var(--platform-colors-text-tertiary);
+`
+
+export function QuietLedgerRow({
+  title,
+  meta,
+  badge,
+  summary,
+  preview,
+  link,
+  details,
+  actions,
+  compact = false,
+}: QuietLedgerRowProps): React.ReactElement {
+  return (
+    <Row $compact={compact}>
+      <Head>
+        <div>
+          <Title>{title}</Title>
+          {meta ? <Meta>{meta}</Meta> : null}
+        </div>
+        {badge}
+      </Head>
+      {summary ? <Summary>{summary}</Summary> : null}
+      {preview ? <Preview>{preview}</Preview> : null}
+      {link ? <LinkSlot>{link}</LinkSlot> : null}
+      {details ? <Details>{details}</Details> : null}
+      {actions ? <Actions>{actions}</Actions> : null}
+    </Row>
+  )
+}

package/src/components/common/lists/quiet-ledger/index.ts

@@ -0,0 +1,9 @@
+export {
+  QuietActivityList,
+  type QuietActivityListItem,
+  type QuietActivityListProps,
+} from './QuietActivityList.js'
+export {
+  QuietLedgerRow,
+  type QuietLedgerRowProps,
+} from './QuietLedgerRow.js'

package/src/components/common/lists/reorderable/DragHandle.tsx

@@ -0,0 +1,65 @@
+import type { DragEvent, HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+
+//#region styled-components
+
+const StyledDragHandle = styled.span`
+  width: 18px;
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 3px);
+  grid-auto-rows: 3px;
+  gap: 3px;
+  align-content: center;
+  justify-content: center;
+  color: var(--platform-colors-text-secondary);
+  opacity: 0.35;
+  cursor: grab;
+  user-select: none;
+  -webkit-app-region: no-drag;
+
+  &:active {
+    cursor: grabbing;
+  }
+`
+
+const StyledGripDot = styled.span`
+  width: 3px;
+  height: 3px;
+  border-radius: 999px;
+  background: currentColor;
+`
+
+//#endregion
+
+export interface DragHandleProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'draggable'> {
+  onDragStart: (event: DragEvent<HTMLSpanElement>) => void
+  onDragEnd: () => void
+  title?: string
+}
+
+export function DragHandle({
+  onDragStart,
+  onDragEnd,
+  title = 'Drag to reorder',
+  ...rest
+}: DragHandleProps): React.ReactElement {
+  return (
+    <StyledDragHandle
+      draggable
+      aria-hidden="true"
+      title={title}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      {...rest}
+    >
+      <StyledGripDot />
+      <StyledGripDot />
+      <StyledGripDot />
+      <StyledGripDot />
+      <StyledGripDot />
+      <StyledGripDot />
+    </StyledDragHandle>
+  )
+}