@flamingo-stack/openframe-frontend-core 0.0.852 → 0.0.854

package/src/components/features/devices/devices-table-columns.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../ui';
 import { DATA_TABLE_SKELETON_ROWS } from '../../ui/data-table/utils';
 import { OSTypeBadge } from '../os-type-badge';
+import { directorySourceLabel, directoryUserLines, directoryUserLinkLabel } from './device-directory';
 import { getDeviceName } from './device-name';
 import { getDeviceStatusConfig } from './device-status';
 import { DEFAULT_VISIBLE_STATUSES } from './device-statuses';
@@ -129,6 +130,8 @@ export interface DevicesTableBodyProps<T extends DeviceRow = DeviceRow> {
   actionsColumn?: ColumnDef<T>;
   /** Column ids to drop from the base table columns (e.g. ['organization'] when scoped to a single org). */
   hideColumns?: string[];
+  /** Adds the USER and SOURCES columns, for a host whose tenant has directories. Default: neither. */
+  directoryColumns?: boolean;
   /** Column ids whose header filter is dropped while the column stays visible (e.g. ['status'] on the archive page). */
   disableColumnFilters?: string[];
   /** The facet query is still in flight, see `getDeviceTableColumns`. */
@@ -168,6 +171,7 @@ export function DevicesTableBody<T extends DeviceRow = DeviceRow>({
   onColumnFiltersChange,
   actionsColumn,
   hideColumns,
+  directoryColumns = false,
   disableColumnFilters,
   filtersPending,
   totalCount,
@@ -177,12 +181,16 @@ export function DevicesTableBody<T extends DeviceRow = DeviceRow>({
   const columns = useMemo<ColumnDef<T>[]>(() => {
     const hidden = new Set(hideColumns ?? []);
     const unfiltered = new Set(disableColumnFilters ?? []);
-    const base = getDeviceTableColumns<T>(deviceFilters ?? null, filtersPending)
+    const base = getDeviceTableColumns<T>(deviceFilters ?? null, filtersPending, {
+      directoryColumns,
+      // Without the customer column there is room for the sources from where the customer's column would have started.
+      roomyDirectory: hidden.has('organization'),
+    })
       .filter(c => !c.id || !hidden.has(c.id))
       .map(c => (c.id && unfiltered.has(c.id) ? { ...c, meta: { ...c.meta, filter: undefined } } : c));
     const open = getDeviceOpenColumn<T>();
     return actionsColumn ? [...base, actionsColumn, open] : [...base, open];
-  }, [deviceFilters, filtersPending, actionsColumn, hideColumns, disableColumnFilters]);
+  }, [deviceFilters, filtersPending, actionsColumn, hideColumns, directoryColumns, disableColumnFilters]);
 
   // While loading the table holds one page of empty rows, drawn with the real cells: every part of a row draws its
   // own loading form (`DataTable.Body`'s `loadingCells`), so a loading row is the loaded row's own layout.
@@ -257,11 +265,43 @@ function DeviceLastSeen({ lastSeen }: { lastSeen: string | undefined }) {
   );
 }
 
+/** The name over its role, as the USER column reads it (Figma 865:55733); the empty mark when nobody is tied. */
+function DirectoryUserCell({ device }: { device: DeviceRow }) {
+  const loading = useLoadingScope();
+  if (loading && !device.directoryUserLink) {
+    return <TextLineSkeleton type="h4" className="w-3/4" />;
+  }
+  const { name, detail } = directoryUserLines(device);
+  return (
+    <div className="flex min-w-0 flex-col justify-center">
+      <TruncateText>{name}</TruncateText>
+      {detail && (
+        <TruncateText variant="h6" tone="secondary">
+          {detail}
+        </TruncateText>
+      )}
+    </div>
+  );
+}
+
+/** The directories that know the device, as tags (Figma 187:61663); nothing when none does. */
+function DirectorySourcesCell({ sources }: { sources: readonly string[] | undefined }) {
+  return (
+    <div data-loading-optional className="flex min-w-0 flex-wrap gap-[var(--spacing-system-xxs)]">
+      {(sources ?? []).map(source => (
+        <Tag key={source} label={directorySourceLabel(source)} variant="grey" />
+      ))}
+    </div>
+  );
+}
+
 export interface DeviceFilterColumn {
   key: string;
   label: string;
   filterable?: boolean;
   filterOptions?: DeviceFilterOption[];
+  /** Filters in the filter window from `lg` until `xl` too: its column's header has no funnel there. */
+  inWindowLgToXl?: boolean;
 }
 
 /** A device filter dropdown entry: `meta.filter.options` plus the facet count. */
@@ -277,6 +317,8 @@ function buildDeviceFilterOptions(deviceFilters?: DeviceFilters | null): {
   status: DeviceFilterOption[];
   os: DeviceFilterOption[];
   organization: DeviceFilterOption[];
+  user: DeviceFilterOption[];
+  sources: DeviceFilterOption[];
 } {
   // Show only DEFAULT_VISIBLE_STATUSES (DELETED and legacy ARCHIVED live on /devices/archive)
   const status = (deviceFilters?.statuses ?? [])
@@ -294,19 +336,56 @@ function buildDeviceFilterOptions(deviceFilters?: DeviceFilters | null): {
     })),
   );
 
-  return { status, os, organization };
+  const user = (deviceFilters?.userLinks ?? []).map(link => ({
+    id: link.value,
+    label: directoryUserLinkLabel(link.value),
+    value: link.value,
+    count: link.count,
+  }));
+
+  const sources = (deviceFilters?.directorySources ?? []).map(source => ({
+    id: source.value,
+    label: directorySourceLabel(source.value),
+    value: source.value,
+    count: source.count,
+  }));
+
+  return { status, os, organization, user, sources };
+}
+
+/** The directory columns of a device list: the table and its filter window take the same ones. */
+interface DeviceDirectoryColumnOptions {
+  directoryColumns?: boolean;
+  roomyDirectory?: boolean;
 }
 
 // Filter column metadata used by the external filter modal (useTagFilterModal).
 // Kept separate from the table ColumnDef because DataTable doesn't carry the
 // filter metadata that the external mobile filter modal needs.
-export function getDeviceFilterColumns(deviceFilters?: DeviceFilters | null): DeviceFilterColumn[] {
+// `roomyDirectory` is the table's own (`getDeviceTableColumns`): beside the customer column SOURCES shows only from
+// `xl`, and the header has no funnel for it from `lg` until then, so the window carries it there.
+export function getDeviceFilterColumns(
+  deviceFilters?: DeviceFilters | null,
+  { directoryColumns = false, roomyDirectory = false }: DeviceDirectoryColumnOptions = {},
+): DeviceFilterColumn[] {
   const options = buildDeviceFilterOptions(deviceFilters);
   return [
     {
       key: 'device',
       label: 'DEVICE',
     },
+    ...(directoryColumns
+      ? [
+          { key: 'user', label: 'USER', filterable: true, filterOptions: options.user },
+          {
+            key: 'sources',
+            label: 'SOURCES',
+            filterable: true,
+            filterOptions: options.sources,
+            inWindowLgToXl: !roomyDirectory,
+          },
+        ]
+      : []),
     { key: 'status', label: 'STATUS', filterable: true, filterOptions: options.status },
     { key: 'os', label: 'OS', filterable: true, filterOptions: options.os },
     { key: 'organization', label: 'CUSTOMER', filterable: true, filterOptions: options.organization },
@@ -318,17 +397,51 @@ export function getDeviceFilterColumns(deviceFilters?: DeviceFilters | null): De
  * funnels drawn (inert) rather than growing them when it answers. Absent means
  * these are the final options: an empty one then hides its funnel, which is what
  * a list with no facet source of its own wants.
+ * @param options.directoryColumns Adds USER and SOURCES after DEVICE. Off by default: a picker or a tenant with no
+ * directories has neither.
+ * @param options.roomyDirectory No customer column beside them (one customer's list), so SOURCES shows from `lg`
+ * rather than `xl`.
  */
 export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
   deviceFilters?: DeviceFilters | null,
   filtersPending?: boolean,
+  { directoryColumns = false, roomyDirectory = false }: DeviceDirectoryColumnOptions = {},
 ): ColumnDef<T>[] {
   const {
     status: statusFilterOptions,
     os: osFilterOptions,
     organization: orgFilterOptions,
+    user: userFilterOptions,
+    sources: sourcesFilterOptions,
   } = buildDeviceFilterOptions(deviceFilters);
 
+  const directory: ColumnDef<T>[] = directoryColumns
+    ? [
+        {
+          id: 'user',
+          header: 'USER',
+          cell: ({ row }: { row: Row<T> }) => <DirectoryUserCell device={row.original} />,
+          enableSorting: false,
+          meta: {
+            width: 'min-w-0 content-lg:w-[15%]',
+            hideAt: 'lg',
+            filter: { options: userFilterOptions, pending: filtersPending },
+          },
+        },
+        {
+          id: 'sources',
+          header: 'SOURCES',
+          cell: ({ row }: { row: Row<T> }) => <DirectorySourcesCell sources={row.original.directorySources} />,
+          enableSorting: false,
+          meta: {
+            width: 'min-w-0 content-lg:w-[11%]',
+            hideAt: roomyDirectory ? 'lg' : 'xl',
+            filter: { options: sourcesFilterOptions, pending: filtersPending },
+          },
+        },
+      ]
+    : [];
+
   return [
     {
       accessorKey: 'device',
@@ -347,8 +460,10 @@ export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
           </div>
         );
       },
-      meta: { width: 'flex-1 content-md:w-1/4' },
+      // The name takes what the other columns leave: with two more of them, their shares below shrink to leave some.
+      meta: { width: directoryColumns ? 'flex-1 min-w-0' : 'flex-1 content-md:w-1/4' },
     },
+    ...directory,
     {
       accessorKey: 'status',
       id: 'status',
@@ -366,7 +481,7 @@ export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
         );
       },
       meta: {
-        width: 'w-auto shrink-0 content-md:w-1/5',
+        width: directoryColumns ? 'w-auto shrink-0 content-md:w-[14%]' : 'w-auto shrink-0 content-md:w-1/5',
         // Declared unconditionally, empty options and all. `meta.filter` is what
         // keeps a header cell visible below `lg`, so dropping it until the
         // options query resolves made every header on a tablet disappear on
@@ -383,7 +498,7 @@ export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
         <OSTypeBadge osType={row.original.osType} iconSize="w-4 h-4 content-md:w-6 content-md:h-6" />
       ),
       meta: {
-        width: 'w-[200px] content-md:w-1/6',
+        width: directoryColumns ? 'w-[200px] content-md:w-[10%]' : 'w-[200px] content-md:w-1/6',
         hideAt: 'md',
         filter: { options: osFilterOptions, pending: filtersPending },
       },
@@ -394,7 +509,7 @@ export function getDeviceTableColumns<T extends DeviceRow = DeviceRow>(
       header: 'CUSTOMER',
       cell: ({ row }: { row: Row<T> }) => <OrganizationCell device={row.original} />,
       meta: {
-        width: 'w-1/6',
+        width: directoryColumns ? 'w-[14%]' : 'w-1/6',
         hideAt: 'lg',
         filter: { options: orgFilterOptions, placement: 'bottom-end', pending: filtersPending },
       },

package/src/components/features/devices/index.ts

@@ -1,5 +1,12 @@
 'use client';
 
+export {
+  type DeviceDirectorySource,
+  type DeviceDirectoryUserLink,
+  directorySourceLabel,
+  directoryUserLines,
+  directoryUserLinkLabel,
+} from './device-directory';
 export { formatLastOnline } from './device-last-online';
 export { type DeviceNameSource, getDeviceName, matchesDeviceName } from './device-name';
 export {

package/src/components/features/devices/types.ts

@@ -34,6 +34,14 @@ export interface DeviceRow extends DeviceNameSource {
   organizationImageUrl?: string | null;
   organizationImageHash?: string | null;
   tags?: DeviceTag[];
+  /** Who the device is tied to in a directory: PRIMARY, SHARED or NONE. The USER column reads it. */
+  directoryUserLink?: string;
+  /** The primary user's name; only PRIMARY has one. */
+  directoryUserName?: string | null;
+  /** How many users are tied to it: "N recent users" when SHARED. */
+  directoryUserCount?: number;
+  /** The directories that know the device besides the agent. The SOURCES column reads it. */
+  directorySources?: readonly string[];
   /** The viewer's unread notifications about this device. Absent or 0: no indicator. */
   unreadNotificationCount?: number;
 }
@@ -63,6 +71,10 @@ export interface DeviceFilters {
   organizationIds: DeviceFilterTag[];
   tagKeys: TagFilterOption[];
   filteredCount: number;
+  /** Behind the USER funnel; only hosts that draw the directory columns read it. */
+  userLinks?: DeviceFilterValue[];
+  /** Behind the SOURCES funnel; only hosts that draw the directory columns read it. */
+  directorySources?: DeviceFilterValue[];
 }
 
 /** What narrows a device list, in the backend's field names. */
@@ -73,4 +85,6 @@ export interface DeviceFilterInput {
   organizationIds?: string[];
   tagKeys?: string[];
   tagValues?: string[];
+  userLinks?: string[];
+  directorySources?: string[];
 }

package/src/components/features/devices/use-tag-filter-modal.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { useMdUp } from '../../../hooks/ui/use-media-query';
+import { useContentLgUp, useContentMdUp, useContentXlUp } from '../../../hooks/ui/use-content-breakpoint';
 import type { DeviceFilters } from './types';
 
 function isCompleteTag(tag: string): boolean {
@@ -19,7 +19,13 @@ interface FilterOption {
 interface UseTagFilterModalParams {
   tags: string[];
   deviceFilters: DeviceFilters | null;
-  columns: Array<{ key: string; label: string; filterable?: boolean; filterOptions?: FilterOption[] }>;
+  columns: Array<{
+    key: string;
+    label: string;
+    filterable?: boolean;
+    filterOptions?: FilterOption[];
+    inWindowLgToXl?: boolean;
+  }>;
   /** `useApiParams`' setter, each device list param is a list of ids. */
   setParams: (params: Record<string, string[]>) => void;
   /**
@@ -39,7 +45,11 @@ export function useTagFilterModal({
   setParams,
   onApplied = scrollMainToTop,
 }: UseTagFilterModalParams) {
-  const isMdUp = useMdUp();
+  // The content area's step, not the window's: the table header follows it, and a docked side panel narrows it while
+  // the window stays wide.
+  const isMdUp = useContentMdUp();
+  const lgUp = useContentLgUp();
+  const xlUp = useContentXlUp();
   const [isOpen, setIsOpen] = useState(false);
 
   // FilterModal calls onFilterChange first, then onTagsChange.
@@ -49,16 +59,19 @@ export function useTagFilterModal({
   const open = useCallback(() => setIsOpen(true), []);
   const close = useCallback(() => setIsOpen(false), []);
 
-  const filterGroups = useMemo(() => {
-    if (isMdUp) return [];
-    return columns
-      .filter(column => column.filterable)
-      .map(column => ({
-        id: column.key,
-        title: column.label,
-        options: column.filterOptions || [],
-      }));
-  }, [columns, isMdUp]);
+  // Below md the table draws no header, so every column filters here; from lg until xl only the columns whose header
+  // has no funnel there do.
+  const filterGroups = useMemo(
+    () =>
+      columns
+        .filter(column => column.filterable && (!isMdUp || (lgUp && xlUp === false && column.inWindowLgToXl)))
+        .map(column => ({
+          id: column.key,
+          title: column.label,
+          options: column.filterOptions || [],
+        })),
+    [columns, isMdUp, lgUp, xlUp],
+  );
 
   const tagFilterKeys = useMemo(() => {
     if (!deviceFilters?.tagKeys) return [];
@@ -79,6 +92,9 @@ export function useTagFilterModal({
     pendingFiltersRef.current = columnFilters;
   }, []);
 
+  // Only a host that draws the directory columns has the USER and SOURCES groups: another's list params stay untouched
+  const hasDirectoryGroups = useMemo(() => columns.some(column => column.key === 'user'), [columns]);
+
   // Step 2: combine with buffered filters and flush (called second by FilterModal)
   const handleTagsChange = useCallback(
     (newTags: string[]) => {
@@ -87,12 +103,14 @@ export function useTagFilterModal({
         statuses: cf.status || [],
         osTypes: cf.os || [],
         organizationIds: cf.organization || [],
+        // FilterModal drops a group with nothing ticked, so a missing group clears its param
+        ...(hasDirectoryGroups && { userLinks: cf.user || [], directorySources: cf.sources || [] }),
         tags: newTags.filter(isCompleteTag),
       });
       pendingFiltersRef.current = {};
       onApplied();
     },
-    [setParams, onApplied],
+    [setParams, onApplied, hasDirectoryGroups],
   );
 
   return {

package/src/components/help-center-pages/trust-center-page.tsx

@@ -103,7 +103,7 @@ export interface TrustCenterPageProps {
    */
   beforeFaq?: ReactNode;
   /**
-   * The "Data synced from <source>" line and its PDF download in the status row. Default true. Pass false when the
+   * The "Data from <source>" line and its PDF download in the status row. Default true. Pass false when the
    * host's own header states both (the hub's admin preview draws them in its page header), so the page never says
    * them twice; the monitoring status stays.
    */

package/src/components/navigation/app-layout.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { CSSProperties, ReactNode } from 'react';
-import { ContentAreaWidthContext, contentBreakpointFor } from '../../hooks/ui/use-content-breakpoint';
+import { ContentAreaWidthContext, contentStepFor } from '../../hooks/ui/use-content-breakpoint';
 import { useIsomorphicLayoutEffect } from '../../hooks/ui/use-isomorphic-layout-effect';
 import type { NavigationSidebarConfig } from '../../types/navigation';
 import { cn } from '../../utils';
@@ -203,14 +203,14 @@ export function AppLayout({
 
   useIsomorphicLayoutEffect(() => {
     if (!adaptive || !mainElement) return undefined;
-    // Every reader asks for the breakpoint (`useContentBreakpoint`), so only a
-    // crossing re-renders the layout: kept at the old width, the state bails out.
+    // Every reader asks for a step (`useContentBreakpoint`, `useContentXlUp`), so
+    // only a crossing re-renders the layout: kept at the old width, the state bails out.
     // Per pixel, the uncompiled layout and every breakpoint consumer re-rendered on
     // each frame of a sidebar toggle, a window drag or a side-panel resize.
     const update = () => {
       const width = mainElement.clientWidth;
       setContentWidth(previous =>
-        previous !== null && contentBreakpointFor(previous) === contentBreakpointFor(width) ? previous : width,
+        previous !== null && contentStepFor(previous) === contentStepFor(width) ? previous : width,
       );
     };
     update();

package/src/components/platform/tool-badge-mark.ts

@@ -1,6 +1,6 @@
 import { ICON_SIZE } from '../../styles/component-sizes';
 /**
- * A tool or source mark's 16px box (`ToolBadge`'s mark, the "Data synced from" line's source glyph): read by the marks
+ * A tool or source mark's 16px box (`ToolBadge`'s mark, the "Data from" line's source glyph): read by the marks
  * and by every skeleton that stands for one. A leaf, so a `ui` component can read it without loading the badge.
  */
 export const TOOL_MARK_CLASS = `flex ${ICON_SIZE.sm} shrink-0 items-center justify-center`;

package/src/components/ui/data-attribution.tsx

@@ -7,6 +7,9 @@ import { formatDate } from '../../utils/format';
 import { ClickupIcon } from '../icons-v2-generated/brand-logos/clickup-icon';
 import { GithubClassicIcon } from '../icons-v2-generated/brand-logos/github-classic-icon';
 import { HubspotIcon } from '../icons-v2-generated/brand-logos/hubspot-icon';
+import { OpenframeLogoGreyIcon } from '../icons-v2-generated/brand-logos/openframe-logo-grey-icon';
+import { QuickbooksIcon } from '../icons-v2-generated/brand-logos/quickbooks-icon';
+import { StripeIcon } from '../icons-v2-generated/brand-logos/stripe-icon';
 import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { TOOL_MARK_CLASS } from '../platform/tool-badge-mark';
 import { useLoadingScope } from './loading-scope';
@@ -39,8 +42,8 @@ function Separator() {
 }
 
 /**
- * THE "Data synced from <source> · Last updated: <date>" line every synced
- * surface shows (the cap table, the financials, the Trust Center). The date is
+ * THE "Data from <source> · Last updated: <date>" line every surface showing another system's data
+ * draws (the cap table, the financials, the Trust Center). The date is
  * UTC (`formatDate`), so a server-rendered page and its hydrated copy print the
  * same text.
  */
@@ -50,7 +53,7 @@ export function DataAttribution({ icon, source, lastUpdated, action }: DataAttri
     <div className={LINE_CLASS}>
       <div className={ITEM_CLASS}>
         {icon}
-        <span>Data synced from {source}</span>
+        <span>Data from {source}</span>
       </div>
       <Separator />
       <span className={UPDATED_CLASS}>Last updated: {lastUpdated ? formatDate(lastUpdated) : 'Never'}</span>
@@ -70,7 +73,7 @@ function DataAttributionSkeleton({ icon, action }: Pick<DataAttributionProps, 'i
       <div className={ITEM_CLASS}>
         {icon ?? <UnifiedSkeleton className={cn(TOOL_MARK_CLASS, 'rounded')} />}
         <span>
-          Data synced from <TextLineSkeleton type="inherit" as="span" className={`${WORD_BAR_CLASS} w-20`} />
+          Data from <TextLineSkeleton type="inherit" as="span" className={`${WORD_BAR_CLASS} w-20`} />
         </span>
       </div>
       <Separator />
@@ -88,12 +91,22 @@ function DataAttributionSkeleton({ icon, action }: Pick<DataAttributionProps, 'i
 }
 
 /** The mark each sync source is drawn with (the app's standard brand marks); its name is `DATA_SYNC_SOURCES`'. */
-const DATA_SYNC_ICONS: Record<DataSyncSource, typeof ClickupIcon> = {
+const DATA_SYNC_ICONS: Record<DataSyncSource, (props: { size?: number }) => ReactNode> = {
   clickup: ClickupIcon,
   hubspot: HubspotIcon,
   github: GithubClassicIcon,
+  // The OpenFrame mark drawn in `currentColor`, so it reads as the text beside it in both themes.
+  openframe: OpenframeLogoGreyIcon,
+  stripe: StripeIcon,
+  quickbooks: QuickbooksIcon,
 };
 
+/** A sync source's mark, the one `DataSyncLine` draws: for a page that names the source in its own words. */
+export function DataSyncIcon({ source, size = 16 }: { source: DataSyncSource; size?: number }) {
+  const Icon = DATA_SYNC_ICONS[source];
+  return <Icon size={size} />;
+}
+
 /**
  * THE sync line of a shared page whose records an API reads from a mirror (the roadmap and the delivery board:
  * ClickUp; the ticket center: HubSpot; the docs and the legal documents: GitHub). The page draws whatever `sync`
@@ -121,13 +134,12 @@ export function DataSyncLine({
   const inScope = useLoadingScope();
   const loading = (loadingProp || inScope) && stated;
   if (!loading && !(sync && sync.source in DATA_SYNC_ICONS)) return null;
-  const Icon = sync ? DATA_SYNC_ICONS[sync.source] : null;
   const line =
-    loading || !sync || !Icon ? (
+    loading || !sync ? (
       <DataAttributionSkeleton action={action} />
     ) : (
       <DataAttribution
-        icon={<Icon size={16} />}
+        icon={<DataSyncIcon source={sync.source} />}
         source={DATA_SYNC_SOURCES[sync.source]}
         lastUpdated={sync.syncedAt}
         action={action}

package/src/components/ui/date-picker.tsx

@@ -42,6 +42,8 @@ export interface DatePickerBaseProps {
   error?: string;
   /** When true, renders red error border */
   invalid?: boolean;
+  /** The trigger button's id: a label drawn outside the picker names it with `htmlFor`. */
+  id?: string;
 }
 
 export interface SingleDatePickerProps extends DatePickerBaseProps {
@@ -69,6 +71,10 @@ export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
 const defaultFormatDate = (date: Date): string =>
   formatDateWithTimezone(date, VIEWER_TIMEZONE, 'numeric', { viewerLocale: true });
 
+// A label tied to the trigger (`id`) becomes the button's whole accessible name, so the date it shows would go unread:
+// the trigger is described by its value instead.
+const triggerValueId = (id: string | undefined) => (id ? `${id}-value` : undefined);
+
 const formatDateRange = (range: DateRange | undefined, formatFn: (date: Date) => string): string => {
   if (!range?.from) return '';
   if (!range.to) return formatFn(range.from);
@@ -667,6 +673,7 @@ export function DatePicker(props: DatePickerProps) {
     label,
     error,
     invalid = false,
+    id,
   } = props;
 
   const [open, setOpen] = useState(false);
@@ -701,6 +708,8 @@ export function DatePicker(props: DatePickerProps) {
         <Button
           variant="field"
           type="button"
+          id={id}
+          aria-describedby={triggerValueId(id)}
           disabled={disabled}
           // Same marker Input/Textarea/Select expose — it is how a form finds
           // (and scrolls to) the first field that failed validation.
@@ -709,6 +718,7 @@ export function DatePicker(props: DatePickerProps) {
         >
           <Calendar className="size-6 shrink-0 text-ods-text-secondary" />
           <span
+            id={triggerValueId(id)}
             className={cn(
               'flex-1 truncate text-left',
               disabled ? 'text-ods-text-disabled' : displayValue ? 'text-ods-text-primary' : 'text-ods-text-secondary',
@@ -749,7 +759,7 @@ export function DatePicker(props: DatePickerProps) {
   );
 
   return (
-    <FieldWrapper label={label} error={error} errorSlot={'error' in props}>
+    <FieldWrapper label={label} htmlFor={id} error={error} errorSlot={'error' in props}>
       {picker}
     </FieldWrapper>
   );
@@ -799,6 +809,7 @@ export function DatePickerInput(props: DatePickerInputProps) {
     label,
     error,
     invalid = false,
+    id,
   } = props;
   const [open, setOpen] = useState(false);
   const portalContainer = usePortalContainer();
@@ -883,6 +894,8 @@ export function DatePickerInput(props: DatePickerInputProps) {
           <Button
             variant="field"
             type="button"
+            id={id}
+            aria-describedby={triggerValueId(id)}
             disabled={disabled}
             // Same marker Input/Textarea/Select expose — it is how a form finds
             // (and scrolls to) the first field that failed validation.
@@ -891,6 +904,7 @@ export function DatePickerInput(props: DatePickerInputProps) {
           >
             <Calendar className="size-6 shrink-0 text-ods-text-secondary" />
             <span
+              id={triggerValueId(id)}
               className={cn(
                 'flex-1 truncate text-left',
                 disabled
@@ -984,7 +998,7 @@ export function DatePickerInput(props: DatePickerInputProps) {
   );
 
   return (
-    <FieldWrapper label={label} error={error} errorSlot={'error' in props} className={className}>
+    <FieldWrapper label={label} htmlFor={id} error={error} errorSlot={'error' in props} className={className}>
       {content}
     </FieldWrapper>
   );
@@ -1050,6 +1064,7 @@ export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
     label,
     error,
     invalid = false,
+    id,
   } = props;
   const [open, setOpen] = useState(false);
   const portalContainer = usePortalContainer();
@@ -1112,6 +1127,8 @@ export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
           <Button
             variant="field"
             type="button"
+            id={id}
+            aria-describedby={triggerValueId(id)}
             disabled={disabled}
             // Same marker Input/Textarea/Select expose — it is how a form finds
             // (and scrolls to) the first field that failed validation.
@@ -1120,6 +1137,7 @@ export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
           >
             <Calendar className="size-6 shrink-0 text-ods-text-secondary" />
             <span
+              id={triggerValueId(id)}
               className={cn(
                 'flex-1 truncate text-left',
                 disabled
@@ -1181,7 +1199,7 @@ export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
   );
 
   return (
-    <FieldWrapper label={label} error={error} errorSlot={'error' in props} className={className}>
+    <FieldWrapper label={label} htmlFor={id} error={error} errorSlot={'error' in props} className={className}>
       {content}
     </FieldWrapper>
   );

package/src/components/ui/index.ts

@@ -112,6 +112,8 @@ export * from './device-card';
 export * from './device-card-compact';
 export * from './entity-image';
 export * from './data-attribution';
+// The sources `DataSyncLine` / `DataSyncIcon` take, beside them, so a page draws a source's name and mark from one import.
+export * from '../../types/data-sync';
 export * from './download-button';
 export * from './compliance-badge';
 export * from './feature-card';