@godxjp/ui 18.9.0 → 18.10.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/components/data-display/badge.d.ts

@@ -8,6 +8,13 @@ export type BadgeVariant = "default" | "secondary" | "outline" | "dashed";
  * for a SOLID brand fill use `variant="default"`.
  */
 export type BadgeTone = ToneProp | "primary";
+/**
+ * NO `text-xs` here (gh#260): a font-size utility lands in `@layer utilities`, which always beats
+ * the `@layer components` rule in badge-layout.css — making the documented `--badge-font-size`
+ * knob structurally inert. Font-size (and the line-height `text-xs` used to carry) are owned by
+ * badge-layout.css via `--badge-font-size` / `--badge-line-height`, whose defaults reproduce the
+ * old `text-xs` rendering exactly.
+ */
 declare const badgeVariants: (props?: ({
     variant?: "default" | "outline" | "dashed" | "secondary" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;

package/dist/components/data-display/badge.js

@@ -50,7 +50,7 @@ const STATUS_MAP = {
   ASSIGNMENT_STATUS_TERMINATED: { tone: "destructive", icon: XCircle }
 };
 const badgeVariants = cva(
-  "inline-flex items-center border text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
+  "inline-flex items-center border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
   {
     variants: {
       variant: {

package/dist/components/data-display/card.d.ts

@@ -3,21 +3,9 @@ import { type VariantProps } from "class-variance-authority";
 import type { LucideIcon } from "lucide-react";
 import type { HeadingLevelProp } from "../../props/vocabulary/index.js";
 type CardSize = "md" | "compact";
-/** Semantic accent tone. `accentPlacement` decides WHERE it is drawn — a leading-edge
- *  stripe (default) or the full perimeter. */
+/** Semantic leading-edge accent stripe (border-inline-start; width via the
+ *  --card-accent-rail-width token, default 6px). */
 type CardAccent = "primary" | "success" | "warning" | "info" | "attention" | "destructive";
-/**
- * Where the semantic `accent` tone is drawn.
- *
- * - `"edge"` (default) — the leading-edge stripe on `border-inline-start` only, at the
- *   `--card-accent-rail-width` measure (6px). The classic "this row needs a look" rail.
- * - `"perimeter"` — a full attention border around the WHOLE card in the same semantic
- *   tone, measured by `--card-accent-perimeter-width` + `--card-accent-perimeter-ring-width`.
- *   This is what `variant="featured"` does, except the tone is yours instead of `--primary`,
- *   so a card can shout "action required" (`accent="attention"`) or "this failed"
- *   (`accent="destructive"`) without borrowing the brand colour.
- */
-type CardAccentPlacement = "edge" | "perimeter";
 /** Surface fill — plain card, muted band, borderless outline, or emphasized featured ring. */
 type CardVariant = "default" | "muted" | "outline" | "featured";
 /** Padding density — base 16px · tight 12px · cozy 20px. */
@@ -28,11 +16,6 @@ declare const cardVariants: (props?: ({
 export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants> & {
     size?: CardSize;
     accent?: CardAccent;
-    /**
-     * Where `accent` is drawn — `"edge"` (default, the leading-edge stripe) or `"perimeter"`
-     * (a full attention border in the accent tone). Inert without `accent`.
-     */
-    accentPlacement?: CardAccentPlacement;
     variant?: CardVariant;
     density?: CardDensity;
 };
@@ -41,11 +24,6 @@ export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     size?: CardSize;
     accent?: CardAccent;
-    /**
-     * Where `accent` is drawn — `"edge"` (default, the leading-edge stripe) or `"perimeter"`
-     * (a full attention border in the accent tone). Inert without `accent`.
-     */
-    accentPlacement?: CardAccentPlacement;
     variant?: CardVariant;
     density?: CardDensity;
 } & React.RefAttributes<HTMLDivElement>>;
@@ -158,11 +136,9 @@ export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<
     inverse?: boolean;
     /** Semantic leading-edge rail (Card accent) — flags a KPI needing attention. */
     accent?: CardAccent;
-    /** Where `accent` is drawn — `"edge"` (default rail) or `"perimeter"` (full attention border). */
-    accentPlacement?: CardAccentPlacement;
 };
 /** KPI / stat tile — token-driven layout aligned to dashboard KPI cards. */
-export declare function StatCard({ label, value, hint, icon: Icon, delta, layout, align, inverse, accent, accentPlacement, className, size, ...props }: StatCardProps): React.JSX.Element;
+export declare function StatCard({ label, value, hint, icon: Icon, delta, layout, align, inverse, accent, className, size, ...props }: StatCardProps): React.JSX.Element;
 /** Header actions slot — pair with `CardHeader className="flex flex-row …"`. */
 export declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/data-display/card.js

@@ -12,7 +12,7 @@ const cardVariants = cva("group/card", {
   defaultVariants: { size: "md" }
 });
 const Card = React.forwardRef(
-  ({ className, size = "md", accent, accentPlacement, variant, density, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, size = "md", accent, variant, density, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -20,7 +20,6 @@ const Card = React.forwardRef(
       "data-slot": "card",
       "data-size": size === "compact" ? "compact" : void 0,
       "data-accent": accent,
-      "data-accent-placement": accentPlacement === "perimeter" ? "perimeter" : void 0,
       "data-variant": variant && variant !== "default" ? variant : void 0,
       "data-density": density,
       ...props
@@ -109,7 +108,6 @@ function StatCard({
   align = "start",
   inverse = false,
   accent,
-  accentPlacement,
   className,
   size = "compact",
   ...props
@@ -120,7 +118,6 @@ function StatCard({
     {
       size: size ?? "compact",
       accent,
-      accentPlacement,
       className: cn("ui-stat-card", className),
       "data-stat-card": "",
       "data-stat-layout": layout,

package/dist/components/data-display/data-table.js

@@ -442,7 +442,7 @@ DataTable.Content = function DataTableContent() {
     {
       className: cn("ui-data-table-scroll", hasPinEnd && "ui-data-table-has-pin-end"),
       "aria-busy": loading,
-      tabIndex: 0,
+      tabIndex: presetAttr ? void 0 : 0,
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -450,7 +450,7 @@ DataTable.Content = function DataTableContent() {
           "data-preset": presetAttr,
           "data-striped": striped ? "" : void 0,
           "data-hoverable": hoverable ? "" : void 0,
-          children: /* @__PURE__ */ jsxs(Table, { scrollable: false, preset, collapseBelow, children: [
+          children: /* @__PURE__ */ jsxs(Table, { scrollable: preset !== "default", preset, collapseBelow, children: [
             /* @__PURE__ */ jsx(TableHeader, { className: cn("bg-secondary", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs(TableRow, { children: [
               selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
               visibleColumns.map((col) => {
@@ -636,8 +636,9 @@ DataTable.Content = function DataTableContent() {
                         ),
                         children: col.render ? col.render(original) : (() => {
                           const v = original[col.key];
-                          const text = v == null || !(typeof v === "string" || typeof v === "number") ? "\u2014" : String(v);
-                          return /* @__PURE__ */ jsx("span", { "data-slot": "table-cell-text", children: text });
+                          if (v == null) return "\u2014";
+                          if (typeof v === "string" || typeof v === "number") return String(v);
+                          return "\u2014";
                         })()
                       },
                       col.key

package/dist/components/data-display/index.d.ts

@@ -31,3 +31,5 @@ export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./
 export { HoverCard, HoverCardTrigger, HoverCardContent } from "./hover-card.js";
 export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CarouselDots, useCarousel, } from "./carousel.js";
 export type { CarouselApi } from "./carousel.js";
+export { PermissionMatrix } from "./permission-matrix.js";
+export type { PermissionMatrixGrantsProp, PermissionMatrixPermissionProp, PermissionMatrixProp, PermissionMatrixProps, PermissionMatrixRoleProp, } from "./permission-matrix.js";

package/dist/components/data-display/index.js

@@ -49,6 +49,7 @@ import {
   CarouselDots,
   useCarousel
 } from "./carousel.js";
+import { PermissionMatrix } from "./permission-matrix.js";
 export {
   Accordion,
   AccordionContent,
@@ -84,6 +85,7 @@ export {
   HoverCardContent,
   HoverCardTrigger,
   ListRow,
+  PermissionMatrix,
   Popover,
   PopoverAnchor,
   PopoverContent,

package/dist/components/data-display/permission-matrix.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { PermissionMatrixProp } from "../../props/components/data-display.prop.js";
+export type { PermissionMatrixGrantsProp, PermissionMatrixPermissionProp, PermissionMatrixProp, PermissionMatrixProp as PermissionMatrixProps, PermissionMatrixRoleProp, } from "../../props/components/data-display.prop.js";
+/**
+ * PermissionMatrix — the canonical role × permission grid (gh#257 / DXS platform#311).
+ *
+ * Formalizes the `docs/showcase/permission-matrix` composition as a PACKAGE-OWNED export, for the
+ * same reason `ErrorSurface` became one (gh#251): a consumer cannot import a docs page, and every
+ * RBAC admin was about to re-derive the same sticky-column grid, ✓/— cell semantics and lifecycle
+ * states. The matrix stays THIN: all data logic lives in the already-tested
+ * `@godxjp/ui/lib/permission-grid` helpers, the table is the real Table family, and the states are
+ * the DataTable #216 vocabulary (`loading` → `denied` → `error` → `empty`, same precedence).
+ *
+ * - **Read-only by default.** Without `onGrantChange` (or with `readOnly`) cells are shape-encoded
+ *   ✓/— (icon + `sr-only` text, never colour alone). With `onGrantChange` the cells become real
+ *   `Checkbox` controls — except for roles marked `locked`, which keep the read-only cell and a
+ *   lock badge.
+ * - **Compare mode** (`compare` + `diffOnly`) reuses `lib/permission-grid` verbatim: compared
+ *   columns are tinted, differing rows carry a localized 差分 badge.
+ * - **Domain-neutral**: roles, permissions and grants all arrive via props; nothing about the
+ *   consuming platform is encoded.
+ * - **Responsive**: the grid scrolls horizontally inside its own container below its natural
+ *   measure (390px shows the sticky permission column + scrollable role columns); 1024/1440 render
+ *   the full grid.
+ */
+export declare const PermissionMatrix: React.ForwardRefExoticComponent<PermissionMatrixProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/permission-matrix.js

@@ -0,0 +1,219 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertCircle, Check, Lock, Minus, RefreshCw, ShieldAlert } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import {
+  grantKey,
+  hasGrant,
+  rolesDifferOnPermission,
+  visibleRows
+} from "../../lib/permission-grid.js";
+import { cn } from "../../lib/utils.js";
+import { Checkbox } from "../data-entry/checkbox.js";
+import { SkeletonTable } from "../feedback/skeleton.js";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { Badge } from "./badge.js";
+import { EmptyState } from "./empty-state.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+function toGrantSet(grants) {
+  if (grants instanceof Set) return grants;
+  return new Set(
+    grants.map(
+      (pair) => grantKey(pair.roleId, pair.permissionId)
+    )
+  );
+}
+const PIN_START = "sticky start-0 z-20 bg-inherit border-e border-border";
+const PermissionMatrix = React.forwardRef(
+  function PermissionMatrix2({
+    roles,
+    permissions,
+    grants,
+    onGrantChange,
+    readOnly = false,
+    compare = null,
+    diffOnly = false,
+    label,
+    loading = false,
+    empty,
+    error,
+    denied,
+    onRetry,
+    className,
+    id
+  }, ref) {
+    const { t } = useTranslation();
+    const grantSet = React.useMemo(() => toGrantSet(grants), [grants]);
+    const compareA = compare?.[0];
+    const compareB = compare?.[1];
+    const comparePair = React.useMemo(
+      () => compareA === void 0 || compareB === void 0 || compareA === compareB ? null : [compareA, compareB],
+      [compareA, compareB]
+    );
+    const compared = React.useMemo(() => new Set(comparePair ?? []), [comparePair]);
+    const rows = React.useMemo(
+      () => visibleRows(permissions, grantSet, {
+        compare: comparePair,
+        diffOnly: diffOnly && comparePair !== null
+      }),
+      [permissions, grantSet, comparePair, diffOnly]
+    );
+    const editable = typeof onGrantChange === "function" && !readOnly;
+    const isDenied = denied !== void 0 && denied !== null && denied !== false;
+    const isError = error !== void 0 && error !== null && error !== false;
+    const stateSurface = (state) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id,
+        "data-slot": "permission-matrix",
+        className: cn("ui-permission-matrix", className),
+        children: state
+      }
+    );
+    if (loading) {
+      return stateSurface(
+        /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": t("dataDisplay.permissionMatrix.loading"), role: "status", children: /* @__PURE__ */ jsx(SkeletonTable, { rows: 6, columns: Math.max(2, roles.length + 1) }) })
+      );
+    }
+    if (isDenied) {
+      return stateSurface(
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: denied === true ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: ShieldAlert,
+            tone: "warning",
+            variant: "section",
+            title: t("dataDisplay.permissionMatrix.denied"),
+            description: t("dataDisplay.permissionMatrix.deniedDescription"),
+            titleAs: "p"
+          }
+        ) : denied })
+      );
+    }
+    if (isError) {
+      return stateSurface(
+        /* @__PURE__ */ jsx("div", { role: "alert", children: error === true ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: AlertCircle,
+            tone: "destructive",
+            variant: "section",
+            title: t("dataDisplay.permissionMatrix.error"),
+            description: t("dataDisplay.permissionMatrix.errorDescription"),
+            titleAs: "p",
+            action: onRetry ? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
+              /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }),
+              t("common.retry")
+            ] }) : void 0
+          }
+        ) : error })
+      );
+    }
+    if (permissions.length === 0) {
+      return stateSurface(
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: empty ?? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            variant: "section",
+            title: t("dataDisplay.permissionMatrix.empty"),
+            titleAs: "p"
+          }
+        ) })
+      );
+    }
+    const accessibleName = typeof label === "string" ? label : t("dataDisplay.permissionMatrix.caption");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id,
+        "data-slot": "permission-matrix",
+        "data-editable": editable || void 0,
+        className: cn("ui-permission-matrix overflow-x-auto", className),
+        children: /* @__PURE__ */ jsxs(Table, { className: "min-w-[48rem]", "aria-label": accessibleName, children: [
+          /* @__PURE__ */ jsx(TableHeader, { className: "bg-secondary [&_tr]:bg-secondary", children: /* @__PURE__ */ jsxs(TableRow, { className: "bg-secondary hover:bg-secondary", children: [
+            /* @__PURE__ */ jsx(TableHead, { className: cn(PIN_START, "w-64 min-w-64"), children: t("dataDisplay.permissionMatrix.permissionColumn") }),
+            roles.map((role) => {
+              const isCompared = compared.has(role.id);
+              return /* @__PURE__ */ jsx(
+                TableHead,
+                {
+                  className: cn("text-center", isCompared && "bg-primary/[0.06]"),
+                  children: /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-col items-center leading-tight", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx(Text, { weight: "medium", children: role.name }),
+                      role.locked && /* @__PURE__ */ jsxs(Badge, { tone: "default", variant: "outline", children: [
+                        /* @__PURE__ */ jsx(Lock, { "aria-hidden": "true" }),
+                        t("dataDisplay.permissionMatrix.locked")
+                      ] })
+                    ] }),
+                    role.description !== void 0 && /* @__PURE__ */ jsx(Text, { size: "2xs", tone: "muted", children: role.description })
+                  ] })
+                },
+                role.id
+              );
+            })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: rows.map((permission) => {
+            const isDiffRow = comparePair !== null && rolesDifferOnPermission(grantSet, comparePair, permission.id);
+            return /* @__PURE__ */ jsxs(
+              TableRow,
+              {
+                className: cn(isDiffRow && "bg-warning/[0.07] hover:bg-warning/10"),
+                children: [
+                  /* @__PURE__ */ jsx(TableCell, { className: cn(PIN_START, "w-64 min-w-64 align-middle"), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col leading-tight", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx(Text, { weight: "medium", children: permission.name }),
+                      isDiffRow && /* @__PURE__ */ jsx(Badge, { tone: "warning", variant: "outline", children: t("dataDisplay.permissionMatrix.difference") })
+                    ] }),
+                    (permission.group !== void 0 || permission.description !== void 0) && /* @__PURE__ */ jsx(Text, { size: "2xs", tone: "muted", children: [permission.group, permission.description].filter((part) => part !== void 0).join(" \xB7 ") })
+                  ] }) }),
+                  roles.map((role) => {
+                    const granted = hasGrant(grantSet, role.id, permission.id);
+                    const isCompared = compared.has(role.id);
+                    const cellEditable = editable && !role.locked;
+                    return /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        className: cn(
+                          "text-center align-middle",
+                          isCompared && "bg-primary/[0.04]"
+                        ),
+                        children: cellEditable ? /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            checked: granted,
+                            onCheckedChange: (next) => onGrantChange?.(role.id, permission.id, next === true),
+                            "aria-label": t("dataDisplay.permissionMatrix.toggle", {
+                              role: role.name,
+                              permission: permission.name
+                            })
+                          }
+                        ) : granted ? /* @__PURE__ */ jsxs(Badge, { tone: "success", variant: "outline", className: "justify-center", children: [
+                          /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }),
+                          /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.permissionMatrix.granted") })
+                        ] }) : /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground inline-flex items-center justify-center", children: [
+                          /* @__PURE__ */ jsx(Minus, { "aria-hidden": "true", className: "size-4" }),
+                          /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.permissionMatrix.notGranted") })
+                        ] })
+                      },
+                      role.id
+                    );
+                  })
+                ]
+              },
+              permission.id
+            );
+          }) })
+        ] })
+      }
+    );
+  }
+);
+PermissionMatrix.displayName = "PermissionMatrix";
+export {
+  PermissionMatrix
+};

package/dist/components/data-display/table.d.ts

@@ -18,6 +18,12 @@ export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
      * of forcing a horizontal scroll. Mark each column with `priority` on its `TableHead`/`TableCell`.
      * The table keeps its real semantics: no `display` change, no role rewriting, no card swap, so
      * header association, `aria-sort` and screen-reader table navigation are identical at every width.
+     *
+     * Column-count ceiling (gh#262): the wrap-instead-of-scroll contract holds up to SIX columns.
+     * From seven, the priority shares cannot fit a phone frame, so below the step each column takes
+     * its rem floor (`--table-action-collection-*-width-floor`, ~5 CJK glyphs per line) and the
+     * table intentionally scrolls inside this wrapper — SC 1.4.10 permits one-dimensional scrolling
+     * of a data table; compressing further would shred CJK headers one character per line.
      */
     preset?: TablePresetProp;
     /**
@@ -45,6 +51,12 @@ export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes
      * of forcing a horizontal scroll. Mark each column with `priority` on its `TableHead`/`TableCell`.
      * The table keeps its real semantics: no `display` change, no role rewriting, no card swap, so
      * header association, `aria-sort` and screen-reader table navigation are identical at every width.
+     *
+     * Column-count ceiling (gh#262): the wrap-instead-of-scroll contract holds up to SIX columns.
+     * From seven, the priority shares cannot fit a phone frame, so below the step each column takes
+     * its rem floor (`--table-action-collection-*-width-floor`, ~5 CJK glyphs per line) and the
+     * table intentionally scrolls inside this wrapper — SC 1.4.10 permits one-dimensional scrolling
+     * of a data table; compressing further would shred CJK headers one character per line.
      */
     preset?: TablePresetProp;
     /**