@burdenoff/microfe-devportal 2026.830.1 → 2026.830.2

package/dist/devportal/components/ConfirmDialog.js

@@ -1,17 +1,14 @@
-import { cn as e } from "../utils/cn.js";
-import { useEffect as t, useId as n, useRef as r } from "react";
-import { useI18n as i } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useTr as e } from "../utils/i18n.js";
+import { cn as t } from "../utils/cn.js";
+import { useEffect as n, useId as r, useRef as i } from "react";
 import { AlertTriangle as a, CheckCircle as o, Info as s, XCircle as c } from "lucide-react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/devportal/components/ConfirmDialog.tsx
 var d = ({ open: d, onOpenChange: f, onConfirm: p, title: m, description: h, confirmLabel: g = "Confirm", cancelLabel: _ = "Cancel", variant: v = "default", loading: y = !1, children: b }) => {
-	let x = n(), S = n(), C = r(null), w = r(null), T = r(null), { t: E } = i(), D = (e, t) => {
-		let n = E(e);
-		return n === e ? t : n;
-	}, O = r(f);
-	if (t(() => {
-		O.current = f;
-	}, [f]), t(() => {
+	let x = r(), S = r(), C = i(null), w = i(null), T = i(null), E = e(), D = i(f);
+	if (n(() => {
+		D.current = f;
+	}, [f]), n(() => {
 		if (!d) return;
 		T.current = document.activeElement;
 		let e = document.body.style.overflow;
@@ -21,13 +18,13 @@ var d = ({ open: d, onOpenChange: f, onConfirm: p, title: m, description: h, con
 			t?.focus();
 		});
 		let n = (e) => {
-			e.key === "Escape" && !y && (e.preventDefault(), O.current(!1));
+			e.key === "Escape" && !y && (e.preventDefault(), D.current(!1));
 		};
 		return document.addEventListener("keydown", n), () => {
 			document.body.style.overflow = e, document.removeEventListener("keydown", n), T.current?.focus();
 		};
 	}, [y, d]), !d) return null;
-	let k = {
+	let O = {
 		default: {
 			icon: /* @__PURE__ */ l(s, { className: "h-6 w-6 text-accent-blue" }),
 			iconBg: "bg-status-info-bg-subtle",
@@ -48,14 +45,14 @@ var d = ({ open: d, onOpenChange: f, onConfirm: p, title: m, description: h, con
 			iconBg: "bg-status-success-bg-subtle",
 			button: "bg-status-success-bg text-white hover:bg-status-success-bg/90"
 		}
-	}[v === "destructive" ? "danger" : v], A = () => f(!1);
+	}[v === "destructive" ? "danger" : v], k = () => f(!1);
 	return /* @__PURE__ */ u("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center",
 		children: [/* @__PURE__ */ l("button", {
 			type: "button",
 			"aria-label": "Close dialog backdrop",
 			className: "absolute inset-0 bg-bg-overlay",
-			onClick: A
+			onClick: k
 		}), /* @__PURE__ */ u("div", {
 			ref: C,
 			role: "dialog",
@@ -67,8 +64,8 @@ var d = ({ open: d, onOpenChange: f, onConfirm: p, title: m, description: h, con
 			children: [/* @__PURE__ */ u("div", {
 				className: "flex items-start gap-4",
 				children: [/* @__PURE__ */ l("div", {
-					className: e("rounded-full p-2", k.iconBg),
-					children: k.icon
+					className: t("rounded-full p-2", O.iconBg),
+					children: O.icon
 				}), /* @__PURE__ */ u("div", {
 					className: "flex-1",
 					children: [
@@ -93,7 +90,7 @@ var d = ({ open: d, onOpenChange: f, onConfirm: p, title: m, description: h, con
 				className: "mt-6 flex justify-end gap-3",
 				children: [/* @__PURE__ */ l("button", {
 					type: "button",
-					onClick: A,
+					onClick: k,
 					disabled: y,
 					className: "rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50",
 					children: _
@@ -102,13 +99,13 @@ var d = ({ open: d, onOpenChange: f, onConfirm: p, title: m, description: h, con
 					type: "button",
 					onClick: p,
 					disabled: y,
-					className: e("rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50", k.button),
-					children: y ? D("devportal.processing", "Processing...") : g
+					className: t("rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50", O.button),
+					children: y ? E("devportal.processing", "Processing...") : g
 				})]
 			})]
 		})]
 	});
-}, f = ({ variant: t = "info", title: n, children: r, onDismiss: i, className: d }) => {
+}, f = ({ variant: e = "info", title: n, children: r, onDismiss: i, className: d }) => {
 	let f = {
 		info: "bg-status-info-bg-subtle border-border-subtle text-status-info-text",
 		warning: "bg-status-warning-bg-subtle border-border-subtle text-status-warning-text",
@@ -121,11 +118,11 @@ var d = ({ open: d, onOpenChange: f, onConfirm: p, title: m, description: h, con
 		success: /* @__PURE__ */ l(o, { className: "h-5 w-5" })
 	};
 	return /* @__PURE__ */ l("div", {
-		className: e("rounded-lg border p-4", f[t], d),
+		className: t("rounded-lg border p-4", f[e], d),
 		children: /* @__PURE__ */ u("div", {
 			className: "flex items-start gap-3",
 			children: [
-				p[t],
+				p[e],
 				/* @__PURE__ */ u("div", {
 					className: "flex-1",
 					children: [n && /* @__PURE__ */ l("h4", {

package/dist/devportal/components/ConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.js","names":[],"sources":["../../../src/devportal/components/ConfirmDialog.tsx"],"sourcesContent":["import { useEffect, useId, useRef, type FC, type ReactNode } from \"react\";\nimport { AlertTriangle, Info, CheckCircle, XCircle } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onConfirm: () => void | Promise<void>;\n  title: string;\n  description?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  variant?: \"default\" | \"danger\" | \"warning\" | \"success\" | \"destructive\";\n  loading?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Confirmation dialog component\n */\nexport const ConfirmDialog: FC<ConfirmDialogProps> = ({\n  open,\n  onOpenChange,\n  onConfirm,\n  title,\n  description,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  variant = \"default\",\n  loading = false,\n  children,\n}) => {\n  const titleId = useId();\n  const descriptionId = useId();\n  const dialogRef = useRef<HTMLDivElement | null>(null);\n  const confirmButtonRef = useRef<HTMLButtonElement | null>(null);\n  const previousFocusRef = useRef<HTMLElement | null>(null);\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  // Keep a stable ref to the latest onOpenChange. Parents commonly pass an\n  // inline arrow (new reference every render), so depending on it directly\n  // would re-run the focus effect on every keystroke and yank focus away from\n  // form inputs. Storing it in a ref lets the effect depend only on open/loading.\n  const onOpenChangeRef = useRef(onOpenChange);\n  useEffect(() => {\n    onOpenChangeRef.current = onOpenChange;\n  }, [onOpenChange]);\n\n  useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n\n    previousFocusRef.current = document.activeElement as HTMLElement | null;\n    const originalOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n\n    // For form dialogs (with children), focus the container so Tab naturally\n    // walks through the form fields first. Only auto-focus the confirm button\n    // for simple confirmation dialogs that have no form fields.\n    const focusTarget = children\n      ? dialogRef.current\n      : (confirmButtonRef.current ?? dialogRef.current);\n    window.requestAnimationFrame(() => {\n      focusTarget?.focus();\n    });\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" && !loading) {\n        event.preventDefault();\n        onOpenChangeRef.current(false);\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      document.body.style.overflow = originalOverflow;\n      document.removeEventListener(\"keydown\", onKeyDown);\n      previousFocusRef.current?.focus();\n    };\n    // children is intentionally omitted: it re-creates every render and would\n    // re-trigger focus-stealing on each keystroke. Only open/loading gate this.\n  }, [loading, open]);\n\n  if (!open) return null;\n\n  // Map 'destructive' to 'danger' for internal use\n  const normalizedVariant = variant === \"destructive\" ? \"danger\" : variant;\n\n  const variantStyles = {\n    default: {\n      icon: <Info className=\"h-6 w-6 text-accent-blue\" />,\n      iconBg: \"bg-status-info-bg-subtle\",\n      button:\n        \"bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90\",\n    },\n    danger: {\n      icon: <XCircle className=\"h-6 w-6 text-status-error-text\" />,\n      iconBg: \"bg-status-error-bg-subtle\",\n      button: \"bg-status-error-bg text-white hover:bg-status-error-bg/90\",\n    },\n    warning: {\n      icon: <AlertTriangle className=\"h-6 w-6 text-status-warning-text\" />,\n      iconBg: \"bg-status-warning-bg-subtle\",\n      button: \"bg-status-warning-bg text-white hover:bg-status-warning-bg/90\",\n    },\n    success: {\n      icon: <CheckCircle className=\"h-6 w-6 text-status-success-text\" />,\n      iconBg: \"bg-status-success-bg-subtle\",\n      button: \"bg-status-success-bg text-white hover:bg-status-success-bg/90\",\n    },\n  };\n\n  const styles = variantStyles[normalizedVariant];\n\n  const handleClose = () => onOpenChange(false);\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <button\n        type=\"button\"\n        aria-label=\"Close dialog backdrop\"\n        className=\"absolute inset-0 bg-bg-overlay\"\n        onClick={handleClose}\n      />\n\n      {/* Dialog */}\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={description || children ? descriptionId : undefined}\n        tabIndex={-1}\n        className=\"relative z-10 w-full max-w-md rounded-lg bg-bg-surface p-6 shadow-xl\"\n      >\n        <div className=\"flex items-start gap-4\">\n          <div className={cn(\"rounded-full p-2\", styles.iconBg)}>\n            {styles.icon}\n          </div>\n          <div className=\"flex-1\">\n            <h3 id={titleId} className=\"text-lg font-semibold\">\n              {title}\n            </h3>\n            {description && (\n              <p\n                id={descriptionId}\n                className=\"mt-2 text-sm text-text-secondary\"\n              >\n                {description}\n              </p>\n            )}\n            {children && (\n              <div\n                className=\"mt-4\"\n                id={description ? undefined : descriptionId}\n              >\n                {children}\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div className=\"mt-6 flex justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={handleClose}\n            disabled={loading}\n            className=\"rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n          >\n            {cancelLabel}\n          </button>\n          <button\n            ref={confirmButtonRef}\n            type=\"button\"\n            onClick={onConfirm}\n            disabled={loading}\n            className={cn(\n              \"rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50\",\n              styles.button,\n            )}\n          >\n            {loading\n              ? tr(\"devportal.processing\", \"Processing...\")\n              : confirmLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n/**\n * Alert banner component\n */\nexport const Alert: FC<{\n  variant?: \"info\" | \"warning\" | \"error\" | \"success\";\n  title?: string;\n  children: ReactNode;\n  onDismiss?: () => void;\n  className?: string;\n}> = ({ variant = \"info\", title, children, onDismiss, className }) => {\n  const variantStyles = {\n    info: \"bg-status-info-bg-subtle border-border-subtle text-status-info-text\",\n    warning:\n      \"bg-status-warning-bg-subtle border-border-subtle text-status-warning-text\",\n    error:\n      \"bg-status-error-bg-subtle border-border-subtle text-status-error-text\",\n    success:\n      \"bg-status-success-bg-subtle border-border-subtle text-status-success-text\",\n  };\n\n  const icons = {\n    info: <Info className=\"h-5 w-5\" />,\n    warning: <AlertTriangle className=\"h-5 w-5\" />,\n    error: <XCircle className=\"h-5 w-5\" />,\n    success: <CheckCircle className=\"h-5 w-5\" />,\n  };\n\n  return (\n    <div\n      className={cn(\"rounded-lg border p-4\", variantStyles[variant], className)}\n    >\n      <div className=\"flex items-start gap-3\">\n        {icons[variant]}\n        <div className=\"flex-1\">\n          {title && <h4 className=\"font-medium\">{title}</h4>}\n          <div className=\"text-sm\">{children}</div>\n        </div>\n        {onDismiss && (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            className=\"hover:opacity-70\"\n          >\n            <XCircle className=\"h-5 w-5\" />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ConfirmDialog.js","names":[],"sources":["../../../src/devportal/components/ConfirmDialog.tsx"],"sourcesContent":["import { useEffect, useId, useRef, type FC, type ReactNode } from \"react\";\nimport { AlertTriangle, Info, CheckCircle, XCircle } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onConfirm: () => void | Promise<void>;\n  title: string;\n  description?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  variant?: \"default\" | \"danger\" | \"warning\" | \"success\" | \"destructive\";\n  loading?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Confirmation dialog component\n */\nexport const ConfirmDialog: FC<ConfirmDialogProps> = ({\n  open,\n  onOpenChange,\n  onConfirm,\n  title,\n  description,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  variant = \"default\",\n  loading = false,\n  children,\n}) => {\n  const titleId = useId();\n  const descriptionId = useId();\n  const dialogRef = useRef<HTMLDivElement | null>(null);\n  const confirmButtonRef = useRef<HTMLButtonElement | null>(null);\n  const previousFocusRef = useRef<HTMLElement | null>(null);\n  const tr = useTr();\n\n  // Keep a stable ref to the latest onOpenChange. Parents commonly pass an\n  // inline arrow (new reference every render), so depending on it directly\n  // would re-run the focus effect on every keystroke and yank focus away from\n  // form inputs. Storing it in a ref lets the effect depend only on open/loading.\n  const onOpenChangeRef = useRef(onOpenChange);\n  useEffect(() => {\n    onOpenChangeRef.current = onOpenChange;\n  }, [onOpenChange]);\n\n  useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n\n    previousFocusRef.current = document.activeElement as HTMLElement | null;\n    const originalOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n\n    // For form dialogs (with children), focus the container so Tab naturally\n    // walks through the form fields first. Only auto-focus the confirm button\n    // for simple confirmation dialogs that have no form fields.\n    const focusTarget = children\n      ? dialogRef.current\n      : (confirmButtonRef.current ?? dialogRef.current);\n    window.requestAnimationFrame(() => {\n      focusTarget?.focus();\n    });\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" && !loading) {\n        event.preventDefault();\n        onOpenChangeRef.current(false);\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      document.body.style.overflow = originalOverflow;\n      document.removeEventListener(\"keydown\", onKeyDown);\n      previousFocusRef.current?.focus();\n    };\n    // children is intentionally omitted: it re-creates every render and would\n    // re-trigger focus-stealing on each keystroke. Only open/loading gate this.\n  }, [loading, open]);\n\n  if (!open) return null;\n\n  // Map 'destructive' to 'danger' for internal use\n  const normalizedVariant = variant === \"destructive\" ? \"danger\" : variant;\n\n  const variantStyles = {\n    default: {\n      icon: <Info className=\"h-6 w-6 text-accent-blue\" />,\n      iconBg: \"bg-status-info-bg-subtle\",\n      button:\n        \"bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90\",\n    },\n    danger: {\n      icon: <XCircle className=\"h-6 w-6 text-status-error-text\" />,\n      iconBg: \"bg-status-error-bg-subtle\",\n      button: \"bg-status-error-bg text-white hover:bg-status-error-bg/90\",\n    },\n    warning: {\n      icon: <AlertTriangle className=\"h-6 w-6 text-status-warning-text\" />,\n      iconBg: \"bg-status-warning-bg-subtle\",\n      button: \"bg-status-warning-bg text-white hover:bg-status-warning-bg/90\",\n    },\n    success: {\n      icon: <CheckCircle className=\"h-6 w-6 text-status-success-text\" />,\n      iconBg: \"bg-status-success-bg-subtle\",\n      button: \"bg-status-success-bg text-white hover:bg-status-success-bg/90\",\n    },\n  };\n\n  const styles = variantStyles[normalizedVariant];\n\n  const handleClose = () => onOpenChange(false);\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <button\n        type=\"button\"\n        aria-label=\"Close dialog backdrop\"\n        className=\"absolute inset-0 bg-bg-overlay\"\n        onClick={handleClose}\n      />\n\n      {/* Dialog */}\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={description || children ? descriptionId : undefined}\n        tabIndex={-1}\n        className=\"relative z-10 w-full max-w-md rounded-lg bg-bg-surface p-6 shadow-xl\"\n      >\n        <div className=\"flex items-start gap-4\">\n          <div className={cn(\"rounded-full p-2\", styles.iconBg)}>\n            {styles.icon}\n          </div>\n          <div className=\"flex-1\">\n            <h3 id={titleId} className=\"text-lg font-semibold\">\n              {title}\n            </h3>\n            {description && (\n              <p\n                id={descriptionId}\n                className=\"mt-2 text-sm text-text-secondary\"\n              >\n                {description}\n              </p>\n            )}\n            {children && (\n              <div\n                className=\"mt-4\"\n                id={description ? undefined : descriptionId}\n              >\n                {children}\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div className=\"mt-6 flex justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={handleClose}\n            disabled={loading}\n            className=\"rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n          >\n            {cancelLabel}\n          </button>\n          <button\n            ref={confirmButtonRef}\n            type=\"button\"\n            onClick={onConfirm}\n            disabled={loading}\n            className={cn(\n              \"rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50\",\n              styles.button,\n            )}\n          >\n            {loading\n              ? tr(\"devportal.processing\", \"Processing...\")\n              : confirmLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n/**\n * Alert banner component\n */\nexport const Alert: FC<{\n  variant?: \"info\" | \"warning\" | \"error\" | \"success\";\n  title?: string;\n  children: ReactNode;\n  onDismiss?: () => void;\n  className?: string;\n}> = ({ variant = \"info\", title, children, onDismiss, className }) => {\n  const variantStyles = {\n    info: \"bg-status-info-bg-subtle border-border-subtle text-status-info-text\",\n    warning:\n      \"bg-status-warning-bg-subtle border-border-subtle text-status-warning-text\",\n    error:\n      \"bg-status-error-bg-subtle border-border-subtle text-status-error-text\",\n    success:\n      \"bg-status-success-bg-subtle border-border-subtle text-status-success-text\",\n  };\n\n  const icons = {\n    info: <Info className=\"h-5 w-5\" />,\n    warning: <AlertTriangle className=\"h-5 w-5\" />,\n    error: <XCircle className=\"h-5 w-5\" />,\n    success: <CheckCircle className=\"h-5 w-5\" />,\n  };\n\n  return (\n    <div\n      className={cn(\"rounded-lg border p-4\", variantStyles[variant], className)}\n    >\n      <div className=\"flex items-start gap-3\">\n        {icons[variant]}\n        <div className=\"flex-1\">\n          {title && <h4 className=\"font-medium\">{title}</h4>}\n          <div className=\"text-sm\">{children}</div>\n        </div>\n        {onDismiss && (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            className=\"hover:opacity-70\"\n          >\n            <XCircle className=\"h-5 w-5\" />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/devportal/components/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAU3C,MAAM,WAAW,MAAM,CAAC,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;KACtC,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,EAAE,EAC5D,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,SAAS,EACT,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,cAAc,CAAC,CAAC,CAAC,+BAwJnB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAmBA,CAAC"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAU3C,MAAM,WAAW,MAAM,CAAC,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;KACtC,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,EAAE,EAC5D,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,SAAS,EACT,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,cAAc,CAAC,CAAC,CAAC,+BAoJnB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAmBA,CAAC"}

package/dist/devportal/components/DataTable.js

@@ -1,25 +1,22 @@
-import { cn as e } from "../utils/cn.js";
-import { useI18n as t } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useTr as e } from "../utils/i18n.js";
+import { cn as t } from "../utils/cn.js";
 import { ChevronLeft as n, ChevronRight as r, ChevronsLeft as i, ChevronsRight as a } from "lucide-react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/devportal/components/DataTable.tsx
 function c({ data: c, columns: l, keyField: u, onRowClick: d, className: f, emptyMessage: p, loading: m, pagination: h }) {
-	let { t: g } = t(), _ = (e, t) => {
-		let n = g(e);
-		return n === e ? t : n;
-	}, v = p ?? _("devportal.noDataAvailable", "No data available"), y = h ? Math.ceil(h.totalCount / h.pageSize) : 1;
+	let g = e(), _ = p ?? g("devportal.noDataAvailable", "No data available"), v = h ? Math.ceil(h.totalCount / h.pageSize) : 1;
 	return /* @__PURE__ */ s("div", {
-		className: e("rounded-lg border border-border-seam bg-bg-surface", f),
+		className: t("rounded-lg border border-border-seam bg-bg-surface", f),
 		children: [/* @__PURE__ */ o("div", {
 			className: "overflow-x-auto",
 			children: /* @__PURE__ */ s("table", {
 				className: "w-full",
 				children: [/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ o("tr", {
 					className: "border-b border-border-seam bg-bg-sunken/40",
-					children: l.map((t) => /* @__PURE__ */ o("th", {
-						className: e("px-4 py-3 text-left text-sm font-medium text-text-secondary", t.className),
-						children: t.header
-					}, t.key))
+					children: l.map((e) => /* @__PURE__ */ o("th", {
+						className: t("px-4 py-3 text-left text-sm font-medium text-text-secondary", e.className),
+						children: e.header
+					}, e.key))
 				}) }), /* @__PURE__ */ o("tbody", { children: m ? Array.from({ length: 5 }).map((e, t) => /* @__PURE__ */ o("tr", {
 					className: "animate-pulse border-b border-border-seam",
 					children: l.map((e) => /* @__PURE__ */ o("td", {
@@ -29,39 +26,39 @@ function c({ data: c, columns: l, keyField: u, onRowClick: d, className: f, empt
 				}, t)) : c.length === 0 ? /* @__PURE__ */ o("tr", { children: /* @__PURE__ */ o("td", {
 					colSpan: l.length,
 					className: "px-4 py-8 text-center text-text-secondary",
-					children: v
-				}) }) : c.map((t) => /* @__PURE__ */ o("tr", {
+					children: _
+				}) }) : c.map((e) => /* @__PURE__ */ o("tr", {
 					role: d ? "button" : void 0,
 					tabIndex: d ? 0 : void 0,
-					className: e("border-b border-border-seam transition-colors", d && "cursor-pointer hover:bg-bg-sunken/50 focus-visible:outline-none focus-visible:bg-bg-sunken/50"),
-					onClick: () => d?.(t),
-					onKeyDown: (e) => {
-						d && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), d(t));
+					className: t("border-b border-border-seam transition-colors", d && "cursor-pointer hover:bg-bg-sunken/50 focus-visible:outline-none focus-visible:bg-bg-sunken/50"),
+					onClick: () => d?.(e),
+					onKeyDown: (t) => {
+						d && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), d(e));
 					},
 					children: l.map((n) => /* @__PURE__ */ o("td", {
-						className: e("px-4 py-3 text-sm", n.className),
-						children: n.render ? n.render(t) : String(t[n.key] ?? "")
+						className: t("px-4 py-3 text-sm", n.className),
+						children: n.render ? n.render(e) : String(e[n.key] ?? "")
 					}, String(n.key)))
-				}, String(t[u]))) })]
+				}, String(e[u]))) })]
 			})
-		}), h && y > 1 && /* @__PURE__ */ s("div", {
+		}), h && v > 1 && /* @__PURE__ */ s("div", {
 			className: "flex items-center justify-between border-t border-border-seam px-4 py-3",
 			children: [/* @__PURE__ */ s("p", {
 				className: "text-sm text-text-secondary",
 				children: [
-					_("devportal.showingResults", "Showing"),
+					g("devportal.showingResults", "Showing"),
 					" ",
 					(h.page - 1) * h.pageSize + 1,
 					" ",
-					_("devportal.to", "to"),
+					g("devportal.to", "to"),
 					" ",
 					Math.min(h.page * h.pageSize, h.totalCount),
 					" ",
-					_("devportal.of", "of"),
+					g("devportal.of", "of"),
 					" ",
 					h.totalCount,
 					" ",
-					_("devportal.results", "results")
+					g("devportal.results", "results")
 				]
 			}), /* @__PURE__ */ s("div", {
 				className: "flex items-center gap-1",
@@ -81,24 +78,24 @@ function c({ data: c, columns: l, keyField: u, onRowClick: d, className: f, empt
 					/* @__PURE__ */ s("span", {
 						className: "px-3 text-sm",
 						children: [
-							_("devportal.page", "Page"),
+							g("devportal.page", "Page"),
 							" ",
 							h.page,
 							" ",
-							_("devportal.of", "of"),
+							g("devportal.of", "of"),
 							" ",
-							y
+							v
 						]
 					}),
 					/* @__PURE__ */ o("button", {
 						onClick: () => h.onPageChange(h.page + 1),
-						disabled: h.page === y,
+						disabled: h.page === v,
 						className: "inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 						children: /* @__PURE__ */ o(r, { size: 20 })
 					}),
 					/* @__PURE__ */ o("button", {
-						onClick: () => h.onPageChange(y),
-						disabled: h.page === y,
+						onClick: () => h.onPageChange(v),
+						disabled: h.page === v,
 						className: "inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 						children: /* @__PURE__ */ o(a, { size: 20 })
 					})
@@ -107,9 +104,9 @@ function c({ data: c, columns: l, keyField: u, onRowClick: d, className: f, empt
 		})]
 	});
 }
-var l = ({ items: t, className: n }) => /* @__PURE__ */ o("dl", {
-	className: e("divide-y divide-border-seam rounded-lg border border-border-seam", n),
-	children: t.map((e, t) => /* @__PURE__ */ s("div", {
+var l = ({ items: e, className: n }) => /* @__PURE__ */ o("dl", {
+	className: t("divide-y divide-border-seam rounded-lg border border-border-seam", n),
+	children: e.map((e, t) => /* @__PURE__ */ s("div", {
 		className: "flex flex-col gap-1 px-4 py-3 sm:flex-row sm:gap-4",
 		children: [/* @__PURE__ */ o("dt", {
 			className: "text-sm font-medium text-text-secondary sm:w-1/3",

package/dist/devportal/components/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/devportal/components/DataTable.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport {\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\n\nexport interface Column<T> {\n  key: string;\n  header: ReactNode;\n  render?: (item: T) => ReactNode;\n  className?: string;\n  sortable?: boolean;\n}\n\nexport interface DataTableProps<T> {\n  data: T[];\n  columns: Column<T>[];\n  keyField: keyof T;\n  onRowClick?: (item: T) => void;\n  className?: string;\n  emptyMessage?: string;\n  loading?: boolean;\n  pagination?: {\n    page: number;\n    pageSize: number;\n    totalCount: number;\n    onPageChange: (page: number) => void;\n  };\n}\n\n/**\n * Reusable data table component with pagination\n */\nexport function DataTable<T extends { [K in keyof T]: T[K] }>({\n  data,\n  columns,\n  keyField,\n  onRowClick,\n  className,\n  emptyMessage,\n  loading,\n  pagination,\n}: DataTableProps<T>) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const resolvedEmptyMessage =\n    emptyMessage ?? tr(\"devportal.noDataAvailable\", \"No data available\");\n  const totalPages = pagination\n    ? Math.ceil(pagination.totalCount / pagination.pageSize)\n    : 1;\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border-seam bg-bg-surface\",\n        className,\n      )}\n    >\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"border-b border-border-seam bg-bg-sunken/40\">\n              {columns.map((column) => (\n                <th\n                  key={column.key}\n                  className={cn(\n                    \"px-4 py-3 text-left text-sm font-medium text-text-secondary\",\n                    column.className,\n                  )}\n                >\n                  {column.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {loading ? (\n              Array.from({ length: 5 }).map((_, i) => (\n                <tr\n                  key={i}\n                  className=\"animate-pulse border-b border-border-seam\"\n                >\n                  {columns.map((column) => (\n                    <td key={column.key} className=\"px-4 py-3\">\n                      <div className=\"h-4 rounded bg-bg-sunken\" />\n                    </td>\n                  ))}\n                </tr>\n              ))\n            ) : data.length === 0 ? (\n              <tr>\n                <td\n                  colSpan={columns.length}\n                  className=\"px-4 py-8 text-center text-text-secondary\"\n                >\n                  {resolvedEmptyMessage}\n                </td>\n              </tr>\n            ) : (\n              data.map((item) => (\n                <tr\n                  key={String(item[keyField])}\n                  role={onRowClick ? \"button\" : undefined}\n                  tabIndex={onRowClick ? 0 : undefined}\n                  className={cn(\n                    \"border-b border-border-seam transition-colors\",\n                    onRowClick &&\n                      \"cursor-pointer hover:bg-bg-sunken/50 focus-visible:outline-none focus-visible:bg-bg-sunken/50\",\n                  )}\n                  onClick={() => onRowClick?.(item)}\n                  onKeyDown={(event) => {\n                    if (!onRowClick) return;\n                    if (event.key === \"Enter\" || event.key === \" \") {\n                      event.preventDefault();\n                      onRowClick(item);\n                    }\n                  }}\n                >\n                  {columns.map((column) => (\n                    <td\n                      key={String(column.key)}\n                      className={cn(\"px-4 py-3 text-sm\", column.className)}\n                    >\n                      {column.render\n                        ? column.render(item)\n                        : String(\n                            (item as Record<string, unknown>)[\n                              column.key as string\n                            ] ?? \"\",\n                          )}\n                    </td>\n                  ))}\n                </tr>\n              ))\n            )}\n          </tbody>\n        </table>\n      </div>\n\n      {/* Pagination */}\n      {pagination && totalPages > 1 && (\n        <div className=\"flex items-center justify-between border-t border-border-seam px-4 py-3\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\"devportal.showingResults\", \"Showing\")}{\" \"}\n            {(pagination.page - 1) * pagination.pageSize + 1}{\" \"}\n            {tr(\"devportal.to\", \"to\")}{\" \"}\n            {Math.min(\n              pagination.page * pagination.pageSize,\n              pagination.totalCount,\n            )}{\" \"}\n            {tr(\"devportal.of\", \"of\")} {pagination.totalCount}{\" \"}\n            {tr(\"devportal.results\", \"results\")}\n          </p>\n          <div className=\"flex items-center gap-1\">\n            <button\n              onClick={() => pagination.onPageChange(1)}\n              disabled={pagination.page === 1}\n              className=\"inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <ChevronsLeft size={20} />\n            </button>\n            <button\n              onClick={() => pagination.onPageChange(pagination.page - 1)}\n              disabled={pagination.page === 1}\n              className=\"inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <ChevronLeft size={20} />\n            </button>\n            <span className=\"px-3 text-sm\">\n              {tr(\"devportal.page\", \"Page\")} {pagination.page}{\" \"}\n              {tr(\"devportal.of\", \"of\")} {totalPages}\n            </span>\n            <button\n              onClick={() => pagination.onPageChange(pagination.page + 1)}\n              disabled={pagination.page === totalPages}\n              className=\"inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <ChevronRight size={20} />\n            </button>\n            <button\n              onClick={() => pagination.onPageChange(totalPages)}\n              disabled={pagination.page === totalPages}\n              className=\"inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <ChevronsRight size={20} />\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Simple key-value detail list\n */\nexport const DetailList: FC<{\n  items: Array<{ label: string; value: ReactNode }>;\n  className?: string;\n}> = ({ items, className }) => (\n  <dl\n    className={cn(\n      \"divide-y divide-border-seam rounded-lg border border-border-seam\",\n      className,\n    )}\n  >\n    {items.map((item, index) => (\n      <div\n        key={index}\n        className=\"flex flex-col gap-1 px-4 py-3 sm:flex-row sm:gap-4\"\n      >\n        <dt className=\"text-sm font-medium text-text-secondary sm:w-1/3\">\n          {item.label}\n        </dt>\n        <dd className=\"text-sm sm:w-2/3\">{item.value}</dd>\n      </div>\n    ))}\n  </dl>\n);\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/devportal/components/DataTable.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport {\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n} from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\n\nexport interface Column<T> {\n  key: string;\n  header: ReactNode;\n  render?: (item: T) => ReactNode;\n  className?: string;\n  sortable?: boolean;\n}\n\nexport interface DataTableProps<T> {\n  data: T[];\n  columns: Column<T>[];\n  keyField: keyof T;\n  onRowClick?: (item: T) => void;\n  className?: string;\n  emptyMessage?: string;\n  loading?: boolean;\n  pagination?: {\n    page: number;\n    pageSize: number;\n    totalCount: number;\n    onPageChange: (page: number) => void;\n  };\n}\n\n/**\n * Reusable data table component with pagination\n */\nexport function DataTable<T extends { [K in keyof T]: T[K] }>({\n  data,\n  columns,\n  keyField,\n  onRowClick,\n  className,\n  emptyMessage,\n  loading,\n  pagination,\n}: DataTableProps<T>) {\n  const tr = useTr();\n  const resolvedEmptyMessage =\n    emptyMessage ?? tr(\"devportal.noDataAvailable\", \"No data available\");\n  const totalPages = pagination\n    ? Math.ceil(pagination.totalCount / pagination.pageSize)\n    : 1;\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border-seam bg-bg-surface\",\n        className,\n      )}\n    >\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"border-b border-border-seam bg-bg-sunken/40\">\n              {columns.map((column) => (\n                <th\n                  key={column.key}\n                  className={cn(\n                    \"px-4 py-3 text-left text-sm font-medium text-text-secondary\",\n                    column.className,\n                  )}\n                >\n                  {column.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {loading ? (\n              Array.from({ length: 5 }).map((_, i) => (\n                <tr\n                  key={i}\n                  className=\"animate-pulse border-b border-border-seam\"\n                >\n                  {columns.map((column) => (\n                    <td key={column.key} className=\"px-4 py-3\">\n                      <div className=\"h-4 rounded bg-bg-sunken\" />\n                    </td>\n                  ))}\n                </tr>\n              ))\n            ) : data.length === 0 ? (\n              <tr>\n                <td\n                  colSpan={columns.length}\n                  className=\"px-4 py-8 text-center text-text-secondary\"\n                >\n                  {resolvedEmptyMessage}\n                </td>\n              </tr>\n            ) : (\n              data.map((item) => (\n                <tr\n                  key={String(item[keyField])}\n                  role={onRowClick ? \"button\" : undefined}\n                  tabIndex={onRowClick ? 0 : undefined}\n                  className={cn(\n                    \"border-b border-border-seam transition-colors\",\n                    onRowClick &&\n                      \"cursor-pointer hover:bg-bg-sunken/50 focus-visible:outline-none focus-visible:bg-bg-sunken/50\",\n                  )}\n                  onClick={() => onRowClick?.(item)}\n                  onKeyDown={(event) => {\n                    if (!onRowClick) return;\n                    if (event.key === \"Enter\" || event.key === \" \") {\n                      event.preventDefault();\n                      onRowClick(item);\n                    }\n                  }}\n                >\n                  {columns.map((column) => (\n                    <td\n                      key={String(column.key)}\n                      className={cn(\"px-4 py-3 text-sm\", column.className)}\n                    >\n                      {column.render\n                        ? column.render(item)\n                        : String(\n                            (item as Record<string, unknown>)[\n                              column.key as string\n                            ] ?? \"\",\n                          )}\n                    </td>\n                  ))}\n                </tr>\n              ))\n            )}\n          </tbody>\n        </table>\n      </div>\n\n      {/* Pagination */}\n      {pagination && totalPages > 1 && (\n        <div className=\"flex items-center justify-between border-t border-border-seam px-4 py-3\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\"devportal.showingResults\", \"Showing\")}{\" \"}\n            {(pagination.page - 1) * pagination.pageSize + 1}{\" \"}\n            {tr(\"devportal.to\", \"to\")}{\" \"}\n            {Math.min(\n              pagination.page * pagination.pageSize,\n              pagination.totalCount,\n            )}{\" \"}\n            {tr(\"devportal.of\", \"of\")} {pagination.totalCount}{\" \"}\n            {tr(\"devportal.results\", \"results\")}\n          </p>\n          <div className=\"flex items-center gap-1\">\n            <button\n              onClick={() => pagination.onPageChange(1)}\n              disabled={pagination.page === 1}\n              className=\"inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <ChevronsLeft size={20} />\n            </button>\n            <button\n              onClick={() => pagination.onPageChange(pagination.page - 1)}\n              disabled={pagination.page === 1}\n              className=\"inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <ChevronLeft size={20} />\n            </button>\n            <span className=\"px-3 text-sm\">\n              {tr(\"devportal.page\", \"Page\")} {pagination.page}{\" \"}\n              {tr(\"devportal.of\", \"of\")} {totalPages}\n            </span>\n            <button\n              onClick={() => pagination.onPageChange(pagination.page + 1)}\n              disabled={pagination.page === totalPages}\n              className=\"inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <ChevronRight size={20} />\n            </button>\n            <button\n              onClick={() => pagination.onPageChange(totalPages)}\n              disabled={pagination.page === totalPages}\n              className=\"inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <ChevronsRight size={20} />\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Simple key-value detail list\n */\nexport const DetailList: FC<{\n  items: Array<{ label: string; value: ReactNode }>;\n  className?: string;\n}> = ({ items, className }) => (\n  <dl\n    className={cn(\n      \"divide-y divide-border-seam rounded-lg border border-border-seam\",\n      className,\n    )}\n  >\n    {items.map((item, index) => (\n      <div\n        key={index}\n        className=\"flex flex-col gap-1 px-4 py-3 sm:flex-row sm:gap-4\"\n      >\n        <dt className=\"text-sm font-medium text-text-secondary sm:w-1/3\">\n          {item.label}\n        </dt>\n        <dd className=\"text-sm sm:w-2/3\">{item.value}</dd>\n      </div>\n    ))}\n  </dl>\n);\n"],"mappings":"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"}

package/dist/devportal/components/FeatureFlaggedRoute.js

@@ -1,24 +1,24 @@
 import { EmptyState as e } from "./EmptyState.js";
-import { useI18n as t } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Fragment as n, jsx as r } from "react/jsx-runtime";
-import { useFeatureFlag as i } from "@burdenoff/fe-libs/shared/feature-flags";
+import { Fragment as t, jsx as n } from "react/jsx-runtime";
+import { useFeatureFlag as r } from "@burdenoff/fe-libs/shared/feature-flags";
+import { useI18n as i } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/devportal/components/FeatureFlaggedRoute.tsx
 var a = (e) => {
 	try {
-		return i(e);
+		return r(e);
 	} catch {
 		return !0;
 	}
 }, o = () => {
 	try {
-		let e = t();
+		let e = i();
 		return { t: (t, n) => e.t(t, n) };
 	} catch {
 		return { t: (e, t) => t ?? e };
 	}
-}, s = ({ flag: t, children: i, fallback: s }) => {
-	let c = a(t), { t: l } = o();
-	return c ? /* @__PURE__ */ r(n, { children: i }) : s ? /* @__PURE__ */ r(n, { children: s }) : /* @__PURE__ */ r(e, {
+}, s = ({ flag: r, children: i, fallback: s }) => {
+	let c = a(r), { t: l } = o();
+	return c ? /* @__PURE__ */ n(t, { children: i }) : s ? /* @__PURE__ */ n(t, { children: s }) : /* @__PURE__ */ n(e, {
 		title: l("devportal.featureDisabled.title", "This feature is currently unavailable"),
 		description: l("devportal.featureDisabled.description", "Your administrator has disabled this section. Please check back later.")
 	});

package/dist/devportal/components/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,EAAE,EACF,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EAErB,MAAM,OAAO,CAAC;AAIf,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,eACR,SACE,cAAc,EACd,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC1D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;CACjE;AAED,UAAU,kBACR,SACE,cAAc,EACd,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;CAAG;AAErE,UAAU,gBACR,SACE,cAAc,EACd,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAC5D,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,kBACR,SACE,cAAc,EACd,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAiC1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiChD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA8C5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAgChD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvE,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CA2BA,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAwDA,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,EAAE,EACF,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,OAAO,CAAC;AAIf,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,eACR,SACE,cAAc,EACd,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC1D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;CACjE;AAED,UAAU,kBACR,SACE,cAAc,EACd,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;CAAG;AAErE,UAAU,gBACR,SACE,cAAc,EACd,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAC5D,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,kBACR,SACE,cAAc,EACd,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAiC1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiChD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA0C5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAgChD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvE,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CA2BA,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAoDA,CAAC"}

package/dist/devportal/components/FormField.js

@@ -1,16 +1,16 @@
-import { cn as e } from "../utils/cn.js";
-import { useI18n as t } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useTr as e } from "../utils/i18n.js";
+import { cn as t } from "../utils/cn.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/devportal/components/FormField.tsx
-var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "text", id: l, ...u }) => {
-	let d = l || t.toLowerCase().replace(/\s+/g, "-");
+var i = ({ label: e, error: i, hint: a, required: o, className: s, type: c = "text", id: l, ...u }) => {
+	let d = l || e.toLowerCase().replace(/\s+/g, "-");
 	return /* @__PURE__ */ r("div", {
-		className: e("space-y-1", s),
+		className: t("space-y-1", s),
 		children: [
 			/* @__PURE__ */ r("label", {
 				htmlFor: d,
 				className: "block text-sm font-medium",
-				children: [t, o && /* @__PURE__ */ n("span", {
+				children: [e, o && /* @__PURE__ */ n("span", {
 					className: "text-status-error-text ml-1",
 					children: "*"
 				})]
@@ -18,7 +18,7 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 			/* @__PURE__ */ n("input", {
 				id: d,
 				type: c,
-				className: e("w-full rounded-md border bg-bg-surface px-3 py-2 text-sm", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", "placeholder:text-text-secondary", i && "border-status-error-bg focus:ring-status-error-bg"),
+				className: t("w-full rounded-md border bg-bg-surface px-3 py-2 text-sm", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", "placeholder:text-text-secondary", i && "border-status-error-bg focus:ring-status-error-bg"),
 				...u
 			}),
 			a && !i && /* @__PURE__ */ n("p", {
@@ -31,15 +31,15 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 			})
 		]
 	});
-}, a = ({ label: t, error: i, hint: a, required: o, className: s, id: c, rows: l = 4, ...u }) => {
-	let d = c || t.toLowerCase().replace(/\s+/g, "-");
+}, a = ({ label: e, error: i, hint: a, required: o, className: s, id: c, rows: l = 4, ...u }) => {
+	let d = c || e.toLowerCase().replace(/\s+/g, "-");
 	return /* @__PURE__ */ r("div", {
-		className: e("space-y-1", s),
+		className: t("space-y-1", s),
 		children: [
 			/* @__PURE__ */ r("label", {
 				htmlFor: d,
 				className: "block text-sm font-medium",
-				children: [t, o && /* @__PURE__ */ n("span", {
+				children: [e, o && /* @__PURE__ */ n("span", {
 					className: "text-status-error-text ml-1",
 					children: "*"
 				})]
@@ -47,7 +47,7 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 			/* @__PURE__ */ n("textarea", {
 				id: d,
 				rows: l,
-				className: e("w-full rounded-md border bg-bg-surface px-3 py-2 text-sm", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", "placeholder:text-text-secondary resize-none", i && "border-status-error-bg focus:ring-status-error-bg"),
+				className: t("w-full rounded-md border bg-bg-surface px-3 py-2 text-sm", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", "placeholder:text-text-secondary resize-none", i && "border-status-error-bg focus:ring-status-error-bg"),
 				...u
 			}),
 			a && !i && /* @__PURE__ */ n("p", {
@@ -61,12 +61,9 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 		]
 	});
 }, o = ({ label: i, error: a, hint: o, required: s, className: c, options: l, placeholder: u, id: d, ...f }) => {
-	let { t: p } = t(), m = u ?? ((e, t) => {
-		let n = p(e);
-		return n === e ? t : n;
-	})("devportal.selectAnOption", "Select an option"), h = d || i.toLowerCase().replace(/\s+/g, "-");
+	let p = e(), m = u ?? p("devportal.selectAnOption", "Select an option"), h = d || i.toLowerCase().replace(/\s+/g, "-");
 	return /* @__PURE__ */ r("div", {
-		className: e("space-y-1", c),
+		className: t("space-y-1", c),
 		children: [
 			/* @__PURE__ */ r("label", {
 				htmlFor: h,
@@ -78,7 +75,7 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 			}),
 			/* @__PURE__ */ r("select", {
 				id: h,
-				className: e("w-full rounded-md border bg-bg-surface px-3 py-2 text-sm", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", a && "border-status-error-bg focus:ring-status-error-bg"),
+				className: t("w-full rounded-md border bg-bg-surface px-3 py-2 text-sm", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", a && "border-status-error-bg focus:ring-status-error-bg"),
 				...f,
 				children: [/* @__PURE__ */ n("option", {
 					value: "",
@@ -98,20 +95,20 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 			})
 		]
 	});
-}, s = ({ label: t, description: i, error: a, className: o, id: s, ...c }) => {
-	let l = s || t.toLowerCase().replace(/\s+/g, "-");
+}, s = ({ label: e, description: i, error: a, className: o, id: s, ...c }) => {
+	let l = s || e.toLowerCase().replace(/\s+/g, "-");
 	return /* @__PURE__ */ r("div", {
-		className: e("flex items-start gap-3", o),
+		className: t("flex items-start gap-3", o),
 		children: [/* @__PURE__ */ n("input", {
 			id: l,
 			type: "checkbox",
-			className: e("mt-1 h-4 w-4 rounded border-border-default text-primary", "focus:ring-primary"),
+			className: t("mt-1 h-4 w-4 rounded border-border-default text-primary", "focus:ring-primary"),
 			...c
 		}), /* @__PURE__ */ r("div", { children: [
 			/* @__PURE__ */ n("label", {
 				htmlFor: l,
 				className: "text-sm font-medium cursor-pointer",
-				children: t
+				children: e
 			}),
 			i && /* @__PURE__ */ n("p", {
 				className: "text-xs text-text-secondary",
@@ -124,20 +121,17 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 		] })]
 	});
 }, c = ({ label: i, value: a, onChange: o, placeholder: s, error: c, hint: l, className: u }) => {
-	let { t: d } = t(), f = (e, t) => {
-		let n = d(e);
-		return n === e ? t : n;
-	}, p = (e) => {
+	let d = e(), f = (e) => {
 		if (e.key === "Enter" || e.key === ",") {
 			e.preventDefault();
 			let t = e.currentTarget, n = t.value.trim();
 			n && !a.includes(n) && (o([...a, n]), t.value = "");
 		}
-	}, m = (e) => {
+	}, p = (e) => {
 		o(a.filter((t) => t !== e));
 	};
 	return /* @__PURE__ */ r("div", {
-		className: e("space-y-1", u),
+		className: t("space-y-1", u),
 		children: [
 			/* @__PURE__ */ n("label", {
 				className: "block text-sm font-medium",
@@ -149,14 +143,14 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 					className: "inline-flex items-center gap-1 rounded-full bg-action-primary-bg/10 px-2 py-1 text-xs",
 					children: [e, /* @__PURE__ */ n("button", {
 						type: "button",
-						onClick: () => m(e),
+						onClick: () => p(e),
 						className: "hover:text-status-error-text",
 						children: "×"
 					})]
 				}, e)), /* @__PURE__ */ n("input", {
 					type: "text",
-					placeholder: a.length === 0 ? s : f("devportal.addMore", "Add more..."),
-					onKeyDown: p,
+					placeholder: a.length === 0 ? s : d("devportal.addMore", "Add more..."),
+					onKeyDown: f,
 					className: "flex-1 min-w-[100px] bg-transparent text-sm outline-none"
 				})]
 			}),