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

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

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "./skeleton.js";
+function SkeletonHeroSection() {
+  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col items-center justify-center px-4 py-24 text-center", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-96 max-w-full sm:h-16" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "mt-6 h-6 w-[32rem] max-w-full" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-6 w-96 max-w-full" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "mt-10 h-12 w-40" })
+  ] });
+}
+function SkeletonFeaturesSection() {
+  return /* @__PURE__ */ jsx("section", { className: "px-4 py-24 bg-muted/50", children: /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-64 mx-auto" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "mt-4 h-5 w-96 mx-auto" }),
+    /* @__PURE__ */ jsx("div", { className: "mt-12 grid gap-8 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "p-6 rounded-lg border bg-card", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-12 rounded-lg" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "mt-4 h-6 w-32" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-4 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "mt-1 h-4 w-3/4" })
+    ] }, i)) })
+  ] }) });
+}
+function SkeletonLandingPage() {
+  return /* @__PURE__ */ jsxs("main", { className: "flex min-h-screen flex-col", children: [
+    /* @__PURE__ */ jsx(SkeletonHeroSection, {}),
+    /* @__PURE__ */ jsx(SkeletonFeaturesSection, {})
+  ] });
+}
+function SkeletonSupportPage() {
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto px-4 py-12", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-48" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-5 w-80" }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-8 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-16" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-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", 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-32 w-full" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-32" })
+    ] })
+  ] });
+}
+export {
+  SkeletonFeaturesSection,
+  SkeletonHeroSection,
+  SkeletonLandingPage,
+  SkeletonSupportPage
+};

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

@@ -0,0 +1,54 @@
+/**
+ * Skeleton components specifically for settings pages
+ * Provides realistic loading states that match the settings page structure
+ *
+ * Performance optimizations:
+ * - Uses SkeletonContainer for content-visibility optimization
+ * - CSS containment isolates layout calculations
+ * - Supports prefers-reduced-motion
+ */
+/**
+ * Skeleton for settings navigation card
+ */
+export declare function SkeletonSettingsNavCard(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for settings overview page (navigation cards)
+ */
+export declare function SkeletonSettingsOverview(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for profile form page
+ */
+export declare function SkeletonProfileForm(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for billing/plans page
+ */
+export declare function SkeletonBillingPage(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for password change page
+ */
+export declare function SkeletonPasswordPage(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for security page (sessions list)
+ */
+export declare function SkeletonSecurityPage(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for API keys page
+ */
+export declare function SkeletonApiKeysPage(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for notifications page
+ */
+export declare function SkeletonNotificationsPage(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for teams page
+ */
+export declare function SkeletonTeamsPage(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for invoices page
+ */
+export declare function SkeletonInvoicesPage(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Skeleton for plans page
+ */
+export declare function SkeletonPlansPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=skeleton-settings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-settings.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton-settings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH;;GAEG;AACH,wBAAgB,uBAAuB,4CAYtC;AAED;;GAEG;AACH,wBAAgB,wBAAwB,4CAsBvC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,4CAkFlC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,4CAqDlC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,4CAmCnC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,4CAkCnC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,4CAoClC;AAED;;GAEG;AACH,wBAAgB,yBAAyB,4CA2BxC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,4CA2ChC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,4CA2CnC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,4CAqChC"}

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"}