@puredesktop/puredesktop-ui-bridge 2.1.4 → 2.1.7

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

@@ -223,9 +223,14 @@ const StyledItem = styled.button<{
   min-height: var(--platform-select-menu-item-height, 30px);
   padding: var(--platform-select-menu-item-padding, 5px 8px);
   border: none;
-  border-radius: var(--platform-select-menu-item-radius, var(--platform-radius-sm, 6px));
+  border-radius: var(
+    --platform-select-menu-item-radius,
+    var(--platform-radius-sm)
+  );
   background: ${({ $selected }) =>
-    $selected ? 'var(--platform-colors-surface-hover, #f4f6f8)' : 'transparent'};
+    $selected
+      ? 'var(--platform-colors-surface-hover, #f0ede7)'
+      : 'transparent'};
   color: ${({ $tone }) =>
     $tone === 'danger'
       ? 'var(--platform-colors-text-danger, #b42318)'
@@ -241,6 +246,6 @@ const StyledItem = styled.button<{
   opacity: ${({ disabled }) => (disabled ? 0.45 : 1)};
 
   &:hover:not(:disabled) {
-    background: var(--platform-colors-surface-hover, #f4f6f8);
+    background: var(--platform-colors-surface-hover, #f0ede7);
   }
 `

package/src/components/common/dropdown/menuTypes.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from 'react'
+import type { ReactNode, RefObject } from 'react'
 import type { MenuWidthMode } from './menuViewportPosition.js'
 import type { MenuPlacement } from './useMenuAnchorPosition.js'
 
@@ -10,6 +10,7 @@ export interface MenuActionItem {
   type?: 'action'
   id: string
   label: string
+  icon?: ReactNode
   disabled?: boolean
   tone?: MenuActionTone
   /** Display only until shell wires shortcuts */

package/src/components/common/evidence/StructuredEvidenceView.tsx

@@ -72,7 +72,7 @@ const MetricCard = styled.div`
   min-width: 0;
   padding: 10px 12px;
   border: 1px solid currentColor;
-  border-radius: 6px;
+  border-radius: var(--platform-radius-sm, 0px);
   background: color-mix(in srgb, currentColor 7%, transparent);
 `
 
@@ -106,7 +106,7 @@ const ChartRow = styled.div`
 const ChartTrack = styled.div`
   height: 8px;
   overflow: hidden;
-  border-radius: 999px;
+  border-radius: var(--platform-radius-sm);
   background: color-mix(in srgb, currentColor 16%, transparent);
 `
 
@@ -150,7 +150,7 @@ const ClaimProofCell = styled.div`
   min-width: 0;
   padding: 10px;
   border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
-  border-radius: 6px;
+  border-radius: var(--platform-radius-sm, 0px);
   background: color-mix(in srgb, currentColor 6%, transparent);
   font-size: 0.56em;
   line-height: 1.2;
@@ -169,8 +169,12 @@ const FigureCallout = styled.div<{
   min-height: ${({ $h }) => `${$h * 100}%`};
   padding: 5px 7px;
   border: 1px solid currentColor;
-  border-radius: 4px;
-  background: color-mix(in srgb, var(--slides-panel, #ffffff) 82%, transparent);
+  border-radius: var(--platform-radius-sm, 0px);
+  background: color-mix(
+    in srgb,
+    var(--slides-panel, var(--platform-colors-surface, #ffffff)) 82%,
+    transparent
+  );
   color: inherit;
   font-size: 10px;
   font-weight: 720;

package/src/components/common/feedback/Badge.tsx

@@ -11,16 +11,26 @@ export interface BadgeProps {
 //#region styled-components
 
 const StyledBadge = styled.span<{ $tone: BadgeTone }>`
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
   padding: 2px var(--platform-spacing-sm);
-  border-radius: var(--platform-radius-full);
-  font-size: var(--platform-typography-font-size-sm);
+  border: 1px solid
+    ${({ $tone }) =>
+      $tone === 'accent'
+        ? 'var(--platform-colors-semantic-green-border)'
+        : 'var(--platform-colors-border)'};
+  border-radius: var(--platform-radius-full, 999px);
+  font-family: var(--platform-typography-font-family-mono);
+  font-size: var(--platform-typography-font-size-xs);
+  letter-spacing: 0.06em;
   background: ${({ $tone }) =>
     $tone === 'accent'
-      ? 'var(--platform-colors-accent-muted)'
+      ? 'var(--platform-colors-semantic-green-muted)'
       : 'var(--platform-colors-surface-hover)'};
   color: ${({ $tone }) =>
     $tone === 'accent'
-      ? 'color-mix(in srgb, var(--platform-colors-accent) 62%, var(--platform-colors-text) 38%)'
+      ? 'var(--platform-colors-semantic-green-text)'
       : 'var(--platform-colors-text-secondary)'};
 `
 
@@ -31,5 +41,9 @@ export function Badge({
   className,
   children,
 }: BadgeProps): React.ReactElement {
-  return <StyledBadge className={className} $tone={tone}>{children}</StyledBadge>
+  return (
+    <StyledBadge className={className} $tone={tone}>
+      {children}
+    </StyledBadge>
+  )
 }

package/src/components/common/feedback/CapabilityPills.tsx

@@ -15,7 +15,7 @@ const StyledList = styled.div`
 
 const StyledPill = styled.span`
   padding: 2px var(--platform-spacing-sm);
-  border-radius: var(--platform-radius-full);
+  border-radius: var(--platform-radius-sm);
   background: var(--platform-colors-surface-active);
   color: var(--platform-colors-text-secondary);
   font-size: var(--platform-typography-font-size-sm);

package/src/components/common/feedback/InfoHint.tsx

@@ -23,7 +23,7 @@ const StyledWrap = styled.span`
 const StyledButton = styled.button`
   width: 26px;
   height: 26px;
-  border: 1px solid var(--platform-colors-border, #e1e6ed);
+  border: 1px solid var(--platform-colors-border, #e7e4dd);
   border-radius: var(--platform-radius-full, 999px);
   background: var(--platform-colors-surface, #ffffff);
   color: var(--platform-colors-text-secondary, #6d7680);
@@ -44,7 +44,7 @@ const StyledPopover = styled.div<{ $align: 'left' | 'right' }>`
   background: var(--platform-colors-elevated, #ffffff);
   box-shadow: var(--platform-shadow-md, 0 18px 44px rgb(38 46 55 / 16%));
   padding: 12px 14px;
-  color: var(--platform-colors-text, #2e3338);
+  color: var(--platform-colors-text, #1c1a17);
   opacity: 0;
   pointer-events: none;
   transform: translateY(-4px);

package/src/components/common/feedback/PlatformChip.tsx

@@ -42,14 +42,14 @@ const toneMap: Record<
     border: 'var(--platform-colors-semantic-red-border, #ebcac8)',
   },
   neutral: {
-    bg: 'var(--platform-colors-surface-hover, #e7eaee)',
-    fg: 'var(--platform-colors-text-secondary, #6d7680)',
-    border: 'var(--platform-colors-border, #d9dee5)',
+    bg: 'var(--platform-colors-surface-hover, #f0ede7)',
+    fg: 'var(--platform-colors-text-secondary, #6b665e)',
+    border: 'var(--platform-colors-border, #e7e4dd)',
   },
   meta: {
-    bg: '#f8f9fb',
-    fg: 'var(--platform-colors-text-secondary, #6d7680)',
-    border: 'var(--platform-colors-border-soft, #e5e8ed)',
+    bg: 'var(--platform-colors-surface-subtle, #fbfbfc)',
+    fg: 'var(--platform-colors-text-secondary, #6b665e)',
+    border: 'var(--platform-colors-border-soft, #f0ede7)',
   },
 }
 
@@ -61,7 +61,7 @@ const StyledChip = styled.span<{ $tone: PlatformChipTone }>`
   min-height: 20px;
   padding: 0 8px;
   border: 1px solid ${({ $tone }) => toneMap[$tone].border};
-  border-radius: ${({ $tone }) => ($tone === 'meta' ? '6px' : '0')};
+  border-radius: var(--platform-radius-full, 999px);
   background: ${({ $tone }) => toneMap[$tone].bg};
   color: ${({ $tone }) => toneMap[$tone].fg};
   font-size: var(--platform-typography-font-size-sm);
@@ -76,7 +76,7 @@ const StyledChip = styled.span<{ $tone: PlatformChipTone }>`
 `
 
 const StyledMetaLabel = styled.span`
-  color: #8b939d;
+  color: var(--platform-colors-text-tertiary, #8f897f);
   font-size: 10px;
   font-weight: var(--platform-typography-font-weight-bold);
   letter-spacing: 0.04em;
@@ -84,7 +84,7 @@ const StyledMetaLabel = styled.span`
 `
 
 const StyledMetaValue = styled.span`
-  color: #606a75;
+  color: var(--platform-colors-text-secondary, #6b665e);
 `
 
 //#endregion

package/src/components/common/feedback/QuietPill.tsx

@@ -1,12 +1,7 @@
 import type { ReactNode } from 'react'
 import { styled } from 'styled-components'
 
-export type QuietPillTone =
-  | 'accent'
-  | 'danger'
-  | 'gold'
-  | 'neutral'
-  | 'success'
+export type QuietPillTone = 'accent' | 'danger' | 'gold' | 'neutral' | 'success'
 
 export interface QuietPillProps {
   tone?: QuietPillTone
@@ -34,7 +29,7 @@ const StyledPill = styled.span<{ $tone: QuietPillTone }>`
         : $tone === 'success'
         ? 'rgb(from var(--platform-colors-success) r g b / 42%)'
         : 'var(--platform-colors-border)'};
-  border-radius: var(--platform-radius-full);
+  border-radius: var(--platform-radius-full, 999px);
   background: ${({ $tone }) =>
     $tone === 'accent'
       ? 'rgb(from var(--quiet-accent, var(--platform-colors-accent)) r g b / 10%)'
@@ -52,7 +47,9 @@ const StyledPill = styled.span<{ $tone: QuietPillTone }>`
       ? 'var(--platform-colors-success)'
       : 'var(--platform-colors-text-secondary)'};
   font-size: var(--platform-typography-font-size-xs);
-  font-weight: 650;
+  font-family: var(--platform-typography-font-family-mono);
+  font-weight: var(--platform-typography-font-weight-medium);
+  letter-spacing: 0.06em;
   transition: border-color var(--platform-transition-base),
     background var(--platform-transition-base),
     color var(--platform-transition-base),

package/src/components/common/feedback/WorkProgressPanel.tsx

@@ -15,9 +15,9 @@ export interface WorkProgressPanelProps {
 }
 
 const Panel = styled.div`
-  border: 1px solid rgba(210, 217, 226, 0.92);
-  border-radius: 8px;
-  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-sm);
+  background: var(--platform-colors-surface);
   padding: 22px;
   display: grid;
   gap: 18px;
@@ -31,7 +31,7 @@ const Top = styled.div`
 `
 
 const Title = styled.div`
-  color: #2e3338;
+  color: var(--platform-colors-text);
   font-size: 18px;
   font-weight: 800;
   line-height: 1.2;
@@ -39,7 +39,7 @@ const Title = styled.div`
 
 const Note = styled.div`
   margin-top: 5px;
-  color: #65707d;
+  color: var(--platform-colors-text-secondary);
   font-size: 13px;
   line-height: 1.45;
 `
@@ -48,9 +48,9 @@ const Pulse = styled.div`
   width: 42px;
   height: 42px;
   flex: 0 0 auto;
-  border-radius: 50%;
-  border: 2px solid #d7dee7;
-  border-top-color: #5f77a4;
+  border-radius: var(--platform-radius-sm);
+  border: 2px solid var(--platform-colors-border);
+  border-top-color: var(--platform-colors-accent);
   animation: work-progress-spin 1.1s linear infinite;
 
   @keyframes work-progress-spin {
@@ -74,9 +74,9 @@ const Metrics = styled.div<{ $count: number }>`
 `
 
 const Metric = styled.div`
-  border-top: 1px solid #e2e7ee;
+  border-top: 1px solid var(--platform-colors-border);
   padding-top: 9px;
-  color: #8a94a1;
+  color: var(--platform-colors-text-tertiary);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.05em;
@@ -84,7 +84,7 @@ const Metric = styled.div`
 
   strong {
     display: block;
-    color: #2e3338;
+    color: var(--platform-colors-text);
     font-size: 22px;
     line-height: 1;
     letter-spacing: 0;
@@ -94,7 +94,7 @@ const Metric = styled.div`
 const Activity = styled.div`
   display: grid;
   gap: 7px;
-  color: #65707d;
+  color: var(--platform-colors-text-secondary);
   font-size: 12px;
   line-height: 1.35;
 `
@@ -109,8 +109,8 @@ const ActivityItem = styled.div`
     content: '';
     width: 6px;
     height: 6px;
-    border-radius: 999px;
-    background: #7b91b8;
+    border-radius: 0;
+    background: var(--platform-colors-accent);
     transform: translateY(-1px);
   }
 `

package/src/components/common/files/FileTable.tsx

@@ -29,7 +29,7 @@ export interface FileTableProps {
 const StyledFileTable = styled.div`
   min-width: 0;
   border: 1px solid var(--platform-colors-border);
-  border-radius: 8px;
+  border-radius: var(--platform-radius-sm);
   background: var(--platform-colors-surface);
   overflow: hidden;
 `
@@ -172,7 +172,13 @@ function formatBytes(byteLength?: number): string {
 
 function formatDate(value?: string): string {
   if (!value) return '—'
-  return new Date(value).toLocaleDateString()
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '—'
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(date)
 }
 
 export function FileTable({

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

@@ -8,6 +8,6 @@ export const Checkbox = styled.input.attrs({ type: 'checkbox' })`
   width: 14px;
   height: 14px;
   margin: 0;
-  accent-color: var(--platform-colors-accent, #525a65);
+  accent-color: var(--platform-colors-accent, #1c1a17);
   cursor: pointer;
 `

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

@@ -245,9 +245,7 @@ export function EditableSecretField({
                   size="sm"
                   variant="dangerHover"
                   disabled={locked}
-                  aria-label={
-                    ariaLabel ? `Remove ${ariaLabel}` : 'Remove key'
-                  }
+                  aria-label={ariaLabel ? `Remove ${ariaLabel}` : 'Remove key'}
                   onClick={handleDelete}
                 >
                   <PlatformIcon icon={Trash2} size={14} strokeWidth={1.9} />

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

@@ -106,7 +106,7 @@ export const InlineSuggestions = styled.div`
   right: 0;
   overflow: hidden;
   border: 1px solid var(--platform-colors-divider);
-  border-radius: 8px;
+  border-radius: var(--platform-radius-sm);
   background: var(--platform-colors-surface);
   box-shadow: var(--platform-shadow-lg, 0 12px 24px rgb(0 0 0 / 14%));
 `
@@ -172,7 +172,7 @@ const ComposerInput = styled.input`
 `
 
 const GhostAction = styled(CleanButton)`
-  border-radius: 999px;
+  border-radius: var(--platform-radius-sm);
   color: var(--platform-colors-text-secondary);
   font-family: var(--platform-typography-font-family, inherit);
   font-size: var(--platform-typography-font-size-xs, 11px);

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

@@ -62,12 +62,17 @@ const StyledTrigger = styled.button<{ $variant: 'field' | 'circle' }>`
       ? '28px'
       : 'var(--platform-palette-dropdown-height, 34px)'};
   padding: ${({ $variant }) => ($variant === 'circle' ? '0' : '0 10px')};
-  border: 1px solid var(--platform-colors-border);
+  border: 1px solid
+    ${({ $variant }) =>
+      $variant === 'circle' ? 'transparent' : 'var(--platform-colors-border)'};
   border-radius: ${({ $variant }) =>
     $variant === 'circle'
-      ? '999px'
+      ? 'var(--platform-radius-sm)'
       : 'var(--platform-palette-dropdown-radius, 10px)'};
-  background: var(--platform-colors-surface, #ffffff);
+  background: ${({ $variant }) =>
+    $variant === 'circle'
+      ? 'transparent'
+      : 'var(--platform-colors-surface, #ffffff)'};
   color: var(--platform-colors-text, #25292f);
   font: inherit;
   font-size: 12px;
@@ -76,8 +81,11 @@ const StyledTrigger = styled.button<{ $variant: 'field' | 'circle' }>`
 
   &:hover:not(:disabled),
   &[aria-expanded='true'] {
-    border-color: var(--platform-colors-text-secondary, #68707a);
-    background: var(--platform-colors-surface-hover, #f4f6f8);
+    border-color: ${({ $variant }) =>
+      $variant === 'circle'
+        ? 'transparent'
+        : 'var(--platform-colors-text-secondary, #68707a)'};
+    background: var(--platform-colors-surface-hover, #f0ede7);
   }
 
   &:disabled {
@@ -106,7 +114,7 @@ const StyledSwatch = styled.span<{ $color: string; $large?: boolean }>`
   height: ${({ $large }) => ($large ? '13px' : '10px')};
   margin-left: ${({ $large }) => ($large ? '-1px' : '-2px')};
   border: 1px solid rgba(255, 255, 255, 0.76);
-  border-radius: 999px;
+  border-radius: var(--platform-radius-2xs, 0);
   background: ${({ $color }) => $color};
   box-shadow: 0 0 0 1px rgba(46, 51, 56, 0.08);
 
@@ -119,10 +127,10 @@ const StyledPrimarySwatch = styled.span<{ $color: string }>`
   display: block;
   width: 16px;
   height: 16px;
-  border: 1px solid rgb(255 255 255 / 78%);
-  border-radius: 999px;
+  border: 1px solid var(--platform-colors-border);
+  border-radius: var(--platform-radius-2xs, 0);
   background: ${({ $color }) => $color};
-  box-shadow: 0 0 0 1px rgb(46 51 56 / 16%), inset 0 0 0 1px rgb(0 0 0 / 4%);
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 36%);
 `
 
 const StyledCaret = styled.span`
@@ -139,9 +147,11 @@ const StyledOption = styled.button<{ $selected?: boolean }>`
   min-height: 34px;
   padding: 7px 8px;
   border: 0;
-  border-radius: 8px;
+  border-radius: var(--platform-radius-sm);
   background: ${({ $selected }) =>
-    $selected ? 'var(--platform-colors-surface-hover, #f4f6f8)' : 'transparent'};
+    $selected
+      ? 'var(--platform-colors-surface-hover, #f0ede7)'
+      : 'transparent'};
   color: var(--platform-colors-text, #25292f);
   font: inherit;
   font-size: 12px;
@@ -149,7 +159,7 @@ const StyledOption = styled.button<{ $selected?: boolean }>`
   cursor: pointer;
 
   &:hover {
-    background: var(--platform-colors-surface-hover, #f4f6f8);
+    background: var(--platform-colors-surface-hover, #f0ede7);
   }
 `
 
@@ -164,7 +174,7 @@ const StyledOptionText = styled.span`
 const StyledDivider = styled.div`
   height: 1px;
   margin: 6px 2px;
-  background: var(--platform-colors-border, #d8dde5);
+  background: var(--platform-colors-border, #e7e4dd);
 `
 
 const StyledCustomToggle = styled.button`
@@ -175,7 +185,7 @@ const StyledCustomToggle = styled.button`
   height: 32px;
   padding: 0 8px;
   border: 0;
-  border-radius: 8px;
+  border-radius: var(--platform-radius-sm);
   background: transparent;
   color: var(--platform-colors-text-secondary, #68707a);
   font: inherit;
@@ -184,7 +194,7 @@ const StyledCustomToggle = styled.button`
   cursor: pointer;
 
   &:hover {
-    background: var(--platform-colors-surface-hover, #f4f6f8);
+    background: var(--platform-colors-surface-hover, #f0ede7);
     color: var(--platform-colors-text, #25292f);
   }
 `
@@ -201,8 +211,8 @@ const StyledNameInput = styled.input`
   height: 32px;
   min-width: 0;
   padding: 0 9px;
-  border: 1px solid var(--platform-colors-border, #d8dde5);
-  border-radius: 8px;
+  border: 1px solid var(--platform-colors-border, #e7e4dd);
+  border-radius: var(--platform-radius-sm);
   background: var(--platform-colors-surface, #ffffff);
   color: var(--platform-colors-text, #25292f);
   font: inherit;
@@ -225,8 +235,8 @@ const StyledColorInput = styled.input`
   height: 28px;
   min-width: 0;
   padding: 2px;
-  border: 1px solid var(--platform-colors-border, #d8dde5);
-  border-radius: 8px;
+  border: 1px solid var(--platform-colors-border, #e7e4dd);
+  border-radius: var(--platform-radius-sm);
   background: var(--platform-colors-surface, #ffffff);
   cursor: pointer;
 `
@@ -235,8 +245,8 @@ const StyledSubmit = styled.button`
   justify-self: end;
   height: 30px;
   padding: 0 10px;
-  border: 1px solid var(--platform-colors-border, #d8dde5);
-  border-radius: 8px;
+  border: 1px solid var(--platform-colors-border, #e7e4dd);
+  border-radius: var(--platform-radius-sm);
   background: var(--platform-colors-surface, #ffffff);
   color: var(--platform-colors-text, #25292f);
   font: inherit;
@@ -245,7 +255,7 @@ const StyledSubmit = styled.button`
   cursor: pointer;
 
   &:hover:not(:disabled) {
-    background: var(--platform-colors-surface-hover, #f4f6f8);
+    background: var(--platform-colors-surface-hover, #f0ede7);
   }
 
   &:disabled {
@@ -288,7 +298,7 @@ export function PaletteDropdown({
     () => palettes.find(palette => palette.id === value) ?? palettes[0],
     [palettes, value],
   )
-  const primaryColor = selected?.colors[1] ?? selected?.colors[0] ?? '#2e3338'
+  const primaryColor = selected?.colors[1] ?? selected?.colors[0] ?? '#1c1a17'
 
   const close = useCallback(() => {
     closeMenu()

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

@@ -8,7 +8,7 @@ import {
 } from '../../../theme/surfacePalettes.js'
 import { PaletteCirclePicker } from './PaletteCirclePicker.js'
 
-const DEFAULT_SWATCHES = ['#2e3338', '#737b86', '#ffffff', '#f5f3ef']
+const DEFAULT_SWATCHES = ['#1b1b1e', '#3a3a3e', '#ffffff', '#fbfbfc']
 
 export interface SurfacePalettePickerProps {
   label?: string

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

@@ -30,7 +30,7 @@ const StyledTrack = styled.span<{ $checked: boolean; $disabled?: boolean }>`
       $checked
         ? 'var(--platform-colors-accent)'
         : 'var(--platform-colors-border)'};
-  border-radius: 999px;
+  border-radius: var(--platform-radius-sm);
   background: ${({ $checked }) =>
     $checked
       ? 'var(--platform-colors-accent)'
@@ -45,7 +45,7 @@ const StyledTrack = styled.span<{ $checked: boolean; $disabled?: boolean }>`
     left: ${({ $checked }) => ($checked ? '14px' : '2px')};
     width: 12px;
     height: 12px;
-    border-radius: 50%;
+    border-radius: var(--platform-radius-2xs, 0);
     background: var(--platform-colors-surface);
     box-shadow: 0 1px 2px rgb(from var(--platform-colors-text) r g b / 0.22);
     transition: left 120ms ease;

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

@@ -60,7 +60,7 @@ const StyledControl = styled.div<{ $open: boolean }>`
       $open
         ? 'var(--platform-colors-border-strong)'
         : 'var(--platform-colors-border)'};
-  border-radius: 9px;
+  border-radius: var(--platform-radius-sm, 0px);
   background: var(--platform-colors-surface);
   color: var(--platform-colors-text);
 `
@@ -101,7 +101,7 @@ const StyledOption = styled.button<{ $active?: boolean }>`
   min-height: 32px;
   padding: 6px 8px;
   border: 0;
-  border-radius: 7px;
+  border-radius: var(--platform-radius-sm, 0px);
   background: ${({ $active }) =>
     $active ? 'var(--platform-colors-surface-active)' : 'transparent'};
   color: var(--platform-colors-text);
@@ -125,7 +125,7 @@ const StyledOptionName = styled.span`
 const StyledOptionMeta = styled.span`
   min-width: 22px;
   padding: 1px 7px;
-  border-radius: var(--platform-radius-full);
+  border-radius: var(--platform-radius-sm);
   background: var(--platform-colors-bg);
   color: var(--platform-colors-text-secondary);
   font-size: var(--platform-typography-font-size-xs);

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

@@ -12,9 +12,11 @@ export const listRowBaseCss = css<{ $active?: boolean }>`
   padding: var(--platform-spacing-xs) var(--platform-spacing-sm);
   text-align: left;
   color: ${({ $active }) =>
-    $active ? 'var(--platform-colors-accent)' : 'var(--platform-colors-text)'};
+    $active ? 'var(--app-text, var(--platform-colors-accent))' : 'var(--platform-colors-text)'};
   background: ${({ $active }) =>
-    $active ? 'var(--platform-colors-accent-muted)' : 'transparent'};
+    $active ? 'var(--app-bg, var(--platform-colors-accent-muted))' : 'transparent'};
+  border-left: 3px solid
+    ${({ $active }) => ($active ? 'var(--app-acc, var(--platform-colors-accent))' : 'transparent')};
 `
 
 export const ListRow = styled.div<{ $active?: boolean }>`

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

@@ -3,7 +3,4 @@ export {
   type QuietActivityListItem,
   type QuietActivityListProps,
 } from './QuietActivityList.js'
-export {
-  QuietLedgerRow,
-  type QuietLedgerRowProps,
-} from './QuietLedgerRow.js'
+export { QuietLedgerRow, type QuietLedgerRowProps } from './QuietLedgerRow.js'

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

@@ -26,7 +26,7 @@ const StyledDragHandle = styled.span`
 const StyledGripDot = styled.span`
   width: 3px;
   height: 3px;
-  border-radius: 999px;
+  border-radius: 0;
   background: currentColor;
 `
 

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

@@ -68,7 +68,8 @@ const StyledEmpty = styled.li<{
   $active?: boolean
   $density: ReorderableSectionsDensity
 }>`
-  padding: ${({ $density }) => ($density === 'compact' ? '7px 9px' : '12px 14px')};
+  padding: ${({ $density }) =>
+    $density === 'compact' ? '7px 9px' : '12px 14px'};
   border: 1px dashed
     ${({ $active }) =>
       $active