@nextsparkjs/core 0.1.0-beta.68 → 0.1.0-beta.69

package/dist/components/ui/skeleton-settings.js

@@ -0,0 +1,332 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader } from "./card.js";
+import { Skeleton, SkeletonContainer } from "./skeleton.js";
+function SkeletonSettingsNavCard() {
+  return /* @__PURE__ */ jsx("div", { className: "block p-6 rounded-lg border border-border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5 flex-shrink-0" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" })
+    ] })
+  ] }) });
+}
+function SkeletonSettingsOverview() {
+  return /* @__PURE__ */ jsx("div", { "data-cy": "skeleton-settings-overview", className: "max-w-2xl", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48 mb-2" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-72" })
+    ] }),
+    /* @__PURE__ */ jsxs(SkeletonContainer, { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(SkeletonSettingsNavCard, {}),
+      /* @__PURE__ */ jsx(SkeletonSettingsNavCard, {}),
+      /* @__PURE__ */ jsx(SkeletonSettingsNavCard, {}),
+      /* @__PURE__ */ jsx(SkeletonSettingsNavCard, {}),
+      /* @__PURE__ */ jsx(SkeletonSettingsNavCard, {}),
+      /* @__PURE__ */ jsx(SkeletonSettingsNavCard, {})
+    ] })
+  ] }) });
+}
+function SkeletonProfileForm() {
+  return /* @__PURE__ */ jsxs("div", { "data-cy": "skeleton-profile-form", className: "max-w-4xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-32 mb-2" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-64" })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-40" })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-56" })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-4 grid-cols-1 md:grid-cols-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2 md:col-span-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-48" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-2", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-2", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-4 grid-cols-1 md:grid-cols-10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2 md:col-span-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2 md:col-span-3", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-12" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2 md:col-span-5", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row md:justify-between md:items-center gap-4 pt-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" })
+          ] }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-32" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function SkeletonBillingPage() {
+  return /* @__PURE__ */ jsxs("div", { "data-cy": "skeleton-billing-page", className: "max-w-4xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48 mb-2" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-64" })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-24" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-32" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(SkeletonContainer, { className: "grid gap-4 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-20" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-16" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-12" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: 4 }).map((_2, j) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" })
+        ] }, j)) }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+      ] })
+    ] }, i)) })
+  ] });
+}
+function SkeletonPasswordPage() {
+  return /* @__PURE__ */ jsxs("div", { "data-cy": "skeleton-password-page", className: "max-w-xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-40 mb-2" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-56" })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-36" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-36" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+      ] })
+    ] })
+  ] });
+}
+function SkeletonSecurityPage() {
+  return /* @__PURE__ */ jsxs("div", { "data-cy": "skeleton-security-page", className: "max-w-4xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-32 mb-2" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-64" })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-36" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-56" })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(SkeletonContainer, { className: "space-y-4", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border rounded-lg", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 rounded-lg" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" })
+      ] }, i)) }) })
+    ] })
+  ] });
+}
+function SkeletonApiKeysPage() {
+  return /* @__PURE__ */ jsxs("div", { "data-cy": "skeleton-api-keys-page", className: "max-w-4xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-32 mb-2" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-64" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-32" })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsx(SkeletonContainer, { className: "divide-y", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-16" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8" })
+      ] })
+    ] }, i)) }) }) })
+  ] });
+}
+function SkeletonNotificationsPage() {
+  return /* @__PURE__ */ jsxs("div", { "data-cy": "skeleton-notifications-page", className: "max-w-2xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-36 mb-2" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-64" })
+    ] }),
+    /* @__PURE__ */ jsx(SkeletonContainer, { className: "space-y-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-40" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-56" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-12 rounded-full" })
+    ] }) }) }, i)) })
+  ] });
+}
+function SkeletonTeamsPage() {
+  return /* @__PURE__ */ jsxs("div", { "data-cy": "skeleton-teams-page", className: "max-w-4xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-32 mb-2" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-64" })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-32" })
+          ] }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-32" })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(SkeletonContainer, { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 rounded-lg border", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 rounded-full" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-16 rounded-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4" })
+        ] })
+      ] }, i)) }) })
+    ] })
+  ] });
+}
+function SkeletonInvoicesPage() {
+  return /* @__PURE__ */ jsxs("div", { "data-cy": "skeleton-invoices-page", className: "max-w-4xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-40 mb-2" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-64" })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-36" })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-56" })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 border-b bg-muted/50", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" })
+        ] }),
+        /* @__PURE__ */ jsx(SkeletonContainer, { className: "divide-y", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-16 rounded-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" })
+        ] }, i)) })
+      ] })
+    ] })
+  ] });
+}
+function SkeletonPlansPage() {
+  return /* @__PURE__ */ jsxs("div", { "data-cy": "skeleton-plans-page", className: "max-w-6xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("header", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-64 mx-auto mb-2" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-96 mx-auto" })
+    ] }),
+    /* @__PURE__ */ jsx(SkeletonContainer, { className: "grid gap-6 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs(Card, { className: i === 1 ? "border-primary" : "", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-20" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1 mt-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-16" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-12" })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full mt-2" })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Array.from({ length: 5 }).map((_2, j) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" })
+        ] }, j)) }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+      ] })
+    ] }, i)) })
+  ] });
+}
+export {
+  SkeletonApiKeysPage,
+  SkeletonBillingPage,
+  SkeletonInvoicesPage,
+  SkeletonNotificationsPage,
+  SkeletonPasswordPage,
+  SkeletonPlansPage,
+  SkeletonProfileForm,
+  SkeletonSecurityPage,
+  SkeletonSettingsNavCard,
+  SkeletonSettingsOverview,
+  SkeletonTeamsPage
+};

package/dist/components/ui/skeleton.d.ts

@@ -1,3 +1,25 @@
+/**
+ * Optimized Skeleton component for improved INP (Interaction to Next Paint)
+ *
+ * Performance optimizations:
+ * - CSS containment isolates layout/paint calculations
+ * - content-visibility:auto skips rendering for off-screen elements
+ * - GPU-accelerated opacity animation with will-change hint
+ * - will-change hint pre-optimizes composition layer
+ * - Respects prefers-reduced-motion for accessibility
+ */
 declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export { Skeleton };
+/**
+ * SkeletonContainer - Wraps multiple skeletons with content-visibility optimization
+ * Use this for lists or grids of skeleton items to improve rendering performance
+ */
+declare function SkeletonContainer({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * SkeletonText - Optimized skeleton for text content
+ * Pre-sized for common text patterns to reduce layout shift
+ */
+declare function SkeletonText({ className, lines, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    lines?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export { Skeleton, SkeletonContainer, SkeletonText };
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/components/ui/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":"AAEA,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAOtC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAetC;AAED;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAYtC;AAED;;;GAGG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,KAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CAe3D;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/ui/skeleton.js

@@ -7,11 +7,55 @@ function Skeleton({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("animate-pulse rounded-md bg-muted", className),
+      className: cn(
+        // Base styles
+        "rounded-md bg-muted",
+        // Optimized animation - GPU accelerated
+        "animate-skeleton-pulse",
+        // CSS containment for better INP
+        "skeleton-contained",
+        className
+      ),
       ...props
     }
   );
 }
+function SkeletonContainer({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "skeleton-container",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function SkeletonText({
+  className,
+  lines = 1,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      className: cn(
+        "h-4",
+        // Last line is typically shorter
+        i === lines - 1 && lines > 1 ? "w-3/4" : "w-full"
+      )
+    },
+    i
+  )) });
+}
 export {
-  Skeleton
+  Skeleton,
+  SkeletonContainer,
+  SkeletonText
 };

package/dist/contexts/TeamContext.d.ts

@@ -9,6 +9,8 @@ interface TeamContextValue {
     switchTeam: (teamId: string) => Promise<void>;
     refreshTeams: () => Promise<void>;
 }
+export declare const TEAMS_QUERY_KEY: readonly ["user-teams"];
+export declare function fetchUserTeams(): Promise<UserTeamMembership[]>;
 export declare function TeamProvider({ children }: {
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/contexts/TeamContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TeamContext.d.ts","sourceRoot":"","sources":["../../src/contexts/TeamContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+D,SAAS,EAAE,MAAM,OAAO,CAAA;AAG9F,OAAO,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAM7D,UAAU,gBAAgB;IACxB,WAAW,EAAE,IAAI,GAAG,IAAI,CAAA;IACxB,SAAS,EAAE,kBAAkB,EAAE,CAAA;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,wBAAwB,EAAE,OAAO,CAAA;IACjC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC7C,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAClC;AAID,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAsLjE;AAED,wBAAgB,cAAc,qBAM7B"}
+{"version":3,"file":"TeamContext.d.ts","sourceRoot":"","sources":["../../src/contexts/TeamContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGvG,OAAO,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAM7D,UAAU,gBAAgB;IACxB,WAAW,EAAE,IAAI,GAAG,IAAI,CAAA;IACxB,SAAS,EAAE,kBAAkB,EAAE,CAAA;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,wBAAwB,EAAE,OAAO,CAAA;IACjC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC7C,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAClC;AAKD,eAAO,MAAM,eAAe,yBAA0B,CAAA;AAGtD,wBAAsB,cAAc,IAAI,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAwBpE;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAkKjE;AAED,wBAAgB,cAAc,qBAM7B"}

package/dist/contexts/TeamContext.js

@@ -1,74 +1,94 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState, useEffect, useCallback } from "react";
+import { createContext, useContext, useState, useEffect, useCallback, useMemo } from "react";
 import { useRouter } from "next/navigation";
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAuth } from "../hooks/useAuth.js";
 import { TeamSwitchModal } from "../components/teams/TeamSwitchModal.js";
 import { APP_CONFIG_MERGED } from "../lib/config/config-sync.js";
 import { canUserCreateTeam } from "../lib/teams/helpers.js";
 const TeamContext = createContext(void 0);
+const TEAMS_QUERY_KEY = ["user-teams"];
+async function fetchUserTeams() {
+  const response = await fetch("/api/v1/teams");
+  const data = await response.json();
+  if (!response.ok || !data.data) {
+    throw new Error("Failed to fetch teams");
+  }
+  return data.data.map((t) => ({
+    team: {
+      id: t.id,
+      name: t.name,
+      slug: t.slug,
+      description: t.description,
+      ownerId: t.owner_id || t.ownerId,
+      avatarUrl: t.avatar_url || t.avatarUrl,
+      settings: t.settings || {},
+      createdAt: t.created_at || t.createdAt,
+      updatedAt: t.updated_at || t.updatedAt
+    },
+    role: t.userRole || t.user_role || t.role,
+    joinedAt: t.joinedAt || t.joined_at
+  }));
+}
 function TeamProvider({ children }) {
-  const { user } = useAuth();
+  const { user, isLoading: authLoading } = useAuth();
   const router = useRouter();
   const queryClient = useQueryClient();
   const [currentTeam, setCurrentTeam] = useState(null);
-  const [userTeams, setUserTeams] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
   const [isSwitching, setIsSwitching] = useState(false);
-  const [canCurrentUserCreateTeam, setCanCurrentUserCreateTeam] = useState(true);
+  const [initialSyncDone, setInitialSyncDone] = useState(false);
   const [switchModalOpen, setSwitchModalOpen] = useState(false);
   const [previousTeam, setPreviousTeam] = useState(null);
   const [targetTeam, setTargetTeam] = useState(null);
-  const loadUserTeams = useCallback(async () => {
+  const {
+    data: userTeams = [],
+    isLoading: teamsLoading,
+    refetch: refetchTeams
+  } = useQuery({
+    queryKey: TEAMS_QUERY_KEY,
+    queryFn: fetchUserTeams,
+    enabled: !!user && !authLoading,
+    staleTime: 1e3 * 60 * 5,
+    // Cache for 5 minutes - prevents refetch on navigation
+    gcTime: 1e3 * 60 * 60,
+    // Keep in cache for 1 hour
+    refetchOnWindowFocus: false,
+    // Don't refetch when window regains focus
+    refetchOnMount: false
+    // Don't refetch if data exists and is not stale
+  });
+  const isLoading = authLoading || teamsLoading;
+  const canCurrentUserCreateTeam = useMemo(() => {
+    if (!user || !userTeams.length) return false;
+    const { mode, options } = APP_CONFIG_MERGED.teams;
+    const ownedTeamsCount = userTeams.filter((m) => m.role === "owner").length;
+    return canUserCreateTeam(mode, options || {}, ownedTeamsCount);
+  }, [userTeams, user]);
+  useEffect(() => {
+    if (!userTeams.length || initialSyncDone) return;
+    const storedTeamId = typeof window !== "undefined" ? localStorage.getItem("activeTeamId") : null;
+    const storedTeam = userTeams.find((t) => t.team.id === storedTeamId);
+    const activeTeam = storedTeam || userTeams[0];
+    if (activeTeam) {
+      setCurrentTeam(activeTeam.team);
+      if (typeof window !== "undefined" && storedTeamId !== activeTeam.team.id) {
+        localStorage.setItem("activeTeamId", activeTeam.team.id);
+      }
+      if (typeof window !== "undefined") {
+        fetch("/api/v1/teams/switch", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ teamId: activeTeam.team.id })
+        }).catch((err) => console.error("Failed to sync team cookie:", err));
+      }
+      setInitialSyncDone(true);
+    }
+  }, [userTeams, initialSyncDone]);
+  useEffect(() => {
     if (!user) {
-      setUserTeams([]);
       setCurrentTeam(null);
-      setIsLoading(false);
-      return;
-    }
-    try {
-      setIsLoading(true);
-      const response = await fetch("/api/v1/teams");
-      const data = await response.json();
-      if (response.ok && data.data) {
-        const teams = data.data.map((t) => ({
-          team: {
-            id: t.id,
-            name: t.name,
-            slug: t.slug,
-            description: t.description,
-            ownerId: t.owner_id || t.ownerId,
-            avatarUrl: t.avatar_url || t.avatarUrl,
-            settings: t.settings || {},
-            createdAt: t.created_at || t.createdAt,
-            updatedAt: t.updated_at || t.updatedAt
-          },
-          role: t.userRole || t.user_role || t.role,
-          joinedAt: t.joinedAt || t.joined_at
-        }));
-        setUserTeams(teams);
-        const storedTeamId = typeof window !== "undefined" ? localStorage.getItem("activeTeamId") : null;
-        const storedTeam = teams.find((t) => t.team.id === storedTeamId);
-        const activeTeam = storedTeam || teams[0];
-        if (activeTeam) {
-          setCurrentTeam(activeTeam.team);
-          if (typeof window !== "undefined" && storedTeamId !== activeTeam.team.id) {
-            localStorage.setItem("activeTeamId", activeTeam.team.id);
-          }
-          if (typeof window !== "undefined") {
-            fetch("/api/v1/teams/switch", {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ teamId: activeTeam.team.id })
-            }).catch((err) => console.error("Failed to sync team cookie:", err));
-          }
-        }
-      }
-    } catch (error) {
-      console.error("Failed to load teams:", error);
-    } finally {
-      setIsLoading(false);
+      setInitialSyncDone(false);
     }
   }, [user]);
   const handleSwitchComplete = useCallback(() => {
@@ -109,21 +129,9 @@ function TeamProvider({ children }) {
     }
   }, [userTeams, currentTeam]);
   const refreshTeams = useCallback(async () => {
-    await loadUserTeams();
-  }, [loadUserTeams]);
-  useEffect(() => {
-    loadUserTeams();
-  }, [loadUserTeams]);
-  useEffect(() => {
-    if (!user || !userTeams) {
-      setCanCurrentUserCreateTeam(false);
-      return;
-    }
-    const { mode, options } = APP_CONFIG_MERGED.teams;
-    const ownedTeamsCount = userTeams.filter((m) => m.role === "owner").length;
-    const canCreate = canUserCreateTeam(mode, options || {}, ownedTeamsCount);
-    setCanCurrentUserCreateTeam(canCreate);
-  }, [userTeams, user]);
+    await queryClient.invalidateQueries({ queryKey: TEAMS_QUERY_KEY });
+    await refetchTeams();
+  }, [queryClient, refetchTeams]);
   return /* @__PURE__ */ jsxs(
     TeamContext.Provider,
     {
@@ -159,6 +167,8 @@ function useTeamContext() {
   return context;
 }
 export {
+  TEAMS_QUERY_KEY,
   TeamProvider,
+  fetchUserTeams,
   useTeamContext
 };

package/dist/hooks/usePrefetch.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Hook to prefetch settings page data on hover
+ *
+ * @example
+ * ```tsx
+ * function SettingsSidebar() {
+ *   const { prefetchProfile, prefetchTeams } = usePrefetchSettings()
+ *
+ *   return (
+ *     <nav>
+ *       <Link href="/dashboard/settings/profile" onMouseEnter={prefetchProfile}>
+ *         Profile
+ *       </Link>
+ *       <Link href="/dashboard/settings/teams" onMouseEnter={prefetchTeams}>
+ *         Teams
+ *       </Link>
+ *     </nav>
+ *   )
+ * }
+ * ```
+ */
+export declare function usePrefetchSettings(): {
+    prefetchProfile: () => void;
+    prefetchTeams: () => void;
+};
+/**
+ * Generic prefetch hook for any entity list
+ *
+ * @example
+ * ```tsx
+ * function EntityNav() {
+ *   const prefetchProducts = usePrefetchEntity('products')
+ *
+ *   return (
+ *     <Link href="/dashboard/products" onMouseEnter={prefetchProducts}>
+ *       Products
+ *     </Link>
+ *   )
+ * }
+ * ```
+ */
+export declare function usePrefetchEntity(entitySlug: string): () => void;
+//# sourceMappingURL=usePrefetch.d.ts.map