@ai-matrx/design-system 0.14.2 → 0.15.1

package/dist/data-table/data-row-inspector.js

@@ -0,0 +1,988 @@
+"use client";
+"use client";
+
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/data-table/copy.tsx
+import { useState as useState4 } from "react";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+
+// src/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+        /**
+         * An explicit spelling of `default`, identical by construction. It is
+         * not decoration: matrx-frontend's `ButtonMine` fork carried it, ~17
+         * call sites say `variant="primary"`, and the alternative to keeping
+         * the word was a host shim translating a prop — the massage C22 bans.
+         */
+        primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        /** The affirmative twin of `destructive` — confirm, approve, publish. */
+        success: "bg-success text-success-foreground shadow-sm hover:bg-success/90",
+        outline: "border border-border bg-card shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        subtle: "border border-transparent bg-muted/50 text-foreground hover:border-border hover:bg-muted"
+      },
+      /**
+       * ONE size scale, xs → 3xl, plus the two icon boxes. The top and bottom
+       * of the scale came in from matrx-frontend's `ButtonMine` fork (2026-09-07):
+       * a dense toolbar needs `xs`, and a marketing/hero call to action needs
+       * `xl`+. A host that has to reach outside this scale forks the button,
+       * which is exactly how `ButtonMine` was born.
+       */
+      size: {
+        xs: "h-6 rounded-md px-1 text-xs",
+        sm: "h-8 rounded-md px-3 text-xs",
+        default: "h-9 px-4 py-2",
+        /** An explicit spelling of `default` (the fork's middle rung). */
+        md: "h-9 px-4 py-2",
+        lg: "h-10 rounded-md px-6",
+        xl: "h-12 px-8 py-3 text-base",
+        "2xl": "h-14 px-10 py-3 text-base",
+        "3xl": "h-16 px-12 py-3 text-base",
+        icon: "h-9 w-9",
+        "icon-sm": "h-7 w-7",
+        /** A circular icon box — an avatar-shaped control, not a square one. */
+        roundIcon: "h-8 w-8 rounded-full p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/popover.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React3 from "react";
+
+// src/motion.ts
+var MOTION_OVERLAY = "matrx-motion-overlay";
+var MOTION_DIALOG = "matrx-motion-dialog";
+var MOTION_BOTTOM_SHEET = "matrx-motion-bottom-sheet";
+var MOTION_POPPER = "matrx-motion-popper";
+var MOTION_SHEET = {
+  top: "matrx-motion-sheet-top",
+  bottom: "matrx-motion-sheet-bottom",
+  left: "matrx-motion-sheet-left",
+  right: "matrx-motion-sheet-right",
+  center: "matrx-motion-sheet-center"
+};
+var MOTION_PULSE = "matrx-pulse";
+var MOTION_SPIN = "matrx-spin";
+var ALL_MOTION_CLASSES = [
+  MOTION_OVERLAY,
+  MOTION_DIALOG,
+  MOTION_BOTTOM_SHEET,
+  MOTION_POPPER,
+  ...Object.values(MOTION_SHEET),
+  MOTION_PULSE,
+  MOTION_SPIN
+];
+
+// src/portal-container.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CONTEXT_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.portal-container-context");
+var contextRegistry = globalThis;
+var PortalContainerContext = contextRegistry[CONTEXT_SLOT] ??= React2.createContext(void 0);
+function PortalContainerProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ jsx2(PortalContainerContext.Provider, { value: container ?? void 0, children });
+}
+function usePortalContainer(explicit) {
+  const injected = React2.useContext(PortalContainerContext);
+  if (explicit !== void 0) {
+    return explicit ?? void 0;
+  }
+  return injected ?? void 0;
+}
+
+// src/popover.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React3.forwardRef(
+  ({
+    className,
+    align = "center",
+    sideOffset = 4,
+    container,
+    animated = true,
+    ...props
+  }, ref) => {
+    const portalContainer = usePortalContainer(container);
+    return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx3(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        align,
+        sideOffset,
+        className: cn(
+          // Cap to the viewport space Radix measured and scroll — a popover taller
+          // than the screen must never trap the user with unreachable content.
+          // z must EQUAL the dialog layer (z-[10000]), never exceed it: with equal
+          // z, DOM portal order decides, so a dialog opened FROM a popover stacks
+          // above it, and a popover opened from a dialog still stacks above the
+          // dialog. z-[10001] buried dialogs behind fullscreen popovers.
+          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          animated && MOTION_POPPER,
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { treeContainsComponent } from "@ai-matrx/kit/react-tree";
+import * as React6 from "react";
+
+// src/icons.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function lucideProps(props) {
+  return {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    ...props
+  };
+}
+function XIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ jsx4("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx4("path", { d: "m6 6 12 12" })
+  ] });
+}
+
+// src/radix-dialog-modal-context.tsx
+import * as React4 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var CONTEXT_SLOT2 = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.dialog-modal-context");
+var contextRegistry2 = globalThis;
+var RadixDialogModalContext = contextRegistry2[CONTEXT_SLOT2] ??= React4.createContext(true);
+function RadixDialogModalProvider({
+  children,
+  modal
+}) {
+  return /* @__PURE__ */ jsx5(RadixDialogModalContext.Provider, { value: modal, children });
+}
+function useRadixDialogModal() {
+  return React4.useContext(RadixDialogModalContext);
+}
+
+// src/use-is-mobile.ts
+import * as React5 from "react";
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React5.useState(false);
+  const [hasMounted, setHasMounted] = React5.useState(false);
+  React5.useEffect(() => {
+    setHasMounted(true);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    onChange();
+    if (typeof window.matchMedia !== "function") {
+      return void 0;
+    }
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  if (!hasMounted) {
+    return false;
+  }
+  return isMobile;
+}
+
+// src/dialog.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var Dialog = ({
+  children,
+  ...props
+}) => {
+  const modal = props.modal ?? true;
+  return /* @__PURE__ */ jsx6(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx6(DialogPrimitive.Root, { ...props, modal, children }) });
+};
+Dialog.displayName = "Dialog";
+var DialogPortal = ({
+  container,
+  ...props
+}) => {
+  const resolved = usePortalContainer(container);
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { container: resolved ?? null, ...props });
+};
+DialogPortal.displayName = "DialogPortal";
+var CONTEXT_SLOT3 = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.dialog-container-context");
+var contextRegistry3 = globalThis;
+var DialogContainerContext = contextRegistry3[CONTEXT_SLOT3] ??= React6.createContext(null);
+var DialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    "data-slot": "dialog-overlay",
+    className: cn(
+      // Page context behind the modal stays readable; separation comes from a
+      // light token scrim, not a blur.
+      "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim-soft)]",
+      MOTION_OVERLAY,
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContentPrimitive = React6.forwardRef((props, ref) => {
+  const isModal = useRadixDialogModal();
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Content,
+    {
+      ...props,
+      ref,
+      "aria-modal": isModal || void 0
+    }
+  );
+});
+DialogContentPrimitive.displayName = "DialogContentPrimitive";
+var DIALOG_DESKTOP_CLASSES = "matrx-dialog-card fixed inset-0 z-[10000] m-auto grid h-fit min-w-0 w-full max-w-lg gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg";
+var DIALOG_MOBILE_SHEET_CLASSES = "matrx-mobile-sheet matrx-dialog-card fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
+var DIALOG_MOBILE_SHEET_OVERRIDE = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-none w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
+var DialogContent = React6.forwardRef(
+  ({
+    className,
+    children,
+    mobileSheet = true,
+    animated = true,
+    showCloseButton = true,
+    container,
+    ...props
+  }, ref) => {
+    const isMobile = useIsMobile();
+    const isModal = useRadixDialogModal();
+    const injectedContainer = usePortalContainer(container);
+    const asSheet = mobileSheet && isMobile;
+    const [containerEl, setContainerEl] = React6.useState(
+      null
+    );
+    const mergedRef = React6.useCallback(
+      (node) => {
+        setContainerEl(node);
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    const hasTitle = treeContainsComponent(children, DialogTitle) || treeContainsComponent(children, DialogPrimitive.Title);
+    const hasDescription = treeContainsComponent(children, DialogDescription) || treeContainsComponent(children, DialogPrimitive.Description);
+    return /* @__PURE__ */ jsxs2(DialogPortal, { container, children: [
+      isModal ? /* @__PURE__ */ jsx6(DialogOverlay, {}) : null,
+      /* @__PURE__ */ jsxs2(
+        DialogContentPrimitive,
+        {
+          ref: mergedRef,
+          "data-slot": "dialog-content",
+          className: cn(
+            asSheet ? DIALOG_MOBILE_SHEET_CLASSES : DIALOG_DESKTOP_CLASSES,
+            animated && (asSheet ? MOTION_BOTTOM_SHEET : MOTION_DIALOG),
+            className,
+            asSheet && DIALOG_MOBILE_SHEET_OVERRIDE,
+            // A non-modal dialog is the coexistence contract for content that
+            // can sit beside a host's floating window manager (which starts at
+            // z=1000); staying below that boundary makes a newly focused window
+            // usable without coupling the two systems.
+            !isModal && "z-[900]"
+          ),
+          ...hasDescription ? {} : { "aria-describedby": void 0 },
+          ...props,
+          children: [
+            hasTitle ? null : /* @__PURE__ */ jsx6(VisuallyHidden.Root, { children: /* @__PURE__ */ jsx6(DialogPrimitive.Title, { children: "Dialog" }) }),
+            /* @__PURE__ */ jsx6(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx6(
+              PortalContainerProvider,
+              {
+                container: containerEl ?? injectedContainer ?? null,
+                children
+              }
+            ) }),
+            showCloseButton ? /* @__PURE__ */ jsxs2(
+              DialogPrimitive.Close,
+              {
+                "data-slot": "dialog-close",
+                "aria-label": "Close",
+                className: "absolute right-2 top-4 flex h-11 w-11 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground sm:right-4 lg:h-10 lg:w-10",
+                children: [
+                  /* @__PURE__ */ jsx6(XIcon, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    ] });
+  }
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx6(
+  "div",
+  {
+    "data-slot": "dialog-header",
+    className: cn(
+      // DialogContent owns an absolute close control. Reserve its hit area in
+      // every header so trailing actions never render underneath it.
+      "flex flex-col space-y-1.5 pr-12 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx6(
+  "div",
+  {
+    "data-slot": "dialog-footer",
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      // Ruling 3/4 — sticky to the card edges so a scrolled body never shows
+      // through under the actions, and safe-area padded on a phone.
+      //
+      // 🚨 THERE IS NO `mb-[…]` HERE, AND THERE MUST NEVER BE ONE AGAIN
+      // (0.11.3, feedback bf8fb00b). The bleed over the card's bottom padding
+      // used to be a NEGATIVE BLOCK MARGIN, which makes this box taller than
+      // the grid area the card allocates it — and `position: sticky` CLAMPS a
+      // box to its containing block, so the browser yanked the footer UP by
+      // `--dialog-pad` against the card's `gap-4` and painted 8px of opaque
+      // footer over the last line of the consequence, at every length. The
+      // card now RESERVES this footer's block size instead (`matrx-dialog-card`
+      // in styles.css hands over its `padding-bottom`), so the bleed costs no
+      // margin at all. Guard: `sticky-footer-geometry.test.tsx`.
+      //
+      // These stay UTILITIES rather than a shipped rule so a caller's
+      // `className` still wins through tailwind-merge — a shipped rule would
+      // have to be unlayered to survive Tailwind preflight (§ THE PREFLIGHT
+      // RULE in styles.css) and would then override every caller's padding.
+      "sticky bottom-0 z-10 bg-background pt-3",
+      "mx-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad,0px)]",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  DialogPrimitive.Title,
+  {
+    ref,
+    "data-slot": "dialog-title",
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  DialogPrimitive.Description,
+  {
+    ref,
+    "data-slot": "dialog-description",
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/data-table/icons.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function Icon({ children, ...props }) {
+  return /* @__PURE__ */ jsx7("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...props, children });
+}
+var Check = (p) => /* @__PURE__ */ jsx7(Icon, { ...p, children: /* @__PURE__ */ jsx7("path", { d: "m5 12 4 4L19 6" }) });
+var SlidersHorizontal = (p) => /* @__PURE__ */ jsx7(Icon, { ...p, children: /* @__PURE__ */ jsx7("path", { d: "M4 7h16M4 17h16M9 7v0M15 17v0" }) });
+var PanelRight = (p) => /* @__PURE__ */ jsxs3(Icon, { ...p, children: [
+  /* @__PURE__ */ jsx7("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+  /* @__PURE__ */ jsx7("path", { d: "M15 4v16" })
+] });
+var ExternalLink = (p) => /* @__PURE__ */ jsx7(Icon, { ...p, children: /* @__PURE__ */ jsx7("path", { d: "M14 4h6v6M20 4l-9 9M19 13v6H5V5h6" }) });
+var Copy = (p) => /* @__PURE__ */ jsxs3(Icon, { ...p, children: [
+  /* @__PURE__ */ jsx7("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
+  /* @__PURE__ */ jsx7("path", { d: "M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3" })
+] });
+var Lightbulb = (p) => /* @__PURE__ */ jsx7(Icon, { ...p, children: /* @__PURE__ */ jsx7("path", { d: "M9 18h6M10 22h4M8 14a6 6 0 1 1 8 0c-1 1-1 2-1 3H9c0-1 0-2-1-3z" }) });
+var ShieldOff = (p) => /* @__PURE__ */ jsx7(Icon, { ...p, children: /* @__PURE__ */ jsx7("path", { d: "m3 3 18 18M12 3l7 3v5c0 4-3 7-7 9-4-2-7-5-7-9V6l4-2" }) });
+
+// src/data-table/host.tsx
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var HOST_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.table-host-context");
+var hostRegistry = globalThis;
+var HostContext = hostRegistry[HOST_SLOT] ??= createContext4({});
+function useMatrxDataTableHost() {
+  return useContext4(HostContext);
+}
+
+// src/data-table/useTableNotice.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function useTableNotice() {
+  const host = useMatrxDataTableHost();
+  const [message, setMessage] = useState3(null);
+  const notify = {
+    success(text) {
+      if (host.notify) host.notify.success(text);
+      else setMessage({ text, error: false });
+    },
+    error(text) {
+      if (host.notify) host.notify.error(text);
+      else setMessage({ text, error: true });
+    }
+  };
+  const notice = message ? /* @__PURE__ */ jsxs4("span", { role: message.error ? "alert" : "status", className: message.error ? "text-xs text-destructive" : "text-xs text-muted-foreground", children: [
+    message.text,
+    /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Dismiss notification", className: "ml-2 underline", onClick: () => setMessage(null), children: "Dismiss" })
+  ] }) : null;
+  return { notify, notice };
+}
+
+// src/data-table/copy-payload.ts
+function tableAgentText(value) {
+  if (typeof value === "string") return value;
+  const attributes = Object.entries(value.attributes ?? {}).filter(([, entry]) => entry !== null && entry !== void 0 && entry !== "").map(([key, entry]) => ` ${key}="${String(entry)}"`).join("");
+  const context = Object.entries(value.context ?? {}).filter(([, entry]) => entry !== null && entry !== void 0 && entry !== "").map(([key, entry]) => `<${key}>${String(entry)}</${key}>`).join("\n");
+  const url = typeof window === "undefined" ? "" : window.location.href;
+  const route = typeof window === "undefined" ? "" : window.location.pathname;
+  return `<${value.kind}${attributes}>
+<context>
+<location>${value.location}</location>
+${url ? `<url>${url}</url>` : ""}
+${route ? `<route>${route}</route>` : ""}
+<copied>${value.description}</copied>
+<copied-at>${(/* @__PURE__ */ new Date()).toISOString()}</copied-at>
+${context}
+</context>
+${value.summary ? `<summary>
+${value.summary}
+</summary>
+` : ""}<data format="json">
+\`\`\`json
+${JSON.stringify(value.data, null, 2)}
+\`\`\`
+</data>
+</${value.kind}>`;
+}
+
+// src/data-table/copy.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function resolve(value) {
+  return typeof value === "function" ? value() : value;
+}
+function download(item) {
+  if (!item.build) throw new Error(`No export action is available for ${item.label}.`);
+  const file = item.build();
+  const url = URL.createObjectURL(new Blob([file.content], { type: file.mime }));
+  try {
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${item.label.replace(/[^a-z0-9]+/gi, "-")}.${file.extension}`;
+    document.body.append(link);
+    link.click();
+    link.remove();
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+function CopyButtons(props) {
+  const { CopyControls } = useMatrxDataTableHost();
+  if (CopyControls) return /* @__PURE__ */ jsx10(CopyControls, { ...props });
+  return /* @__PURE__ */ jsx10(DefaultCopyButtons, { ...props });
+}
+function DefaultCopyButtons({ human, agent, json, label, size = "icon", appearance = "segmented", disabled = false, stopPropagation = true, className, aiVariants = [], agentVariant, aiCustom, export: exportConfig, hide }) {
+  const { notify, notice } = useTableNotice();
+  const clipboard = useClipboard({ notify: (message, kind) => notify[kind](message) });
+  const [busy, setBusy] = useState4(false);
+  const [modal, setModal] = useState4(null);
+  const run = async (operation) => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      await operation();
+    } catch (error) {
+      notify.error(error instanceof Error ? error.message : String(error));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const faithfulAgent = agent === void 0 ? [] : [{
+    id: agentVariant?.id ?? "copy-for-ai",
+    label: agentVariant?.label ?? "Copy for AI",
+    ...agentVariant?.hint === void 0 ? {} : { hint: agentVariant.hint },
+    section: "ai",
+    build: () => resolve(agent)
+  }];
+  const orderedAgent = agentVariant?.position === "last" ? [...aiVariants, ...faithfulAgent] : [...faithfulAgent, ...aiVariants];
+  const variants = [
+    ...json === void 0 ? [] : [{ id: "json", label: "Copy JSON", section: "copy", build: () => JSON.stringify(resolve(json), null, 2) }],
+    ...orderedAgent
+  ].filter((variant) => !hide?.includes(variant.section ?? "ai"));
+  const exports = hide?.includes("export") ? void 0 : exportConfig;
+  const showCustom = aiCustom && !hide?.includes("ai");
+  const buttonClass = `${size === "xs" ? "h-8 w-8 lg:h-5 lg:w-8" : ""} ${appearance === "bare" ? "border-0 bg-transparent shadow-none" : ""}`;
+  return /* @__PURE__ */ jsxs5("span", { className: `inline-flex flex-wrap items-center gap-0.5 ${className ?? ""}`, onClick: stopPropagation ? (event) => event.stopPropagation() : void 0, children: [
+    human !== void 0 && !hide?.includes("copy") ? /* @__PURE__ */ jsx10(Button, { type: "button", variant: "ghost", size: "icon", className: buttonClass, disabled: disabled || busy, "aria-label": `Copy ${label}`, onClick: () => void run(() => clipboard.copyText(resolve(human), `${label} copied`)), children: /* @__PURE__ */ jsx10(Copy, { className: "h-3.5 w-3.5" }) }) : null,
+    variants.length > 0 || showCustom || exports ? /* @__PURE__ */ jsxs5(Popover, { children: [
+      /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx10(Button, { type: "button", variant: "ghost", size: "icon", className: buttonClass, disabled: disabled || busy, "aria-label": `Copy ${label} for AI or export`, children: /* @__PURE__ */ jsx10(SlidersHorizontal, { className: "h-3.5 w-3.5" }) }) }),
+      /* @__PURE__ */ jsxs5(PopoverContent, { align: "end", className: "w-64 p-1", children: [
+        variants.map((variant) => /* @__PURE__ */ jsx10(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full justify-start", disabled: busy, onClick: () => void run(async () => {
+          if (variant.onSelect) variant.onSelect();
+          else if (variant.modal) setModal(variant.id);
+          else if (variant.build) await clipboard.copyText(tableAgentText(await variant.build()), variant.successMessage ?? `${label} copied`);
+          else throw new Error(`No copy action is available for ${variant.label}.`);
+        }), children: variant.label }, variant.id)),
+        showCustom ? /* @__PURE__ */ jsx10(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full justify-start", onClick: () => setModal("custom"), children: aiCustom.label ?? "Custom copy\u2026" }) : null,
+        exports?.items.map((item) => /* @__PURE__ */ jsx10(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full justify-start", disabled: busy, onClick: () => void run(async () => {
+          if (item.onSelect) await item.onSelect();
+          else download(item);
+        }), children: item.label }, item.id)),
+        exports?.sheetRows ? /* @__PURE__ */ jsx10(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full justify-start", onClick: () => void run(async () => {
+          const rows = exports.sheetRows?.();
+          if (!rows) return;
+          const keys = [...new Set(rows.flatMap((row) => Object.keys(row)))];
+          const value = (input) => String(input ?? "").replace(/[\t\r\n]+/g, " ");
+          await clipboard.copyText([keys.map(value).join("	"), ...rows.map((row) => keys.map((key) => value(row[key])).join("	"))].join("\n"), "Copied for pasting into Google Sheets");
+        }), children: "Copy for Google Sheets" }) : null
+      ] })
+    ] }) : null,
+    variants.map((variant) => variant.modal && modal === variant.id ? /* @__PURE__ */ jsx10("span", { children: variant.modal({ open: true, onOpenChange: (open) => setModal(open ? variant.id : null) }) }, variant.id) : null),
+    modal === "custom" && aiCustom ? /* @__PURE__ */ jsx10(CustomCopy, { source: aiCustom, onClose: () => setModal(null) }) : null,
+    notice
+  ] });
+}
+function CustomCopy({ source, onClose }) {
+  const [values, setValues] = useState4(() => Object.fromEntries(source.options.map((option) => [option.key, option.default])));
+  const { notify, notice } = useTableNotice();
+  const clipboard = useClipboard({ notify: (message, kind) => notify[kind](message) });
+  let text = "";
+  let error = null;
+  try {
+    const built = source.build(values);
+    text = tableAgentText(source.wrap(built.text, values, built.meta));
+  } catch (raw) {
+    error = raw instanceof Error ? raw.message : String(raw);
+  }
+  return /* @__PURE__ */ jsx10(Dialog, { open: true, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: /* @__PURE__ */ jsxs5(DialogContent, { children: [
+    /* @__PURE__ */ jsx10(DialogHeader, { children: /* @__PURE__ */ jsx10(DialogTitle, { children: source.dialogTitle ?? "Custom copy" }) }),
+    source.dialogDescription ? /* @__PURE__ */ jsx10("p", { className: "text-sm", children: source.dialogDescription }) : null,
+    source.options.map((option) => /* @__PURE__ */ jsxs5("label", { className: "flex items-center justify-between gap-3 text-sm", children: [
+      option.label,
+      option.kind === "toggle" ? /* @__PURE__ */ jsx10("input", { type: "checkbox", checked: values[option.key] === true, onChange: (e) => setValues({ ...values, [option.key]: e.target.checked }) }) : option.kind === "preset" ? /* @__PURE__ */ jsx10("select", { "aria-label": option.label, value: Number(values[option.key]), onChange: (e) => setValues({ ...values, [option.key]: Number(e.target.value) }), children: option.options.map((choice) => /* @__PURE__ */ jsx10("option", { value: choice.value, children: choice.label }, choice.value)) }) : option.kind === "slider" ? /* @__PURE__ */ jsx10("input", { "aria-label": option.label, type: "range", min: 0, max: option.stops.length - 1, step: 1, value: Math.max(0, option.stops.indexOf(Number(values[option.key]))), onChange: (e) => setValues({ ...values, [option.key]: option.stops[Number(e.target.value)] ?? option.default }) }) : /* @__PURE__ */ jsxs5("span", { className: "flex gap-1", children: [
+        option.presets?.map((choice) => /* @__PURE__ */ jsx10(Button, { type: "button", size: "sm", variant: "outline", onClick: () => setValues({ ...values, [option.key]: choice.value }), children: choice.label }, choice.value)),
+        /* @__PURE__ */ jsx10("input", { "aria-label": option.label, type: "number", value: Number(values[option.key]), min: option.min, step: option.step, onChange: (e) => {
+          if (Number.isFinite(e.target.valueAsNumber)) setValues({ ...values, [option.key]: e.target.valueAsNumber });
+        } })
+      ] })
+    ] }, option.key)),
+    error ? /* @__PURE__ */ jsx10("p", { role: "alert", className: "text-destructive", children: error }) : /* @__PURE__ */ jsx10("pre", { className: "max-h-48 overflow-auto whitespace-pre-wrap text-xs", children: text }),
+    notice,
+    /* @__PURE__ */ jsxs5(DialogFooter, { children: [
+      /* @__PURE__ */ jsx10(Button, { type: "button", variant: "outline", onClick: onClose, children: "Close" }),
+      /* @__PURE__ */ jsx10(Button, { type: "button", disabled: error !== null, onClick: () => void clipboard.copyText(text, "Custom copy copied"), children: "Copy" })
+    ] })
+  ] }) });
+}
+
+// src/data-table/MatrxUuidCell.tsx
+import {
+  useEffect as useEffect2,
+  useRef,
+  useState as useState5
+} from "react";
+
+// src/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React7 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React7.forwardRef(({ className, sideOffset = 4, container, animated = true, ...props }, ref) => {
+  const resolved = usePortalContainer(container);
+  return /* @__PURE__ */ jsx11(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx11(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-[10001] overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md",
+        animated && MOTION_POPPER,
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/data-table/MatrxUuidCell.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var SHORT_LEN = 8;
+function shortUuid(id, len = SHORT_LEN) {
+  return id.slice(0, len);
+}
+async function copyText(text) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+  }
+  try {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(ta);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+function MatrxUuidCell({
+  value,
+  label,
+  onOpen,
+  href,
+  token,
+  forbidden = false,
+  className,
+  trailing
+}) {
+  const { resolveEntityDoors, ResourcePeek } = useMatrxDataTableHost();
+  const { notify, notice } = useTableNotice();
+  const [copied, setCopied] = useState5(false);
+  const [opening, setOpening] = useState5(false);
+  const [peekOpen, setPeekOpen] = useState5(false);
+  const timer = useRef(null);
+  useEffect2(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  if (!value) {
+    return /* @__PURE__ */ jsx12("span", { className: "text-muted-foreground/40", children: "\u2014" });
+  }
+  const doors = token ? resolveEntityDoors?.(token, value, href) ?? null : null;
+  const resolvedHref = doors?.href ?? href ?? null;
+  const canPeek = Boolean(doors?.canPeek) && !forbidden;
+  const display = shortUuid(value);
+  const tip = label ? `${label}: ${value}` : value;
+  const stop = (e) => {
+    e.stopPropagation();
+  };
+  const onCopy = (e) => {
+    stop(e);
+    e.preventDefault();
+    void copyText(value).then((ok) => {
+      if (!ok) {
+        notify?.error("Couldn't copy ID");
+        return;
+      }
+      setCopied(true);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 1500);
+    });
+  };
+  const handleOpen = async (e) => {
+    stop(e);
+    e.preventDefault();
+    if (!onOpen || forbidden || opening) return;
+    setOpening(true);
+    try {
+      const result = await onOpen(value);
+      if (result === "forbidden") {
+        notify?.error("You don't have access to open this record");
+      }
+    } catch (err) {
+      notify?.error(
+        `Couldn't open: ${err instanceof Error ? err.message : String(err)}`
+      );
+    } finally {
+      setOpening(false);
+    }
+  };
+  const idNode = (() => {
+    if (forbidden) {
+      return /* @__PURE__ */ jsxs6("span", { className: "inline-flex min-w-0 items-center gap-1 font-mono text-xs text-muted-foreground/70 tabular-nums", children: [
+        /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate", children: display }),
+        /* @__PURE__ */ jsx12(ShieldOff, { className: "h-3 w-3 shrink-0 opacity-60", "aria-hidden": true })
+      ] });
+    }
+    if (onOpen) {
+      return /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Open ${label ?? "record"} ${display}`,
+          onClick: (e) => void handleOpen(e),
+          disabled: opening,
+          className: "inline-flex min-w-0 items-center gap-1 font-mono text-xs text-sky-600 hover:underline dark:text-sky-400 disabled:opacity-60",
+          children: [
+            /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate tabular-nums", children: display }),
+            /* @__PURE__ */ jsx12(PanelRight, { className: "h-3 w-3 shrink-0 opacity-50" })
+          ]
+        }
+      );
+    }
+    if (resolvedHref) {
+      return /* @__PURE__ */ jsxs6(
+        "a",
+        {
+          href: resolvedHref,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          "aria-label": `Open ${label ?? "record"} ${display} in a new tab`,
+          onClick: stop,
+          className: "inline-flex min-w-0 items-center gap-1 font-mono text-xs text-sky-600 hover:underline dark:text-sky-400",
+          children: [
+            /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate tabular-nums", children: display }),
+            /* @__PURE__ */ jsx12(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-50" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx12("span", { className: "min-w-0 truncate font-mono text-xs text-muted-foreground tabular-nums select-all", children: display });
+  })();
+  return /* @__PURE__ */ jsxs6(
+    "span",
+    {
+      "data-matrx-cell-control": true,
+      className: cn(
+        "inline-flex min-w-0 max-w-full items-center gap-0.5 whitespace-nowrap",
+        className
+      ),
+      onClick: stop,
+      children: [
+        /* @__PURE__ */ jsx12(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs6(Tooltip, { children: [
+          /* @__PURE__ */ jsx12(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx12("span", { className: "inline-flex min-w-0 max-w-full items-center", children: idNode }) }),
+          /* @__PURE__ */ jsx12(TooltipContent, { side: "top", className: "max-w-sm break-all font-mono", children: forbidden ? `No access \xB7 ${tip}` : tip })
+        ] }) }),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            onClick: onCopy,
+            "aria-label": copied ? "Copied" : `Copy ${label ?? "id"}`,
+            title: `Copy ${label ?? "id"}: ${value}`,
+            className: cn(
+              "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus:outline-none",
+              copied && "text-primary"
+            ),
+            children: copied ? /* @__PURE__ */ jsx12(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx12(Copy, { className: "h-3 w-3" })
+          }
+        ),
+        canPeek ? /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              stop(e);
+              setPeekOpen(true);
+            },
+            "aria-label": `Quick look at ${label ?? "record"}`,
+            title: `Quick look at ${label ?? "record"}`,
+            className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus:outline-none",
+            children: /* @__PURE__ */ jsx12(Lightbulb, { className: "h-3 w-3" })
+          }
+        ) : null,
+        onOpen && resolvedHref && !forbidden ? /* @__PURE__ */ jsx12(
+          "a",
+          {
+            href: resolvedHref,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            onClick: stop,
+            "aria-label": `Open ${label ?? "record"} in a new tab`,
+            title: `Open ${label ?? "record"} in a new tab`,
+            className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus:outline-none",
+            children: /* @__PURE__ */ jsx12(ExternalLink, { className: "h-3 w-3" })
+          }
+        ) : null,
+        trailing,
+        notice,
+        canPeek && peekOpen && ResourcePeek ? /* @__PURE__ */ jsx12(
+          ResourcePeek,
+          {
+            kind: doors?.peekKind ?? token ?? "record",
+            id: value,
+            onClose: () => setPeekOpen(false),
+            ...href == null ? {} : { href }
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/data-table/entity.ts
+function isUuidValue(value) {
+  return typeof value === "string" && /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value);
+}
+
+// src/data-table/DataRowInspector.tsx
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var noFieldToken = () => null;
+function formatValue(value) {
+  if (value == null) return "\u2014";
+  if (typeof value === "string") return value || "\u2014";
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (value instanceof Date) return value.toISOString();
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date);
+}
+function DataRowInspector({
+  row,
+  title,
+  className,
+  fieldCopy = true,
+  recordKind = "record",
+  recordLabel,
+  location,
+  tokenForField = noFieldToken
+}) {
+  const entries = isPlainObject(row) ? Object.entries(row) : [["value", row]];
+  const fieldButtons = (key, value) => fieldCopy ? /* @__PURE__ */ jsx13("div", { className: "absolute right-1 top-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover/field:opacity-100", children: /* @__PURE__ */ jsx13(
+    CopyButtons,
+    {
+      size: "xs",
+      label: recordLabel ? `${recordLabel} \xB7 ${key}` : key,
+      human: () => formatValue(value),
+      agent: () => ({
+        kind: `${recordKind}-field`,
+        location: location ?? "Data row inspector",
+        description: `The "${key}" field of one ${recordLabel ?? recordKind}.`,
+        data: { field: key, value, record: row },
+        attributes: { field: key }
+      })
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn("flex h-full min-h-0 flex-col overflow-hidden", className),
+      children: [
+        title ? /* @__PURE__ */ jsx13("div", { className: "shrink-0 border-b border-border px-3 py-2 text-sm font-medium", children: title }) : null,
+        /* @__PURE__ */ jsx13("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: /* @__PURE__ */ jsx13("dl", { className: "space-y-2", children: entries.map(([key, value]) => {
+          if (isUuidValue(value)) {
+            return /* @__PURE__ */ jsxs7(
+              "div",
+              {
+                className: "group/field relative grid grid-cols-[minmax(7rem,9rem)_1fr] gap-2 rounded-md border border-border/60 bg-muted/20 px-2.5 py-2",
+                children: [
+                  /* @__PURE__ */ jsx13("dt", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: key }),
+                  /* @__PURE__ */ jsx13("dd", { className: "min-w-0", children: /* @__PURE__ */ jsx13(
+                    MatrxUuidCell,
+                    {
+                      value,
+                      label: key,
+                      token: tokenForField(key, row)
+                    }
+                  ) })
+                ]
+              },
+              key
+            );
+          }
+          const formatted = formatValue(value);
+          const multiline = formatted.includes("\n") || formatted.length > 80;
+          return /* @__PURE__ */ jsxs7(
+            "div",
+            {
+              className: "group/field relative grid grid-cols-[minmax(7rem,9rem)_1fr] gap-2 rounded-md border border-border/60 bg-muted/20 py-2 pl-2.5 pr-12",
+              children: [
+                /* @__PURE__ */ jsx13("dt", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: key }),
+                /* @__PURE__ */ jsx13(
+                  "dd",
+                  {
+                    className: cn(
+                      "min-w-0 text-sm text-foreground break-words",
+                      multiline && "whitespace-pre-wrap font-mono text-xs leading-relaxed"
+                    ),
+                    children: formatted
+                  }
+                ),
+                fieldButtons(key, value)
+              ]
+            },
+            key
+          );
+        }) }) })
+      ]
+    }
+  );
+}
+export {
+  DataRowInspector
+};
+//# sourceMappingURL=data-row-inspector.js.map