@cellarnode/ui 0.16.8 → 0.17.1

package/dist/components/opportunity-brief.js

@@ -1,5 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils";
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function formatPriceRange(range, currency) {
+    if (!range)
+        return null;
+    const { min, max } = range;
+    if (min == null && max == null)
+        return null;
+    const cur = currency ?? "";
+    const prefix = cur ? `${cur} ` : "";
+    if (min != null && max != null)
+        return `${prefix}${min} – ${max}`.trim();
+    if (min != null)
+        return `${prefix}${min}+`.trim();
+    return `up to ${prefix}${max}`.trim();
+}
+function formatHsCode(heading, subheadings) {
+    const parts = [];
+    if (heading)
+        parts.push(heading);
+    if (subheadings && subheadings.length > 0) {
+        parts.push(subheadings.map((s) => s.code).join(", "));
+    }
+    if (parts.length === 0)
+        return null;
+    return `HS ${parts.join(" · ")}`;
+}
 /**
  * Compact opportunity-context banner used at the top of the producer picker
  * and anywhere an opportunity needs to be identified at a glance (importer
@@ -7,7 +35,27 @@ import { cn } from "../lib/utils";
  *
  * Intentionally visual-only — all interaction happens on the host container.
  */
-export function OpportunityBrief({ name, buyerName, chips, eyebrow = "Looking for", className, }) {
-    return (_jsxs("div", { className: cn("rounded-lg border-l-[3px] border-primary bg-primary/5 px-3 py-2.5", className), children: [_jsx("p", { className: "text-[10px] font-bold uppercase tracking-[0.08em] text-primary", children: eyebrow }), _jsx("p", { className: "mt-0.5 text-sm font-semibold text-foreground", children: name }), buyerName && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: buyerName })), chips.length > 0 && (_jsx("div", { className: "mt-1.5 flex flex-wrap gap-1", children: chips.map((c) => (_jsx("span", { className: "rounded-full bg-primary/15 px-2 py-0.5 text-[10px] font-semibold text-primary", children: c.label }, c.label))) }))] }));
+export function OpportunityBrief({ name, buyerName, chips, detail, eyebrow = "Looking for", className, }) {
+    const description = detail?.description?.trim() || null;
+    const hsCode = formatHsCode(detail?.hsHeading, detail?.hsSubheadings);
+    const priceRangeLabel = formatPriceRange(detail?.priceRange, detail?.currency);
+    const vintageRequirement = detail?.vintageRequirement?.trim() || null;
+    const certificateRequirements = detail?.certificateRequirements?.filter((r) => r && r.trim().length > 0) ?? [];
+    // Packaging/closure rendered as chips only if the caller hasn't already
+    // supplied equivalent chips (case-insensitive match on label).
+    const chipLabels = new Set(chips.map((c) => c.label.toLowerCase()));
+    const extraChips = [];
+    if (detail?.packaging && !chipLabels.has(detail.packaging.toLowerCase())) {
+        extraChips.push({ label: detail.packaging });
+    }
+    if (detail?.closure && !chipLabels.has(detail.closure.toLowerCase())) {
+        extraChips.push({ label: detail.closure });
+    }
+    const hasAnyDetail = description != null ||
+        hsCode != null ||
+        priceRangeLabel != null ||
+        vintageRequirement != null ||
+        certificateRequirements.length > 0;
+    return (_jsxs("div", { className: cn("rounded-lg border-l-[3px] border-primary bg-primary/5 px-3 py-2.5", className), children: [_jsx("p", { className: "text-[10px] font-bold uppercase tracking-[0.08em] text-primary", children: eyebrow }), _jsx("p", { className: "mt-0.5 text-sm font-semibold text-foreground", children: name }), buyerName && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: buyerName })), description && (_jsx("p", { className: "mt-1 line-clamp-2 text-[11px]/5 text-foreground/70", children: description })), (chips.length > 0 || extraChips.length > 0) && (_jsxs("div", { className: "mt-1.5 flex flex-wrap gap-1", children: [chips.map((c) => (_jsx("span", { className: "rounded-full bg-primary/15 px-2 py-0.5 text-[10px] font-semibold text-primary", children: c.label }, c.label))), extraChips.map((c) => (_jsx("span", { className: "rounded-full bg-primary/15 px-2 py-0.5 text-[10px] font-semibold text-primary", children: c.label }, `extra-${c.label}`)))] })), hasAnyDetail && (_jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted-foreground", children: [priceRangeLabel && (_jsxs("span", { children: [_jsx("span", { className: "font-semibold text-foreground/80", children: "Price " }), priceRangeLabel] })), vintageRequirement && (_jsxs("span", { children: [_jsx("span", { className: "font-semibold text-foreground/80", children: "Vintage " }), vintageRequirement] })), hsCode && _jsx("span", { children: hsCode })] })), certificateRequirements.length > 0 && (_jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1", children: [_jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-foreground/70", children: "Certs" }), certificateRequirements.map((r) => (_jsx("span", { className: "rounded-full border border-border bg-background/60 px-2 py-0.5 text-[10px] font-medium text-foreground/80", children: r }, r)))] }))] }));
 }
 //# sourceMappingURL=opportunity-brief.js.map

package/dist/components/opportunity-brief.js.map

@@ -1 +1 @@
-{"version":3,"file":"opportunity-brief.js","sourceRoot":"","sources":["../../src/components/opportunity-brief.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAkBlC;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,IAAI,EACJ,SAAS,EACT,KAAK,EACL,OAAO,GAAG,aAAa,EACvB,SAAS,GACa;IACtB,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,mEAAmE,EACnE,SAAS,CACV,aAED,YAAG,SAAS,EAAC,gEAAgE,YAC1E,OAAO,GACN,EACJ,YAAG,SAAS,EAAC,8CAA8C,YAAE,IAAI,GAAK,EACrE,SAAS,IAAI,CACZ,YAAG,SAAS,EAAC,mCAAmC,YAAE,SAAS,GAAK,CACjE,EACA,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACnB,cAAK,SAAS,EAAC,6BAA6B,YACzC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAChB,eAEE,SAAS,EAAC,+EAA+E,YAExF,CAAC,CAAC,KAAK,IAHH,CAAC,CAAC,KAAK,CAIP,CACR,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"opportunity-brief.js","sourceRoot":"","sources":["../../src/components/opportunity-brief.tsx"],"names":[],"mappings":"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"}

package/dist/components/opportunity-brief.stories.d.ts

@@ -14,4 +14,17 @@ export declare const Default: Story;
 export declare const NoBuyer: Story;
 export declare const NoChips: Story;
 export declare const CustomEyebrow: Story;
+/**
+ * Rich banner: consumer has the full `OpportunityDetail` (from live
+ * `GET /opportunities/:id` or an offer's frozen `opportunitySnapshot`) and
+ * passes `detail` alongside the slim chips. All rich fields are optional —
+ * absent fields are silently skipped.
+ */
+export declare const WithDetail: Story;
+/**
+ * Partial detail: only some rich fields are present (e.g., no certificate
+ * requirements, no HS code). Absent fields are silently skipped — no empty
+ * labels.
+ */
+export declare const WithPartialDetail: Story;
 //# sourceMappingURL=opportunity-brief.stories.d.ts.map

package/dist/components/opportunity-brief.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"opportunity-brief.stories.d.ts","sourceRoot":"","sources":["../../src/components/opportunity-brief.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,QAAA,MAAM,IAAI;;;;;;;CAK+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC"}
+{"version":3,"file":"opportunity-brief.stories.d.ts","sourceRoot":"","sources":["../../src/components/opportunity-brief.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,QAAA,MAAM,IAAI;;;;;;;CAK+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAU/B,CAAC"}

package/dist/components/opportunity-brief.stories.js

@@ -35,4 +35,52 @@ export const CustomEyebrow = {
         chips: [{ label: "Organic" }, { label: "<15 EUR" }],
     },
 };
+/**
+ * Rich banner: consumer has the full `OpportunityDetail` (from live
+ * `GET /opportunities/:id` or an offer's frozen `opportunitySnapshot`) and
+ * passes `detail` alongside the slim chips. All rich fields are optional —
+ * absent fields are silently skipped.
+ */
+export const WithDetail = {
+    args: {
+        name: "brandy spirits · Spain Selection",
+        buyerName: "Systembolaget",
+        chips: [
+            { label: "Spirits" },
+            { label: "Brandy" },
+            { label: "Spain" },
+            { label: "330 L" },
+            { label: "due Mar 17" },
+        ],
+        detail: {
+            description: "Systembolaget is seeking a premium Spanish brandy (Jerez region preferred) with a solera-aged profile for its Q2 2026 spirits selection. Minimum 36-month ageing; exclusivity preferred.",
+            hsHeading: "2208",
+            hsSubheadings: [
+                { code: "2208.20", description: "Spirits from grape wine/marc" },
+            ],
+            priceRange: { min: 18, max: 32 },
+            currency: "EUR",
+            vintageRequirement: "NV — 36mo+ aged",
+            packaging: "bottle",
+            closure: "cork",
+            certificateRequirements: ["Organic", "DOP Jerez", "BRC"],
+        },
+    },
+};
+/**
+ * Partial detail: only some rich fields are present (e.g., no certificate
+ * requirements, no HS code). Absent fields are silently skipped — no empty
+ * labels.
+ */
+export const WithPartialDetail = {
+    args: {
+        name: "Riesling Selection 2026",
+        chips: [{ label: "Wine" }, { label: "White wine" }, { label: "Germany" }],
+        detail: {
+            description: "Looking for a late-harvest Riesling, medium-sweet, from Mosel or Rheingau.",
+            priceRange: { min: 12, max: null },
+            currency: "EUR",
+        },
+    },
+};
 //# sourceMappingURL=opportunity-brief.stories.js.map

package/dist/components/opportunity-brief.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"opportunity-brief.stories.js","sourceRoot":"","sources":["../../src/components/opportunity-brief.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;CACK,CAAC;AAE1C,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,kCAAkC;QACxC,SAAS,EAAE,eAAe;QAC1B,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,SAAS,EAAE;YACpB,EAAE,KAAK,EAAE,QAAQ,EAAE;YACnB,EAAE,KAAK,EAAE,OAAO,EAAE;YAClB,EAAE,KAAK,EAAE,OAAO,EAAE;YAClB,EAAE,KAAK,EAAE,YAAY,EAAE;SACxB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,yBAAyB;QAC/B,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;KAC1E;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,EAAE,EAAE;CACjD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,IAAI,EAAE,uBAAuB;QAC7B,OAAO,EAAE,cAAc;QACvB,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;KACpD;CACF,CAAC"}
+{"version":3,"file":"opportunity-brief.stories.js","sourceRoot":"","sources":["../../src/components/opportunity-brief.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;CACK,CAAC;AAE1C,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,kCAAkC;QACxC,SAAS,EAAE,eAAe;QAC1B,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,SAAS,EAAE;YACpB,EAAE,KAAK,EAAE,QAAQ,EAAE;YACnB,EAAE,KAAK,EAAE,OAAO,EAAE;YAClB,EAAE,KAAK,EAAE,OAAO,EAAE;YAClB,EAAE,KAAK,EAAE,YAAY,EAAE;SACxB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,yBAAyB;QAC/B,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;KAC1E;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,EAAE,EAAE;CACjD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,IAAI,EAAE,uBAAuB;QAC7B,OAAO,EAAE,cAAc;QACvB,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;KACpD;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,kCAAkC;QACxC,SAAS,EAAE,eAAe;QAC1B,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,SAAS,EAAE;YACpB,EAAE,KAAK,EAAE,QAAQ,EAAE;YACnB,EAAE,KAAK,EAAE,OAAO,EAAE;YAClB,EAAE,KAAK,EAAE,OAAO,EAAE;YAClB,EAAE,KAAK,EAAE,YAAY,EAAE;SACxB;QACD,MAAM,EAAE;YACN,WAAW,EACT,0LAA0L;YAC5L,SAAS,EAAE,MAAM;YACjB,aAAa,EAAE;gBACb,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,8BAA8B,EAAE;aACjE;YACD,UAAU,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;YAChC,QAAQ,EAAE,KAAK;YACf,kBAAkB,EAAE,iBAAiB;YACrC,SAAS,EAAE,QAAQ;YACnB,OAAO,EAAE,MAAM;YACf,uBAAuB,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,CAAC;SACzD;KACF;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,IAAI,EAAE,yBAAyB;QAC/B,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;QACzE,MAAM,EAAE;YACN,WAAW,EAAE,4EAA4E;YACzF,UAAU,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE;YAClC,QAAQ,EAAE,KAAK;SAChB;KACF;CACF,CAAC"}

package/dist/components/profile-header-skeleton.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type SkeletonTier } from "../skeleton/stagger";
+export interface ProfileHeaderSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    tier?: SkeletonTier;
+}
+/**
+ * Replaces the 9-part hand-rolled skeleton currently inlined in
+ * cellarnode-importer-dashboard's organization-profile-content.tsx.
+ * Shape: banner (wide rectangle) + avatar (circle) + title + description + 2 grid cards.
+ */
+export declare function ProfileHeaderSkeleton({ tier, className, ...rest }: ProfileHeaderSkeletonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=profile-header-skeleton.d.ts.map

package/dist/components/profile-header-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-header-skeleton.d.ts","sourceRoot":"","sources":["../../src/components/profile-header-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAsB,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAE5E,MAAM,WAAW,0BAA2B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtF,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACR,EAAE,0BAA0B,2CA6B5B"}

package/dist/components/profile-header-skeleton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+import { useSkeletonContext } from "../skeleton/stagger";
+/**
+ * Replaces the 9-part hand-rolled skeleton currently inlined in
+ * cellarnode-importer-dashboard's organization-profile-content.tsx.
+ * Shape: banner (wide rectangle) + avatar (circle) + title + description + 2 grid cards.
+ */
+export function ProfileHeaderSkeleton({ tier, className, ...rest }) {
+    const ctx = useSkeletonContext();
+    const resolvedTier = tier ?? (ctx.hasProvider ? ctx.tier : "hero");
+    return (_jsxs("div", { className: cn("flex flex-col gap-6", className), ...rest, children: [_jsx(Skeleton, { tier: resolvedTier, className: "h-40 w-full rounded-2xl" }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx(Skeleton, { tier: resolvedTier, className: "size-20 shrink-0 rounded-full" }), _jsxs("div", { className: "flex flex-1 flex-col gap-3", children: [_jsx(Skeleton, { tier: resolvedTier, className: "h-6 w-64" }), _jsx(Skeleton, { tier: resolvedTier, className: "h-4 w-full max-w-2xl" }), _jsx(Skeleton, { tier: resolvedTier, className: "h-4 w-3/4 max-w-xl" })] })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-3 rounded-2xl border border-border/60 bg-card p-5", children: [_jsx(Skeleton, { tier: resolvedTier, className: "h-3 w-24" }), _jsx(Skeleton, { tier: resolvedTier, className: "h-5 w-40" }), _jsx(Skeleton, { tier: resolvedTier, className: "h-3 w-full max-w-xs" })] }), _jsxs("div", { className: "flex flex-col gap-3 rounded-2xl border border-border/60 bg-card p-5", children: [_jsx(Skeleton, { tier: resolvedTier, className: "h-3 w-24" }), _jsx(Skeleton, { tier: resolvedTier, className: "h-5 w-40" }), _jsx(Skeleton, { tier: resolvedTier, className: "h-3 w-full max-w-xs" })] })] })] }));
+}
+//# sourceMappingURL=profile-header-skeleton.js.map

package/dist/components/profile-header-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-header-skeleton.js","sourceRoot":"","sources":["../../src/components/profile-header-skeleton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAqB,MAAM,qBAAqB,CAAC;AAM5E;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAC,EACpC,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACoB;IAC3B,MAAM,GAAG,GAAG,kBAAkB,EAAE,CAAC;IACjC,MAAM,YAAY,GAAiB,IAAI,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAEjF,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAAM,IAAI,aAC5D,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,yBAAyB,GAAG,EACpE,eAAK,SAAS,EAAC,wBAAwB,aACrC,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,+BAA+B,GAAG,EAC1E,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,UAAU,GAAG,EACrD,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,sBAAsB,GAAG,EACjE,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,oBAAoB,GAAG,IAC3D,IACF,EACN,eAAK,SAAS,EAAC,2BAA2B,aACxC,eAAK,SAAS,EAAC,qEAAqE,aAClF,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,UAAU,GAAG,EACrD,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,UAAU,GAAG,EACrD,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,qBAAqB,GAAG,IAC5D,EACN,eAAK,SAAS,EAAC,qEAAqE,aAClF,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,UAAU,GAAG,EACrD,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,UAAU,GAAG,EACrD,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,qBAAqB,GAAG,IAC5D,IACF,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/profile-header-skeleton.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { ProfileHeaderSkeleton } from "./profile-header-skeleton";
+declare const meta: {
+    title: string;
+    component: typeof ProfileHeaderSkeleton;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InProvider: Story;
+//# sourceMappingURL=profile-header-skeleton.stories.d.ts.map

package/dist/components/profile-header-skeleton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-header-skeleton.stories.d.ts","sourceRoot":"","sources":["../../src/components/profile-header-skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGlE,QAAA,MAAM,IAAI;;;;;;;CAKoC,CAAC;AAE/C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AACjC,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC"}

package/dist/components/profile-header-skeleton.stories.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ProfileHeaderSkeleton } from "./profile-header-skeleton";
+import { SkeletonProvider } from "../skeleton/provider";
+const meta = {
+    title: "Components/ProfileHeaderSkeleton",
+    component: ProfileHeaderSkeleton,
+    tags: ["autodocs"],
+    parameters: { layout: "padded" },
+};
+export default meta;
+export const Default = {};
+export const InProvider = {
+    render: () => (_jsx(SkeletonProvider, { tier: "hero", children: _jsx(ProfileHeaderSkeleton, {}) })),
+};
+//# sourceMappingURL=profile-header-skeleton.stories.js.map

package/dist/components/profile-header-skeleton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-header-skeleton.stories.js","sourceRoot":"","sources":["../../src/components/profile-header-skeleton.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;CACY,CAAC;AAE/C,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AACjC,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,KAAC,gBAAgB,IAAC,IAAI,EAAC,MAAM,YAC3B,KAAC,qBAAqB,KAAG,GACR,CACpB;CACF,CAAC"}

package/dist/components/skeleton.d.ts

@@ -1,3 +1,8 @@
-declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+import { type SkeletonTier } from "../skeleton/stagger";
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    tier?: SkeletonTier;
+}
+declare function Skeleton({ tier, className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
 export { Skeleton };
 //# sourceMappingURL=skeleton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAEA,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAE9E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAsB,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAE5E,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAY7D;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/skeleton.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils";
-function Skeleton({ className, ...props }) {
-    return _jsx("div", { className: cn("animate-pulse rounded-md bg-muted", className), ...props });
+import { useSkeletonContext } from "../skeleton/stagger";
+function Skeleton({ tier, className, ...props }) {
+    const ctx = useSkeletonContext();
+    const resolvedTier = tier ?? ctx.tier;
+    return (_jsx("div", { "data-skeleton": "", "data-tier": resolvedTier, "aria-hidden": "true", className: cn("rounded-md", className), ...props }));
 }
 export { Skeleton };
 //# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwC;IAC7E,OAAO,cAAK,SAAS,EAAE,EAAE,CAAC,mCAAmC,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AAC3F,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAqB,MAAM,qBAAqB,CAAC;AAM5E,SAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiB;IAC5D,MAAM,GAAG,GAAG,kBAAkB,EAAE,CAAC;IACjC,MAAM,YAAY,GAAiB,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC;IACpD,OAAO,CACL,+BACgB,EAAE,eACL,YAAY,iBACX,MAAM,EAClB,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,KAClC,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -7,10 +7,18 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    argTypes: {
+        tier: {
+            control: "select";
+            options: string[];
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const CardSkeleton: Story;
+export declare const ThreeTiers: Story;
+export declare const InProviderInheritsTier: Story;
+export declare const CardComposition: Story;
 export declare const CircleSkeleton: Story;
 //# sourceMappingURL=skeleton.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.stories.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI;;;;;;;CAKuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4B1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC"}
+{"version":3,"file":"skeleton.stories.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAWuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAUpC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC"}

package/dist/components/skeleton.stories.js

@@ -1,19 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skeleton } from "./skeleton";
+import { SkeletonProvider } from "../skeleton/provider";
 const meta = {
     title: "Components/Skeleton",
     component: Skeleton,
     tags: ["autodocs"],
     parameters: { layout: "centered" },
+    argTypes: {
+        tier: {
+            control: "select",
+            options: ["hero", "data", "inline"],
+        },
+    },
 };
 export default meta;
 export const Default = {
-    args: {
-        className: "h-4 w-48",
-    },
+    args: { className: "h-4 w-48" },
+};
+export const ThreeTiers = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "w-16 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Inline" }), _jsx(Skeleton, { tier: "inline", className: "h-4 w-48" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "w-16 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Data" }), _jsx(Skeleton, { tier: "data", className: "h-4 w-48" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "w-16 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Hero" }), _jsx(Skeleton, { tier: "hero", className: "h-4 w-48" })] })] })),
+};
+export const InProviderInheritsTier = {
+    render: () => (_jsx(SkeletonProvider, { tier: "data", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-4 w-64" }), _jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-4 w-56" })] }) })),
 };
-export const CardSkeleton = {
-    render: () => (_jsxs("div", { className: "w-80 rounded-lg border bg-card p-8 shadow-sm", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Skeleton, { className: "h-5 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-5/6" })] }), _jsxs("div", { className: "mt-6 flex flex-col gap-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx(Skeleton, { className: "h-3 w-16" }), _jsx(Skeleton, { className: "h-3 w-20" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx(Skeleton, { className: "h-3 w-16" }), _jsx(Skeleton, { className: "h-3 w-14" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx(Skeleton, { className: "h-3 w-16" }), _jsx(Skeleton, { className: "h-3 w-10" })] })] }), _jsxs("div", { className: "mt-6 flex gap-2", children: [_jsx(Skeleton, { className: "h-6 w-20 rounded-md" }), _jsx(Skeleton, { className: "h-6 w-16 rounded-md" })] })] })),
+export const CardComposition = {
+    render: () => (_jsx("div", { className: "w-80 rounded-lg border bg-card p-8 shadow-sm", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Skeleton, { className: "h-5 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-5/6" })] }) })),
 };
 export const CircleSkeleton = {
     render: () => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "size-12 rounded-full" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-3 w-24" })] })] })),

package/dist/components/skeleton.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.stories.js","sourceRoot":"","sources":["../../src/components/skeleton.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;CACH,CAAC;AAElC,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,SAAS,EAAE,UAAU;KACtB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,SAAS,EAAC,8CAA8C,aAC3D,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,GAAG,EAClC,KAAC,QAAQ,IAAC,SAAS,EAAC,YAAY,GAAG,EACnC,KAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,GAAG,IAC9B,EACN,eAAK,SAAS,EAAC,0BAA0B,aACvC,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IAC7B,EACN,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IAC7B,EACN,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IAC7B,IACF,EACN,eAAK,SAAS,EAAC,iBAAiB,aAC9B,KAAC,QAAQ,IAAC,SAAS,EAAC,qBAAqB,GAAG,EAC5C,KAAC,QAAQ,IAAC,SAAS,EAAC,qBAAqB,GAAG,IACxC,IACF,CACP;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,QAAQ,IAAC,SAAS,EAAC,sBAAsB,GAAG,EAC7C,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IAC7B,IACF,CACP;CACF,CAAC"}
+{"version":3,"file":"skeleton.stories.js","sourceRoot":"","sources":["../../src/components/skeleton.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;IAClC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC;SACpC;KACF;CAC8B,CAAC;AAElC,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,SAAS,EAAC,qBAAqB,aAClC,eAAK,SAAS,EAAC,yBAAyB,aACtC,eAAM,SAAS,EAAC,0EAA0E,uBAAc,EACxG,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,UAAU,GAAG,IAC3C,EACN,eAAK,SAAS,EAAC,yBAAyB,aACtC,eAAM,SAAS,EAAC,0EAA0E,qBAAY,EACtG,KAAC,QAAQ,IAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,UAAU,GAAG,IACzC,EACN,eAAK,SAAS,EAAC,yBAAyB,aACtC,eAAM,SAAS,EAAC,0EAA0E,qBAAY,EACtG,KAAC,QAAQ,IAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,UAAU,GAAG,IACzC,IACF,CACP;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAU;IAC3C,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,KAAC,gBAAgB,IAAC,IAAI,EAAC,MAAM,YAC3B,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IAC7B,GACW,CACpB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,cAAK,SAAS,EAAC,8CAA8C,YAC3D,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,GAAG,EAClC,KAAC,QAAQ,IAAC,SAAS,EAAC,YAAY,GAAG,EACnC,KAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,GAAG,IAC9B,GACF,CACP;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,QAAQ,IAAC,SAAS,EAAC,sBAAsB,GAAG,EAC7C,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IAC7B,IACF,CACP;CACF,CAAC"}

package/dist/components/sortable-card-shell.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sortable-card-shell.test.d.ts.map

package/dist/components/sortable-card-shell.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-card-shell.test.d.ts","sourceRoot":"","sources":["../../src/components/sortable-card-shell.test.tsx"],"names":[],"mappings":""}

package/dist/components/sortable-card-shell.test.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, beforeAll } from "vitest";
+import { render, screen } from "@testing-library/react";
+// @dnd-kit/dom touches `ResizeObserver` at module load time; jsdom does not
+// provide one. Install a no-op polyfill BEFORE importing @dnd-kit/react or
+// the shell (which transitively imports @dnd-kit/dom).
+if (typeof globalThis.ResizeObserver === "undefined") {
+    class ResizeObserverPolyfill {
+        observe() { }
+        unobserve() { }
+        disconnect() { }
+    }
+    globalThis.ResizeObserver =
+        ResizeObserverPolyfill;
+}
+// Imports deferred to after the polyfill so module-level access succeeds.
+const { DragDropProvider } = await import("@dnd-kit/react");
+const { SortableCardShell, SORTABLE_CARD_NO_DRAG_SELECTOR } = await import("./sortable-card-shell");
+beforeAll(() => {
+    // Sanity check — confirm the polyfill stuck.
+    expect(typeof globalThis.ResizeObserver).toBe("function");
+});
+// ─── Test harness ───────────────────────────────────────────────────────────
+//
+// `SortableCardShell` uses `useSortable` / `useDraggable` from @dnd-kit/react,
+// which require a `DragDropProvider` ancestor. All tests wrap children in the
+// provider; we are NOT testing dnd-kit's internals (activation, pointer
+// tracking, drop detection) — we trust those. We test the two invariants
+// this shell owns:
+//   1. Visual affordances (grip is aria-hidden + pointer-events-none).
+//   2. The interactive-element guard SELECTOR used by PointerSensor's
+//      `preventActivation` hook. The selector itself is a pure string, so
+//      we can verify its semantics by querying DOM with `closest()` — this
+//      is exactly the same call the guard performs at runtime.
+//
+// We do NOT try to actually fire a drag and assert the sensor's internal
+// state: that would require a much heavier jsdom + PointerEvent polyfill
+// setup and would mostly re-test @dnd-kit itself.
+function renderWithProvider(ui) {
+    return render(_jsx(DragDropProvider, { children: ui }));
+}
+describe("SortableCardShell", () => {
+    it("renders children (smoke test, sortable mode)", () => {
+        renderWithProvider(_jsx(SortableCardShell, { id: "card-1", index: 0, group: "col-a", children: _jsx("div", { "data-testid": "card-body", children: "Ch\u00E2teau Margaux" }) }));
+        expect(screen.getByTestId("card-body")).toBeInTheDocument();
+        expect(screen.getByText("Château Margaux")).toBeInTheDocument();
+    });
+    it("renders children in draggable mode", () => {
+        renderWithProvider(_jsx(SortableCardShell, { id: "card-2", mode: "draggable", children: _jsx("div", { "data-testid": "card-body", children: "P\u00E9trus 2015" }) }));
+        expect(screen.getByTestId("card-body")).toBeInTheDocument();
+    });
+    it("renders a grip affordance that is aria-hidden and pointer-events-none", () => {
+        const { container } = renderWithProvider(_jsx(SortableCardShell, { id: "card-grip", index: 0, group: "col-a", children: _jsx("div", { children: "body" }) }));
+        // The grip is an aria-hidden <span> sibling of the card body. Query it
+        // by attribute — this is the most robust selector since the grip has no
+        // accessible name by design.
+        const grip = container.querySelector('[aria-hidden="true"]');
+        expect(grip).not.toBeNull();
+        // Pointer events must be disabled so the whole card remains the drag
+        // activation surface — the grip is purely visual.
+        expect(grip?.className).toContain("pointer-events-none");
+        // lucide-react renders an inline SVG inside the grip.
+        expect(grip?.querySelector("svg")).not.toBeNull();
+    });
+    it("omits the grip when hideGrip is true", () => {
+        const { container } = renderWithProvider(_jsx(SortableCardShell, { id: "card-no-grip", index: 0, group: "col-a", hideGrip: true, children: _jsx("div", { children: "body" }) }));
+        expect(container.querySelector('[aria-hidden="true"]')).toBeNull();
+    });
+    // ─── Interactive-element guard ────────────────────────────────────────────
+    //
+    // The shell registers a PointerSensor with
+    // `preventActivation: (e) => shouldPreventDragActivation(e)`, which does
+    // `target.closest(SORTABLE_CARD_NO_DRAG_SELECTOR)`. We verify the selector
+    // matches the right elements; that is the same check the guard performs.
+    it("interactive guard: a <button> inside the card matches the no-drag selector", () => {
+        renderWithProvider(_jsx(SortableCardShell, { id: "card-btn", index: 0, group: "col-a", children: _jsx("div", { children: _jsx("button", { type: "button", "data-testid": "row-menu", children: "Menu" }) }) }));
+        const btn = screen.getByTestId("row-menu");
+        // `closest()` on the button itself should return the button — meaning
+        // a pointerdown on that target would short-circuit activation.
+        expect(btn.closest(SORTABLE_CARD_NO_DRAG_SELECTOR)).toBe(btn);
+    });
+    it("interactive guard: an element with data-no-drag matches the no-drag selector", () => {
+        renderWithProvider(_jsx(SortableCardShell, { id: "card-no-drag", index: 0, group: "col-a", children: _jsx("div", { children: _jsx("div", { "data-no-drag": true, "data-testid": "badge", children: "Badge" }) }) }));
+        const badge = screen.getByTestId("badge");
+        expect(badge.closest(SORTABLE_CARD_NO_DRAG_SELECTOR)).toBe(badge);
+    });
+    it("interactive guard: a plain <div> does NOT match the no-drag selector (drag would proceed)", () => {
+        renderWithProvider(_jsx(SortableCardShell, { id: "card-plain", index: 0, group: "col-a", children: _jsx("div", { "data-testid": "plain-body", children: "Drag me from here" }) }));
+        const plain = screen.getByTestId("plain-body");
+        // No ancestor or self matches any interactive selector — activation is
+        // allowed to proceed (drag would start).
+        expect(plain.closest(SORTABLE_CARD_NO_DRAG_SELECTOR)).toBeNull();
+    });
+    it("interactive guard: a nested element inside a <button> matches via closest()", () => {
+        // Realistic case: a button containing an icon <span> — the pointerdown
+        // target is often the inner element, and `closest()` should still find
+        // the wrapping <button> ancestor.
+        renderWithProvider(_jsx(SortableCardShell, { id: "card-nested", index: 0, group: "col-a", children: _jsx("div", { children: _jsx("button", { type: "button", children: _jsx("span", { "data-testid": "icon", children: "x" }) }) }) }));
+        const icon = screen.getByTestId("icon");
+        const match = icon.closest(SORTABLE_CARD_NO_DRAG_SELECTOR);
+        expect(match).not.toBeNull();
+        expect(match?.tagName).toBe("BUTTON");
+    });
+    it("exports a selector string that includes the common interactive tags", () => {
+        // Defensive snapshot of the guard's surface area. If this list ever
+        // shrinks, a regression would silently break click-through; this test
+        // will flag it.
+        expect(SORTABLE_CARD_NO_DRAG_SELECTOR).toContain("[data-no-drag]");
+        expect(SORTABLE_CARD_NO_DRAG_SELECTOR).toContain("button");
+        expect(SORTABLE_CARD_NO_DRAG_SELECTOR).toContain("a");
+        expect(SORTABLE_CARD_NO_DRAG_SELECTOR).toContain("input");
+        expect(SORTABLE_CARD_NO_DRAG_SELECTOR).toContain("[role='menuitem']");
+    });
+});
+//# sourceMappingURL=sortable-card-shell.test.js.map

package/dist/components/sortable-card-shell.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-card-shell.test.js","sourceRoot":"","sources":["../../src/components/sortable-card-shell.test.tsx"],"names":[],"mappings":"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"}

package/dist/components/stat-card.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type SkeletonTier } from "../skeleton/stagger";
 export interface StatCardProps {
     icon: React.ReactNode;
     label: string;
@@ -8,5 +9,13 @@ export interface StatCardProps {
     renderLink?: (href: string, children: React.ReactNode) => React.ReactNode;
     className?: string;
 }
-export declare function StatCard({ icon, label, value, description, href, renderLink, className, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+declare function StatCardBase({ icon, label, value, description, href, renderLink, className, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+export interface StatCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    tier?: SkeletonTier;
+}
+declare function StatCardSkeleton({ tier, style, className, ...rest }: StatCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare const StatCard: typeof StatCardBase & {
+    Skeleton: typeof StatCardSkeleton;
+};
+export {};
 //# sourceMappingURL=stat-card.d.ts.map

package/dist/components/stat-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/components/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,aAAa,2CAiCf"}
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/components/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAE7F,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,YAAY,CAAC,EACpB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,aAAa,2CAiCf;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,iBAAS,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,2CAgCnF;AAED,eAAO,MAAM,QAAQ;;CAA8D,CAAC"}

package/dist/components/stat-card.js

@@ -1,10 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../lib/utils";
-export function StatCard({ icon, label, value, description, href, renderLink, className, }) {
+import { Skeleton } from "./skeleton";
+import { useCascadeIndex, useSkeletonContext } from "../skeleton/stagger";
+function StatCardBase({ icon, label, value, description, href, renderLink, className, }) {
     const cardContent = (_jsxs("div", { className: cn("h-full border-border/60 bg-card rounded-2xl p-5 transition-colors", href && renderLink && "hover:bg-accent/30 cursor-pointer", className), children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: label }), _jsx("p", { className: "text-3xl font-bold tracking-tight text-foreground", children: value })] }), _jsx("div", { className: "tone-icon tone-brand shrink-0 rounded-xl p-2.5", children: icon })] }), description && (_jsx("p", { className: "mt-4 text-sm/5 text-muted-foreground", children: description }))] }));
     if (href && renderLink) {
         return _jsx(_Fragment, { children: renderLink(href, cardContent) });
     }
     return cardContent;
 }
+function StatCardSkeleton({ tier, style, className, ...rest }) {
+    const ctx = useSkeletonContext();
+    const resolvedTier = tier ?? (ctx.hasProvider ? ctx.tier : "hero");
+    const index = useCascadeIndex();
+    const delayMs = index * ctx.stagger;
+    const mergedStyle = {
+        ...(style ?? {}),
+        ["--skeleton-delay"]: `${delayMs}ms`,
+    };
+    return (_jsxs("div", { "data-skeleton-card": "", "data-tier": resolvedTier, className: cn("rounded-2xl border border-border/60 bg-card p-5", className), style: mergedStyle, ...rest, children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "grid gap-2.5", children: [_jsx(Skeleton, { tier: resolvedTier, className: "h-3 w-20" }), _jsx(Skeleton, { tier: resolvedTier, className: "h-7 w-24" })] }), _jsx(Skeleton, { tier: resolvedTier, className: "size-9 rounded-xl" })] }), _jsx(Skeleton, { tier: resolvedTier, className: "mt-4 h-3 w-40" })] }));
+}
+export const StatCard = Object.assign(StatCardBase, { Skeleton: StatCardSkeleton });
 //# sourceMappingURL=stat-card.js.map

package/dist/components/stat-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.js","sourceRoot":"","sources":["../../src/components/stat-card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAYlC,MAAM,UAAU,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAU,EACV,SAAS,GACK;IACd,MAAM,WAAW,GAAG,CAClB,eACE,SAAS,EAAE,EAAE,CACX,mEAAmE,EACnE,IAAI,IAAI,UAAU,IAAI,mCAAmC,EACzD,SAAS,CACV,aAED,eAAK,SAAS,EAAC,wCAAwC,aACrD,eAAK,SAAS,EAAC,cAAc,aAC3B,YAAG,SAAS,EAAC,yEAAyE,YACnF,KAAK,GACJ,EACJ,YAAG,SAAS,EAAC,mDAAmD,YAC7D,KAAK,GACJ,IACA,EACN,cAAK,SAAS,EAAC,gDAAgD,YAC5D,IAAI,GACD,IACF,EACL,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,sCAAsC,YAAE,WAAW,GAAK,CACtE,IACG,CACP,CAAC;IAEF,IAAI,IAAI,IAAI,UAAU,EAAE,CAAC;QACvB,OAAO,4BAAG,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,GAAI,CAAC;IAC9C,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC"}
+{"version":3,"file":"stat-card.js","sourceRoot":"","sources":["../../src/components/stat-card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAqB,MAAM,qBAAqB,CAAC;AAY7F,SAAS,YAAY,CAAC,EACpB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAU,EACV,SAAS,GACK;IACd,MAAM,WAAW,GAAG,CAClB,eACE,SAAS,EAAE,EAAE,CACX,mEAAmE,EACnE,IAAI,IAAI,UAAU,IAAI,mCAAmC,EACzD,SAAS,CACV,aAED,eAAK,SAAS,EAAC,wCAAwC,aACrD,eAAK,SAAS,EAAC,cAAc,aAC3B,YAAG,SAAS,EAAC,yEAAyE,YACnF,KAAK,GACJ,EACJ,YAAG,SAAS,EAAC,mDAAmD,YAC7D,KAAK,GACJ,IACA,EACN,cAAK,SAAS,EAAC,gDAAgD,YAC5D,IAAI,GACD,IACF,EACL,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,sCAAsC,YAAE,WAAW,GAAK,CACtE,IACG,CACP,CAAC;IAEF,IAAI,IAAI,IAAI,UAAU,EAAE,CAAC;QACvB,OAAO,4BAAG,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,GAAI,CAAC;IAC9C,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC;AAMD,SAAS,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAyB;IAClF,MAAM,GAAG,GAAG,kBAAkB,EAAE,CAAC;IACjC,MAAM,YAAY,GAAiB,IAAI,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACjF,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,OAAO,GAAG,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC;IAEpC,MAAM,WAAW,GAAwB;QACvC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;QAChB,CAAC,kBAA4B,CAAC,EAAE,GAAG,OAAO,IAAI;KAC/C,CAAC;IAEF,OAAO,CACL,qCACqB,EAAE,eACV,YAAY,EACvB,SAAS,EAAE,EAAE,CACX,iDAAiD,EACjD,SAAS,CACV,EACD,KAAK,EAAE,WAAW,KACd,IAAI,aAER,eAAK,SAAS,EAAC,wCAAwC,aACrD,eAAK,SAAS,EAAC,cAAc,aAC3B,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,UAAU,GAAG,EACrD,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,UAAU,GAAG,IACjD,EACN,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,mBAAmB,GAAG,IAC1D,EACN,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,eAAe,GAAG,IACtD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC,CAAC"}

package/dist/components/stat-card.stories.d.ts

@@ -1,8 +1,9 @@
 import type { StoryObj } from "@storybook/react-vite";
-import { StatCard } from "./stat-card";
 declare const meta: {
     title: string;
-    component: typeof StatCard;
+    component: (({ icon, label, value, description, href, renderLink, className, }: import("./stat-card").StatCardProps) => import("react/jsx-runtime").JSX.Element) & {
+        Skeleton: ({ tier, style, className, ...rest }: import("./stat-card").StatCardSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+    };
     tags: string[];
     parameters: {
         layout: string;
@@ -14,4 +15,7 @@ export declare const Default: Story;
 export declare const WithDescription: Story;
 export declare const Grid: Story;
 export declare const Clickable: Story;
+export declare const SkeletonStandalone: Story;
+export declare const SkeletonInProvider: Story;
+export declare const SkeletonInlineTier: Story;
 //# sourceMappingURL=stat-card.stories.d.ts.map

package/dist/components/stat-card.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.stories.d.ts","sourceRoot":"","sources":["../../src/components/stat-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,QAAA,MAAM,IAAI;;;;;;;CAKuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAoEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KA8BlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC"}
+{"version":3,"file":"stat-card.stories.d.ts","sourceRoot":"","sources":["../../src/components/stat-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAsE5D,QAAA,MAAM,IAAI;;;;;;;;;CAKuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KA8BlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAGhC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAYhC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAGhC,CAAC"}