@veltrixsecops/app-sdk 2.0.0 → 2.2.0

package/dist/ui/index.cjs

@@ -0,0 +1,662 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/index.tsx
+var ui_exports = {};
+__export(ui_exports, {
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  CardBody: () => CardBody,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  Checkbox: () => Checkbox,
+  DataTable: () => DataTable,
+  EmptyState: () => EmptyState,
+  FormDialog: () => FormDialog,
+  FormField: () => FormField,
+  Input: () => Input,
+  Select: () => Select,
+  Skeleton: () => Skeleton,
+  SkeletonCard: () => SkeletonCard,
+  SkeletonText: () => SkeletonText,
+  Spinner: () => Spinner,
+  StatsCard: () => StatsCard,
+  Tabs: () => Tabs,
+  Textarea: () => Textarea,
+  Tooltip: () => Tooltip,
+  useConfirmDialog: () => useConfirmDialog,
+  useToast: () => useToast
+});
+module.exports = __toCommonJS(ui_exports);
+var React = __toESM(require("react"), 1);
+
+// src/client/index.ts
+var HOST_RUNTIME_GLOBAL = "__VELTRIX_APP_RUNTIME__";
+function getHostRuntime() {
+  const runtime = globalThis[HOST_RUNTIME_GLOBAL];
+  return runtime ?? null;
+}
+
+// src/ui/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function getHostUi(name) {
+  return getHostRuntime()?.ui?.[name];
+}
+var fallbackNote = { fontFamily: "inherit" };
+var Button = React.forwardRef((props, ref) => {
+  const HostButton = getHostUi("Button");
+  if (HostButton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostButton, { ref, ...props });
+  const {
+    variant: _variant,
+    size: _size,
+    isLoading,
+    loadingText,
+    fullWidth,
+    leftIcon,
+    rightIcon,
+    children,
+    disabled,
+    type,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      disabled: disabled || isLoading,
+      "aria-busy": isLoading || void 0,
+      style: {
+        ...fallbackNote,
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "6px 14px",
+        borderRadius: 6,
+        border: "1px solid currentColor",
+        background: "transparent",
+        cursor: disabled || isLoading ? "not-allowed" : "pointer",
+        width: fullWidth ? "100%" : void 0,
+        opacity: disabled || isLoading ? 0.6 : 1,
+        justifyContent: "center",
+        ...style
+      },
+      ...rest,
+      children: [
+        leftIcon,
+        isLoading ? loadingText ?? children : children,
+        rightIcon
+      ]
+    }
+  );
+});
+Button.displayName = "Button";
+var BADGE_FALLBACK_COLORS = {
+  default: "#6b7280",
+  primary: "#4f46e5",
+  secondary: "#6b7280",
+  success: "#16a34a",
+  danger: "#dc2626",
+  warning: "#d97706",
+  info: "#0284c7"
+};
+var Badge = ({ variant = "default", size = "md", rounded, dot, children, style, ...rest }) => {
+  const HostBadge = getHostUi("Badge");
+  if (HostBadge) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostBadge, { variant, size, rounded, dot, style, ...rest, children });
+  const color = BADGE_FALLBACK_COLORS[variant];
+  const fontSize = size === "sm" ? 11 : size === "lg" ? 14 : 12;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      style: {
+        ...fallbackNote,
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        padding: size === "sm" ? "1px 6px" : size === "lg" ? "3px 10px" : "2px 8px",
+        borderRadius: rounded ? 999 : 4,
+        border: `1px solid ${color}`,
+        color,
+        fontSize,
+        fontWeight: 500,
+        ...style
+      },
+      ...rest,
+      children: [
+        dot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { width: 6, height: 6, borderRadius: "50%", background: color } }),
+        children
+      ]
+    }
+  );
+};
+Badge.displayName = "Badge";
+var Card = ({ children, style, ...rest }) => {
+  const HostCard = getHostUi("Card");
+  if (HostCard) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostCard, { style, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...fallbackNote, border: "1px solid #d1d5db", borderRadius: 8, overflow: "hidden", ...style }, ...rest, children });
+};
+Card.displayName = "Card";
+var CardHeader = ({ actions, children, style, ...rest }) => {
+  const HostCardHeader = getHostUi("CardHeader");
+  if (HostCardHeader) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostCardHeader, { actions, style, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        ...fallbackNote,
+        padding: "12px 16px",
+        borderBottom: "1px solid #d1d5db",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, minWidth: 0 }, children }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: actions })
+      ]
+    }
+  );
+};
+CardHeader.displayName = "CardHeader";
+var CardBody = ({ children, style, ...rest }) => {
+  const HostCardBody = getHostUi("CardBody");
+  if (HostCardBody) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostCardBody, { style, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...fallbackNote, padding: "12px 16px", ...style }, ...rest, children });
+};
+CardBody.displayName = "CardBody";
+var CardFooter = ({ children, style, ...rest }) => {
+  const HostCardFooter = getHostUi("CardFooter");
+  if (HostCardFooter) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostCardFooter, { style, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...fallbackNote, padding: "12px 16px", borderTop: "1px solid #d1d5db", ...style }, ...rest, children });
+};
+CardFooter.displayName = "CardFooter";
+var Input = React.forwardRef((props, ref) => {
+  const HostInput = getHostUi("Input");
+  if (HostInput) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostInput, { ref, ...props });
+  const { label, error, helperText, leftIcon, rightIcon, fullWidth = true, id, style, ...rest } = props;
+  const inputId = id ?? (label ? `vx-input-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...fallbackNote, width: fullWidth ? "100%" : void 0 }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: inputId, style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4 }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+      leftIcon,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          ref,
+          id: inputId,
+          "aria-invalid": !!error || void 0,
+          style: { flex: 1, padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af", ...style },
+          ...rest
+        }
+      ),
+      rightIcon
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: helperText })
+  ] });
+});
+Input.displayName = "Input";
+var Textarea = React.forwardRef((props, ref) => {
+  const HostTextarea = getHostUi("Textarea");
+  if (HostTextarea) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostTextarea, { ref, ...props });
+  const { label, error, helperText, fullWidth = true, id, rows = 4, style, ...rest } = props;
+  const textareaId = id ?? (label ? `vx-textarea-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...fallbackNote, width: fullWidth ? "100%" : void 0 }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: textareaId, style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4 }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
+      {
+        ref,
+        id: textareaId,
+        rows,
+        "aria-invalid": !!error || void 0,
+        style: { width: "100%", padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af", ...style },
+        ...rest
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: helperText })
+  ] });
+});
+Textarea.displayName = "Textarea";
+var Checkbox = React.forwardRef((props, ref) => {
+  const HostCheckbox = getHostUi("Checkbox");
+  if (HostCheckbox) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostCheckbox, { ref, ...props });
+  const { label, error, helperText, id, disabled, ...rest } = props;
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fallbackNote, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref, id: inputId, type: "checkbox", disabled, "aria-invalid": !!error || void 0, ...rest }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: inputId, style: { fontSize: 13, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.6 : 1 }, children: label })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: helperText })
+  ] });
+});
+Checkbox.displayName = "Checkbox";
+var Select = (props) => {
+  const HostSelect = getHostUi("Select");
+  if (HostSelect) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSelect, { ...props });
+  const { options, value, onChange, placeholder = "Select\u2026", label, error, helperText, disabled, fullWidth = true, id, name, className } = props;
+  const selectId = id ?? (label ? `vx-select-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { ...fallbackNote, width: fullWidth ? "100%" : void 0 }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: selectId, style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4 }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "select",
+      {
+        id: selectId,
+        name,
+        "aria-label": props["aria-label"],
+        "aria-invalid": !!error || void 0,
+        disabled,
+        value: value ?? "",
+        onChange: (event) => onChange?.(event.target.value),
+        style: { width: "100%", padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" },
+        children: [
+          placeholder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", disabled: true, children: placeholder }),
+          options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: helperText })
+  ] });
+};
+Select.displayName = "Select";
+var FormField = (props) => {
+  const HostFormField = getHostUi("FormField");
+  if (HostFormField) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostFormField, { ...props });
+  const { label, htmlFor, error, hint, required, className, children } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: fallbackNote, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor, style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4 }, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { color: "#dc2626", marginLeft: 2 }, children: "*" })
+    ] }),
+    children,
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: hint })
+  ] });
+};
+FormField.displayName = "FormField";
+var Tabs = (props) => {
+  const HostTabs = getHostUi("Tabs");
+  if (HostTabs) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostTabs, { ...props });
+  const { tabs, defaultActiveIndex = 0, activeIndex, onTabChange, children, className } = props;
+  const [internalIndex, setInternalIndex] = React.useState(defaultActiveIndex);
+  const isControlled = activeIndex !== void 0;
+  const currentIndex = isControlled ? activeIndex : internalIndex;
+  const activeTab = tabs[currentIndex];
+  const selectTab = (index) => {
+    if (tabs[index]?.disabled) return;
+    if (!isControlled) setInternalIndex(index);
+    onTabChange?.(index);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: fallbackNote, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "tablist", style: { display: "flex", gap: 4, borderBottom: "1px solid #d1d5db" }, children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": index === currentIndex,
+        disabled: tab.disabled,
+        onClick: () => selectTab(index),
+        style: {
+          padding: "6px 12px",
+          border: "none",
+          borderBottom: index === currentIndex ? "2px solid currentColor" : "2px solid transparent",
+          background: "transparent",
+          cursor: tab.disabled ? "not-allowed" : "pointer",
+          fontWeight: index === currentIndex ? 600 : 400,
+          opacity: tab.disabled ? 0.5 : 1
+        },
+        children: tab.label
+      },
+      tab.key ?? index
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "tabpanel", style: { padding: 12 }, children: children || activeTab?.content })
+  ] });
+};
+Tabs.displayName = "Tabs";
+var EmptyState = (props) => {
+  const HostEmptyState = getHostUi("EmptyState");
+  if (HostEmptyState) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostEmptyState, { ...props });
+  const { icon, title, description, action, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { ...fallbackNote, textAlign: "center", padding: "32px 16px" }, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 12 }, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontWeight: 600, marginBottom: description ? 4 : 0 }, children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 13, color: "#6b7280", marginBottom: action ? 12 : 0 }, children: description }),
+    action
+  ] });
+};
+EmptyState.displayName = "EmptyState";
+var skeletonRadius = { text: 4, circular: "50%", rectangular: 8 };
+var Skeleton = (props) => {
+  const HostSkeleton = getHostUi("Skeleton");
+  if (HostSkeleton) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSkeleton, { ...props });
+  const { variant = "text", width, height, style, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        background: "#e5e7eb",
+        borderRadius: skeletonRadius[variant],
+        width: width ?? (variant === "text" ? "100%" : void 0),
+        height: height ?? (variant === "text" ? 14 : void 0),
+        ...style
+      },
+      ...rest
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
+var SkeletonText = (props) => {
+  const HostSkeletonText = getHostUi("SkeletonText");
+  if (HostSkeletonText) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSkeletonText, { ...props });
+  const { lines = 3, width = "100%", lastLineWidth = "80%", className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: { display: "flex", flexDirection: "column", gap: 8 }, children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { variant: "text", width: index === lines - 1 ? lastLineWidth : width }, index)) });
+};
+SkeletonText.displayName = "SkeletonText";
+var SkeletonCard = (props) => {
+  const HostSkeletonCard = getHostUi("SkeletonCard");
+  if (HostSkeletonCard) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSkeletonCard, { ...props });
+  const { hasAvatar, hasActions, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 12 }, children: [
+      hasAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { variant: "circular", width: 40, height: 40 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { variant: "text", width: "60%" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonText, { lines: 2 }) })
+      ] })
+    ] }),
+    hasActions && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { variant: "rectangular", width: 72, height: 30 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { variant: "rectangular", width: 72, height: 30 })
+    ] })
+  ] });
+};
+SkeletonCard.displayName = "SkeletonCard";
+var Tooltip = (props) => {
+  const HostTooltip = getHostUi("Tooltip");
+  if (HostTooltip) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostTooltip, { ...props });
+  const { content, disabled, className, children } = props;
+  const titleText = typeof content === "string" ? content : void 0;
+  if (disabled || !titleText) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className, title: titleText, style: { display: "inline-flex" }, children });
+};
+Tooltip.displayName = "Tooltip";
+var spinnerDiameter = { sm: 16, md: 24, lg: 32 };
+var Spinner = (props) => {
+  const HostSpinner = getHostUi("Spinner");
+  if (HostSpinner) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSpinner, { ...props });
+  const { size = "md", className, label } = props;
+  const diameter = spinnerDiameter[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, role: "status", "aria-live": "polite", style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        "aria-hidden": "true",
+        style: {
+          width: diameter,
+          height: diameter,
+          borderRadius: "50%",
+          border: "2px solid currentColor",
+          borderTopColor: "transparent",
+          animation: "vx-sdk-spin 0.8s linear infinite"
+        }
+      }
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { marginTop: 8, fontSize: 12, color: "#6b7280" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: label || "Loading" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: "@keyframes vx-sdk-spin { to { transform: rotate(360deg) } }" })
+  ] });
+};
+Spinner.displayName = "Spinner";
+function FallbackDataTable(props) {
+  const { columns, data, rowKey, isLoading, emptyState, onRowClick, rowActions, className } = props;
+  const showEmpty = !isLoading && data.length === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: fallbackNote, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+      columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: { textAlign: column.align ?? "left", padding: "8px 10px", borderBottom: "1px solid #d1d5db" }, children: column.header }, column.key)),
+      rowActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: { padding: "8px 10px", borderBottom: "1px solid #d1d5db" } })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", { children: [
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: Math.max(columns.length + (rowActions ? 1 : 0), 1), style: { padding: "12px 10px" }, children: "Loading\u2026" }) }),
+      showEmpty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: Math.max(columns.length + (rowActions ? 1 : 0), 1), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyState, { title: emptyState?.title ?? "No data", description: emptyState?.description, icon: emptyState?.icon, action: emptyState?.action }) }) }),
+      !isLoading && !showEmpty && data.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "tr",
+        {
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          style: { cursor: onRowClick ? "pointer" : void 0, borderBottom: "1px solid #e5e7eb" },
+          children: [
+            columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { textAlign: column.align ?? "left", padding: "8px 10px" }, children: column.render ? column.render(row) : String(row[column.key] ?? "") }, column.key)),
+            rowActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { padding: "8px 10px" }, onClick: (event) => event.stopPropagation(), children: rowActions(row) })
+          ]
+        },
+        rowKey(row)
+      ))
+    ] })
+  ] }) });
+}
+function DataTable(props) {
+  const HostDataTable = getHostUi("DataTable");
+  if (HostDataTable) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostDataTable, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackDataTable, { ...props });
+}
+var DELTA_FALLBACK_COLOR = {
+  up: "#16a34a",
+  down: "#dc2626",
+  neutral: "#6b7280"
+};
+var StatsCard = (props) => {
+  const HostStatsCard = getHostUi("StatsCard");
+  if (HostStatsCard) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostStatsCard, { ...props });
+  const { label, value, icon, delta, isLoading, onClick, className } = props;
+  const isClickable = Boolean(onClick);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
+      onClick,
+      onKeyDown: isClickable ? (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onClick?.();
+        }
+      } : void 0,
+      className,
+      style: {
+        ...fallbackNote,
+        border: "1px solid #d1d5db",
+        borderRadius: 8,
+        padding: 16,
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: 12,
+        cursor: isClickable ? "pointer" : void 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 13, color: "#6b7280", margin: 0 }, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 28, fontWeight: 700, margin: "4px 0 0" }, children: isLoading ? "\u2026" : value }),
+          delta && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { fontSize: 13, color: DELTA_FALLBACK_COLOR[delta.direction], margin: "4px 0 0" }, children: [
+            delta.value,
+            " ",
+            delta.label
+          ] })
+        ] }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", children: icon })
+      ]
+    }
+  );
+};
+StatsCard.displayName = "StatsCard";
+var FORM_DIALOG_MAX_WIDTH = { sm: 420, md: 520, lg: 680 };
+var FormDialog = (props) => {
+  const HostFormDialog = getHostUi("FormDialog");
+  if (HostFormDialog) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostFormDialog, { ...props });
+  const {
+    isOpen,
+    onClose,
+    title,
+    description,
+    children,
+    onSubmit,
+    submitText = "Save",
+    cancelText = "Cancel",
+    isSubmitting = false,
+    error = null,
+    size = "md",
+    disableBackdropClose = false,
+    submitDisabled = false
+  } = props;
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && !isSubmitting) onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, isSubmitting, onClose]);
+  if (!isOpen) return null;
+  const requestClose = () => {
+    if (!isSubmitting) onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50 },
+      onClick: disableBackdropClose ? void 0 : requestClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": title,
+          style: { background: "white", color: "black", borderRadius: 8, width: "100%", maxWidth: FORM_DIALOG_MAX_WIDTH[size], maxHeight: "80vh", overflow: "auto", ...fallbackNote },
+          onClick: (event) => event.stopPropagation(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "form",
+            {
+              onSubmit: (event) => {
+                event.preventDefault();
+                void onSubmit();
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, borderBottom: "1px solid #d1d5db" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { margin: 0, fontSize: 16, fontWeight: 600 }, children: title }),
+                  description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "4px 0 0", fontSize: 13, color: "#6b7280" }, children: description })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, display: "flex", flexDirection: "column", gap: 12 }, children: [
+                  error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", style: { margin: 0, fontSize: 13, color: "#dc2626" }, children: error }),
+                  children
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, borderTop: "1px solid #d1d5db", display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { type: "button", variant: "secondary", onClick: requestClose, disabled: isSubmitting, children: cancelText }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { type: "submit", variant: "primary", isLoading: isSubmitting, disabled: submitDisabled, children: submitText })
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+FormDialog.displayName = "FormDialog";
+function fallbackToast(message, options) {
+  console.warn(`[@veltrixsecops/app-sdk/ui] Toast (${options?.variant ?? "info"}): ${message}`);
+  return "fallback-toast";
+}
+var fallbackToastContext = {
+  toasts: [],
+  toast: fallbackToast,
+  success: (message) => fallbackToast(message, { variant: "success" }),
+  error: (message) => fallbackToast(message, { variant: "error" }),
+  warning: (message) => fallbackToast(message, { variant: "warning" }),
+  info: (message) => fallbackToast(message, { variant: "info" }),
+  promise: (promise) => promise,
+  dismiss: () => {
+  },
+  dismissAll: () => {
+  }
+};
+function useToast() {
+  const hostUseToast = getHostUi("useToast");
+  if (hostUseToast) return hostUseToast();
+  return fallbackToastContext;
+}
+var fallbackConfirmationContext = {
+  confirm: (options) => {
+    console.warn(
+      `[@veltrixsecops/app-sdk/ui] ConfirmationDialog is only available inside the Veltrix platform \u2014 "${options.title}" auto-resolved to "not confirmed" (fail closed).`
+    );
+    return Promise.resolve(false);
+  }
+};
+function useConfirmDialog() {
+  const hostUseConfirmDialog = getHostUi("useConfirmDialog");
+  if (hostUseConfirmDialog) return hostUseConfirmDialog();
+  return fallbackConfirmationContext;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Checkbox,
+  DataTable,
+  EmptyState,
+  FormDialog,
+  FormField,
+  Input,
+  Select,
+  Skeleton,
+  SkeletonCard,
+  SkeletonText,
+  Spinner,
+  StatsCard,
+  Tabs,
+  Textarea,
+  Tooltip,
+  useConfirmDialog,
+  useToast
+});
+//# sourceMappingURL=index.cjs.map