@godxjp/ui 18.1.1 → 18.3.0

package/README.md

@@ -70,7 +70,7 @@ Components emit `data-slot` / `data-*`; the look lives in `styles/*-layout.css`.
 | **Layout**         | `@godxjp/ui/layout`       | `Flex`, `PageContainer`, `ResponsiveGrid`, `AppShell`, `Sidebar`, `Separator`, `AspectRatio`, `Resizable`                                                                                                                               |
 | **General**        | `@godxjp/ui/general`      | `Button`                                                                                                                                                                                                                                |
 | **Data Entry**     | `@godxjp/ui/data-entry`   | `Input`, `Select`, `FormField`, `Field`, `DatePicker`, `TimePicker`, `Combobox`, `Switch`, `Toggle`, `Upload`, `Cascader`, `TreeSelect`, `ColorPicker`, `Slider`, `PasswordInput`, `PasswordStrength`, `InputOTP`, `Rating`, `TagInput` |
-| **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                                                       |
+| **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `QrCode`, `CredentialReveal`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                                  |
 | **Feedback**       | `@godxjp/ui/feedback`     | `Dialog`, `AlertDialog`, `Sheet` (side), `Drawer` (bottom-sheet), `Toast`, `Skeleton`, `Alert`, `Tooltip`                                                                                                                               |
 | **Query**          | `@godxjp/ui/query`        | `DataState`, `InfiniteQueryState`, `PrefetchLink` (adapter subpath — pulls TanStack Query)                                                                                                                                              |
 | **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar`, `DropdownMenu`, `ContextMenu`, `Menubar`, `NavigationMenu`, `Steps`, `Pagination`, `Breadcrumb`, `AppSettingPicker`                                                                                                  |

package/dist/components/data-display/credential-reveal.d.ts

@@ -0,0 +1,2 @@
+export { CredentialReveal } from "../ui/credential-reveal.js";
+export type { CredentialRevealProp, CredentialRevealProps, CredentialRevealTone, } from "../ui/credential-reveal.js";

package/dist/components/data-display/credential-reveal.js

@@ -0,0 +1,5 @@
+"use client";
+import { CredentialReveal } from "../ui/credential-reveal.js";
+export {
+  CredentialReveal
+};

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

@@ -2,6 +2,11 @@ export { Badge } from "./badge.js";
 export type { BadgeProps } from "./badge.js";
 export { ListRow } from "./list-row.js";
 export type { ListRowProps } from "./list-row.js";
+export { CredentialReveal } from "./credential-reveal.js";
+export type { CredentialRevealProp, CredentialRevealProps, CredentialRevealTone, } from "./credential-reveal.js";
+export { QrCode } from "./qr-code.js";
+export type { QrCodeProps } from "./qr-code.js";
+export type { QrCodeProp } from "../../props/components/data-display.prop.js";
 export { Avatar, AvatarImage, AvatarFallback } from "./avatar.js";
 export { Card, CardBar, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, CardAction, StatCard, } from "./card.js";
 export type { StatCardProps, CardBarProps } from "./card.js";

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

@@ -1,5 +1,7 @@
 import { Badge } from "./badge.js";
 import { ListRow } from "./list-row.js";
+import { CredentialReveal } from "./credential-reveal.js";
+import { QrCode } from "./qr-code.js";
 import { Avatar, AvatarImage, AvatarFallback } from "./avatar.js";
 import {
   Card,
@@ -69,6 +71,7 @@ export {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
+  CredentialReveal,
   DataTable,
   Descriptions,
   EmptyState,
@@ -84,6 +87,7 @@ export {
   PopoverTitle,
   PopoverTrigger,
   Progress,
+  QrCode,
   ScrollArea,
   ScrollBar,
   StatCard,

package/dist/components/data-display/qr-code.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { QrCodeProp } from "../../props/components/data-display.prop.js";
+export type QrCodeProps = QrCodeProp & Omit<React.ComponentPropsWithoutRef<"svg">, keyof QrCodeProp | "children" | "role" | "style" | "type">;
+/**
+ * Renders a QR code entirely in-process. The encoded value is never sent to a network service,
+ * written to an element attribute, or included in accessible text.
+ */
+export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProp & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "style" | "children" | "role" | "type" | keyof QrCodeProp> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/data-display/qr-code.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { QRCodeSVG } from "qrcode.react";
+import { cn } from "../../lib/utils.js";
+const QR_INTRINSIC_SIZE = 256;
+const QrCode = React.forwardRef(
+  ({ value, label, size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      QRCodeSVG,
+      {
+        ref,
+        ...props,
+        value,
+        title: label,
+        size: QR_INTRINSIC_SIZE,
+        level: "M",
+        boostLevel: true,
+        marginSize: 4,
+        bgColor: "hsl(var(--qr-code-background))",
+        fgColor: "hsl(var(--qr-code-foreground))",
+        role: "img",
+        "aria-label": label,
+        focusable: "false",
+        "data-slot": "qr-code",
+        "data-size": size,
+        className: cn("ui-qr-code", className)
+      }
+    );
+  }
+);
+QrCode.displayName = "QrCode";
+export {
+  QrCode
+};

package/dist/components/feedback/dialog.d.ts

@@ -57,8 +57,15 @@ declare const DialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrim
 declare const DialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-/** Preset: confirm / destructive / type-to-confirm without compound markup. */
-declare function AlertDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, confirmPhrase, onConfirm, keepOpenOnConfirm, pending, }: AlertDialogProp): React.JSX.Element;
+/**
+ * Preset: confirm / destructive / typed-challenge / step-up without compound markup.
+ *
+ * High-stakes deletion recipe ("DangerConfirm", godxui#193): pass `challenge` (or `confirmPhrase`)
+ * to gate the confirm button behind an exact typed match (org slug / resource name), and `stepUp`
+ * for an async re-auth gate (passkey / 2FA) that must resolve truthy before `onConfirm` fires.
+ * Both flows force the destructive tone (button + soft header band).
+ */
+declare function AlertDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, confirmPhrase, challenge, onConfirm, stepUp, keepOpenOnConfirm, pending, }: AlertDialogProp): React.JSX.Element;
 export declare const Dialog: typeof DialogRoot & {
     Trigger: typeof DialogTrigger;
     Portal: typeof DialogPortal;

package/dist/components/feedback/dialog.js

@@ -241,25 +241,54 @@ function AlertDialog({
   cancelLabel,
   variant = "default",
   confirmPhrase,
+  challenge,
   onConfirm,
+  stepUp,
   keepOpenOnConfirm = false,
   pending = false
 }) {
   const { t } = useTranslation();
   const [typed, setTyped] = React.useState("");
+  const [verifying, setVerifying] = React.useState(false);
+  const [stepUpFailed, setStepUpFailed] = React.useState(false);
   const inputId = React.useId();
-  const needsPhrase = confirmPhrase != null && confirmPhrase.length > 0;
-  const phraseMatches = !needsPhrase || typed === confirmPhrase;
+  const stepErrorId = React.useId();
+  const phrase = confirmPhrase ?? challenge;
+  const needsPhrase = phrase != null && phrase.length > 0;
+  const phraseMatches = !needsPhrase || typed === phrase;
   const effectiveVariant = needsPhrase ? "destructive" : variant;
+  const headerTone = effectiveVariant === "destructive" ? "destructive" : "default";
   const resolvedConfirm = confirmLabel ?? (needsPhrase ? t("common.delete") : t("common.continue"));
   const resolvedCancel = cancelLabel ?? t("common.cancel");
-  const handleOpenChange = (next) => {
+  const busy = pending || verifying;
+  const confirmLabelText = verifying ? t("feedback.alert.verifying") : pending ? t("common.working") : resolvedConfirm;
+  const reset = () => {
     setTyped("");
+    setVerifying(false);
+    setStepUpFailed(false);
+  };
+  const handleOpenChange = (next) => {
+    reset();
     onOpenChange(next);
   };
   const handleConfirm = () => {
-    if (!phraseMatches) return;
+    if (!phraseMatches || busy) return;
     void (async () => {
+      if (stepUp) {
+        setStepUpFailed(false);
+        setVerifying(true);
+        let ok = false;
+        try {
+          ok = await stepUp();
+        } catch {
+          ok = false;
+        }
+        setVerifying(false);
+        if (!ok) {
+          setStepUpFailed(true);
+          return;
+        }
+      }
       await onConfirm();
       if (!keepOpenOnConfirm) onOpenChange(false);
     })();
@@ -278,12 +307,12 @@ function AlertDialog({
         "data-slot": "dialog-content",
         className: "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none",
         children: [
-          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { tone: headerTone, children: [
             /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { "data-slot": "dialog-title", children: title }),
             description ? /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { "data-slot": "dialog-description", children: description }) : null
           ] }),
           needsPhrase && /* @__PURE__ */ jsxs("div", { className: "ui-stack-xs", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: inputId, className: "text-sm", children: t("common.typeToConfirm", { phrase: confirmPhrase }) }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: inputId, className: "text-sm", children: t("common.typeToConfirm", { phrase }) }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -294,20 +323,23 @@ function AlertDialog({
                 },
                 autoComplete: "off",
                 spellCheck: false,
-                placeholder: confirmPhrase,
-                "aria-required": "true"
+                placeholder: phrase,
+                "aria-required": "true",
+                disabled: busy
               }
             )
           ] }),
+          stepUpFailed && /* @__PURE__ */ jsx("p", { id: stepErrorId, role: "alert", className: "text-destructive text-sm", children: t("feedback.alert.stepUpFailed") }),
           /* @__PURE__ */ jsxs(DialogFooter, { children: [
-            /* @__PURE__ */ jsx(DialogCancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: pending, children: resolvedCancel }) }),
+            /* @__PURE__ */ jsx(DialogCancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: busy, children: resolvedCancel }) }),
             /* @__PURE__ */ jsx(
               Button,
               {
                 variant: effectiveVariant === "destructive" ? "destructive" : "default",
                 onClick: handleConfirm,
-                disabled: pending || !phraseMatches,
-                children: pending ? t("common.working") : resolvedConfirm
+                disabled: busy || !phraseMatches,
+                "aria-describedby": stepUpFailed ? stepErrorId : void 0,
+                children: confirmLabelText
               }
             )
           ] })

package/dist/components/general/button.js

@@ -19,7 +19,7 @@ const buttonVariants = cva("ui-button", {
   variants: {
     variant: {
       default: "ui-button--default bg-primary text-primary-foreground hover:bg-primary/90",
-      destructive: "ui-button--destructive bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20",
+      destructive: "ui-button--destructive bg-destructive text-destructive-foreground focus-visible:ring-destructive/20",
       outline: "ui-button--outline border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
       dashed: "ui-button--dashed border border-dashed bg-background hover:bg-accent hover:text-accent-foreground",
       secondary: "ui-button--secondary bg-secondary text-secondary-foreground hover:bg-secondary/80",

package/dist/components/navigation/filter-bar.d.ts

@@ -1,4 +1,4 @@
 import type { ToolbarGroupProp, ToolbarProp } from "../../props/components/navigation.prop.js";
 export type { ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, } from "../../props/components/navigation.prop.js";
-export declare function Toolbar({ onClear, hasActiveFilters, className, children }: ToolbarProp): import("react").JSX.Element;
+export declare function Toolbar({ onClear, hasActiveFilters, sticky, className, children, }: ToolbarProp): import("react").JSX.Element;
 export declare function ToolbarGroup({ label, className, children }: ToolbarGroupProp): import("react").JSX.Element;

package/dist/components/navigation/filter-bar.js

@@ -5,14 +5,20 @@ import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Button } from "../general/button.js";
 import { cn } from "../../lib/utils.js";
-function Toolbar({ onClear, hasActiveFilters = true, className, children }) {
+function Toolbar({
+  onClear,
+  hasActiveFilters = true,
+  sticky = false,
+  className,
+  children
+}) {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       role: "toolbar",
       "aria-label": t("navigation.toolbar.ariaLabel"),
-      className: cn("ui-toolbar", className),
+      className: cn("ui-toolbar", sticky && "ui-toolbar-sticky", className),
       children: [
         children,
         onClear && hasActiveFilters && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClear, className: "ui-toolbar-clear", children: [

package/dist/components/ui/credential-reveal.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { CredentialRevealProp } from "../../props/components/data-display.prop.js";
+export type { CredentialRevealProp, CredentialRevealProp as CredentialRevealProps, CredentialRevealTone, } from "../../props/components/data-display.prop.js";
+/**
+ * CredentialReveal — one-time secret surface (device credential / API key / service-account
+ * secret). Masked by default with a show/hide toggle, a copy button that confirms the copy, an
+ * optional download, and an optional acknowledge action to pair with a Dialog. Composed only from
+ * real @godxjp/ui primitives (Alert · Button · Text). Reveal is a controlled boolean triad
+ * (`revealed` / `defaultRevealed` / `onRevealedChange`); everything user-facing is routed through
+ * `t()`, and the copy confirmation is announced via an `aria-live` region.
+ */
+export declare const CredentialReveal: React.ForwardRefExoticComponent<CredentialRevealProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/credential-reveal.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Copy, Download, Eye, EyeOff } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { Text } from "../general/typography.js";
+import { Button } from "../general/button.js";
+import { Alert, AlertDescription } from "../feedback/alert.js";
+const MASK = "\u2022".repeat(24);
+const COPIED_RESET_MS = 2e3;
+const CredentialReveal = React.forwardRef(
+  ({
+    secret,
+    label,
+    warning,
+    revealed,
+    defaultRevealed = false,
+    onRevealedChange,
+    onCopy,
+    onAcknowledge,
+    acknowledgeLabel,
+    downloadable = false,
+    downloadFileName = "credential.txt",
+    size = "md",
+    tone = "warning",
+    className,
+    id,
+    "aria-label": ariaLabel
+  }, ref) => {
+    const { t } = useTranslation();
+    const [internalRevealed, setInternalRevealed] = React.useState(defaultRevealed);
+    const isRevealed = revealed ?? internalRevealed;
+    const [copied, setCopied] = React.useState(false);
+    const copyTimer = React.useRef(null);
+    const labelId = React.useId();
+    React.useEffect(() => {
+      if (revealed === void 0) setInternalRevealed(defaultRevealed);
+      setCopied(false);
+    }, [secret]);
+    React.useEffect(
+      () => () => {
+        if (copyTimer.current) clearTimeout(copyTimer.current);
+      },
+      []
+    );
+    const setRevealed = (next) => {
+      if (revealed === void 0) setInternalRevealed(next);
+      onRevealedChange?.(next);
+    };
+    const copy = async () => {
+      try {
+        await navigator.clipboard.writeText(secret);
+        setCopied(true);
+        onCopy?.(secret);
+        if (copyTimer.current) clearTimeout(copyTimer.current);
+        copyTimer.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);
+      } catch {
+      }
+    };
+    const download = () => {
+      if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return;
+      const url = URL.createObjectURL(new Blob([secret], { type: "text/plain" }));
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = downloadFileName;
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      URL.revokeObjectURL(url);
+    };
+    const accessibleName = ariaLabel ?? (typeof label === "string" ? label : void 0) ?? t("ui.credentialReveal.secretLabel");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id,
+        "data-slot": "credential-reveal",
+        "data-size": size,
+        role: "group",
+        "aria-label": accessibleName,
+        className: cn("ui-credential-reveal", className),
+        children: [
+          warning !== null ? /* @__PURE__ */ jsx(Alert, { tone, className: "ui-credential-reveal-warning", children: /* @__PURE__ */ jsx(AlertDescription, { children: warning ?? t("ui.credentialReveal.warning") }) }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "ui-credential-reveal-surface", children: [
+            label ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                id: labelId,
+                size: "xs",
+                tone: "muted",
+                weight: "medium",
+                className: "ui-credential-reveal-label",
+                children: label
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs("div", { className: "ui-credential-reveal-row", children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  mono: true,
+                  size: "sm",
+                  "data-slot": "credential-reveal-secret",
+                  "data-state": isRevealed ? "revealed" : "masked",
+                  "aria-labelledby": label ? labelId : void 0,
+                  "aria-label": label ? void 0 : accessibleName,
+                  className: "ui-credential-reveal-secret",
+                  children: isRevealed ? secret : MASK
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "ui-credential-reveal-actions", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size,
+                    onClick: () => setRevealed(!isRevealed),
+                    "aria-pressed": isRevealed,
+                    "aria-label": isRevealed ? t("ui.credentialReveal.hide") : t("ui.credentialReveal.show"),
+                    children: isRevealed ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size,
+                    onClick: copy,
+                    "data-state": copied ? "copied" : "idle",
+                    "aria-label": copied ? t("ui.credentialReveal.copied") : t("ui.credentialReveal.copy"),
+                    children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" })
+                  }
+                ),
+                downloadable ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size,
+                    onClick: download,
+                    "aria-label": t("ui.credentialReveal.download"),
+                    children: /* @__PURE__ */ jsx(Download, { "aria-hidden": "true" })
+                  }
+                ) : null
+              ] })
+            ] })
+          ] }),
+          onAcknowledge ? /* @__PURE__ */ jsx("div", { className: "ui-credential-reveal-footer", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "default", size, onClick: onAcknowledge, children: acknowledgeLabel ?? t("ui.credentialReveal.acknowledge") }) }) : null,
+          /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", "data-slot": "credential-reveal-status", children: copied ? t("ui.credentialReveal.copiedAnnounce") : "" })
+        ]
+      }
+    );
+  }
+);
+CredentialReveal.displayName = "CredentialReveal";
+export {
+  CredentialReveal
+};

package/dist/i18n/messages/en.json

@@ -118,7 +118,9 @@
     },
     "genericError": "Something went wrong. Please retry.",
     "alert": {
-      "dismiss": "Dismiss"
+      "dismiss": "Dismiss",
+      "verifying": "Verifying…",
+      "stepUpFailed": "Re-authentication failed. Please try again."
     }
   },
   "layout": {
@@ -176,6 +178,17 @@
       "show": "Show password",
       "hide": "Hide password"
     },
+    "credentialReveal": {
+      "secretLabel": "Secret",
+      "warning": "This secret is shown only once. Copy it now — you won't be able to see it again.",
+      "show": "Reveal secret",
+      "hide": "Hide secret",
+      "copy": "Copy secret",
+      "copied": "Copied",
+      "copiedAnnounce": "Secret copied to clipboard",
+      "download": "Download secret",
+      "acknowledge": "I've saved it"
+    },
     "numberInput": {
       "increment": "Increase",
       "decrement": "Decrease"

package/dist/i18n/messages/ja.json

@@ -118,7 +118,9 @@
     },
     "genericError": "問題が発生しました。もう一度お試しください。",
     "alert": {
-      "dismiss": "閉じる"
+      "dismiss": "閉じる",
+      "verifying": "確認中…",
+      "stepUpFailed": "再認証に失敗しました。もう一度お試しください。"
     }
   },
   "layout": {
@@ -176,6 +178,17 @@
       "show": "パスワードを表示",
       "hide": "パスワードを隠す"
     },
+    "credentialReveal": {
+      "secretLabel": "シークレット",
+      "warning": "このシークレットは一度だけ表示されます。今すぐコピーしてください。再表示はできません。",
+      "show": "シークレットを表示",
+      "hide": "シークレットを隠す",
+      "copy": "シークレットをコピー",
+      "copied": "コピーしました",
+      "copiedAnnounce": "シークレットをクリップボードにコピーしました",
+      "download": "シークレットをダウンロード",
+      "acknowledge": "保存しました"
+    },
     "numberInput": {
       "increment": "増やす",
       "decrement": "減らす"

package/dist/i18n/messages/vi.json

@@ -118,7 +118,9 @@
     },
     "genericError": "Đã xảy ra lỗi. Vui lòng thử lại.",
     "alert": {
-      "dismiss": "Đóng"
+      "dismiss": "Đóng",
+      "verifying": "Đang xác minh…",
+      "stepUpFailed": "Xác thực lại thất bại. Vui lòng thử lại."
     }
   },
   "layout": {
@@ -176,6 +178,17 @@
       "show": "Hiện mật khẩu",
       "hide": "Ẩn mật khẩu"
     },
+    "credentialReveal": {
+      "secretLabel": "Khóa bí mật",
+      "warning": "Khóa bí mật này chỉ hiển thị một lần. Hãy sao chép ngay — bạn sẽ không thể xem lại.",
+      "show": "Hiện khóa bí mật",
+      "hide": "Ẩn khóa bí mật",
+      "copy": "Sao chép khóa",
+      "copied": "Đã sao chép",
+      "copiedAnnounce": "Đã sao chép khóa bí mật vào bộ nhớ tạm",
+      "download": "Tải khóa bí mật",
+      "acknowledge": "Tôi đã lưu"
+    },
     "numberInput": {
       "increment": "Tăng",
       "decrement": "Giảm"

package/dist/lib/permission-grid.d.ts

@@ -0,0 +1,59 @@
+/**
+ * permission-grid — pure, render-neutral helpers for RBAC role × permission
+ * matrices.
+ *
+ * A permission matrix maps a set of PERMISSION rows against a set of ROLE
+ * columns; each (role, permission) pair is either granted or not. A "permission
+ * matrix" is NOT a framework component — it is a COMPOSITION of `Table`/
+ * `DataTable` + `Badge` + tokens (see `docs/COMPOSITION-VS-COMPONENT.md`, Gate 0:
+ * fails C2/C3/C7). What it DOES need is a single, tested source of truth for the
+ * non-trivial data logic every consumer would otherwise re-derive: grant lookup,
+ * the per-permission diff between two roles (compare mode), and the row set that
+ * survives a "differences only" (差分のみ) filter.
+ *
+ * These functions are framework-neutral (no React) and locale-neutral (no
+ * strings) so the showcase — and any RBAC admin — composes UI on top of them.
+ *
+ * Grants are modelled as a flat `Set` of composite keys for O(1) membership,
+ * which mirrors how an authz decision cache (`role:permission` tuples) is
+ * typically held in memory.
+ */
+/** Any object addressable by a stable string `id` (a role or a permission). */
+export interface GridEntity {
+    readonly id: string;
+}
+/** A pair of role ids being compared side by side in compare mode. */
+export type ComparePair = readonly [roleA: string, roleB: string];
+/** Options controlling which permission rows are visible. */
+export interface VisibleRowsOptions {
+    /** The two roles under comparison; enables the diff-only filter. */
+    readonly compare?: ComparePair | null;
+    /**
+     * When true AND `compare` is set, keep only the permissions on which the two
+     * compared roles disagree. Without a `compare` pair this is a no-op (there is
+     * nothing to diff against), so every row is returned.
+     */
+    readonly diffOnly?: boolean;
+}
+/**
+ * Build the composite grant key for a (role, permission) pair. Use this both to
+ * seed the grant `Set` and to query it, so the encoding stays in one place.
+ */
+export declare function grantKey(roleId: string, permissionId: string): string;
+/** Is `permissionId` granted to `roleId`? */
+export declare function hasGrant(grants: ReadonlySet<string>, roleId: string, permissionId: string): boolean;
+/**
+ * Do the two compared roles DISAGREE on `permissionId` (one grants it, the other
+ * does not)? Comparing a role with itself is always `false`.
+ */
+export declare function rolesDifferOnPermission(grants: ReadonlySet<string>, compare: ComparePair, permissionId: string): boolean;
+/**
+ * The permission rows to render: every row normally, or — when `diffOnly` is on
+ * and a `compare` pair is set — only the rows on which the two roles differ.
+ * Order is preserved; the input array is never mutated.
+ */
+export declare function visibleRows<P extends GridEntity>(permissions: readonly P[], grants: ReadonlySet<string>, { compare, diffOnly }?: VisibleRowsOptions): P[];
+/** How many permissions the two compared roles disagree on (badge in the header). */
+export declare function countDifferences<P extends GridEntity>(permissions: readonly P[], grants: ReadonlySet<string>, compare: ComparePair): number;
+/** How many permissions a single role is granted (column subtotal). */
+export declare function countGrants<P extends GridEntity>(permissions: readonly P[], grants: ReadonlySet<string>, roleId: string): number;

package/dist/lib/permission-grid.js

@@ -0,0 +1,32 @@
+const KEY_SEP = "\0";
+function grantKey(roleId, permissionId) {
+  return `${roleId}${KEY_SEP}${permissionId}`;
+}
+function hasGrant(grants, roleId, permissionId) {
+  return grants.has(grantKey(roleId, permissionId));
+}
+function rolesDifferOnPermission(grants, compare, permissionId) {
+  const [a, b] = compare;
+  return hasGrant(grants, a, permissionId) !== hasGrant(grants, b, permissionId);
+}
+function visibleRows(permissions, grants, { compare, diffOnly = false } = {}) {
+  if (!diffOnly || !compare) return permissions.slice();
+  return permissions.filter((p) => rolesDifferOnPermission(grants, compare, p.id));
+}
+function countDifferences(permissions, grants, compare) {
+  return permissions.reduce(
+    (n, p) => n + (rolesDifferOnPermission(grants, compare, p.id) ? 1 : 0),
+    0
+  );
+}
+function countGrants(permissions, grants, roleId) {
+  return permissions.reduce((n, p) => n + (hasGrant(grants, roleId, p.id) ? 1 : 0), 0);
+}
+export {
+  countDifferences,
+  countGrants,
+  grantKey,
+  hasGrant,
+  rolesDifferOnPermission,
+  visibleRows
+};

package/dist/props/components/data-display.prop.d.ts

@@ -1,6 +1,6 @@
 /** Data Display component prop types — @see docs/COMPONENTS.md#data-display */
 import type * as React from "react";
-import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, ChildrenProp, ToneProp, HeadingLevelProp } from "../vocabulary/index.js";
+import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, ChildrenProp, ToneProp, HeadingLevelProp, SizeProp, LabelProp, IdProp } from "../vocabulary/index.js";
 /** @see EmptyState */
 /**
  * Semantic intent of the EmptyState icon medallion — a subset of the shared `ToneProp` vocabulary
@@ -62,6 +62,65 @@ export type BadgeProp = {
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
+/** @see CredentialReveal */
+/**
+ * Severity of the one-time-secret caution banner — a subset of the shared `ToneProp`
+ * vocabulary that carries a caution/danger/informational meaning (no `default`/`success`/
+ * `muted`/`neutral`, which would read as "safe"). Drives the composed `Alert` tone.
+ */
+export type CredentialRevealTone = Extract<ToneProp, "warning" | "destructive" | "info">;
+/** @see CredentialReveal */
+export type CredentialRevealProp = {
+    /** The one-time secret value shown masked by default and copied verbatim. */
+    secret: string;
+    /**
+     * Accessible name / caption for the secret (e.g. "API key", "デバイス資格情報"). When set it labels
+     * the secret region; when omitted a generic localized label is used.
+     */
+    label?: LabelProp;
+    /**
+     * Caution banner copy. Defaults to the localized "shown only once" warning. Pass `null` to
+     * suppress the banner entirely (e.g. when the surrounding Dialog already carries the caution).
+     */
+    warning?: React.ReactNode | null;
+    /** Controlled reveal state (masked ↔ shown). */
+    revealed?: boolean;
+    /** Uncontrolled initial reveal state. Default `false` (masked). */
+    defaultRevealed?: boolean;
+    /** Reveal-state change handler (fires on the show/hide toggle). */
+    onRevealedChange?: (revealed: boolean) => void;
+    /** Called after the secret is written to the clipboard. */
+    onCopy?: (secret: string) => void;
+    /**
+     * When provided, renders a confirm/acknowledge button that calls this — pair it with the
+     * surrounding Dialog's `onOpenChange(false)` so the secret re-blurs once dismissed.
+     */
+    onAcknowledge?: () => void;
+    /** Label for the acknowledge button. Defaults to a localized "I've saved it". */
+    acknowledgeLabel?: React.ReactNode;
+    /** Offer a download-as-file button next to copy. Default `false`. */
+    downloadable?: boolean;
+    /** Filename for the downloaded secret. Default `"credential.txt"`. */
+    downloadFileName?: string;
+    /** Control size tier for the action buttons. Default `md`. */
+    size?: SizeProp;
+    /** Caution banner severity. Default `warning`. */
+    tone?: CredentialRevealTone;
+    className?: ClassNameProp;
+    id?: IdProp;
+    "aria-label"?: string;
+};
+/** @see QrCode */
+export type QrCodeProp = {
+    /** Sensitive or public value encoded locally into the QR modules. */
+    value: string;
+    /** Purpose-specific accessible name. The encoded value is never used as accessible text. */
+    label: string;
+    /** Natural display size. Default `md`. */
+    size?: SizeProp;
+    className?: ClassNameProp;
+    id?: IdProp;
+};
 /** @see DataTable */
 export type DataTableProp<T> = {
     data: T[];

package/dist/props/components/feedback.prop.d.ts

@@ -13,7 +13,11 @@ export type AlertDialogProp = {
     variant?: ConfirmVariantProp;
     /** Type-to-confirm friction — enables destructive flow (GitHub/Stripe style). */
     confirmPhrase?: string;
+    /** Semantic alias of `confirmPhrase` — the exact token to type (e.g. an org slug) to arm confirm. */
+    challenge?: string;
     onConfirm: HandlerProp;
+    /** Optional step-up re-auth gate (passkey/2FA); must resolve truthy before `onConfirm` fires. */
+    stepUp?: () => Promise<boolean> | boolean;
     keepOpenOnConfirm?: boolean;
     pending?: PendingProp;
 };

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

@@ -1,7 +1,7 @@
 export type { AppShellProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
 export type { InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, DateRangePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
-export type { EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, } from "./data-display.prop.js";
+export type { EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
 export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
 export type { AlertQueryErrorProp, AlertProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SkeletonRowsProp, } from "./feedback.prop.js";
 export type { DataStateProp, InfiniteQueryStateProp, InfiniteQueryHelpers, PrefetchLinkProp, } from "./query.prop.js";

package/dist/props/components/navigation.prop.d.ts

@@ -1,10 +1,17 @@
 /** Navigation component prop types — @see docs/COMPONENTS.md#navigation */
 import type * as React from "react";
-import type { ChildrenProp, ClassNameProp, DisabledProp, HasActiveFiltersProp, LabelProp, OnClearFiltersProp } from "../vocabulary/index.js";
+import type { ChildrenProp, ClassNameProp, DisabledProp, HasActiveFiltersProp, LabelProp, OnClearFiltersProp, StickyProp } from "../vocabulary/index.js";
 /** @see Toolbar */
 export type ToolbarProp = {
     onClear?: OnClearFiltersProp;
     hasActiveFilters?: HasActiveFiltersProp;
+    /**
+     * Pin the strip to the top of its scroll container while the list scrolls beneath it
+     * (list-page filter bars, #197). Opt-in — default `false` keeps the toolbar quiet. Tune
+     * the pinned offset/background with the `--filter-bar-sticky-offset` /
+     * `--filter-bar-sticky-background` theme knobs.
+     */
+    sticky?: StickyProp;
     className?: ClassNameProp;
     children: ChildrenProp;
 };

package/dist/props/registry.d.ts

@@ -384,6 +384,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "data";
         readonly description: "Any filter active flag";
     };
+    readonly StickyProp: {
+        readonly file: "vocabulary/data.prop.ts";
+        readonly category: "data";
+        readonly description: "Pin the filter strip while the list scrolls";
+    };
 };
 export type VocabularyPropName = keyof typeof VOCABULARY_REGISTRY;
 export declare const COMPONENT_PROP_REGISTRY: {
@@ -724,6 +729,16 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp"];
     };
+    readonly CredentialRevealProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "SizeProp", "ToneProp", "OnValueChangeProp", "HandlerProp", "ClassNameProp", "IdProp"];
+    };
+    readonly QrCodeProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "LabelProp", "SizeProp", "ClassNameProp", "IdProp"];
+    };
     readonly ChartSeriesProp: {
         readonly group: "data-display";
         readonly file: "components/charts.prop.ts";
@@ -900,7 +915,15 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "confirmPhrase";
             readonly local: true;
             readonly reason: "Destructive-dialog type-to-confirm friction phrase.";
+        }, {
+            readonly field: "challenge";
+            readonly local: true;
+            readonly reason: "Semantic alias of confirmPhrase — the typed challenge token (e.g. an org slug).";
         }, "HandlerProp", {
+            readonly field: "stepUp";
+            readonly local: true;
+            readonly reason: "Step-up re-auth (passkey/2FA) gate resolved before confirm fires.";
+        }, {
             readonly field: "keepOpenOnConfirm";
             readonly local: true;
             readonly reason: "AlertDialog-specific async completion behavior.";
@@ -985,7 +1008,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly ToolbarProp: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
-        readonly vocabulary: readonly ["OnClearFiltersProp", "HasActiveFiltersProp", "ClassNameProp", "ChildrenProp"];
+        readonly vocabulary: readonly ["OnClearFiltersProp", "HasActiveFiltersProp", "StickyProp", "ClassNameProp", "ChildrenProp"];
     };
     readonly ToolbarGroupProp: {
         readonly group: "navigation";

package/dist/props/registry.js

@@ -384,6 +384,11 @@ const VOCABULARY_REGISTRY = {
     file: "vocabulary/data.prop.ts",
     category: "data",
     description: "Any filter active flag"
+  },
+  StickyProp: {
+    file: "vocabulary/data.prop.ts",
+    category: "data",
+    description: "Pin the filter strip while the list scrolls"
   }
 };
 const COMPONENT_PROP_REGISTRY = {
@@ -792,6 +797,24 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display.prop.ts",
     vocabulary: ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp"]
   },
+  CredentialRevealProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "LabelProp",
+      "SizeProp",
+      "ToneProp",
+      "OnValueChangeProp",
+      "HandlerProp",
+      "ClassNameProp",
+      "IdProp"
+    ]
+  },
+  QrCodeProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: ["ValueProp", "LabelProp", "SizeProp", "ClassNameProp", "IdProp"]
+  },
   ChartSeriesProp: {
     group: "data-display",
     file: "components/charts.prop.ts",
@@ -919,7 +942,17 @@ const COMPONENT_PROP_REGISTRY = {
         local: true,
         reason: "Destructive-dialog type-to-confirm friction phrase."
       },
+      {
+        field: "challenge",
+        local: true,
+        reason: "Semantic alias of confirmPhrase \u2014 the typed challenge token (e.g. an org slug)."
+      },
       "HandlerProp",
+      {
+        field: "stepUp",
+        local: true,
+        reason: "Step-up re-auth (passkey/2FA) gate resolved before confirm fires."
+      },
       {
         field: "keepOpenOnConfirm",
         local: true,
@@ -1007,7 +1040,13 @@ const COMPONENT_PROP_REGISTRY = {
   ToolbarProp: {
     group: "navigation",
     file: "components/navigation.prop.ts",
-    vocabulary: ["OnClearFiltersProp", "HasActiveFiltersProp", "ClassNameProp", "ChildrenProp"]
+    vocabulary: [
+      "OnClearFiltersProp",
+      "HasActiveFiltersProp",
+      "StickyProp",
+      "ClassNameProp",
+      "ChildrenProp"
+    ]
   },
   ToolbarGroupProp: {
     group: "navigation",

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

@@ -58,3 +58,9 @@ export type OnSearchChangeProp = (query: string) => void;
 export type OnClearFiltersProp = () => void;
 /** Whether any filter is active — shows "Clear all". */
 export type HasActiveFiltersProp = boolean;
+/**
+ * Whether the filter strip pins to the top of its scroll container while the list
+ * scrolls beneath it. Opt-in (default `false`) so the toolbar stays quiet chrome;
+ * offset/background are tuned via the `--filter-bar-sticky-*` theme knobs.
+ */
+export type StickyProp = boolean;

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

@@ -4,4 +4,4 @@ export type { TitleProp, SubtitleProp, DescriptionProp, ExtraProp, FooterProp, A
 export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
 export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp } from "./navigation.prop.js";
-export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, } from "./data.prop.js";
+export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, } from "./data.prop.js";

package/dist/styles/control.css

@@ -117,8 +117,16 @@
     box-shadow: var(--shadow-sm);
   }
 
+  /* SOLID hover/active tokens, never `--destructive / 0.9`: an alpha fill composites with whatever
+   * surface sits behind the button (a lighter Card/AlertDialog vs the page), so the effective colour
+   * — and its contrast with the label — drifts per context and can dip below AA (gh#199). The solid
+   * --destructive-hover/active are tuned to clear 4.5:1 on every surface. */
   .ui-button--destructive:hover {
-    background: hsl(var(--destructive) / 0.9);
+    background: hsl(var(--destructive-hover));
+  }
+
+  .ui-button--destructive:active {
+    background: hsl(var(--destructive-active));
   }
 
   /* Outline + ghost set their text colour EXPLICITLY (read --foreground) — never rely on inherited

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

@@ -484,4 +484,73 @@
     gap: var(--space-2);
     margin-inline-start: auto;
   }
+
+  /* CredentialReveal — one-time secret surface: caution banner, masked/revealed value row with
+   * copy/reveal/download actions, and an optional acknowledge footer. Density-aware via the
+   * --control-height tier; colours/spacing read semantic role tokens only. */
+  .ui-credential-reveal {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-stack-sm);
+  }
+  .ui-credential-reveal-warning {
+    margin-block-end: var(--space-1);
+  }
+  .ui-credential-reveal-surface {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .ui-credential-reveal-label {
+    display: inline-block;
+  }
+  .ui-credential-reveal-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-inline-sm);
+    min-height: var(--control-height);
+    padding-block: var(--space-1);
+    padding-inline: var(--space-3);
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--control-radius);
+    background: hsl(var(--muted) / 0.4);
+  }
+  .ui-credential-reveal-secret {
+    flex: 1 1 auto;
+    min-width: 0;
+    letter-spacing: 0.02em;
+    word-break: break-all;
+  }
+  .ui-credential-reveal-secret[data-state="masked"] {
+    color: hsl(var(--muted-foreground));
+  }
+  .ui-credential-reveal-actions {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--space-inline-xs);
+  }
+  .ui-credential-reveal-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  /* QrCode — a quiet, scanner-safe SVG surface with an ISO/IEC-style four-module quiet zone
+   * supplied by the encoder. Sizing is natural rather than stretched across its container. */
+  .ui-qr-code {
+    display: block;
+    inline-size: var(--qr-code-size-md);
+    block-size: auto;
+    max-inline-size: 100%;
+    aspect-ratio: 1;
+  }
+  .ui-qr-code[data-size="xs"] {
+    inline-size: var(--qr-code-size-xs);
+  }
+  .ui-qr-code[data-size="sm"] {
+    inline-size: var(--qr-code-size-sm);
+  }
+  .ui-qr-code[data-size="lg"] {
+    inline-size: var(--qr-code-size-lg);
+  }
 }

package/dist/styles/dialog-layout.css

@@ -132,4 +132,8 @@
     font-size: var(--font-size-base);
     color: hsl(var(--muted-foreground));
   }
+
+  [data-slot="dialog-header"]:not([data-tone="default"]) [data-slot="dialog-description"] {
+    color: hsl(var(--foreground));
+  }
 }

package/dist/styles/layout.css

@@ -717,6 +717,16 @@
     }
   }
 
+  /* Toolbar `sticky` (#197): pin the filter strip while the list scrolls beneath it.
+   * `inset-block-start` (not `top`) keeps it RTL/vertical-writing-mode safe; the fill only
+   * paints in this pinned variant so a non-sticky toolbar stays transparent chrome. */
+  .ui-toolbar-sticky {
+    position: sticky;
+    inset-block-start: var(--filter-bar-sticky-offset);
+    z-index: 20;
+    background: hsl(var(--filter-bar-sticky-background, var(--background)));
+  }
+
   .ui-toolbar-clear {
     width: 100%;
   }

package/dist/tokens/components/data-display.css

@@ -31,4 +31,13 @@
      re-resolves under a scoped theme. Defaults = hsl(var(--primary) / 0.3) border · 0.05 fill. */
   --tree-item-active-border: initial;
   --tree-item-active-background: initial;
+
+  /* QR codes stay scanner-safe in light and dark application themes. Consumers may override these
+     component tokens only when the resulting pair retains strong contrast. */
+  --qr-code-foreground: 0 0% 0%;
+  --qr-code-background: 0 0% 100%;
+  --qr-code-size-xs: 6rem;
+  --qr-code-size-sm: 8rem;
+  --qr-code-size-md: 10rem;
+  --qr-code-size-lg: 12.5rem;
 }

package/dist/tokens/components/navigation.css

@@ -20,4 +20,11 @@
    * Defaults = hsl(var(--accent)) fill · hsl(var(--accent-foreground)) text. */
   --menubar-item-hover-background: initial;
   --menubar-item-hover-foreground: initial;
+
+  /* Sticky offset for the pinned filter strip (Toolbar `sticky`, #197). Default 0 (chrome,
+   * rule #44); raise it so the strip parks below a fixed topbar. */
+  --filter-bar-sticky-offset: 0px;
+  /* Fill painted only when the filter strip is pinned. Role-mirror knob (rule #45): `initial`
+   * so --background re-resolves at the call site under a scoped [data-tenant]/.dark theme. */
+  --filter-bar-sticky-background: initial;
 }

package/dist/tokens/foundation.css

@@ -359,8 +359,12 @@
   --muted-foreground: 44 6% 64%;
   --accent: 45 7% 22%;
   --accent-foreground: 60 20% 96%;
-  --destructive: 357 55% 52%;
-  --destructive-foreground: 60 20% 96%;
+  /* Filled destructive surfaces (button/badge/step) must clear WCAG AA (4.5:1) with comfortable
+   * margin, not sit on the floor (gh#199 — dark default was 4.54:1). Base darkened 52%→48% and the
+   * on-fill text lifted to pure white → ~5.5:1; states go DARKER (never lighter, which cut contrast
+   * against the light label). Error TEXT on dark surfaces uses --text-error, not this fill token. */
+  --destructive: 357 55% 48%;
+  --destructive-foreground: 0 0% 100%;
   --border: 45 6% 22%;
   --input: 45 6% 22%;
   --ring: 204 90% 60%;
@@ -388,6 +392,6 @@
   --primary-active: 204 90% 72%;
   --secondary-hover: 45 6% 22%;
   --secondary-active: 45 6% 26%;
-  --destructive-hover: 357 55% 58%;
-  --destructive-active: 357 55% 64%;
+  --destructive-hover: 357 55% 43%;
+  --destructive-active: 357 55% 38%;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.1.1",
-  "godxUiMcp": "18.1.0",
+  "version": "18.3.0",
+  "godxUiMcp": "18.3.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "pnpm": {
@@ -113,6 +113,10 @@
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"
     },
+    "./lib/permission-grid": {
+      "types": "./dist/lib/permission-grid.d.ts",
+      "import": "./dist/lib/permission-grid.js"
+    },
     "./hooks": {
       "types": "./dist/lib/hooks.d.ts",
       "import": "./dist/lib/hooks.js"
@@ -406,6 +410,7 @@
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^1.25.0",
+    "qrcode.react": "4.2.0",
     "react-day-picker": "^10.0.1",
     "react-resizable-panels": "^4.12.2",
     "sonner": "^2.0.7",
@@ -423,6 +428,7 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.19.19",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
@@ -433,7 +439,9 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "globals": "^15.15.0",
     "jsdom": "^29.1.1",
+    "jsqr": "^1.4.0",
     "playwright": "^1.61.1",
+    "pngjs": "^7.0.0",
     "prettier": "^3.9.5",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "react": "^19.2.7",