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

package/dist/index.es.js

@@ -7,7 +7,7 @@ import { twMerge } from "tailwind-merge";
 import axios from "axios";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useRef, useState, useEffect, useMemo, forwardRef, useCallback, useContext, createContext, useId, Component } from "react";
+import React__default, { useRef, useState, useEffect, useMemo, forwardRef, useCallback, useContext, createContext, useId, Component, Suspense } from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { Map as Map$1, Calculator, Brain, User, Handshake, Truck, Building, HelpCircle, Info, AlertCircle, Check, ArrowDown, ArrowUp, ArrowLeft, ArrowRight, ChevronUp, ChevronLeft, ChevronDown, ChevronRight, Music, Video, Image, Folder, File, Flag, Tag, Bookmark, Heart, Star, MapPin, Clock, Calendar, Phone, Mail, Unlock, Lock, Share, Upload, Download, Eye, Trash2, Edit, Plus, Search, Bell, Settings, Home, Layout, TrendingUp, Database, BarChart3, Users, Shield, X, Menu, Palette, Circle, Building2, Package, FileText, Loader2, EyeOff, InfoIcon, ChevronsUpDown, AreaChart, LineChart, TrendingDown, Minus, AlertTriangle, Activity, WifiOff, CloudOff, Cloud, CheckCircle, FileX, Sun, Moon, LogOut, Square, Waves, Zap, TreePine, Sparkles, Sunset, DollarSign, ShoppingCart, Target, ExternalLink, MoreHorizontal, Filter, Edit2, Undo2, RefreshCw, History, Save, Copy, Grid3X3, Layers, XCircle, Briefcase } from "lucide-react";
 import * as LabelPrimitive from "@radix-ui/react-label";
@@ -136,6 +136,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,
@@ -2009,6 +2144,143 @@ function renderField(value, fieldName, fieldType, breakpoint, item, customRender
 function cn(...inputs) {
   return twMerge(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__ */ 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__ */ jsx("span", { className: "text-primary-foreground drop-shadow", children: icon }),
+        children && !icon && /* @__PURE__ */ jsx("span", { className: "text-primary-foreground font-bold", children })
+      ]
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-foreground truncate", children: title }),
+              subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: subtitle }),
+              metadata && metadata.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 mt-1", children: metadata.map((item, index) => /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item }, index)) })
+            ] }),
+            (value || badge) && /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+              value && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-sm font-semibold",
+                    value.variant && valueColorMap[value.variant],
+                    value.className
+                  ),
+                  children: value.text
+                }
+              ),
+              badge && /* @__PURE__ */ 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",
@@ -2347,7 +2619,6 @@ function getCompactWidth(type) {
   }
 }
 function createMobileCardRenderer(columns, mapping, entityType) {
-  const { ListCard: ListCard2 } = require("../components/data/ListCard");
   return ({ data, onItemClick }) => /* @__PURE__ */ jsx("div", { className: "space-y-2", children: data.map((item, index) => {
     const cardProps = entityToListCardProps(
       item,
@@ -2356,7 +2627,7 @@ function createMobileCardRenderer(columns, mapping, entityType) {
       entityType
     );
     return /* @__PURE__ */ jsx(
-      ListCard2,
+      ListCard,
       {
         ...cardProps,
         onClick: onItemClick ? () => onItemClick(item) : void 0
@@ -2530,10 +2801,10 @@ function useApiMutation(mutationFn, options) {
   const queryClient = useQueryClient();
   return 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
   });
@@ -2608,43 +2879,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] = useState(initialView);
   const [isAutoSwitching, setIsAutoSwitching] = useState(autoSwitch);
+  const [containerWidth, setContainerWidth] = useState(0);
   const [overflowState, setOverflowState] = useState({
     fullOverflows: false,
     compactOverflows: false
   });
+  const containerRef = useRef(null);
   const fullTableRef = useRef(null);
   const compactTableRef = useRef(null);
   const debounceTimerRef = useRef(null);
   const isTransitioningRef = useRef(false);
+  const compactColumns = 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 = 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 = useCallback((element) => {
     if (!element) return false;
     return element.scrollWidth > element.clientWidth + 2;
   }, []);
   const determineView = 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 = useCallback(() => {
     if (!isAutoSwitching || isTransitioningRef.current) return;
     if (debounceTimerRef.current) {
@@ -2676,42 +2991,49 @@ function useResponsiveTable(options = {}) {
   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]);
   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
   };
 }
@@ -2730,6 +3052,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 = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const debounceTimerRef = useRef(null);
+  const protectedSet = useMemo(() => new Set(protectedColumns), [protectedColumns]);
+  const { modes: columnModes, degradationLevel } = 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 = 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 = useMemo(
+    () => calculateAdaptiveWidth(columns, columnModes),
+    [columns, columnModes]
+  );
+  const viewMode = useMemo(() => {
+    if (containerWidth > 0 && containerWidth < minWidthForTable) return "cards";
+    if (visibleColumns.length < minColumnsVisible) return "cards";
+    return "table";
+  }, [containerWidth, minWidthForTable, visibleColumns.length, minColumnsVisible]);
+  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 = useRef(columnModes);
+  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 {
@@ -4612,8 +5082,9 @@ function normalizeColumn(col) {
   return col;
 }
 function DataTable({
-  data,
-  columns,
+  data: dataProp,
+  columns: columnsProp,
+  query,
   searchPlaceholder = "Search...",
   pageSize = 10,
   showPagination = true,
@@ -4622,12 +5093,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,
@@ -4642,6 +5113,10 @@ function DataTable({
   const [currentPage, setCurrentPage] = 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 = useMemo(
     () => columns.map((col) => normalizeColumn(col)),
     [columns]
@@ -5028,64 +5503,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__ */ 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__ */ jsx("span", { className: "text-primary-foreground drop-shadow", children: icon }),
-        children && !icon && /* @__PURE__ */ jsx("span", { className: "text-primary-foreground font-bold", children })
-      ]
-    }
-  );
-  if (tooltip) {
-    return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, position: "top", size: "sm", children: badge });
-  }
-  return badge;
-};
 const Chart = ({
   title,
   subtitle,
@@ -5848,85 +6265,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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-foreground truncate", children: title }),
-              subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: subtitle }),
-              metadata && metadata.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 mt-1", children: metadata.map((item, index) => /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item }, index)) })
-            ] }),
-            (value || badge) && /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
-              value && /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-sm font-semibold",
-                    value.variant && valueColorMap[value.variant],
-                    value.className
-                  ),
-                  children: value.text
-                }
-              ),
-              badge && /* @__PURE__ */ 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,
@@ -9247,6 +9585,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",
@@ -9517,7 +9862,6 @@ const Sidebar = ({ className }) => {
   );
 };
 const AppHeader = ({ className }) => {
-  const isTrialMode = false;
   return /* @__PURE__ */ jsx(
     "header",
     {
@@ -9530,7 +9874,7 @@ const AppHeader = ({ className }) => {
       children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-foreground", children: "Frontend Template" }),
-          isTrialMode
+          /* @__PURE__ */ jsx(DataBadge, { variant: "status", status: "info", display: "icon-text", children: "Trial Mode" })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-2xl mx-8", children: /* @__PURE__ */ jsx(
           GlobalSearch,
@@ -14314,18 +14658,41 @@ function createReactApp(config) {
     enableRouting = true,
     auth,
     navigation,
-    customProviders = []
+    customProviders = [],
+    persistQueryCache = false,
+    queryCacheKey = "PATTERN_STACK_QUERY_CACHE"
   } = appConfig;
   const queryClient = new 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__ */ jsx(DashboardTemplate, { title, description, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center min-h-[400px] text-center", children: [
     /* @__PURE__ */ jsxs("h1", { className: "text-4xl font-bold text-foreground mb-4", children: [
@@ -14344,7 +14711,7 @@ function createReactApp(config) {
   ] }) });
   const createProviderTree = (children) => {
     let tree = children;
-    customProviders.reverse().forEach((Provider) => {
+    [...customProviders].reverse().forEach((Provider) => {
       tree = /* @__PURE__ */ jsx(Provider, { children: tree }, Provider.name);
     });
     if (enableRouting) {
@@ -14387,10 +14754,10 @@ function createReactApp(config) {
         }
         return component;
       };
-      const AppContent = () => /* @__PURE__ */ jsx(Routes, { children: /* @__PURE__ */ jsxs(Route, { path: "/", element: /* @__PURE__ */ jsx(AppLayout, {}), children: [
+      const AppContent = () => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen", children: "Loading..." }), children: /* @__PURE__ */ jsx(Routes, { children: /* @__PURE__ */ jsxs(Route, { path: "/", element: /* @__PURE__ */ jsx(AppLayout, {}), children: [
         /* @__PURE__ */ jsx(Route, { index: true, element: wrapWithProtection("/", /* @__PURE__ */ jsx(DefaultHome, {})) }),
         routes.map(({ path, component }, index) => /* @__PURE__ */ jsx(Route, { path, element: wrapWithProtection(path, component) }, index))
-      ] }) });
+      ] }) }) });
       return createProviderTree(/* @__PURE__ */ jsx(AppContent, {}));
     },
     mount(elementId = "root") {
@@ -17586,6 +17953,10 @@ export {
   Breadcrumb,
   BulkSelectionBar,
   Button,
+  COLUMN_WIDTHS,
+  COMPACT_COLUMN_WIDTHS,
+  COMPACT_FORMATTERS,
+  COMPACT_LABELS,
   Card,
   CardContent,
   CardDescription,
@@ -17644,6 +18015,7 @@ export {
   FormField,
   FormGroup,
   GlobalSearch,
+  IMPORTANCE_VISIBILITY,
   Icon,
   IconBadge,
   Input,
@@ -17699,6 +18071,7 @@ export {
   StatCard,
   StyleGuide,
   Switch,
+  TABLE_BREAKPOINTS,
   Table,
   TableBody,
   TableCaption,
@@ -17721,6 +18094,7 @@ export {
   animationPresets,
   apiClient,
   breakpoints,
+  calculateTableWidth,
   cn,
   createAPIDataTemplate,
   createApiClient,
@@ -17730,6 +18104,7 @@ export {
   defaultFieldRenderers,
   detectBulkOperationType,
   detectUIConfig,
+  determineTableMode,
   entityToListCardProps,
   env,
   formatNumberWithTooltip,
@@ -17737,6 +18112,9 @@ export {
   generateCompactColumns,
   getAnimationClasses,
   getChartHeight,
+  getColumnWidth,
+  getCompactFormatter,
+  getCompactLabel,
   getContainerHeightClass,
   getCurrentBreakpoint,
   getFieldType,
@@ -17755,6 +18133,7 @@ export {
   responsiveScales,
   setGlobalAuthService,
   tooltipContent,
+  useAdaptiveTable,
   useApiMutation,
   useApiQuery,
   useAuth,