@enadhq/enad-react-sdk 0.0.6 → 1.0.2

package/dist/client/storefront/components/quick-view.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { ImageAsset } from "../types";
+export interface QuickViewProduct {
+    title: string;
+    images?: ImageAsset[];
+    price?: React.ReactNode;
+    description?: string;
+    href?: string;
+}
+export interface QuickViewProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    product: QuickViewProduct | null;
+    /** Presentation mode */
+    mode?: "sheet" | "modal";
+    /** Side when mode is "sheet" */
+    side?: "right" | "left";
+    /** Slot for variant selector, add-to-cart, wishlist, etc. */
+    children?: React.ReactNode;
+    /** Link label for "View full details" */
+    viewDetailsLabel?: string;
+    className?: string;
+}
+export declare function QuickView({ open, onOpenChange, product, mode, side, viewDetailsLabel, children, className, }: QuickViewProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=quick-view.d.ts.map

package/dist/client/storefront/components/quick-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quick-view.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/quick-view.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,wBAAwB;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,IAAc,EACd,IAAc,EACd,gBAAsC,EACtC,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,kDAoEhB"}

package/dist/client/storefront/components/quick-view.mjs

@@ -0,0 +1,149 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../ui/utils";
+import { useIcon } from "../../icons/icon-context";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../../ui-resolver/sheet";
+function QuickView({
+  open,
+  onOpenChange,
+  product,
+  mode = "sheet",
+  side = "right",
+  viewDetailsLabel = "View full details",
+  children,
+  className
+}) {
+  const CloseIcon = useIcon("close");
+  const titleId = React.useId();
+  if (!product) return null;
+  const { title, images = [], price, description, href } = product;
+  const imageContent = /* @__PURE__ */ jsx(QuickViewGallery, { images });
+  const content = /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", className), children: [
+    imageContent,
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 px-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("h3", { id: titleId, className: "font-enad text-lg font-semibold leading-tight", children: title }),
+        price && /* @__PURE__ */ jsx("div", { className: "text-base", children: price })
+      ] }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-relaxed", children: description }),
+      children,
+      href && /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          className: "mt-2 text-sm font-medium underline underline-offset-4 hover:text-primary transition-colors",
+          children: viewDetailsLabel
+        }
+      )
+    ] })
+  ] });
+  if (mode === "modal") {
+    return /* @__PURE__ */ jsx(ModalOverlay, { open, onOpenChange, labelId: titleId, children: /* @__PURE__ */ jsxs("div", { className: "relative max-h-[85vh] overflow-y-auto rounded-lg bg-background p-6 shadow-lg sm:max-w-lg w-full", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onOpenChange(false),
+          className: "absolute right-4 top-4 z-10 rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity",
+          "aria-label": "Close",
+          children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+        }
+      ),
+      content
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { side, className: "overflow-y-auto sm:max-w-md", children: [
+    /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: title }) }),
+    content
+  ] }) });
+}
+function QuickViewGallery({ images }) {
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  if (images.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "aspect-[4/5] w-full rounded-md bg-muted" });
+  }
+  const active = images[activeIndex];
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/5] w-full overflow-hidden rounded-md bg-muted", children: /* @__PURE__ */ jsx("img", { src: active.src, alt: active.alt ?? "", className: "size-full object-cover" }) }),
+    images.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto pb-1", children: images.map((img, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActiveIndex(i),
+        className: cn(
+          "relative size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
+          i === activeIndex ? "border-primary" : "border-transparent hover:border-muted-foreground/30"
+        ),
+        children: /* @__PURE__ */ jsx("img", { src: img.src, alt: img.alt ?? "", className: "size-full object-cover" })
+      },
+      i
+    )) })
+  ] });
+}
+function ModalOverlay({
+  open,
+  onOpenChange,
+  children,
+  labelId
+}) {
+  const overlayRef = React.useRef(null);
+  const previousFocusRef = React.useRef(null);
+  React.useEffect(() => {
+    if (open) {
+      previousFocusRef.current = document.activeElement;
+      requestAnimationFrame(() => overlayRef.current?.focus());
+    } else if (previousFocusRef.current) {
+      previousFocusRef.current.focus();
+      previousFocusRef.current = null;
+    }
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        onOpenChange(false);
+        return;
+      }
+      if (e.key === "Tab") {
+        const dialog = overlayRef.current;
+        if (!dialog) return;
+        const focusable = dialog.querySelectorAll(
+          'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: overlayRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": labelId,
+      tabIndex: -1,
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-[2px] outline-none",
+      onClick: (e) => {
+        if (e.target === overlayRef.current) onOpenChange(false);
+      },
+      children
+    }
+  );
+}
+export {
+  QuickView
+};
+//# sourceMappingURL=quick-view.mjs.map

package/dist/client/storefront/components/quick-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/components/quick-view.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetClose } from \"../../ui-resolver/sheet\";\nimport type { ImageAsset } from \"../types\";\n\n/* ─── Types ─── */\n\nexport interface QuickViewProduct {\n  title: string;\n  images?: ImageAsset[];\n  price?: React.ReactNode;\n  description?: string;\n  href?: string;\n}\n\nexport interface QuickViewProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  product: QuickViewProduct | null;\n  /** Presentation mode */\n  mode?: \"sheet\" | \"modal\";\n  /** Side when mode is \"sheet\" */\n  side?: \"right\" | \"left\";\n  /** Slot for variant selector, add-to-cart, wishlist, etc. */\n  children?: React.ReactNode;\n  /** Link label for \"View full details\" */\n  viewDetailsLabel?: string;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function QuickView({\n  open,\n  onOpenChange,\n  product,\n  mode = \"sheet\",\n  side = \"right\",\n  viewDetailsLabel = \"View full details\",\n  children,\n  className,\n}: QuickViewProps) {\n  const CloseIcon = useIcon(\"close\");\n  const titleId = React.useId();\n\n  if (!product) return null;\n\n  const { title, images = [], price, description, href } = product;\n\n  const imageContent = <QuickViewGallery images={images} />;\n\n  const content = (\n    <div className={cn(\"flex flex-col gap-6\", className)}>\n      {imageContent}\n\n      <div className=\"flex flex-col gap-4 px-1\">\n        <div className=\"flex flex-col gap-1\">\n          <h3 id={titleId} className=\"font-enad text-lg font-semibold leading-tight\">\n            {title}\n          </h3>\n          {price && <div className=\"text-base\">{price}</div>}\n        </div>\n\n        {description && (\n          <p className=\"text-sm text-muted-foreground leading-relaxed\">{description}</p>\n        )}\n\n        {children}\n\n        {href && (\n          <a\n            href={href}\n            className=\"mt-2 text-sm font-medium underline underline-offset-4 hover:text-primary transition-colors\"\n          >\n            {viewDetailsLabel}\n          </a>\n        )}\n      </div>\n    </div>\n  );\n\n  if (mode === \"modal\") {\n    return (\n      <ModalOverlay open={open} onOpenChange={onOpenChange} labelId={titleId}>\n        <div className=\"relative max-h-[85vh] overflow-y-auto rounded-lg bg-background p-6 shadow-lg sm:max-w-lg w-full\">\n          <button\n            type=\"button\"\n            onClick={() => onOpenChange(false)}\n            className=\"absolute right-4 top-4 z-10 rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity\"\n            aria-label=\"Close\"\n          >\n            <CloseIcon className=\"size-4\" />\n          </button>\n          {content}\n        </div>\n      </ModalOverlay>\n    );\n  }\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent side={side} className=\"overflow-y-auto sm:max-w-md\">\n        <SheetHeader>\n          <SheetTitle className=\"sr-only\">{title}</SheetTitle>\n        </SheetHeader>\n        {content}\n      </SheetContent>\n    </Sheet>\n  );\n}\n\n/* ─── Gallery (internal) ─── */\n\nfunction QuickViewGallery({ images }: { images: ImageAsset[] }) {\n  const [activeIndex, setActiveIndex] = React.useState(0);\n\n  if (images.length === 0) {\n    return <div className=\"aspect-[4/5] w-full rounded-md bg-muted\" />;\n  }\n\n  const active = images[activeIndex]!;\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"relative aspect-[4/5] w-full overflow-hidden rounded-md bg-muted\">\n        <img src={active.src} alt={active.alt ?? \"\"} className=\"size-full object-cover\" />\n      </div>\n\n      {images.length > 1 && (\n        <div className=\"flex gap-2 overflow-x-auto pb-1\">\n          {images.map((img, i) => (\n            <button\n              key={i}\n              type=\"button\"\n              onClick={() => setActiveIndex(i)}\n              className={cn(\n                \"relative size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none\",\n                i === activeIndex\n                  ? \"border-primary\"\n                  : \"border-transparent hover:border-muted-foreground/30\",\n              )}\n            >\n              <img src={img.src} alt={img.alt ?? \"\"} className=\"size-full object-cover\" />\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ─── Modal overlay (internal) ─── */\n\nfunction ModalOverlay({\n  open,\n  onOpenChange,\n  children,\n  labelId,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: React.ReactNode;\n  labelId?: string;\n}) {\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n  const previousFocusRef = React.useRef<HTMLElement | null>(null);\n\n  // Capture triggering element and manage focus\n  React.useEffect(() => {\n    if (open) {\n      previousFocusRef.current = document.activeElement as HTMLElement | null;\n      // Focus the dialog container after mount\n      requestAnimationFrame(() => overlayRef.current?.focus());\n    } else if (previousFocusRef.current) {\n      previousFocusRef.current.focus();\n      previousFocusRef.current = null;\n    }\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onOpenChange(false);\n        return;\n      }\n      // Focus trap: cycle Tab within the dialog\n      if (e.key === \"Tab\") {\n        const dialog = overlayRef.current;\n        if (!dialog) return;\n        const focusable = dialog.querySelectorAll<HTMLElement>(\n          'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])',\n        );\n        if (focusable.length === 0) return;\n        const first = focusable[0]!;\n        const last = focusable[focusable.length - 1]!;\n        if (e.shiftKey && document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        } else if (!e.shiftKey && document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, onOpenChange]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      ref={overlayRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={labelId}\n      tabIndex={-1}\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-[2px] outline-none\"\n      onClick={(e) => {\n        if (e.target === overlayRef.current) onOpenChange(false);\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/client/storefront/components/review-summary.d.ts

@@ -0,0 +1,17 @@
+export interface ReviewDistribution {
+    /** Star count (1-5) */
+    stars: number;
+    /** Number of reviews with this rating */
+    count: number;
+}
+export interface ReviewSummaryProps {
+    averageRating: number;
+    totalReviews: number;
+    /** Distribution from 5 stars to 1 star. Missing entries default to 0. */
+    distribution: ReviewDistribution[];
+    /** Called when user clicks a distribution bar (for filtering) */
+    onBarClick?: (stars: number) => void;
+    className?: string;
+}
+export declare function ReviewSummary({ averageRating, totalReviews, distribution, onBarClick, className, }: ReviewSummaryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=review-summary.d.ts.map

package/dist/client/storefront/components/review-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-summary.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/review-summary.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,YAAY,EAAE,kBAAkB,EAAE,CAAC;IACnC,iEAAiE;IACjE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,SAAS,GACV,EAAE,kBAAkB,2CA2DpB"}

package/dist/client/storefront/components/review-summary.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../ui/utils";
+import { StarRating } from "./star-rating";
+function ReviewSummary({
+  averageRating,
+  totalReviews,
+  distribution,
+  onBarClick,
+  className
+}) {
+  const maxCount = Math.max(1, ...distribution.map((d) => d.count));
+  const distributionMap = new Map(distribution.map((d) => [d.stars, d.count]));
+  const rows = [5, 4, 3, 2, 1].map((stars) => ({
+    stars,
+    count: distributionMap.get(stars) ?? 0
+  }));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 sm:flex-row sm:gap-8", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 sm:min-w-[120px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-4xl font-bold font-enad tabular-nums", children: averageRating.toFixed(1) }),
+      /* @__PURE__ */ jsx(StarRating, { rating: averageRating, size: "sm" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+        totalReviews.toLocaleString(),
+        " ",
+        totalReviews === 1 ? "review" : "reviews"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2", children: rows.map(({ stars, count }) => {
+      const pct = maxCount > 0 ? count / maxCount * 100 : 0;
+      const isClickable = onBarClick && count > 0;
+      const Tag = isClickable ? "button" : "div";
+      return /* @__PURE__ */ jsxs(
+        Tag,
+        {
+          ...isClickable && {
+            type: "button",
+            onClick: () => onBarClick(stars)
+          },
+          className: cn(
+            "flex items-center gap-3 text-sm",
+            isClickable && "cursor-pointer hover:opacity-80 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "w-8 shrink-0 text-right tabular-nums font-enad", children: [
+              stars,
+              "\u2605"
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "relative h-2.5 flex-1 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute inset-y-0 left-0 rounded-full bg-(--enad-star-color) transition-all duration-300",
+                style: { width: `${pct}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { className: "w-10 shrink-0 text-right tabular-nums text-muted-foreground", children: count })
+          ]
+        },
+        stars
+      );
+    }) })
+  ] });
+}
+export {
+  ReviewSummary
+};
+//# sourceMappingURL=review-summary.mjs.map

package/dist/client/storefront/components/review-summary.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/components/review-summary.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../../ui/utils\";\nimport { StarRating } from \"./star-rating\";\n\n/* ─── Types ─── */\n\nexport interface ReviewDistribution {\n  /** Star count (1-5) */\n  stars: number;\n  /** Number of reviews with this rating */\n  count: number;\n}\n\nexport interface ReviewSummaryProps {\n  averageRating: number;\n  totalReviews: number;\n  /** Distribution from 5 stars to 1 star. Missing entries default to 0. */\n  distribution: ReviewDistribution[];\n  /** Called when user clicks a distribution bar (for filtering) */\n  onBarClick?: (stars: number) => void;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function ReviewSummary({\n  averageRating,\n  totalReviews,\n  distribution,\n  onBarClick,\n  className,\n}: ReviewSummaryProps) {\n  const maxCount = Math.max(1, ...distribution.map((d) => d.count));\n\n  // Build full 5-to-1 distribution, filling missing entries with 0\n  const distributionMap = new Map(distribution.map((d) => [d.stars, d.count]));\n  const rows = [5, 4, 3, 2, 1].map((stars) => ({\n    stars,\n    count: distributionMap.get(stars) ?? 0,\n  }));\n\n  return (\n    <div className={cn(\"flex flex-col gap-4 sm:flex-row sm:gap-8\", className)}>\n      {/* Left: average */}\n      <div className=\"flex flex-col items-center gap-1 sm:min-w-[120px]\">\n        <span className=\"text-4xl font-bold font-enad tabular-nums\">\n          {averageRating.toFixed(1)}\n        </span>\n        <StarRating rating={averageRating} size=\"sm\" />\n        <span className=\"text-sm text-muted-foreground\">\n          {totalReviews.toLocaleString()} {totalReviews === 1 ? \"review\" : \"reviews\"}\n        </span>\n      </div>\n\n      {/* Right: distribution bars */}\n      <div className=\"flex flex-1 flex-col gap-2\">\n        {rows.map(({ stars, count }) => {\n          const pct = maxCount > 0 ? (count / maxCount) * 100 : 0;\n          const isClickable = onBarClick && count > 0;\n          const Tag = isClickable ? \"button\" : \"div\";\n\n          return (\n            <Tag\n              key={stars}\n              {...(isClickable && {\n                type: \"button\" as const,\n                onClick: () => onBarClick(stars),\n              })}\n              className={cn(\n                \"flex items-center gap-3 text-sm\",\n                isClickable &&\n                  \"cursor-pointer hover:opacity-80 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm\",\n              )}\n            >\n              <span className=\"w-8 shrink-0 text-right tabular-nums font-enad\">{stars}★</span>\n              <div className=\"relative h-2.5 flex-1 overflow-hidden rounded-full bg-muted\">\n                <div\n                  className=\"absolute inset-y-0 left-0 rounded-full bg-(--enad-star-color) transition-all duration-300\"\n                  style={{ width: `${pct}%` }}\n                />\n              </div>\n              <span className=\"w-10 shrink-0 text-right tabular-nums text-muted-foreground\">\n                {count}\n              </span>\n            </Tag>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA8CQ,cAIA,YAJA;AA5CR,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAuBpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,WAAW,KAAK,IAAI,GAAG,GAAG,aAAa,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAGhE,QAAM,kBAAkB,IAAI,IAAI,aAAa,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;AAC3E,QAAM,OAAO,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW;AAAA,IAC3C;AAAA,IACA,OAAO,gBAAgB,IAAI,KAAK,KAAK;AAAA,EACvC,EAAE;AAEF,SACE,qBAAC,SAAI,WAAW,GAAG,4CAA4C,SAAS,GAEtE;AAAA,yBAAC,SAAI,WAAU,qDACb;AAAA,0BAAC,UAAK,WAAU,6CACb,wBAAc,QAAQ,CAAC,GAC1B;AAAA,MACA,oBAAC,cAAW,QAAQ,eAAe,MAAK,MAAK;AAAA,MAC7C,qBAAC,UAAK,WAAU,iCACb;AAAA,qBAAa,eAAe;AAAA,QAAE;AAAA,QAAE,iBAAiB,IAAI,WAAW;AAAA,SACnE;AAAA,OACF;AAAA,IAGA,oBAAC,SAAI,WAAU,8BACZ,eAAK,IAAI,CAAC,EAAE,OAAO,MAAM,MAAM;AAC9B,YAAM,MAAM,WAAW,IAAK,QAAQ,WAAY,MAAM;AACtD,YAAM,cAAc,cAAc,QAAQ;AAC1C,YAAM,MAAM,cAAc,WAAW;AAErC,aACE;AAAA,QAAC;AAAA;AAAA,UAEE,GAAI,eAAe;AAAA,YAClB,MAAM;AAAA,YACN,SAAS,MAAM,WAAW,KAAK;AAAA,UACjC;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA,eACE;AAAA,UACJ;AAAA,UAEA;AAAA,iCAAC,UAAK,WAAU,kDAAkD;AAAA;AAAA,cAAM;AAAA,eAAC;AAAA,YACzE,oBAAC,SAAI,WAAU,+DACb;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,GAAG,GAAG,IAAI;AAAA;AAAA,YAC5B,GACF;AAAA,YACA,oBAAC,UAAK,WAAU,+DACb,iBACH;AAAA;AAAA;AAAA,QApBK;AAAA,MAqBP;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/client/storefront/components/search-autocomplete.d.ts

@@ -0,0 +1,25 @@
+export interface SearchSuggestion {
+    id: string;
+    label: string;
+    type?: "product" | "category" | "recent" | "suggestion";
+    imageUrl?: string;
+    meta?: string;
+}
+export interface SearchAutocompleteProps {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    onSearch?: (query: string) => void;
+    onSelect?: (suggestion: SearchSuggestion) => void;
+    suggestions?: SearchSuggestion[];
+    loading?: boolean;
+    placeholder?: string;
+    debounceMs?: number;
+    className?: string;
+    labels?: {
+        clear?: string;
+        noResults?: string;
+        searching?: string;
+    };
+}
+export declare function SearchAutocomplete({ value: controlledValue, onValueChange, onSearch, onSelect, suggestions, loading, placeholder, debounceMs, className, labels, }: SearchAutocompleteProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=search-autocomplete.d.ts.map

package/dist/client/storefront/components/search-autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/search-autocomplete.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,YAAY,CAAC;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAgB,EAChB,OAAe,EACf,WAAyB,EACzB,UAAgB,EAChB,SAAS,EACT,MAAW,GACZ,EAAE,uBAAuB,2CAgMzB"}

package/dist/client/storefront/components/search-autocomplete.mjs

@@ -0,0 +1,183 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../ui/utils";
+import { useIcon } from "../../icons/icon-context";
+import { Input } from "../../ui-resolver/input";
+function SearchAutocomplete({
+  value: controlledValue,
+  onValueChange,
+  onSearch,
+  onSelect,
+  suggestions = [],
+  loading = false,
+  placeholder = "Search...",
+  debounceMs = 300,
+  className,
+  labels = {}
+}) {
+  const {
+    clear: clearLabel = "Clear",
+    noResults = "No results found",
+    searching: searchingLabel = "Searching..."
+  } = labels;
+  const SearchIcon = useIcon("search");
+  const CloseIcon = useIcon("close");
+  const listboxId = React.useId();
+  const [internalValue, setInternalValue] = React.useState("");
+  const value = controlledValue ?? internalValue;
+  const setValue = onValueChange ?? setInternalValue;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const containerRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const debounceRef = React.useRef(void 0);
+  const onSearchRef = React.useRef(onSearch);
+  onSearchRef.current = onSearch;
+  const showDropdown = isOpen && value.length > 0;
+  React.useEffect(() => {
+    if (!value.trim() || !onSearchRef.current) return;
+    clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      onSearchRef.current?.(value.trim());
+    }, debounceMs);
+    return () => clearTimeout(debounceRef.current);
+  }, [value, debounceMs]);
+  React.useEffect(() => {
+    setActiveIndex(-1);
+  }, [suggestions]);
+  React.useEffect(() => {
+    function handleClick(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+  function handleKeyDown(e) {
+    if (!showDropdown) {
+      if (e.key === "ArrowDown" && value.length > 0) {
+        setIsOpen(true);
+        e.preventDefault();
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex((i) => i < suggestions.length - 1 ? i + 1 : 0);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex((i) => i > 0 ? i - 1 : suggestions.length - 1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (activeIndex >= 0 && suggestions[activeIndex]) {
+          onSelect?.(suggestions[activeIndex]);
+          setIsOpen(false);
+        } else if (onSearch) {
+          onSearch(value.trim());
+          setIsOpen(false);
+        }
+        break;
+      case "Escape":
+        setIsOpen(false);
+        inputRef.current?.blur();
+        break;
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("font-enad relative", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-(--enad-text-muted-color)" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: inputRef,
+          type: "search",
+          value,
+          onChange: (e) => {
+            setValue(e.target.value);
+            setIsOpen(true);
+          },
+          onFocus: () => value.length > 0 && setIsOpen(true),
+          onKeyDown: handleKeyDown,
+          placeholder,
+          className: "pl-9 pr-9",
+          role: "combobox",
+          "aria-expanded": showDropdown,
+          "aria-autocomplete": "list",
+          "aria-controls": listboxId,
+          "aria-activedescendant": activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0
+        }
+      ),
+      value.length > 0 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setValue("");
+            setIsOpen(false);
+            inputRef.current?.focus();
+          },
+          className: "absolute right-3 top-1/2 -translate-y-1/2 text-(--enad-text-muted-color) hover:text-(--enad-text-primary-color)",
+          "aria-label": clearLabel,
+          children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+        }
+      )
+    ] }),
+    showDropdown && /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        className: cn(
+          "absolute z-50 mt-1 w-full overflow-hidden rounded-(--enad-card-radius) border border-(--enad-border-color)",
+          "bg-(--enad-surface) shadow-lg"
+        ),
+        children: [
+          loading && /* @__PURE__ */ jsx("li", { className: "px-4 py-3 text-sm text-(--enad-text-muted-color) animate-pulse", children: searchingLabel }),
+          !loading && suggestions.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-4 py-3 text-sm text-(--enad-text-muted-color)", children: noResults }),
+          !loading && suggestions.map((suggestion, index) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              id: `${listboxId}-option-${index}`,
+              role: "option",
+              "aria-selected": index === activeIndex,
+              onMouseEnter: () => setActiveIndex(index),
+              onClick: () => {
+                onSelect?.(suggestion);
+                setIsOpen(false);
+              },
+              className: cn(
+                "flex cursor-pointer items-center gap-3 px-4 py-2.5 text-sm transition-colors",
+                index === activeIndex ? "bg-(--enad-hover-bg)" : "hover:bg-(--enad-hover-bg)"
+              ),
+              children: [
+                suggestion.imageUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: suggestion.imageUrl,
+                    alt: "",
+                    className: "size-8 shrink-0 rounded object-cover"
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center text-(--enad-text-muted-color)", children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-(--enad-text-primary-color)", children: suggestion.label }),
+                  suggestion.meta && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-(--enad-text-muted-color)", children: suggestion.meta })
+                ] }),
+                suggestion.type && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-(--enad-hover-bg) px-2 py-0.5 text-[10px] font-medium text-(--enad-text-muted-color) capitalize", children: suggestion.type })
+              ]
+            },
+            suggestion.id
+          ))
+        ]
+      }
+    )
+  ] });
+}
+export {
+  SearchAutocomplete
+};
+//# sourceMappingURL=search-autocomplete.mjs.map

package/dist/client/storefront/components/search-autocomplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/components/search-autocomplete.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Input } from \"../../ui-resolver/input\";\n\nexport interface SearchSuggestion {\n  id: string;\n  label: string;\n  type?: \"product\" | \"category\" | \"recent\" | \"suggestion\";\n  imageUrl?: string;\n  meta?: string;\n}\n\nexport interface SearchAutocompleteProps {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  onSearch?: (query: string) => void;\n  onSelect?: (suggestion: SearchSuggestion) => void;\n  suggestions?: SearchSuggestion[];\n  loading?: boolean;\n  placeholder?: string;\n  debounceMs?: number;\n  className?: string;\n  labels?: {\n    clear?: string;\n    noResults?: string;\n    searching?: string;\n  };\n}\n\nexport function SearchAutocomplete({\n  value: controlledValue,\n  onValueChange,\n  onSearch,\n  onSelect,\n  suggestions = [],\n  loading = false,\n  placeholder = \"Search...\",\n  debounceMs = 300,\n  className,\n  labels = {},\n}: SearchAutocompleteProps) {\n  const {\n    clear: clearLabel = \"Clear\",\n    noResults = \"No results found\",\n    searching: searchingLabel = \"Searching...\",\n  } = labels;\n\n  const SearchIcon = useIcon(\"search\");\n  const CloseIcon = useIcon(\"close\");\n\n  const listboxId = React.useId();\n  const [internalValue, setInternalValue] = React.useState(\"\");\n  const value = controlledValue ?? internalValue;\n  const setValue = onValueChange ?? setInternalValue;\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [activeIndex, setActiveIndex] = React.useState(-1);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const onSearchRef = React.useRef(onSearch);\n  onSearchRef.current = onSearch;\n\n  const showDropdown = isOpen && value.length > 0;\n\n  React.useEffect(() => {\n    if (!value.trim() || !onSearchRef.current) return;\n    clearTimeout(debounceRef.current);\n    debounceRef.current = setTimeout(() => {\n      onSearchRef.current?.(value.trim());\n    }, debounceMs);\n    return () => clearTimeout(debounceRef.current);\n  }, [value, debounceMs]);\n\n  React.useEffect(() => {\n    setActiveIndex(-1);\n  }, [suggestions]);\n\n  // Close on outside click\n  React.useEffect(() => {\n    function handleClick(e: MouseEvent) {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    }\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, []);\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (!showDropdown) {\n      if (e.key === \"ArrowDown\" && value.length > 0) {\n        setIsOpen(true);\n        e.preventDefault();\n      }\n      return;\n    }\n\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        setActiveIndex((i) => (i < suggestions.length - 1 ? i + 1 : 0));\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        setActiveIndex((i) => (i > 0 ? i - 1 : suggestions.length - 1));\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        if (activeIndex >= 0 && suggestions[activeIndex]) {\n          onSelect?.(suggestions[activeIndex]);\n          setIsOpen(false);\n        } else if (onSearch) {\n          onSearch(value.trim());\n          setIsOpen(false);\n        }\n        break;\n      case \"Escape\":\n        setIsOpen(false);\n        inputRef.current?.blur();\n        break;\n    }\n  }\n\n  return (\n    <div ref={containerRef} className={cn(\"font-enad relative\", className)}>\n      <div className=\"relative\">\n        <SearchIcon className=\"pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-(--enad-text-muted-color)\" />\n        <Input\n          ref={inputRef}\n          type=\"search\"\n          value={value}\n          onChange={(e) => {\n            setValue(e.target.value);\n            setIsOpen(true);\n          }}\n          onFocus={() => value.length > 0 && setIsOpen(true)}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          className=\"pl-9 pr-9\"\n          role=\"combobox\"\n          aria-expanded={showDropdown}\n          aria-autocomplete=\"list\"\n          aria-controls={listboxId}\n          aria-activedescendant={\n            activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\n          }\n        />\n        {value.length > 0 && (\n          <button\n            type=\"button\"\n            onClick={() => {\n              setValue(\"\");\n              setIsOpen(false);\n              inputRef.current?.focus();\n            }}\n            className=\"absolute right-3 top-1/2 -translate-y-1/2 text-(--enad-text-muted-color) hover:text-(--enad-text-primary-color)\"\n            aria-label={clearLabel}\n          >\n            <CloseIcon className=\"size-4\" />\n          </button>\n        )}\n      </div>\n\n      {showDropdown && (\n        <ul\n          id={listboxId}\n          role=\"listbox\"\n          className={cn(\n            \"absolute z-50 mt-1 w-full overflow-hidden rounded-(--enad-card-radius) border border-(--enad-border-color)\",\n            \"bg-(--enad-surface) shadow-lg\",\n          )}\n        >\n          {loading && (\n            <li className=\"px-4 py-3 text-sm text-(--enad-text-muted-color) animate-pulse\">\n              {searchingLabel}\n            </li>\n          )}\n\n          {!loading && suggestions.length === 0 && (\n            <li className=\"px-4 py-3 text-sm text-(--enad-text-muted-color)\">{noResults}</li>\n          )}\n\n          {!loading &&\n            suggestions.map((suggestion, index) => (\n              <li\n                key={suggestion.id}\n                id={`${listboxId}-option-${index}`}\n                role=\"option\"\n                aria-selected={index === activeIndex}\n                onMouseEnter={() => setActiveIndex(index)}\n                onClick={() => {\n                  onSelect?.(suggestion);\n                  setIsOpen(false);\n                }}\n                className={cn(\n                  \"flex cursor-pointer items-center gap-3 px-4 py-2.5 text-sm transition-colors\",\n                  index === activeIndex ? \"bg-(--enad-hover-bg)\" : \"hover:bg-(--enad-hover-bg)\",\n                )}\n              >\n                {suggestion.imageUrl ? (\n                  <img\n                    src={suggestion.imageUrl}\n                    alt=\"\"\n                    className=\"size-8 shrink-0 rounded object-cover\"\n                  />\n                ) : (\n                  <span className=\"flex size-8 shrink-0 items-center justify-center text-(--enad-text-muted-color)\">\n                    <SearchIcon className=\"size-4\" />\n                  </span>\n                )}\n\n                <div className=\"flex-1 min-w-0\">\n                  <p className=\"truncate text-(--enad-text-primary-color)\">{suggestion.label}</p>\n                  {suggestion.meta && (\n                    <p className=\"truncate text-xs text-(--enad-text-muted-color)\">\n                      {suggestion.meta}\n                    </p>\n                  )}\n                </div>\n\n                {suggestion.type && (\n                  <span className=\"shrink-0 rounded-full bg-(--enad-hover-bg) px-2 py-0.5 text-[10px] font-medium text-(--enad-text-muted-color) capitalize\">\n                    {suggestion.type}\n                  </span>\n                )}\n              </li>\n            ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/client/storefront/components/section-nav.d.ts

@@ -0,0 +1,20 @@
+interface SectionLink {
+    label: string;
+    /** Anchor href, e.g. "#specs" */
+    href: string;
+    /** Optional group name for the overflow popover */
+    group?: string;
+}
+interface SectionNavProps {
+    links: SectionLink[];
+    /** How many pills to show inline before overflow (default: 4) */
+    visibleCount?: number;
+    /** Top offset in px for sticky positioning, e.g. header height (default: 0) */
+    stickyOffset?: number;
+    /** Label for the overflow trigger (default: "More") */
+    moreLabel?: string;
+    className?: string;
+}
+declare function SectionNav({ links, visibleCount, stickyOffset, moreLabel, className, }: SectionNavProps): import("react/jsx-runtime").JSX.Element;
+export { SectionNav, type SectionLink, type SectionNavProps };
+//# sourceMappingURL=section-nav.d.ts.map

package/dist/client/storefront/components/section-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-nav.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/components/section-nav.tsx"],"names":[],"mappings":"AASA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,YAAgB,EAChB,YAAgB,EAChB,SAAkB,EAClB,SAAS,GACV,EAAE,eAAe,2CA2MjB;AAED,OAAO,EAAE,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,CAAC"}