@pattern-stack/frontend-patterns 0.2.0-alpha.1 → 0.2.0-alpha.3

package/dist/index.es.js

@@ -8,9 +8,10 @@ import axios from "axios";
 import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
 import * as React 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, Loader2, EyeOff, InfoIcon, Circle, ChevronsUpDown, AreaChart, LineChart, TrendingDown, Minus, AlertTriangle, Activity, CheckCircle, FileX, Sun, Moon, LogOut, Square, Waves, Zap, TreePine, Sparkles, Sunset, Building2, DollarSign, ShoppingCart, Target, ExternalLink, MoreHorizontal, Filter, Edit2, Undo2, RefreshCw, FileText, History, Save, Copy, Grid3X3, Layers, XCircle, Briefcase } from "lucide-react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
-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, Loader2, EyeOff, InfoIcon, Circle, ChevronsUpDown, AreaChart, LineChart, TrendingDown, Minus, AlertTriangle, Activity, CheckCircle, FileX, Sun, Moon, LogOut, Square, Waves, Zap, TreePine, Sparkles, Sunset, Building2, DollarSign, ShoppingCart, Target, ExternalLink, MoreHorizontal, Filter, Edit2, Undo2, RefreshCw, FileText, History, Save, Copy, Grid3X3, Layers, XCircle, Briefcase } from "lucide-react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { useQuery, useQueryClient, useMutation, QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Slot } from "@radix-ui/react-slot";
@@ -653,11 +654,11 @@ const DEFAULT_FIELD_MAPPINGS = {
   state: "status",
   orderStatus: "status",
   paymentStatus: "status",
-  // Category fields
-  category: "category",
-  type: "category",
-  tag: "category",
-  label: "category",
+  // Badge fields (categories, tags, labels)
+  category: "badge",
+  type: "badge",
+  tag: "badge",
+  label: "badge",
   // Money fields
   amount: "money",
   price: "money",
@@ -733,7 +734,7 @@ const FIELD_PATTERNS = [
   // discount_rate, tax_percent
   { pattern: /status|state/, type: "status" },
   // order_status, state
-  { pattern: /category|type|tag|label/, type: "category" },
+  { pattern: /category|type|tag|label/, type: "badge" },
   // product_category
   { pattern: /email/i, type: "email" },
   // user_email, emailAddress
@@ -1946,18 +1947,46 @@ const globalColorManager = new CategoryColorManager("sequential");
 function useCategoryColors(strategy) {
   return strategy ? new CategoryColorManager(strategy) : globalColorManager;
 }
-function formatMoney(value, currency = "USD") {
-  return new Intl.NumberFormat("en-US", {
+const LEGACY_TYPE_MAP = {
+  // Old frontend names
+  category: "badge",
+  // Backend names that differ
+  currency: "money",
+  percentage: "percent",
+  // Input-focused types (deprecated)
+  select: "badge",
+  multiselect: "badge",
+  textarea: "text",
+  reference: "entity",
+  enum: "badge"
+};
+function normalizeFieldType(type) {
+  return LEGACY_TYPE_MAP[type] ?? type ?? "text";
+}
+function formatMoney(value, currency = "USD", decimals = 2, locale = "en-US") {
+  return new Intl.NumberFormat(locale, {
     style: "currency",
     currency,
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
   }).format(value);
 }
-function formatPercent(value, decimals = 1) {
-  return `${value.toFixed(decimals)}%`;
+function formatPercent(value, decimals = 1, locale = "en-US") {
+  return new Intl.NumberFormat(locale, {
+    style: "percent",
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  }).format(value / 100);
+}
+function formatNumber(value, decimals, locale = "en-US") {
+  const options = {};
+  if (decimals !== void 0) {
+    options.minimumFractionDigits = decimals;
+    options.maximumFractionDigits = decimals;
+  }
+  return new Intl.NumberFormat(locale, options).format(value);
 }
-function formatDate(value, includeTime = false) {
+function formatDate(value, includeTime = false, locale = "en-US") {
   const date = typeof value === "string" ? new Date(value) : value;
   if (isNaN(date.getTime())) return String(value);
   const options = {
@@ -1970,7 +1999,7 @@ function formatDate(value, includeTime = false) {
     options.minute = "2-digit";
     options.hour12 = true;
   }
-  return date.toLocaleDateString("en-US", options);
+  return date.toLocaleDateString(locale, options);
 }
 function getSizeForBreakpoint(breakpoint) {
   switch (breakpoint) {
@@ -1998,35 +2027,36 @@ function getDisplayForBreakpoint(breakpoint) {
       return "full";
   }
 }
+const DEFAULT_STATUS_COLORS = {
+  active: "success",
+  completed: "success",
+  approved: "success",
+  published: "success",
+  pending: "warning",
+  processing: "warning",
+  scheduled: "warning",
+  draft: "warning",
+  failed: "error",
+  rejected: "error",
+  cancelled: "error",
+  deleted: "error",
+  inactive: "neutral",
+  archived: "neutral",
+  closed: "neutral"
+};
 const defaultFieldRenderers = {
-  status: (value, _fieldName, breakpoint) => {
+  status: (value, _fieldName, breakpoint, _item, format) => {
     const size = getSizeForBreakpoint(breakpoint);
     const display = getDisplayForBreakpoint(breakpoint);
-    const statusColorMap = {
-      active: "success",
-      completed: "success",
-      approved: "success",
-      published: "success",
-      pending: "warning",
-      processing: "warning",
-      scheduled: "warning",
-      draft: "warning",
-      failed: "error",
-      rejected: "error",
-      cancelled: "error",
-      deleted: "error",
-      inactive: "neutral",
-      archived: "neutral",
-      closed: "neutral"
-    };
-    const status = statusColorMap[String(value).toLowerCase()] || "info";
+    const colorMap = (format == null ? void 0 : format.statusColors) ?? DEFAULT_STATUS_COLORS;
+    const status = colorMap[String(value).toLowerCase()] ?? "info";
     return /* @__PURE__ */ jsxDEV(DataBadge, { variant: "status", status, size, display, children: String(value) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-      lineNumber: 134,
+      lineNumber: 209,
       columnNumber: 7
     }, void 0);
   },
-  category: (value, _fieldName, breakpoint) => {
+  badge: (value, _fieldName, breakpoint) => {
     const size = getSizeForBreakpoint(breakpoint);
     const display = getDisplayForBreakpoint(breakpoint);
     const color = globalColorManager.getColor(String(value));
@@ -2043,45 +2073,62 @@ const defaultFieldRenderers = {
       false,
       {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-        lineNumber: 146,
+        lineNumber: 221,
         columnNumber: 7
       },
       void 0
     );
   },
-  money: (value) => {
-    const formatted = formatMoney(Number(value));
+  money: (value, _fieldName, _breakpoint, _item, format) => {
+    const formatted = formatMoney(
+      Number(value),
+      (format == null ? void 0 : format.currency) ?? "USD",
+      (format == null ? void 0 : format.decimals) ?? 2,
+      (format == null ? void 0 : format.locale) ?? "en-US"
+    );
     return /* @__PURE__ */ jsxDEV("span", { className: "font-mono tabular-nums", children: formatted }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-      lineNumber: 159,
+      lineNumber: 239,
       columnNumber: 12
     }, void 0);
   },
-  percent: (value) => {
-    const formatted = formatPercent(Number(value));
+  percent: (value, _fieldName, _breakpoint, _item, format) => {
+    const formatted = formatPercent(
+      Number(value),
+      (format == null ? void 0 : format.decimals) ?? 1,
+      (format == null ? void 0 : format.locale) ?? "en-US"
+    );
     return /* @__PURE__ */ jsxDEV("span", { className: "font-mono tabular-nums", children: formatted }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-      lineNumber: 164,
+      lineNumber: 248,
       columnNumber: 12
     }, void 0);
   },
-  date: (value) => {
-    const formatted = formatDate(value, false);
+  date: (value, _fieldName, _breakpoint, _item, format) => {
+    const formatted = formatDate(
+      value,
+      false,
+      (format == null ? void 0 : format.locale) ?? "en-US"
+    );
     return /* @__PURE__ */ jsxDEV("span", { className: "text-muted-foreground", children: formatted }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-      lineNumber: 169,
+      lineNumber: 257,
       columnNumber: 12
     }, void 0);
   },
-  datetime: (value) => {
-    const formatted = formatDate(value, true);
+  datetime: (value, _fieldName, _breakpoint, _item, format) => {
+    const formatted = formatDate(
+      value,
+      true,
+      (format == null ? void 0 : format.locale) ?? "en-US"
+    );
     return /* @__PURE__ */ jsxDEV("span", { className: "text-muted-foreground text-sm", children: formatted }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-      lineNumber: 174,
+      lineNumber: 266,
       columnNumber: 12
     }, void 0);
   },
-  user: (value, _fieldName, breakpoint, _item) => {
+  user: (value, _fieldName, breakpoint) => {
     const sizeMap2 = {
       xs: "xs",
       sm: "sm",
@@ -2093,31 +2140,31 @@ const defaultFieldRenderers = {
     if (breakpoint === "xs" || breakpoint === "2xs") {
       return /* @__PURE__ */ jsxDEV(Avatar, { size, fallback: initials }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-        lineNumber: 196,
+        lineNumber: 288,
         columnNumber: 14
       }, void 0);
     }
     return /* @__PURE__ */ jsxDEV("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxDEV(Avatar, { size, fallback: initials }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-        lineNumber: 202,
+        lineNumber: 294,
         columnNumber: 9
       }, void 0),
       /* @__PURE__ */ jsxDEV("span", { className: "text-sm", children: String(value) }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-        lineNumber: 203,
+        lineNumber: 295,
         columnNumber: 9
       }, void 0)
     ] }, void 0, true, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-      lineNumber: 201,
+      lineNumber: 293,
       columnNumber: 7
     }, void 0);
   },
-  entity: (value, fieldName, breakpoint, _item) => {
+  entity: (value, fieldName, breakpoint, _item, format) => {
     const size = getSizeForBreakpoint(breakpoint);
     const showName = breakpoint !== "xs" && breakpoint !== "2xs";
-    const type = fieldName.includes("vendor") || fieldName.includes("supplier") ? "vendor" : fieldName.includes("partner") ? "partner" : fieldName.includes("company") || fieldName.includes("organization") ? "company" : "customer";
+    const type = (format == null ? void 0 : format.entityType) ?? (fieldName.includes("vendor") || fieldName.includes("supplier") ? "vendor" : fieldName.includes("partner") ? "partner" : fieldName.includes("company") || fieldName.includes("organization") ? "company" : "customer");
     return /* @__PURE__ */ jsxDEV(
       EntityIcon,
       {
@@ -2131,20 +2178,20 @@ const defaultFieldRenderers = {
       false,
       {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-        lineNumber: 223,
+        lineNumber: 316,
         columnNumber: 7
       },
       void 0
     );
   },
-  boolean: (value, _fieldName, _breakpoint) => {
+  boolean: (value) => {
     return /* @__PURE__ */ jsxDEV(Checkbox, { checked: Boolean(value), disabled: true }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-      lineNumber: 234,
+      lineNumber: 327,
       columnNumber: 12
     }, void 0);
   },
-  email: (value, _fieldName, _breakpoint) => {
+  email: (value) => {
     return /* @__PURE__ */ jsxDEV(
       "a",
       {
@@ -2156,13 +2203,13 @@ const defaultFieldRenderers = {
       false,
       {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-        lineNumber: 239,
+        lineNumber: 332,
         columnNumber: 7
       },
       void 0
     );
   },
-  url: (value, _fieldName, _breakpoint) => {
+  url: (value) => {
     const url = String(value);
     const display = url.replace(/^https?:\/\/(www\.)?/, "").split("/")[0];
     return /* @__PURE__ */ jsxDEV(
@@ -2178,13 +2225,13 @@ const defaultFieldRenderers = {
       false,
       {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-        lineNumber: 253,
+        lineNumber: 346,
         columnNumber: 7
       },
       void 0
     );
   },
-  phone: (value, _fieldName, _breakpoint) => {
+  phone: (value) => {
     const phone = String(value);
     const cleaned = phone.replace(/\D/g, "");
     return /* @__PURE__ */ jsxDEV(
@@ -2198,40 +2245,111 @@ const defaultFieldRenderers = {
       false,
       {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-        lineNumber: 269,
+        lineNumber: 362,
         columnNumber: 7
       },
       void 0
     );
   },
-  text: (value, _fieldName, _breakpoint) => {
+  text: (value) => {
     return /* @__PURE__ */ jsxDEV("span", { children: String(value) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-      lineNumber: 279,
+      lineNumber: 372,
       columnNumber: 12
     }, void 0);
   },
-  number: (value, _fieldName, _breakpoint) => {
-    const num = Number(value);
-    const formatted = num.toLocaleString();
+  number: (value, _fieldName, _breakpoint, _item, format) => {
+    const formatted = formatNumber(
+      Number(value),
+      format == null ? void 0 : format.decimals,
+      (format == null ? void 0 : format.locale) ?? "en-US"
+    );
     return /* @__PURE__ */ jsxDEV("span", { className: "font-mono tabular-nums", children: formatted }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-      lineNumber: 285,
+      lineNumber: 381,
+      columnNumber: 12
+    }, void 0);
+  },
+  json: (value) => {
+    const str = typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
+    return /* @__PURE__ */ jsxDEV("code", { className: "text-xs bg-muted px-1 py-0.5 rounded font-mono", children: str.length > 50 ? str.slice(0, 50) + "..." : str }, void 0, false, {
+      fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
+      lineNumber: 386,
+      columnNumber: 12
+    }, void 0);
+  },
+  image: (value) => {
+    return /* @__PURE__ */ jsxDEV("img", { src: String(value), alt: "", className: "w-8 h-8 rounded object-cover" }, void 0, false, {
+      fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
+      lineNumber: 390,
       columnNumber: 12
     }, void 0);
+  },
+  rating: (value, _fieldName, _breakpoint, _item, format) => {
+    const max = (format == null ? void 0 : format.max) ?? 5;
+    const filled = Math.round(Number(value));
+    return (
+      // eslint-disable-next-line design-system/no-hardcoded-colors -- amber is standard for star ratings
+      /* @__PURE__ */ jsxDEV("span", { className: "text-amber-500", children: [
+        "★".repeat(Math.min(filled, max)),
+        "☆".repeat(Math.max(0, max - filled))
+      ] }, void 0, true, {
+        fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
+        lineNumber: 398,
+        columnNumber: 7
+      }, void 0)
+    );
+  },
+  color: (value) => {
+    return /* @__PURE__ */ jsxDEV("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxDEV("div", { className: "w-4 h-4 rounded border", style: { backgroundColor: String(value) } }, void 0, false, {
+        fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
+        lineNumber: 407,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDEV("span", { className: "text-xs font-mono", children: String(value) }, void 0, false, {
+        fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
+        lineNumber: 408,
+        columnNumber: 9
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
+      lineNumber: 406,
+      columnNumber: 7
+    }, void 0);
+  },
+  file: (value, _fieldName, _breakpoint, item) => {
+    const filename = (item == null ? void 0 : item.filename) ?? String(value).split("/").pop() ?? "file";
+    return /* @__PURE__ */ jsxDEV("a", { href: String(value), className: "flex items-center gap-1 text-primary hover:underline", children: [
+      /* @__PURE__ */ jsxDEV(File, { className: "w-4 h-4" }, void 0, false, {
+        fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
+        lineNumber: 417,
+        columnNumber: 9
+      }, void 0),
+      /* @__PURE__ */ jsxDEV("span", { className: "text-sm truncate max-w-[150px]", children: filename }, void 0, false, {
+        fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
+        lineNumber: 418,
+        columnNumber: 9
+      }, void 0)
+    ] }, void 0, true, {
+      fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
+      lineNumber: 416,
+      columnNumber: 7
+    }, void 0);
   }
 };
-function renderField(value, fieldName, fieldType, breakpoint, item, customRenderers) {
-  const renderer = (customRenderers == null ? void 0 : customRenderers[fieldType]) || defaultFieldRenderers[fieldType];
+function renderField(value, fieldName, fieldType, breakpoint, item, customRenderers, format) {
+  const normalizedType = normalizeFieldType(fieldType);
+  const renderer = (customRenderers == null ? void 0 : customRenderers[normalizedType]) || defaultFieldRenderers[normalizedType];
   if (!renderer) {
-    console.warn(`No renderer found for field type: ${fieldType}`);
+    console.warn(`No renderer found for field type: ${fieldType} (normalized: ${normalizedType})`);
     return /* @__PURE__ */ jsxDEV("span", { children: String(value) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/utils/ui-mapping.tsx",
-      lineNumber: 306,
+      lineNumber: 443,
       columnNumber: 12
     }, this);
   }
-  return renderer(value, fieldName, breakpoint, item);
+  return renderer(value, fieldName, breakpoint, item, format);
 }
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -2448,6 +2566,149 @@ function useHealth() {
     retry: 2
   });
 }
+function useFieldMetadata({
+  entity,
+  view = "list",
+  enabled = true
+}) {
+  return useQuery({
+    queryKey: ["metadata", entity, view],
+    queryFn: async () => {
+      const response = await fetch(`/api/v1/${entity}/metadata?view=${view}`);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch metadata for ${entity}`);
+      }
+      return response.json();
+    },
+    enabled,
+    staleTime: 1e3 * 60 * 30
+    // 30 minutes - metadata rarely changes
+  });
+}
+function useResponsiveTable(options = {}) {
+  const {
+    initialView = "full",
+    autoSwitch = true,
+    minWidthForCompact = 400,
+    debounceMs = 100,
+    onViewChange
+  } = options;
+  const [viewMode, setViewModeState] = useState(initialView);
+  const [isAutoSwitching, setIsAutoSwitching] = useState(autoSwitch);
+  const [overflowState, setOverflowState] = useState({
+    fullOverflows: false,
+    compactOverflows: false
+  });
+  const fullTableRef = useRef(null);
+  const compactTableRef = useRef(null);
+  const debounceTimerRef = useRef(null);
+  const isTransitioningRef = useRef(false);
+  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) {
+      return "cards";
+    }
+    const fullOverflows = hasOverflow(fullTableRef.current);
+    const compactOverflows = hasOverflow(compactTableRef.current);
+    setOverflowState({ fullOverflows, compactOverflows });
+    if (!fullOverflows) {
+      return "full";
+    }
+    if (!compactOverflows) {
+      return "compact";
+    }
+    return "cards";
+  }, [hasOverflow, minWidthForCompact]);
+  const checkAndUpdate = useCallback(() => {
+    if (!isAutoSwitching || isTransitioningRef.current) return;
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    debounceTimerRef.current = setTimeout(() => {
+      const newView = determineView();
+      if (newView !== viewMode) {
+        isTransitioningRef.current = true;
+        setViewModeState(newView);
+        onViewChange == null ? void 0 : onViewChange(newView);
+        setTimeout(() => {
+          isTransitioningRef.current = false;
+        }, 50);
+      }
+    }, debounceMs);
+  }, [isAutoSwitching, determineView, viewMode, debounceMs, onViewChange]);
+  const setViewMode = useCallback(
+    (mode) => {
+      setIsAutoSwitching(false);
+      setViewModeState(mode);
+      onViewChange == null ? void 0 : onViewChange(mode);
+    },
+    [onViewChange]
+  );
+  const enableAutoSwitch = useCallback(() => {
+    setIsAutoSwitching(true);
+  }, []);
+  useEffect(() => {
+    var _a, _b;
+    if (!isAutoSwitching) return;
+    const initialCheckTimer = setTimeout(checkAndUpdate, 50);
+    const resizeObserver = new ResizeObserver(() => {
+      checkAndUpdate();
+    });
+    if (fullTableRef.current) {
+      resizeObserver.observe(fullTableRef.current);
+    }
+    if (compactTableRef.current) {
+      resizeObserver.observe(compactTableRef.current);
+    }
+    const parent = ((_a = fullTableRef.current) == null ? void 0 : _a.parentElement) || ((_b = compactTableRef.current) == null ? void 0 : _b.parentElement);
+    if (parent) {
+      resizeObserver.observe(parent);
+    }
+    window.addEventListener("resize", checkAndUpdate);
+    return () => {
+      clearTimeout(initialCheckTimer);
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", checkAndUpdate);
+    };
+  }, [isAutoSwitching, checkAndUpdate]);
+  useEffect(() => {
+    if (!isAutoSwitching) return;
+    const timer = setTimeout(checkAndUpdate, 100);
+    return () => clearTimeout(timer);
+  }, [viewMode, isAutoSwitching, checkAndUpdate]);
+  return {
+    viewMode,
+    setViewMode,
+    enableAutoSwitch,
+    isAutoSwitching,
+    fullTableRef,
+    compactTableRef,
+    overflowState
+  };
+}
+function useOverflowDetection(ref) {
+  const [hasOverflow, setHasOverflow] = useState(false);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const checkOverflow = () => {
+      setHasOverflow(element.scrollWidth > element.clientWidth + 2);
+    };
+    checkOverflow();
+    const observer = new ResizeObserver(checkOverflow);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref]);
+  return hasOverflow;
+}
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]",
   {
@@ -5320,6 +5581,25 @@ function DataTable({
     }
     const value = item[column.key];
     const fieldName = column.key;
+    if (value === null || value === void 0) {
+      return /* @__PURE__ */ jsxDEV("span", { className: "text-muted-foreground", children: "—" }, void 0, false, {
+        fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
+        lineNumber: 179,
+        columnNumber: 14
+      }, this);
+    }
+    if (column.type) {
+      return renderField(
+        value,
+        fieldName,
+        column.type,
+        currentBreakpoint,
+        item,
+        void 0,
+        // customRenderers
+        column.format
+      );
+    }
     const fieldType = getFieldType(fieldName, value, effectiveUI);
     return renderField(value, fieldName, fieldType, currentBreakpoint, item);
   };
@@ -5332,99 +5612,99 @@ function DataTable({
         children: [
           showSearch && /* @__PURE__ */ jsxDEV("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxDEV("div", { className: "relative flex-1 max-w-sm", children: /* @__PURE__ */ jsxDEV(Skeleton$1, { className: "h-10 w-full" }, void 0, false, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 195,
+            lineNumber: 213,
             columnNumber: 15
           }, this) }, void 0, false, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 194,
+            lineNumber: 212,
             columnNumber: 13
           }, this) }, void 0, false, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 193,
+            lineNumber: 211,
             columnNumber: 11
           }, this),
           /* @__PURE__ */ jsxDEV("div", { className: "rounded border overflow-hidden", children: /* @__PURE__ */ jsxDEV(Table$1, { children: [
             /* @__PURE__ */ jsxDEV(TableHeader$1, { children: /* @__PURE__ */ jsxDEV(TableRow$1, { children: visibleColumns.map((column) => /* @__PURE__ */ jsxDEV(TableHead$1, { style: { width: column.width }, children: /* @__PURE__ */ jsxDEV("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxDEV(Skeleton$1, { className: "h-4 w-20" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 208,
+              lineNumber: 226,
               columnNumber: 23
             }, this) }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 207,
+              lineNumber: 225,
               columnNumber: 21
             }, this) }, column.key, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 206,
+              lineNumber: 224,
               columnNumber: 19
             }, this)) }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 204,
+              lineNumber: 222,
               columnNumber: 15
             }, this) }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 203,
+              lineNumber: 221,
               columnNumber: 13
             }, this),
             /* @__PURE__ */ jsxDEV(TableBody$1, { children: Array.from({ length: loadingItemCount }, (_, index) => /* @__PURE__ */ jsxDEV(TableRow$1, { children: visibleColumns.map((column) => /* @__PURE__ */ jsxDEV(TableCell$1, { children: /* @__PURE__ */ jsxDEV(Skeleton$1, { className: "h-4 w-full max-w-32" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 219,
+              lineNumber: 237,
               columnNumber: 23
             }, this) }, column.key, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 218,
+              lineNumber: 236,
               columnNumber: 21
             }, this)) }, index, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 216,
+              lineNumber: 234,
               columnNumber: 17
             }, this)) }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 214,
+              lineNumber: 232,
               columnNumber: 13
             }, this)
           ] }, void 0, true, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 202,
+            lineNumber: 220,
             columnNumber: 11
           }, this) }, void 0, false, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 201,
+            lineNumber: 219,
             columnNumber: 9
           }, this),
           showPagination && /* @__PURE__ */ jsxDEV("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxDEV(Skeleton$1, { className: "h-4 w-48" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 231,
+              lineNumber: 249,
               columnNumber: 13
             }, this),
             /* @__PURE__ */ jsxDEV("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxDEV(Skeleton$1, { className: "h-8 w-20" }, void 0, false, {
                 fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-                lineNumber: 233,
+                lineNumber: 251,
                 columnNumber: 15
               }, this),
               /* @__PURE__ */ jsxDEV("div", { className: "flex items-center gap-1", children: Array.from({ length: 3 }, (_, i) => /* @__PURE__ */ jsxDEV(Skeleton$1, { className: "h-8 w-8" }, i, false, {
                 fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-                lineNumber: 236,
+                lineNumber: 254,
                 columnNumber: 19
               }, this)) }, void 0, false, {
                 fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-                lineNumber: 234,
+                lineNumber: 252,
                 columnNumber: 15
               }, this),
               /* @__PURE__ */ jsxDEV(Skeleton$1, { className: "h-8 w-16" }, void 0, false, {
                 fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-                lineNumber: 239,
+                lineNumber: 257,
                 columnNumber: 15
               }, this)
             ] }, void 0, true, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 232,
+              lineNumber: 250,
               columnNumber: 13
             }, this)
           ] }, void 0, true, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 230,
+            lineNumber: 248,
             columnNumber: 11
           }, this)
         ]
@@ -5433,7 +5713,7 @@ function DataTable({
       true,
       {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-        lineNumber: 187,
+        lineNumber: 205,
         columnNumber: 7
       },
       this
@@ -5452,7 +5732,7 @@ function DataTable({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 253,
+            lineNumber: 271,
             columnNumber: 13
           },
           this
@@ -5473,7 +5753,7 @@ function DataTable({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 257,
+            lineNumber: 275,
             columnNumber: 13
           },
           this
@@ -5491,7 +5771,7 @@ function DataTable({
             "aria-label": tooltipContent.clearSearch,
             children: /* @__PURE__ */ jsxDEV(X, { className: "w-4 h-4", "data-component-name": "DataTableClear" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 278,
+              lineNumber: 296,
               columnNumber: 17
             }, this)
           },
@@ -5499,14 +5779,14 @@ function DataTable({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 268,
+            lineNumber: 286,
             columnNumber: 15
           },
           this
         )
       ] }, void 0, true, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-        lineNumber: 252,
+        lineNumber: 270,
         columnNumber: 11
       }, this),
       searchTerm && /* @__PURE__ */ jsxDEV("div", { className: "text-muted-foreground text-sm", children: [
@@ -5515,12 +5795,12 @@ function DataTable({
         sortedData.length !== 1 ? "s" : ""
       ] }, void 0, true, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-        lineNumber: 283,
+        lineNumber: 301,
         columnNumber: 13
       }, this)
     ] }, void 0, true, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-      lineNumber: 251,
+      lineNumber: 269,
       columnNumber: 9
     }, this),
     renderMobileCard && isMobile ? /* @__PURE__ */ jsxDEV("div", { children: renderMobileCard({
@@ -5528,7 +5808,7 @@ function DataTable({
       onItemClick: onRowClick
     }) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-      lineNumber: 292,
+      lineNumber: 310,
       columnNumber: 9
     }, this) : /* @__PURE__ */ jsxDEV("div", { className: "rounded border overflow-hidden", children: /* @__PURE__ */ jsxDEV(Table$1, { children: [
       /* @__PURE__ */ jsxDEV(TableHeader$1, { children: /* @__PURE__ */ jsxDEV(TableRow$1, { children: visibleColumns.map((column) => {
@@ -5546,17 +5826,17 @@ function DataTable({
             children: /* @__PURE__ */ jsxDEV("div", { className: "flex items-center gap-1 xs:gap-2", children: typeof column.header === "string" ? /* @__PURE__ */ jsxDEV(Fragment, { children: [
               /* @__PURE__ */ jsxDEV("span", { className: "truncate", children: column.header }, void 0, false, {
                 fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-                lineNumber: 328,
+                lineNumber: 346,
                 columnNumber: 29
               }, this),
               column.sortable !== false && getSortIcon(column.key)
             ] }, void 0, true, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 327,
+              lineNumber: 345,
               columnNumber: 27
             }, this) : column.header }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 325,
+              lineNumber: 343,
               columnNumber: 23
             }, this)
           },
@@ -5564,18 +5844,18 @@ function DataTable({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 308,
+            lineNumber: 326,
             columnNumber: 21
           },
           this
         );
       }) }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-        lineNumber: 302,
+        lineNumber: 320,
         columnNumber: 15
       }, this) }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-        lineNumber: 301,
+        lineNumber: 319,
         columnNumber: 13
       }, this),
       /* @__PURE__ */ jsxDEV(TableBody$1, { children: paginatedData.length === 0 ? /* @__PURE__ */ jsxDEV(TableRow$1, { children: /* @__PURE__ */ jsxDEV(
@@ -5589,13 +5869,13 @@ function DataTable({
         false,
         {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-          lineNumber: 344,
+          lineNumber: 362,
           columnNumber: 19
         },
         this
       ) }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-        lineNumber: 343,
+        lineNumber: 361,
         columnNumber: 17
       }, this) : paginatedData.map((item, index) => /* @__PURE__ */ jsxDEV(
         TableRow$1,
@@ -5607,7 +5887,7 @@ function DataTable({
           onClick: () => onRowClick == null ? void 0 : onRowClick(item),
           children: visibleColumns.map((column) => /* @__PURE__ */ jsxDEV(TableCell$1, { children: renderCell(column, item) }, column.key, false, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 362,
+            lineNumber: 380,
             columnNumber: 23
           }, this))
         },
@@ -5615,22 +5895,22 @@ function DataTable({
         false,
         {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-          lineNumber: 353,
+          lineNumber: 371,
           columnNumber: 19
         },
         this
       )) }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-        lineNumber: 341,
+        lineNumber: 359,
         columnNumber: 13
       }, this)
     ] }, void 0, true, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-      lineNumber: 300,
+      lineNumber: 318,
       columnNumber: 11
     }, this) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-      lineNumber: 299,
+      lineNumber: 317,
       columnNumber: 9
     }, this),
     showPagination && totalPages > 1 && /* @__PURE__ */ jsxDEV("div", { className: "flex items-center justify-between", children: [
@@ -5646,7 +5926,7 @@ function DataTable({
         " entries"
       ] }, void 0, true, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-        lineNumber: 377,
+        lineNumber: 395,
         columnNumber: 11
       }, this),
       /* @__PURE__ */ jsxDEV("div", { className: "flex items-center gap-2", children: [
@@ -5664,7 +5944,7 @@ function DataTable({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 383,
+            lineNumber: 401,
             columnNumber: 13
           },
           this
@@ -5693,14 +5973,14 @@ function DataTable({
             false,
             {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-              lineNumber: 406,
+              lineNumber: 424,
               columnNumber: 19
             },
             this
           );
         }) }, void 0, false, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-          lineNumber: 392,
+          lineNumber: 410,
           columnNumber: 13
         }, this),
         /* @__PURE__ */ jsxDEV(
@@ -5717,24 +5997,24 @@ function DataTable({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-            lineNumber: 418,
+            lineNumber: 436,
             columnNumber: 13
           },
           this
         )
       ] }, void 0, true, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-        lineNumber: 382,
+        lineNumber: 400,
         columnNumber: 11
       }, this)
     ] }, void 0, true, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-      lineNumber: 376,
+      lineNumber: 394,
       columnNumber: 9
     }, this)
   ] }, void 0, true, {
     fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/components/data/DataTable/DataTable.tsx",
-    lineNumber: 248,
+    lineNumber: 266,
     columnNumber: 5
   }, this);
 }
@@ -13942,6 +14222,98 @@ const SectionHeader = ({
     void 0
   );
 };
+const PageTitle = ({
+  children,
+  icon,
+  actions,
+  size = "lg",
+  className,
+  as: Component2 = "h1"
+}) => {
+  const titleSizes = {
+    sm: "text-xl",
+    md: "text-2xl",
+    lg: "text-3xl",
+    xl: "text-4xl"
+  };
+  const iconSizes = {
+    sm: "h-5 w-5",
+    md: "h-6 w-6",
+    lg: "h-7 w-7",
+    xl: "h-8 w-8"
+  };
+  const gapSizes = {
+    sm: "gap-2",
+    md: "gap-2.5",
+    lg: "gap-3",
+    xl: "gap-4"
+  };
+  return /* @__PURE__ */ jsxDEV(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between",
+        gapSizes[size],
+        className
+      ),
+      "data-component-name": "PageTitle",
+      children: [
+        /* @__PURE__ */ jsxDEV("div", { className: cn("flex items-center", gapSizes[size]), children: [
+          icon && /* @__PURE__ */ jsxDEV(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-center text-foreground",
+                iconSizes[size]
+              ),
+              children: icon
+            },
+            void 0,
+            false,
+            {
+              fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/molecules/layout/PageTitle/PageTitle.tsx",
+              lineNumber: 59,
+              columnNumber: 11
+            },
+            void 0
+          ),
+          /* @__PURE__ */ jsxDEV(
+            Component2,
+            {
+              className: cn("font-semibold text-foreground", titleSizes[size]),
+              children
+            },
+            void 0,
+            false,
+            {
+              fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/molecules/layout/PageTitle/PageTitle.tsx",
+              lineNumber: 68,
+              columnNumber: 9
+            },
+            void 0
+          )
+        ] }, void 0, true, {
+          fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/molecules/layout/PageTitle/PageTitle.tsx",
+          lineNumber: 57,
+          columnNumber: 7
+        }, void 0),
+        actions && /* @__PURE__ */ jsxDEV("div", { className: "flex items-center gap-2", children: actions }, void 0, false, {
+          fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/molecules/layout/PageTitle/PageTitle.tsx",
+          lineNumber: 75,
+          columnNumber: 19
+        }, void 0)
+      ]
+    },
+    void 0,
+    true,
+    {
+      fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/molecules/layout/PageTitle/PageTitle.tsx",
+      lineNumber: 49,
+      columnNumber: 5
+    },
+    void 0
+  );
+};
 const SidebarProvider = ({
   children
 }) => {
@@ -14150,6 +14522,56 @@ const BulkSelectionBar = ({
     void 0
   );
 };
+const ListToolbar = ({
+  search,
+  buttons,
+  primaryAction,
+  className,
+  gap = "md"
+}) => {
+  const gapSizes = {
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6"
+  };
+  return /* @__PURE__ */ jsxDEV(
+    "div",
+    {
+      className: cn("flex items-center", gapSizes[gap], className),
+      "data-component-name": "ListToolbar",
+      children: [
+        search && /* @__PURE__ */ jsxDEV("div", { className: "flex-shrink-0", children: search }, void 0, false, {
+          fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/molecules/layout/ListToolbar/ListToolbar.tsx",
+          lineNumber: 58,
+          columnNumber: 18
+        }, void 0),
+        buttons && /* @__PURE__ */ jsxDEV("div", { className: cn("flex items-center", gapSizes[gap === "lg" ? "md" : "sm"]), children: buttons }, void 0, false, {
+          fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/molecules/layout/ListToolbar/ListToolbar.tsx",
+          lineNumber: 62,
+          columnNumber: 9
+        }, void 0),
+        primaryAction && /* @__PURE__ */ jsxDEV("div", { className: "flex-grow" }, void 0, false, {
+          fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/molecules/layout/ListToolbar/ListToolbar.tsx",
+          lineNumber: 68,
+          columnNumber: 25
+        }, void 0),
+        primaryAction && /* @__PURE__ */ jsxDEV("div", { className: "flex-shrink-0", children: primaryAction }, void 0, false, {
+          fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/molecules/layout/ListToolbar/ListToolbar.tsx",
+          lineNumber: 71,
+          columnNumber: 25
+        }, void 0)
+      ]
+    },
+    void 0,
+    true,
+    {
+      fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/molecules/layout/ListToolbar/ListToolbar.tsx",
+      lineNumber: 53,
+      columnNumber: 5
+    },
+    void 0
+  );
+};
 const Pagination = ({
   currentPage,
   totalPages,
@@ -15536,11 +15958,21 @@ class AuthService {
     this.removeItem("user");
   }
   async login(credentials) {
-    const response = await apiClient.post(
-      `${this.config.apiUrl}${this.config.endpoints.login}`,
-      credentials
-    );
-    const { token, refreshToken, user, expiresIn } = response;
+    const response = await apiClient.post(`${this.config.apiUrl}${this.config.endpoints.login}`, credentials);
+    let token;
+    let refreshToken;
+    let expiresIn;
+    if ("access_token" in response) {
+      const backendResponse = response;
+      token = backendResponse.access_token;
+      refreshToken = backendResponse.refresh_token;
+    } else {
+      const oldResponse = response;
+      token = oldResponse.token;
+      refreshToken = oldResponse.refreshToken;
+      expiresIn = oldResponse.expiresIn;
+    }
+    const user = response.user;
     const expiresAt = expiresIn ? Date.now() + expiresIn * 1e3 : void 0;
     this.setTokenData({ token, refreshToken, expiresAt });
     this.setStoredUser(user);
@@ -15564,17 +15996,28 @@ class AuthService {
       this.refreshPromise = null;
     }
   }
-  async performTokenRefresh(refreshToken) {
+  async performTokenRefresh(currentRefreshToken) {
     try {
-      const response = await apiClient.post(
-        `${this.config.apiUrl}${this.config.endpoints.refresh}`,
-        { refreshToken }
-      );
-      const { token, refreshToken: newRefreshToken, expiresIn } = response;
+      const response = await apiClient.post(`${this.config.apiUrl}${this.config.endpoints.refresh}`, {
+        refresh_token: currentRefreshToken
+      });
+      let token;
+      let newRefreshToken;
+      let expiresIn;
+      if ("access_token" in response) {
+        const backendResponse = response;
+        token = backendResponse.access_token;
+        newRefreshToken = currentRefreshToken;
+      } else {
+        const oldResponse = response;
+        token = oldResponse.token;
+        newRefreshToken = oldResponse.refreshToken;
+        expiresIn = oldResponse.expiresIn;
+      }
       const expiresAt = expiresIn ? Date.now() + expiresIn * 1e3 : void 0;
       this.setTokenData({
         token,
-        refreshToken: newRefreshToken || refreshToken,
+        refreshToken: newRefreshToken || currentRefreshToken,
         expiresAt
       });
       if (this.config.autoRefresh && expiresAt) {
@@ -15772,7 +16215,7 @@ function AuthProvider({
   };
   return /* @__PURE__ */ jsxDEV(AuthContext.Provider, { value, children }, void 0, false, {
     fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/features/auth/hooks/useAuth.tsx",
-    lineNumber: 201,
+    lineNumber: 205,
     columnNumber: 10
   }, this);
 }
@@ -16364,7 +16807,7 @@ const DashboardCard = ({
   category,
   padding = "md"
 }) => {
-  const paddingClasses = {
+  const paddingClasses2 = {
     sm: "p-4",
     md: "p-6",
     lg: "p-8"
@@ -16372,7 +16815,7 @@ const DashboardCard = ({
   return /* @__PURE__ */ jsxDEV(
     Card,
     {
-      className: cn(paddingClasses[padding], className),
+      className: cn(paddingClasses2[padding], className),
       category,
       children: [
         (title || description || actions) && /* @__PURE__ */ jsxDEV("div", { className: "mb-4", children: /* @__PURE__ */ jsxDEV("div", { className: "flex items-start justify-between", children: [
@@ -17048,6 +17491,130 @@ const DataDetailTemplate = ({
     columnNumber: 5
   }, void 0);
 };
+const maxWidthClasses = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  full: "max-w-full",
+  none: ""
+};
+const paddingClasses = {
+  none: "p-0",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
+const ListPageTemplate = ({
+  title,
+  toolbar,
+  children,
+  footer,
+  className,
+  contentClassName,
+  maxWidth = "full",
+  padding = "md"
+}) => {
+  return /* @__PURE__ */ jsxDEV("div", { className: cn("flex flex-col min-h-0 flex-1", className), children: [
+    /* @__PURE__ */ jsxDEV("div", { className: "flex-shrink-0 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsxDEV(
+      "div",
+      {
+        className: cn(
+          "mx-auto",
+          maxWidthClasses[maxWidth],
+          paddingClasses[padding]
+        ),
+        children: title
+      },
+      void 0,
+      false,
+      {
+        fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/ListPageTemplate.tsx",
+        lineNumber: 54,
+        columnNumber: 9
+      },
+      void 0
+    ) }, void 0, false, {
+      fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/ListPageTemplate.tsx",
+      lineNumber: 53,
+      columnNumber: 7
+    }, void 0),
+    toolbar && /* @__PURE__ */ jsxDEV("div", { className: "flex-shrink-0 border-b border-border bg-muted/30", children: /* @__PURE__ */ jsxDEV(
+      "div",
+      {
+        className: cn(
+          "mx-auto",
+          maxWidthClasses[maxWidth],
+          paddingClasses[padding]
+        ),
+        children: toolbar
+      },
+      void 0,
+      false,
+      {
+        fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/ListPageTemplate.tsx",
+        lineNumber: 68,
+        columnNumber: 11
+      },
+      void 0
+    ) }, void 0, false, {
+      fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/ListPageTemplate.tsx",
+      lineNumber: 67,
+      columnNumber: 9
+    }, void 0),
+    /* @__PURE__ */ jsxDEV("div", { className: cn("flex-1 min-h-0 overflow-auto", contentClassName), children: /* @__PURE__ */ jsxDEV(
+      "div",
+      {
+        className: cn(
+          "mx-auto h-full",
+          maxWidthClasses[maxWidth],
+          paddingClasses[padding]
+        ),
+        children
+      },
+      void 0,
+      false,
+      {
+        fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/ListPageTemplate.tsx",
+        lineNumber: 82,
+        columnNumber: 9
+      },
+      void 0
+    ) }, void 0, false, {
+      fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/ListPageTemplate.tsx",
+      lineNumber: 81,
+      columnNumber: 7
+    }, void 0),
+    footer && /* @__PURE__ */ jsxDEV("div", { className: "flex-shrink-0 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsxDEV(
+      "div",
+      {
+        className: cn(
+          "mx-auto",
+          maxWidthClasses[maxWidth],
+          paddingClasses[padding]
+        ),
+        children: footer
+      },
+      void 0,
+      false,
+      {
+        fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/ListPageTemplate.tsx",
+        lineNumber: 96,
+        columnNumber: 11
+      },
+      void 0
+    ) }, void 0, false, {
+      fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/ListPageTemplate.tsx",
+      lineNumber: 95,
+      columnNumber: 9
+    }, void 0)
+  ] }, void 0, true, {
+    fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/ListPageTemplate.tsx",
+    lineNumber: 51,
+    columnNumber: 5
+  }, void 0);
+};
 function debounce(func, wait) {
   let timeout = null;
   return function debounced(...args) {
@@ -19369,16 +19936,16 @@ const AdminCRUDTemplate = ({
     },
     // Data columns
     ...schema.fields.filter((field) => field.showInTable !== false).map((field) => {
-      let columnType = "default";
+      let columnType = void 0;
       if (field.type === "boolean" || field.name.toLowerCase().includes("status")) {
         columnType = "status";
       } else if (field.name.toLowerCase().includes("category")) {
-        columnType = "category";
+        columnType = "badge";
       }
       return {
         key: field.name,
         header: field.label,
-        type: columnType,
+        ...columnType && { type: columnType },
         cell: field.render ? (item) => field.render(item[field.name], item) : void 0,
         sortable: true,
         width: field.width ? `${field.width}px` : void 0
@@ -19401,7 +19968,7 @@ const AdminCRUDTemplate = ({
             tooltip: "View details",
             children: /* @__PURE__ */ jsxDEV(Eye, { className: "w-4 h-4" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-              lineNumber: 241,
+              lineNumber: 242,
               columnNumber: 13
             }, void 0)
           },
@@ -19409,7 +19976,7 @@ const AdminCRUDTemplate = ({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 232,
+            lineNumber: 233,
             columnNumber: 11
           },
           void 0
@@ -19426,7 +19993,7 @@ const AdminCRUDTemplate = ({
             tooltip: "Edit",
             children: /* @__PURE__ */ jsxDEV(Edit, { className: "w-4 h-4" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-              lineNumber: 253,
+              lineNumber: 254,
               columnNumber: 15
             }, void 0)
           },
@@ -19434,7 +20001,7 @@ const AdminCRUDTemplate = ({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 244,
+            lineNumber: 245,
             columnNumber: 13
           },
           void 0
@@ -19451,7 +20018,7 @@ const AdminCRUDTemplate = ({
             tooltip: "Delete",
             children: /* @__PURE__ */ jsxDEV(Trash2, { className: "w-4 h-4" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-              lineNumber: 266,
+              lineNumber: 267,
               columnNumber: 15
             }, void 0)
           },
@@ -19459,14 +20026,14 @@ const AdminCRUDTemplate = ({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 257,
+            lineNumber: 258,
             columnNumber: 13
           },
           void 0
         )
       ] }, void 0, true, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-        lineNumber: 231,
+        lineNumber: 232,
         columnNumber: 9
       }, void 0),
       sortable: false,
@@ -19541,12 +20108,12 @@ const AdminCRUDTemplate = ({
                 field.label
               ] }, void 0, true, {
                 fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-                lineNumber: 349,
+                lineNumber: 350,
                 columnNumber: 13
               }, void 0),
               (_a2 = field.options) == null ? void 0 : _a2.map((option) => /* @__PURE__ */ jsxDEV("option", { value: option.value, children: option.label }, option.value, false, {
                 fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-                lineNumber: 351,
+                lineNumber: 352,
                 columnNumber: 15
               }, void 0))
             ]
@@ -19555,7 +20122,7 @@ const AdminCRUDTemplate = ({
           true,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 342,
+            lineNumber: 343,
             columnNumber: 11
           },
           void 0
@@ -19571,7 +20138,7 @@ const AdminCRUDTemplate = ({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 357,
+            lineNumber: 358,
             columnNumber: 11
           },
           void 0
@@ -19590,7 +20157,7 @@ const AdminCRUDTemplate = ({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 366,
+            lineNumber: 367,
             columnNumber: 11
           },
           void 0
@@ -19606,7 +20173,7 @@ const AdminCRUDTemplate = ({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 378,
+            lineNumber: 379,
             columnNumber: 11
           },
           void 0
@@ -19616,7 +20183,7 @@ const AdminCRUDTemplate = ({
       false,
       {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-        lineNumber: 335,
+        lineNumber: 336,
         columnNumber: 7
       },
       void 0
@@ -19633,7 +20200,7 @@ const AdminCRUDTemplate = ({
             size: "lg",
             icon: /* @__PURE__ */ jsxDEV(Plus, { className: "w-5 h-5" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-              lineNumber: 410,
+              lineNumber: 411,
               columnNumber: 23
             }, void 0)
           },
@@ -19641,7 +20208,7 @@ const AdminCRUDTemplate = ({
           false,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 406,
+            lineNumber: 407,
             columnNumber: 15
           },
           void 0
@@ -19649,7 +20216,7 @@ const AdminCRUDTemplate = ({
         /* @__PURE__ */ jsxDEV("div", { children: [
           /* @__PURE__ */ jsxDEV("h1", { className: "text-4xl font-bold text-foreground", children: schema.displayNamePlural }, void 0, false, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 413,
+            lineNumber: 414,
             columnNumber: 17
           }, void 0),
           /* @__PURE__ */ jsxDEV("p", { className: "text-lg text-muted-foreground mt-2", children: [
@@ -19658,17 +20225,17 @@ const AdminCRUDTemplate = ({
             " with comprehensive CRUD operations"
           ] }, void 0, true, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 416,
+            lineNumber: 417,
             columnNumber: 17
           }, void 0)
         ] }, void 0, true, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-          lineNumber: 412,
+          lineNumber: 413,
           columnNumber: 15
         }, void 0)
       ] }, void 0, true, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-        lineNumber: 405,
+        lineNumber: 406,
         columnNumber: 13
       }, void 0),
       /* @__PURE__ */ jsxDEV("div", { className: "flex items-center gap-2", children: [
@@ -19688,7 +20255,7 @@ const AdminCRUDTemplate = ({
                 false,
                 {
                   fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-                  lineNumber: 430,
+                  lineNumber: 431,
                   columnNumber: 19
                 },
                 void 0
@@ -19700,7 +20267,7 @@ const AdminCRUDTemplate = ({
           true,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 425,
+            lineNumber: 426,
             columnNumber: 17
           },
           void 0
@@ -19708,32 +20275,32 @@ const AdminCRUDTemplate = ({
         permissions.create && /* @__PURE__ */ jsxDEV(Button, { onClick: handleCreate, variant: "default", children: [
           /* @__PURE__ */ jsxDEV(Plus, { className: "w-4 h-4 mr-2" }, void 0, false, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 439,
+            lineNumber: 440,
             columnNumber: 19
           }, void 0),
           "Create ",
           schema.displayName
         ] }, void 0, true, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-          lineNumber: 438,
+          lineNumber: 439,
           columnNumber: 17
         }, void 0)
       ] }, void 0, true, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-        lineNumber: 423,
+        lineNumber: 424,
         columnNumber: 13
       }, void 0)
     ] }, void 0, true, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-      lineNumber: 404,
+      lineNumber: 405,
       columnNumber: 11
     }, void 0) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-      lineNumber: 403,
+      lineNumber: 404,
       columnNumber: 9
     }, void 0) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-      lineNumber: 402,
+      lineNumber: 403,
       columnNumber: 7
     }, void 0),
     /* @__PURE__ */ jsxDEV("div", { className: "flex-shrink-0 border-b border-border bg-muted/30", children: /* @__PURE__ */ jsxDEV("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-4", children: /* @__PURE__ */ jsxDEV("div", { className: "flex items-center justify-between", children: [
@@ -19747,13 +20314,13 @@ const AdminCRUDTemplate = ({
             children: [
               /* @__PURE__ */ jsxDEV(Filter, { className: "w-4 h-4 mr-2" }, void 0, false, {
                 fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-                lineNumber: 460,
+                lineNumber: 461,
                 columnNumber: 19
               }, void 0),
               "Filters",
               activeFilterCount > 0 && /* @__PURE__ */ jsxDEV("span", { className: "absolute -top-2 -right-2 min-w-5 h-5 rounded-full text-xs bg-destructive text-destructive-foreground flex items-center justify-center", children: activeFilterCount }, void 0, false, {
                 fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-                lineNumber: 463,
+                lineNumber: 464,
                 columnNumber: 21
               }, void 0)
             ]
@@ -19762,7 +20329,7 @@ const AdminCRUDTemplate = ({
           true,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 455,
+            lineNumber: 456,
             columnNumber: 17
           },
           void 0
@@ -19784,7 +20351,7 @@ const AdminCRUDTemplate = ({
             true,
             {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-              lineNumber: 475,
+              lineNumber: 476,
               columnNumber: 23
             },
             void 0
@@ -19801,19 +20368,19 @@ const AdminCRUDTemplate = ({
             false,
             {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-              lineNumber: 484,
+              lineNumber: 485,
               columnNumber: 21
             },
             void 0
           )
         ] }, void 0, true, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-          lineNumber: 473,
+          lineNumber: 474,
           columnNumber: 19
         }, void 0)
       ] }, void 0, true, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-        lineNumber: 453,
+        lineNumber: 454,
         columnNumber: 13
       }, void 0),
       /* @__PURE__ */ jsxDEV("div", { className: "flex items-center gap-2", children: [
@@ -19823,7 +20390,7 @@ const AdminCRUDTemplate = ({
             " selected"
           ] }, void 0, true, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 500,
+            lineNumber: 501,
             columnNumber: 19
           }, void 0),
           permissions.delete && /* @__PURE__ */ jsxDEV(
@@ -19835,7 +20402,7 @@ const AdminCRUDTemplate = ({
               children: [
                 /* @__PURE__ */ jsxDEV(Trash2, { className: "w-4 h-4 mr-2" }, void 0, false, {
                   fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-                  lineNumber: 509,
+                  lineNumber: 510,
                   columnNumber: 23
                 }, void 0),
                 "Delete"
@@ -19845,14 +20412,14 @@ const AdminCRUDTemplate = ({
             true,
             {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-              lineNumber: 504,
+              lineNumber: 505,
               columnNumber: 21
             },
             void 0
           )
         ] }, void 0, true, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-          lineNumber: 499,
+          lineNumber: 500,
           columnNumber: 17
         }, void 0),
         permissions.export && /* @__PURE__ */ jsxDEV(
@@ -19866,7 +20433,7 @@ const AdminCRUDTemplate = ({
             children: [
               /* @__PURE__ */ jsxDEV(Download, { className: "w-4 h-4 mr-2" }, void 0, false, {
                 fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-                lineNumber: 522,
+                lineNumber: 523,
                 columnNumber: 19
               }, void 0),
               "Export"
@@ -19876,7 +20443,7 @@ const AdminCRUDTemplate = ({
           true,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 518,
+            lineNumber: 519,
             columnNumber: 17
           },
           void 0
@@ -19901,7 +20468,7 @@ const AdminCRUDTemplate = ({
             children: [
               /* @__PURE__ */ jsxDEV(Upload, { className: "w-4 h-4 mr-2" }, void 0, false, {
                 fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-                lineNumber: 543,
+                lineNumber: 544,
                 columnNumber: 19
               }, void 0),
               "Import"
@@ -19911,7 +20478,7 @@ const AdminCRUDTemplate = ({
           true,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 528,
+            lineNumber: 529,
             columnNumber: 17
           },
           void 0
@@ -19930,27 +20497,27 @@ const AdminCRUDTemplate = ({
           true,
           {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 550,
+            lineNumber: 551,
             columnNumber: 17
           },
           void 0
         ))
       ] }, void 0, true, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-        lineNumber: 496,
+        lineNumber: 497,
         columnNumber: 13
       }, void 0)
     ] }, void 0, true, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-      lineNumber: 451,
+      lineNumber: 452,
       columnNumber: 11
     }, void 0) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-      lineNumber: 450,
+      lineNumber: 451,
       columnNumber: 9
     }, void 0) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-      lineNumber: 449,
+      lineNumber: 450,
       columnNumber: 7
     }, void 0),
     /* @__PURE__ */ jsxDEV("div", { className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsxDEV("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8", children: hasData ? /* @__PURE__ */ jsxDEV(Card, { className: "p-6", category, children: /* @__PURE__ */ jsxDEV(
@@ -19970,13 +20537,13 @@ const AdminCRUDTemplate = ({
       false,
       {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-        lineNumber: 569,
+        lineNumber: 570,
         columnNumber: 15
       },
       void 0
     ) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-      lineNumber: 568,
+      lineNumber: 569,
       columnNumber: 13
     }, void 0) : /* @__PURE__ */ jsxDEV("div", { className: "flex items-center justify-center min-h-96", children: emptyState || /* @__PURE__ */ jsxDEV(
       EmptyState,
@@ -19992,21 +20559,21 @@ const AdminCRUDTemplate = ({
       false,
       {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-        lineNumber: 584,
+        lineNumber: 585,
         columnNumber: 17
       },
       void 0
     ) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-      lineNumber: 582,
+      lineNumber: 583,
       columnNumber: 13
     }, void 0) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-      lineNumber: 566,
+      lineNumber: 567,
       columnNumber: 9
     }, void 0) }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-      lineNumber: 565,
+      lineNumber: 566,
       columnNumber: 7
     }, void 0),
     /* @__PURE__ */ jsxDEV(
@@ -20021,22 +20588,22 @@ const AdminCRUDTemplate = ({
           /* @__PURE__ */ jsxDEV("div", { className: "flex justify-end gap-2 pt-4", children: [
             /* @__PURE__ */ jsxDEV(Button, { variant: "outline", onClick: () => setShowCreateModal(false), children: "Cancel" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-              lineNumber: 613,
+              lineNumber: 614,
               columnNumber: 13
             }, void 0),
             /* @__PURE__ */ jsxDEV(Button, { onClick: () => handleSubmit(false), variant: "default", children: "Create" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-              lineNumber: 616,
+              lineNumber: 617,
               columnNumber: 13
             }, void 0)
           ] }, void 0, true, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 612,
+            lineNumber: 613,
             columnNumber: 11
           }, void 0)
         ] }, void 0, true, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-          lineNumber: 609,
+          lineNumber: 610,
           columnNumber: 9
         }, void 0)
       },
@@ -20044,7 +20611,7 @@ const AdminCRUDTemplate = ({
       false,
       {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-        lineNumber: 603,
+        lineNumber: 604,
         columnNumber: 7
       },
       void 0
@@ -20061,22 +20628,22 @@ const AdminCRUDTemplate = ({
           /* @__PURE__ */ jsxDEV("div", { className: "flex justify-end gap-2 pt-4", children: [
             /* @__PURE__ */ jsxDEV(Button, { variant: "outline", onClick: () => setShowEditModal(false), children: "Cancel" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-              lineNumber: 634,
+              lineNumber: 635,
               columnNumber: 13
             }, void 0),
             /* @__PURE__ */ jsxDEV(Button, { onClick: () => handleSubmit(true), variant: "default", children: "Update" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-              lineNumber: 637,
+              lineNumber: 638,
               columnNumber: 13
             }, void 0)
           ] }, void 0, true, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 633,
+            lineNumber: 634,
             columnNumber: 11
           }, void 0)
         ] }, void 0, true, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-          lineNumber: 630,
+          lineNumber: 631,
           columnNumber: 9
         }, void 0)
       },
@@ -20084,7 +20651,7 @@ const AdminCRUDTemplate = ({
       false,
       {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-        lineNumber: 624,
+        lineNumber: 625,
         columnNumber: 7
       },
       void 0
@@ -20104,7 +20671,7 @@ const AdminCRUDTemplate = ({
             "? This action cannot be undone."
           ] }, void 0, true, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 652,
+            lineNumber: 653,
             columnNumber: 11
           }, void 0),
           /* @__PURE__ */ jsxDEV("div", { className: "flex justify-end gap-2", children: [
@@ -20119,24 +20686,24 @@ const AdminCRUDTemplate = ({
               false,
               {
                 fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-                lineNumber: 658,
+                lineNumber: 659,
                 columnNumber: 13
               },
               void 0
             ),
             /* @__PURE__ */ jsxDEV(Button, { variant: "destructive", onClick: confirmDelete, children: "Delete" }, void 0, false, {
               fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-              lineNumber: 664,
+              lineNumber: 665,
               columnNumber: 13
             }, void 0)
           ] }, void 0, true, {
             fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-            lineNumber: 657,
+            lineNumber: 658,
             columnNumber: 11
           }, void 0)
         ] }, void 0, true, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-          lineNumber: 651,
+          lineNumber: 652,
           columnNumber: 9
         }, void 0)
       },
@@ -20144,14 +20711,14 @@ const AdminCRUDTemplate = ({
       false,
       {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-        lineNumber: 645,
+        lineNumber: 646,
         columnNumber: 7
       },
       void 0
     )
   ] }, void 0, true, {
     fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/admin/AdminCRUDTemplate.tsx",
-    lineNumber: 400,
+    lineNumber: 401,
     columnNumber: 5
   }, void 0);
 };
@@ -21267,6 +21834,26 @@ const ReactQueryDevtools = React__default.lazy(
     default: mod.ReactQueryDevtools
   }))
 );
+class DevtoolsErrorBoundary extends React__default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error) {
+    {
+      console.debug("[DevTools] Failed to initialize:", error.message);
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+}
 function createReactApp(config) {
   const appConfig = typeof config === "string" ? { title: config } : config;
   const {
@@ -21297,18 +21884,18 @@ function createReactApp(config) {
       title
     ] }, void 0, true, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-      lineNumber: 81,
+      lineNumber: 110,
       columnNumber: 9
     }, this),
     /* @__PURE__ */ jsxDEV("p", { className: "text-lg text-muted-foreground mb-6", children: description }, void 0, false, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-      lineNumber: 82,
+      lineNumber: 111,
       columnNumber: 9
     }, this),
     /* @__PURE__ */ jsxDEV("div", { className: "space-y-2 text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsxDEV("p", { children: "✅ Template integration successful" }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 84,
+        lineNumber: 113,
         columnNumber: 11
       }, this),
       /* @__PURE__ */ jsxDEV("p", { children: [
@@ -21316,26 +21903,26 @@ function createReactApp(config) {
         version
       ] }, void 0, true, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 85,
+        lineNumber: 114,
         columnNumber: 11
       }, this),
       /* @__PURE__ */ jsxDEV("p", { children: "🚀 Ready for development" }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 86,
+        lineNumber: 115,
         columnNumber: 11
       }, this)
     ] }, void 0, true, {
       fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-      lineNumber: 83,
+      lineNumber: 112,
       columnNumber: 9
     }, this)
   ] }, void 0, true, {
     fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-    lineNumber: 80,
+    lineNumber: 109,
     columnNumber: 7
   }, this) }, void 0, false, {
     fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-    lineNumber: 79,
+    lineNumber: 108,
     columnNumber: 5
   }, this);
   const createProviderTree = (children) => {
@@ -21343,50 +21930,54 @@ function createReactApp(config) {
     customProviders.reverse().forEach((Provider) => {
       tree = /* @__PURE__ */ jsxDEV(Provider, { children: tree }, Provider.name, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 98,
+        lineNumber: 127,
         columnNumber: 14
       }, this);
     });
     if (enableRouting) {
       tree = /* @__PURE__ */ jsxDEV(NavigationProvider, { initialNavigation: navigation, children: /* @__PURE__ */ jsxDEV(SidebarProvider, { children: tree }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 105,
+        lineNumber: 134,
         columnNumber: 11
       }, this) }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 104,
+        lineNumber: 133,
         columnNumber: 9
       }, this);
     }
     if (enableAuth) {
       tree = /* @__PURE__ */ jsxDEV(AuthProvider, { config: auth, children: tree }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 112,
+        lineNumber: 141,
         columnNumber: 14
       }, this);
     }
     if (enableQuery) {
       tree = /* @__PURE__ */ jsxDEV(QueryClientProvider, { client: queryClient, children: [
         tree,
-        /* @__PURE__ */ jsxDEV(Suspense, { fallback: null, children: /* @__PURE__ */ jsxDEV(ReactQueryDevtools, { initialIsOpen: false }, void 0, false, {
+        /* @__PURE__ */ jsxDEV(DevtoolsErrorBoundary, { children: /* @__PURE__ */ jsxDEV(Suspense, { fallback: null, children: /* @__PURE__ */ jsxDEV(ReactQueryDevtools, { initialIsOpen: false }, void 0, false, {
+          fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
+          lineNumber: 152,
+          columnNumber: 17
+        }, this) }, void 0, false, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-          lineNumber: 122,
+          lineNumber: 151,
           columnNumber: 15
         }, this) }, void 0, false, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-          lineNumber: 121,
+          lineNumber: 150,
           columnNumber: 13
         }, this)
       ] }, void 0, true, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 118,
+        lineNumber: 147,
         columnNumber: 9
       }, this);
     }
     if (enableRouting) {
       tree = /* @__PURE__ */ jsxDEV(BrowserRouter, { children: tree }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 131,
+        lineNumber: 162,
         columnNumber: 14
       }, this);
     }
@@ -21397,37 +21988,52 @@ function createReactApp(config) {
       routes.push({ path, component });
     },
     render() {
+      const shouldProtect = enableAuth && (auth == null ? void 0 : auth.requireAuth) !== false;
+      const publicPaths = (auth == null ? void 0 : auth.publicPaths) ?? ["/login", "/register", "/forgot-password"];
+      const isPublicPath = (path) => {
+        return publicPaths.some((p) => path === p || path.startsWith(p + "/"));
+      };
+      const wrapWithProtection = (path, component) => {
+        if (shouldProtect && !isPublicPath(path)) {
+          return /* @__PURE__ */ jsxDEV(ProtectedRoute, { children: component }, void 0, false, {
+            fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
+            lineNumber: 187,
+            columnNumber: 18
+          }, this);
+        }
+        return component;
+      };
       const AppContent = () => /* @__PURE__ */ jsxDEV(Routes, { children: /* @__PURE__ */ jsxDEV(Route, { path: "/", element: /* @__PURE__ */ jsxDEV(AppLayout, {}, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 146,
+        lineNumber: 194,
         columnNumber: 36
       }, this), children: [
-        /* @__PURE__ */ jsxDEV(Route, { index: true, element: /* @__PURE__ */ jsxDEV(DefaultHome, {}, void 0, false, {
+        /* @__PURE__ */ jsxDEV(Route, { index: true, element: wrapWithProtection("/", /* @__PURE__ */ jsxDEV(DefaultHome, {}, void 0, false, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-          lineNumber: 147,
-          columnNumber: 35
-        }, this) }, void 0, false, {
+          lineNumber: 195,
+          columnNumber: 59
+        }, this)) }, void 0, false, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-          lineNumber: 147,
+          lineNumber: 195,
           columnNumber: 13
         }, this),
-        routes.map(({ path, component }, index) => /* @__PURE__ */ jsxDEV(Route, { path, element: component }, index, false, {
+        routes.map(({ path, component }, index) => /* @__PURE__ */ jsxDEV(Route, { path, element: wrapWithProtection(path, component) }, index, false, {
           fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-          lineNumber: 149,
+          lineNumber: 197,
           columnNumber: 15
         }, this))
       ] }, void 0, true, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 146,
+        lineNumber: 194,
         columnNumber: 11
       }, this) }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 145,
+        lineNumber: 193,
         columnNumber: 9
       }, this);
       return createProviderTree(/* @__PURE__ */ jsxDEV(AppContent, {}, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 155,
+        lineNumber: 203,
         columnNumber: 33
       }, this));
     },
@@ -21439,7 +22045,7 @@ function createReactApp(config) {
       const root = createRoot(element);
       root.render(/* @__PURE__ */ jsxDEV(React__default.StrictMode, { children: this.render() }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/templates/factory.tsx",
-        lineNumber: 165,
+        lineNumber: 213,
         columnNumber: 19
       }, this));
     }
@@ -21539,7 +22145,7 @@ const ResponsiveShowcaseContent = () => {
     {
       key: "category",
       header: "Category",
-      type: "category",
+      type: "badge",
       icon: /* @__PURE__ */ jsxDEV(Briefcase, { className: "w-3 h-3" }, void 0, false, {
         fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/organisms/showcase/ComponentShowcasePage.tsx",
         lineNumber: 168,
@@ -22113,7 +22719,7 @@ const ComponentShowcasePage = () => {
   const tableColumns = [
     { key: "name", header: "Model Name" },
     { key: "status", header: "Status", type: "status" },
-    { key: "category", header: "Category", type: "category" },
+    { key: "category", header: "Category", type: "badge" },
     { key: "runs", header: "Runs" }
   ];
   return /* @__PURE__ */ jsxDEV("div", { className: "min-h-screen bg-background", children: [
@@ -23546,7 +24152,7 @@ const ComponentShowcasePage = () => {
   columns={[
     { key: 'name', header: 'Model Name' },
     { key: 'status', header: 'Status', type: 'status' },
-    { key: 'category', header: 'Category', type: 'category' }
+    { key: 'category', header: 'Category', type: 'badge' }
   ]}
   searchPlaceholder="Search models..."
   onRowClick={(item) => alert(item.name)}
@@ -28511,6 +29117,165 @@ const ComponentShowcasePage = () => {
     columnNumber: 5
   }, void 0);
 };
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxDEV(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  },
+  void 0,
+  false,
+  {
+    fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/primitives/sheet.tsx",
+    lineNumber: 15,
+    columnNumber: 3
+  },
+  void 0
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const sheetVariants = {
+  top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+  bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+  left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+  right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+};
+const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxDEV(SheetPortal, { children: [
+  /* @__PURE__ */ jsxDEV(SheetOverlay, {}, void 0, false, {
+    fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/primitives/sheet.tsx",
+    lineNumber: 43,
+    columnNumber: 5
+  }, void 0),
+  /* @__PURE__ */ jsxDEV(
+    SheetPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+        sheetVariants[side],
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxDEV(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsxDEV(X, { className: "h-4 w-4" }, void 0, false, {
+            fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/primitives/sheet.tsx",
+            lineNumber: 55,
+            columnNumber: 9
+          }, void 0),
+          /* @__PURE__ */ jsxDEV("span", { className: "sr-only", children: "Close" }, void 0, false, {
+            fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/primitives/sheet.tsx",
+            lineNumber: 56,
+            columnNumber: 9
+          }, void 0)
+        ] }, void 0, true, {
+          fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/primitives/sheet.tsx",
+          lineNumber: 54,
+          columnNumber: 7
+        }, void 0)
+      ]
+    },
+    void 0,
+    true,
+    {
+      fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/primitives/sheet.tsx",
+      lineNumber: 44,
+      columnNumber: 5
+    },
+    void 0
+  )
+] }, void 0, true, {
+  fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/primitives/sheet.tsx",
+  lineNumber: 42,
+  columnNumber: 3
+}, void 0));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+const SheetHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxDEV(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  },
+  void 0,
+  false,
+  {
+    fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/primitives/sheet.tsx",
+    lineNumber: 67,
+    columnNumber: 3
+  },
+  void 0
+);
+SheetHeader.displayName = "SheetHeader";
+const SheetFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxDEV(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  },
+  void 0,
+  false,
+  {
+    fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/primitives/sheet.tsx",
+    lineNumber: 81,
+    columnNumber: 3
+  },
+  void 0
+);
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxDEV(
+  SheetPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  },
+  void 0,
+  false,
+  {
+    fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/primitives/sheet.tsx",
+    lineNumber: 95,
+    columnNumber: 3
+  },
+  void 0
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxDEV(
+  SheetPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  },
+  void 0,
+  false,
+  {
+    fileName: "/Users/dug/Projects/pattern-stack/frontend-patterns/src/atoms/primitives/sheet.tsx",
+    lineNumber: 107,
+    columnNumber: 3
+  },
+  void 0
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 function isBulkOperation(path, _method, requestBody) {
   const bulkPatterns = [
     /\/bulk[-_]?delete$/i,
@@ -28666,6 +29431,8 @@ export {
   Input,
   Label,
   ListCard,
+  ListPageTemplate,
+  ListToolbar,
   Loading,
   LoginForm,
   LogoutButton,
@@ -28675,6 +29442,7 @@ export {
   NavMenu,
   NavigationProvider,
   PageTemplate,
+  PageTitle,
   Pagination,
   PaletteSwitcher,
   ProgressBar,
@@ -28689,6 +29457,16 @@ export {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
   ShowcaseSection,
   Sidebar,
   SidebarButton,
@@ -28748,6 +29526,7 @@ export {
   isBulkOperation,
   isValidIcon,
   legacyPatterns,
+  normalizeFieldType,
   renderField,
   responsiveScales,
   setGlobalAuthService,
@@ -28761,6 +29540,7 @@ export {
   useCreateExample,
   useDeleteExample,
   useErrorBoundary,
+  useFieldMetadata,
   useGetExample,
   useHealth,
   useIsDesktop,
@@ -28770,8 +29550,10 @@ export {
   useMediaQuery,
   useMockAuth,
   useNavigation,
+  useOverflowDetection,
   usePermissions,
   useResponsiveClasses,
+  useResponsiveTable,
   useResponsiveValue,
   useSidebar,
   useTextOverflow,