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

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/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/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/hooks/ui/use-content-breakpoint.ts

@@ -2,12 +2,24 @@
 
 import { createContext, createElement, type ReactNode, useContext } from 'react';
 import { LAYOUT_STEPS } from '../../styles/layout-steps';
-import { useLgUp, useMdUp } from './use-media-query';
+import { breakpoints, useLgUp, useMdUp, useMediaQuery } from './use-media-query';
 
 export type ContentBreakpoint = 'mobile' | 'tablet' | 'desktop';
 
 /** Content-area steps, in px of the area's own width. */
-export const CONTENT_BREAKPOINTS = { md: LAYOUT_STEPS.md.content, lg: LAYOUT_STEPS.lg.content } as const;
+export const CONTENT_BREAKPOINTS = {
+  md: LAYOUT_STEPS.md.content,
+  lg: LAYOUT_STEPS.lg.content,
+  xl: LAYOUT_STEPS.xl.content,
+} as const;
+
+/**
+ * How many content steps a width has passed, `xl` included: `AppLayout` publishes a new width only when this changes,
+ * so every reader below sees each crossing it asks about (`useContentBreakpoint`, `useContentXlUp`).
+ */
+export function contentStepFor(width: number): number {
+  return [CONTENT_BREAKPOINTS.md, CONTENT_BREAKPOINTS.lg, CONTENT_BREAKPOINTS.xl].filter(step => width >= step).length;
+}
 
 /**
  * Width of the enclosing content area (`AppLayout` with a side panel or a composer
@@ -58,3 +70,10 @@ export function useContentLgUp(): boolean | undefined {
   const breakpoint = useContentBreakpoint();
   return breakpoint === undefined ? undefined : breakpoint === 'desktop';
 }
+
+/** The `content-xl:` step in JS: the content area's width from `xl`, the viewport's outside one. */
+export function useContentXlUp(): boolean | undefined {
+  const width = useContext(ContentAreaWidthContext);
+  const viewportXlUp = useMediaQuery(breakpoints.xl);
+  return width === null ? viewportXlUp : width >= CONTENT_BREAKPOINTS.xl;
+}

package/src/hooks/ui/use-media-query.ts

@@ -40,6 +40,7 @@ export function useMediaQuery(query: string): boolean | undefined {
 export const breakpoints = {
   md: `(min-width: ${LAYOUT_STEPS.md.viewport}px)`, // Tablet
   lg: `(min-width: ${LAYOUT_STEPS.lg.viewport}px)`, // Desktop
+  xl: `(min-width: ${LAYOUT_STEPS.xl.viewport}px)`, // Wide desktop
 };
 
 /** @deprecated Use useMdUp instead */

package/src/utils/presentation-for.ts

@@ -0,0 +1,10 @@
+/**
+ * The entry of a value → presentation table for a value off the wire, `undefined` for one the table does not know.
+ * Own keys only: `in` or a bare index would answer `toString` or `constructor` with the prototype's function.
+ */
+export function presentationFor<K extends string, V>(
+  map: Readonly<Record<K, V>>,
+  key: string | null | undefined,
+): V | undefined {
+  return key != null && Object.prototype.hasOwnProperty.call(map, key) ? map[key as K] : undefined;
+}

package/dist/chunk-UAI4VMEF.cjs

@@ -1,46 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
-
-
-
-
-var _chunkCOWMXUHNcjs = require('./chunk-COWMXUHN.cjs');
-
-// src/hooks/ui/use-content-breakpoint.ts
-var _react = require('react');
-var CONTENT_BREAKPOINTS = { md: _chunkCOWMXUHNcjs.LAYOUT_STEPS.md.content, lg: _chunkCOWMXUHNcjs.LAYOUT_STEPS.lg.content };
-var ContentAreaWidthContext = _react.createContext.call(void 0, null);
-function ViewportBreakpoints({ children }) {
-  return _react.createElement.call(void 0, ContentAreaWidthContext.Provider, { value: null }, children);
-}
-function contentBreakpointFor(width) {
-  if (width >= CONTENT_BREAKPOINTS.lg) return "desktop";
-  if (width >= CONTENT_BREAKPOINTS.md) return "tablet";
-  return "mobile";
-}
-function useContentBreakpoint() {
-  const width = _react.useContext.call(void 0, ContentAreaWidthContext);
-  const mdUp = _chunkCOWMXUHNcjs.useMdUp.call(void 0, );
-  const lgUp = _chunkCOWMXUHNcjs.useLgUp.call(void 0, );
-  if (width !== null) return contentBreakpointFor(width);
-  if (mdUp === void 0) return void 0;
-  if (lgUp) return "desktop";
-  return mdUp ? "tablet" : "mobile";
-}
-function useContentMdUp() {
-  const breakpoint = useContentBreakpoint();
-  return breakpoint === void 0 ? void 0 : breakpoint !== "mobile";
-}
-function useContentLgUp() {
-  const breakpoint = useContentBreakpoint();
-  return breakpoint === void 0 ? void 0 : breakpoint === "desktop";
-}
-
-
-
-
-
-
-
-
-
-exports.CONTENT_BREAKPOINTS = CONTENT_BREAKPOINTS; exports.ContentAreaWidthContext = ContentAreaWidthContext; exports.ViewportBreakpoints = ViewportBreakpoints; exports.contentBreakpointFor = contentBreakpointFor; exports.useContentBreakpoint = useContentBreakpoint; exports.useContentMdUp = useContentMdUp; exports.useContentLgUp = useContentLgUp;