@pattern-stack/frontend-patterns 0.2.0-alpha.7 → 0.2.0-alpha.9

package/dist/index.js

@@ -179,6 +179,141 @@ const RESPONSIVE_CHART_HEIGHTS = {
     secondary: DASHBOARD_CHART_HEIGHTS.medium
   }
 };
+const COLUMN_WIDTHS = {
+  // Text
+  text: 180,
+  password: 120,
+  // Numbers
+  number: 80,
+  money: 100,
+  percent: 70,
+  // Dates
+  date: 100,
+  datetime: 140,
+  // Contact/Links
+  email: 180,
+  phone: 120,
+  url: 160,
+  // Visual indicators
+  status: 90,
+  badge: 90,
+  boolean: 60,
+  rating: 80,
+  color: 60,
+  // Entity references
+  entity: 140,
+  user: 140,
+  // Special
+  image: 60,
+  file: 100,
+  json: 200
+};
+const COMPACT_COLUMN_WIDTHS = {
+  text: 120,
+  // With truncation
+  money: 60,
+  // $2.5k format
+  date: 55,
+  // "Dec 5" or "Tu"
+  datetime: 65,
+  // "5m ago"
+  email: 100,
+  // Truncated
+  phone: 80,
+  url: 80,
+  entity: 100,
+  user: 80,
+  json: 80
+};
+const COMPACT_FORMATTERS = {
+  money: "compactCurrency",
+  // $2,456.99 → $2.5k
+  date: "shortDate",
+  // 2024-01-15 → Dec 5
+  datetime: "relative",
+  // 2024-01-15T10:30 → 5m ago
+  text: "truncate",
+  // Long customer name → Long cust...
+  email: "truncate",
+  url: "domain",
+  // https://example.com/path → example.com
+  number: "compact"
+  // 1234567 → 1.2M
+};
+const COMPACT_LABELS = {
+  // Common field names → short versions
+  customer: "Cust",
+  description: "Desc",
+  quantity: "Qty",
+  amount: "Amt",
+  total: "Tot",
+  priority: "Pri",
+  status: "Stat",
+  created_at: "Created",
+  updated_at: "Updated",
+  email: "Email",
+  phone: "Ph",
+  category: "Cat",
+  // Time fields
+  time: "Time",
+  timeAgo: "Time",
+  timestamp: "Time",
+  // ID fields
+  order_id: "#",
+  id: "#",
+  transaction_id: "Txn"
+};
+const TABLE_BREAKPOINTS = {
+  /** Below this width (px), always use cards */
+  minForTable: 400,
+  /** Buffer (px) to add when calculating if columns fit */
+  widthBuffer: 50,
+  /** Minimum columns to show in compact mode */
+  minCompactColumns: 3,
+  /** Maximum columns in compact mode */
+  maxCompactColumns: 6
+};
+const IMPORTANCE_VISIBILITY = {
+  full: ["primary", "secondary", "tertiary", "critical", "high", "medium", "low", "minimal"],
+  compact: ["primary", "secondary", "critical", "high", "medium"],
+  cards: ["primary", "critical", "high"]
+};
+function getColumnWidth(type, mode = "full") {
+  if (mode === "compact" && type in COMPACT_COLUMN_WIDTHS) {
+    return COMPACT_COLUMN_WIDTHS[type];
+  }
+  return COLUMN_WIDTHS[type] ?? COLUMN_WIDTHS.text;
+}
+function calculateTableWidth(columns, mode = "full") {
+  return columns.reduce((sum, col) => sum + getColumnWidth(col.type, mode), 0);
+}
+function getCompactLabel(fieldName, originalLabel) {
+  const normalized = fieldName.toLowerCase();
+  return COMPACT_LABELS[normalized] ?? originalLabel;
+}
+function getCompactFormatter(type) {
+  return COMPACT_FORMATTERS[type];
+}
+function determineTableMode(containerWidth, columns) {
+  const { minForTable, widthBuffer } = TABLE_BREAKPOINTS;
+  if (containerWidth < minForTable) {
+    return "cards";
+  }
+  const fullWidth = calculateTableWidth(columns, "full");
+  const compactColumns = columns.filter(
+    (col) => IMPORTANCE_VISIBILITY.compact.includes(
+      col.importance ?? "medium"
+    )
+  );
+  const compactWidth = calculateTableWidth(compactColumns, "compact");
+  if (fullWidth + widthBuffer <= containerWidth) {
+    return "full";
+  }
+  if (compactWidth + widthBuffer <= containerWidth) {
+    return "compact";
+  }
+  return "cards";
+}
 const breakpoints = {
   "2xs": 400,
   xs: 500,
@@ -2052,6 +2187,143 @@ function renderField(value, fieldName, fieldType, breakpoint, item, customRender
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+const IconBadge = ({
+  children,
+  icon,
+  variant = "category",
+  category = 1,
+  status = "neutral",
+  size = "md",
+  interactive = false,
+  onClick,
+  className,
+  tooltip
+}) => {
+  const currentSize = useResponsiveValue(size);
+  const sizeConfig = responsiveScales.components.iconBadge[currentSize];
+  const sizeClasses2 = {
+    xs: `${(sizeConfig == null ? void 0 : sizeConfig.size) || "w-6 h-6"} ${(sizeConfig == null ? void 0 : sizeConfig.text) || "text-[10px]"} ${(sizeConfig == null ? void 0 : sizeConfig.rounded) || "rounded-md"}`,
+    sm: "w-8 h-8 text-xs rounded-lg",
+    md: "w-10 h-10 text-sm rounded-xl",
+    lg: "w-12 h-12 text-base rounded-xl"
+  };
+  const baseClasses = cn(
+    "inline-flex items-center justify-center font-bold shadow-md",
+    sizeClasses2[currentSize],
+    interactive && [
+      "cursor-pointer",
+      getAnimationClasses({
+        ...animationPresets.dataBadge,
+        size: currentSize === "lg" ? "lg" : currentSize === "sm" || currentSize === "xs" ? "sm" : "md"
+      })
+    ],
+    className
+  );
+  const gradientClasses = variant === "category" ? `bg-gradient-to-br from-category-${category} to-category-${Math.min(category + 1, 8)}` : variant === "status" ? `bg-gradient-to-br from-status-${status} to-status-${status}` : "bg-gradient-to-br from-category-1 to-category-2";
+  const badge = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(baseClasses, gradientClasses, "animate-fade-in"),
+      onClick,
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      onKeyDown: interactive ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick == null ? void 0 : onClick();
+        }
+      } : void 0,
+      "data-component-name": "IconBadge",
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary-foreground drop-shadow", children: icon }),
+        children && !icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary-foreground font-bold", children })
+      ]
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: tooltip, position: "top", size: "sm", children: badge });
+  }
+  return badge;
+};
+const valueColorMap = {
+  success: "text-green-600",
+  error: "text-red-600",
+  warning: "text-yellow-600",
+  info: "text-blue-600",
+  neutral: "text-muted-foreground",
+  default: "text-foreground"
+};
+function ListCard({
+  icon,
+  title,
+  subtitle,
+  metadata,
+  value,
+  badge,
+  onClick,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-start gap-3 p-3 rounded-lg border border-border transition-colors",
+        onClick && "hover:bg-muted/50 cursor-pointer",
+        className
+      ),
+      onClick,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          IconBadge,
+          {
+            variant: icon.variant || "category",
+            category: icon.variant === "category" ? icon.category || 1 : void 0,
+            status: icon.variant === "status" ? icon.status || "neutral" : void 0,
+            size: icon.size || "sm",
+            icon: icon.icon,
+            tooltip: icon.tooltip
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-foreground truncate", children: title }),
+              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: subtitle }),
+              metadata && metadata.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 mt-1", children: metadata.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: item }, index)) })
+            ] }),
+            (value || badge) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
+              value && /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-sm font-semibold",
+                    value.variant && valueColorMap[value.variant],
+                    value.className
+                  ),
+                  children: value.text
+                }
+              ),
+              badge && /* @__PURE__ */ jsxRuntime.jsx(
+                DataBadge,
+                {
+                  variant: badge.variant,
+                  status: badge.variant === "status" ? badge.status : void 0,
+                  category: badge.variant === "category" ? badge.category : void 0,
+                  size: badge.size || "sm",
+                  icon: badge.icon,
+                  className: "mt-1",
+                  children: badge.text
+                }
+              )
+            ] })
+          ] }),
+          children
+        ] })
+      ]
+    }
+  );
+}
 const STATUS_COLOR_MAP = {
   // Success states
   active: "success",
@@ -2390,7 +2662,6 @@ function getCompactWidth(type) {
   }
 }
 function createMobileCardRenderer(columns, mapping, entityType) {
-  const { ListCard: ListCard2 } = require("../components/data/ListCard");
   return ({ data, onItemClick }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: data.map((item, index) => {
     const cardProps = entityToListCardProps(
       item,
@@ -2399,7 +2670,7 @@ function createMobileCardRenderer(columns, mapping, entityType) {
       entityType
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
-      ListCard2,
+      ListCard,
       {
         ...cardProps,
         onClick: onItemClick ? () => onItemClick(item) : void 0
@@ -2573,10 +2844,10 @@ function useApiMutation(mutationFn, options) {
   const queryClient = reactQuery.useQueryClient();
   return reactQuery.useMutation({
     mutationFn,
-    onSuccess: (data, variables, context) => {
+    onSuccess: (...args) => {
       var _a;
-      queryClient.invalidateQueries();
-      (_a = options == null ? void 0 : options.onSuccess) == null ? void 0 : _a.call(options, data, variables, context);
+      void queryClient.invalidateQueries({});
+      (_a = options == null ? void 0 : options.onSuccess) == null ? void 0 : _a.call(options, ...args);
     },
     ...options
   });
@@ -2651,43 +2922,87 @@ function useFieldMetadata({
 }
 function useResponsiveTable(options = {}) {
   const {
+    columns,
     initialView = "full",
     autoSwitch = true,
-    minWidthForCompact = 400,
+    minWidthForCompact = TABLE_BREAKPOINTS.minForTable,
     debounceMs = 100,
     onViewChange
   } = options;
   const [viewMode, setViewModeState] = React.useState(initialView);
   const [isAutoSwitching, setIsAutoSwitching] = React.useState(autoSwitch);
+  const [containerWidth, setContainerWidth] = React.useState(0);
   const [overflowState, setOverflowState] = React.useState({
     fullOverflows: false,
     compactOverflows: false
   });
+  const containerRef = React.useRef(null);
   const fullTableRef = React.useRef(null);
   const compactTableRef = React.useRef(null);
   const debounceTimerRef = React.useRef(null);
   const isTransitioningRef = React.useRef(false);
+  const compactColumns = React.useCallback(() => {
+    if (!columns) return null;
+    const validImportance = IMPORTANCE_VISIBILITY.compact;
+    const filtered = columns.filter(
+      (col) => validImportance.includes(col.importance ?? "medium")
+    );
+    const limited = filtered.slice(0, TABLE_BREAKPOINTS.maxCompactColumns);
+    return limited.map((col) => ({
+      ...col,
+      label: getCompactLabel(col.field, col.label)
+    }));
+  }, [columns])();
+  const calculatedWidths = React.useCallback(() => {
+    if (!columns) {
+      return { full: 0, compact: 0, container: containerWidth };
+    }
+    const fullWidth = calculateTableWidth(
+      columns.map((c) => ({ type: c.type })),
+      "full"
+    );
+    const compactCols = compactColumns ?? [];
+    const compactWidth = calculateTableWidth(
+      compactCols.map((c) => ({ type: c.type })),
+      "compact"
+    );
+    return {
+      full: fullWidth,
+      compact: compactWidth,
+      container: containerWidth
+    };
+  }, [columns, compactColumns, containerWidth])();
   const hasOverflow = React.useCallback((element) => {
     if (!element) return false;
     return element.scrollWidth > element.clientWidth + 2;
   }, []);
   const determineView = React.useCallback(() => {
-    var _a, _b, _c, _d;
-    const containerWidth = ((_b = (_a = fullTableRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.clientWidth) || ((_d = (_c = compactTableRef.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.clientWidth) || window.innerWidth;
-    if (containerWidth < minWidthForCompact) {
+    var _a, _b, _c, _d, _e;
+    if (columns && containerWidth > 0) {
+      const { full, compact } = calculatedWidths;
+      const buffer = TABLE_BREAKPOINTS.widthBuffer;
+      if (containerWidth < minWidthForCompact) {
+        return "cards";
+      }
+      if (full + buffer <= containerWidth) {
+        return "full";
+      }
+      if (compact + buffer <= containerWidth) {
+        return "compact";
+      }
+      return "cards";
+    }
+    const width = ((_a = containerRef.current) == null ? void 0 : _a.clientWidth) || ((_c = (_b = fullTableRef.current) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.clientWidth) || ((_e = (_d = compactTableRef.current) == null ? void 0 : _d.parentElement) == null ? void 0 : _e.clientWidth) || window.innerWidth;
+    if (width < minWidthForCompact) {
       return "cards";
     }
     const fullOverflows = hasOverflow(fullTableRef.current);
     const compactOverflows = hasOverflow(compactTableRef.current);
     setOverflowState({ fullOverflows, compactOverflows });
-    if (!fullOverflows) {
-      return "full";
-    }
-    if (!compactOverflows) {
-      return "compact";
-    }
+    if (!fullOverflows) return "full";
+    if (!compactOverflows) return "compact";
     return "cards";
-  }, [hasOverflow, minWidthForCompact]);
+  }, [columns, containerWidth, calculatedWidths, minWidthForCompact, hasOverflow]);
   const checkAndUpdate = React.useCallback(() => {
     if (!isAutoSwitching || isTransitioningRef.current) return;
     if (debounceTimerRef.current) {
@@ -2719,42 +3034,49 @@ function useResponsiveTable(options = {}) {
   React.useEffect(() => {
     var _a, _b;
     if (!isAutoSwitching) return;
-    const initialCheckTimer = setTimeout(checkAndUpdate, 50);
+    const updateContainerWidth = () => {
+      var _a2;
+      const ref = containerRef.current || ((_a2 = fullTableRef.current) == null ? void 0 : _a2.parentElement);
+      if (ref) {
+        setContainerWidth(ref.clientWidth);
+      }
+    };
+    const initialTimer = setTimeout(updateContainerWidth, 50);
     const resizeObserver = new ResizeObserver(() => {
+      updateContainerWidth();
       checkAndUpdate();
     });
-    if (fullTableRef.current) {
-      resizeObserver.observe(fullTableRef.current);
-    }
-    if (compactTableRef.current) {
-      resizeObserver.observe(compactTableRef.current);
+    const observeTarget = containerRef.current || ((_a = fullTableRef.current) == null ? void 0 : _a.parentElement) || ((_b = compactTableRef.current) == null ? void 0 : _b.parentElement);
+    if (observeTarget) {
+      resizeObserver.observe(observeTarget);
     }
-    const parent = ((_a = fullTableRef.current) == null ? void 0 : _a.parentElement) || ((_b = compactTableRef.current) == null ? void 0 : _b.parentElement);
-    if (parent) {
-      resizeObserver.observe(parent);
+    if (!columns) {
+      if (fullTableRef.current) resizeObserver.observe(fullTableRef.current);
+      if (compactTableRef.current) resizeObserver.observe(compactTableRef.current);
     }
     window.addEventListener("resize", checkAndUpdate);
     return () => {
-      clearTimeout(initialCheckTimer);
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
+      clearTimeout(initialTimer);
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
       resizeObserver.disconnect();
       window.removeEventListener("resize", checkAndUpdate);
     };
-  }, [isAutoSwitching, checkAndUpdate]);
+  }, [isAutoSwitching, columns, checkAndUpdate]);
   React.useEffect(() => {
     if (!isAutoSwitching) return;
     const timer = setTimeout(checkAndUpdate, 100);
     return () => clearTimeout(timer);
-  }, [viewMode, isAutoSwitching, checkAndUpdate]);
+  }, [viewMode, containerWidth, isAutoSwitching, checkAndUpdate]);
   return {
     viewMode,
     setViewMode,
     enableAutoSwitch,
     isAutoSwitching,
+    containerRef,
     fullTableRef,
     compactTableRef,
+    compactColumns,
+    calculatedWidths,
     overflowState
   };
 }
@@ -2773,6 +3095,154 @@ function useOverflowDetection(ref) {
   }, [ref]);
   return hasOverflow;
 }
+const IMPORTANCE_PRIORITY = {
+  minimal: 0,
+  low: 1,
+  tertiary: 2,
+  medium: 3,
+  secondary: 4,
+  high: 5,
+  critical: 6,
+  primary: 7
+};
+function getColumnModeWidth(col, mode) {
+  if (mode === "hidden") return 0;
+  return getColumnWidth(col.type, mode === "compact" ? "compact" : "full");
+}
+function calculateAdaptiveWidth(columns, modes) {
+  return columns.reduce((sum, col) => sum + getColumnModeWidth(col, modes[col.field] ?? "full"), 0);
+}
+function calculateColumnModes(columns, containerWidth, protectedColumns, minColumnsVisible) {
+  const buffer = TABLE_BREAKPOINTS.widthBuffer;
+  const sortedByImportance = [...columns].sort((a, b) => {
+    const priorityA = IMPORTANCE_PRIORITY[a.importance ?? "tertiary"];
+    const priorityB = IMPORTANCE_PRIORITY[b.importance ?? "tertiary"];
+    return priorityA - priorityB;
+  });
+  const modes = {};
+  columns.forEach((col) => modes[col.field] = "full");
+  let currentWidth = calculateAdaptiveWidth(columns, modes);
+  if (currentWidth + buffer <= containerWidth) {
+    return { modes, degradationLevel: 0 };
+  }
+  let degradationLevel = 1;
+  for (const col of sortedByImportance) {
+    if (protectedColumns.has(col.field)) continue;
+    const priority = IMPORTANCE_PRIORITY[col.importance ?? "tertiary"];
+    if (priority > 2) break;
+    modes[col.field] = "compact";
+    currentWidth = calculateAdaptiveWidth(columns, modes);
+    if (currentWidth + buffer <= containerWidth) return { modes, degradationLevel };
+  }
+  degradationLevel = 2;
+  for (const col of sortedByImportance) {
+    if (protectedColumns.has(col.field)) continue;
+    const priority = IMPORTANCE_PRIORITY[col.importance ?? "tertiary"];
+    if (priority <= 2) continue;
+    if (priority > 4) break;
+    modes[col.field] = "compact";
+    currentWidth = calculateAdaptiveWidth(columns, modes);
+    if (currentWidth + buffer <= containerWidth) return { modes, degradationLevel };
+  }
+  degradationLevel = 3;
+  let visibleCount = columns.length;
+  for (const col of sortedByImportance) {
+    const priority = IMPORTANCE_PRIORITY[col.importance ?? "tertiary"];
+    if (priority > 2) break;
+    if (visibleCount <= minColumnsVisible) break;
+    modes[col.field] = "hidden";
+    visibleCount--;
+    currentWidth = calculateAdaptiveWidth(columns, modes);
+    if (currentWidth + buffer <= containerWidth) return { modes, degradationLevel };
+  }
+  degradationLevel = 4;
+  for (const col of sortedByImportance) {
+    const priority = IMPORTANCE_PRIORITY[col.importance ?? "tertiary"];
+    if (priority <= 2) continue;
+    if (priority > 4) break;
+    if (visibleCount <= minColumnsVisible) break;
+    modes[col.field] = "hidden";
+    visibleCount--;
+    currentWidth = calculateAdaptiveWidth(columns, modes);
+    if (currentWidth + buffer <= containerWidth) return { modes, degradationLevel };
+  }
+  degradationLevel = 5;
+  for (const col of sortedByImportance) {
+    if (modes[col.field] === "hidden") continue;
+    modes[col.field] = "compact";
+    currentWidth = calculateAdaptiveWidth(columns, modes);
+    if (currentWidth + buffer <= containerWidth) return { modes, degradationLevel };
+  }
+  return { modes, degradationLevel: 6 };
+}
+function useAdaptiveTable(options) {
+  const {
+    columns,
+    protectedColumns = [],
+    minColumnsVisible = 2,
+    minWidthForTable = TABLE_BREAKPOINTS.minForTable,
+    debounceMs = 100,
+    onModeChange
+  } = options;
+  const containerRef = React.useRef(null);
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const debounceTimerRef = React.useRef(null);
+  const protectedSet = React.useMemo(() => new Set(protectedColumns), [protectedColumns]);
+  const { modes: columnModes, degradationLevel } = React.useMemo(() => {
+    if (containerWidth === 0) {
+      const modes = {};
+      columns.forEach((col) => modes[col.field] = "full");
+      return { modes, degradationLevel: 0 };
+    }
+    return calculateColumnModes(columns, containerWidth, protectedSet, minColumnsVisible);
+  }, [columns, containerWidth, protectedSet, minColumnsVisible]);
+  const visibleColumns = React.useMemo(() => {
+    return columns.filter((col) => columnModes[col.field] !== "hidden").map(
+      (col) => columnModes[col.field] === "compact" ? { ...col, label: getCompactLabel(col.field, col.label) } : col
+    );
+  }, [columns, columnModes]);
+  const calculatedWidth = React.useMemo(
+    () => calculateAdaptiveWidth(columns, columnModes),
+    [columns, columnModes]
+  );
+  const viewMode = React.useMemo(() => {
+    if (containerWidth > 0 && containerWidth < minWidthForTable) return "cards";
+    if (visibleColumns.length < minColumnsVisible) return "cards";
+    return "table";
+  }, [containerWidth, minWidthForTable, visibleColumns.length, minColumnsVisible]);
+  React.useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) setContainerWidth(containerRef.current.clientWidth);
+    };
+    const initialTimer = setTimeout(updateWidth, 50);
+    const resizeObserver = new ResizeObserver(() => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      debounceTimerRef.current = setTimeout(updateWidth, debounceMs);
+    });
+    if (containerRef.current) resizeObserver.observe(containerRef.current);
+    return () => {
+      clearTimeout(initialTimer);
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      resizeObserver.disconnect();
+    };
+  }, [debounceMs]);
+  const prevModesRef = React.useRef(columnModes);
+  React.useEffect(() => {
+    if (onModeChange && columnModes !== prevModesRef.current) {
+      onModeChange(columnModes);
+      prevModesRef.current = columnModes;
+    }
+  }, [columnModes, onModeChange]);
+  return {
+    containerRef,
+    columnModes,
+    visibleColumns,
+    viewMode,
+    calculatedWidth,
+    containerWidth,
+    degradationLevel
+  };
+}
 function useEntityData(entity, options = {}) {
   var _a, _b, _c;
   const {
@@ -4655,8 +5125,9 @@ function normalizeColumn(col) {
   return col;
 }
 function DataTable({
-  data,
-  columns,
+  data: dataProp,
+  columns: columnsProp,
+  query,
   searchPlaceholder = "Search...",
   pageSize = 10,
   showPagination = true,
@@ -4665,12 +5136,12 @@ function DataTable({
   emptyMessage = "No data available",
   className = "",
   hover = false,
-  isLoading = false,
+  isLoading: isLoadingProp = false,
   loadingItemCount = 5,
   responsive = true,
   renderMobileCard,
   ui,
-  error = null,
+  error: errorProp = null,
   errorTitle,
   errorRetry,
   selectable = false,
@@ -4685,6 +5156,10 @@ function DataTable({
   const [currentPage, setCurrentPage] = React.useState(1);
   const currentBreakpoint = useBreakpoint();
   const isMobile = currentBreakpoint === "xs" || currentBreakpoint === "2xs" || currentBreakpoint === "sm";
+  const data = dataProp ?? (query == null ? void 0 : query.data) ?? [];
+  const columns = columnsProp ?? (query == null ? void 0 : query.columns) ?? [];
+  const isLoading = isLoadingProp || (query == null ? void 0 : query.isLoading) || (query == null ? void 0 : query.isLoadingMetadata) || false;
+  const error = errorProp ?? (query == null ? void 0 : query.error) ?? (query == null ? void 0 : query.metadataError) ?? null;
   const normalizedColumns = React.useMemo(
     () => columns.map((col) => normalizeColumn(col)),
     [columns]
@@ -5071,64 +5546,6 @@ const TableHead = TableHead$1;
 const TableHeader = TableHeader$1;
 const TableRow = TableRow$1;
 const TableFooter = TableFooter$1;
-const IconBadge = ({
-  children,
-  icon,
-  variant = "category",
-  category = 1,
-  status = "neutral",
-  size = "md",
-  interactive = false,
-  onClick,
-  className,
-  tooltip
-}) => {
-  const currentSize = useResponsiveValue(size);
-  const sizeConfig = responsiveScales.components.iconBadge[currentSize];
-  const sizeClasses2 = {
-    xs: `${(sizeConfig == null ? void 0 : sizeConfig.size) || "w-6 h-6"} ${(sizeConfig == null ? void 0 : sizeConfig.text) || "text-[10px]"} ${(sizeConfig == null ? void 0 : sizeConfig.rounded) || "rounded-md"}`,
-    sm: "w-8 h-8 text-xs rounded-lg",
-    md: "w-10 h-10 text-sm rounded-xl",
-    lg: "w-12 h-12 text-base rounded-xl"
-  };
-  const baseClasses = cn(
-    "inline-flex items-center justify-center font-bold shadow-md",
-    sizeClasses2[currentSize],
-    interactive && [
-      "cursor-pointer",
-      getAnimationClasses({
-        ...animationPresets.dataBadge,
-        size: currentSize === "lg" ? "lg" : currentSize === "sm" || currentSize === "xs" ? "sm" : "md"
-      })
-    ],
-    className
-  );
-  const gradientClasses = variant === "category" ? `bg-gradient-to-br from-category-${category} to-category-${Math.min(category + 1, 8)}` : variant === "status" ? `bg-gradient-to-br from-status-${status} to-status-${status}` : "bg-gradient-to-br from-category-1 to-category-2";
-  const badge = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(baseClasses, gradientClasses, "animate-fade-in"),
-      onClick,
-      role: interactive ? "button" : void 0,
-      tabIndex: interactive ? 0 : void 0,
-      onKeyDown: interactive ? (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick == null ? void 0 : onClick();
-        }
-      } : void 0,
-      "data-component-name": "IconBadge",
-      children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary-foreground drop-shadow", children: icon }),
-        children && !icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary-foreground font-bold", children })
-      ]
-    }
-  );
-  if (tooltip) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: tooltip, position: "top", size: "sm", children: badge });
-  }
-  return badge;
-};
 const Chart = ({
   title,
   subtitle,
@@ -5891,85 +6308,6 @@ const ProgressBar = ({
     )
   ] });
 };
-const valueColorMap = {
-  success: "text-green-600",
-  error: "text-red-600",
-  warning: "text-yellow-600",
-  info: "text-blue-600",
-  neutral: "text-muted-foreground",
-  default: "text-foreground"
-};
-function ListCard({
-  icon,
-  title,
-  subtitle,
-  metadata,
-  value,
-  badge,
-  onClick,
-  className,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-start gap-3 p-3 rounded-lg border border-border transition-colors",
-        onClick && "hover:bg-muted/50 cursor-pointer",
-        className
-      ),
-      onClick,
-      children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(
-          IconBadge,
-          {
-            variant: icon.variant || "category",
-            category: icon.variant === "category" ? icon.category || 1 : void 0,
-            status: icon.variant === "status" ? icon.status || "neutral" : void 0,
-            size: icon.size || "sm",
-            icon: icon.icon,
-            tooltip: icon.tooltip
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-foreground truncate", children: title }),
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: subtitle }),
-              metadata && metadata.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 mt-1", children: metadata.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: item }, index)) })
-            ] }),
-            (value || badge) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
-              value && /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-sm font-semibold",
-                    value.variant && valueColorMap[value.variant],
-                    value.className
-                  ),
-                  children: value.text
-                }
-              ),
-              badge && /* @__PURE__ */ jsxRuntime.jsx(
-                DataBadge,
-                {
-                  variant: badge.variant,
-                  status: badge.variant === "status" ? badge.status : void 0,
-                  category: badge.variant === "category" ? badge.category : void 0,
-                  size: badge.size || "sm",
-                  icon: badge.icon,
-                  className: "mt-1",
-                  children: badge.text
-                }
-              )
-            ] })
-          ] }),
-          children
-        ] })
-      ]
-    }
-  );
-}
 const TruncatedText = ({
   text,
   className,
@@ -9290,6 +9628,13 @@ const defaultShowcaseNavigation = [
     path: "/admin/dashboard",
     category: 2
   },
+  {
+    value: "admin-dashboard-v2",
+    label: "Admin Dashboard V2",
+    icon: "Shield",
+    path: "/admin/dashboard-v2",
+    category: 2
+  },
   {
     value: "admin-users",
     label: "User Management",
@@ -9560,7 +9905,6 @@ const Sidebar = ({ className }) => {
   );
 };
 const AppHeader = ({ className }) => {
-  const isTrialMode = false;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "header",
     {
@@ -9573,7 +9917,7 @@ const AppHeader = ({ className }) => {
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-16 items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold text-foreground", children: "Frontend Template" }),
-          isTrialMode
+          /* @__PURE__ */ jsxRuntime.jsx(DataBadge, { variant: "status", status: "info", display: "icon-text", children: "Trial Mode" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-2xl mx-8", children: /* @__PURE__ */ jsxRuntime.jsx(
           GlobalSearch,
@@ -14357,18 +14701,41 @@ function createReactApp(config) {
     enableRouting = true,
     auth,
     navigation,
-    customProviders = []
+    customProviders = [],
+    persistQueryCache = false,
+    queryCacheKey = "PATTERN_STACK_QUERY_CACHE"
   } = appConfig;
   const queryClient = new reactQuery.QueryClient({
     defaultOptions: {
       queries: {
         retry: 1,
         refetchOnWindowFocus: false,
-        staleTime: 5 * 60 * 1e3
+        staleTime: 5 * 60 * 1e3,
         // 5 minutes
+        // Keep data longer when persistence is enabled
+        gcTime: persistQueryCache ? 1e3 * 60 * 60 * 24 : 1e3 * 60 * 5
       }
     }
   });
+  if (persistQueryCache && typeof window !== "undefined") {
+    import("@tanstack/react-query-persist-client").then(({ persistQueryClient }) => {
+      import("@tanstack/query-sync-storage-persister").then(({ createSyncStoragePersister }) => {
+        const persister = createSyncStoragePersister({
+          storage: window.localStorage,
+          key: queryCacheKey
+        });
+        persistQueryClient({
+          queryClient,
+          persister,
+          maxAge: 1e3 * 60 * 60 * 24
+          // 24 hours
+        });
+        console.info("[app] Query cache persistence enabled");
+      });
+    }).catch((err) => {
+      console.warn("[app] Query persistence not available:", err.message);
+    });
+  }
   const routes = [];
   const DefaultHome = () => /* @__PURE__ */ jsxRuntime.jsx(DashboardTemplate, { title, description, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center min-h-[400px] text-center", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "text-4xl font-bold text-foreground mb-4", children: [
@@ -14387,7 +14754,7 @@ function createReactApp(config) {
   ] }) });
   const createProviderTree = (children) => {
     let tree = children;
-    customProviders.reverse().forEach((Provider) => {
+    [...customProviders].reverse().forEach((Provider) => {
       tree = /* @__PURE__ */ jsxRuntime.jsx(Provider, { children: tree }, Provider.name);
     });
     if (enableRouting) {
@@ -14430,10 +14797,10 @@ function createReactApp(config) {
         }
         return component;
       };
-      const AppContent = () => /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Routes, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Route, { path: "/", element: /* @__PURE__ */ jsxRuntime.jsx(AppLayout, {}), children: [
+      const AppContent = () => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-screen", children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Routes, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Route, { path: "/", element: /* @__PURE__ */ jsxRuntime.jsx(AppLayout, {}), children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: wrapWithProtection("/", /* @__PURE__ */ jsxRuntime.jsx(DefaultHome, {})) }),
         routes.map(({ path, component }, index) => /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path, element: wrapWithProtection(path, component) }, index))
-      ] }) });
+      ] }) }) });
       return createProviderTree(/* @__PURE__ */ jsxRuntime.jsx(AppContent, {}));
     },
     mount(elementId = "root") {
@@ -17628,6 +17995,10 @@ exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
 exports.BulkSelectionBar = BulkSelectionBar;
 exports.Button = Button;
+exports.COLUMN_WIDTHS = COLUMN_WIDTHS;
+exports.COMPACT_COLUMN_WIDTHS = COMPACT_COLUMN_WIDTHS;
+exports.COMPACT_FORMATTERS = COMPACT_FORMATTERS;
+exports.COMPACT_LABELS = COMPACT_LABELS;
 exports.Card = Card;
 exports.CardContent = CardContent;
 exports.CardDescription = CardDescription;
@@ -17686,6 +18057,7 @@ exports.FileUpload = FileUpload;
 exports.FormField = FormField;
 exports.FormGroup = FormGroup;
 exports.GlobalSearch = GlobalSearch;
+exports.IMPORTANCE_VISIBILITY = IMPORTANCE_VISIBILITY;
 exports.Icon = Icon;
 exports.IconBadge = IconBadge;
 exports.Input = Input;
@@ -17741,6 +18113,7 @@ exports.Spinner = Spinner;
 exports.StatCard = StatCard;
 exports.StyleGuide = StyleGuide;
 exports.Switch = Switch;
+exports.TABLE_BREAKPOINTS = TABLE_BREAKPOINTS;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCaption = TableCaption;
@@ -17763,6 +18136,7 @@ exports.UserMenu = UserMenu;
 exports.animationPresets = animationPresets;
 exports.apiClient = apiClient;
 exports.breakpoints = breakpoints;
+exports.calculateTableWidth = calculateTableWidth;
 exports.cn = cn;
 exports.createAPIDataTemplate = createAPIDataTemplate;
 exports.createApiClient = createApiClient;
@@ -17772,6 +18146,7 @@ exports.createSimpleApp = createSimpleApp;
 exports.defaultFieldRenderers = defaultFieldRenderers;
 exports.detectBulkOperationType = detectBulkOperationType;
 exports.detectUIConfig = detectUIConfig;
+exports.determineTableMode = determineTableMode;
 exports.entityToListCardProps = entityToListCardProps;
 exports.env = env;
 exports.formatNumberWithTooltip = formatNumberWithTooltip;
@@ -17779,6 +18154,9 @@ exports.generateBulkOperationName = generateBulkOperationName;
 exports.generateCompactColumns = generateCompactColumns;
 exports.getAnimationClasses = getAnimationClasses;
 exports.getChartHeight = getChartHeight;
+exports.getColumnWidth = getColumnWidth;
+exports.getCompactFormatter = getCompactFormatter;
+exports.getCompactLabel = getCompactLabel;
 exports.getContainerHeightClass = getContainerHeightClass;
 exports.getCurrentBreakpoint = getCurrentBreakpoint;
 exports.getFieldType = getFieldType;
@@ -17797,6 +18175,7 @@ exports.renderField = renderField;
 exports.responsiveScales = responsiveScales;
 exports.setGlobalAuthService = setGlobalAuthService;
 exports.tooltipContent = tooltipContent;
+exports.useAdaptiveTable = useAdaptiveTable;
 exports.useApiMutation = useApiMutation;
 exports.useApiQuery = useApiQuery;
 exports.useAuth = useAuth;