@cahyo-dimas/freeday 1.54.0 → 2.0.0

package/adapters/core/app-shell.js

@@ -1,7 +1,7 @@
-// Freeday — framework-agnostic app-shell behaviour (DOM helpers, zero dependencies).
+// Freeday app-shell behaviour, framework-agnostic (DOM helpers, zero dependencies).
 //
 // The focus trap, `inert` bookkeeping and focus restore shared by FdyAppShell in the Vue, React and
-// Blazor adapters. Kept here — plain ESM with a .d.ts sidecar — for the same reason as
+// Blazor adapters. Kept here, plain ESM with a .d.ts sidecar, for the same reason as
 // table-model.js: three copies of a focus trap is three chances to write it differently, and the
 // one that gets it wrong strands a keyboard user with no way out of a nav panel.
 //
@@ -14,7 +14,7 @@
 
 import { breakpoints } from '../../tokens/breakpoints.mjs';
 
-/** The media query the shell switches at — the same 721px app-shell.css uses. */
+/** The media query the shell switches at, the same 721px app-shell.css uses. */
 export const NAV_QUERY = `(min-width: ${breakpoints.nav}px)`;
 
 const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]),'
@@ -36,7 +36,7 @@ export function shellParts(root) {
 /**
  * Focusable descendants, in tab order, that are actually rendered.
  * getClientRects() rather than offsetParent: an overlay sidebar is position:fixed, and a fixed
- * element reports no offsetParent at all — filtering on that calls every nav item invisible.
+ * element reports no offsetParent at all, filtering on that calls every nav item invisible.
  * @param {HTMLElement} el
  * @returns {HTMLElement[]}
  */
@@ -47,7 +47,7 @@ export function focusablesIn(el) {
 /**
  * Reconcile the parts of the shell that are not classes: `inert` and `aria-expanded`.
  *
- * One rule, both modes — the sidebar is inert whenever the nav is not visible. `width:0` (collapsed)
+ * One rule for both modes: the sidebar is inert whenever the nav is not visible. `width:0` (collapsed)
  * and `translateX(-100%)` (off-canvas) hide a panel from the eye and neither hides it from the
  * keyboard, so without this a nav nobody can see still swallows Tab on the way into the page.
  * The content is inert only while the nav is an open overlay.
@@ -63,7 +63,7 @@ export function applyShellState(root, state) {
 }
 
 /**
- * Move focus into the panel, and hand back whatever had it — the caller keeps that until close.
+ * Move focus into the panel, and hand back whatever had it. The caller keeps that until close.
  * @param {HTMLElement} root
  * @returns {Element|null} the element that was focused before
  */

package/adapters/core/table-model.d.ts

@@ -9,7 +9,7 @@ export interface FdySortState {
   dir: FdySortDir;
 }
 
-/** A column's comparator type — how its values are ordered when sorting. */
+/** A column's comparator type, how its values are ordered when sorting. */
 export type FdyColumnType = 'text' | 'number' | 'date';
 
 /** Cell alignment. Maps to `text-align` on the header and body cells. */
@@ -25,7 +25,7 @@ export interface FdyTableColumn<T> {
   /** Header label. */
   label: string;
   /**
-   * Render the label for assistive tech only — the header cell looks empty.
+   * Render the label for assistive tech only, the header cell looks empty.
    *
    * For a column of row CONTROLS (an edit button, a row menu), where a visible
    * heading is noise above a column of icons but the column still has to be

package/adapters/core/table-model.js

@@ -1,7 +1,7 @@
-// Freeday — framework-agnostic table model (pure functions, zero dependencies).
+// Freeday, framework-agnostic table model (pure functions, zero dependencies).
 //
 // The sort / filter / paginate logic shared by adapters/vue/components/FdyTable.vue and
-// adapters/react/components/FdyTable.tsx. Kept here — plain ESM with a .d.ts sidecar — so the
+// adapters/react/components/FdyTable.tsx. Kept here, plain ESM with a .d.ts sidecar, so the
 // two adapters can't drift and so the logic is unit-testable under `node --test`
 // (test/table-model.test.mjs) without a framework runtime. Every function is pure: inputs are
 // never mutated (rows are sliced before sorting), so it is safe to call on each render.
@@ -34,15 +34,15 @@ function localDay(d) {
 }
 
 /**
- * @param {unknown} v @returns {string} ISO calendar day (yyyy-mm-dd) — lexicographically comparable
+ * @param {unknown} v @returns {string} ISO calendar day (yyyy-mm-dd), lexicographically comparable
  *
  * Two bugs lived here, both of which let a column SORT by date correctly and
- * FILTER by date wrongly — the worst pairing, because a working sort is what
+ * FILTER by date wrongly, the worst pairing, because a working sort is what
  * persuades you the header understands dates.
  *
  * 1. It sliced instead of parsing, while `toTime` (which the date SORT uses)
- *    parses. A column whose `value` returns a formatted date — the normal way
- *    to render one — gave `"18 Mar 2024"`, sliced to `"18 Mar 202"`, and
+ *    parses. A column whose `value` returns a formatted date, the normal way
+ *    to render one, gave `"18 Mar 2024"`, sliced to `"18 Mar 202"`, and
  *    compared as text against `"2024-03-18"`: every row failed, silently.
  * 2. A `Date` went through `toISOString`, which is UTC. At UTC+7 a date picked
  *    as the 18th is `2024-03-17T17:00Z`, so filtering from the 18th dropped it.
@@ -155,7 +155,7 @@ export function paginate(rows, pageIndex, pageSize) {
   return rows.slice(start, start + pageSize);
 }
 
-/** Distinct non-empty cell texts for a column, naturally sorted — the source for an enum filter. */
+/** Distinct non-empty cell texts for a column, naturally sorted, the source for an enum filter. */
 export function distinctValues(rows, column) {
   const seen = new Set();
   const out = [];
@@ -173,7 +173,7 @@ export function distinctValues(rows, column) {
  * The page to land on when the page SIZE changes: whichever page still holds the first row you were
  * already looking at.
  *
- * The two obvious answers are both wrong. Jumping to page 1 throws away your place on a long list —
+ * The two obvious answers are both wrong. Jumping to page 1 throws away your place on a long list,
  * you asked to see more rows, not to start over. Keeping the same INDEX can land past the end: page
  * 5 of 5 at twenty rows is page 2 of 2 at fifty, and index 4 is nowhere. Anchoring on the first
  * visible row is the only one that always resolves, and it is what the reader expects: the row they

package/adapters/react/components/FdyAppShell.tsx

@@ -13,11 +13,11 @@ import {
 // drift into two different focus traps.
 //
 // ONE model: `navOpen` means "the nav is visible to the reader". Above the nav breakpoint a hidden
-// nav is `--nav-collapsed`, below it a visible nav is `--nav-open` — the kit owns that mapping so an
+// nav is `--nav-collapsed`, below it a visible nav is `--nav-open`, the kit owns that mapping so an
 // app never reasons about the viewport to answer a question about its own UI.
 //
 // Omit `navOpen` and the component keeps its own, defaulting BY VIEWPORT: a column on a wide screen,
-// hidden on a narrow one. That default is why the prop is optional — a parent cannot express it as a
+// hidden on a narrow one. That default is why the prop is optional, a parent cannot express it as a
 // single initial value before it knows the viewport.
 
 export interface FdyAppShellProps {
@@ -52,7 +52,7 @@ export function FdyAppShell(props: FdyAppShellProps): JSX.Element {
 
   /* The media listener reads these through refs and subscribes ONCE. Depending on navVisible would
      resubscribe on every toggle and re-run the handler, and its "narrowing with the nav visible
-     hides it" rule would then fire on an ordinary open — closing the panel in the same tick the
+     hides it" rule would then fire on an ordinary open, closing the panel in the same tick the
      reader opened it. */
   const navVisibleRef = useRef<boolean>(navVisible);
   navVisibleRef.current = navVisible;
@@ -72,7 +72,7 @@ export function FdyAppShell(props: FdyAppShellProps): JSX.Element {
       });
       if (nowOverlay && navVisibleRef.current) setVisibleRef.current(false);
     };
-    // Mount: adopt the viewport without the hide-on-narrow side effect — nothing is open yet.
+    // Mount: adopt the viewport without the hide-on-narrow side effect, nothing is open yet.
     setOverlay(!media.matches);
     if (!controlled) setUncontrolled(media.matches);
     media.addEventListener('change', onChange);
@@ -120,7 +120,7 @@ export function FdyAppShell(props: FdyAppShellProps): JSX.Element {
       <aside
         className="fdy-app__sidebar"
         onClick={(e): void => {
-          // Following a link in an overlay nav means "take me there" — the panel must not stay over
+          // Following a link in an overlay nav means "take me there", the panel must not stay over
           // the page it was just asked for. On a wide viewport the nav is a column: nothing to close.
           if (!overlay || !navVisible) return;
           const target: HTMLElement | null = e.target as HTMLElement | null;

package/adapters/react/components/FdyAutocomplete.tsx

@@ -3,7 +3,7 @@ import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { usePopover } from '../usePopover';
 
 // A controlled React port of freeday's autocomplete (src/freeday-autocomplete.js +
-// autocomplete.css): a WAI-ARIA APG *editable* combobox — a text input filters a listbox of
+// autocomplete.css): a WAI-ARIA APG *editable* combobox, a text input filters a listbox of
 // options as you type; picking one fills the input. `value` + `onChange` in place of the
 // enhancer's DOM mutation, so React owns the input. Filtering mirrors the enhancer exactly
 // (case-insensitive substring on the trimmed query); pass server-filtered `options` and it

package/adapters/react/components/FdyCascade.tsx

@@ -3,7 +3,7 @@ import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { usePopover } from '../usePopover';
 
 // A controlled React port of freeday's cascade select (src/freeday-cascade.js + cascade.css):
-// a hierarchical drill-down picker showing one level at a time — branches drill in, a back
+// a hierarchical drill-down picker showing one level at a time, branches drill in, a back
 // control ascends, a leaf selects and the value is the leaf's value (the display is the full
 // path). The enhancer's data model is a hidden nested <ul>; here it is a typed tree, which is
 // what a framework app actually has. `value` + `onChange` in place of the DOM mutation.

package/adapters/react/components/FdyCfl.tsx

@@ -21,7 +21,7 @@ export interface CflPage<Row> {
 }
 
 export interface FdyCflProps<Row extends Record<string, unknown>> {
-  /** Single: `Row | null`. With `multiple`, an array — `Row[] | null`, where null and [] both mean
+  /** Single: `Row | null`. With `multiple`, an array, `Row[] | null`, where null and [] both mean
    *  nothing picked. The enhancer has had `data-fdy-cfl-multiple` all along; this is the typed
    *  wrappers catching up (#019). */
   value: Row | Row[] | null;
@@ -30,7 +30,7 @@ export interface FdyCflProps<Row extends Record<string, unknown>> {
   columns: ReadonlyArray<CflColumn<Row>>;
   display: (row: Row) => string;
   rowKey: (row: Row) => string;
-  /** Advisory only — the caller's `fetchPage` owns paging; kept for API documentation. */
+  /** Advisory only, the caller's `fetchPage` owns paging; kept for API documentation. */
   pageSize?: number;
   /** The dialog's heading. Default 'Choose data', matching the Blazor adapter's `Title`. */
   title?: string;
@@ -81,7 +81,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
   const rowId = (index: number): string => `${baseId}-row-${index}`;
 
   /* Unsetting is not "picking nothing": it must not touch the dialog, and focus must land on a
-     control that still exists — the trigger beside it, since this button disappears with the value. */
+     control that still exists, the trigger beside it, since this button disappears with the value. */
   const clearLabelText: string = props.clearLabel ?? 'Clear selection';
   const clearValue = (): void => {
     setPicked([]);
@@ -106,7 +106,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
 
   // Out-of-order guard: every fetch takes a monotonically increasing token; a resolved or
   // rejected page is applied only if it still owns the latest token. A newer search, a
-  // load-more, a dialog close, or an unmount all bump it — this keeps a slow stale response
+  // load-more, a dialog close, or an unmount all bump it, this keeps a slow stale response
   // from overwriting fresh results (or a closed/unmounted component's state).
   const reqIdRef = useRef<number>(0);
   // In-memory cache keyed by `${query}::${page}`, cleared on open and on close.
@@ -117,7 +117,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
 
   const isDisabled: boolean = props.disabled === true;
   const isReadonly: boolean = props.readonly === true;
-  /* `display()` takes one row, so in multi the field states HOW MANY — naming one of six would be a
+  /* `display()` takes one row, so in multi the field states HOW MANY, naming one of six would be a
      lie, and naming all six does not fit a control that is 22rem wide. */
   const currentRows: Row[] = Array.isArray(props.value)
     ? props.value
@@ -137,7 +137,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
       ? props.display(props.value as Row)
       : '';
   // The results <table> (owner of `resultsId`) only renders in the rows branch, so gate the
-  // search input's aria refs on rows existing — otherwise they'd dangle during loading/empty/error.
+  // search input's aria refs on rows existing, otherwise they'd dangle during loading/empty/error.
   const hasRows: boolean = rows.length > 0;
   const controlsId: string | undefined = hasRows ? resultsId : undefined;
   const activeDescendant: string | undefined = hasRows && activeIndex >= 0 ? rowId(activeIndex) : undefined;
@@ -156,7 +156,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
     try {
       const cached: CflPage<Row> | undefined = cacheRef.current.get(key);
       const res: CflPage<Row> = cached ?? (await props.fetchPage(targetQuery, targetPage));
-      if (token !== reqIdRef.current) return; // stale — a newer request has started
+      if (token !== reqIdRef.current) return; // stale, a newer request has started
       if (cached === undefined) cacheRef.current.set(key, res);
       const copy: Row[] = res.rows.slice(); // never mutate the caller's array
       setRows((prev: Row[]): Row[] => (append ? prev.concat(copy) : copy));
@@ -171,7 +171,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
     }
   }
 
-  // Mirrors Vue's `retry()`: only `lastPage`/`lastAppend` are frozen from the failed request —
+  // Mirrors Vue's `retry()`: only `lastPage`/`lastAppend` are frozen from the failed request,
   // the query is re-read live so a retry after editing the search box (within the debounce
   // window) uses what's currently typed, not a stale snapshot.
   function retry(): void {
@@ -203,7 +203,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
     setActiveIndex(clamped);
   }
 
-  // Scroll the active row into view once it (re)renders — React's analogue of Vue's
+  // Scroll the active row into view once it (re)renders. React's analogue of Vue's
   // `nextTick(() => scrollIntoView(...))`; fires for both keyboard nav and row hover, same as
   // the Vue source's `setActive`.
   useEffect((): void => {
@@ -225,7 +225,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
     );
   }
 
-  /* A click means "tick this" in multi and "this is my answer" in single — the whole difference. */
+  /* A click means "tick this" in multi and "this is my answer" in single, the whole difference. */
   function onRowClick(row: Row): void {
     if (isMultiple) togglePick(row);
     else commit(row);
@@ -321,7 +321,7 @@ export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<R
   }
 
   // Unmount safety: bump the token so any in-flight fetch's setState is dropped, and cancel a
-  // pending debounce — mirrors Vue's onBeforeUnmount plus the same token trick onClose uses.
+  // pending debounce, mirrors Vue's onBeforeUnmount plus the same token trick onClose uses.
   useEffect((): (() => void) => {
     return (): void => {
       reqIdRef.current++;

package/adapters/react/components/FdyDateRange.tsx

@@ -5,7 +5,7 @@ import { FdyDatepicker } from './FdyDatepicker';
 // two linked FdyDatepickers where the end can't precede the start (start.max = end, end.min = start).
 // `value` + `onChange` in place of Vue's `v-model`; this composes the single-date picker rather than
 // re-implementing the calendar. Note: the vanilla enhancer's cross-calendar `.in-range` day shading
-// is not reproduced (each picker is independent) — the min/max linkage is what keeps the range valid.
+// is not reproduced (each picker is independent), the min/max linkage is what keeps the range valid.
 
 export interface DateRangeValue {
   start: string | null;
@@ -19,7 +19,7 @@ export interface FdyDateRangeProps {
   max?: string;
   locale?: string;
   disabled?: boolean;
-  /** Locked/view mode for both pickers — focusable, values shown, but can't be opened or changed. */
+  /** Locked/view mode for both pickers, focusable, values shown, but can't be opened or changed. */
   readonly?: boolean;
   invalid?: boolean;
   describedby?: string;

package/adapters/react/components/FdyDatepicker.tsx

@@ -55,7 +55,7 @@ export interface FdyDatepickerProps {
   ariaLabelledby?: string;
   /** Show a clear (×) button in the trigger when a date is set, so an optional date can be unset. Calls onChange('') to reset. Off by default. */
   clearable?: boolean;
-  /** aria-label for the previous-month nav button. Default 'Previous month' — override for non-English UIs (month/weekday names already follow `locale`). */
+  /** aria-label for the previous-month nav button. Default 'Previous month', override for non-English UIs (month/weekday names already follow `locale`). */
   /** aria-label for the title button that drills to the month grid. Default 'Choose month'. */
   chooseMonthLabel?: string;
   /** aria-labels for the year arrows shown in the month grid. Defaults 'Previous year' / 'Next year'. */
@@ -132,7 +132,7 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   const pendingFocusRef = useRef<string | null>(null);
 
   const [open, setOpen] = useState<boolean>(false);
-  /* 'days' | 'months' — the calendar drills one level up instead of growing furniture beside the
+  /* 'days' | 'months', the calendar drills one level up instead of growing furniture beside the
      title. Before this the only pointer route to another month was one click per month. */
   const [mode, setMode] = useState<'days' | 'months' | 'years'>('days');
   const [focusMonth, setFocusMonth] = useState<number>(0);
@@ -224,7 +224,7 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
     return false;
   }
 
-  /** A month is only unreachable when the WHOLE month falls outside min/max — a range that sits
+  /** A month is only unreachable when the WHOLE month falls outside min/max, a range that sits
    *  inside one month disables both ends while the middle is perfectly selectable. */
   function isMonthDisabled(year: number, month: number): boolean {
     const first: Date = new Date(year, month, 1);
@@ -429,7 +429,7 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
     closePanel(true);
   }
 
-  // Clear (reset to empty). Calls onChange('') — parseISO('') is null, so the placeholder shows again.
+  // Clear (reset to empty). Calls onChange(''), parseISO('') is null, so the placeholder shows again.
   function clearValue(): void {
     props.onChange('');
     setOpen(false);
@@ -506,7 +506,7 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   }
 
   // Close when focus leaves the control entirely (e.g. Shift+Tab off the trigger).
-  /* A null relatedTarget means focus fell to <body> — which is what happens when the element the
+  /* A null relatedTarget means focus fell to <body>, which is what happens when the element the
      user just pressed is REMOVED by the click it triggered (drilling into the month grid replaces
      the grid, and with it the cell that had focus). That is not focus leaving the control, and
      closing on it made the panel vanish mid-navigation. A pointer that really lands outside is

package/adapters/react/components/FdyDrawer.tsx

@@ -2,7 +2,7 @@ import type { JSX, ReactNode } from 'react';
 import { useEffect, useId, useRef } from 'react';
 
 // A controlled React wrapper over freeday's `.fdy-drawer` native <dialog> side panel
-// (src/components/drawer.css). React port of adapters/vue/components/FdyDrawer.vue — the same
+// (src/components/drawer.css). React port of adapters/vue/components/FdyDrawer.vue, the same
 // controlled glue as FdyModal (guarded showModal()/close(), onCancel + preventDefault so Esc routes
 // through app state, backdrop-click via `event.target === dialogEl`) applied to a drawer that anchors
 // left (default) or right. Native <dialog> supplies the focus trap, focus restore, top-layer stacking

package/adapters/react/components/FdyModal.tsx

@@ -3,7 +3,7 @@ import { useEffect, useId, useRef } from 'react';
 
 // A controlled React wrapper over freeday's `.fdy-modal` native <dialog> (src/components/modal.css).
 // React port of adapters/vue/components/FdyModal.vue: reconciles the reactive `open` boolean with a
-// DOM element whose open/close is a method call — showModal()/close() guarded against the
+// DOM element whose open/close is a method call, showModal()/close() guarded against the
 // already-open/closed cases (showModal() on an open dialog throws), onCancel + preventDefault so Esc
 // routes through app state instead of closing the DOM behind its back, and backdrop-click detection
 // via `event.target === dialogEl`. Native <dialog> already gives the focus trap, focus restore,
@@ -44,7 +44,7 @@ export function FdyModal(props: FdyModalProps): JSX.Element {
         if (dismissible) props.onClose();
       }}
       onClick={(e): void => {
-        // The ::backdrop is not a separate element — target === the dialog box means a backdrop click.
+        // The ::backdrop is not a separate element, target === the dialog box means a backdrop click.
         if (dismissible && e.target === dialogRef.current) props.onClose();
       }}
     >

package/adapters/react/components/FdyTable.tsx

@@ -45,14 +45,14 @@ export interface FdyTableProps<Row extends object> {
   /** Client-side page size when `page` is absent; 0/undefined = render all rows (no pager). */
   pageSize?: number;
   /**
-   * Controlled client-side page index (0-based). Provide it — with `pageSize`, without `page` — to
+   * Controlled client-side page index (0-based). Provide it, with `pageSize`, without `page`, to
    * own the page while the table keeps doing filter/sort/paginate. This is what lets an EXTERNAL
    * pager drive the table: a responsive screen that hides `.fdy-datatable` below `md` and renders a
    * card list from `onProcess` can render one pager for both breakpoints and point it here.
    * Omit for the internal index (unchanged default).
    */
   /** Withhold the table's own footer (pager + range) so the screen can render one. Server mode had
-   *  no way to do this: the app owns the page there ANYWAY, and was still handed a second control —
+   *  no way to do this: the app owns the page there ANYWAY, and was still handed a second control,
    *  a responsive list that shows a table at one breakpoint and cards at another ended up with the
    *  kit's pager stacked under its own. Client mode's counterpart is `pageIndex`. Default true. */
   pager?: boolean;
@@ -61,13 +61,13 @@ export interface FdyTableProps<Row extends object> {
    * (unchanged default). Every back office has one, and a table that renders two thirds of its own
    * footer forces the app to rebuild all three to add the last (#008).
    *
-   * Server mode reports the pick through `onPageChange` — same callback as a page click, with a new
+   * Server mode reports the pick through `onPageChange`, same callback as a page click, with a new
    * `size`. Client mode keeps it internally and also calls `onPageSizeChange`, so the control works
    * with nothing wired and can still be persisted.
    */
   pageSizes?: readonly number[];
   /** Client mode with `pageSizes`: the reader picked a new rows-per-page. The table has already
-   *  applied it — this is for a caller that wants to persist the choice. */
+   *  applied it, this is for a caller that wants to persist the choice. */
   onPageSizeChange?: (size: number) => void;
   pageIndex?: number;
   /** Client mode with `pageIndex` provided: the table asks for a new 0-based index (pager click, a
@@ -86,7 +86,7 @@ export interface FdyTableProps<Row extends object> {
   rowClass?: (row: Row) => string | undefined;
   /** A row was activated (click, or Enter/Space while the row itself is focused). */
   onRowActivate?: (row: Row) => void;
-  /** Called with the processed page of rows (after filter/sort/paginate) plus the total row count —
+  /** Called with the processed page of rows (after filter/sort/paginate) plus the total row count,
    *  in BOTH modes, whenever they change. Lets a consumer render the SAME processed set elsewhere
    *  (a `< md` card list, a "selected" summary, export-to-CSV) without re-deriving the pipeline. */
   onProcess?: (result: { rows: Row[]; total: number }) => void;
@@ -105,7 +105,7 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
   const [internalFilters, setInternalFilters] = useState<FdyFilterMap>({});
   const [internalPageIndex, setInternalPageIndex] = useState<number>(0);
   /* Client-mode rows-per-page. `pageSize` is a plain prop with no callback, so a footer control that
-   * only reported would do nothing in the app that wired nothing — the table applies the pick itself
+   * only reported would do nothing in the app that wired nothing, the table applies the pick itself
    * and reports it. `prevPageSize` is React's adjust-state-during-render idiom: an explicit change to
    * the prop wins back, because the parent said something newer. */
   const [internalPageSize, setInternalPageSize] = useState<number | null>(null);
@@ -238,7 +238,7 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
       .join(' ');
     return cls === '' ? undefined : cls;
   }
-  // Enter/Space activate only when the row itself is focused — a control inside a cell keeps its own
+  // Enter/Space activate only when the row itself is focused, a control inside a cell keeps its own
   // event (the `event.target !== event.currentTarget` guard). Click relies on inner controls calling
   // stopPropagation, matching the pattern consumers hand-roll today.
   function onRowKeydown(e: React.KeyboardEvent<HTMLTableRowElement>, row: Row): void {

package/adapters/react/components/FdyTableFilter.tsx

@@ -7,7 +7,7 @@ import type { FdyColumnFilter, FdyColumnFilterType } from '../../core/table-mode
 // Internal to FdyTable: one column's header funnel button + its type-aware filter popover
 // (text / enum / number / date) over freeday's `.fdy-table__filterbtn` + `.fdy-filter*` classes.
 // React port of adapters/vue/components/FdyTableFilter.vue. Reuses usePopover so the panel escapes
-// the table's `overflow:hidden` via the top layer. Purely controlled — renders the current
+// the table's `overflow:hidden` via the top layer. Purely controlled, renders the current
 // `filter`, emits the next one (or null to clear); the parent owns where it goes. Not exported.
 
 export interface FdyTableFilterProps {

package/adapters/react/components/FdyTableFooter.tsx

@@ -8,19 +8,19 @@ import { FdyCombo } from './FdyCombo';
  * The band under a table: what you are looking at, how much of it you see, where you are.
  *
  * `FdyTable` renders this itself, so most screens never import it. It is exported for the one shape
- * that cannot use the table's own — a RESPONSIVE list, where a `.fdy-datatable` at `lg` and a
+ * that cannot use the table's own, a RESPONSIVE list, where a `.fdy-datatable` at `lg` and a
  * `.fdy-list` below it are two renderings of ONE page of rows. A footer inside the table is inside
  * the half that is hidden on a phone, so those screens need to render it once, outside both
  * (improvement notes #005 and #008, from IDU_EMATE_APPL_WEB).
  *
- * It owns nothing. `page` in, `onPageChange` out — the same contract as the table's server mode.
+ * It owns nothing. `page` in, `onPageChange` out, the same contract as the table's server mode.
  */
 export interface FdyTableFooterProps {
   /** The page being shown. `size` drives the range AND the rows-per-page control's value. */
   page: FdyPageState;
   onPageChange?: (page: FdyPageState) => void;
   /**
-   * Offer a rows-per-page control. Omit for none — the footer is then range + pager, exactly as
+   * Offer a rows-per-page control. Omit for none; the footer is then range + pager, exactly as
    * before. Picking a size calls `onPageChange` with the new `size` and the index that still holds
    * the row you were looking at.
    */
@@ -29,7 +29,7 @@ export interface FdyTableFooterProps {
 
 export function FdyTableFooter(props: FdyTableFooterProps): JSX.Element | null {
   const { index, size, total } = props.page;
-  /* The combo is labelled by the visible word beside it — a <label htmlFor> cannot reach inside a
+  /* The combo is labelled by the visible word beside it, a <label htmlFor> cannot reach inside a
    * component, and an aria-label would leave that word attached to nothing. */
   const sizeLabelId: string = useId();
 
@@ -41,7 +41,7 @@ export function FdyTableFooter(props: FdyTableFooterProps): JSX.Element | null {
 
   const hasPager: boolean = size > 0 && totalPages > 1;
   const sizes: readonly number[] = props.pageSizes ?? [];
-  /* One page and no size control means there is nothing here to say — the table has always withheld
+  /* One page and no size control means there is nothing here to say, the table has always withheld
    * the whole band in that case, and this is where that decision now lives. */
   if (!hasPager && sizes.length === 0) return null;
 

package/adapters/react/index.d.ts

@@ -36,7 +36,7 @@ export { FdyCascade, type FdyCascadeProps, type CascadeNode } from './components
 export { FdyCfl, type FdyCflProps, type CflColumn, type CflPage } from './components/FdyCfl';
 export { FdyChart, type FdyChartProps, type FdyChartSeries } from './components/FdyChart';
 export { FdyTable, type FdyTableProps } from './components/FdyTable';
-/** The table's own footer, standalone — for a responsive list whose table is hidden at some
+/** The table's own footer, standalone, for a responsive list whose table is hidden at some
  *  breakpoints and so cannot host it. */
 export { FdyTableFooter, type FdyTableFooterProps } from './components/FdyTableFooter';
 export { FdyModal, type FdyModalProps } from './components/FdyModal';

package/adapters/react/useFreeday.js

@@ -1,4 +1,4 @@
-/* Freeday — React adapter (thin). The enhancers stay the source of truth; this
+/* Freeday. React adapter (thin). The enhancers stay the source of truth; this
  * hook re-runs every registered window.Freeday*.initAll() over a subtree after
  * React commits, so [data-fdy-*] markup rendered by React gets enhanced (and
  * re-enhanced after updates). Enhancers are idempotent, so the repeated calls
@@ -9,12 +9,12 @@
  *   useFreeday(root);            // scopes init to this component's subtree
  *   // <div ref={root}> ...[data-fdy-*] markup... </div>
  *
- * The ref may also sit ON the widget itself — <div ref={root} data-fdy-menu> — which is what you
+ * The ref may also sit ON the widget itself, <div ref={root} data-fdy-menu>, which is what you
  * write when the component's root element IS the widget. initAll() matches its own root as
  * well as descendants, so both shapes work. (Before 1.23.0 only the wrapping shape did, and
  * the other failed silently: querySelectorAll never matches its root.)
  *
- * Events are native bubbling CustomEvents — add listeners on the root (they
+ * Events are native bubbling CustomEvents, add listeners on the root (they
  * bubble) and read event.detail. See index.d.ts for the detail types.
  */
 import { useEffect, useCallback } from 'react';

package/adapters/vue/components/FdyAppShell.vue

@@ -14,13 +14,13 @@ import {
 // Blazor bridge cannot drift into three different focus traps.
 //
 // ONE model: `navOpen` means "the nav is visible to the reader". The two state classes are the
-// kit's business — above the nav breakpoint a hidden nav is `--nav-collapsed`, below it a visible
-// nav is `--nav-open` — so an app never reasons about the viewport to answer a question about its
+// kit's business, above the nav breakpoint a hidden nav is `--nav-collapsed`, below it a visible
+// nav is `--nav-open`, so an app never reasons about the viewport to answer a question about its
 // own UI.
 //
 // Leave `navOpen` unbound and the component keeps its own: visible on a wide viewport, hidden on a
 // narrow one, which is the right default and one an app cannot express in a single initial value.
-// Bind it (`v-model:navOpen`) when the app wants to drive it — a menu item, a persisted preference.
+// Bind it (`v-model:navOpen`) when the app wants to drive it, a menu item, a persisted preference.
 
 const props = withDefaults(defineProps<{
   navOpen?: boolean;
@@ -78,7 +78,7 @@ function onBackdrop(): void {
   if (overlay.value && navVisible.value) setVisible(false);
 }
 
-/* Following a link in an overlay nav means "take me there" — the panel must not stay over the page
+/* Following a link in an overlay nav means "take me there", the panel must not stay over the page
    it was just asked for. On a wide viewport the nav is a column and clicking it changes nothing. */
 function onSidebarClick(e: MouseEvent): void {
   if (!overlay.value || !navVisible.value) return;
@@ -99,7 +99,7 @@ function onKeydown(e: KeyboardEvent): void {
 
 /* Both directions matter, and they are not symmetrical.
    Narrowing with the nav visible would drop an overlay panel over a page nobody asked to leave, so
-   the nav is hidden. Widening is harmless — a visible nav simply becomes the column again — and the
+   the nav is hidden. Widening is harmless, a visible nav simply becomes the column again, and the
    watcher clears the `inert` the overlay had put on the content. */
 function onMediaChange(): void {
   const nowOverlay: boolean = media !== null && !media.matches;

package/adapters/vue/components/FdyAutocomplete.vue

@@ -3,7 +3,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch, type
 import { usePopover } from '../usePopover';
 
 // A controlled Vue port of freeday's autocomplete (src/freeday-autocomplete.js +
-// autocomplete.css): a WAI-ARIA APG *editable* combobox — a text input filters a listbox of
+// autocomplete.css): a WAI-ARIA APG *editable* combobox, a text input filters a listbox of
 // options as you type; picking one fills the input. A real `v-model` in place of the enhancer's
 // DOM mutation, so Vue owns the input. Filtering mirrors the enhancer exactly (case-insensitive
 // substring on the trimmed query); pass server-filtered `options` and it stays a no-op re-filter.

package/adapters/vue/components/FdyCascade.vue

@@ -25,7 +25,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch, type
 import { usePopover } from '../usePopover';
 
 // A controlled Vue port of freeday's cascade select (src/freeday-cascade.js + cascade.css):
-// a hierarchical drill-down picker showing one level at a time — branches drill in, a back
+// a hierarchical drill-down picker showing one level at a time, branches drill in, a back
 // control ascends, a leaf selects and the value is the leaf's value (the display is the full
 // path). The enhancer's data model is a hidden nested <ul>; here it is a typed tree, which is
 // what a framework app actually has. A real `v-model` in place of the DOM mutation.