@omnitron-dev/prism 0.2.0 → 0.3.0

package/dist/blocks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,wBAAwB,EACxB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AAEpC,YAAY,EACV,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,0BAA0B,EAC1B,yBAAyB,EACzB,0BAA0B,EAC1B,aAAa,EACb,WAAW,EACX,uBAAuB,EACvB,wBAAwB,EACxB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EACL,SAAS,EACT,SAAS,EACT,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EAEd,SAAS,EACT,UAAU,EACV,cAAc,EACd,OAAO,EACP,aAAa,EACb,uBAAuB,GACxB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EACV,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,uBAAuB,EACvB,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAEhB,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,cAAc,EACd,eAAe,EACf,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAEtG,YAAY,EACV,kBAAkB,EAClB,yBAAyB,EACzB,iBAAiB,EACjB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,mBAAmB,EACnB,iBAAiB,EACjB,YAAY,EACZ,sBAAsB,EACtB,uBAAuB,EACvB,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,4BAA4B,CAAC"}

package/dist/blocks/index.js

@@ -1,7 +1,6 @@
-import { Field, SearchInput } from '../chunk-KTCWPGON.js';
-import { useBoolean } from '../chunk-HO2GKTWJ.js';
-import '../chunk-77KIJLPP.js';
-import { createContext, useContext, useCallback, useMemo, useState, useEffect, useRef } from 'react';
+import { ErrorBoundary, Field, EmptyContent, SearchInput } from '../chunk-OBJ244BO.js';
+import { useBoolean } from '../chunk-BRDWQVRT.js';
+import { createContext, useContext, useCallback, useMemo, useState, useRef, useEffect } from 'react';
 import Box2 from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Typography2 from '@mui/material/Typography';
@@ -28,6 +27,7 @@ import { DataGrid, GridToolbarContainer, GridToolbarColumnsButton, GridToolbarDe
 
 var collapseNoop = () => {
 };
+var NO_LABELS = {};
 var DashboardBlockContext = createContext(null);
 function useDashboardBlockContext() {
   const context = useContext(DashboardBlockContext);
@@ -63,7 +63,7 @@ var sizeConfig = {
   }
 };
 function DashboardBlockHeader({ title, subtitle, icon, actions, sx }) {
-  const { collapsed, toggleCollapse, variant, size } = useDashboardBlockContext();
+  const { collapsed, toggleCollapse, variant, size, labels } = useDashboardBlockContext();
   const config = sizeConfig[size];
   return /* @__PURE__ */ jsxs(
     Box2,
@@ -96,7 +96,23 @@ function DashboardBlockHeader({ title, subtitle, icon, actions, sx }) {
             }
           ),
           /* @__PURE__ */ jsxs(Box2, { sx: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx(Typography2, { variant: config.titleVariant, component: "h3", sx: { fontWeight: 600, lineHeight: 1.4 }, noWrap: true, children: title }),
+            /* @__PURE__ */ jsx(
+              Typography2,
+              {
+                variant: config.titleVariant,
+                component: "h3",
+                sx: {
+                  fontWeight: 600,
+                  lineHeight: 1.4,
+                  display: "-webkit-box",
+                  WebkitBoxOrient: "vertical",
+                  WebkitLineClamp: 2,
+                  overflow: "hidden",
+                  overflowWrap: "anywhere"
+                },
+                children: title
+              }
+            ),
             subtitle && /* @__PURE__ */ jsx(
               Typography2,
               {
@@ -118,7 +134,7 @@ function DashboardBlockHeader({ title, subtitle, icon, actions, sx }) {
               size: "small",
               onClick: toggleCollapse,
               "aria-expanded": !collapsed,
-              "aria-label": collapsed ? "Expand block" : "Collapse block",
+              "aria-label": collapsed ? labels.expand ?? "Expand block" : labels.collapse ?? "Collapse block",
               "data-testid": "prism-dashboard-block-collapse",
               children: /* @__PURE__ */ jsx(ChevronIcon, { direction: collapsed ? "down" : "up" })
             }
@@ -174,7 +190,7 @@ function LoadingState({ rows = 3, size }) {
   const config = sizeConfig[size];
   return /* @__PURE__ */ jsx(Box2, { sx: { px: config.contentPx, py: config.contentPy }, children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { variant: "text", animation: "wave", sx: { height: 20, mb: 1 } }, i)) });
 }
-function ErrorState({ message = "Failed to load data", onRetry, size }) {
+function ErrorState({ message = "Failed to load data", retryLabel = "Retry", onRetry, size }) {
   const config = sizeConfig[size];
   return /* @__PURE__ */ jsxs(
     Box2,
@@ -186,11 +202,26 @@ function ErrorState({ message = "Failed to load data", onRetry, size }) {
       },
       children: [
         /* @__PURE__ */ jsx(Typography2, { color: "error", variant: "body2", sx: { mb: onRetry ? 1.5 : 0 }, children: message }),
-        onRetry && /* @__PURE__ */ jsx(Button2, { size: "small", onClick: onRetry, children: "Retry" })
+        onRetry && /* @__PURE__ */ jsx(Button2, { size: "small", onClick: onRetry, children: retryLabel })
       ]
     }
   );
 }
+function EmptyState({ config, size }) {
+  const pad = sizeConfig[size];
+  if (config?.emptyComponent) return config.emptyComponent;
+  return /* @__PURE__ */ jsx(Box2, { "data-testid": "prism-dashboard-block-empty", sx: { px: pad.contentPx, py: pad.contentPy }, children: /* @__PURE__ */ jsx(
+    EmptyContent,
+    {
+      compact: true,
+      icon: config?.icon,
+      iconSize: 48,
+      title: config?.title,
+      description: config?.description,
+      action: config?.action
+    }
+  ) });
+}
 function DashboardBlock({
   title,
   subtitle,
@@ -204,6 +235,10 @@ function DashboardBlock({
   loadingConfig,
   error = false,
   errorConfig,
+  empty = false,
+  emptyConfig,
+  labels = NO_LABELS,
+  catchErrors = true,
   collapsible = false,
   defaultCollapsed = false,
   collapsed: controlledCollapsed,
@@ -241,10 +276,13 @@ function DashboardBlock({
       loading,
       error,
       variant,
-      size
+      size,
+      labels
     }),
-    [collapsed, collapsible, handleToggleCollapse, handleSetCollapsed, loading, error, variant, size]
+    [collapsed, collapsible, handleToggleCollapse, handleSetCollapsed, loading, error, variant, size, labels]
   );
+  const errorMessage = errorConfig?.message ?? labels.error;
+  const body = loading ? loadingConfig?.loadingComponent ?? /* @__PURE__ */ jsx(LoadingState, { rows: loadingConfig?.skeletonRows ?? 3, size }) : error ? errorConfig?.errorComponent ?? /* @__PURE__ */ jsx(ErrorState, { message: errorMessage, retryLabel: labels.retry, onRetry: errorConfig?.onRetry, size }) : empty ? /* @__PURE__ */ jsx(EmptyState, { config: emptyConfig, size }) : children ? /* @__PURE__ */ jsx(DashboardBlockContent, { disablePadding, ...slotProps?.content, children }) : null;
   const paperVariant = variant === "outlined" ? "outlined" : "elevation";
   const paperElevation = variant === "default" ? 1 : 0;
   return /* @__PURE__ */ jsx(DashboardBlockContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
@@ -274,7 +312,25 @@ function DashboardBlock({
           }
         ),
         title && /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(Box2, { "aria-live": "polite", "aria-busy": loading, children: loading ? loadingConfig?.loadingComponent ?? /* @__PURE__ */ jsx(LoadingState, { rows: loadingConfig?.skeletonRows ?? 3, size }) : error ? errorConfig?.errorComponent ?? /* @__PURE__ */ jsx(ErrorState, { message: errorConfig?.message, onRetry: errorConfig?.onRetry, size }) : children ? /* @__PURE__ */ jsx(DashboardBlockContent, { disablePadding, ...slotProps?.content, children }) : null }),
+        /* @__PURE__ */ jsx(Box2, { "aria-live": "polite", "aria-busy": loading, children: catchErrors ? /* @__PURE__ */ jsx(
+          ErrorBoundary,
+          {
+            resetKeys: [loading, error, empty],
+            fallback: ({ resetErrorBoundary }) => /* @__PURE__ */ jsx(
+              ErrorState,
+              {
+                message: labels.error,
+                retryLabel: labels.retry,
+                onRetry: () => {
+                  resetErrorBoundary();
+                  errorConfig?.onRetry?.();
+                },
+                size
+              }
+            ),
+            children: body
+          }
+        ) : body }),
         footer && !loading && !error && /* @__PURE__ */ jsx(DashboardBlockFooter, { divider: footerDivider, ...slotProps?.footer, children: footer })
       ]
     }
@@ -393,8 +449,24 @@ var UNSAFE_ERROR_PATTERNS = [
   // Unix file paths
   /[A-Z]:\\[^\s]+/,
   // Windows file paths
-  /password|secret|token|key/i
-  // sensitive keywords in error context
+  // A secret assigned to a name — `password=hunter2`, `token: eyJ...`. The
+  // value must carry a digit or symbol, which is what separates a credential
+  // from the English word that follows a colon in "Password: too short".
+  /\b(password|passwd|pwd|secret|token|api[-_]?key|private[-_]?key|credentials?)\b\s*[:=]\s*["']?(?=[^\s"']{6,})[A-Za-z]*[0-9+/=_\-.]/i,
+  /\b[a-z][a-z0-9+.-]*:\/\/[^\s/@]*:[^\s/@]+@/i,
+  // credentials inside a connection URL
+  /\bbearer\s+\S{8,}/i,
+  // Authorization header
+  /\beyJ[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{8,}/,
+  // JWT
+  /\b(sk|pk|rk)[-_](live|test|ant|proj)[-_]\w{8,}/i,
+  // vendor-prefixed API keys
+  /\b[A-Fa-f0-9]{32,}\b/,
+  // raw hex blob — never meaningful to a reader
+  /\b[A-Za-z0-9+/]{40,}={0,2}\b/,
+  // raw base64 blob
+  /\b[A-Z][A-Z0-9]*_(SECRET|KEY|TOKEN|PASSWORD|PASSWD|CREDENTIALS?)\b/
+  // server env var names
 ];
 var DEFAULT_AUTH_ERROR = "An error occurred. Please try again.";
 function sanitizeErrorMessage(err, fallback = DEFAULT_AUTH_ERROR) {
@@ -459,6 +531,7 @@ function LoginForm({
       rememberMe: false
     }
   });
+  const busy = loading || methods.formState.isSubmitting;
   const handleSubmit = methods.handleSubmit(async (data) => {
     setError(null);
     try {
@@ -483,7 +556,7 @@ function LoginForm({
             label: labels.email ?? "Email",
             type: "email",
             autoComplete: "email",
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             ...slotProps?.textField
           }
         ),
@@ -494,7 +567,7 @@ function LoginForm({
             label: labels.password ?? "Password",
             type: showPassword ? "text" : "password",
             autoComplete: "current-password",
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             slotProps: {
               input: {
                 endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
@@ -517,7 +590,7 @@ function LoginForm({
             {
               name: "rememberMe",
               label: labels.rememberMe ?? "Remember me",
-              disabled: disabled || loading
+              disabled: disabled || busy
             }
           ),
           showForgotPassword && /* @__PURE__ */ jsx(
@@ -539,9 +612,9 @@ function LoginForm({
             variant: "contained",
             size: "large",
             fullWidth: true,
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             ...slotProps?.submitButton,
-            children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : labels.submit ?? "Sign In"
+            children: busy ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : labels.submit ?? "Sign In"
           }
         ),
         showSocialLogin && socialProviders.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -552,7 +625,7 @@ function LoginForm({
             IconButton2,
             {
               onClick: provider.onClick,
-              disabled: disabled || loading,
+              disabled: disabled || busy,
               sx: {
                 border: 1,
                 borderColor: "divider",
@@ -599,6 +672,7 @@ function RegisterForm({
       acceptTerms: false
     }
   });
+  const busy = loading || methods.formState.isSubmitting;
   const handleSubmit = methods.handleSubmit(async (data) => {
     setError(null);
     try {
@@ -623,7 +697,7 @@ function RegisterForm({
               name: "firstName",
               label: labels.firstName ?? "First Name",
               autoComplete: "given-name",
-              disabled: disabled || loading,
+              disabled: disabled || busy,
               ...slotProps?.textField
             }
           ),
@@ -633,7 +707,7 @@ function RegisterForm({
               name: "lastName",
               label: labels.lastName ?? "Last Name",
               autoComplete: "family-name",
-              disabled: disabled || loading,
+              disabled: disabled || busy,
               ...slotProps?.textField
             }
           )
@@ -645,7 +719,7 @@ function RegisterForm({
             label: labels.email ?? "Email",
             type: "email",
             autoComplete: "email",
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             ...slotProps?.textField
           }
         ),
@@ -656,7 +730,7 @@ function RegisterForm({
             label: labels.password ?? "Password",
             type: showPassword ? "text" : "password",
             autoComplete: "new-password",
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             helperText: `At least ${minPasswordLength} characters`,
             slotProps: {
               input: {
@@ -681,7 +755,7 @@ function RegisterForm({
             label: labels.confirmPassword ?? "Confirm Password",
             type: showConfirmPassword ? "text" : "password",
             autoComplete: "new-password",
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             slotProps: {
               input: {
                 endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
@@ -702,7 +776,7 @@ function RegisterForm({
           Field.Checkbox,
           {
             name: "acceptTerms",
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             label: /* @__PURE__ */ jsxs(Typography2, { variant: "body2", component: "span", children: [
               labels.acceptTerms ?? "I agree to the ",
               /* @__PURE__ */ jsx(Link, { component: "button", type: "button", onClick: onTermsClick, children: labels.termsLink ?? "Terms of Service" }),
@@ -718,9 +792,9 @@ function RegisterForm({
             variant: "contained",
             size: "large",
             fullWidth: true,
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             ...slotProps?.submitButton,
-            children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : labels.submit ?? "Create Account"
+            children: busy ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : labels.submit ?? "Create Account"
           }
         )
       ]
@@ -745,6 +819,7 @@ function ForgotPasswordForm({
       email: ""
     }
   });
+  const busy = loading || methods.formState.isSubmitting;
   const handleSubmit = methods.handleSubmit(async (data) => {
     setError(null);
     try {
@@ -793,7 +868,7 @@ function ForgotPasswordForm({
             label: labels.email ?? "Email",
             type: "email",
             autoComplete: "email",
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             ...slotProps?.textField
           }
         ),
@@ -804,9 +879,9 @@ function ForgotPasswordForm({
             variant: "contained",
             size: "large",
             fullWidth: true,
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             ...slotProps?.submitButton,
-            children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : labels.submit ?? "Send Reset Link"
+            children: busy ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : labels.submit ?? "Send Reset Link"
           }
         ),
         onBackToLogin && /* @__PURE__ */ jsx(Button2, { variant: "text", onClick: onBackToLogin, disabled: loading, children: labels.backToLogin ?? "Back to login" })
@@ -836,6 +911,7 @@ function ResetPasswordForm({
       confirmPassword: ""
     }
   });
+  const busy = loading || methods.formState.isSubmitting;
   const handleSubmit = methods.handleSubmit(async (data) => {
     setError(null);
     try {
@@ -866,7 +942,7 @@ function ResetPasswordForm({
             label: labels.password ?? "New Password",
             type: showPassword ? "text" : "password",
             autoComplete: "new-password",
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             helperText: `At least ${minPasswordLength} characters`,
             slotProps: {
               input: {
@@ -891,7 +967,7 @@ function ResetPasswordForm({
             label: labels.confirmPassword ?? "Confirm Password",
             type: showConfirmPassword ? "text" : "password",
             autoComplete: "new-password",
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             slotProps: {
               input: {
                 endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
@@ -915,9 +991,9 @@ function ResetPasswordForm({
             variant: "contained",
             size: "large",
             fullWidth: true,
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             ...slotProps?.submitButton,
-            children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : labels.submit ?? "Reset Password"
+            children: busy ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : labels.submit ?? "Reset Password"
           }
         )
       ]
@@ -938,12 +1014,15 @@ function VerifyCodeForm({
 }) {
   const [error, setError] = useState(null);
   const [cooldown, setCooldown] = useState(0);
+  const [resending, setResending] = useState(false);
+  const resendingRef = useRef(false);
   const methods = useForm({
     resolver: zodResolver(schema ?? createVerifyCodeSchema(codeLength)),
     defaultValues: {
       code: ""
     }
   });
+  const busy = loading || methods.formState.isSubmitting;
   useEffect(() => {
     if (cooldown > 0) {
       const timer = setTimeout(() => setCooldown(cooldown - 1), 1e3);
@@ -952,12 +1031,18 @@ function VerifyCodeForm({
     return void 0;
   }, [cooldown]);
   const handleResendCode = useCallback(async () => {
-    if (cooldown > 0 || !onResendCode) return;
+    if (cooldown > 0 || resendingRef.current || !onResendCode) return;
+    resendingRef.current = true;
+    setResending(true);
+    setError(null);
     try {
       await onResendCode();
       setCooldown(resendCooldown);
     } catch (err) {
       setError(sanitizeErrorMessage(err, "Failed to resend code"));
+    } finally {
+      resendingRef.current = false;
+      setResending(false);
     }
   }, [cooldown, onResendCode, resendCooldown]);
   const handleSubmit = methods.handleSubmit(async (data) => {
@@ -986,7 +1071,7 @@ function VerifyCodeForm({
           }, children: labels.description ?? "We sent a verification code to your email." })
         ] }),
         error && /* @__PURE__ */ jsx(Alert, { severity: "error", onClose: () => setError(null), sx: { width: "100%" }, children: error }),
-        /* @__PURE__ */ jsx(Field.Code, { name: "code", length: codeLength, autoFocus: true, disabled: disabled || loading }),
+        /* @__PURE__ */ jsx(Field.Code, { name: "code", length: codeLength, autoFocus: true, disabled: disabled || busy }),
         /* @__PURE__ */ jsx(
           Button2,
           {
@@ -994,9 +1079,9 @@ function VerifyCodeForm({
             variant: "contained",
             size: "large",
             fullWidth: true,
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             ...slotProps?.submitButton,
-            children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : labels.submit ?? "Verify"
+            children: busy ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "inherit" }) : labels.submit ?? "Verify"
           }
         ),
         onResendCode && /* @__PURE__ */ jsx(Box2, { sx: { textAlign: "center" }, children: cooldown > 0 ? /* @__PURE__ */ jsxs(Typography2, { variant: "body2", sx: {
@@ -1006,7 +1091,17 @@ function VerifyCodeForm({
           " ",
           cooldown,
           "s"
-        ] }) : /* @__PURE__ */ jsx(Link, { component: "button", type: "button", variant: "body2", onClick: handleResendCode, disabled: loading, children: labels.resendCode ?? "Didn't receive the code? Resend" }) })
+        ] }) : /* @__PURE__ */ jsx(
+          Link,
+          {
+            component: "button",
+            type: "button",
+            variant: "body2",
+            onClick: handleResendCode,
+            disabled: disabled || busy || resending,
+            children: labels.resendCode ?? "Didn't receive the code? Resend"
+          }
+        ) })
       ]
     }
   ) });
@@ -1131,11 +1226,13 @@ function RoleBasedGuard({
 function hasRole(user, role, strategy = "any") {
   if (!user?.roles?.length) return false;
   const roles = Array.isArray(role) ? role : [role];
+  if (roles.length === 0) return false;
   return strategy === "all" ? roles.every((r) => user.roles.includes(r)) : roles.some((r) => user.roles.includes(r));
 }
 function hasPermission(user, permission, strategy = "all") {
   if (!user?.permissions?.length) return false;
   const permissions = Array.isArray(permission) ? permission : [permission];
+  if (permissions.length === 0) return false;
   return strategy === "all" ? permissions.every((p) => user.permissions.includes(p)) : permissions.some((p) => user.permissions.includes(p));
 }
 function createConditionalRender(user) {
@@ -1351,7 +1448,7 @@ function RowActionsCell({ row, actions }) {
     )
   ] });
 }
-function EmptyState({
+function EmptyState2({
   icon,
   title = "No data",
   description = "No records to display.",
@@ -1556,7 +1653,7 @@ function DataGridBlock({
       return () => /* @__PURE__ */ jsx(ErrorState2, { message: errorMessage, onRetry });
     }
     return () => /* @__PURE__ */ jsx(
-      EmptyState,
+      EmptyState2,
       {
         icon: empty?.icon,
         title: empty?.title,