@godxjp/ui 31.4.0 → 31.6.0

package/dist/props/registry.js

@@ -302,10 +302,20 @@ const VOCABULARY_REGISTRY = {
     category: "data",
     description: "One entry in the selection-column dropdown \u2014 { key, text, onSelect } (antd SelectionItem)"
   },
+  TableSelectionBuiltInProp: {
+    file: "vocabulary/data.prop.ts",
+    category: "data",
+    description: "Built-in selections entry \u2014 SELECT_ALL | SELECT_INVERT | SELECT_NONE (antd Table.SELECTION_ALL / SELECTION_INVERT / SELECTION_NONE, published as DataTable.SELECTION_*)"
+  },
+  TableSelectAllMatchingProp: {
+    file: "vocabulary/data.prop.ts",
+    category: "data",
+    description: "Server-paged 'select all N matching' banner \u2014 { total, selected, onSelectedChange } (no antd equivalent; Gmail/Jira/GitHub pattern)"
+  },
   TableRowSelectionProp: {
     file: "vocabulary/data.prop.ts",
     category: "data",
-    description: "DataTable row-selection config \u2014 type | selectedRowKeys | onChange | getCheckboxProps | preserveSelectedRowKeys | selections | hideSelectAll | columnTitle (antd TableRowSelection)"
+    description: "DataTable row-selection config \u2014 type | selectedRowKeys | onChange | getCheckboxProps | preserveSelectedRowKeys | selections | hideSelectAll | columnTitle | selectAllLabel | matching (antd TableRowSelection + select-all-matching)"
   },
   TableExpandableProp: {
     file: "vocabulary/data.prop.ts",
@@ -2146,7 +2156,16 @@ const COMPONENT_PROP_REGISTRY = {
   RecordPickerProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
-    vocabulary: ["ValueProp", "OnValueChangeProp", "DisabledProp", "SizeProp", "PlaceholderProp"],
+    vocabulary: [
+      "ValueProp",
+      "OnValueChangeProp",
+      "DisabledProp",
+      "SizeProp",
+      "PlaceholderProp",
+      // gh#1044: antd `notFoundContent` for the empty search, and the dialog's load-more text.
+      "NotFoundContentProp",
+      "LabelProp"
+    ],
     note: "One picker whose SHAPE follows the size of the set: Select at or under `threshold`, a searchable Dialog with consumer-declared filters over it (gh#932)."
   },
   RecordPickerFilterProp: {
@@ -2262,7 +2281,15 @@ const COMPONENT_PROP_REGISTRY = {
   TransferProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
-    vocabulary: ["DisabledProp", "ClassNameProp"]
+    vocabulary: [
+      "DisabledProp",
+      "ClassNameProp",
+      {
+        field: "locale",
+        local: true,
+        reason: "antd Transfer `locale`, ported for `notFoundContent` only (one node, or a [source, target] pair) \u2014 gh#1044."
+      }
+    ]
   },
   TransferItemProp: {
     group: "data-entry",
@@ -2350,6 +2377,8 @@ const COMPONENT_PROP_REGISTRY = {
       "ColumnFilterStateProp",
       "ColumnSorterProp",
       "TableRowSelectionProp",
+      "TableSelectionBuiltInProp",
+      "TableSelectAllMatchingProp",
       "TableExpandableProp",
       "TableSummaryProp",
       "TableScrollProp",
@@ -2830,7 +2859,8 @@ const COMPONENT_PROP_REGISTRY = {
   InfiniteQueryStateProp: {
     group: "query",
     file: "components/query.prop.ts",
-    vocabulary: ["HandlerProp"]
+    // LabelProp: `loadMoreLabel`, the built-in button's idle text (gh#1044).
+    vocabulary: ["HandlerProp", "LabelProp"]
   },
   PrefetchLinkProp: { group: "query", file: "components/query.prop.ts", vocabulary: [] },
   AuthExpiryProviderProp: {
@@ -3905,6 +3935,11 @@ const COMPONENT_PROP_REGISTRY = {
         local: true,
         reason: "An endpoint movement command, not an internally owned value; the consumer commits its row data."
       },
+      {
+        field: "sticky",
+        local: true,
+        reason: "antd Table `sticky` \u2014 `true` or `{ offsetHeader }` (px) keeps the axis header on screen while the page scrolls (gh#1044)."
+      },
       {
         field: "expandedValues",
         local: true,
@@ -4144,6 +4179,8 @@ const COMPONENT_PROP_REGISTRY = {
         local: true,
         reason: "Custom empty content when there are no branches."
       },
+      // gh#1044: antd `notFoundContent` — the line shown when the branch SEARCH matches nothing.
+      "NotFoundContentProp",
       {
         field: "listError",
         local: true,
@@ -4764,6 +4801,55 @@ const COMPONENT_PROP_REGISTRY = {
       "IdProp",
       "ClassNameProp"
     ]
+  },
+  OrgChartNodeVariantProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: ["ControlVariantProp"]
+  },
+  OrgChartNodeProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "TitleProp",
+      "ExtraProp",
+      "ControlVariantProp",
+      { field: "key", local: true, reason: "The node's identity, unique across the chart." },
+      {
+        field: "name",
+        local: true,
+        reason: "The person's or agent's display name (a ReactNode), not a form field `name` \u2014 NameProp is the submitted-field key."
+      },
+      {
+        field: "avatar",
+        local: true,
+        reason: "The mark at the box's inline start, usually an <Avatar>. Decorative."
+      },
+      {
+        field: "children",
+        local: true,
+        reason: "The node's own reports \u2014 the hierarchy itself, not a slot."
+      }
+    ]
+  },
+  OrgChartProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "ClassNameProp",
+      "IdProp",
+      {
+        field: "data",
+        local: true,
+        reason: "The hierarchy of OrgChartNodeProp \u2014 the same shape feeds the boxes and the narrow Tree."
+      },
+      {
+        field: "renderNode",
+        local: true,
+        reason: "Escape hatch replacing a box's content; the box, connectors and keyboard stay the library's."
+      }
+    ]
   }
 };
 const PROP_ALIASES_FORBIDDEN = {

package/dist/props/vocabulary/data.prop.d.ts

@@ -207,6 +207,25 @@ export type TableSelectionItemProp = {
     text: React.ReactNode;
     onSelect: (currentRowKeys: string[]) => void;
 };
+/**
+ * A built-in entry for the `selections` list (antd `Table.SELECTION_ALL` / `SELECTION_INVERT` /
+ * `SELECTION_NONE`, published here as `DataTable.SELECTION_*`). Mix them with custom
+ * {@link TableSelectionItemProp} entries in any order, exactly as antd does.
+ */
+export type TableSelectionBuiltInProp = "SELECT_ALL" | "SELECT_INVERT" | "SELECT_NONE";
+/**
+ * "Select all N matching" for a server-paged table (Gmail / Jira / GitHub; antd has no
+ * equivalent). Once every row of the page is selected, a banner above the header offers the whole
+ * result set; choosing it flips `selected`, and the consumer then sends its FILTER to the server
+ * instead of the ids. Unticking any row, or "Clear selection", reports `false`.
+ */
+export type TableSelectAllMatchingProp = {
+    /** Rows the current query matches on the server — the N in "Select all N". */
+    total: number;
+    /** Controlled: `true` while the whole matching set is selected. */
+    selected: boolean;
+    onSelectedChange: (selected: boolean) => void;
+};
 /**
  * Row-selection configuration (antd `TableRowSelection`). The object form is the full surface;
  * the older `selectable` / `selected` / `onSelectChange` triple stays and drives the same state.
@@ -224,10 +243,21 @@ export type TableRowSelectionProp<T> = {
     };
     /** Keep keys selected even once their row leaves `data` (server paging / filtering). */
     preserveSelectedRowKeys?: boolean;
-    /** Extra bulk-select entries under the header checkbox. `true` = the built-in all/none/invert. */
-    selections?: TableSelectionItemProp[] | boolean;
+    /**
+     * Extra bulk-select entries under the header checkbox. `true` = the built-in all/invert/none;
+     * a list mixes `DataTable.SELECTION_*` built-ins with custom entries, in the order given.
+     */
+    selections?: (TableSelectionItemProp | TableSelectionBuiltInProp)[] | boolean;
     hideSelectAll?: boolean;
     columnTitle?: React.ReactNode;
+    /**
+     * Accessible name of the header checkbox. Default: "Select all rows", or "Select all rows on
+     * this page" once `matching` is set. Name what it really selects — on a server-paged table it
+     * is the page, not the result set.
+     */
+    selectAllLabel?: string;
+    /** Opt-in "select all N matching" banner for a server-paged table. */
+    matching?: TableSelectAllMatchingProp;
 };
 /** Expandable-row configuration (antd/rc-table `ExpandableConfig`). */
 export type TableExpandableProp<T> = {

package/dist/props/vocabulary/index.d.ts

@@ -4,4 +4,4 @@ export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, F
 export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TableDensityProp, DensityProp, GapNameProp, PadProp, PadRawProp, PadSides, GapProp, GapStepProp, } from "./layout.prop.js";
 export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, TextBreakProp, TypographyTypeProp, TitleLevelProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, CalloutKindProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, RevealTriggerProp, InViewAmountProp, ActivityVariantProp, ActivityAnnounceProp, IconSizeProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbItemMenuProp, BreadcrumbItemMenuEntryProp, BreadcrumbSeparatorProp, BreadcrumbItemRenderProp, } from "./navigation.prop.js";
-export type { GetRowIdProp, GetRowLabelProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, TableRowToneProp, RowToneProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, ColumnFixedProp, ColumnFilterValueProp, ColumnFilterItemProp, ColumnFilterStateProp, OnColumnFilterChangeProp, ColumnCompareProp, ColumnSorterProp, TableSelectionItemProp, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, TablePaginationPositionProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";
+export type { GetRowIdProp, GetRowLabelProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, TableRowToneProp, RowToneProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, ColumnFixedProp, ColumnFilterValueProp, ColumnFilterItemProp, ColumnFilterStateProp, OnColumnFilterChangeProp, ColumnCompareProp, ColumnSorterProp, TableSelectionItemProp, TableSelectionBuiltInProp, TableSelectAllMatchingProp, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, TablePaginationPositionProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";

package/dist/styles/data-display-layout.css

@@ -1120,6 +1120,37 @@
     max-block-size: var(--code-block-max-height-lg);
   }
 
+  .ui-code-block-frame {
+    position: relative;
+    min-inline-size: 0;
+  }
+
+  .ui-code-block[data-copyable] {
+    padding-inline-end: calc(var(--code-block-space-inset) + var(--control-height-xs));
+  }
+
+  .ui-code-block[data-copyable][data-wrap="false"] {
+    padding-inline-end: var(--code-block-space-inset);
+    border-inline-end: calc(var(--control-height-xs) + 2 * var(--space-1)) solid transparent;
+  }
+
+  .ui-code-block-copy {
+    position: absolute;
+    inset-block-start: var(--space-1);
+    inset-inline-end: var(--space-1);
+  }
+
+  @media (pointer: coarse) {
+    .ui-code-block[data-copyable] {
+      padding-inline-end: calc(var(--code-block-space-inset) + var(--control-height-default));
+    }
+
+    .ui-code-block[data-copyable][data-wrap="false"] {
+      padding-inline-end: var(--code-block-space-inset);
+      border-inline-end-width: calc(var(--control-height-default) + 2 * var(--space-1));
+    }
+  }
+
   .ui-code-block [data-code-token="comment"],
   .ui-prose pre [data-code-token="comment"] {
     color: var(--code-block-token-comment-color, hsl(var(--muted-foreground)));
@@ -1524,6 +1555,20 @@
     border: var(--stroke-hairline) solid hsl(var(--range-timeline-border-color));
     border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
   }
+
+  .ui-range-timeline[data-sticky="true"] {
+    overflow: clip;
+  }
+  .ui-range-timeline-sticky-header {
+    position: sticky;
+    inset-block-start: var(--range-timeline-sticky-offset, 0px);
+    z-index: 2;
+    overflow: hidden;
+  }
+  .ui-range-timeline-scroller {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
   .ui-range-timeline-canvas {
     min-inline-size: calc(
       var(--range-timeline-label-width) + var(--range-timeline-columns, 1) *
@@ -2150,6 +2195,34 @@
     border-block-start-color: transparent;
   }
 
+  .ui-tree-node[data-filter-node="true"]:not([data-disabled]) .ui-tree-label {
+    color: var(--tree-node-filter-foreground, hsl(var(--text-brand, var(--primary))));
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-tree[data-virtual="true"][data-show-line="true"] .ui-tree-node {
+    position: relative;
+  }
+
+  .ui-tree-rail {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(
+      var(--tree-node-padding-inline) + (var(--tree-rail-level, 1) - 1) * var(--tree-indent-width) +
+        var(--tree-switcher-size) / 2
+    );
+    border-inline-start: var(--stroke-hairline) solid var(--tree-line-color, hsl(var(--border)));
+  }
+
+  .ui-tree-spacer {
+    flex: none;
+  }
+
+  .ui-tree[data-virtual="true"][data-divided="true"]
+    > .ui-tree-node[aria-level="1"][aria-posinset="1"] {
+    border-block-start-color: transparent;
+  }
+
   .ui-tree-loading {
     display: flex;
     align-items: center;
@@ -2430,3 +2503,155 @@
     flex-direction: column;
   }
 }
+
+@layer components {
+
+  .ui-org-chart {
+    min-inline-size: 0;
+    container: org-chart / inline-size;
+  }
+
+  .ui-org-chart-scroll {
+    overflow-x: auto;
+    padding: var(--org-chart-padding);
+  }
+
+  .ui-org-chart-tree,
+  .ui-org-chart-children {
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ui-org-chart-tree {
+    inline-size: max-content;
+    min-inline-size: 100%;
+  }
+
+  .ui-org-chart-branch {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-inline: calc(var(--org-chart-sibling-gap) / 2);
+  }
+
+  .ui-org-chart-children {
+    position: relative;
+    padding-block-start: calc(var(--org-chart-level-gap) / 2);
+  }
+
+  .ui-org-chart-children::before,
+  .ui-org-chart-children > .ui-org-chart-branch::before,
+  .ui-org-chart-children > .ui-org-chart-branch::after {
+    position: absolute;
+    box-sizing: border-box;
+    inset-block-start: 0;
+    block-size: calc(var(--org-chart-level-gap) / 2);
+    border: 0 solid var(--org-chart-line-color, hsl(var(--border)));
+    content: "";
+  }
+
+  .ui-org-chart-children::before {
+    inset-inline-start: calc(50% - var(--org-chart-line-width, var(--stroke-hairline)) / 2);
+    border-inline-start-width: var(--org-chart-line-width, var(--stroke-hairline));
+  }
+
+  .ui-org-chart-children > .ui-org-chart-branch {
+    padding-block-start: calc(var(--org-chart-level-gap) / 2);
+  }
+
+  .ui-org-chart-children > .ui-org-chart-branch::before {
+    inset-inline: 0 50%;
+    border-block-start-width: var(--org-chart-line-width, var(--stroke-hairline));
+  }
+
+  .ui-org-chart-children > .ui-org-chart-branch::after {
+    inset-inline: calc(50% - var(--org-chart-line-width, var(--stroke-hairline)) / 2) 0;
+    border-block-start-width: var(--org-chart-line-width, var(--stroke-hairline));
+    border-inline-start-width: var(--org-chart-line-width, var(--stroke-hairline));
+  }
+
+  .ui-org-chart-children > .ui-org-chart-branch:first-child::before,
+  .ui-org-chart-children > .ui-org-chart-branch:last-child::after {
+    border-block-start-width: 0;
+  }
+
+  .ui-org-chart-node {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    inline-size: var(--org-chart-node-inline-size);
+    align-items: flex-start;
+    gap: var(--org-chart-node-gap);
+    padding-block: var(--org-chart-node-padding-block);
+    padding-inline: var(--org-chart-node-padding-inline);
+    border: var(--org-chart-node-border-width, var(--stroke-hairline)) solid
+      var(--org-chart-node-border-color, hsl(var(--border)));
+    border-radius: var(--org-chart-node-radius, var(--radius));
+    background: var(--org-chart-node-background, hsl(var(--card)));
+    color: var(--org-chart-node-foreground, hsl(var(--card-foreground)));
+    font-size: var(--org-chart-node-font-size);
+    text-align: start;
+  }
+
+  .ui-org-chart-node[data-variant="agent"] {
+    border-style: var(--org-chart-agent-border-style);
+  }
+
+  .ui-org-chart-avatar {
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
+  .ui-org-chart-text {
+    display: flex;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--org-chart-node-text-gap);
+  }
+
+  .ui-org-chart-name {
+    font-weight: var(--font-weight-medium);
+    overflow-wrap: anywhere;
+  }
+
+  .ui-org-chart-title {
+    color: var(--org-chart-node-title-color, hsl(var(--muted-foreground)));
+    overflow-wrap: anywhere;
+  }
+
+  .ui-org-chart-extra {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--org-chart-node-text-gap);
+  }
+
+  .ui-org-chart-list {
+    display: none;
+  }
+
+  .ui-org-chart-list-row {
+    display: inline-flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--org-chart-node-gap);
+  }
+
+  .ui-org-chart-list-row .ui-org-chart-extra {
+    display: inline-flex;
+  }
+
+  @container org-chart (width < 40rem) {
+    .ui-org-chart-scroll {
+      display: none;
+    }
+
+    .ui-org-chart-list {
+      display: block;
+    }
+  }
+}

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.4.0",
+  "version": "31.6.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -349,6 +349,9 @@
     },
     "CodeBlock": {
       "layers": [
+        "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "data-display-layout.css"
       ]
     },
@@ -673,6 +676,16 @@
         "control.css"
       ]
     },
+    "OrgChart": {
+      "layers": [
+        "layout.css",
+        "control.css",
+        "table-layout.css",
+        "alert-layout.css",
+        "data-display-layout.css",
+        "form-layout.css"
+      ]
+    },
     "OrgSwitcher": {
       "layers": [
         "shell-layout.css",

package/dist/styles/table-layout.css

@@ -187,7 +187,9 @@
     padding: 0;
   }
 
-  .ui-table-row:has(> [data-slot="table-cell"][data-flush] > [data-slot="list-row"][data-unread]) {
+  .ui-table-row:not([data-state="selected"]):has(
+      > [data-slot="table-cell"][data-flush] > [data-slot="list-row"][data-unread]
+    ) {
     background-color: var(--list-row-unread-background, hsl(var(--muted)));
   }
 
@@ -554,6 +556,19 @@
     gap: var(--table-selection-menu-gap);
   }
 
+  .ui-data-table-matching[data-active] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-inline-sm);
+    padding-block: var(--space-stack-xs);
+    padding-inline: var(--table-cell-space-x, var(--space-section-active));
+    border-block-end: var(--stroke-hairline) solid var(--table-border-color, hsl(var(--border)));
+    background-color: hsl(var(--muted));
+    font-size: var(--font-size-sm);
+  }
+
   .ui-data-table-surface .ui-table-bordered {
     border-width: 0;
   }

package/dist/tokens/base.css

@@ -38,6 +38,7 @@
 @import "./components/text.css";
 @import "./components/tree.css";
 @import "./components/thought-chain.css";
+@import "./components/org-chart.css";
 @import "./components/welcome.css";
 @import "./components/actions.css";
 @import "./components/attachments.css";

package/dist/tokens/components/org-chart.css

@@ -0,0 +1,27 @@
+
+
+:root {
+
+  --org-chart-node-inline-size: 13rem;
+  --org-chart-node-padding-block: var(--space-3);
+  --org-chart-node-padding-inline: var(--space-3);
+  --org-chart-node-gap: var(--space-3);
+  --org-chart-node-text-gap: var(--space-1);
+  --org-chart-node-radius: initial;
+  --org-chart-node-border-width: initial;
+  --org-chart-node-border-color: initial;
+  --org-chart-node-background: initial;
+  --org-chart-node-foreground: initial;
+  --org-chart-node-title-color: initial;
+  --org-chart-node-font-size: var(--font-size-sm, var(--font-size-base));
+
+  --org-chart-agent-border-style: dashed;
+
+  --org-chart-level-gap: var(--space-8);
+  --org-chart-sibling-gap: var(--space-4);
+
+  --org-chart-line-width: initial;
+  --org-chart-line-color: initial;
+
+  --org-chart-padding: var(--space-2);
+}

package/dist/tokens/components/tree.css

@@ -27,5 +27,7 @@
   --tree-node-selected-background-alpha: initial;
   --tree-node-selected-foreground: initial;
 
+  --tree-node-filter-foreground: initial;
+
   --tree-loading-bar-inline-size: 40%;
 }

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **176**
-- With ≥1 frame: **152** · zero-frame: **24**
+- Public components: **177**
+- With ≥1 frame: **153** · zero-frame: **24**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -211,6 +211,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Welcome | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Actions | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | ThoughtChain | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| OrgChart | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Attachments | ✓ | N/A | · | N/A | · | · | · | · | · | · |
 | Marquee | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Masonry | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |

package/docs/data-display/code-block.tsx

@@ -84,6 +84,33 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Copyable (gh#1032)</CardTitle>
+            <CardDescription>
+              antd Typography&apos;s copyable, same name and semantics. The button sits in the
+              inline-end corner, the block reserves that column so no line runs under it, and the
+              copy is announced politely. Pass copyable.text to copy something other than the
+              block&apos;s text content; the button stays in its corner while the block scrolls.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <CodeBlock copyable language="bash" aria-label="Install command">
+                pnpm add @godxjp/ui
+              </CodeBlock>
+              <CodeBlock
+                copyable={{ tooltips: ["Copy response", "Copied"] }}
+                maxHeight="sm"
+                language="json"
+                aria-label="Response body with a copy button"
+              >
+                {responseBody}
+              </CodeBlock>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Syntax colour · the package owns the palette (gh#784)</CardTitle>

package/docs/data-display/data-table/examples/server-paged.tsx

@@ -26,6 +26,10 @@ import { Download, FileText, LayoutDashboard, Plus, ReceiptText } from "lucide-r
  * showTotal, onChange }}` — the real Pagination, total beside the page numbers, bottom-end. The
  * table is compact, so the pager is `size="sm"` and sits on the same control step as the toolbar
  * buttons above it. `data` is only the current page; the footer offers ceil(total / pageSize).
+ *
+ * Selection on a server-paged list (gh#1036): the header checkbox ticks THIS PAGE, and says so.
+ * Once the page is fully ticked, `rowSelection.matching` offers every matching row; while that is
+ * chosen the bulk action sends the query's filter to the server instead of a list of ids.
  */
 const sections: SidebarSectionProp[] = [
   {
@@ -86,6 +90,8 @@ export default function Demo() {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const rows = useMemo(() => fetchPage(page, pageSize), [page, pageSize]);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const [allMatching, setAllMatching] = useState(false);
 
   return (
     <AppShell
@@ -126,6 +132,17 @@ export default function Demo() {
               data={rows}
               columns={columns}
               getRowId={(row) => row.id}
+              rowSelection={{
+                selectedRowKeys: selectedKeys,
+                onChange: (keys) => {
+                  setSelectedKeys(keys);
+                },
+                matching: {
+                  total: SERVER_TOTAL,
+                  selected: allMatching,
+                  onSelectedChange: setAllMatching,
+                },
+              }}
               pagination={{
                 total: SERVER_TOTAL,
                 current: page,
@@ -144,6 +161,12 @@ export default function Demo() {
                     <Download />
                     エクスポート
                   </Button>
+                  {/* While "all matching" is chosen the count is the server's, not the page's. */}
+                  <DataTable.BulkActions count={allMatching ? SERVER_TOTAL : undefined}>
+                    <Button size="sm" variant="outline">
+                      Mark as paid
+                    </Button>
+                  </DataTable.BulkActions>
                 </Flex>
                 <DataTable.ViewOptions />
               </DataTable.Toolbar>

package/docs/data-display/data-table/index.md

@@ -5,3 +5,5 @@ The admin list primitive — sticky header, sorting, bulk selection, density tog
 See the "Approval queue" example.
 
 See the "Selectable inbox" example for a `ListRow` hosted in a selectable DataTable: mark that column `flush: true` so the cell drops its own padding and the ListRow owns the inset (gh#1016).
+
+See the "Server paged" example for selection on a server-paged list (gh#1036). `rowSelection.selectAllLabel` names the header checkbox; `rowSelection.matching={{ total, selected, onSelectedChange }}` adds the "Select all N matching rows" banner once the page is fully ticked. antd has no equivalent of `matching` — it is the Gmail / Jira / GitHub pattern, and the one deliberate deviation from antd's `rowSelection` here. While `selected` is true every row of any page shows ticked; send the query's filter to the server instead of the ids. Unticking a row or "Clear selection" reports `false`. `selections` also takes antd's `DataTable.SELECTION_ALL` / `SELECTION_INVERT` / `SELECTION_NONE` mixed with custom entries.