@react-x11/components 0.5.0 → 0.7.0

package/src/table/index.ts

@@ -136,6 +136,28 @@ const HALF = 3;
 const GRIP = HALF + RULE + HALF;
 /** What one Left/Right on a focused grip is worth. */
 const STEP = 16;
+/**
+ * How far the grid sits inside the table's own edge — the default `rowInset`.
+ *
+ * It is what makes a selection read as a **pill on** the list rather than a
+ * band across it. With no inset the wash runs into whatever the table is
+ * mounted against, and the selected row reads as a stripe cut across the pane
+ * instead of a mark on a row. Core's `Menu` insets its rows from the sheet
+ * for exactly this reason, and `MENU_PAD` is this number.
+ *
+ * **The inset is the grid's, not the row's**, which is where a table parts
+ * company with `<Tree>`. A tree row is alone in its pane, so its own margin
+ * is the whole story; a table row is one half of a grid whose other half is
+ * the header, and a margin on the row alone would slide every cell four
+ * pixels out from under the column it belongs to. So the body pane is padded
+ * and the header row is offset by the same amount, and the columns resolve
+ * into what is left — which is also why this is a prop rather than something
+ * `styles.row` could express (see `rowInset`).
+ *
+ * Horizontal only. Rows stack flush against each other: clearing the first
+ * and the last is the job of whatever the table is mounted in.
+ */
+const ROW_INSET = 4;
 /**
  * Where `virtual="auto"` starts virtualizing.
  *
@@ -342,6 +364,21 @@ interface TableBaseProps<Row> extends Omit<
    * the measure pass. `rowHeight={24}` restores core's exact behaviour.
    */
   rowHeight?: number;
+  /**
+   * How far the grid sits inside the table's edge, in pixels. Default 4.
+   *
+   * It is what makes the selection and hover washes read as pills on the
+   * list rather than bands across it, and the row's corner radius follows
+   * it: `rowInset={0}` is the full-bleed, square-cornered band, because a
+   * pill has to be inset to be *seen* as one and rounding a full-bleed row
+   * only shows the pane through four notched corners.
+   *
+   * A prop rather than a `styles.row` margin because the header has to move
+   * with the body — see `ROW_INSET`. The columns resolve into the width this
+   * leaves, so widening it narrows the flex columns rather than starting a
+   * horizontal scroll.
+   */
+  rowInset?: number;
   /** What an unmeasured row is assumed — and floored — at, while measuring.
    *  Default 24. The scrollbar is this guess for every row not yet seen; it
    *  converges as you scroll, and once enough rows have been measured the
@@ -495,6 +532,10 @@ interface TableRowViewProps<Row> {
   rowHeight: number | undefined;
   estimate: number;
   theme: Theme;
+  /** The row's corner, resolved once at the table level — see `rowRadius`
+   *  there for why it is `radiusSmall` and not core's popup derivation. A
+   *  number rather than a lookup so the memo still bails out on a scroll. */
+  radius: number;
   rowStyle: TableStyles<Row>['row'];
   cellStyle: TableStyles<Row>['cell'];
   renderRow?: (state: TableRowState<Row>, content: ReactNode[]) => ReactNode;
@@ -522,6 +563,7 @@ function TableRowView<Row>(props: TableRowViewProps<Row>): ReactElement {
     rowHeight,
     estimate,
     theme,
+    radius,
     rowStyle,
     cellStyle,
     renderRow,
@@ -611,17 +653,32 @@ function TableRowView<Row>(props: TableRowViewProps<Row>): ReactElement {
         selectable && { cursor: 'pointer' },
         {
           backgroundColor: isSelected ? theme.hoverBackground : 'transparent',
+          // A pill on the list rather than a band across it. The inset that
+          // makes it one is the grid's — see `ROW_INSET` — and this is the
+          // corner that goes with it.
+          borderRadius: radius,
           // The row's ink, said once: `color` inherits, so default cells
           // take it without being handed it.
           color,
         },
         selectable && {
-          // pressed even on the selected row: a re-press on the row that
-          // is already current is the one click in the table that would
-          // otherwise look ignored
+          // The press marks the row it lands on, and the pressed colour comes
+          // from the ramp that row is already painted with. An unselected row is on the surface ramp, so it is
+          // `surfaceActive`. A selected row is washed with `hoverBackground`,
+          // and `accentActive` — what this used to say — is the pressed step
+          // of `accent`: a different token that merely *holds* the same
+          // colour in both stock palettes. Move the accent and the press
+          // flashes something the table never wears at rest; a yellow accent
+          // over a blue selection gives a yellow press, and the row's ink is
+          // still `hoverText`, picked to be legible on the blue. There is no
+          // darker step of `hoverBackground` in the palette to reach for and
+          // the selected row is already the strongest fill in the list, so
+          // it keeps its wash. That row is the one place a press shows
+          // nothing, and it is also the one row whose press already has an
+          // answer: it is selected, and a second click opens it.
           ':active': {
             backgroundColor: isSelected
-              ? theme.accentActive
+              ? theme.hoverBackground
               : theme.surfaceActive,
           },
         },
@@ -682,6 +739,7 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
     onRowContextMenu,
     onColumnResize,
     rowHeight,
+    rowInset = ROW_INSET,
     estimatedRowHeight,
     virtual = 'auto',
     overscan = DEFAULT_OVERSCAN,
@@ -809,6 +867,8 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
   const hintShown = useRef(false);
   const userWidthsRef = useRef(userWidths);
   userWidthsRef.current = userWidths;
+  const rowInsetRef = useRef(rowInset);
+  rowInsetRef.current = rowInset;
 
   /** Declared uniform: divide, never measure — core's model. */
   const uniform = rowHeight !== undefined;
@@ -846,11 +906,29 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
   const { first, last, above, below } = win.slice;
 
   /** Columns resolve to pixels once, at the table level, per (columns,
-   *  viewport, resizes) — every row agrees on the grid by construction. */
+   *  viewport, resizes) — every row agrees on the grid by construction.
+   *  Into the *inset* box: the grid gives up `rowInset` at each edge, so a
+   *  flex column fills what is left instead of pushing the last few pixels
+   *  under a horizontal scrollbar that was not there before. */
+  const gridWidth = Math.max(0, view.width - rowInset * 2);
   const { widths, total } = useMemo(
-    () => resolveWidths(columns, userWidths, view.width),
-    [columns, userWidths, view.width],
+    () => resolveWidths(columns, userWidths, gridWidth),
+    [columns, userWidths, gridWidth],
   );
+  /**
+   * The row's corner. `radiusSmall` rather than core's `rowRadius`: that one
+   * derives a row's radius from `radiusPopup` less the sheet's border and
+   * padding, so the pill and the sheet under it share a centre — and a table
+   * owns no sheet. It fills a pane whose radius it cannot know, so there is
+   * no outer curve to be concentric with, and `radiusPopup` ("a floating
+   * surface … half the text size") is describing a menu laid over the window
+   * rather than content in it. Of the two in-window tokens the row takes the
+   * tighter: `radius` is the control scale — a button, an input, a card cut
+   * into the surface — and this is a mark *on* the surface, transient and
+   * borderless. Zero when there is no inset, because a pill has to be inset
+   * to be seen as one; rounded and full-bleed just notches the four corners.
+   */
+  const rowRadius = rowInset > 0 ? theme.radiusSmall : 0;
 
   /**
    * The scroll the table owes a row, and the pane's real offset read back
@@ -907,7 +985,10 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
     const expected = resolveWidths(
       columnsRef.current,
       userWidthsRef.current,
-      viewRef.current.width,
+      // the same inset box the render resolved into, or every row is
+      // measured against a grid the table does not have and no height is
+      // ever recorded
+      Math.max(0, viewRef.current.width - rowInsetRef.current * 2),
     ).total;
     const box = body.current;
     const rows = orderedRef.current;
@@ -1306,6 +1387,9 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
           { height: heights.heightAt(entry.index) },
           {
             backgroundColor: isSelected ? theme.hoverBackground : 'transparent',
+            // Same pill as a real row's, so a placeholder that is replaced
+            // mid-scroll does not change shape as it arrives.
+            borderRadius: rowRadius,
           },
           typeof rowStyleProp === 'function'
             ? rowStyleProp(state)
@@ -1483,6 +1567,7 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
         rowHeight,
         estimate,
         theme,
+        radius: rowRadius,
         rowStyle: rowStyleProp,
         cellStyle: cellStyleProp,
         renderRow,
@@ -1649,7 +1734,17 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
       },
       hx(
         'box',
-        { style: [s.headerRow, { marginStart: -scrollX, width: total }] },
+        {
+          // `rowInset` first, then the scroll: the header and the rows are
+          // one grid, so the inset that moves the body has to move the
+          // header by the same amount or every caption slides out from over
+          // its column. The strip's own background stays full-bleed — it is
+          // a band across the table, which is exactly what a row is not.
+          style: [
+            s.headerRow,
+            { marginStart: rowInset - scrollX, width: total },
+          ],
+        },
         headerCells,
       ),
     ),
@@ -1657,7 +1752,16 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
       'box',
       {
         ref: body,
-        style: s.body,
+        // The body half of the grid's inset — on the pane rather than on
+        // each row, for three reasons. A row still lays out at exactly
+        // `total`, which is the width `measureRows` insists on before it
+        // will record a height. The spacers a virtualized table stands on
+        // are inset with it, for free. And padding is inside the scrollable
+        // area at both ends, so the trailing inset survives a table scrolled
+        // to the end of columns wider than its pane — a trailing *margin* on
+        // the rows box is dropped from the scroll extent there, and the last
+        // column ends up flush against the edge it was meant to clear.
+        style: [s.body, { paddingStart: rowInset, paddingEnd: rowInset }],
         onScroll: (ev) => {
           // A scroll this component did not ask for is the user taking over,
           // and an owed `scrollToRow` must not yank the list back out from

package/src/tree/index.ts

@@ -127,6 +127,22 @@ const TWISTY = 12;
  *  is half of that, so `size` for one reads as its width. */
 const TWISTY_GLYPH = 10;
 const ROW_HEIGHT = 22;
+/**
+ * How far a row's wash sits inside the tree's own edge.
+ *
+ * It is what makes a selection read as a **pill on** the list rather than a
+ * band across it. With no inset the wash runs into whatever the tree is
+ * mounted against — in a sidebar that is the pane's hairline — and the
+ * selected row reads as a stripe cut across the pane instead of a mark on a
+ * row. Core's `Menu` insets its rows from the sheet for exactly this reason,
+ * and `MENU_PAD` is this number.
+ *
+ * Horizontal only. Rows stack flush against each other: in a menu it is the
+ * sheet's own padding that clears the first and the last, and here it is
+ * whatever the app put the tree in. A vertical margin would not reshape the
+ * wash, it would spread the list out.
+ */
+const ROW_INSET = 4;
 /**
  * Where `virtual="auto"` starts virtualizing.
  *
@@ -144,6 +160,13 @@ const s = createStyles({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 4,
+    // The wash's inset — see `ROW_INSET`. It lives here rather than beside
+    // the colours so that the skeleton row wears the same shape, and so that
+    // an app can take it back off: `styles.row` merges last, and
+    // `{ marginStart: 0, marginEnd: 0, borderRadius: 0 }` is the full-bleed
+    // band this used to be.
+    marginStart: ROW_INSET,
+    marginEnd: ROW_INSET,
     paddingEnd: 8,
     paddingTop: 3,
     paddingBottom: 3,
@@ -667,10 +690,45 @@ function TreeRowView<T>(props: TreeRowViewProps<T>): ReactElement {
         // index reads back what it actually became.
         { minHeight: rowHeight },
         // The indent is what says "inside", so it is measured from the edge
-        // the row's label begins at.
+        // the row's label begins at — which is the *wash's* edge now, not
+        // the tree's, and `ROW_INSET` is deliberately not subtracted back
+        // out here. Both readings move something: subtract it and the label
+        // stays where it was but ends up flush against the pill it sits in,
+        // which is what a pill with no padding looks like; leave it and the
+        // whole tree steps over by four pixels once, which nothing inside it
+        // can tell apart from a container four pixels narrower. So the
+        // padding is the pill's own clearance and the tree takes the shift.
+        // The guides are measured from the same edge and move with it, so a
+        // branch edge still meets the start of the row it belongs to.
         { paddingStart: renderGuide ? 4 : 4 + row.depth * indent },
         {
           backgroundColor: isSelected ? theme.hoverBackground : 'transparent',
+          // Rounded on the *window's* scale, not a popup's.
+          //
+          // `rowRadius` — what core's `Menu` and `Select` use — derives a
+          // row's radius from `radiusPopup`, less the sheet's border and
+          // padding, so that the pill's corner and the sheet's share a
+          // centre. That derivation needs an outer curve to be concentric
+          // with, and a tree has none: it fills whatever the app mounted it
+          // in — a sidebar, a split pane, a dialog — and cannot know that
+          // container's radius, or whether it has one. `radiusPopup` is the
+          // wrong parent by its own definition anyway ("a floating surface …
+          // half the text size"): a tree is content in the window, not a
+          // sheet laid over it.
+          //
+          // That leaves the two in-window tokens, and the row takes the
+          // tighter of them. `radius` is the control scale — a button, an
+          // input, a card cut into the surface — and this is not a control
+          // but a mark *on* the surface: transient, borderless, following
+          // the pointer. `radiusSmall` is that step down — the same relation
+          // `radiusPopupItem` has to `radiusPopup`, one scale in.
+          //
+          // An app that does own the sheet can still have the concentric
+          // version, because it is the one that knows the radius to be
+          // concentric with — `styles={{ row: { borderRadius:
+          // rowRadius(theme, border, inset) } }}`, with the inset it also
+          // sets here.
+          borderRadius: theme.radiusSmall,
           // The row's ink, said once: `color` inherits, so the label takes
           // it without being handed it.
           color,
@@ -684,9 +742,23 @@ function TreeRowView<T>(props: TreeRowViewProps<T>): ReactElement {
           // The selection only moves on the release, and `:active` marks
           // the whole press chain, so a press on the label or the twisty
           // still darkens the row it is in.
+          //
+          // The pressed colour comes from the ramp the row is already
+          // painted with. An unselected row is on the surface ramp, so it is
+          // `surfaceActive`. A selected row is washed with `hoverBackground`,
+          // and `accentActive` — what this used to say — is the pressed step
+          // of `accent`: a different token that merely *holds* the same
+          // colour in both stock palettes. Move the accent and the press
+          // flashes something the tree never wears at rest; a yellow accent
+          // over a blue selection gives a yellow press, and the row's ink is
+          // still `hoverText`, picked to be legible on the blue. There is no
+          // darker step of `hoverBackground` in the palette to reach for and
+          // the selected row is already the strongest fill in the list, so
+          // it keeps its wash: the click is answered by what it does, the
+          // selection or the activation on the second one.
           ':active': {
             backgroundColor: isSelected
-              ? theme.accentActive
+              ? theme.hoverBackground
               : theme.surfaceActive,
           },
         },
@@ -1319,6 +1391,9 @@ export function Tree<T = TreeItem>({
           { height: index.heightAt(row.index) },
           {
             backgroundColor: isSelected ? theme.hoverBackground : 'transparent',
+            // Same pill as a real row's, so a placeholder that is replaced
+            // mid-scroll does not change shape as it arrives.
+            borderRadius: theme.radiusSmall,
           },
           typeof rowStyleProp === 'function'
             ? rowStyleProp(state)

package/dist/desktop-calendar/eds.d.ts

@@ -1,102 +0,0 @@
-import type { MessageBus } from 'react-x11';
-/** One calendar the desktop knows about. */
-export interface DesktopCalendarInfo {
-    uid: string;
-    /** The name shown in the desktop's own calendar UI. */
-    name: string;
-    enabled: boolean;
-    /** The colour that UI draws it in — worth carrying into a day marker. */
-    color?: string;
-    /** `caldav`, `google`, `local`, `webcal`… */
-    backend?: string;
-    readOnly: boolean;
-    /** Set when the calendar came from an Online Accounts login. */
-    account?: string;
-}
-/** One occurrence, already expanded out of any recurrence rule. */
-export interface DesktopEvent {
-    uid: string;
-    summary: string;
-    location?: string;
-    description?: string;
-    start: Date;
-    end: Date;
-    allDay: boolean;
-    recurring: boolean;
-    calendar: {
-        uid: string;
-        name: string;
-        color?: string;
-    };
-}
-/** A calendar that would not answer. One broken backend is not a failure. */
-export interface DesktopCalendarError {
-    calendar: DesktopCalendarInfo;
-    message: string;
-}
-export interface EventsResult {
-    events: DesktopEvent[];
-    errors: DesktopCalendarError[];
-}
-/** What `watch` reports. Deliberately thin: re-query rather than patch. */
-export interface CalendarChange {
-    calendar: DesktopCalendarInfo;
-    kind: 'ObjectsAdded' | 'ObjectsModified' | 'ObjectsRemoved';
-    count: number;
-}
-/**
- * A source's whole configuration is an ini-style keyfile carried in one D-Bus
- * property, so it has to be parsed to find out whether a source is even a
- * calendar (as opposed to an address book, a mail account or a task list).
- */
-export declare function parseKeyFile(text: string): Record<string, Record<string, string>>;
-/**
- * The desktop's calendars, read over a bus someone else owns.
- *
- * ```ts
- * const ref = await sessionBus();
- * if (!ref) return;                       // no bus here; no calendars
- * const desktop = new DesktopCalendar(ref.bus);
- * const { events } = await desktop.eventsBetween(from, to);
- * ```
- *
- * Nothing here closes the connection, because nothing here opened it. Call
- * `dispose()` to drop the views this instance started, then release your own
- * reference to the bus.
- */
-export declare class DesktopCalendar {
-    #private;
-    constructor(bus: MessageBus);
-    /** Every calendar the desktop knows about, colour included. */
-    listCalendars(): Promise<DesktopCalendarInfo[]>;
-    /**
-     * Expanded occurrences between two `Date`s, across the calendars given (or
-     * every enabled one). Sorted by start.
-     *
-     * A backend that is offline or broken contributes an entry in `errors`
-     * rather than throwing: one unreachable CalDAV server must not blank a
-     * whole month of the user's own local calendar.
-     */
-    eventsBetween(from: Date, to: Date, options?: {
-        calendars?: DesktopCalendarInfo[];
-    }): Promise<EventsResult>;
-    /**
-     * Live updates: `onChange` fires whenever anything in the range moves, so
-     * the caller can re-query. Returns an unsubscribe function.
-     *
-     * Deliberately a "something changed" signal rather than a patch — a
-     * recurrence master edited three months away can change what today looks
-     * like, and re-running the query is both simpler and correct.
-     *
-     * **Changes only.** What is in the range already is what `eventsBetween`
-     * answered; `onChange` fires for what happens after that. See
-     * {@link VIEW_FLAGS_NONE} for the loop that reporting the initial contents
-     * as a change costs a caller who re-queries on one.
-     */
-    watch(from: Date, to: Date, onChange: (change: CalendarChange) => void, options?: {
-        calendars?: DesktopCalendarInfo[];
-    }): Promise<() => Promise<void>>;
-    /** Stop every view this instance started. Does **not** touch the bus. */
-    dispose(): Promise<void>;
-}
-//# sourceMappingURL=eds.d.ts.map

package/dist/desktop-calendar/eds.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"eds.d.ts","sourceRoot":"","sources":["../../src/desktop-calendar/eds.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AA2B5C,4CAA4C;AAC5C,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,mEAAmE;AACnE,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;IACV,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzD;AAED,6EAA6E;AAC7E,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,MAAM,EAAE,oBAAoB,EAAE,CAAC;CAChC;AAED,2EAA2E;AAC3E,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,IAAI,EAAE,cAAc,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAC5D,KAAK,EAAE,MAAM,CAAC;CACf;AAiBD;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,GACX,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAmBxC;AAkBD;;;;;;;;;;;;;GAaG;AACH,qBAAa,eAAe;;IAM1B,YAAY,GAAG,EAAE,UAAU,EAE1B;IAED,+DAA+D;IACzD,aAAa,IAAI,OAAO,CAAC,mBAAmB,EAAE,CAAC,CA6BpD;IAoDD;;;;;;;OAOG;IACG,aAAa,CACjB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,EACR,OAAO,GAAE;QAAE,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAA;KAAO,GAClD,OAAO,CAAC,YAAY,CAAC,CAoCvB;IAgFD;;;;;;;;;;;;OAYG;IACG,KAAK,CACT,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,EACR,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,EAC1C,OAAO,GAAE;QAAE,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAA;KAAO,GAClD,OAAO,CAAC,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC,CAgE9B;IAED,yEAAyE;IACnE,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CAY7B;CACF"}